/* Equilibra — Conceito 5
   A estrutura do conceito 3 ("Equilíbrio sensorial") nas cores claras e quentes do conceito 4,
   com o anel de DNA em linhas finas na capa (do conceito 3, em azul), o DNA do logo no selo e no final
   e o logo oficial sem alteração. */

:root{
  --creme:#F6F2EE; --creme-2:#EFE7E1; --papel:#FFFDFB; --nevoa:#E7F1EE;
  --tinta:#17323A; --tx-esc:#17323A; --tx-esc-2:#4A5F64;
  --linha:rgba(14,39,48,.10); --linha-2:rgba(14,39,48,.16);
  --topo-h:88px;
  }

/* ---------- Base clara ---------- */
body{background:var(--creme);color:var(--tx-esc)}
.escuro{background-color:var(--creme);color:var(--tx-esc);--foco:var(--petroleo-2);--acento:#2B5BA8}
.claro{--acento:#2B5BA8}
.escuro .eyebrow,.luz .eyebrow{color:var(--rosa-esc)}
.escuro .lead{color:var(--tx-esc-2)}
.grad,.claro .grad{background-image:linear-gradient(100deg,#1E4A50 0%,#2E6468 35%,#26508F 70%,#14305E 100%)}

/* botões: rosa-queimado com texto branco (como no conceito 4) */
.btn-claro{background:var(--rosa-esc);color:#fff;box-shadow:0 14px 30px -14px rgba(20,48,94,.75),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-claro:hover{background:#0E2347}
.btn-vidro{background:rgba(255,255,255,.6);color:var(--tx-esc);border:1px solid var(--linha-2)}
.btn-vidro:hover{background:#fff;border-color:rgba(14,39,48,.28)}

/* luzes de fundo: tons pastel em vez de escuros */
.aurora i:nth-child(1){background:radial-gradient(closest-side,rgba(207,230,225,.9),rgba(207,230,225,0))}
.aurora i:nth-child(2){background:radial-gradient(closest-side,rgba(220,230,244,.85),rgba(220,230,244,0))}
.aurora i:nth-child(3){background:radial-gradient(closest-side,rgba(255,232,206,.6),rgba(255,232,206,0))}

/* ---------- Anéis de DNA ---------- */
/* capa: anel de linhas finas desenhado em canvas (js/anel.js) */
.anel-reserva circle:first-child{stroke:rgba(30,111,120,.5)}
.anel-reserva circle:last-child{stroke:rgba(43,91,168,.45)}
/* selo e chamada final: o DNA do logo, girando devagar */
.dna{display:block;aspect-ratio:1;background:url(../img/dna-detalhe-480.webp) center/contain no-repeat;will-change:transform;backface-visibility:hidden}
@keyframes girar{to{transform:rotate(360deg)}}
html.js:not(.estatico):not(.calmo) .dna{animation:girar 70s linear infinite}
html.js:not(.estatico):not(.calmo) .dna-mini{animation-duration:40s}
@media (prefers-reduced-motion:reduce){.dna{animation:none!important}}

/* ---------- Topo: faixa azul-marinho com o logo oficial em branco ---------- */
:root{--topo-h:92px}
.topo,.topo.topo-claro{color:#fff;--foco:#8FB3E3}
.topo::before,.js .topo.no-alto::before,.topo.topo-claro::before{opacity:1;background:var(--rosa-esc);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 12px 30px -22px rgba(14,39,48,.55)}
.topo::after{display:none}
.marca img{width:auto;height:78px}
.logo-oficial{display:block}
.nav a,.topo-claro .nav a{color:rgba(255,255,255,.86)}
.nav a:hover,.topo-claro .nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.topo-cta,.topo-claro .topo-cta{background:#fff;color:var(--rosa-esc);box-shadow:none}
.topo-cta:hover,.topo-claro .topo-cta:hover{background:var(--rosa-cl)}
.burger,.topo-claro .burger{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}

/* menu do celular */
.menu{background:var(--creme);color:var(--tx-esc);--foco:var(--petroleo-2)}
.menu nav a{border-bottom-color:var(--linha)}

/* ---------- Capa ---------- */
.capa{background:var(--creme)}
.capa::before{background:radial-gradient(520px circle at var(--mx,72%) var(--my,45%),rgba(255,255,255,.28),transparent 70%)}
.capa-bg{position:absolute;inset:0;z-index:-3}
.capa-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:saturate(.55) hue-rotate(-8deg)}
.capa-veu{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,242,238,.97) 0%,rgba(246,242,238,.9) 34%,rgba(246,242,238,.55) 58%,rgba(246,242,238,.28) 100%),
             linear-gradient(180deg,rgba(246,242,238,.55) 0%,rgba(246,242,238,0) 22%)}
.capa-fim{background:linear-gradient(180deg,rgba(246,242,238,0) 0%,rgba(246,242,238,.7) 55%,var(--creme) 100%)}
.capa-visual{cursor:pointer}
/* nota do Google: só o número e o link, sem copiar depoimentos */
.nota-google{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;font-size:14.5px;color:var(--tx-esc-2);text-decoration:none;border-radius:8px}
.nota-google b{color:var(--tx-esc);font-weight:600}
.nota-google:hover span:last-of-type{text-decoration:underline;text-underline-offset:4px}
.ng-estrelas{color:#D9A43A;letter-spacing:2px;font-size:15px}
/* o topo agora é sólido: o anel começa abaixo dele */
@media (min-width:861px){.capa-visual{top:var(--topo-h)}}
/* véu creme atrás do anel, para as linhas finas não se perderem na foto */
.anel-fundo{position:absolute;left:50%;top:50%;width:min(96%,92vh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,242,238,.9) 0%,rgba(246,242,238,.72) 58%,rgba(246,242,238,0) 100%)}
.respira-bola{background:radial-gradient(circle at 35% 35%,#fff,var(--rosa) 50%,rgba(59,100,168,.3));box-shadow:0 0 26px rgba(59,100,168,.55),0 0 0 7px rgba(59,100,168,.08)}
.respira-txt{background:rgba(255,255,255,.78);border:1px solid var(--linha);box-shadow:0 18px 40px -24px rgba(14,39,48,.35);color:var(--tx-esc)}
.rt-n{background:var(--rosa-cl);color:var(--vinho)}
.selo{background:rgba(255,255,255,.66);border:1px solid var(--linha);color:var(--tx-esc-2)}
.ponto{background:var(--rosa-esc);animation-name:pulsoRosa}
@keyframes pulsoRosa{0%{box-shadow:0 0 0 0 rgba(20,48,94,.45)}100%{box-shadow:0 0 0 12px rgba(20,48,94,0)}}
.capa-sub{color:var(--tx-esc-2)}
.rolar{background:rgba(14,39,48,.14)}
.rolar span{background:var(--rosa-esc)}

/* ---------- O que você procura ---------- */
.procura{background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%)}
.procura::before{background:radial-gradient(closest-side,rgba(220,230,244,.55),transparent)}
.chip{background:rgba(255,255,255,.72);border:1px solid var(--linha);color:var(--tx-esc)}
.chip svg{color:var(--petroleo-2)}
.chip:hover{background:#fff;border-color:var(--linha-2)}
.chip[aria-pressed="true"]{background:linear-gradient(135deg,#E9F0FA,#DCE6F4);color:var(--vinho);border-color:transparent;box-shadow:0 18px 40px -20px rgba(20,48,94,.55)}
.chip[aria-pressed="true"] svg{color:var(--rosa-esc)}
.resposta{background:var(--papel);border:1px solid var(--linha);box-shadow:0 50px 100px -55px rgba(14,39,48,.4)}
.resposta::before{opacity:.28}
.resp-luz i{opacity:.32!important}
.resposta::after{background:radial-gradient(75% 65% at 14% 18%,rgba(255,253,251,.92),rgba(255,253,251,0) 80%)}
.resp-selo{background:radial-gradient(circle at 50% 36%,#fff,rgba(246,242,238,.85) 78%);border:1px solid var(--linha);box-shadow:0 22px 44px -26px rgba(14,39,48,.4)}
.dna-mini{position:absolute;inset:15%}
.resp-area{color:var(--rosa-esc);text-shadow:none}
.resp-desc{color:var(--tx-esc);text-shadow:none}
.conversa-rot{color:var(--tx-esc-2)}
.bolha,.bolha::after{background:#fff}
.bolha{border:1px solid var(--linha);box-shadow:0 22px 46px -26px rgba(14,39,48,.38)}
.bolha::after{border-right:1px solid var(--linha)}

/* ---------- Como agendar: faixa rosada clara ---------- */
.passos{color:var(--tx-esc);--foco:var(--petroleo-2);--acento:#2B5BA8;
  background:radial-gradient(60% 90% at 100% 100%,rgba(220,230,244,.75),transparent 62%),linear-gradient(118deg,#F5F1EC 0%,#EEF0F1 48%,#E2E9F3 100%)}
.passos-lista::before{background:linear-gradient(90deg,rgba(30,74,80,.35),rgba(20,48,94,.5))}
.passo{background:rgba(255,255,255,.66);border:1px solid var(--linha)}
.passo-n{background:var(--rosa-esc);color:#fff;box-shadow:0 0 0 8px rgba(20,48,94,.1)}
.mc{box-shadow:0 16px 32px -20px rgba(14,39,48,.4)}
.mc-eu{background:#fff;color:var(--tx-esc);border:1px solid var(--linha)}
.mc-ela{background:rgba(14,39,48,.05);border:1px solid var(--linha)}
.mc-ela .digitando i{background:#7C8F92}
.mc-av{box-shadow:0 0 0 2px #fff,0 10px 20px -10px rgba(14,39,48,.4)}
.mp-anel::after{animation-name:mpPulsoRosa}
@keyframes mpPulsoRosa{0%{box-shadow:0 0 0 0 rgba(20,48,94,.25)}100%{box-shadow:0 0 0 18px rgba(20,48,94,0)}}
.mp-trilha{fill:rgba(255,255,255,.6);stroke:var(--linha-2)}
.mp-arco{stroke:var(--petroleo-2);filter:none}
.mp-check{stroke:var(--rosa-esc);filter:none}
.mp-rot{background:#fff;border:1px solid var(--linha);color:var(--tx-esc)}
.mp-rot i{background:var(--petroleo-2);box-shadow:none}
/* passo 03: horários livres, um deles escolhido (sem prometer prazo) */
.passos-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
.mini-agenda{gap:12px}
.ma-dia{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-esc-2)}
.ma-horas{display:flex;flex-wrap:wrap;gap:8px}
.ma-h{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--linha);font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--tx-esc);box-shadow:0 16px 32px -22px rgba(14,39,48,.4);transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.ma-h svg{display:none;width:16px;height:11px}
.ma-esc{background:var(--rosa-esc);border-color:var(--rosa-esc);color:#fff}
.ma-esc svg{display:block}
.mini-agenda.espera .ma-esc{background:#fff;border-color:var(--linha);color:var(--tx-esc)}
.mini-agenda.espera .ma-esc svg{display:none}
.passo-nota{color:var(--tx-esc-2)}

/* ---------- Equipe: iniciais em tons suaves ---------- */
.ini{background:linear-gradient(135deg,#CFE6E1,#DCE6F4);color:var(--petroleo-2)}
.pessoas li:nth-child(3n+2) .ini{background:linear-gradient(205deg,#D9ECE8,#D3E1F3)}
.pessoas li:nth-child(3n) .ini{background:linear-gradient(300deg,#CFE6E1,#E3ECF8)}
.abas button[aria-selected="true"]{background:var(--rosa-esc);color:#fff}
.abas button[aria-selected="true"] span{background:rgba(220,230,244,.3);color:var(--rosa-cl)}

/* ---------- Onde estamos: cartão claro ---------- */
.onde-card{background:linear-gradient(135deg,#FFFDFB 0%,#F7EFEA 100%);border:1px solid var(--linha);box-shadow:0 40px 90px -60px rgba(14,39,48,.35)}
.onde-info address{color:var(--tx-esc-2)}
.estac{color:var(--tx-esc)}
.estac svg{color:var(--petroleo-2)}
.horas div{background:rgba(14,39,48,.035);border:1px solid var(--linha)}
.horas dt{color:var(--rosa-esc)}
.contatos a{color:var(--tx-esc-2)}
.contatos a:hover{color:var(--tx-esc)}
.mapa{background:radial-gradient(circle at 50% 50%,rgba(207,230,225,.75),transparent 62%),#EEF3F1}

/* ---------- Chamada final: luz e folhas com véu creme, DNA do logo girando acima do título ---------- */
.final{color:var(--tx-esc)}
.final-bg img{filter:blur(3px) saturate(.7);transform:scale(1.04)}
.final::before{background:radial-gradient(64% 62% at 50% 46%,rgba(246,242,238,.9) 0%,rgba(246,242,238,.7) 55%,rgba(246,242,238,.45) 100%),
  linear-gradient(180deg,rgba(246,242,238,.75) 0%,rgba(246,242,238,0) 24%,rgba(246,242,238,0) 78%,rgba(239,231,225,.8) 100%)}
.final-anel{width:auto;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
.dna-final{width:clamp(96px,9vw,132px);margin-bottom:clamp(26px,4vh,40px)}
.final h2{line-height:1.02}
.final h2 em{padding-bottom:.12em}
.final-txt{color:var(--tx-esc-2);margin:18px auto 28px}
.final-tel{color:var(--tx-esc-2)}
.final-tel:hover{color:var(--tx-esc)}

/* ---------- Rodapé azul-marinho com o logo em branco ---------- */
.rodape{background:var(--rosa-esc);color:rgba(255,255,255,.74);border-top:0;--foco:#8FB3E3}
.rod-topo .marca img{width:auto;height:92px}
.rod-links a,.rod-base a{color:#fff}
.rod-base{border-top-color:rgba(255,255,255,.14)}
.rod-rt{margin-top:28px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.74)}

/* barra fixa do celular */
.js .barra-wa{background:var(--rosa-esc)!important;color:#fff!important;box-shadow:0 18px 40px -14px rgba(20,48,94,.6)!important}

/* ---------- Responsivo ---------- */
@media (max-width:860px){
  :root{--topo-h:76px}
  .marca img{height:58px}
  .capa{padding-top:84px}
  .capa-veu{background:linear-gradient(180deg,rgba(246,242,238,.55) 0%,rgba(246,242,238,.35) 40%,rgba(246,242,238,.9) 62%,var(--creme) 78%)}
  .capa-bg img{object-position:72% 30%}
  .anel-fundo{width:min(118%,80vh)}
  .passos-lista{grid-template-columns:minmax(0,1fr)}
  .passo-3{grid-template-columns:48px minmax(0,1fr) auto}
  .passo-3 .passo-txt{grid-column:2;grid-row:1;text-wrap:balance}
  .passo-3 .passo-nota{grid-column:2 / -1;grid-row:2}
  .mini-agenda{gap:5px}
  .ma-dia{display:none}
  .ma-horas{flex-direction:column;align-items:flex-end;gap:5px}
  .ma-h{min-height:28px;padding:0 10px;gap:5px;font-size:13px}
  .ma-h svg{width:12px;height:9px}
  .rod-topo .marca img{height:76px}
}
@media (max-width:380px){
  .marca img{height:52px}
}

/* ---------- Estabilidade: sem efeitos que fazem a tela piscar ao rolar ---------- */
/* vidro desfocado sai de tudo (era redesenhado a cada quadro sobre fotos em movimento) */
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.tags li{background:rgba(14,39,48,.42);border-color:rgba(255,255,255,.28)}
.painel-n{background:rgba(14,39,48,.5)}
.respira-txt{background:rgba(255,255,255,.92)}
.passo{background:rgba(255,255,255,.82)}
.resp-selo{background:#fff}
/* títulos com degradê: degradê parado (a animação contínua do texto piscava no Safari) */
.grad{animation:none!important;background-size:100% 100%}
/* luzes do cartão de resposta: paradas */
.resp-luz i{animation:none!important}
/* cartões das áreas: só a largura muda; a foto não aumenta nem troca de enquadramento */
.painel img,.painel.ativo img{transform:none;transition:none}
.painel-psico img,.painel-psico.ativo img{object-position:50% 52%}
/* fotos claras da mesma série: véu azul-marinho só embaixo, onde fica o texto */
.painel{background:var(--rosa-esc)}
.painel::after{background:linear-gradient(180deg,rgba(14,35,71,.16) 0%,rgba(14,35,71,0) 24%,rgba(14,35,71,.12) 40%,rgba(14,35,71,.62) 58%,rgba(14,35,71,.9) 78%,rgba(14,35,71,.95) 100%)}
.painel-n{background:rgba(14,35,71,.55);border-color:rgba(255,255,255,.4)}
/* o cartão da avaliação tem mais texto (prazo do laudo): o véu começa mais alto */
.painel:has(.painel-stat)::after{background:linear-gradient(180deg,rgba(14,35,71,.16) 0%,rgba(14,35,71,0) 16%,rgba(14,35,71,.5) 32%,rgba(14,35,71,.84) 48%,rgba(14,35,71,.95) 100%)}
.tags li{background:rgba(14,35,71,.38);border-color:rgba(255,255,255,.32)}
.painel{transition:flex-grow .7s cubic-bezier(.22,1,.36,1);transform:translateZ(0)}
.painel picture{inset:0}
.painel-stat-nota{margin-top:8px;font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.88)}

/* ---------- Páginas de texto (política de privacidade, página não encontrada) ---------- */
.texto{padding:calc(var(--topo-h) + clamp(48px,7vw,96px)) 0 clamp(64px,8vw,112px);min-height:72vh}
.texto-in{max-width:calc(760px + var(--gut)*2)}
.texto h1{font-size:clamp(40px,5.4vw,72px);margin-bottom:14px}
.texto h1 em{font-style:normal;color:var(--acento)}
.texto .data{font-size:14px;color:var(--tx-esc-2);margin-bottom:36px}
.texto h2{font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;word-spacing:normal;line-height:1.25;margin:44px 0 12px}
.texto p,.texto li{color:var(--tx-esc-2);line-height:1.7}
.texto p+p{margin-top:12px}
.texto ul{padding-left:1.2em;margin-top:8px}
.texto li+li{margin-top:6px}
.texto a:not(.btn){color:var(--rosa-esc);text-underline-offset:3px}
.texto .acoes{margin-top:32px}