/* Fontes locais (Google Fonts, licença OFL em assets/fonts): um arquivo variável por família, só o subconjunto latino.
   A faixa de peso fica nos pesos que o site usa: um <b> dentro de texto 600 não passa de 700 */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/figtree-latin.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../assets/fonts/montserrat-latin.woff2") format("woff2"); }

:root {
  /* Marca (guia de marca v1.0) */
  --teal: #255E68;
  --teal-escuro: #1B474F;
  --teal-claro: #7FB1B8;
  --ouro: #BF9E66;
  --ouro-escuro: #B89357;
  --ouro-claro: #E7C78C;
  --ouro-grad: linear-gradient(45deg, var(--ouro-escuro), var(--ouro-claro) 55%, var(--ouro));
  --marfim: #F3E9D8; /* neutro quente: texto sobre painéis verdes e fotos, e realce de detalhes que não são ação */
  --verde-suave: #D2E4E5; /* texto suave sobre painéis verdes */
  --coral: #FFA28A; /* cor de destaque (complementar do teal) com um papel só: marcar o que é da Sonhador (frase da virada e coluna da tabela). Como texto só sobre fundo escuro (8.6:1 no --fundo); sobre o teal dá 3.8:1 */

  /* Tema principal: verde-escuro (o site inteiro é escuro) */
  --fundo: #09211F;
  --superficie: #0F302F;
  --superficie-2: #0C2827;
  --borda: rgba(127, 177, 184, .16);
  --texto: #EEF4F3;
  --texto-suave: #A3C0C0;
  --tinta: #1F2A2C; /* texto escuro sobre o dourado */

  /* Tema escuro (hero, contato, rodapé): verde profundo */
  --e-fundo: #0B2A2A;
  --e-superficie: #133A3F;
  --e-superficie-2: #1A454B;
  --e-borda: #24545A;
  --e-texto: #EEF4F3;
  --e-suave: #A3C0C0;

  --titulo: "Montserrat", system-ui, sans-serif; /* mesma família do logo */
  --sans: "Figtree", system-ui, sans-serif;

  /* Cantos: botões, etiquetas e selos em pílula; cartões 16px; itens internos 12px; painéis e mídia de destaque 28px */
  --raio: 16px;
  --raio-p: 12px;
  --raio-g: 28px;
  --container: 1160px;
  --topo-h: 68px;
  --suave-ease: cubic-bezier(.16, 1, .3, 1); /* expo-out: começa rápido e pousa devagar */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 16px -6px rgba(0, 0, 0, .35);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .25), 0 18px 40px -14px rgba(0, 0, 0, .55);
  --sombra-3: 0 4px 8px rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .7);

  /*
   * Contraste (WCAG):
   * teal sobre fundo ≈ 6:1 (ok para qualquer texto)
   * ouro sobre fundo ≈ 2:1 (só decoração, nunca texto) → no claro, destaque em teal
   * ouro-claro sobre fundo escuro ≈ 10:1; sobre teal ≈ 4.7:1 (ok para título)
   * marfim sobre fundo ≈ 14:1; sobre superfície ≈ 11,8:1; sobre teal ≈ 6,1:1 (ok para qualquer texto)
   */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); scroll-padding-bottom: 100px; scrollbar-color: #2A5A5F var(--fundo); }
/* Rolagem suave com Lenis (só no computador; o CSS abaixo vem do próprio Lenis) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
::selection { background: rgba(231, 199, 140, .32); color: var(--marfim); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  --primaria: var(--teal-claro);
  --destaque: var(--ouro-claro);
  --suave: var(--texto-suave);
  --sup2: var(--superficie-2);
}

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

/* Textura granulada bem leve por cima de tudo: tira o "chapado" dos degradês escuros */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--primaria); }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 700; }
p { margin: 0; }

.escuro {
  background: var(--e-fundo);
  color: var(--e-texto);
  --primaria: var(--teal-claro);
  --destaque: var(--ouro-claro);
  --suave: var(--e-suave);
  --sup2: var(--e-superficie-2);
}
.verde {
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-escuro) 100%);
  color: var(--marfim);
  --primaria: var(--marfim);
  --destaque: var(--ouro-claro);
  --suave: var(--verde-suave);
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 3px solid var(--primaria); outline-offset: 3px; border-radius: 6px; }

.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ouro-grad); color: var(--tinta); padding: 12px 16px; border-radius: 8px; }
.pular:focus { top: 12px; }

/* ---------- Tipografia ---------- */
.rotulo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--titulo); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primaria); margin-bottom: 16px;
}
.rotulo::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; }
.escuro .rotulo { color: var(--ouro-claro); }
h1 { font-size: clamp(38px, 7.4vw, 62px); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--destaque); }
.lead { color: var(--suave); font-size: 18px; max-width: 560px; margin-top: 16px; text-wrap: pretty; }

/* ---------- Botões ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .5s var(--suave-ease), box-shadow .5s var(--suave-ease), background-color .35s ease, border-color .35s ease, color .35s ease;
}
.btn:active:not(:disabled) { transform: scale(.97); transition-duration: .12s; } /* vence os hovers (especificidade maior) */
.btn-ouro { background: var(--ouro-grad); color: var(--tinta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 20px -8px rgba(184, 147, 87, .7); }
.btn-ouro:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 16px 34px -12px rgba(184, 147, 87, .95); transform: translateY(-2px); }
.btn-contorno { border-color: currentColor; color: inherit; background: none; } /* background: <button> vem com fundo cinza do navegador */
.btn-contorno:hover { background: rgba(127, 177, 184, .16); border-color: var(--teal-claro); transform: translateY(-2px); }
.btn-p { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-g { min-height: 58px; padding: 0 32px; font-size: 17px; margin-top: 28px; }

/* ---------- Emblema animado (mechas do logo) ---------- */
.emblema { display: block; }
.emblema svg { display: block; width: 100%; height: 100%; overflow: visible; }
.emblema path { transform-box: fill-box; transform-origin: 15% 50%; }
@media (prefers-reduced-motion: no-preference) {
  /* Cada mecha surge em sequência e depois balança devagar, como cabelo ao vento.
     O vento só roda com o emblema na tela (.ventando, pelo JS) e para em repouso depois de 4 ciclos:
     animação de <path> roda na thread principal e, sem fim, ocupava o processador do celular o tempo todo */
  .emblema.anima path { animation: mecha-surgir 1.2s var(--suave-ease) both; animation-delay: calc(var(--i) * 120ms); }
  .emblema.anima.ventando path {
    animation: mecha-surgir 1.2s var(--suave-ease) both, mecha-vento 7s ease-in-out 4 alternate;
    animation-delay: calc(var(--i) * 120ms), calc(1.4s + var(--i) * .45s);
  }
  .topo-logo:hover .emblema path { animation: mecha-onda .9s ease-in-out; animation-delay: calc(var(--i) * 60ms); }
}
@keyframes mecha-surgir { from { opacity: 0; transform: translateX(-8%) scale(.96); } }
@keyframes mecha-vento { from { transform: none; } to { transform: translate(1.6%, -1%) rotate(1.4deg); } }
@keyframes mecha-onda { 50% { transform: translateX(5%) rotate(2deg); } }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50; height: var(--topo-h);
  background: rgba(9, 33, 31, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(127, 177, 184, .14);
  transition: box-shadow .4s ease, transform .6s var(--suave-ease);
}
/* Sobe o bastante para a sombra e o brilho do botão não ficarem aparecendo no alto da tela */
.topo.oculto:not(:focus-within) { transform: translateY(calc(-100% - 28px)); box-shadow: none; }
/* Progresso de leitura: linha dourada que cresce com a rolagem */
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ouro-grad); transform: scaleX(0); transform-origin: left;
}
@supports (animation-timeline: scroll()) {
  .topo::after { animation: progresso linear both; animation-timeline: scroll(root); }
}
@keyframes progresso { to { transform: scaleX(1); } }
.topo.rolou { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6); }
.topo-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topo-logo { display: flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--texto); }
.topo-logo .emblema { width: 40px; height: 40px; flex: none; }
.topo-logo span { font-weight: 600; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.topo-logo small { display: block; font-weight: 500; font-size: 12px; letter-spacing: .1em; color: var(--texto-suave); }
.topo nav { display: none; gap: 32px; }
.topo nav a { position: relative; color: var(--texto); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 0; transition: color .2s ease; }
.topo nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--ouro-grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--suave-ease);
}
.topo nav a:hover { color: var(--marfim); }
.topo nav a:hover::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: 48px 0 104px;
  background:
    radial-gradient(60% 70% at 85% 35%, rgba(37, 94, 104, .75), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(27, 71, 79, .6), transparent 70%),
    var(--e-fundo);
}
.hero-emblema { position: absolute; width: 640px; height: 640px; right: -170px; top: 30px; opacity: .16; pointer-events: none; }
.hero-in { position: relative; z-index: 1; display: grid; gap: 44px; align-items: center; }
.hero::before {
  content: ""; position: absolute; left: -20%; top: -40%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(127, 177, 184, .13), transparent 62%);
}
/* A base do hero se dissolve no fundo da página (sem linha de corte) */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fundo));
}
.hero .lead { font-size: 19px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Diz o que acontece ao clicar: o botão abre o WhatsApp */
.acoes-nota { margin-top: 12px; font-size: 14px; color: var(--suave); }
@media (max-width: 639px) { .acoes .btn { flex: 1 1 100%; } }
/* Telas bem estreitas (320px, ou celular com zoom de tela): o botão do topo vira só o ícone (o texto continua
   para o leitor de tela) e o texto dos botões pode quebrar linha em vez de empurrar a página para o lado */
@media (max-width: 359px) {
  .topo .btn-p { flex: none; width: 44px; padding: 0; }
  .topo-btn-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
}
/* Celular e tablet: a foto real vem logo depois do título e antes dos botões, e o texto de apoio desce.
   Quem chega pelo anúncio vê promessa, prova e botão de agendar já na primeira tela */
@media (max-width: 899px) {
  .hero { padding-top: 32px; }
  .hero-in { gap: 0; }
  .hero-txt { display: contents; }
  .hero-visual { order: 1; margin-top: 24px; }
  .hero-txt > :nth-child(n+4) { order: 2; }
  .hero-txt > .lead { order: 3; margin-top: 24px; }
  .acoes { margin-top: 20px; }
}
/* ---------- Antes e depois (classes "comp": nomes com "ad" são escondidos por bloqueadores de anúncio) ---------- */
.comp {
  position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio-g);
  background: var(--sup2); user-select: none; -webkit-user-select: none; isolation: isolate;
}
.comp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comp-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comp-linha {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .25); pointer-events: none; z-index: 2;
}
.comp-botao {
  position: absolute; top: 68%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--ouro-grad); color: var(--tinta); display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3), 0 0 0 4px rgba(255, 255, 255, .9);
  transition: transform .25s var(--suave-ease), box-shadow .25s ease;
}
.comp-botao svg.i { width: 22px; height: 22px; stroke-width: 2.4; }
.comp:hover .comp-botao, .comp.arrastando .comp-botao { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 8px 26px rgba(0, 0, 0, .35), 0 0 0 6px rgba(255, 255, 255, .6); }
.comp:has(.comp-range:focus-visible) .comp-botao { outline: 3px solid var(--ouro-claro); outline-offset: 5px; }
.comp-tag {
  position: absolute; top: 16px; z-index: 2; pointer-events: none;
  font: 600 12px/1 var(--titulo); letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px; background: rgba(13, 42, 46, .72); color: var(--marfim);
  backdrop-filter: blur(6px); transition: opacity .2s ease;
}
.comp-tag-antes { left: 16px; }
.comp-tag-depois { right: 16px; background: var(--ouro-grad); color: var(--tinta); }
/* Esconde a etiqueta quando a linha passa por cima dela */
.comp[data-lado="depois"] .comp-tag-antes, .comp[data-lado="antes"] .comp-tag-depois { opacity: 0; }

/* O input range invisível cobre a imagem: arrastar, clicar para pular e teclado (setas) */
.comp::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -110px 90px -60px rgba(9, 33, 31, .45);
}
.comp-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 3;
  opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: none;
}
.comp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100vh; }
.comp-range::-moz-range-thumb { width: 2px; height: 100%; border: 0; }

.comp-topo { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(127, 177, 184, .25); width: 100%; }
.hero-visual { position: relative; max-width: 460px; width: 100%; justify-self: center; }
.comp-topo figcaption {
  position: absolute; right: 14px; bottom: 16px; z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--marfim); background: rgba(13, 42, 46, .72); backdrop-filter: blur(6px);
  padding: 8px 8px 8px 16px; border-radius: 999px;
}
/* Celular e tablet: recorte quadrado (as duas fotos com o mesmo recorte, o alinhamento se mantém) para caber com o botão na primeira tela */
@media (max-width: 899px) {
  .comp-topo { aspect-ratio: 1; }
  .comp-topo > img { object-position: 50% 30%; }
}
.ilustra { font: 600 12px/1 var(--titulo); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); }

/* Dica de arraste na primeira vez que aparece */
@media (prefers-reduced-motion: no-preference) {
  .comp.dica .comp-antes, .comp.dica .comp-linha { animation: dica 1.6s ease-in-out; }
}
@keyframes dica { 0%, 100% { --pos: 50%; } 30% { --pos: 36%; } 65% { --pos: 64%; } }
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

/* ---------- Seções ---------- */
.secao { position: relative; padding: 80px 0; }
.secao-sup {
  background:
    radial-gradient(45% 38% at 100% 50%, rgba(37, 94, 104, .32), transparent),
    linear-gradient(180deg, var(--fundo), #0E3031 180px, #0E3031 calc(100% - 180px), var(--fundo));
}
.cab { margin-bottom: 44px; }
/* "Problema" e comparativo são uma ideia só: menos respiro entre os dois */
.problema { padding-bottom: 56px; }

.aviso { margin-top: 28px; color: var(--suave); font-size: 14px; }

/* Como funciona (seção verde) */
.como { overflow: hidden; margin: 0 12px; border-radius: var(--raio-g); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--sombra-3); }
.como-emblema { position: absolute; width: 520px; height: 520px; right: -140px; bottom: -160px; opacity: .08; pointer-events: none; }
.como .container { position: relative; }
.etapas { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.etapas li { padding-top: 20px; border-top: 1px solid rgba(243, 233, 216, .22); }
.etapa-n { display: block; font: 600 44px/1 var(--titulo); letter-spacing: -.03em; color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.etapas h3 { margin: 16px 0 6px; }
.etapas p { color: var(--suave); max-width: 34ch; }

.ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sup2); color: var(--primaria); flex: none; transition: transform .6s var(--suave-ease), color .25s ease; }
.verde .ico { background: rgba(255, 255, 255, .12); color: var(--marfim); }
.ico-ouro { background: var(--ouro-grad) !important; color: var(--tinta) !important; }

.depos { display: grid; gap: 20px; }
.depo.depo-destaque {
  border-color: transparent; color: var(--marfim);
  background: radial-gradient(120% 80% at 100% 0%, rgba(127, 177, 184, .22), transparent 60%), linear-gradient(160deg, var(--teal), var(--teal-escuro));
}
.depo.depo-destaque footer span { color: var(--verde-suave); }
.depo {
  margin: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px; box-shadow: var(--sombra-1), inset 0 1px 0 rgba(243, 233, 216, .07);
  display: flex; flex-direction: column; gap: 16px; position: relative;
  transition: transform .6s var(--suave-ease), border-color .25s ease, box-shadow .6s ease;
}
.depo:hover { transform: translateY(-4px); box-shadow: var(--sombra-2), inset 0 1px 0 rgba(243, 233, 216, .07); }
.depo:hover { border-color: var(--teal-claro); }
.depo p { font-size: 17px; flex: 1; }
.depo footer { display: flex; flex-direction: column; font-size: 15px; }
.depo footer span { color: var(--suave); }

/* Perguntas: linhas separadas por um fio (sem cartão) */
.faq { border-top: 1px solid var(--borda); }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-weight: 600; font-size: 17px; min-height: 44px; transition: color .2s ease;
}
.faq summary:hover, .faq details[open] summary { color: var(--marfim); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--marfim); border-bottom: 2px solid var(--marfim); transform: rotate(45deg); transition: transform .3s var(--suave-ease), margin-top .3s var(--suave-ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 44px 24px 0; max-width: 62ch; color: var(--suave); }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: abrir .35s var(--suave-ease); }
}
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size .55s var(--suave-ease), content-visibility .55s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

.contato {
  padding: 88px 0; overflow: hidden;
  background: radial-gradient(60% 70% at 100% 35%, rgba(37, 94, 104, .5), transparent 70%), linear-gradient(180deg, var(--fundo), var(--e-fundo) 45%);
}
.contato-in { display: grid; gap: 48px; align-items: center; }
.info { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.info li {
  display: flex; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--e-borda);
}
.info b { display: block; font-family: var(--titulo); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--e-suave); }
/* Área de toque maior nos links (Instagram, WhatsApp) sem mudar o layout */
.info a { color: var(--ouro-claro); display: inline-block; padding: 12px 0; margin: -12px 0; }

.rodape { padding: 40px 0 110px; border-top: 1px solid var(--e-borda); }
.rodape-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--e-suave); font-size: 14px; }
.rodape img { width: 130px; }
.rodape-texto { display: grid; gap: 8px; justify-items: end; text-align: right; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; }
.rodape-links a, .rodape-links button {
  padding: 13px 0; margin: -13px 0; border: 0; background: none; cursor: pointer; /* alvo de toque de 44px */
  font: inherit; color: var(--e-suave); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(163, 192, 192, .4);
  transition: color .3s ease, text-decoration-color .3s ease;
}
.rodape-links a:hover, .rodape-links button:hover { color: var(--marfim); text-decoration-color: currentColor; }

/* Barra fixa (celular) */
.barra-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(13, 42, 46, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translateY(110%); visibility: hidden; transition: transform .35s var(--suave-ease), visibility 0s .35s;
}
/* Escondida também para o teclado (visibility), não só fora da tela */
.barra-cta.visivel { transform: none; visibility: visible; transition-delay: 0s; }
.barra-cta .btn { width: 100%; }

/* Aviso de cookies (js/consentimento.js). Nome neutro: bloqueadores escondem "cookie-banner", "consent" etc. */
.aviso-dados {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
  display: grid; gap: 10px; padding: 18px 20px;
  background: var(--e-superficie); color: var(--e-texto); border: 1px solid var(--e-borda); border-radius: var(--raio);
  box-shadow: var(--sombra-3); font-size: 14.5px; line-height: 1.5;
  transition: bottom .35s var(--suave-ease);
}
.aviso-dados[hidden] { display: none; }
.aviso-dados-titulo { font: 600 13px/1.2 var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-claro); }
.aviso-dados a { color: var(--ouro-claro); }
.aviso-dados-botoes { display: flex; gap: 10px; margin-top: 4px; }
/* Recusar e Aceitar com o mesmo peso (orientação da ANPD: recusar tem que ser tão fácil quanto aceitar) */
.aviso-dados-botoes .btn { flex: 1; }
.aviso-dados-botoes .btn:hover { color: var(--marfim); border-color: var(--marfim); }
/* No celular, sobe para não ficar em cima da barra de agendamento */
body:has(.barra-cta.visivel) .aviso-dados { bottom: calc(88px + env(safe-area-inset-bottom)); }
/* No celular, versão compacta: cobre menos o topo. O título sai da tela mas continua nomeando o aviso para o leitor de tela */
@media (max-width: 899px) {
  .aviso-dados { gap: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.4; }
  .aviso-dados-botoes .btn { min-height: 40px; font-size: 14px; }
  .aviso-dados-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .aviso-dados-botoes { margin-top: 0; }
}
@keyframes aviso-entra { from { opacity: 0; transform: translateY(24px); } }
@keyframes aviso-aparece { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .aviso-dados:not([hidden]) { animation: aviso-entra .8s .6s var(--suave-ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-dados:not([hidden]) { animation: aviso-aparece .4s ease both; }
}

/* ---------- Faixa de confiança: quatro frases em linha, separadas por um fio (sem cartão e sem ícone) ---------- */
.confianca { position: relative; z-index: 2; margin-top: -56px; }
.confianca-grid {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--borda);
}
.confianca-grid li { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--borda); }
.confianca-grid li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--borda); }
.confianca-grid b { display: block; font-family: var(--titulo); font-weight: 600; font-size: 15px; line-height: 1.3; }
.confianca-grid span { display: block; color: var(--texto-suave); font-size: 14px; line-height: 1.4; margin-top: 4px; }

/* ---------- Problema ---------- */
.cab-centro { text-align: center; margin-left: auto; margin-right: auto; }
.dores { list-style: none; padding: 0; margin: 0 auto; max-width: 940px; display: grid; column-gap: 56px; border-bottom: 1px solid var(--borda); }
.dores li { padding: 24px 0; border-top: 1px solid var(--borda); }
.dores p { font-size: 18px; line-height: 1.5; }
.virada {
  margin: 40px auto 0; max-width: 620px; text-align: center; font-family: var(--titulo); font-weight: 600;
  font-size: clamp(19px, 2.6vw, 24px); line-height: 1.35; letter-spacing: -.01em; text-wrap: balance;
}
.virada b { color: var(--coral); }

/* ---------- Comparativo: tabela (critérios nas linhas). No celular cada critério vira um bloco ---------- */
.comparar { width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; line-height: 1.45; }
.comparar th, .comparar td { padding: 20px 20px; vertical-align: top; border-bottom: 1px solid var(--borda); }
.comparar thead th { font: 700 18px/1.25 var(--titulo); letter-spacing: -.01em; vertical-align: bottom; }
.comparar thead small { display: block; margin-bottom: 6px; font: 700 12px/1 var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.comparar tbody th { width: 20%; padding-left: 0; font: 600 13px/1.5 var(--titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.comparar td { color: var(--texto-suave); }
/* A coluna da prótese é a única com fundo e texto forte */
.comparar .nossa { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: inset 2px 0 0 var(--coral); }
.comparar thead .nossa { border-radius: var(--raio-p) var(--raio-p) 0 0; }
.comparar tbody tr:last-child .nossa { border-radius: 0 0 var(--raio-p) var(--raio-p); }
.comparar tbody tr:last-child > * { border-bottom: 0; }
.comparar-btn { margin-top: 32px; }
@media (max-width: 719px) {
  .comparar, .comparar tbody, .comparar tr, .comparar th, .comparar td { display: block; }
  .comparar thead { display: none; } /* o nome de cada coluna vai escrito em cada célula (data-col) */
  .comparar tbody tr { padding: 20px 0; border-top: 1px solid var(--borda); }
  .comparar tbody th { width: auto; padding: 0 0 12px; border: 0; }
  .comparar td { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 10px 12px; border: 0; }
  .comparar td::before { content: attr(data-col); font-weight: 600; color: var(--texto); }
  .comparar td.nossa::before { color: var(--coral); }
  .comparar tbody .nossa, .comparar tbody tr:last-child .nossa { border-radius: 8px; }
  .comparar-btn { width: 100%; margin-top: 24px; }
}

/* ---------- Modelos e valores (conteúdo de exemplo até chegar a tabela do salão) ---------- */
.nota-exemplo { margin-top: 16px; color: var(--suave); font-size: 14px; }
.modelos { display: grid; gap: 16px; }
.modelo { padding: 24px; }
.modelo h3 { margin-bottom: 8px; }
.modelo > p { color: var(--suave); font-size: 15px; line-height: 1.45; margin-bottom: 16px; }
.modelo li { font-size: 15px; }
.valores {
  margin-top: 24px; padding: 28px; border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--superficie-2); box-shadow: var(--sombra-1);
}
.valores dl { margin: 16px 0 0; display: grid; gap: 0; }
.valores dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.valores dt { color: var(--texto-suave); }
.valores dd { margin: 0; font-family: var(--titulo); font-weight: 600; white-space: nowrap; }
.valores-nota { margin: 16px 0 20px; color: var(--suave); font-size: 15px; max-width: 560px; }
.quiz-creditos { margin: 12px 0 0; color: var(--suave); font-size: 12px; line-height: 1.6; }
.quiz-creditos a { color: inherit; text-decoration: underline; }
@media (min-width: 640px) { .modelos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .modelos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 479px) { .valores { padding: 20px; } .valores .btn { width: 100%; } }

/* ---------- Faixa de CTA intermediária ---------- */
.faixa-cta {
  position: relative; overflow: hidden; margin: 8px 0 80px; padding: 36px 28px; border-radius: var(--raio-g);
  display: grid; gap: 24px; box-shadow: var(--sombra-3);
}
/* Com os depoimentos escondidos a faixa vem logo depois do painel verde: precisa do respiro que a seção daria */
section[hidden] + .container > .faixa-cta { margin-top: 72px; }
.faixa-cta h2 { font-size: clamp(24px, 3.4vw, 34px); }
.faixa-cta p { color: var(--suave); margin-top: 8px; }
.faixa-cta > *:not(.faixa-emblema) { position: relative; }
.faixa-cta .btn { justify-self: start; }
.faixa-emblema { position: absolute; width: 300px; height: 300px; right: -60px; top: -70px; opacity: .1; pointer-events: none; }

/* ---------- Mapa ---------- */
.info .mapa { padding: 0; overflow: hidden; display: block; min-height: 200px; margin-top: 8px; border: 1px solid var(--e-borda); border-radius: var(--raio); }
/* O mapa incorporado do Google não aceita tema; o filtro inverte e tinge de verde para combinar com o site */
.mapa iframe { display: block; width: 100%; height: 240px; border: 0; filter: grayscale(1) invert(.94) sepia(.7) hue-rotate(125deg) saturate(1.6) brightness(.85) contrast(.95); }
.mapa-vazio {
  min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center; color: var(--e-suave); font-size: 14px;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(127, 177, 184, .05) 14px 28px);
}
.mapa-vazio svg.i { width: 28px; height: 28px; color: var(--teal-claro); }
/* Com endereço: aparece o mapa próprio (assets/img/mapa.svg, nas cores do site, sem cookies);
   o do Google, que grava cookies, só carrega no clique */
.info .mapa { position: relative; }
.mapa-abrir { display: block; position: relative; width: 100%; height: 240px; padding: 0; border: 0; background: var(--superficie); cursor: pointer; text-align: left; }
.mapa-abrir img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mapa-rotulo {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 32px 16px 12px;
  font: 600 15px/1.3 var(--sans); color: var(--e-texto); transition: color .3s ease;
  background: linear-gradient(to top, rgba(9, 33, 31, .94) 35%, rgba(9, 33, 31, 0));
}
.mapa-rotulo small { font-weight: 400; font-size: 12px; color: var(--e-suave); }
.mapa-abrir:hover .mapa-rotulo { color: var(--marfim); }
.info .mapa-credito {
  position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; line-height: 1.5; color: var(--e-suave); text-decoration: none; background: rgba(9, 33, 31, .72);
}
.info .mapa-credito:hover { color: var(--marfim); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mapa-abrir img { transition: transform .8s var(--suave-ease); }
  .mapa-abrir:hover img { transform: scale(1.03); }
}

/* ---------- Provas reais (galeria + ampliação) ---------- */
.btn-teal { background: var(--teal); color: var(--marfim); box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(127, 177, 184, .35); }
.btn-teal:hover { background: #2D7380; box-shadow: var(--sombra-2); transform: translateY(-2px); }
.cab-linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 44px; }
.cab-linha .cab { margin-bottom: 0; }
.galeria { display: grid; gap: 12px; }
.foto { position: relative; margin: 0; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-2); aspect-ratio: 4 / 3; background: var(--superficie-2); }
.foto-abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--suave-ease); }
.foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(13, 42, 46, .8), rgba(13, 42, 46, 0) 45%);
}
.foto figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; pointer-events: none;
  color: var(--marfim); font: 600 14px/1.3 var(--titulo); letter-spacing: -.005em;
  transition: transform .4s var(--suave-ease);
}
.foto:hover img { transform: scale(1.05); }
.foto:hover figcaption { transform: translateY(-4px); }
.foto-abrir:focus-visible { outline-offset: -4px; outline-color: var(--ouro-claro); }

.lightbox {
  padding: 0; border: 0; border-radius: var(--raio); max-width: min(92vw, 900px); max-height: 90vh; max-height: 90dvh; /* dvh: desconta a barra do navegador no celular */
  background: transparent; overflow: visible; box-shadow: var(--sombra-3);
}
.lightbox::backdrop { background: rgba(8, 26, 29, .82); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: min(92vw, 900px); max-height: 90vh; max-height: 90dvh; /* dvh: desconta a barra do navegador no celular */ border-radius: var(--raio); object-fit: contain; }
.lightbox-fechar {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(13, 42, 46, .75); color: var(--marfim); backdrop-filter: blur(6px);
  transition: background-color .2s ease, transform .2s ease;
}
.lightbox-fechar:hover { background: var(--teal); transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: ampliar .35s var(--suave-ease); }
  .lightbox[open]::backdrop { animation: esmaecer .35s ease; }
}
@keyframes ampliar { from { opacity: 0; transform: scale(.94); } }

/* ---------- Elementos da logo ---------- */
/* Emblema "colorir": mecha em uma cor só (currentColor) e a cópia colorida aparece por cima, em sequência */
.colorir path.mono { fill: currentColor; }
.colorir path.cor { opacity: 0; transition: opacity .5s ease; transition-delay: calc(var(--i) * 70ms); }
.colorir:hover path.cor, .colorir.ativo path.cor,
.topo-logo:hover path.cor, .rodape-logo:hover path.cor { opacity: 1; }
.topo-logo .emblema { color: var(--teal-claro); }

/* Ornamento: linha dourada · emblema · linha dourada */
.ornamento { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 28px; color: #4F7C7F; }
.ornamento::before, .ornamento::after { content: ""; height: 1.5px; width: min(110px, 22vw); border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(127, 177, 184, .45)); }
.ornamento::after { transform: scaleX(-1); }
.ornamento .emblema { width: 46px; height: 46px; flex: none; transition: transform .8s var(--suave-ease); }
.ornamento .emblema.ativo { transform: rotate(-8deg) scale(1.06); }
.contato .ornamento { justify-content: flex-start; color: var(--e-suave); }
.contato .ornamento::before, .contato .ornamento::after { display: none; }

/* Marca-d'água: emblema em linhas nas seções claras */
.com-marca { overflow: hidden; }
.com-marca > .container { position: relative; }
.marca-dagua { position: absolute; width: 440px; height: 440px; opacity: .1; pointer-events: none; }
#provas .marca-dagua { left: -160px; bottom: -60px; transform: scaleX(-1); }

/* Logo do rodapé */
.rodape-logo { display: block; width: 130px; color: var(--marfim); }
.rodape-logo .emblema { width: 130px; }

/* Ícones ganham o dourado da logo no hover */
.ico { position: relative; isolation: isolate; }
.ico::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ouro-grad); opacity: 0; transition: opacity .25s ease; }
.info li:hover .ico { color: var(--tinta); }
.info li:hover .ico::before { opacity: 1; }

/* ---------- Redução de risco (contato) ---------- */
.garantias { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 8px; color: var(--e-texto); }
.garantias li { display: flex; align-items: center; gap: 8px; }
.garantias svg.i { width: 18px; height: 18px; color: var(--teal-claro); }

/* ---------- Quiz "Qual é o seu caso?" ---------- */
.quiz {
  display: grid; gap: 32px; padding: 28px 24px; border-radius: var(--raio-g); background: var(--superficie);
  box-shadow: var(--sombra-2), inset 0 1px 0 rgba(243, 233, 216, .07); border: 1px solid var(--borda);
}
.quiz-cab .lead { font-size: 17px; }
.quiz-progresso { height: 6px; border-radius: 6px; background: var(--superficie-2); margin-top: 24px; overflow: hidden; }
.quiz-progresso span { display: block; height: 100%; width: 100%; border-radius: 6px; background: var(--teal-claro); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--suave-ease); }
.quiz-form { min-width: 0; }
.quiz-passo { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-passo:focus { outline: none; }
.quiz-passo legend { padding: 0; margin-bottom: 16px; font: 600 17px/1.35 var(--titulo); color: var(--texto); }
.quiz-contador { display: block; margin-bottom: 4px; font: 500 13px/1.3 var(--sans); color: var(--texto-suave); }
.quiz-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-opcoes-img { grid-template-columns: repeat(3, 1fr); }
.quiz-opcoes label {
  position: relative; display: flex; flex-direction: column; gap: 12px; cursor: pointer;
  padding: 16px; border-radius: var(--raio-p); border: 1.5px solid rgba(127, 177, 184, .6); background: var(--fundo);
  font-weight: 600; font-size: 15px; line-height: 1.3;
  transition: border-color .2s ease, background-color .2s ease, transform .25s var(--suave-ease), box-shadow .25s ease;
}
.quiz-opcoes-img label { padding: 8px 8px 12px; text-align: center; }
.quiz-opcoes label:hover { transform: translateY(-2px); box-shadow: var(--sombra-1); }
.quiz-opcoes label:hover { border-color: var(--teal-claro); }
.quiz-opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-opcoes img { width: 100%; max-width: 132px; margin: 0 auto; aspect-ratio: 1; }
.quiz-opcoes label:has(input:checked) { border-color: var(--marfim); background: rgba(243, 233, 216, .06); box-shadow: 0 0 0 3px rgba(243, 233, 216, .14); }
.quiz-opcoes label:has(input:focus-visible) { outline: 3px solid var(--teal-claro); outline-offset: 2px; }
.quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.quiz-nav .quiz-continuar { margin-left: auto; }
.quiz-continuar:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.quiz-voltar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: 600 15px var(--sans); color: var(--texto-suave); transition: color .2s ease;
}
.quiz-voltar:hover { color: var(--marfim); }
.quiz-voltar svg.i { width: 18px; height: 18px; transform: rotate(180deg); }
.quiz-fim { text-align: left; }
.quiz-fim h3 { margin: 16px 0 8px; font-size: 24px; }
.quiz-fim p { color: var(--texto-suave); max-width: 460px; }
.quiz-fim .btn-g { margin-top: 24px; margin-right: 12px; }
.quiz-fim h3:focus { outline: none; }
.quiz-extra { margin-top: 6px; }
.quiz-previa { margin-top: 16px; font-size: 14px; }
.quiz-previa q { color: var(--texto); }
@media (prefers-reduced-motion: no-preference) {
  .quiz-passo:not([hidden]) { animation: abrir .45s var(--suave-ease); }
}

/* ---------- Entrada ao rolar (só com JS; sem JS tudo aparece normal) ---------- */
.js .revelar:not(.visto) { opacity: 0; }
/* Texto do hero: já nasce escondido (não pisca antes do JS rodar); se o JS falhar, aparece sozinho em 3 s.
   O comparador do topo fica de fora de propósito: é a imagem principal e aparece sempre, desde o primeiro instante */
.js .hero-txt > :not(.visto) { opacity: 0; animation: mostrar 0s 3s forwards; }
@keyframes mostrar { to { opacity: 1; } }
/* Com "reduzir movimento" ligado, o conteúdo ainda aparece com um fade simples, sem deslocamento */
.js .revelar.visto { animation: esmaecer 1.1s ease backwards; animation-delay: calc(var(--d, 0) * 90ms); }
@media (prefers-reduced-motion: no-preference) {
  .js .revelar.visto { animation-name: revelar; animation-timing-function: var(--suave-ease); }
  /* Títulos: cada palavra sobe de trás de uma máscara, em sequência */
  .js .revelar.palavras.visto { animation-name: esmaecer; animation-duration: .6s; }
  .js .visto .palavras .p > span, .js .palavras.visto .p > span {
    animation: subir 1.2s var(--suave-ease) backwards;
    animation-delay: calc(var(--d, 0) * 90ms + var(--w, 0) * 55ms);
  }
}
/* Máscara de cada palavra: folga em cima e embaixo para acentos e descendentes não cortarem */
.palavras .p { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.palavras .p > span { display: inline-block; }
@keyframes subir { from { transform: translateY(110%) rotate(3deg); } }
@keyframes esmaecer { from { opacity: 0; } }
@keyframes revelar { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Efeitos ligados à rolagem (navegadores que suportam) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Emblemas em parallax: andam mais devagar que a página */
    .hero-emblema { animation: paralaxe-topo linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .como-emblema { animation: paralaxe linear both; animation-timeline: view(); }
  }
}
@keyframes paralaxe-topo { to { transform: translateY(180px) rotate(8deg); } }
@keyframes paralaxe { from { transform: translateY(120px) rotate(-6deg); } to { transform: translateY(-120px) rotate(6deg); } }


/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  .dores { grid-template-columns: 1fr 1fr; }
  .faixa-cta { padding: 44px; }
  .depos { grid-template-columns: 1fr 1fr; }
  .galeria { grid-template-columns: 1fr 1fr; }
  .depo-destaque { grid-column: span 2; }
}
@media (min-width: 900px) {
  .container { padding: 0 32px; }
  .topo nav { display: flex; }
  .hero { padding: 72px 0 136px; }
  .hero-in { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .hero-visual { justify-self: end; }
  .secao { padding: 112px 0; }
  .problema { padding-bottom: 72px; }
  .cab { max-width: 640px; margin-bottom: 56px; }
  .etapas { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .etapa-n { font-size: 56px; }
  .etapas h3 { margin: 20px 0 8px; }
  .confianca-grid { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--borda); }
  .confianca-grid li { padding: 24px 24px 24px 0; border-bottom: 0; }
  .confianca-grid li + li { padding-left: 24px; border-left: 1px solid var(--borda); }
  .cab-centro { max-width: 720px; }
  .faixa-cta { grid-template-columns: 1fr auto; align-items: center; padding: 48px 56px; margin-bottom: 112px; }
  .faixa-cta .btn { justify-self: end; }
  .galeria { gap: 16px; }
  .cab-linha { margin-bottom: 56px; }
  .quiz { grid-template-columns: .85fr 1.15fr; gap: 56px; padding: 48px 52px; align-items: center; }
  .duvidas-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .contato-in { grid-template-columns: 1.1fr .9fr; gap: 80px; }
  .rodape { padding-bottom: 40px; }
  .como { margin: 0 24px; }
  /* No computador a barra vira um botão flutuante no canto */
  .barra-cta { left: auto; right: 28px; bottom: 28px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateY(160%); }
  .barra-cta .btn { width: auto; box-shadow: 0 14px 34px -10px rgba(13, 42, 46, .55), 0 6px 20px -8px rgba(184, 147, 87, .7); }
  /* Aviso de cookies no canto esquerdo, longe do botão flutuante da direita */
  .aviso-dados, body:has(.barra-cta.visivel) .aviso-dados { left: 28px; right: auto; bottom: 28px; max-width: 400px; }
}

@media (min-width: 1024px) {
  .depos { grid-template-columns: 1.25fr 1fr; }
  .depo-destaque { grid-column: auto; grid-row: span 2; justify-content: flex-end; padding: 44px; }
  /* Aspa grande decorativa no alto do destaque (não é lida pelo leitor de tela) */
  .depo-destaque::after {
    content: "\201C"; content: "\201C" / ""; position: absolute; top: 24px; left: 40px; pointer-events: none;
    font: 700 120px/1 var(--titulo); color: var(--coral); opacity: .55;
  }
  .depo-destaque p { flex: 0 1 auto; font: 500 23px/1.45 var(--titulo); letter-spacing: -.01em; }
}

/* Última linha sem palavra sozinha */
.faq summary, .faq details p, .dores p, .comparar td, .etapas p, .quiz-passo legend, .quiz-fim p { text-wrap: pretty; }

/* Celular/tablet sem mouse: o :hover "gruda" depois do toque, então os hovers que mexem, giram ou ampliam ficam parados
   (as mudanças de cor continuam). O :active do botão (scale) tem especificidade maior e segue valendo */
@media (hover: none) {
  .btn:hover, .btn-ouro:hover, .btn-contorno:hover, .btn-teal:hover,
  .depo:hover, .quiz-opcoes label:hover, .foto:hover img, .foto:hover figcaption,
  .lightbox-fechar:hover { transform: none; }
  /* O botão do comparador precisa manter o centro (translate); só sai o scale. O arraste (.arrastando) continua ampliando */
  .comp:hover:not(.arrastando) .comp-botao { transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Hovers mudam só a cor: sem subir, girar ou aumentar */
  .btn:hover, .depo:hover, .quiz-opcoes label:hover, .foto:hover img, .foto:hover figcaption,
  .lightbox-fechar:hover, .btn:active:not(:disabled) { transform: none; }
  /* As animações com movimento já ficam dentro de "no-preference"; aqui só encurtamos os hovers */
  *, *::before, *::after { transition-duration: .01ms !important; }
  .faq details::details-content { transition: none; }
}

/* ---------- Política de privacidade (privacidade.html) ---------- */
.politica { padding: 56px 0 96px; }
.politica-in { max-width: 760px; }
.politica h1 { font-size: clamp(34px, 6vw, 52px); }
.politica .lead { max-width: none; }
.politica-data { margin-top: 20px; font-size: 14px; color: var(--texto-suave); }
.politica-rascunho { margin-top: 24px; padding: 16px 20px; border: 1px dashed rgba(231, 199, 140, .45); border-radius: var(--raio-p); font-size: 15px; color: var(--texto-suave); }
.politica h2 { font-size: clamp(22px, 3vw, 28px); margin: 56px 0 16px; }
.politica p + p { margin-top: 12px; }
.politica ul + p { margin-top: 16px; }
.politica a { color: var(--ouro-claro); }
.politica ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.politica ul li { position: relative; padding-left: 24px; }
.politica ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 2px; border-radius: 2px; background: var(--ouro-grad); }
.politica .btn { margin-top: 24px; }
/* Itens em cartão (cookies e o que fica guardado) */
.politica ul.politica-itens { gap: 12px; }
.politica .politica-itens li { display: grid; gap: 2px; padding: 16px 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); }
.politica .politica-itens li::before { display: none; }
.politica-itens b { font: 600 15px/1.3 var(--titulo); }
.politica-itens span { font-size: 13px; color: var(--texto-suave); }
.politica-itens p { margin-top: 6px; }
/* Dados da empresa que ainda faltam (marcados no próprio texto, como os outros conteúdos provisórios) */
.provisorio { padding: 0 6px; border: 1px dashed rgba(231, 199, 140, .5); border-radius: 6px; background: rgba(231, 199, 140, .12); color: var(--ouro-claro); }