/* Base do navegador (a mesma que a prévia do Claude aplicava): margens seguras do celular, imagens e atributo hidden */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* Base 14: menu ligado à página Teleconsulta, vídeo da tese removido, bloco de teleconsulta com link para a página. Base 13: logo de volta na faixa clara acima da foto (como na Base 05 a 11); o resto igual à 12. Base 12: logo de volta sobre a foto, menu no topo, fotos reais em todas as seções, botões no mesmo padrão. Base 11: narrativa nova na ordem da consulta, sem "Cada Idade", com "Antes de marcar" e fechamento; título, descrição, alt e dados estruturados. Base 10: bebê centralizado na foto. Base 09: avaliação da Naiade Schardosim em primeiro. Base 08: sem a nota do Google, avaliações reordenadas, menos espaço vazio nos zigue-zagues, cortes ajustados (abertura, neve, ASTEL e consultório). Base 07: botões com um texto só ("Agendar consulta"), Clube ASTEL com recorte da placa na mesma proporção do consultório, foto de abertura centrada na mão, setas discretas no computador. Base 06: barras de progresso nas rolagens laterais, cartões de dor inteiros clicáveis, botões alinhados à esquerda. Base 05: mais perto da Aesop (logo fora da foto, letras menores, margens maiores, botões discretos, fotos de ponta a ponta, cartões sem caixas, dores com imagem). Base 04: Base 03b + avaliações do Google em rolagem lateral (antes das dores), vídeos depois do "Prof. PhD", e teste de paleta Aesop (botão no canto). Base 03: Base 02 + logo novo (árvore + Garamond) + seção "Abordagens validadas para cada dor". Base 02: troca a letra (uma família sem serifa, fina, no espírito da Aesop). Cópia fiel da home do Wix (leonardoschneiderphd.com): mesmas seções, textos, fotos, fontes, cores e efeitos de rolagem. Sem a seção de cursos. Visual claro único, como o site. */
:root{
  --fundo:#f3f1ed;    /* fundo das seções */
  --creme:#fef5f0;    /* cartões, depoimentos, teleconsulta */
  --bege:#f2e0c4;     /* faixa do "Prof. PhD" */
  --marrom:#6e5228;   /* textos, botões, rodapé */
  --botao-topo:#765622;
  --claro:#fef5f0;    /* texto sobre marrom */
  --fio:#56201e;      /* bordas e linhas finas */
  --tx:#6e5228; --tx2:#6e5228; --acento:#6e5228;
  --btn:#6e5228; --btn-tx:#fef5f0; --btn-borda:#6e5228; --btn-topo:#765622;
  --btn2:#6e5228; --btn2-tx:#fef5f0; --btn2-borda:#6e5228;
  --faixa:radial-gradient(circle at 18.28% 22.19%,#e3dde7 0%,#e3dde7 30%,rgba(227,221,231,0) 100%),radial-gradient(circle at 60.8% 73.57%,rgba(225,188,187,.4) 0%,rgba(225,188,187,.4) 47.46%,rgba(225,188,187,0) 70%),radial-gradient(circle at 48.9% 49.52%,#fef5f0 0%,#fef5f0 100%);
  --mapa:#e8e4dc; --rodape-bg:#6e5228; --rodape-tx:#f3f1ed; --rodape-borda:rgba(243,241,237,.5);
  --logo:"EB Garamond",Garamond,"Times New Roman",serif;
  --titulo:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --texto:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
/* Paleta do site (decidida pelo Léo em 03/10/2026), no espírito da Aesop: off-white quente, grafite, botões cinza e brancos, rodapé escuro, marrom só em detalhes */
:root{
  --fundo:#fffef2; --creme:#f6f5e8; --bege:#eeebdd; --marrom:#333333; --claro:#fffef2; --fio:#7c7a70;
  --tx:#333333; --tx2:#666666; --acento:#945c26;
  --btn:#333333; --btn-tx:#fffef2; --btn-borda:#333333; --btn-topo:#333333;
  --btn2:#fffef2; --btn2-tx:#333333; --btn2-borda:#333333;
  --faixa:#f6f5e8; --mapa:#eeebdd; --rodape-bg:#252525; --rodape-tx:#fffef2; --rodape-borda:rgba(255,254,242,.3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--tx);font-family:var(--texto);font-size:18px;line-height:1.6}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:400;letter-spacing:0}
.cont{max-width:1366px;margin:0 auto;padding-inline:55px}

/* botão (todos levam ao WhatsApp, como no site) */
.btn{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--btn);color:var(--btn-tx);border:1px solid var(--btn-borda);text-decoration:none;font:400 18px/1.2 var(--titulo);padding:12px 26px;min-height:45px}
.btn.sec{background:var(--btn2);color:var(--btn2-tx);border-color:var(--btn2-borda)}
.btn svg{width:14px;height:14px;fill:currentColor;flex:none;transform:rotate(-45deg)}
.btn.centro{justify-content:center;gap:18px}
.btn:hover{filter:brightness(1.1)}
a:focus-visible,button:focus-visible{outline:2px solid var(--marrom);outline-offset:3px}

/* topo fixo: botão à esquerda, menu à direita; some ao rolar para baixo */
.topo{position:fixed;z-index:30;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);pointer-events:none;transition:opacity .25s}
.topo.some{opacity:0}
.topo .in{max-width:1366px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:30px 27px 0}
.topo .in>*{pointer-events:auto}
.topo.some .in>*{pointer-events:none}
.topo .btn{width:354px;background:var(--btn-topo);border-radius:3px}
.hamb{width:44px;height:44px;border:0;background:var(--fundo);color:var(--tx);border-radius:3px;cursor:pointer;display:grid;place-items:center}
.hamb i,.hamb i::before,.hamb i::after{display:block;width:20px;height:1.5px;background:currentColor;position:relative}
.hamb i::before,.hamb i::after{content:"";position:absolute;left:0}
.hamb i::before{top:-6px}.hamb i::after{top:6px}
.menu{position:fixed;inset:0;z-index:40;background:var(--fundo);display:grid;align-content:center;justify-items:center;gap:18px;font:400 28px/1.3 var(--titulo)}
.menu[hidden]{display:none}
.menu a{text-decoration:none}
.menu .x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 30px);right:27px;background:none;border:0;font:400 18px var(--titulo);color:var(--marrom);cursor:pointer;padding:10px}

/* 1. abertura */
.hero{padding:27px}
.hero-img{position:relative;max-width:1311px;margin:0 auto;aspect-ratio:1311/1082;max-height:none;overflow:hidden}
.hero-img>img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.marca{display:flex;align-items:flex-end;gap:.32em;text-decoration:none;line-height:1}
.marca svg{width:1.9em;height:auto;flex:none}
.marca .nome{display:block;font:400 1em/1 var(--logo);letter-spacing:.005em;white-space:nowrap}
.marca .sub{display:block;font:400 .36em/1.2 var(--logo);letter-spacing:.04em;margin-top:.35em}
.hero-logo{position:absolute;z-index:2;left:2.06%;top:66%;font-size:clamp(28px,4.1vw,56px);color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.25);animation:aparece 1.2s ease both}
.hero-logo svg{filter:drop-shadow(0 1px 8px rgba(0,0,0,.2))}
.hero-caixa{position:absolute;left:2.06%;top:82%;width:54.9%;max-width:720px;background:var(--fundo);animation:desliza 1.2s cubic-bezier(.25,.8,.3,1) both}
.hero-caixa .t{padding:26px 28px 22px}
.hero-caixa h1{font-size:40px;line-height:1.2}
.hero-caixa p{font-size:21px;line-height:1.6}
.hero-caixa .btn{font-size:17px;min-height:40px;padding:8px 26px;justify-content:flex-start;gap:14px}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes desliza{from{clip-path:inset(0 0 100% 0);transform:translateY(100%)}to{clip-path:inset(0 0 0 0);transform:none}}

/* 2. como é a consulta (fundo com degradê) */
.consulta{background:var(--faixa)}
.consulta .cont{display:grid;grid-template-columns:579fr 49fr 630fr;align-items:start;padding-block:54px}
.consulta .txt{grid-column:1;padding-top:50px;display:grid;gap:40px;justify-items:start;min-width:0}
.consulta h2{font-size:40px;line-height:1.2}
.consulta .txt p{font-size:16px}
.consulta .btn{width:354px;max-width:100%;background:var(--btn-topo);border-radius:3px}
.consulta .video{grid-column:3}

/* vídeos (o YouTube abre em nova aba; esta prévia não embute players) */
.video{position:relative;display:block;aspect-ratio:630/418;max-width:100%;background:#000;overflow:hidden}
.video img{width:100%;height:100%;object-fit:cover}
.video::after{content:"";position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:#f00}
.video::before{content:"";position:absolute;z-index:2;left:50%;top:50%;margin:-10px 0 0 -6px;border-left:18px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}

/* 3 e 5. zigue-zague com linha no centro */
.zz-sec{padding-top:55px;padding-bottom:55px}
.zz-sec h2{font-size:40px;line-height:1.2;max-width:444px}
.zz{position:relative;margin-top:88px;display:flex;flex-direction:column}
.zz::before{content:"";position:absolute;left:50%;top:0;bottom:120px;border-left:1px solid var(--fio)}
.zw{width:46%;display:grid;grid-template-columns:18.8% 81.2%;align-self:flex-end;margin-left:50%}
.zw:nth-child(even){align-self:flex-start;margin-left:0;margin-right:50%;grid-template-columns:81.2% 18.8%}
.zw+.zw{margin-top:-64px}
.liga{border-top:1px solid var(--fio);height:0}
.zw:nth-child(even) .liga{order:2}
.cartao{will-change:transform}
.cartao .cab{display:grid;grid-template-columns:25.4% 74.6%}
.cartao .num{grid-row:1/3;background:var(--creme);border:.5px solid var(--fio);display:grid;place-items:center;font:400 42px/1 var(--titulo)}
.cartao .num img{width:73px;height:auto}
.cartao h3{background:var(--creme);border:.5px solid var(--fio);font-size:21px;line-height:1.25;padding:14px 22px}
.cartao .d{background:var(--creme);border:.5px solid var(--fio);padding:12px 18px 18px;font-size:16px;line-height:1.6}
.cartao .foto{margin-top:0;border:1px solid var(--fio);aspect-ratio:511/238;overflow:hidden}
.cartao .foto img{width:100%;height:100%;object-fit:cover;display:block}
.zz-btn{display:flex;justify-content:center;margin-top:40px}
.zz-btn .btn{width:413px;max-width:100%}

.cartao div.d{display:grid;gap:10px;align-content:start}
.cartao .mais{font:500 15px/1.3 var(--titulo);text-decoration:none}
.dores .zw+.zw{margin-top:-40px}
.dores .zz{display:grid;grid-auto-flow:column;grid-auto-columns:min(380px,80vw);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1px 2px 18px;margin-top:48px;scrollbar-width:thin}
.dores .zz::before{display:none}
.dores .zw,.dores .zw:nth-child(even){width:auto;margin:0!important;display:block;scroll-snap-align:start}
.dores .liga{display:none}
.dores .cartao{transform:none!important;height:100%}
.dores .cartao .cab{height:100%;grid-template-rows:auto 1fr;grid-template-columns:76px 1fr}
.setas{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.setas button{width:44px;height:44px;border-radius:50%;border:1px solid var(--fio);background:transparent;color:var(--marrom);font:400 20px/1 var(--titulo);cursor:pointer}
@media (max-width:760px){.dores .zz{grid-auto-columns:82%;gap:14px}.dores .cartao .cab{grid-template-columns:70px 1fr}}
/* avaliações do Google */
.google{background:var(--creme);padding-block:55px}
.google h3{color:var(--acento);font-size:21px;line-height:1.25}
.google-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-top:8px}
.google h2{font-size:42px;line-height:1.2}
.nota-g{font-size:18px}.nota-g span{color:var(--acento)}
.av-trilho{display:grid;grid-auto-flow:column;grid-auto-columns:min(380px,82vw);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1px 2px 18px;margin-top:32px;scrollbar-width:thin;align-items:start}
.av{scroll-snap-align:start;background:var(--fundo);border:.5px solid var(--fio);padding:22px 24px;display:grid;gap:12px;align-content:start}
.av-est{color:var(--acento);letter-spacing:.12em;font-size:15px}
.av-tx{margin:0;display:grid;gap:.6em;font-size:16px;line-height:1.6}
.av.curto .av-tx{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.av.curto .av-tx p{display:inline}
.av.curto .av-tx p::after{content:" "}
.av-mais{justify-self:start;background:none;border:0;padding:0;font:500 15px var(--titulo);color:var(--tx);text-decoration:underline;cursor:pointer}
.av-nome{font:500 16px/1.4 var(--titulo)}
.av-nome span{display:block;font:400 14px var(--texto);opacity:.75}
.google-link{display:inline-block;margin-top:10px;font:500 16px var(--titulo);text-decoration:none}
/* 4. depoimentos */
.dep{background:var(--creme);padding-block:55px 55px}
.dep h3{color:var(--acento);font-size:21px;line-height:1.25}
.dep h2{font-size:42px;line-height:1.2;margin-top:8px}
.dep .intro{max-width:829px;margin-top:22px;font-size:18px}
.dep-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px;margin-top:22px}

/* 6. Prof. PhD */
.phd{background:var(--bege);padding:27px}
.phd-img{position:relative;max-width:1311px;margin:0 auto;aspect-ratio:1311/805;overflow:hidden}
.phd-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.phd-painel{position:absolute;left:59.6%;top:14.5%;width:37.5%;background:var(--bege);padding:3.8% 3.8% 0;display:grid;gap:10px;will-change:transform}
.phd-painel h3{color:var(--acento);font-size:21px;line-height:1.25}
.phd-painel h2{font-size:40px;line-height:1.2}
.phd-painel .txt{display:grid;gap:1.4em;font-size:16px;margin-top:14px}
.phd-painel .btn{margin:40px -10% 0;justify-content:flex-start;gap:14px}

/* 7. teleconsultas */
.tele{background:var(--creme);padding-block:55px}
.tele .cont{display:grid;grid-template-columns:735fr 90fr 350fr;align-items:start}
.tele-img{aspect-ratio:735/398;overflow:hidden}
.tele-img img{width:100%;height:100%;object-fit:cover}
.tele .txt{grid-column:3;padding-top:92px;display:grid;gap:10px;justify-items:start}
.tele h3{font-size:24px;line-height:1.2}
.tele .txt p{font-size:18px}
.tele .btn{width:328px;max-width:100%;margin-top:30px}

/* 8. Clube ASTEL */
.astel{background:#919191}
.astel-foto{position:relative;height:clamp(198px,56.7vw,774px);overflow:hidden}
.astel-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.astel-foto h2{position:absolute;left:0;right:0;top:35%;text-align:center;color:#fff;font-size:clamp(40px,7.3vw,100px);line-height:1.2;padding-inline:16px}
.astel-sala{height:clamp(140px,25.5vw,349px);overflow:hidden}
.astel-sala img{width:100%;height:100%;object-fit:cover;display:block}
.mapa{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:center;background:var(--mapa);min-height:180px;padding:28px 16px;text-align:center;font-size:16px}
.mapa .btn{width:280px}

/* rodapé */
.rodape{background:var(--rodape-bg);color:var(--rodape-tx)}
.rodape .cont{padding-block:53px 40px;display:grid;gap:36px}
.rodape .marca{font-size:34px;color:var(--rodape-tx)}
.rodape .cols{display:grid;grid-template-columns:155px 200px 1fr 322px;gap:40px;align-items:start}
.rodape .cx{border:1px solid var(--rodape-borda);padding:14px 16px;display:grid;gap:4px;align-content:start;min-width:0}
.rodape .cx p{color:var(--rodape-tx);opacity:.8;font-size:16px;margin-bottom:6px}
.rodape .cx a{text-decoration:none;font:400 16px/1.6 var(--titulo)}
.rodape .info a{text-decoration:underline;font-size:17px}
.rodape .redes{display:flex;gap:18px}
.rodape .redes svg{width:26px;height:26px;fill:var(--rodape-tx)}
.rodape .legal{font-size:14px;color:var(--rodape-tx)}

/* entrada suave do rodapé (como no Wix) */
.flutua{transition:transform 1.2s cubic-bezier(.25,.8,.3,1),opacity 1.2s}
.flutua.fora{transform:translateY(60px);opacity:0}

/* celular (layout próprio, como o do Wix) */
@media (max-width:760px){
  body{font-size:16px}
  .cont{padding-inline:23px}
  .topo .in{padding:11px 11px 0}
  .topo .btn{width:237px;font-size:18px}
  .hero{padding:11px}
  .hero-img{aspect-ratio:352/769}
  .hero-img>img.foto{object-position:40% 0}
  .hero-logo{left:5%;top:54%;font-size:25px}
  .hero-caixa{left:7.4%;top:66%;width:73.6%}
  .hero-caixa .t{padding:14px 17px 16px}
  .hero-caixa h1{font-size:23px}
  .hero-caixa p{font-size:19px;line-height:1.55;margin-top:6px}
  .hero-caixa .btn{font-size:16px}
  .consulta .cont{grid-template-columns:1fr;padding-block:49px;gap:36px}
  .consulta .txt{padding-top:0;gap:22px;text-align:center;justify-items:center}
  .consulta h2{font-size:34px}
  .consulta .btn{width:100%;background:var(--btn);border-radius:0}
  .consulta .video{grid-column:1}
  .zz-sec{padding-top:47px}
  .zz-sec h2{font-size:38px}
  .zz{margin-top:60px}
  .zz::before{left:0;bottom:60px}
  .zw,.zw:nth-child(even){width:100%;margin:0;align-self:stretch;grid-template-columns:29px 1fr}
  .zw:nth-child(even) .liga{order:0}
  .zw+.zw,.dores .zw+.zw{margin-top:62px}
  .cartao .cab{grid-template-columns:84px 1fr}
  .cartao .num{font-size:38px}
  .cartao .num img{width:48px}
  .cartao h3{font-size:18px;padding:10px 12px}
  .cartao .d{padding:10px 12px 14px}
  .cartao .foto{aspect-ratio:285/150}
  .zz-btn .btn{width:100%}
  .dep h3{font-size:19px}
  .dep h2{font-size:38px}
  .dep-grade{grid-template-columns:1fr}
  .phd{padding:23px 23px 40px}
  .phd-img{aspect-ratio:auto;overflow:visible}
  .phd-img>img{position:static;height:auto;aspect-ratio:330/315}
  .phd-painel{position:static;width:auto;padding:30px 20px 0;transform:none!important;clip-path:none!important}
  .phd-painel h3{font-size:19px}
  .phd-painel h2{font-size:38px}
  .phd-painel .btn{margin:40px -20px 0}
  .tele{padding-top:53px}
  .tele .cont{grid-template-columns:1fr;padding-inline:0}
  .tele .txt{grid-column:1;padding:30px 31px 0}
  .tele h3{font-size:21px}
  .tele .txt p{font-size:16px}
  .tele .btn{width:100%;margin-top:20px}
  .rodape .cont{padding:15px 15px 20px;gap:20px}
  .rodape .marca{font-size:24px}
  .rodape .cols{grid-template-columns:1fr 1fr;gap:12px}
  .rodape .cx.info{grid-column:1/-1}
  .rodape .redes-cx{grid-column:1/-1;border:0;padding:0}
}
@media (prefers-reduced-motion:reduce){.hero-logo,.hero-caixa{animation:none}.cartao,.phd-painel{transform:none!important;clip-path:none!important}.flutua.fora{transform:none;opacity:1}}
/* ===== Base 05: aproximação da Aesop ===== */
body{font-size:16px;line-height:1.6}
.cont{max-width:1240px;padding-inline:clamp(24px,6vw,80px)}
h1,h2,h3{font-weight:400;letter-spacing:-.005em}
.btn{display:inline-flex;width:auto!important;min-width:0;min-height:48px;padding:0 24px;gap:14px;justify-content:flex-start;font:500 15px/1.2 var(--titulo);border-radius:0!important}
.btn svg{width:11px;height:11px}
.btn.centro{justify-content:center}
.topo .in{padding:22px clamp(16px,3vw,40px) 0}
.topo .btn{min-height:44px;font-size:14px;padding:0 18px}
.hamb{border-radius:0}
/* abertura: logo fora da foto, em grafite; foto de ponta a ponta */
.hero{padding:0}
.marca-topo{justify-content:center;padding:30px 16px 26px;font-size:30px;color:var(--tx)}
.marca-topo svg{width:1.7em}
.hero-img{max-width:none;aspect-ratio:auto;height:min(84svh,920px)}
.hero-caixa{top:auto;bottom:clamp(24px,5vw,64px);left:clamp(24px,6vw,80px);width:min(460px,calc(100% - 48px));background:var(--fundo)}
.hero-caixa .t{padding:26px 28px 18px}
.hero-caixa h1{font-size:30px;line-height:1.2}
.hero-caixa p{font-size:16px;margin-top:6px}
.hero-caixa .btn{margin:0 28px 26px}
/* títulos e textos */
.consulta .cont{padding-block:96px}
.consulta h2,.zz-sec h2,.dep h2,.google h2,.phd-painel h2{font-size:30px;line-height:1.25}
.consulta .txt{gap:24px;padding-top:0}
.consulta .txt p,.dep .intro,.tele .txt p{font-size:16px}
.dep h3,.phd-painel h3,.google h3{font:400 14px/1.4 var(--texto);color:var(--tx2);letter-spacing:.02em}
.zz-sec{padding-top:96px;padding-bottom:96px}
.zz{margin-top:64px}
.dep,.google,.tele{padding-block:96px}
.tele h3{font-size:24px}
/* cartões do zigue-zague sem caixas */
.cartao{background:transparent}
.cartao .cab{display:block}
.cartao .num{display:block;background:none;border:0;font:400 14px/1 var(--texto);color:var(--tx2);padding:18px 0 10px;letter-spacing:.04em}
.cartao .num img{width:30px}
.cartao h3{background:none;border:0;padding:0 0 8px;font-size:20px;line-height:1.3}
.cartao .d{background:none;border:0;padding:0 0 18px;font-size:15px;color:var(--tx2)}
.cartao .foto{border:0}
.zz::before,.liga{border-color:var(--fio);opacity:.6}
/* avaliações sem moldura */
.av{border:0;background:var(--fundo);padding:28px}
/* dores: imagem + título + frase + link */
.dores-trilho{display:grid;grid-auto-flow:column;grid-auto-columns:min(320px,78vw);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1px 2px 18px;margin-top:40px;scrollbar-width:thin}
.dor{scroll-snap-align:start}
.dor-lk{display:grid;gap:10px;text-decoration:none;color:inherit}
.dor-img{aspect-ratio:4/5;background:var(--bege);display:grid;place-items:center;align-content:center;gap:10px;color:var(--fio)}
.dor-img svg{width:64px;opacity:.45}
.dor-img span{font-size:12px;letter-spacing:.06em;opacity:.7}
.dor-img{position:relative}
.dor-img img{width:100%;height:100%;object-fit:cover;display:block}
.dor-img .breve{position:absolute;left:10px;bottom:10px;background:var(--fundo);color:var(--tx);opacity:1;padding:4px 9px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.dor h3{display:flex;align-items:flex-start;gap:8px;font-size:18px;line-height:1.3;margin-top:8px}
.dor h3 .arv{width:22px;flex:none;color:var(--acento);margin-top:2px}
.dor p{font-size:15px;color:var(--tx2)}
.dor .mais{font:500 14px var(--titulo);text-decoration:underline;text-underline-offset:4px}
.setas button{border-color:var(--tx);border-radius:0}
/* Prof. PhD: foto de ponta a ponta */
.phd{padding:0}
.phd-img{max-width:none;aspect-ratio:auto;height:min(92svh,860px)}
.phd-painel{top:auto;bottom:clamp(24px,5vw,64px);left:auto;right:clamp(24px,6vw,80px);width:min(440px,40%);padding:40px 40px 40px;gap:8px}
.phd-painel .txt{font-size:15px;gap:1em}
.phd-painel .btn{margin:24px 0 0}
/* rodapé: subtítulo do logo maior */
.rodape .marca{font-size:40px}
.rodape .marca .sub{font-size:.5em;letter-spacing:.02em;margin-top:.3em}
.rodape .cx{border:0;padding:0}
@media (max-width:760px){
  .marca-topo{font-size:21px;padding:78px 16px 18px}
  .topo .in{padding:12px 12px 0}
  .hero-img{height:74svh}
  .hero-caixa{left:16px;right:16px;width:auto;bottom:16px}
  .hero-caixa .t{padding:20px 20px 14px}
  .hero-caixa h1{font-size:24px}
  .hero-caixa .btn{margin:0 20px 20px}
  .consulta .cont{padding-block:64px}
  .consulta h2,.zz-sec h2,.dep h2,.google h2,.phd-painel h2{font-size:26px}
  .zz-sec,.dep,.google,.tele{padding-block:64px}
  .zz-sec h2{max-width:none}
  .phd-img{height:auto}
  .phd-painel{width:auto;padding:28px 24px 40px}
  .tele .txt{padding:28px 24px 0}
  .rodape .marca{font-size:27px}
}
/* ===== Base 06 ===== */
/* indicador de posição: tracinhos finos, o atual fica escuro (como na Aesop) */
.barras{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.barras button{width:36px;height:18px;padding:8px 0;border:0;background:var(--fio);background-clip:content-box;opacity:.35;cursor:pointer;transition:opacity .25s,background-color .25s}
.barras button[aria-selected="true"]{opacity:1;background-color:var(--tx)}
.barras button:hover{opacity:.7}
/* cartões de dor: o cartão inteiro é o link; reage ao toque e ao mouse */
.dor-lk{position:relative}
.dor-img{overflow:hidden;transition:filter .35s}
.dor-img>*{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.dor h3{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .3s}
.dor-lk:hover .dor-img,.dor-lk:active .dor-img,.dor-lk:focus-visible .dor-img{filter:brightness(.93)}
.dor-lk:hover .dor-img>img,.dor-lk:active .dor-img>img,.dor-lk:hover .dor-img>svg,.dor-lk:active .dor-img>svg{transform:scale(1.05)}
.dor-lk:hover h3,.dor-lk:active h3,.dor-lk:focus-visible h3{text-decoration-color:currentColor}
.dor-lk:focus-visible{outline:2px solid var(--tx);outline-offset:4px}
/* botões: um padrão só, alinhados à esquerda com o texto */
.zz-btn{justify-content:flex-start}
.btn:hover,.btn:active{filter:none}
.btn.sec:hover,.btn.sec:active{background:var(--btn);color:var(--btn-tx);border-color:var(--btn-borda)}
.btn:not(.sec):hover,.btn:not(.sec):active{background:var(--btn2);color:var(--btn2-tx);border-color:var(--btn2-borda)}
@media (max-width:760px){
  .consulta .txt{text-align:left;justify-items:start}
}
/* ===== Base 07 ===== */
.hero-img>img.foto{object-position:50% 58%}
.phd-painel .btn{justify-self:start;margin:24px 0 0!important}
/* Clube ASTEL: título fora da foto, duas faixas com a mesma proporção */
.astel{background:var(--fundo)}
.astel-cab{display:grid;gap:14px;justify-items:start;padding-block:96px 48px}
.astel-cab h2{position:static;color:var(--tx);font-size:30px;line-height:1.25;text-align:left;padding:0}
.astel-cab p{font-size:16px;color:var(--tx2)}
.astel-faixa{aspect-ratio:1600/528;overflow:hidden}
.astel-faixa img{width:100%;height:100%;object-fit:cover;display:block}
/* setas discretas nas laterais (só no computador) */
.carrossel{position:relative}
.lado{position:absolute;top:calc(50% - 30px);z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--fio);background:var(--fundo);color:var(--tx);font:300 28px/1 var(--titulo);cursor:pointer;opacity:.85;display:grid;place-items:center;padding:0 0 4px}
.lado:hover{opacity:1;background:var(--tx);color:var(--fundo)}
.lado.ant{left:-21px}.lado.prox{right:-21px}
.lado[hidden]{display:none}
@media (max-width:760px),(hover:none){.lado{display:none}}
@media (max-width:760px){
  .hero-img>img.foto{object-position:69% 50%}
  .astel-cab{padding-block:64px 32px}
  .astel-cab h2{font-size:26px}
  .astel-faixa{aspect-ratio:2/1}
}
/* ===== Base 08 ===== */
.hero-img>img.foto{object-position:50% 75%}
.zz{margin-top:32px}
.zz-btn{margin-top:24px}
.zz::before{bottom:60px}
.google-cab{margin-top:4px}
.astel-faixa{aspect-ratio:1366/349}
@media (max-width:760px){.astel-faixa{aspect-ratio:375/140}}
/* ===== Base 11 ===== */
.ph{background:var(--bege);display:grid;place-items:center;align-content:center;gap:10px;color:var(--fio);width:100%;height:100%;text-align:center;padding:16px}
.ph svg{width:64px;opacity:.45}.ph span{font-size:12px;letter-spacing:.06em;opacity:.75}
.rot{font:400 13px/1.4 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);margin-bottom:10px}
.hero-caixa .ap{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx2);margin:0 0 10px}
.consulta .txt{gap:16px}
.consulta .txt p{color:var(--tx2)}
.consulta .txt .btn{margin-top:12px}
.sub-sec{max-width:60ch;color:var(--tx2);font-size:16px;margin-top:12px}
.zz-sec h2{max-width:none}
.cartao .foto .ph{aspect-ratio:511/238;height:auto}
.cartao .foto .ph svg{width:44px}
.google h3{display:none}
.phd-painel h3{font:400 13px/1.4 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:var(--tx2)}
.antes{padding-block:96px}
.fatos{margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 40px;border-top:1px solid var(--fio)}
.fatos>div{padding:18px 0;border-bottom:1px solid var(--fio);display:grid;gap:4px}
.fatos dt{font:500 16px var(--titulo)}
.fatos dd{margin:0;font-size:15px;color:var(--tx2);line-height:1.55}
.antes .btn{margin-top:32px}
.fecho-home{background:var(--creme)}
.fecho-img{aspect-ratio:1366/520;max-height:560px}
.fecho-img .ph{height:100%}
.fecho-txt{padding-block:64px 96px;display:grid;gap:14px;justify-items:start;max-width:760px;margin-inline:auto}
.fecho-txt h2{font-size:30px}
.fecho-txt p{color:var(--tx2);font-size:17px}
.convite-bt{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.av-mais{min-height:40px;padding:10px 0}
.barras button{height:40px;padding:19px 0}
.google-link{padding:10px 0}
@media (max-width:760px){
  .antes{padding-block:64px}
  .fecho-img{aspect-ratio:4/3}
  .fecho-txt{padding-block:40px 64px}.fecho-txt h2{font-size:26px}
  .fatos{grid-template-columns:1fr}
  .hero-caixa .ap{font-size:11px}
}
/* ===== Base 12 ===== */
/* topo: transparente sobre a foto, sólido ao rolar; menu visível no computador */
.topo{transition:opacity .25s,background .3s,box-shadow .3s}
.topo .in{padding:14px clamp(16px,3vw,40px);align-items:center;gap:16px}
.topo.solido{background:var(--fundo);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav-topo{display:flex;gap:clamp(14px,2.2vw,30px);font:500 14px var(--titulo);margin:0 auto}
.nav-topo a{text-decoration:none;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);padding:8px 0;border-bottom:1px solid transparent;transition:color .3s,text-shadow .3s}
.topo.solido .nav-topo a{color:var(--tx);text-shadow:none}
.nav-topo a:hover{border-bottom-color:currentColor}
.hamb{background:transparent;color:#fff}
.topo.solido .hamb{color:var(--tx)}
@media (max-width:1000px){.nav-topo{display:none}}
/* abertura: logo sobre a foto, como no site original */
.hero-img{height:min(100svh,920px)}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%);pointer-events:none}
.hero-base{position:absolute;z-index:2;left:clamp(24px,6vw,80px);right:clamp(24px,6vw,80px);bottom:clamp(24px,5vw,64px);display:grid;gap:clamp(18px,2.6vw,34px);justify-items:start}
.hero-logo{position:static;font-size:clamp(30px,4.4vw,60px);color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.35);animation:aparece 1.2s ease both}
.hero-logo svg{width:1.7em;filter:drop-shadow(0 1px 8px rgba(0,0,0,.3))}
.hero-caixa{position:static;width:min(480px,100%)}
.hero-caixa .t{padding:26px 28px 20px}
.hero-btn{display:flex;width:100%!important;justify-content:space-between;margin:0;min-height:50px;padding:0 28px;border:0}
/* botões: um padrão só */
.btn{font-size:15px;min-height:48px;padding:0 26px}
.consulta .cont{grid-template-columns:579fr 49fr 630fr;align-items:center}
.consulta-foto{grid-column:3;aspect-ratio:4/3;overflow:hidden}
.consulta-foto img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.ph{display:none}
.fecho-img{overflow:hidden}.fecho-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-caixa .hero-btn{margin:0}
@media (max-width:760px){
  .hero-img{height:82svh}
  .hero-base{left:16px;right:16px;bottom:16px;gap:14px}
  .hero-logo{font-size:26px}
  .hero-caixa{width:100%}
  .consulta .cont{grid-template-columns:1fr}
  .consulta-foto{grid-column:1}
  .hero-base{position:absolute}
}
/* ===== Base 13 ===== */
.marca-topo{display:flex;justify-content:center;padding:74px 16px 26px;font-size:30px;color:var(--tx)}
.nav-topo a,.topo.solido .nav-topo a{color:var(--tx);text-shadow:none}
.hamb,.topo.solido .hamb{color:var(--tx)}
.hero-img{height:min(84svh,880px)}
.hero-img::after{background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.22) 100%)}
@media (max-width:760px){
  .marca-topo{font-size:22px;padding:76px 16px 18px}
  .hero-img{height:74svh}
}
/* 04/10: sem a linha vertical do "Como funciona" */
.zz::before{display:none}
.liga{visibility:hidden}
/* 04/10: "Como funciona" com título fixo à esquerda e etapas que passam à direita (teste) */
@media (min-width:901px){
  #como-funciona .cont{display:grid;grid-template-columns:36% 1fr;column-gap:9%;align-items:start}
  #como-funciona .cf-fixo{position:sticky;top:120px;display:grid;gap:18px;justify-items:start;padding-bottom:40px}
  #como-funciona .cf-fixo .zz-btn{margin-top:14px}
  #como-funciona .cf-fixo .zz-btn .btn{width:auto}
  #como-funciona .zz{margin-top:0;gap:0}
  #como-funciona .zw,#como-funciona .zw:nth-child(even){width:100%;margin:0;display:block;align-self:stretch;padding-block:9vh}
  #como-funciona .zw:first-child{padding-top:0}
  #como-funciona .zw+.zw{margin-top:0}
  #como-funciona .liga{display:none}
  #como-funciona .cartao{transform:none!important;opacity:.28;transition:opacity .5s}
  #como-funciona .zw.ativo .cartao{opacity:1}
  #como-funciona .cartao .foto{aspect-ratio:16/10;margin-top:6px}
  #como-funciona .cartao h3{font-size:26px}
  #como-funciona .cartao .d{font-size:16px}
}
@media (prefers-reduced-motion:reduce){#como-funciona .cartao{opacity:1}}
.fecho-img{aspect-ratio:1366/440}
@media (max-width:760px){.fecho-img{aspect-ratio:16/10}}
/* 05/10: "Vai passar?" sem foto (a foto foi para a etapa 01) */
.consulta .cont{grid-template-columns:minmax(0,720px);justify-content:start}
/* 05/10 TESTE: fotos do "Como funciona" sem margem lateral */
#como-funciona{overflow-x:clip}
@media (min-width:901px){#como-funciona .cartao .foto{margin-right:calc(-1 * (max(0px,(100vw - 1240px) / 2) + clamp(24px,6vw,80px)))}}
@media (max-width:900px){#como-funciona .cartao .foto{margin-inline:calc(-1 * clamp(24px,6vw,80px))}}
@media (max-width:900px){#como-funciona .zw,#como-funciona .zw:nth-child(even){display:block}#como-funciona .liga{display:none}}
.fecho-home .astel-faixa{margin-top:0}
/* ===== 05/10: movimento unificado ===== */
/* abertura: logo aparece, foto se revela com leve recuo de zoom, depois a caixa sobe com o texto em camadas */
.marca-topo{animation:ab-fade 1s ease both}
.hero-img>img.foto{animation:ab-foto 1.8s cubic-bezier(.22,.7,.2,1) .15s both}
.hero-caixa{animation:ab-sobe 1s cubic-bezier(.22,.7,.2,1) .9s both}
.hero-caixa .t>*,.hero-caixa .btn{animation:ab-sobe .9s cubic-bezier(.22,.7,.2,1) both}
.hero-caixa .t>*:nth-child(1){animation-delay:1.15s}.hero-caixa .t>*:nth-child(2){animation-delay:1.3s}.hero-caixa .t>*:nth-child(3){animation-delay:1.45s}.hero-caixa .btn{animation-delay:1.6s}
@keyframes ab-fade{from{opacity:0}to{opacity:1}}
@keyframes ab-foto{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes ab-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* rolagem: tudo entra do mesmo jeito (sobe 20px e aparece) */
.rev{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.22,.7,.2,1),transform .9s cubic-bezier(.22,.7,.2,1)}
.rev.vis{opacity:1;transform:none}
.flutua,.flutua.fora{transform:none;opacity:1;transition:none}
/* profundidade nas faixas largas (só computador) */
.astel-faixa{overflow:hidden}
@media (min-width:901px){.astel-faixa img{height:118%!important;will-change:transform}}
@media (prefers-reduced-motion:reduce){.marca-topo,.hero-img>img.foto,.hero-caixa,.hero-caixa .t>*,.hero-caixa .btn{animation:none}.rev{opacity:1;transform:none;transition:none}.astel-faixa img{transform:none!important;height:100%!important}}
/* 05/10: avaliações mais juntas; setinha discreta também no celular */
.google{padding-block:72px 56px}
.google .av-trilho{margin-top:28px}
.google .barras{margin-top:14px}
@media (max-width:760px),(hover:none){
  .lado.prox{display:grid;right:2px;width:34px;height:34px;font-size:22px;opacity:.72;background:rgba(255,254,242,.9)}
  .lado.prox[hidden],.lado.ant{display:none}
  .google{padding-block:56px 44px}
}

/* 10/10: tracinhos em janela de 5; os das pontas ficam menores quando há mais assuntos naquele lado */
.barras button{transition:opacity .25s,background-color .25s,width .25s}
.barras button.pq{width:16px}

/* 10/10: botão fixo do WhatsApp no canto (mesmo link dos outros botões, que o Google Tag Manager conta como conversão).
   Aparece depois da primeira tela (para não cobrir o botão da abertura no celular) e some quando o rodapé, que já tem o WhatsApp, entra na tela. */
.zap{position:fixed;z-index:35;right:max(16px,calc(env(safe-area-inset-right,0px) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.18);transition:opacity .35s,transform .35s cubic-bezier(.22,.7,.2,1),visibility .35s}
.zap svg{width:30px;height:30px;fill:currentColor}
.zap:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.zap:focus-visible{outline:2px solid var(--tx);outline-offset:3px}
.zap.longe{opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none}
@media (min-width:761px){.zap{right:28px;bottom:28px;width:60px;height:60px}.zap svg{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.zap{transition:none}}
@media print{.zap{display:none}}
/* 11/10: no computador, em janela larga e baixa, as fotos mostram o rosto inteiro */
@media (min-width:901px){
  .hero-img>img.foto{object-position:50% 4%}
  .phd-img>img{object-position:50% 2%}
}
@media (min-width:901px){.phd-img{min-height:max(640px,calc(var(--phd-painel-h,600px) + 2*clamp(24px,5vw,64px)))}}