/* ==========================================================================
   Único Seguros — folha de estilo única

   Sistema de design: "Organic Warm" derivado da marca.
     Nicho saúde pede baixa ansiedade — o público está decidindo sobre saúde e
     dinheiro ao mesmo tempo. O calor vem dos NEUTROS (família de areia no lugar
     do cinza-azulado), dos cantos generosos e da serifa nos títulos.
     Deliberadamente NÃO usamos o âmbar típico do estilo: ele brigaria com o
     ciano da marca, que segue sendo o único acento.

   Tipografia: Lora (títulos) + IBM Plex Sans (corpo), ambas no próprio domínio.
   Paleta da marca preservada: ciano #4bc9e8 + azul-marinho #172e54

   Índice
     1. Tokens
     2. Reset e base
     3. Layout
     4. Botões
     5. Cabeçalho e navegação
     6. Hero
     7. Selos e credenciais (Trust)
     8. Cards
     9. Métricas
    10. Operadoras
    11. Conteúdo editorial
    12. Blog
    13. Formulário
    14. Contato
    15. Rodapé
    16. WhatsApp flutuante
    17. Cookies (LGPD)
    18. Utilidades
    19. Responsivo
    20. Preferências do usuário e impressão
    21. Calculadoras
    22. Animações de entrada
   ========================================================================== */

@import url('../fonts/fontes.css');

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Marca (preservada) --- */
  --ciano: #4bc9e8;            /* cor da marca: fundos, ícones, destaques */
  --ciano-forte: #2ba7c7;      /* apenas superfícies, NUNCA texto sobre claro */
  --ciano-texto: #116c83;      /* texto/link — passa 4,5:1 em TODOS os fundos quentes */
  --ciano-fundo: #e6f6fa;
  --ciano-borda: #b9e4f0;

  --marinho: #172e54;
  --marinho-claro: #21406f;
  --marinho-escuro: #0f1f3a;

  /* --- Neutros QUENTES (Organic Warm) ---
     O calor do estilo vem daqui, não de uma cor de acento nova: um âmbar
     brigaria com o ciano da marca. Trocamos o cinza-azulado (frio, "corporativo")
     por uma família de areia. Todos validados >= 4,5:1 com os textos abaixo. */
  --texto: #241f1a;            /* 16,3:1 sobre branco — marrom quase preto */
  --texto-medio: #4d443c;      /* 9,5:1 — textos secundários */
  --texto-suave: #5f554b;      /* 7,3:1 — apoio, datas, notas */
  --linha: #e9e1d6;
  --linha-forte: #d3c7b6;
  --fundo: #ffffff;
  --fundo-alt: #faf7f2;        /* areia clara — seções alternadas */
  --fundo-alt2: #f3ede4;       /* areia média — superfícies destacadas */

  /* --- Sinalização --- */
  --zap: #0e7a42;              /* verde WhatsApp escurecido — 5,4:1 com branco */
  --zap-hover: #0a6335;
  --erro: #c62828;             /* 5,9:1 sobre branco */
  --erro-fundo: #fdeaea;
  --sucesso: #1b7a3e;
  --dourado: #b8860b;          /* selos e credenciais */

  /* --- Tipografia ---
     Serifada nos títulos (tom humano, adequado a quem decide sobre saúde),
     sem serifa no corpo e em tudo que precisa de legibilidade densa. */
  --fonte: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-titulo: 'Lora', Georgia, 'Times New Roman', serif;

  /* Escala tipográfica fluida */
  --t-xs: .78rem;
  --t-sm: .875rem;
  --t-base: 1.0625rem;
  --t-lg: 1.15rem;
  --t-xl: clamp(1.2rem, 1.8vw, 1.4rem);
  --t-2xl: clamp(1.45rem, 2.6vw, 1.85rem);
  --t-3xl: clamp(1.7rem, 3.4vw, 2.4rem);
  --t-4xl: clamp(2rem, 4.6vw, 3.1rem);

  /* --- Espaçamento (escala de 4px) --- */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.25rem; --e-6: 1.5rem;  --e-8: 2rem;    --e-10: 2.5rem;
  --e-12: 3rem;   --e-16: 4rem;   --e-20: 5rem;
  --e-secao: clamp(3.5rem, 7vw, 6rem);

  /* --- Formas — cantos mais generosos que o padrão corporativo --- */
  --largura: 1180px;
  --largura-texto: 68ch;       /* 65-75 caracteres por linha */
  --raio-sm: 10px;
  --raio: 20px;
  --raio-lg: 26px;
  --raio-pill: 999px;

  /* --- Elevação — sombra com pigmento QUENTE.
     Sombra azulada sobre fundo de areia deixa a superfície suja; a marrom
     funde com o fundo e dá a sensação de papel. --- */
  --sombra-1: 0 1px 2px rgba(61, 47, 33, .05), 0 1px 3px rgba(61, 47, 33, .04);
  --sombra-2: 0 2px 4px rgba(61, 47, 33, .05), 0 5px 14px rgba(61, 47, 33, .06);
  --sombra-3: 0 4px 10px rgba(61, 47, 33, .06), 0 14px 32px rgba(61, 47, 33, .10);
  --sombra-4: 0 10px 20px rgba(61, 47, 33, .07), 0 28px 56px rgba(61, 47, 33, .13);
  --sombra-foco: 0 0 0 3px rgba(17, 108, 131, .26);

  /* --- Camadas (z-index) --- */
  --z-base: 1;
  --z-suspenso: 10;   /* submenu */
  --z-fixo: 20;       /* cabeçalho */
  --z-flutuante: 30;  /* botão WhatsApp */
  --z-modal: 50;      /* aviso de cookies */
  --z-pular: 60;      /* link "pular para o conteúdo" */

  /* --- Movimento --- */
  --rapido: 150ms;
  --normal: 220ms;
  --lento: 320ms;
  --curva: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* compensa o cabeçalho fixo nas âncoras */
  /* impede que o menu fora da tela crie rolagem horizontal.
     'clip' em vez de 'hidden' porque 'hidden' quebraria o position:sticky
     do cabeçalho ao criar um contexto de rolagem. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--ciano-texto);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color var(--rapido) var(--curva);
}
a:hover { color: var(--marinho); text-decoration-thickness: 2px; }

/* Títulos em serifa. A Lora tem só o peso 600 carregado, então nunca peça 700:
   o navegador sintetizaria um negrito falso e borrado. */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--marinho);
  line-height: 1.22;
  margin: 0 0 .55em;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); letter-spacing: -.022em; line-height: 1.14; }
h2 { font-size: var(--t-3xl); letter-spacing: -.016em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

/* h5/h6 permanecem sem serifa: são rótulos, não títulos editoriais */
h5, h6 {
  font-family: var(--fonte); font-weight: 700; color: var(--marinho);
  line-height: 1.3; margin: 0 0 .5em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.35em; }
li { margin-bottom: .45em; }
li::marker { color: var(--ciano-texto); }

strong, b { font-weight: 600; color: var(--marinho); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Foco visível e consistente em todo o site */
:focus-visible {
  outline: 3px solid var(--ciano-texto);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}
/* remove o anel do mouse, mantém para teclado */
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--ciano); color: var(--marinho); }

/* Link "pular para o conteúdo" */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-pular);
  background: var(--marinho); color: #fff; padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--raio-sm) 0; text-decoration: none; font-weight: 600;
}
.pular:focus { left: 0; color: #fff; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--e-5); }

.secao { padding: var(--e-secao) 0; }
.secao--alt { background: var(--fundo-alt); }
.secao--marinho {
  background: linear-gradient(160deg, var(--marinho) 0%, var(--marinho-escuro) 100%);
  color: #ccd8ea;
}
.secao--marinho h2, .secao--marinho h3, .secao--marinho h4, .secao--marinho strong { color: #fff; }
.secao--marinho a { color: var(--ciano); }
.secao--marinho a:hover { color: #fff; }

.cabecalho-secao { max-width: 760px; margin: 0 auto clamp(2.2rem, 4.5vw, 3.4rem); text-align: center; }
.cabecalho-secao p { color: var(--texto-medio); font-size: var(--t-lg); margin-bottom: 0; }
.secao--marinho .cabecalho-secao p { color: #b3c2d9; }

/* sobrancelha da seção */
.olho {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ciano-texto); margin-bottom: var(--e-3);
}
.olho::before {
  content: ""; width: 22px; height: 2px; background: var(--ciano); border-radius: 2px;
}
.cabecalho-secao .olho { justify-content: center; }
.secao--marinho .olho { color: var(--ciano); }

.grade { display: grid; gap: var(--e-6); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.duas-colunas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.duas-colunas img { border-radius: var(--raio); box-shadow: var(--sombra-3); }

/* --- Coluna que acompanha a rolagem -----------------------------------------
   Usada quando um lado é curto (texto de apoio, canais de atendimento, foto) e
   o outro é longo (formulário, texto do artigo): o lado curto fica visível
   enquanto o visitante percorre o lado longo.

   Três condições precisam ser respeitadas para o sticky funcionar:
   1. align-items do grid NÃO pode ser 'center' — com o item esticado (stretch)
      é que sobra espaço para ele deslizar dentro da própria célula.
   2. Nenhum ancestral pode ter overflow diferente de visible. O <html> tem
      overflow-x: clip, que é justamente por isso que não usamos 'hidden'.
   3. O elemento precisa ser mais baixo que a janela, senão o topo dele nunca
      encosta no ponto de fixação. Abaixo de 1000px de altura desligamos.
   --------------------------------------------------------------------------- */
.duas-colunas--fixa { align-items: start; }
.duas-colunas--fixa .coluna-fixa {
  position: sticky;
  top: calc(78px + var(--e-6));   /* altura do cabeçalho fixo + respiro */
}

/* ==========================================================================
   4. BOTÕES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px;                 /* alvo de toque confortável */
  padding: .8em 1.75em;
  border-radius: var(--raio-pill);
  border: 2px solid transparent;
  font-weight: 600; font-size: var(--t-sm); letter-spacing: .01em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--normal) var(--curva),
              border-color var(--normal) var(--curva),
              color var(--normal) var(--curva),
              box-shadow var(--normal) var(--curva);
}
.btn:hover { text-decoration: none; }
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }

/* fundo ciano com texto marinho: 7,0:1 */
.btn--primario { background: var(--ciano); color: var(--marinho); box-shadow: var(--sombra-1); }
.btn--primario:hover { background: #6fd6ef; color: var(--marinho); box-shadow: var(--sombra-3); }

.btn--marinho { background: var(--marinho); color: #fff; box-shadow: var(--sombra-1); }
.btn--marinho:hover { background: var(--marinho-claro); color: #fff; box-shadow: var(--sombra-3); }

.btn--contorno { border-color: var(--linha-forte); color: var(--marinho); background: #fff; }
.btn--contorno:hover { border-color: var(--ciano-texto); color: var(--ciano-texto); background: var(--ciano-fundo); }

/* variante para fundos escuros */
.btn--claro { border: 2px solid rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.btn--claro:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }

.btn--zap { background: var(--zap); color: #fff; box-shadow: var(--sombra-1); }
.btn--zap:hover { background: var(--zap-hover); color: #fff; box-shadow: var(--sombra-3); }

.btn--bloco { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   5. CABEÇALHO E NAVEGAÇÃO
   ========================================================================== */
/* barra de credenciais acima do menu */
.barra-topo {
  background: var(--marinho-escuro); color: #b3c2d9;
  font-size: var(--t-xs); letter-spacing: .01em;
}
.barra-topo__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); min-height: 38px; flex-wrap: wrap;
}
.barra-topo ul { display: flex; gap: var(--e-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.barra-topo li { display: flex; align-items: center; gap: var(--e-2); margin: 0; }
.barra-topo svg { width: 14px; height: 14px; color: var(--ciano); flex-shrink: 0; }
.barra-topo a { color: #ccd8ea; text-decoration: none; }
.barra-topo a:hover { color: var(--ciano); text-decoration: underline; }

.topo {
  position: sticky; top: 0; z-index: var(--z-fixo);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--normal) var(--curva);
}
.topo:hover, .topo:focus-within { box-shadow: var(--sombra-2); }
.topo__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); min-height: 78px; }
.topo__logo { display: block; text-decoration: none; }
.topo__logo img { width: 186px; height: auto; }

.nav__lista { display: flex; align-items: center; gap: var(--e-1); list-style: none; margin: 0; padding: 0; }
.nav__lista > li { margin: 0; }
.nav__lista a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--e-4); border-radius: var(--raio-sm);
  font-size: var(--t-sm); font-weight: 600; color: var(--marinho);
  text-decoration: none;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.nav__lista a:hover { background: var(--ciano-fundo); color: var(--ciano-texto); }
.nav__lista a[aria-current="page"] {
  background: var(--ciano-fundo); color: var(--ciano-texto);
  box-shadow: inset 0 -2px 0 var(--ciano-texto);
}

/* submenu */
.tem-sub { position: relative; }
.tem-sub > a::after {
  content: ""; width: 6px; height: 6px; margin-left: var(--e-2);
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.sub {
  position: absolute; top: 100%; left: 0; z-index: var(--z-suspenso);
  min-width: 264px; list-style: none; margin: 0; padding: var(--e-2);
  background: #fff; border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra-4);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva),
              visibility var(--normal);
}
.tem-sub:hover .sub, .tem-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub a { font-weight: 500; white-space: nowrap; }

.topo__acoes { display: flex; align-items: center; gap: var(--e-3); }
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px;                /* alvo de toque */
  background: none; border: 1px solid var(--linha); border-radius: var(--raio-sm);
  color: var(--marinho); cursor: pointer;
  transition: background-color var(--rapido) var(--curva);
}
.menu-btn:hover { background: var(--fundo-alt); }
.menu-btn svg { width: 24px; height: 24px; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
/* O hero é montado em camadas para a foto poder receber multiply de verdade:
   um background com várias camadas não aceita mix-blend-mode independente.
     .hero        -> cor de base (o azul da marca)
     .hero__foto  -> a fotografia, em multiply e 50% de opacidade
     .hero::after -> brilhos de profundidade
   Multiply só escurece, nunca clareia — então o texto branco continua
   legível independentemente da foto que for usada no fundo. */
.hero {
  position: relative; color: #fff; isolation: isolate;
  background: linear-gradient(108deg, var(--marinho-escuro) 0%, var(--marinho) 52%, #14607a 100%);
}
.hero__foto {
  position: absolute; inset: 0; z-index: -2;
  background: url("../img/fundo-hero.webp") center/cover no-repeat;
  mix-blend-mode: multiply;
  opacity: .5;
  pointer-events: none;
}
.hero::after {   /* brilho de profundidade + leve calor no canto oposto */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(75, 201, 232, .22), transparent 58%),
    radial-gradient(ellipse at 8% 92%, rgba(214, 168, 112, .14), transparent 55%);
}
/* borda inferior que costura o hero com a areia da seção seguinte */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--ciano) 0%, rgba(75, 201, 232, .25) 55%, transparent 100%);
}
/* padding-block, NUNCA o atalho `padding`.
   O elemento também é .container, e `padding: X 0` zerava o padding-inline
   dele — o texto do hero encostava na borda da tela em todas as páginas. */
.hero__interno { padding-block: clamp(3.5rem, 8vw, 7rem); max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .45em; }
.hero h1 b { color: var(--ciano); font-weight: 700; }
.hero__texto { font-size: var(--t-lg); color: #d3dfef; margin-bottom: var(--e-8); max-width: 60ch; }
.hero__botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.hero--interna .hero__interno { padding-block: clamp(2.75rem, 5.5vw, 4.75rem); }

/* selos logo abaixo do CTA do hero */
.hero__selos {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6);
  margin-top: var(--e-8); padding-top: var(--e-6);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero__selos li {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); color: #d3dfef; margin: 0;
}
.hero__selos svg { width: 18px; height: 18px; color: var(--ciano); flex-shrink: 0; }
.hero__selos ul { display: contents; }

/* trilha (breadcrumb) */
.trilha { font-size: var(--t-sm); color: #b3c2d9; margin-bottom: var(--e-4); }
.trilha ol { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0; padding: 0; }
.trilha li { margin: 0; display: flex; align-items: center; gap: .4em; }
.trilha li::after { content: "›"; opacity: .55; }
.trilha li:last-child::after { content: ""; }
.trilha a { color: var(--ciano); }
.trilha a:hover { color: #fff; }
.trilha--clara { color: var(--texto-suave); }
.trilha--clara a { color: var(--ciano-texto); }
.trilha--clara a:hover { color: var(--marinho); }

/* ==========================================================================
   7. SELOS E CREDENCIAIS (Trust & Authority)
   ========================================================================== */
.selo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  background: var(--ciano-fundo); border: 1px solid var(--ciano-borda);
  border-radius: var(--raio-pill);
  font-size: var(--t-xs); font-weight: 600; color: var(--ciano-texto);
  letter-spacing: .01em;
}
.selo svg { width: 15px; height: 15px; flex-shrink: 0; }
.selo--dourado { background: #fdf6e3; border-color: #ecd9a0; color: #8a6508; }

/* Faixa de garantias — são 4 itens.
   Colunas definidas por faixa em vez de auto-fit: com auto-fit o layout caía
   em 3 colunas por volta de 900px, deixando um item órfão na segunda linha e
   espremendo o texto em 5 linhas. 4 ou 2 colunas sempre fecham certo. */
.garantias { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-6); }
.garantia { display: flex; gap: var(--e-4); align-items: flex-start; }
.garantia__icone {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--raio-sm);
  background: var(--ciano-fundo); color: var(--ciano-texto);
  display: grid; place-items: center;
}
.garantia__icone svg { width: 23px; height: 23px; }
.garantia strong { display: block; font-size: var(--t-sm); margin-bottom: .15em; }
.garantia span { font-size: var(--t-sm); color: var(--texto-medio); line-height: 1.5; }
.secao--marinho .garantia__icone { background: rgba(75, 201, 232, .15); color: var(--ciano); }
.secao--marinho .garantia span { color: #b3c2d9; }

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.card {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--e-8) var(--e-6); box-shadow: var(--sombra-1);
  transition: border-color var(--normal) var(--curva), box-shadow var(--normal) var(--curva);
}
.card:hover { border-color: var(--ciano-borda); box-shadow: var(--sombra-2); }
.card h3 { font-size: var(--t-lg); }
.card p { color: var(--texto-medio); font-size: var(--t-sm); margin-bottom: 0; }

.card__icone {
  width: 52px; height: 52px; border-radius: var(--raio-sm);
  background: var(--ciano-fundo); color: var(--ciano-texto);
  display: grid; place-items: center; margin-bottom: var(--e-5);
}
.card__icone svg { width: 26px; height: 26px; }

.secao--marinho .card {
  background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .13);
  box-shadow: none;
}
.secao--marinho .card:hover { border-color: rgba(75, 201, 232, .45); background: rgba(255, 255, 255, .08); }
.secao--marinho .card p { color: #b3c2d9; }
.secao--marinho .card__icone { background: rgba(75, 201, 232, .15); color: var(--ciano); }

/* --- Card de plano --- */
.card-plano {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; box-shadow: var(--sombra-1);
  transition: border-color var(--normal) var(--curva), box-shadow var(--normal) var(--curva);
}
/* hover sem transform: não desloca o layout nem causa tremor */
.card-plano:hover { border-color: var(--ciano); box-shadow: var(--sombra-3); }
.card-plano:focus-within { border-color: var(--ciano-texto); box-shadow: var(--sombra-3); }

.card-plano__foto { aspect-ratio: 6 / 7; overflow: hidden; background: var(--ciano-fundo); }
.card-plano__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento) var(--curva); }
.card-plano:hover .card-plano__foto img { transform: scale(1.04); }

.card-plano__corpo { padding: var(--e-6); display: flex; flex-direction: column; flex: 1; gap: var(--e-2); }
.card-plano__corpo h3 { font-size: var(--t-lg); margin-bottom: 0; }
.card-plano__corpo p { color: var(--texto-medio); font-size: var(--t-sm); flex: 1; margin-bottom: var(--e-2); }

/* o card inteiro vira área clicável, mantendo um único link para leitores de tela */
.card-plano__corpo h3 a { color: var(--marinho); text-decoration: none; }
.card-plano__corpo h3 a::after { content: ""; position: absolute; inset: 0; }
.card-plano:hover h3 a { color: var(--ciano-texto); }

.card-plano__link {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-weight: 600; font-size: var(--t-sm); color: var(--ciano-texto);
}
.card-plano__link svg { width: 15px; height: 15px; transition: transform var(--normal) var(--curva); }
.card-plano:hover .card-plano__link svg { transform: translateX(4px); }

/* ==========================================================================
   9. MÉTRICAS
   ========================================================================== */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e-6); }
.numero {
  text-align: center; padding: var(--e-6) var(--e-4);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--raio);
}
.numero__icone { color: var(--ciano); margin-bottom: var(--e-3); }
.numero__icone svg { width: 26px; height: 26px; margin-inline: auto; }
.numero__valor {
  display: block; font-size: clamp(2.1rem, 4.6vw, 2.9rem); font-weight: 700;
  color: #fff; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.numero__rotulo { display: block; font-size: var(--t-sm); color: #b3c2d9; margin-top: var(--e-2); }

/* ==========================================================================
   10. OPERADORAS
   ========================================================================== */
.operadoras {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--e-8) var(--e-12);
}
/* Os arquivos de logo são PNG brancos com fundo transparente. Por isso esta
   seção SEMPRE fica sobre fundo escuro (.secao--marinho) — sobre a areia eles
   simplesmente desapareciam. Não aplicamos grayscale: já são monocromáticos. */
.operadoras img {
  max-height: 46px; width: auto;
  opacity: .82;
  transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva);
}
.operadoras img:hover { opacity: 1; }

/* ==========================================================================
   11. CONTEÚDO EDITORIAL
   ========================================================================== */
.conteudo { max-width: var(--largura-texto); }
.conteudo--centro { margin-inline: auto; }
.conteudo > h2 { margin-top: 1.9em; }
.conteudo > h3 { margin-top: 1.6em; }
.conteudo > :first-child { margin-top: 0; }
.conteudo p, .conteudo li { color: var(--texto); }

.conteudo blockquote {
  margin: 1.8em 0; padding: var(--e-5) var(--e-6);
  border-left: 3px solid var(--ciano);
  background: var(--fundo-alt); border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  color: var(--texto-medio); font-size: var(--t-lg); line-height: 1.6;
}

.destaque {
  background: var(--ciano-fundo); border: 1px solid var(--ciano-borda);
  border-radius: var(--raio); padding: var(--e-6); margin: 1.8em 0;
}
.destaque p { color: var(--texto); }

/* tabelas legais */
.tabela-wrap { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.conteudo table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 460px; }
.conteudo th, .conteudo td { padding: var(--e-3) var(--e-4); border: 1px solid var(--linha); text-align: left; vertical-align: top; }
.conteudo th { background: var(--fundo-alt); color: var(--marinho); font-weight: 600; }

/* FAQ */
.faq { display: grid; gap: var(--e-3); max-width: 840px; margin-inline: auto; }
.faq__item {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; transition: border-color var(--normal) var(--curva), box-shadow var(--normal) var(--curva);
}
.faq__item:hover { border-color: var(--ciano-borda); }
.faq__item[open] { border-color: var(--ciano-borda); box-shadow: var(--sombra-2); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5) var(--e-6); min-height: 56px;
  font-weight: 600; color: var(--marinho); cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--ciano-texto); border-bottom: 2px solid var(--ciano-texto);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--normal) var(--curva);
}
.faq__item[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq__item summary:hover { background: var(--fundo-alt); }
.faq__resposta { padding: 0 var(--e-6) var(--e-6); color: var(--texto-medio); }
.faq__resposta p:last-child { margin-bottom: 0; }

/* ==========================================================================
   12. BLOG
   ========================================================================== */
.card-post {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; box-shadow: var(--sombra-1);
  transition: border-color var(--normal) var(--curva), box-shadow var(--normal) var(--curva);
}
.card-post:hover { border-color: var(--ciano); box-shadow: var(--sombra-3); }
.card-post:focus-within { border-color: var(--ciano-texto); box-shadow: var(--sombra-3); }
.card-post__foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fundo-alt); }
.card-post__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento) var(--curva); }
.card-post:hover .card-post__foto img { transform: scale(1.04); }
.card-post__corpo { padding: var(--e-6); display: flex; flex-direction: column; flex: 1; gap: var(--e-2); }
.card-post__data {
  font-size: var(--t-xs); color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin: 0;
}
.card-post__corpo h3 { font-size: var(--t-lg); margin-bottom: 0; }
.card-post__corpo h3 a { color: var(--marinho); text-decoration: none; }
.card-post__corpo h3 a::after { content: ""; position: absolute; inset: 0; }
.card-post:hover h3 a { color: var(--ciano-texto); }
.card-post__corpo p { font-size: var(--t-sm); color: var(--texto-medio); flex: 1; margin-bottom: var(--e-2); }

.artigo-meta { font-size: var(--t-sm); color: var(--texto-suave); }
.artigo-capa { border-radius: var(--raio); box-shadow: var(--sombra-2); margin-bottom: var(--e-8); }

/* etiqueta de assunto */
.etiqueta {
  display: inline-block; padding: .3em .9em; border-radius: var(--raio-pill);
  background: var(--ciano-fundo); border: 1px solid var(--ciano-borda);
  color: var(--ciano-texto); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--e-3);
}
.card-post__data .etiqueta { margin-bottom: 0; }

/* Resumo rápido — responde antes de o leitor rolar.
   Fica em destaque ciano de propósito: quem chega da busca quer a resposta,
   não o artigo inteiro. */
.resumo {
  background: var(--ciano-fundo); border: 1px solid var(--ciano-borda);
  border-radius: var(--raio); padding: var(--e-6); margin: 0 0 var(--e-6);
}
.resumo__titulo {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ciano-texto); margin-bottom: var(--e-3);
}
.resumo ul { margin: 0; padding-left: 1.25em; }
.resumo li { margin-bottom: .55em; font-size: var(--t-sm); color: var(--texto); }
.resumo li:last-child { margin-bottom: 0; }
.resumo li::marker { color: var(--ciano-texto); }

/* sumário do artigo — dá ao leitor o mapa antes de começar */
.sumario {
  background: var(--fundo-alt); border: 1px solid var(--linha);
  border-left: 3px solid var(--ciano); border-radius: 0 var(--raio) var(--raio) 0;
  padding: var(--e-5) var(--e-6); margin: 0 0 var(--e-8);
}
.sumario__titulo {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--texto-suave); margin-bottom: var(--e-3);
}
.sumario ol { margin: 0; padding-left: 1.2em; }
.sumario li { margin-bottom: .4em; font-size: var(--t-sm); }
.sumario a { color: var(--marinho); text-decoration: none; }
.sumario a:hover { color: var(--ciano-texto); text-decoration: underline; }

/* ==========================================================================
   13. FORMULÁRIO
   ========================================================================== */
.form-caixa {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-lg);
  padding: clamp(1.6rem, 3.5vw, 2.5rem); box-shadow: var(--sombra-4);
}
.form-caixa > h3 { font-size: var(--t-2xl); }
.form-caixa > p { color: var(--texto-medio); font-size: var(--t-sm); margin-bottom: var(--e-6); }

/* O formulário é um cartão BRANCO que às vezes fica dentro de uma seção escura
   (.secao--marinho, na página de Contato). Sem este bloco, as regras de cor da
   seção escura vazam para dentro do cartão e o título fica branco sobre branco.
   Vale o mesmo para .destaque, que também tem fundo claro. */
.secao--marinho .form-caixa h2,
.secao--marinho .form-caixa h3,
.secao--marinho .form-caixa h4,
.secao--marinho .form-caixa strong,
.secao--marinho .destaque h2,
.secao--marinho .destaque h3,
.secao--marinho .destaque strong { color: var(--marinho); }

.secao--marinho .form-caixa p,
.secao--marinho .destaque p { color: var(--texto-medio); }

.secao--marinho .form-caixa a,
.secao--marinho .destaque a { color: var(--ciano-texto); }
.secao--marinho .form-caixa a:hover,
.secao--marinho .destaque a:hover { color: var(--marinho); }

.campo { margin-bottom: var(--e-5); }
.campo label {
  display: block; font-size: var(--t-sm); font-weight: 600;
  color: var(--marinho); margin-bottom: var(--e-2);
}
.campo .obrig { color: var(--erro); }

.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px;                 /* alvo de toque */
  padding: var(--e-3) var(--e-4);
  border: 1.5px solid var(--linha-forte); border-radius: var(--raio-sm);
  background: #fff; color: var(--texto);
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.campo input::placeholder, .campo textarea::placeholder { color: #8892a4; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--ciano-forte); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--ciano-texto); box-shadow: var(--sombra-foco);
}
.campo textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
.campo select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a566b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e-4) center; background-size: 17px;
  padding-right: var(--e-10);
}

/* estado de erro: cor + ícone + texto (nunca só a cor) */
.campo--erro input, .campo--erro select, .campo--erro textarea {
  border-color: var(--erro); background: var(--erro-fundo);
}
.erro-msg {
  display: none; align-items: center; gap: var(--e-2);
  font-size: var(--t-xs); color: var(--erro); margin-top: var(--e-2); font-weight: 500;
}
.erro-msg::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.campo--erro .erro-msg { display: flex; }

.campo-radio { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.campo-radio label {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 46px; padding: 0 var(--e-5);
  border: 1.5px solid var(--linha-forte); border-radius: var(--raio-pill);
  font-weight: 500; margin: 0; cursor: pointer;
  transition: border-color var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
}
.campo-radio label:hover { border-color: var(--ciano-forte); background: var(--ciano-fundo); }
.campo-radio input { width: 18px; height: 18px; min-height: 0; accent-color: var(--ciano-texto); cursor: pointer; }
.campo-radio label:has(input:checked) { border-color: var(--ciano-texto); background: var(--ciano-fundo); }

.consentimento {
  display: flex; gap: var(--e-3); align-items: flex-start;
  margin: var(--e-6) 0; padding: var(--e-4);
  background: var(--fundo-alt); border: 1px solid var(--linha); border-radius: var(--raio-sm);
  font-size: var(--t-xs); line-height: 1.55; color: var(--texto-medio); cursor: pointer;
}
.consentimento input {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--ciano-texto); cursor: pointer;
}
.consentimento.campo--erro { border-color: var(--erro); background: var(--erro-fundo); }
.consentimento .erro-msg { margin-top: var(--e-2); }

.form-nota { font-size: var(--t-xs); color: var(--texto-suave); margin: var(--e-4) 0 0; text-align: center; }
.form-retorno {
  padding: var(--e-4); background: #e8f5ec; border: 1px solid #b6dfc3;
  border-radius: var(--raio-sm); color: #14522c; text-align: center;
}

/* honeypot anti-spam */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   14. CONTATO
   ========================================================================== */
.contato-item { display: flex; gap: var(--e-4); align-items: flex-start; margin-bottom: var(--e-6); }
.contato-item__icone {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--raio-sm);
  background: rgba(75, 201, 232, .15); color: var(--ciano);
  display: grid; place-items: center;
}
.contato-item__icone svg { width: 22px; height: 22px; }
.contato-item strong { display: block; color: #fff; font-size: var(--t-sm); margin-bottom: .12em; }
.contato-item a, .contato-item span { color: #ccd8ea; font-size: var(--t-sm); }
.contato-item a { display: inline-block; padding: .18em 0; }
.contato-item a:hover { color: var(--ciano); }

.mapa-espaco {
  background: var(--fundo-alt); border: 1px dashed var(--linha-forte);
  border-radius: var(--raio); min-height: 320px; display: grid; place-items: center;
  text-align: center; padding: var(--e-8);
}
.mapa-espaco p { color: var(--texto-medio); font-size: var(--t-sm); max-width: 440px; margin-inline: auto; }

/* ==========================================================================
   15. RODAPÉ
   ========================================================================== */
.rodape {
  background: var(--marinho-escuro); color: #a3b3cc;
  padding: var(--e-secao) 0 0; font-size: var(--t-sm);
}
.rodape a { color: #a3b3cc; text-decoration: none; }
.rodape a:hover { color: var(--ciano); text-decoration: underline; }
/* títulos de coluna do rodapé: são <h2> por hierarquia, mas visualmente são
   rótulos — por isso sem serifa, caixa alta e pequenos */
.rodape__titulo { font-family: var(--fonte); color: #fff; font-size: var(--t-sm);
  font-weight: 700; margin-bottom: var(--e-5);
  text-transform: uppercase; letter-spacing: .09em; }
.rodape__grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--e-10); }
.rodape__logo { width: 190px; margin-bottom: var(--e-5); }
.rodape__lista { list-style: none; margin: 0; padding: 0; }
.rodape__lista li { margin-bottom: var(--e-1); }
.rodape__lista a { display: inline-block; padding: .3em 0; }

.rodape__selos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.rodape__selos .selo { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #ccd8ea; }

.rodape__base {
  margin-top: var(--e-12); padding: var(--e-6) 0; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-8);
  justify-content: space-between; align-items: center;
  font-size: var(--t-xs); color: #8395b3;
}
.rodape__legais { display: flex; flex-wrap: wrap; gap: var(--e-5); }

/* ==========================================================================
   16. WHATSAPP FLUTUANTE
   ========================================================================== */
.zap-flutua {
  position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: var(--z-flutuante);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--zap); color: #fff; text-decoration: none;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(14, 122, 66, .38);
  transition: background-color var(--normal) var(--curva), box-shadow var(--normal) var(--curva);
}
.zap-flutua:hover { background: var(--zap-hover); color: #fff; box-shadow: 0 8px 26px rgba(14, 122, 66, .5); }
.zap-flutua svg { width: 31px; height: 31px; }

/* --- Voltar ao topo ---
   Só aparece depois que o visitante passa da segunda seção. No desktop fica
   acima do WhatsApp, na mesma coluna; no celular vai para o lado OPOSTO, para
   não disputar a área do polegar com o botão de contato. */
.ao-topo {
  position: fixed; right: var(--e-5); bottom: calc(var(--e-5) + 58px + var(--e-3));
  z-index: var(--z-flutuante);
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--marinho);
  border: 1px solid var(--linha-forte);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sombra-3);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--normal) var(--curva),
              transform var(--normal) var(--curva),
              visibility 0s linear var(--normal),
              background-color var(--rapido) var(--curva);
}
.ao-topo[data-visivel="1"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--normal) var(--curva),
              transform var(--normal) var(--curva),
              visibility 0s,
              background-color var(--rapido) var(--curva);
}
.ao-topo:hover { background: var(--fundo-alt); color: var(--ciano-texto); }
.ao-topo svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
  /* lado oposto ao WhatsApp, e na mesma altura dele */
  .ao-topo { right: auto; left: var(--e-4); bottom: var(--e-4); width: 46px; height: 46px; }
}

@media print { .ao-topo { display: none !important; } }

/* ==========================================================================
   17. COOKIES (LGPD)
   ========================================================================== */
.cookies {
  position: fixed; left: var(--e-4); right: var(--e-4); bottom: var(--e-4);
  z-index: var(--z-modal);
  background: #fff; border: 1px solid var(--linha-forte); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-4); padding: var(--e-6);
  max-width: 660px; margin-inline: auto;
  display: none;
}
.cookies[data-aberto="1"] { display: block; }
.cookies h2 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.cookies > p { font-size: var(--t-sm); color: var(--texto-medio); margin-bottom: var(--e-5); }
.cookies__botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.cookies__botoes .btn { min-height: 44px; padding: .6em 1.35em; font-size: var(--t-sm); }

.link-botao {
  background: none; border: 0; min-height: 44px; padding: 0 var(--e-3);
  font-size: var(--t-sm); font-weight: 600; color: var(--texto-medio);
  cursor: pointer; text-decoration: underline; border-radius: var(--raio-sm);
  transition: color var(--rapido) var(--curva);
}
.link-botao:hover { color: var(--marinho); }

.cookies__prefs {
  display: none; margin: 0 0 var(--e-5);
  border-top: 1px solid var(--linha); padding-top: var(--e-5);
}
.cookies__prefs[data-aberto="1"] { display: block; }
.pref {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-xs); color: var(--texto-medio); margin-bottom: var(--e-4);
  cursor: pointer; line-height: 1.5;
}
.pref:last-child { margin-bottom: 0; }
.pref input { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; accent-color: var(--ciano-texto); cursor: pointer; }
.pref input:disabled { cursor: not-allowed; }
.pref strong { display: block; color: var(--marinho); margin-bottom: .1em; }

/* ==========================================================================
   18. UTILIDADES
   ========================================================================== */
.centro { text-align: center; }
.sem-margem { margin-bottom: 0; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cta-caixa {
  position: relative; overflow: hidden;
  background: linear-gradient(122deg, var(--marinho) 0%, var(--marinho-claro) 65%, #1b5f7a 100%);
  border-radius: var(--raio-lg); padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center; color: #ccd8ea;
}
.cta-caixa::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 12%, rgba(75, 201, 232, .2), transparent 55%);
  pointer-events: none;
}
.cta-caixa > * { position: relative; }
.cta-caixa h2 { color: #fff; }
.cta-caixa p { max-width: 56ch; margin-inline: auto; color: #b3c2d9; }
.cta-caixa__botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-8); }

/* ==========================================================================
   19. RESPONSIVO
   ========================================================================== */
@media (max-width: 1080px) {
  .garantias { grid-template-columns: repeat(2, 1fr); gap: var(--e-6) var(--e-8); }
}

@media (max-width: 1000px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
}

/* Em tela baixa o elemento fixo não caberia e ficaria cortado.
   Em tela estreita as colunas já empilham, então sticky perde o sentido. */
@media (max-height: 1000px) and (max-width: 1100px), (max-width: 880px) {
  .duas-colunas--fixa .coluna-fixa { position: static; }
}

@media (max-width: 880px) {
  .menu-btn { display: inline-flex; }

  /* No celular a barra de credenciais mostra APENAS o telefone.
     Antes sobravam duas listas — o selo "corretora desde 2012" e o telefone —
     que empilhavam em duas linhas centralizadas e ficavam com cara de erro.
     Uma linha só, com o dado acionável, resolve. */
  .barra-topo__interno { justify-content: center; min-height: 34px; }
  .barra-topo ul:first-child { display: none; }
  .barra-topo a { font-weight: 600; }

  /* CRÍTICO: sem backdrop-filter aqui.
     Um elemento com backdrop-filter (ou filter, transform, perspective) vira o
     BLOCO RECIPIENTE dos descendentes position:fixed. Com ele, o inset do menu
     passava a ser relativo ao cabeçalho — 78px de altura — em vez da janela, e
     o menu abria com 85px, mostrando só o primeiro item.
     No celular o cabeçalho fica com fundo sólido, que resolve e ainda economiza
     o custo de composição do blur. */
  .topo {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  .nav {
    /* Abre abaixo do cabeçalho e vai até o fim da janela. O valor do topo
       acompanha a altura real do cabeçalho, medida pelo site.js — assim não
       quebra se a barra de credenciais mudar de altura. */
    position: fixed;
    inset: var(--altura-topo, 78px) 0 0;
    z-index: var(--z-fixo);
    background: #fff; padding: var(--e-5) var(--e-5) var(--e-16);
    overflow-y: auto; overscroll-behavior: contain;
    /* O menu fechado NÃO é jogado para fora da tela com translateX: um elemento
       position:fixed fora do viewport cria rolagem horizontal real, e nem
       overflow-x:clip na raiz o contém (o bloco recipiente dele é o viewport).
       Por isso ele fica no lugar e some por opacidade.
       visibility:hidden também o tira da ordem de tabulação e da árvore de
       acessibilidade — sem isso o teclado navega para links invisíveis. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--normal) var(--curva),
                transform var(--normal) var(--curva),
                visibility 0s linear var(--normal);
    border-top: 1px solid var(--linha);
  }
  .nav[data-aberto="1"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--normal) var(--curva),
                transform var(--normal) var(--curva),
                visibility 0s;
  }
  .nav__lista { flex-direction: column; align-items: stretch; gap: var(--e-1); }
  .nav__lista a { min-height: 52px; font-size: var(--t-base); padding: 0 var(--e-4); }
  .tem-sub > a::after { margin-left: auto; }
  .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--ciano-borda);
    border-radius: 0; margin: var(--e-1) 0 var(--e-3) var(--e-4);
    padding: 0 0 0 var(--e-2); min-width: 0;
  }
  .topo__acoes .btn { display: none; }
}

@media (max-width: 640px) {
  :root {
    --t-base: 1rem;
    /* Mais respiro nas laterais no celular. 20px deixava o texto do hero
       quase encostado na borda da tela. */
    --e-5: 1.5rem;
  }
  .container { padding-inline: var(--e-6); }
  .hero__interno { padding-block: clamp(2.75rem, 9vw, 4rem); }
  .rodape__grade { grid-template-columns: 1fr; gap: var(--e-8); }
  .rodape__base { flex-direction: column; align-items: flex-start; }
  /* no toque, os links do rodapé precisam de área confortável */
  .rodape__lista li { margin-bottom: 0; }
  .rodape__lista a { display: block; padding: .68em 0; }
  .rodape__legais { gap: 0 var(--e-6); }
  .rodape__legais a, .rodape__legais .link-botao { display: block; padding: .9em 0; }
  .contato-item a { padding: .5em 0; }
  .hero__botoes .btn, .cta-caixa__botoes .btn { width: 100%; }
  .garantias { grid-template-columns: 1fr; gap: var(--e-5); }
  .operadoras { gap: var(--e-6) var(--e-8); }
  .operadoras img { max-height: 38px; }
  .zap-flutua { width: 54px; height: 54px; right: var(--e-4); bottom: var(--e-4); }
  .cookies { padding: var(--e-5); left: var(--e-3); right: var(--e-3); bottom: var(--e-3); }
  .cookies__botoes .btn { width: 100%; }
  .campo-radio label { flex: 1 1 auto; justify-content: center; }
  .faq__item summary { padding: var(--e-4) var(--e-5); }
  .faq__resposta { padding: 0 var(--e-5) var(--e-5); }
}

/* ==========================================================================
   20. PREFERÊNCIAS DO USUÁRIO E IMPRESSÃO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card-plano:hover .card-plano__foto img,
  .card-post:hover .card-post__foto img { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --texto-medio: #333c4d; --texto-suave: #3d4759; --linha: #b9c3d1; --linha-forte: #8b98ab; }
  .btn { border-color: currentColor; }
}

/* ==========================================================================
   21. CALCULADORAS (portabilidade e quiz de perfil)
   ========================================================================== */
.calc {
  max-width: 720px; margin-inline: auto;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-4); overflow: hidden;
}

/* --- barra de progresso --- */
.calc__topo { padding: var(--e-6) var(--e-6) 0; }
.calc__progresso {
  height: 6px; background: var(--fundo-alt2); border-radius: var(--raio-pill);
  overflow: hidden; margin-bottom: var(--e-3);
}
.calc__barra {
  height: 100%; width: 0%; border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--ciano-texto), var(--ciano));
  transition: width var(--lento) var(--curva);
}
.calc__contador {
  font-size: var(--t-xs); font-weight: 600; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .08em;
}

/* --- passos --- */
.calc__passo { display: none; padding: var(--e-6); }
.calc__passo[data-ativo="1"] { display: block; }
.calc__passo h2 { font-size: var(--t-xl); margin-bottom: var(--e-2); }
.calc__ajuda { font-size: var(--t-sm); color: var(--texto-medio); margin-bottom: var(--e-6); }

/* --- opções (radio grandes, estilo cartão) --- */
.calc__opcoes { display: grid; gap: var(--e-3); }
.calc__opcao {
  display: flex; align-items: center; gap: var(--e-4);
  min-height: 60px; padding: var(--e-4) var(--e-5);
  border: 1.5px solid var(--linha-forte); border-radius: var(--raio-sm);
  cursor: pointer; background: #fff;
  transition: border-color var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva);
}
.calc__opcao:hover { border-color: var(--ciano-forte); background: var(--ciano-fundo); }
.calc__opcao input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--ciano-texto); cursor: pointer; }
.calc__opcao:has(input:checked) {
  border-color: var(--ciano-texto); background: var(--ciano-fundo);
  box-shadow: inset 0 0 0 1px var(--ciano-texto);
}
.calc__opcao strong { display: block; font-weight: 600; color: var(--marinho); font-size: var(--t-sm); }
.calc__opcao span { display: block; font-size: var(--t-xs); color: var(--texto-medio); margin-top: 2px; }

.calc__data { max-width: 260px; }

/* --- navegação --- */
.calc__nav {
  display: flex; gap: var(--e-3); justify-content: space-between;
  padding: 0 var(--e-6) var(--e-6);
}
.calc__nav .btn { flex: 1; }
.calc__nav .btn--voltar { flex: 0 0 auto; }

/* --- resultado --- */
.calc__resultado { display: none; padding: var(--e-6); }
.calc__resultado[data-ativo="1"] { display: block; }

.selo-resultado {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4); border-radius: var(--raio-pill);
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: var(--e-4);
}
.selo-resultado svg { width: 16px; height: 16px; }
.selo-resultado--sim    { background: #e4f3e9; color: #175c31; }
.selo-resultado--espera { background: #fdf1dd; color: #7a5310; }
.selo-resultado--nao    { background: var(--erro-fundo); color: var(--erro); }

.calc__titulo-res { font-size: var(--t-2xl); margin-bottom: var(--e-3); }
.calc__explica {
  background: var(--fundo-alt); border: 1px solid var(--linha);
  border-radius: var(--raio-sm); padding: var(--e-5); margin: var(--e-5) 0;
}
.calc__explica p { font-size: var(--t-sm); color: var(--texto-medio); }
.calc__explica strong { color: var(--marinho); }

.calc__regra {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-sm); color: var(--texto-medio); margin-bottom: var(--e-3);
}
.calc__regra svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ciano-texto); }

/* aviso legal — precisa ser lido, não escondido */
.calc__aviso {
  border-left: 3px solid var(--ciano-forte);
  background: var(--ciano-fundo);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  padding: var(--e-4) var(--e-5); margin: var(--e-6) 0;
  font-size: var(--t-xs); color: var(--texto-medio); line-height: 1.6;
}
.calc__aviso strong { color: var(--marinho); }

/* resultado do quiz: cartão do plano indicado */
.calc__indicado {
  display: flex; gap: var(--e-5); align-items: center;
  background: var(--fundo-alt); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: var(--e-5); margin: var(--e-5) 0;
}
.calc__indicado img {
  width: 96px; height: 112px; object-fit: cover; border-radius: var(--raio-sm); flex-shrink: 0;
}
.calc__indicado h3 { font-size: var(--t-lg); margin-bottom: var(--e-1); }
.calc__indicado p { font-size: var(--t-sm); color: var(--texto-medio); margin-bottom: var(--e-2); }

.calc__pontos { list-style: none; margin: 0 0 var(--e-6); padding: 0; }
.calc__pontos li {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-sm); color: var(--texto-medio); margin-bottom: var(--e-3);
}
.calc__pontos svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ciano-texto); }

.calc__erro {
  display: none; align-items: center; gap: var(--e-2);
  font-size: var(--t-xs); color: var(--erro); font-weight: 500; margin-top: var(--e-3);
}
.calc__erro[data-ativo="1"] { display: flex; }

@media (max-width: 640px) {
  .calc__nav { flex-direction: column-reverse; }
  .calc__nav .btn { width: 100%; }
  .calc__indicado { flex-direction: column; align-items: flex-start; text-align: left; }
  .calc__indicado img { width: 100%; height: 160px; }
}

/* ==========================================================================
   22. ANIMAÇÕES DE ENTRADA

   Regra de ouro: o conteúdo NASCE VISÍVEL. A classe .js só é colocada no
   <html> pelo próprio script; sem JavaScript — e para os rastreadores de
   busca — nada fica escondido. Só animamos opacity e transform, que não
   disparam recálculo de layout e portanto não afetam o CLS.
   ========================================================================== */
.js [data-anima] {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.js [data-anima].visivel {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--curva), transform .55s var(--curva);
}
/* escalonamento dentro de grades: cada filho entra um pouco depois do anterior */
.js [data-anima-grupo] > * { opacity: 0; transform: translateY(16px); }
.js [data-anima-grupo].visivel > * {
  opacity: 1; transform: none;
  transition: opacity .5s var(--curva), transform .5s var(--curva);
}
.js [data-anima-grupo].visivel > *:nth-child(1) { transition-delay: 0ms; }
.js [data-anima-grupo].visivel > *:nth-child(2) { transition-delay: 70ms; }
.js [data-anima-grupo].visivel > *:nth-child(3) { transition-delay: 140ms; }
.js [data-anima-grupo].visivel > *:nth-child(4) { transition-delay: 210ms; }
.js [data-anima-grupo].visivel > *:nth-child(5) { transition-delay: 280ms; }
.js [data-anima-grupo].visivel > *:nth-child(6) { transition-delay: 350ms; }

/* o hero não espera rolagem: entra assim que a página carrega */
.js .hero [data-anima] { transform: translateY(20px); }

/* Quem pediu menos movimento não recebe nenhum: tudo visível, sem transição. */
@media (prefers-reduced-motion: reduce) {
  .js [data-anima],
  .js [data-anima-grupo] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Válvula de escape. O site.js liga esta classe se detectar que alguma
   transição travou (aba em segundo plano, compositor parado, navegador
   antigo). Conteúdo invisível é conteúdo perdido — na dúvida, mostra tudo. */
.js.anima-off [data-anima],
.js.anima-off [data-anima-grupo] > * {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

@media print {
  .barra-topo, .topo, .rodape, .zap-flutua, .cookies,
  .hero__botoes, .cta-caixa, .form-caixa, .mapa-espaco { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .hero { background: none !important; color: #000; }
  .hero h1, .hero h1 b, .hero__texto { color: #000 !important; }
  .secao { padding: 1rem 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .faq__item summary::after { display: none; }
}