/* ===========================================================================
   responsivo.css — camada de responsividade do site Seguro de Carro
   ---------------------------------------------------------------------------
   As páginas são export de ferramenta de design: o layout inteiro vive em
   atributos style="" inline. Estilo inline vence folha externa, então as regras
   daqui usam !important, e o seletor começa com "html" para vencer também as
   regras !important que já existem no <style> do <head>, independentemente da
   ordem de carregamento.

   Faixas usadas:
     <=479px   celular pequeno/médio (320, 360, 375, 393, 430)
     480-767   celular grande e phablet
     768-919   tablet retrato (menu ainda é hambúrguer)
     920-1199  tablet paisagem e notebook pequeno (menu volta a ser horizontal)
     >=1200    desktop
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Trava contra rolagem lateral
   overflow-x:clip em vez de hidden porque clip não cria contexto de rolagem,
   então o header position:sticky continua funcionando.
   --------------------------------------------------------------------------- */
html { overflow-x: clip; }
body { overflow-wrap: break-word; }

/* ---------------------------------------------------------------------------
   2. content-box: a causa de vários estouros
   As páginas geradas ficaram sem box-sizing:border-box. Todo elemento que
   combina largura declarada (width/min-width) com padding ou borda soma os dois
   e transborda o pai. Corrigido nos padrões onde isso acontece.
   --------------------------------------------------------------------------- */
html [style*="min-width: min(100%"],
html [style*="min-width:min(100%"],
html [style*="width: 100%"],
html [style*="width:100%"] { box-sizing: border-box !important; }

/* campos de formulário esticam no flex e somavam padding + borda por fora */
html input,
html select,
html textarea,
html button { box-sizing: border-box !important; max-width: 100% !important; }

/* ---------------------------------------------------------------------------
   3. Mídia nunca ultrapassa o contêiner
   --------------------------------------------------------------------------- */
html img,
html svg,
html video,
html iframe { max-width: 100% !important; }
html iframe { box-sizing: border-box !important; }
/* altura automática preserva a proporção quando a largura precisa encolher */
html img { height: auto; }

/* ---------------------------------------------------------------------------
   4. Grades de cards
   As classes .g2x2 .g3 .g4 .g5 fixavam um número de colunas com !important e
   só quebravam em 1199/1023/899/767/559, o que deixava colunas espremidas e
   cards órfãos nas faixas intermediárias. Aqui a progressão é gradual.
   --------------------------------------------------------------------------- */

/* 5 cards */
html .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1199px) { html .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 991px)  { html .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 639px)  { html .g5 { grid-template-columns: minmax(0, 1fr) !important; } }

/* 4 cards */
html .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1099px) { html .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 639px)  { html .g4 { grid-template-columns: minmax(0, 1fr) !important; } }

/* faixa de selos (gap de 1px, fundo de borda): mantém 4 colunas enquanto o
   texto couber. Abaixo de 470px duas colunas dariam menos de 170px cada e o
   CNPJ 21.240.212/0001-16 quebraria no meio do número, então vira 1 coluna. */
@media (max-width: 1099px) and (min-width: 900px) {
  html .g4[style*="gap: 1px"],
  html .g4[style*="gap:1px"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 899px) and (min-width: 470px) {
  html .g4[style*="gap: 1px"],
  html .g4[style*="gap:1px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 469px) {
  html .g4[style*="gap: 1px"],
  html .g4[style*="gap:1px"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 3 cards */
html .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 979px) { html .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 679px) { html .g3 { grid-template-columns: minmax(0, 1fr) !important; } }

/* 2 por 2 */
html .g2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 619px) { html .g2x2 { grid-template-columns: minmax(0, 1fr) !important; } }

/* qualquer grade inline: itens podem encolher abaixo do conteúdo mínimo,
   senão uma palavra longa alarga a coluna e estoura a linha */
html [style*="display: grid"] > *,
html [style*="display:grid"] > * { min-width: 0; }

/* --- sobra da última linha ---------------------------------------------
   .g5 tem 5 cards e .g3 tem 3, então em 2 ou 3 colunas sempre sobra um vão
   vazio no canto. Dobrando o número de colunas e fazendo cada card ocupar
   duas, o card que sobra começa deslocado e a última linha fica centrada.
   A conta fecha exata: 6 colunas com 5 vãos dão a mesma largura de card que
   3 colunas com 2 vãos, então nada encolhe.
   ---------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  html .g5 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  html .g5 > * { grid-column: span 2; }
  html .g5 > *:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 640px) and (max-width: 991px) {
  html .g5 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html .g5 > * { grid-column: span 2; }
  html .g5 > *:nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 680px) and (max-width: 979px) {
  html main .g3 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html main .g3 > * { grid-column: span 2; }
  html main .g3 > *:nth-child(3) { grid-column: 2 / span 2; }
}

/* ---------------------------------------------------------------------------
   5. Hero (topo da home)
   O bloco de texto é flex:1 1 500px e o card do simulador flex:0 1 420px.
   Quando os dois não cabem lado a lado, o card quebra linha mas continua com
   420px, deixando um vazio enorme à direita. Abaixo de 1080px ele passa a
   ocupar a linha inteira.
   --------------------------------------------------------------------------- */
@media (max-width: 1079px) {
  html [style*="flex: 0 1 420px"] {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
  }
}

/* ---------------------------------------------------------------------------
   6. Cartões que quebram linha mas não crescem
   flex-grow 0 faz o cartão manter a largura de base mesmo sozinho na linha,
   deixando um vazio ao lado. Vale para o selo "60 anos de mercado" da /sobre.
   --------------------------------------------------------------------------- */
@media (max-width: 839px) {
  html [style*="flex: 0 1 280px"] {
    flex: 1 1 100% !important;
    max-width: none !important;
  }
}

/* ---------------------------------------------------------------------------
   7. Mapa do Google na página de contato
   Com 200px fixos o pino do endereço ficava cortado pela borda de baixo.
   --------------------------------------------------------------------------- */
html main iframe[src*="google.com/maps"] {
  height: clamp(240px, 60vw, 320px) !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------------
   8. Alvos de toque
   Links de ação dentro de cards ("Detalhes da cobertura") tinham 17px de
   altura. Em telas de toque ganham área clicável confortável.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  html a[style*="display: inline-flex"]:not([class*="cta"]):not([class*="fab"]):not([class*="wa-"]) {
    min-height: 44px;
  }
  html .nav-drawer a { min-height: 48px !important; }
}

/* ---------------------------------------------------------------------------
   9. Botões: nunca vazam nem ficam com texto cortado

   Os botões grandes do bloco final de cotação têm largura definida pelo
   conteúdo (flex 0 0 auto + nowrap + 32px de padding), então em telas
   estreitas ficavam mais largos que o cartão e eram cortados pelo
   overflow:hidden dele. Abaixo de 560px passam a ocupar a linha inteira.
   --------------------------------------------------------------------------- */
@media (max-width: 559px) {
  html a[style*="min-height: 54px"],
  html button[style*="min-height: 54px"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 14px !important;
    justify-content: center !important;
    text-align: center;
    white-space: normal !important;
  }
  /* o cartão do CTA tem padding enorme e recorta o que passar dele */
  html [style*="border-radius: 20px"][style*="overflow: hidden"] {
    padding-inline: clamp(18px, 5vw, 64px) !important;
  }
}
@media (max-width: 479px) {
  html a[style*="white-space: nowrap"][style*="min-height"],
  html button[style*="white-space: nowrap"] { white-space: normal !important; }
  html [style*="padding: 0px 24px"][style*="min-height"] { padding-inline: 18px !important; }
}

/* ---------------------------------------------------------------------------
   10. Barra fixa inferior e botão do WhatsApp

   O <head> traz html,body{height:100%}, o que congela a altura do body na
   altura da janela. Com isso o padding-bottom:76px do menu mobile era
   desenhado dentro dessa caixa, e não depois do conteúdo, então a barra verde
   fixa cobria o fim do rodapé (links de Privacidade e Termos ficavam
   inalcançáveis). Liberar a altura do body faz o padding voltar a empurrar.
   --------------------------------------------------------------------------- */
html body {
  height: auto !important;
  min-height: 100% !important;
}
html #dc-root,
html #dc-root > .sc-host {
  height: auto !important;
  min-height: 100% !important;
}

@media (max-width: 919px) {
  html body { padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
  /* o flutuante encostava na coluna de leitura e comia o fim das linhas */
  html .wa-fab {
    width: 50px !important;
    height: 50px !important;
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 479px) {
  html .wa-fab { width: 46px !important; height: 46px !important; right: 8px !important; }
}
@media (max-width: 419px) {
  html .mobile-ctabar a { font-size: 15px !important; }
}

/* some ao rolar para baixo e volta ao parar ou subir, para não tapar o texto
   (a classe é aplicada pelo site.js) */
html .wa-fab {
  transition: transform .22s ease, opacity .22s ease;
}
html .wa-fab.fab-oculto {
  transform: translateY(96px) scale(.85);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html .wa-fab { transition: none; }
}

/* ---------------------------------------------------------------------------
   11. Rodapé
   O rodapé usa a mesma classe .g3 das grades de cards, mas as necessidades são
   opostas: card de conteúdo pede coluna larga, lista de links não. Sem isso o
   rodapé virava uma coluna só já no tablet, com quase 600px de vazio ao lado
   de cada lista.
   --------------------------------------------------------------------------- */
@media (min-width: 700px) {
  html footer .g3 { grid-template-columns: 1.4fr 1fr 1fr !important; }
}
@media (min-width: 480px) and (max-width: 699px) {
  html footer .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* links do rodapé eram alvos de 17px de altura, fáceis de errar no toque */
@media (max-width: 919px) {
  html footer nav ul { gap: 2px !important; }
  html footer nav ul a {
    display: flex;
    align-items: center;
    min-height: 42px;
  }
  /* bloco legal final: links colados, separados só por um ponto.
     Só o respiro vertical, sem virar flex: como o "·" entre os links é um nó
     de texto solto, o flex o transformaria em item e ele sobraria no fim da
     linha quando os links quebrassem. */
  html footer p a {
    display: inline-block;
    padding-block: 8px;
  }
  html footer p:last-child { line-height: 2; }
}

/* a barra fixa virava uma faixa verde de ponta a ponta no tablet */
@media (min-width: 600px) and (max-width: 919px) {
  html .mobile-ctabar a { max-width: 420px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------------
   12. Grade de logos das seguradoras
   Cada card tem 152px de altura para um logo de 105x70, então em uma coluna só
   sobravam mais de 200px de vazio por card e a página passava de 5.500px.
   --------------------------------------------------------------------------- */
@media (max-width: 559px) {
  html [style*="minmax(min(100%, 210px)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* ---------------------------------------------------------------------------
   13. Cards de cobertura em telas estreitas
   32px de padding de cada lado mais o ícone de 50px deixavam o título com
   pouco mais de 200px, quebrando "Compreensiva (seguro total)" em três linhas.
   --------------------------------------------------------------------------- */
@media (max-width: 559px) {
  html main article[id] { padding: 24px 20px !important; }
  html main article[id] > div:first-child { gap: 12px !important; }
  html main article[id] > div:first-child > div[style*="width: 50px"] {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ---------------------------------------------------------------------------
   14. Comprimento de linha no notebook e no desktop
   Parágrafos de largura total chegavam a 125 caracteres por linha em 1280px.
   Sem !important de propósito: onde o layout já define max-width inline, o
   inline continua mandando.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* :where() zera a especificidade do :not(), senão esta regra venceria a
     exceção logo abaixo e a margem direita ficaria irregular */
  html main p:where(:not([style*="max-width"])):where(:not([style*="text-align: center"])),
  html main li:where(:not([style*="max-width"])) { max-width: 72ch; }
  /* onde o contêiner já define uma medida de leitura estreita, limitar de novo
     só deixaria a margem direita irregular em relação a títulos e cards */
  html main [style*="max-width: 860px"] p,
  html main [style*="max-width: 860px"] li,
  html main [style*="max-width:860px"] p,
  html main [style*="max-width:860px"] li,
  html main [style*="max-width: 820px"] p,
  html main [style*="max-width: 820px"] li,
  html main [style*="max-width:820px"] p,
  html main [style*="max-width:820px"] li,
  html main [style*="max-width: 900px"] p,
  html main [style*="max-width:900px"] p { max-width: none; }
}

/* ---------------------------------------------------------------------------
   15. Cabeçalho na faixa em que o menu horizontal volta (920 a 1099px)
   O menu desktop reaparece em 920px, mas ali logo, menu e botão somados passam
   da largura útil: quem cede é a marca, que quebrava em "Seguro / de Carro" e
   "CORRETORA / DE SEGUROS". Apertar o respiro dos links devolve o espaço
   necessário sem precisar esconder o menu.
   --------------------------------------------------------------------------- */
@media (min-width: 920px) and (max-width: 1099px) {
  html header nav[aria-label="Navegação principal"] a { padding-inline: 9px !important; }
  html header nav[aria-label="Navegação principal"] { gap: 2px !important; }
  html header a[aria-label^="Seguro de Carro"] > span { white-space: nowrap; }
  html header .cta-header { padding-inline: 18px !important; }
}

/* ---------------------------------------------------------------------------
   16. Cabeçalho em telas muito estreitas (320 a 359px)
   Com 18px o nome da marca quebrava em duas linhas e a legenda em mais duas,
   deixando o cabeçalho com quatro linhas de texto.
   --------------------------------------------------------------------------- */
@media (max-width: 359px) {
  html header a[aria-label^="Seguro de Carro"] { gap: 8px !important; }
  html header a[aria-label^="Seguro de Carro"] > span { font-size: 16px !important; }
  html header a[aria-label^="Seguro de Carro"] > span > span {
    font-size: 8.5px !important;
    letter-spacing: 0.1em !important;
  }
  html header img[width="42"] { width: 34px !important; height: 34px !important; }
  html header > div { gap: 8px !important; }
}

/* ---------------------------------------------------------------------------
   17. Tabelas (posts do blog) rolam sozinhas em vez de estourar a página
   --------------------------------------------------------------------------- */
html table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
html pre,
html code { overflow-x: auto; max-width: 100%; }

/* ---------------------------------------------------------------------------
   18. Legibilidade em telas pequenas
   --------------------------------------------------------------------------- */
@media (max-width: 479px) {
  /* rótulos institucionais (CNPJ, Registro SUSEP) eram 11px */
  html [style*="font-size: 11px"] { font-size: 12px !important; }
  html [style*="font-size: 12px"] { font-size: 12.5px !important; }
}

/* a legenda "Corretora de Seguros" do logotipo era o menor texto do site
   (9px no rodapé, 9.5px no cabeçalho), em caixa alta e espaçada */
html [style*="font-size: 9px"],
html [style*="font-size: 9.5px"] {
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
}
@media (max-width: 359px) {
  html header [style*="font-size: 9.5px"] { font-size: 9px !important; }
}
