/* Athus Proteção Veicular: estilos do site em HTML puro (cores e medidas tiradas do tema Avada do WordPress) */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/mulish.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: only light;
  --azul: #2973b8;
  --amarelo: #dedf54;
  --amarelo-escuro: #d6d72e;
  --marinho: #27334a;
  --cinza: #f4f5fa;
  --branco: #fff;
  --verde-whatsapp: #25d366;
  --titulo: Arial, Helvetica, sans-serif;
  --texto: "Mulish", Arial, Helvetica, sans-serif;
  --largura: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; background: var(--marinho); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: -0.015em;
  color: var(--marinho);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--azul); }
p { margin: 0 0 1em; }
h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--marinho);
  margin: 0 0 0.6em;
}
h2 { font-size: 44px; line-height: 1.3; }
h3 { font-size: 22px; line-height: 1.3; }
.ic { width: 1em; height: 1em; flex: none; }
.container { max-width: var(--largura); margin: 0 auto; padding: 0 30px; }
.container-estreito { max-width: 1000px; margin: 0 auto; padding: 0 30px; }
.centro { text-align: center; }
.titulo-centro { text-align: center; }

.pular { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--marinho); color: var(--branco); padding: 10px 16px; }
.pular:focus { left: 10px; top: 10px; }

/* ---------------------------------------------------------------- botões */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--amarelo);
  color: var(--marinho);
  font-family: var(--titulo);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: capitalize;
  text-decoration: none;
  padding: 18px 36px;
  border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.botao .ic { font-size: 18px; }
.botao:hover, .botao:focus-visible { background: var(--marinho); color: var(--branco); }
.botao-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--verde-whatsapp);
  color: #0b3d1f;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 5px;
  transition: background-color .2s, color .2s;
}
.botao-whatsapp .ic { font-size: 24px; }
.botao-whatsapp:hover, .botao-whatsapp:focus-visible { background: #1da851; color: var(--branco); }

/* ---------------------------------------------------------------- cabeçalho */
.cabecalho { background: var(--azul); position: sticky; top: 0; z-index: 50; }
.cabecalho-in {
  min-height: 100px;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.logo img { width: 245px; height: auto; }
.menu-painel { display: flex; align-items: center; gap: 40px; }
.menu-lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; }
.menu-lista a {
  color: var(--amarelo);
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 19px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.menu-lista a:hover, .menu-lista a:focus-visible { color: var(--branco); }
.menu-lista a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menu { flex: 1; display: flex; justify-content: flex-end; }
.menu-painel { flex: 1; justify-content: space-between; }
.menu-lista { margin-left: auto; margin-right: auto; }
.menu-botao {
  display: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--branco);
  color: var(--marinho);
  font-size: 26px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.menu-botao .ic-fechar { display: none; }
.menu-botao[aria-expanded="true"] .ic-abrir { display: none; }
.menu-botao[aria-expanded="true"] .ic-fechar { display: block; }

@media (max-width: 1100px) {
  .cabecalho-in { padding: 0 30px; }
  .menu-lista { gap: 22px; }
  .botao-topo { padding: 14px 22px; font-size: 15px; }
}
@media (max-width: 960px) {
  .cabecalho-in { min-height: 100px; padding: 0 30px; }
  .menu-botao { display: inline-flex; }
  .menu { flex: none; position: static; }
  .menu-painel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--marinho);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 30px 30px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
  }
  .menu-botao[aria-expanded="true"] + .menu-painel { display: flex; }
  .menu-lista { flex-direction: column; gap: 0; margin: 0; }
  .menu-lista li { border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .menu-lista a { display: block; padding: 14px 0; color: var(--branco); font-size: 19px; }
  .menu-lista a[aria-current="page"] { color: var(--amarelo); text-decoration: none; }
  .botao-topo { margin-top: 22px; justify-content: center; }
}
@media (max-width: 600px) {
  .cabecalho-in { padding: 0 20px; }
  .logo img { width: 230px; }
}

/* ---------------------------------------------------------------- topo da home (hero) */
.hero {
  position: relative;
  min-height: 750px;
  padding: 140px 0 100px;
  background: var(--marinho);
  color: var(--branco);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-fundo, .hero-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-fundo img { object-fit: cover; object-position: center; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 28, 61, .54) 0%, rgba(23, 28, 61, .92) 100%);
}
.hero-in {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 60px;
  align-items: center;
  padding-right: 110px;
}
.hero-in > * { min-width: 0; }
@media (max-width: 1100px) { .hero-in { padding-right: 30px; } }
.hero h1 {
  color: var(--branco);
  font-size: 50px;
  line-height: 1.4;
  text-align: center;
  margin: 0 auto;
  max-width: 640px;
}
.destaque { position: relative; display: inline-block; white-space: nowrap; }
.circulo {
  position: absolute;
  left: -6%;
  top: -18%;
  width: 116%;
  max-width: none;
  height: 140%;
  overflow: visible;
  pointer-events: none;
}
.circulo path { fill: none; stroke: var(--amarelo); stroke-width: 4; stroke-linecap: round; }
.cotacao {
  background: var(--branco);
  color: var(--marinho);
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, .4);
  padding: 30px;
  text-align: center;
}
.cotacao h2 { font-family: var(--titulo); font-size: 20px; margin: 0 0 14px; letter-spacing: 0; }
.cotacao p { font-size: 16px; line-height: 1.6; margin: 0 0 22px; }

@media (max-width: 960px) {
  .hero { min-height: 0; padding: 100px 0 80px; }
  .hero-in { grid-template-columns: 1fr; gap: 40px; padding-right: 30px; }
  .hero h1 { font-size: 40px; }
  .cotacao { max-width: 440px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hero { padding: 70px 0 60px; }
  .hero h1 { font-size: 30px; }
}

/* ---------------------------------------------------------------- seções */
.secao { padding: 80px 0; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4%; }
.grade-2 > * { min-width: 0; }
.foto-arredondada { border-radius: 10px; width: 100%; }
.sobre-foto .foto-arredondada { aspect-ratio: 1080 / 857; object-fit: cover; }
.sobre-texto { padding-top: 20px; margin-bottom: 50px; }
.sobre-texto h2, .para-quem h2 { text-align: center; }
.acrostico p { margin: 0 0 1em; }
.inicial { color: var(--azul); font-size: 24px; line-height: 1; font-family: var(--titulo); }
.para-quem { padding: 50px 0; }
.para-quem-foto { align-self: start; }
.para-quem-foto .foto-arredondada { aspect-ratio: 750 / 490; object-fit: cover; }

.checklist { list-style: none; margin: 0 0 1.5em; padding: 0; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 6px; line-height: 1.6; }
.checklist .marca {
  width: 27px;
  height: 27px;
  padding: 7px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
}
.checklist-bonus { margin-top: 10px; }
.checklist-bonus li { margin-bottom: 12px; }
.nota { margin: 0 0 40px; }
#beneficios { padding-bottom: 100px; }
#beneficios .titulo-centro { margin-bottom: 40px; }
#beneficios .centro { margin: 40px 0 60px; }

.lema { color: var(--azul); font-size: 17px; margin: 0 0 10px; }
.lema-centro { text-align: center; }
.lema-escuro { color: var(--amarelo); }
.pontilhado { border: 0; border-top: 1px dotted rgba(222, 223, 84, .9); width: 190px; margin: 0 0 24px; }
.pontilhado.curto { width: 60px; border-top-color: var(--azul); margin-top: 20px; }

.vantagens { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 50px 4%; }
.vantagem { display: flex; gap: 44px; align-items: flex-start; min-width: 0; }
.vantagem-icone {
  flex: none;
  width: 96px;
  height: 96px;
  border: 4px solid var(--azul);
  border-radius: 50%;
  color: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.vantagem-texto { max-width: 400px; padding-top: 8px; }
.vantagem-texto h3 { margin-bottom: 12px; }
.vantagem-texto p { margin: 0 0 1em; line-height: 1.75; }

/* faixa escura do mercado solidário */
.solidario {
  position: relative;
  margin-top: 40px;
  padding: 120px 0;
  background-color: var(--marinho);
  color: var(--branco);
  overflow: hidden;
}
.solidario::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .03;
  background-size: 60%;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M26%201h-7a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3V4a3%203%200%2000-3-3zM56%201h-7a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3V4a3%203%200%2000-3-3zM11%2031H4a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3v-7a3%203%200%2000-3-3zM26%2031h-7a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3v-7a3%203%200%2000-3-3zM41%2031h-7a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3v-7a3%203%200%2000-3-3zM11%2016H4a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3v-7a3%203%200%2000-3-3zM41%2016h-7a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3v-7a3%203%200%2000-3-3zM56%2016h-7a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3v-7a3%203%200%2000-3-3zM26%2046h-7a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3v-7a3%203%200%2000-3-3zM56%2046h-7a3%203%200%2000-3%203v7a3%203%200%20003%203h7a3%203%200%20003-3v-7a3%203%200%2000-3-3z%22%20fill%3D%22rgba%2841%2C115%2C184%2C1%29%22%2F%3E%3C%2Fsvg%3E");
}
.solidario-in { position: relative; align-items: center; }
.solidario h2 { color: var(--branco); font-size: 36px; line-height: 1.4; margin: 0; max-width: 640px; }
.solidario-foto { position: relative; justify-self: center; width: min(500px, 100%); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.anel {
  width: 100%;
  height: 100%;
  border: 2px dotted rgba(255, 255, 255, .35);
  border-radius: 50%;
  padding: 7%;
  display: block;
}
.anel img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.solidario-icone {
  position: absolute;
  right: 0;
  top: 40%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

/* faixa amarela com o botão de cotação */
.faixa-cta { padding: 100px 0 0; }
.faixa-cta-caixa {
  max-width: 1080px;
  margin: 0 auto;
  min-height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(100deg, #e1e25f 0%, var(--amarelo) 45%, var(--amarelo-escuro) 100%);
  box-shadow: 0 10px 40px rgba(222, 223, 84, .45);
  padding: 30px;
}
.botao-claro { background: rgba(255, 255, 255, .28); }
.botao-claro:hover, .botao-claro:focus-visible { background: var(--marinho); }

.secao-app { padding: 100px 0 50px; border-bottom: 1px solid var(--marinho); }
.secao-app .titulo-centro { font-size: 44px; margin-bottom: 40px; }
.apps { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.apps a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  text-decoration: none;
}
.apps a:hover span:last-child, .apps a:focus-visible span:last-child { text-decoration: underline; }
.app-icone {
  width: 80px;
  height: 80px;
  background: var(--marinho);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
}
.secao-blog { padding: 50px 0 80px; }
.secao-blog .titulo-centro { margin-bottom: 20px; }
.secao-blog .centro .botao { margin-top: 40px; }

/* ---------------------------------------------------------------- páginas internas */
.titulo-pagina { padding: 100px 0 90px; }
.titulo-pagina h1 { color: var(--azul); font-size: 44px; margin: 0; }
.secao-contato { padding-top: 40px; }
.contato-grade { display: grid; grid-template-columns: 1fr 2fr; gap: 40px 5%; align-items: start; margin-bottom: 60px; }
.contato-grade > * { min-width: 0; }
.contato-texto h2 { font-size: 44px; margin-bottom: 30px; }
.contato-texto p { font-size: 15px; line-height: 1.75; }
.contato-texto strong { font-weight: 700; }
.contato-caixa { background: var(--cinza); border-radius: 0 0 0 30px; padding: 30px 40px 40px; }
.contato-lista { list-style: none; margin: 0 0 24px; padding: 0; }
.contato-lista li { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; font-family: var(--titulo); font-size: 24px; line-height: 1.3; }
.contato-lista li.contato-endereco { font-size: 16px; }
.contato-lista a { color: var(--marinho); text-decoration: none; }
.contato-lista a:hover, .contato-lista a:focus-visible { color: var(--azul); text-decoration: underline; }
.bolinha {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.contato-botao { text-align: center; margin: 0; }
.mapa { border-radius: 10px; overflow: hidden; background: var(--cinza); }
.mapa iframe { display: block; width: 100%; height: 400px; border: 0; }
.mapa-link { margin: 12px 0 0; font-size: 15px; }
.mapa-link a { display: inline-flex; align-items: center; gap: 8px; }

.secao-obrigado { padding: 70px 0; }
.secao-obrigado h1 { font-size: 36px; line-height: 1.3; margin: 0; }

.secao-404 { padding: 30px 0 80px; }
.erro-in { align-items: center; }
.erro-in img { max-width: 600px; width: 100%; }
.erro-texto { text-align: center; }
.erro-texto h1 { font-size: 26px; line-height: 1.5; max-width: 460px; margin: 0 auto 30px; }

/* ---------------------------------------------------------------- rodapé */
.rodape { position: relative; background: var(--azul); color: var(--branco); padding: 160px 0 60px; overflow: hidden; }
.rodape::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  transform: scale(-1, 1);
  background-size: cover;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221920%22%20height%3D%22954%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22rgba%2839%2C51%2C74%2C1%29%22%3E%3Cpath%20d%3D%22M250.018-408.977c69.019-18.494%20142.66%201.238%20193.185%2051.763L718.31-82.107c50.525%2050.525%2070.258%20124.167%2051.764%20193.185L669.378%20486.881c-18.493%2069.019-72.403%20122.928-141.421%20141.422L152.154%20728.999c-69.019%2018.493-142.66-1.239-193.186-51.764l-275.106-275.107c-50.525-50.525-70.258-124.167-51.764-193.185l100.696-375.803c18.493-69.018%2072.403-122.928%20141.421-141.421l375.803-100.696zM1646.73%201264.15c33.13%208.88%2068.48-.59%2092.73-24.84l147.89-147.89a96.031%2096.031%200%200024.85-92.732l-54.13-202.022a96.012%2096.012%200%2000-67.89-67.882l-202.02-54.132c-33.13-8.877-68.47.595-92.73%2024.847l-147.89%20147.89a95.994%2095.994%200%2000-24.84%2092.729l54.13%20202.022a95.967%2095.967%200%200067.88%2067.88l202.02%2054.13zM1572.48%20252.659a23.996%2023.996%200%200023.18%206.211l50.5-13.533a23.97%2023.97%200%200016.97-16.97l13.54-50.506a24.004%2024.004%200%2000-6.21-23.182l-36.98-36.973a23.993%2023.993%200%2000-23.18-6.211l-50.5%2013.533a24%2024%200%2000-16.98%2016.97l-13.53%2050.506a24.004%2024.004%200%20006.21%2023.182l36.98%2036.973z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.rodape .container { position: relative; }
.rodape-logo { text-align: center; margin: 0 0 80px; }
.rodape-logo img { width: 300px; margin: 0 auto; }
.rodape-colunas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; font-size: 16px; line-height: 1.6; }
.rodape-colunas > * { min-width: 0; }
.rodape-colunas p { margin: 0 0 16px; }
.rodape-titulo { color: var(--branco); font-size: 22px; margin: 0 0 22px; letter-spacing: -0.02em; }
.rodape a { color: var(--branco); }
.rodape-insta {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: var(--marinho);
  border-radius: 4px;
  font-size: 22px;
}
.rodape-contato { list-style: none; margin: 0; padding: 0; }
.rodape-contato li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.rodape-contato .ic { margin-top: 4px; font-size: 14px; width: 18px; }
.rodape-contato li.sem-icone { padding-left: 32px; }
.rodape-contato a { text-decoration: none; }
.rodape-contato a:hover, .rodape-contato a:focus-visible { text-decoration: underline; }
.copyright { text-align: center; margin: 60px 0 0; font-size: 15px; color: var(--branco); opacity: .9; }

/* botões flutuantes */
.whatsapp-flutuante {
  position: fixed;
  right: 15px;
  bottom: 15px;
  width: 50px;
  height: 50px;
  z-index: 90;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
.whatsapp-flutuante svg { width: 50px; height: 50px; display: block; }
.topo-voltar {
  position: fixed;
  right: 22px;
  bottom: 80px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--marinho);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.topo-voltar.visivel { opacity: .9; visibility: visible; }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 960px) {
  h2, .secao-app .titulo-centro, .contato-texto h2 { font-size: 36px; }
  .grade-2, .contato-grade { grid-template-columns: 1fr; }
  .sobre-texto { margin-bottom: 30px; }
  .para-quem { padding: 30px 0; }
  .vantagens { grid-template-columns: 1fr; gap: 40px; }
  .solidario-foto { margin-top: 50px; width: min(420px, 100%); }
  .rodape-colunas { grid-template-columns: 1fr 1fr; }
  .rodape { padding-top: 100px; }
  .titulo-pagina { padding: 60px 0 40px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .container, .container-estreito { padding: 0 20px; }
  h2, .secao-app .titulo-centro, .contato-texto h2 { font-size: 30px; }
  .secao { padding: 60px 0; }
  .vantagem { flex-direction: column; gap: 16px; }
  .vantagem-icone { width: 80px; height: 80px; font-size: 26px; }
  .solidario { padding: 80px 0; }
  .solidario h2 { font-size: 28px; }
  .faixa-cta { padding-top: 60px; }
  .faixa-cta-caixa { padding: 30px 16px; }
  .botao { padding: 16px 24px; font-size: 16px; }
  .contato-caixa { padding: 24px 20px 30px; }
  .contato-lista li { font-size: 19px; }
  .rodape-colunas { grid-template-columns: 1fr; }
  .rodape-logo { margin-bottom: 50px; }
  .rodape-logo img { width: 240px; }
  .titulo-pagina { padding: 40px 0 10px; }
  .titulo-pagina h1 { font-size: 36px; }
  .secao-obrigado h1 { font-size: 26px; }
}