/* =========================================================
   Dr. Alcinei Belguerand — Tratamento da Dor · Ji-Paraná/RO
   Paleta: #17404C (teal profundo) · #69C2C3 (menta, da logo) · #0E1A1E
   Base: padrão Dokta (site-medico). Variações deste projeto:
     tipografia Fraunces/Manrope · paleta teal · raio 24px ·
     cards tonais numerados · faixa em serifa grande vazada ·
     selo só anel (sem disco) · seção escura em gradiente ·
     hero com bloco de cor atrás da coluna de texto
   ========================================================= */

:root{
  --teal:#17404C;
  --teal-900:#0E2A33;
  --teal-700:#1F5967;
  --teal-500:#28757A;   /* fechado um tom: em #2C7F83 o texto de apoio dava 4,41 e reprovava (mínimo 4,5) */
  --mint:#69C2C3;
  --mint-400:#82CFD0;   /* hover dos botões: clareia em vez de escurecer */
  --mint-200:#BFE2E2;
  --mint-100:#E4F2F2;
  --mint-050:#F3F9F9;
  --ink:#0E1A1E;
  --ink-70:#3B4A50;
  --ink-55:#5C6C73;
  --white:#FFFFFF;
  --line:#DCE8E9;

  --wa:#25D366;

  /* Fraunces tem peso 700 e itálico reais — necessários para o destaque do
     título (negrito sintético em serifa grande fica borrado). */
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap:1180px;
  --r:24px;          /* variação: cantos mais generosos que o padrão (14px) */
  --r-sm:14px;
  --shadow:0 1px 2px rgba(23,64,76,.05), 0 12px 32px -12px rgba(23,64,76,.18);
  --shadow-lg:0 2px 4px rgba(23,64,76,.06), 0 28px 60px -22px rgba(23,64,76,.3);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-70);
  background:var(--white);
  /* `clip` (e não `hidden`) evita barra horizontal por causa das animações
     laterais sem quebrar o position:sticky do header. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,iframe{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{color:var(--teal); margin:0 0 .5em; line-height:1.18; font-weight:600}
p{margin:0 0 1em}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--teal); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

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

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:.94rem; letter-spacing:.01em;
  text-decoration:none; border:1px solid transparent; border-radius:999px;
  padding:13px 26px; cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Botão principal na menta da logo, com texto no teal escuro.
   O hover CLAREIA (--mint-400) em vez de escurecer: escurecendo a menta o
   contraste do texto cai para 4,3:1 e reprova em acessibilidade. Clareando
   sobe para 6,3:1 e ainda lê como "acendeu". */
.btn-primary{background:var(--mint); color:var(--teal); box-shadow:0 10px 24px -12px rgba(23,64,76,.45)}
.btn-primary:hover{background:var(--mint-400); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(23,64,76,.5)}
.btn-light{background:#fff; color:var(--teal)}
.btn-light:hover{background:var(--mint-100); transform:translateY(-2px)}
.btn-lg{padding:16px 34px; font-size:1rem}
.cta-row{margin-top:56px; text-align:center}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(23,64,76,.5)}
.header-inner{display:flex; align-items:center; gap:28px; min-height:84px}
/* A logo original é clara (feita para fundo escuro). No header branco entra a
   versão recolorida; no rodapé escuro volta a original. */
.brand img{width:62px; height:auto}
.nav{margin-left:auto; display:flex; gap:28px}
.nav a{
  position:relative; text-decoration:none; font-size:.9rem; font-weight:600;
  color:var(--ink-70); padding:6px 0; transition:color .2s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--mint); transition:width .3s var(--ease);
}
.nav a:hover{color:var(--teal)}
.nav a:hover::after{width:100%}

.nav-toggle{display:none; background:none; border:0; padding:10px; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--teal); margin:5px 0; transition:transform .3s var(--ease), opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 108px;
  min-height:clamp(520px, 40vw, 660px);
  display:flex; align-items:center;
  /* #F4F9F4 é a cor exata do canto esquerdo da arte (medida no pixel), para
     não haver emenda visível entre o fundo e a imagem em telas largas. */
  background-color:#F4F9F4;
  background-repeat:no-repeat;
  /* `auto 100%` e NÃO `cover`: com cover a arte escala pela LARGURA da tela e
     o médico fica gigante num monitor de 1785px. Assim ela entra inteira na
     altura do hero, ancorada à direita, e o tamanho dele passa a depender da
     altura da seção, não da tela. */
  background-image:url('../assets/img/hero-desktop.jpg');
  background-position:right center;
  background-size:auto 100%;
}
/* Nada de bloco de cor atrás do texto: a arte já traz o próprio fundo, e
   qualquer camada por cima dele deixa uma emenda vertical visível onde termina. */
/* A coluna de texto ocupa a metade esquerda — a direita fica livre para a arte. */
.hero-grid{display:grid; grid-template-columns:minmax(0,.56fr); gap:0; position:relative; z-index:1}
.hero .lead{max-width:46ch}

.hero-arte-print{display:none}

/* ---------- Selo (variação: só o anel de texto, sem disco) ---------- */
.selo{
  position:absolute; z-index:2;
  /* A posição horizontal é calculada no JS (posicionarSelo), porque depende
     de onde a arte renderiza o médico, que varia com a largura da tela. */
  left:0; top:60%; transform:translateY(-50%);
  width:158px; height:158px;
  display:grid; place-items:center;
  border-radius:50%;
  background:transparent;                       /* variação: sem disco cheio */
  /* Só aparece depois que o JS mede onde encaixá-lo, para não piscar
     na posição errada. No mobile a posição é fixa e o CSS já libera. */
  opacity:0; transition:opacity .4s var(--ease);
}
.selo.posicionado{opacity:1}
.selo::before{
  content:''; position:absolute; inset:16px;
  border-radius:50%; border:1px solid rgba(23,64,76,.28);
}
.selo-anel{
  position:absolute; inset:0; width:100%; height:100%;
  animation:selo-girar 26s linear infinite;
}
.selo-marca{width:38px; height:auto; position:relative}
@keyframes selo-girar{to{transform:rotate(360deg)}}
/* Abaixo de 1500px a coluna de texto e a arte já se encostam: não sobra vão
   limpo e o selo cairia em cima do médico. Melhor não exibir. */
@media (max-width:1499px){ .selo{display:none} }
@media (prefers-reduced-motion:reduce){
  .selo-anel{animation:none}
}

.eyebrow{
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-500); margin-bottom:14px;
}
.kicker{
  font-family:var(--serif); font-style:italic; font-size:1.06rem;
  color:var(--ink-55); margin-bottom:18px;
}
.hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.05rem, 3.4vw, 2.75rem); line-height:1.16;
  letter-spacing:-.015em; margin-bottom:24px;
  /* Distribui as linhas em comprimentos parecidos em vez de encher a primeira
     e deixar uma palavra órfã na última. */
  text-wrap:balance;
  max-width:15ch;
}
/* Mantém junto o que não pode quebrar (nome de cidade com hífen, registro). */
.nao-quebra{white-space:nowrap}
/* Destaque do título com gradiente em movimento */
.destaque{
  /* `inline` (e não inline-block) para a frase quebrar junto com o resto do
     título — senão ela vira um bloco rígido e sobra palavra órfã na linha. */
  display:inline;
  font-style:italic;
  font-weight:700;      /* peso real do Fraunces, não negrito sintético */
  color:var(--teal);    /* fallback se background-clip:text não pegar */
  /* Passagens de cor curtas demais criam cintilação. Os tons ficam próximos
     entre si para o brilho apenas "respirar" pelo texto. */
  background-image:linear-gradient(100deg,
    var(--teal) 0%,
    var(--teal) 26%,
    var(--teal-500) 42%,
    #4FA6A8 50%,
    var(--teal-500) 58%,
    var(--teal) 74%,
    var(--teal) 100%);
  background-size:300% 100%;
  background-position:0% 50%;
  animation:destaque-shift 16s ease-in-out infinite;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .destaque{
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
@keyframes destaque-shift{
  0%   {background-position:0% 50%}
  50%  {background-position:100% 50%}
  100% {background-position:0% 50%}
}
@media (prefers-reduced-motion:reduce){
  .destaque{animation:none; background-position:22% 50%}
}

.lead{font-size:1.13rem; max-width:56ch; color:var(--ink-70); margin-bottom:34px}

/* placeholders de foto */
.photo-ph{
  position:relative; width:100%; border-radius:var(--r);
  background:
    repeating-linear-gradient(45deg, rgba(105,194,195,.12) 0 12px, rgba(105,194,195,.24) 12px 24px);
  border:1px dashed var(--mint);
  display:grid; place-items:center; text-align:center;
  padding:20px;
  color:var(--teal); font-size:.9rem; font-weight:700; letter-spacing:.02em;
}
.photo-ph small{display:block; margin-top:6px; font-weight:500; color:var(--ink-55); letter-spacing:0}
.ph-portrait{aspect-ratio:3/4; box-shadow:var(--shadow-lg)}
.ph-tall{aspect-ratio:4/5; box-shadow:var(--shadow-lg)}

/* Fotos reais das seções internas */
.foto{
  width:100%; height:auto; border-radius:6px var(--r) var(--r) var(--r);
  box-shadow:var(--shadow-lg);
  object-fit:cover;
  object-position:50% 22%;   /* enquadra pelo rosto, não pelo centro geométrico */
}
.foto-tall{aspect-ratio:4/5}

/* ---------- Faixa rolante ---------- */
.faixa{
  overflow:hidden;
  background:var(--teal);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:10px 0;
  user-select:none;
}
.faixa-trilho{display:flex; width:max-content; will-change:transform}
.faixa-grupo{display:flex; align-items:center; flex:0 0 auto}

/* Caixa-alta pequena e bem espaçada: a faixa marca ritmo, não compete com o
   hero logo acima. Em serifa grande ela virava um segundo título. */
.faixa-item{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.7;
  white-space:nowrap;
  padding:0 20px;
  color:rgba(255,255,255,.82);
}
/* Alternância de peso visual. Neste corpo o contorno vazado fica sujo,
   então a variação é de opacidade. */
.faixa-item.vazado{color:rgba(255,255,255,.38)}

/* Separador: o monograma AB, discreto, na altura da linha de texto. */
.faixa-marca{
  flex:0 0 auto;
  width:13px; height:auto; opacity:.5;
}

@media (prefers-reduced-motion:reduce){
  .faixa-trilho{transform:none !important}
}
@media (max-width:640px){
  .faixa{padding:9px 0}
  .faixa-item{font-size:.64rem; letter-spacing:.16em; padding:0 14px}
  .faixa-marca{width:11px}
}

/* ---------- Seções ---------- */
.section{padding:110px 0; overflow-x:clip}
.section-alt{background:var(--mint-050)}
/* Variação: escura em gradiente, não cor chapada. */
.section-dark{
  background:linear-gradient(165deg, var(--teal) 0%, var(--teal-900) 58%, #0A2129 100%);
  color:rgba(255,255,255,.8);
}
.section-dark h2,.section-dark h3{color:#fff}

.section-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem, 3.3vw, 2.7rem); line-height:1.16;
  letter-spacing:-.015em;
  max-width:24ch; margin:0 auto 56px; text-align:center;
}
.section-title.left{text-align:left; margin:0 0 24px; max-width:24ch}
.sub-title{
  font-family:var(--serif); font-weight:600; font-size:1.55rem;
  text-align:center; margin:88px 0 40px;
}
.section-intro{
  max-width:66ch; margin:-24px auto 52px; text-align:center; font-size:1.05rem;
}
.section-dark .section-intro{color:rgba(255,255,255,.78)}
.body-lg{font-size:1.08rem}

/* ---------- Cards (variação: fundo tonal + numerados) ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:c}
.cards-2{grid-template-columns:repeat(2,1fr)}
/* Canto superior esquerdo curto e os outros três generosos: é o detalhe que
   dá identidade própria à página sem mexer em estrutura. Repetido nas fotos e
   no mapa para virar uma rima visual, não um acidente. */
.card{
  position:relative; counter-increment:c;
  background:var(--mint-050); border:1px solid var(--line);
  border-radius:6px var(--r) var(--r) var(--r); padding:34px 30px 32px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--mint); background:var(--white)}
.card h3{font-size:1.08rem; font-weight:700; margin-bottom:12px; line-height:1.34}
.card p{margin:0; font-size:.97rem; color:var(--ink-70)}

/* Número no lugar do ícone de check da base. */
.card-mark{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:18px; border-radius:12px;
  background:var(--mint-100);
  font-family:var(--serif); font-weight:700; font-size:1.05rem; line-height:1;
  color:var(--teal);
}
.card-mark::before{content:counter(c,decimal-leading-zero)}
.section-alt .card{background:#fff}

/* Usada na "escada do tratamento" (página de dor de cabeça): ali o número já
   está escrito no título ("Degrau 1 · …"), então o contador do card sairia
   duplicado. Sem o selo numérico, o card recupera o respiro do topo. */
.cards-sem-numero .card{padding-top:30px}

/* Cards sobre o fundo escuro (seção "Tratamentos") */
.cards-dark .card{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.15);
}
.cards-dark .card:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(105,194,195,.55);
  box-shadow:none;
}
.cards-dark .card h3{color:#fff}
.cards-dark .card p{color:rgba(255,255,255,.76)}
.cards-dark .card-mark{background:rgba(105,194,195,.18); color:var(--mint)}
.cards-dark .card:hover .card-mark{background:var(--mint); color:var(--teal)}

/* ---------- Split ---------- */
.split{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center}
/* Espelha também as larguras, senão a foto do "Sobre mim" sairia bem maior
   que a da seção anterior. */
.split-reverse{grid-template-columns:1.15fr .85fr}
.split-reverse .split-media{order:2}
.split-reverse .split-copy{order:1}

/* ---------- Steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.step{
  border:1px solid var(--line); border-radius:6px var(--r) var(--r) var(--r);
  padding:34px 28px; background:var(--white);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover{border-color:var(--mint); transform:translateY(-4px); box-shadow:var(--shadow)}
.step-num{
  display:block; font-family:var(--serif); font-weight:700; font-size:2.3rem; line-height:1;
  color:var(--mint); margin-bottom:16px;
}
.step h3{font-size:1.05rem; font-weight:700; margin-bottom:12px; line-height:1.34}
.step p{margin:0; font-size:.96rem}

/* ---------- Timeline (Sobre mim) ---------- */
.timeline{position:relative; padding-left:30px}
.timeline::before{
  content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:var(--mint);
  opacity:.4;
}
.tl-item{position:relative; padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:''; position:absolute; left:-30px; top:9px; width:12px; height:12px;
  border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--mint-100);
}
.tl-item h3{font-size:1.03rem; font-weight:700; margin-bottom:8px}
.tl-item p{margin:0; font-size:.96rem}

/* ---------- FAQ ---------- */
.faq{max-width:840px; margin-inline:auto}
.faq-item{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; margin-bottom:14px; overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item[open]{border-color:var(--mint); box-shadow:var(--shadow)}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:16px;
  padding:22px 26px;
  font-family:var(--sans); font-weight:700; font-size:1.02rem; line-height:1.4;
  color:var(--teal);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:''; flex:0 0 auto; margin-left:auto; margin-top:4px;
  width:15px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317404C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(180deg)}
/* overflow:hidden é o que permite animar a altura no abre/fecha (main.js) */
.faq-body{padding:0 26px 24px; font-size:.99rem; overflow:hidden}
.faq-body p{margin:0}

/* ---------- Instagram ---------- */
.insta-inner{text-align:center; max-width:640px}
.insta-icon{width:44px; height:44px; margin:0 auto 18px; fill:var(--teal)}
.insta h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.85rem,3.1vw,2.5rem); margin-bottom:12px}
.insta p{margin-bottom:30px}

/* ---------- Contato ---------- */
.contact-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start}
.info-block{padding:22px 0; border-bottom:1px solid var(--line)}
.info-block:first-child{padding-top:0}
.info-block h3{
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-500); margin-bottom:8px;
}
.info-block p{margin:0; font-size:1.05rem; color:var(--teal); font-weight:600}
.info-block a{text-decoration:none; transition:opacity .2s}
.info-block a:hover{opacity:.65}
.contact-map{border-radius:6px var(--r) var(--r) var(--r); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.contact-map iframe{width:100%; height:390px; border:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--teal-900); color:rgba(255,255,255,.68); padding:72px 0 28px; font-size:.94rem}
.footer-inner{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px}
/* No rodapé escuro entra o monograma AB na versão clara, sem o anel de texto
   (o nome já está escrito ao lado, em texto). */
.footer-brand img{width:132px; height:auto; margin-bottom:20px}
.site-footer h4{color:#fff; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px}
.footer-col a{display:block; text-decoration:none; padding:5px 0; transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.84rem; color:rgba(255,255,255,.52);
}
.footer-bottom p{margin:0}
.assinatura{
  width:100%; margin-top:14px !important; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center; font-size:.74rem; letter-spacing:.06em;
  color:rgba(255,255,255,.36);
}
.assinatura a{
  color:rgba(255,255,255,.64); font-weight:700; letter-spacing:.08em;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.assinatura a:hover{color:#fff; border-bottom-color:rgba(255,255,255,.55)}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:120;
  width:58px; height:58px; border-radius:50%;
  background:var(--wa); display:grid; place-items:center;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.75);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float svg{width:32px; height:32px; fill:#fff}
.wa-float:hover{transform:scale(1.08); box-shadow:0 14px 34px -8px rgba(37,211,102,.9)}

/* =========================================================
   MOTION
   ========================================================= */

/* Barra de progresso de leitura */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:130;
  height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--teal), var(--mint));
  will-change:transform; pointer-events:none;
}

/* ---------- Reveal (replay a cada entrada em tela) ---------- */
.reveal{
  opacity:0;
  transform:translate3d(0, 26px, 0);
  transition:
    opacity .75s var(--ease),
    transform .75s var(--ease),
    filter .75s var(--ease),
    clip-path .9s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1; transform:none; filter:none}

.reveal-left      {transform:translate3d(-40px,0,0)}
.reveal-right     {transform:translate3d(40px,0,0)}
.reveal-scale     {transform:scale(.94); filter:blur(6px)}
.reveal-soft      {transform:translate3d(0,14px,0); filter:blur(4px)}
.reveal-mask      {transform:translate3d(0,34px,0); clip-path:inset(0 0 100% 0)}
.reveal-mask.is-visible{clip-path:inset(0 0 0 0)}

/* Título com traço que se desenha */
.section-title{position:relative}
.section-title::after{
  content:''; position:absolute; left:50%; bottom:-18px;
  width:64px; height:2px; margin-left:-32px;
  /* Dois segmentos com um respiro no meio — assinatura discreta do projeto. */
  background:linear-gradient(90deg,
    var(--mint) 0 18px, transparent 18px 26px, var(--teal) 26px 100%);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .8s var(--ease) .25s;
}
.section-title.left::after{left:0; margin-left:0; transform-origin:0 50%}
.section-title.is-visible::after{transform:scaleX(1)}
/* Na seção escura o segundo segmento não pode ser o teal: sobre o fundo
   escuro ele simplesmente some. Vai em branco translúcido. */
.section-dark .section-title::after{
  background:linear-gradient(90deg,
    var(--mint) 0 18px, transparent 18px 26px, rgba(255,255,255,.6) 26px 100%);
}

/* Cards: brilho que atravessa no hover */
.card{overflow:hidden}
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(105,194,195,.24) 50%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease);
}
.card:hover::after{transform:translateX(120%)}
.card .card-mark{transition:transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease)}
.card:hover .card-mark{transform:scale(1.08) rotate(-6deg); background-color:var(--teal); color:#fff}

/* Botões: preenchimento radial no hover */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.45), transparent 62%);
  opacity:0; transition:opacity .4s var(--ease);
}
.btn:hover::before{opacity:1}
/* Seta que só aparece no hover, deslizando para dentro. Fica no ::after (o
   ::before já é o brilho radial) e é puro CSS — nenhum ícone no HTML. */
.btn::after{
  content:''; flex:0 0 auto; width:0; height:12px; margin-left:-10px;
  background-color:currentColor; opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:width .3s var(--ease), margin-left .3s var(--ease), opacity .3s var(--ease);
}
.btn:hover::after{width:15px; margin-left:0; opacity:.9}
@media (prefers-reduced-motion:reduce){ .btn::after{display:none} }
.btn:active{transform:translateY(0) scale(.98)}
.btn-light::before{background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(23,64,76,.14), transparent 62%)}

/* Steps: número que sobe e linha que cresce */
.step{position:relative; overflow:hidden}
.step::before{
  content:''; position:absolute; left:0; top:0; width:2px; height:0;
  background:linear-gradient(180deg, var(--mint), transparent);
  transition:height .9s var(--ease) .15s;
}
.step.is-visible::before{height:100%}
.step-num{transition:transform .5s var(--ease), color .5s var(--ease)}
.step:hover .step-num{transform:translateY(-4px); color:var(--teal)}

/* ---------- Timeline: linha que se preenche com a rolagem ---------- */

/* trilho (claro, sempre visível) */
.timeline::before{
  background:var(--mint);
  opacity:.3;
}
/* Preenchimento, controlado pelo scroll via --p.
   Usa clip-path em vez de scaleY: o gradiente fica no tamanho real (não
   esmagado) e a ponta corre continuamente, sem saltar entre subpixels. */
.timeline::after{
  content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--teal) 0%, var(--teal) 62%, var(--teal-500) 88%, var(--mint) 100%);
  clip-path:inset(0 0 calc(100% - var(--p, 0) * 100%) 0);
  /* a ponta some suavemente nos últimos 22px, em vez de terminar num corte seco */
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(var(--head, 0px) - 22px), rgba(0,0,0,.15) var(--head, 0px));
  mask-image:linear-gradient(180deg, #000 0, #000 calc(var(--head, 0px) - 22px), rgba(0,0,0,.15) var(--head, 0px));
  will-change:clip-path;   /* sem transition: a suavização é feita quadro a quadro no JS */
}
/* ponta luminosa que corre junto com o preenchimento */
.timeline .tl-head{
  position:absolute; left:0; top:8px; width:12px; height:12px; border-radius:50%;
  background:var(--teal); pointer-events:none;
  transform:translateY(calc(var(--head, 0px) - 6px));
  opacity:var(--headOn, 0);
  box-shadow:0 0 0 5px rgba(105,194,195,.28), 0 0 16px 2px rgba(23,64,76,.32);
  transition:opacity .45s var(--ease);
  will-change:transform, opacity;
}

/* Sem JS o preenchimento não existe — então a linha fica cheia e tudo legível. */
.timeline:not(.js-on)::after{clip-path:none}

/* pontos: apagados por padrão, acendem quando a linha passa */
.timeline.js-on .tl-item::before{
  background:var(--white);
  border:2px solid var(--mint);
  box-shadow:0 0 0 4px var(--mint-050);
  transition:background-color .6s var(--ease), border-color .6s var(--ease),
             transform .6s var(--ease), box-shadow .6s var(--ease);
}
.timeline.js-on .tl-item.lit::before{
  background:var(--teal);
  border-color:var(--teal);
  transform:scale(1.18);
  box-shadow:0 0 0 5px var(--mint-100);
}
.tl-item h3{transition:color .6s var(--ease)}
.timeline.js-on .tl-item:not(.lit) h3{color:var(--ink-55)}
.tl-item:hover::before{transform:scale(1.3); box-shadow:0 0 0 7px var(--mint-100)}

/* Fotos: leve parallax + zoom no hover */
.photo-ph, .split-media .foto{
  will-change:transform;
  transform:translate3d(0, var(--py, 0px), 0) scale(var(--sc, 1));
  transition:transform .5s var(--ease);
}
.split-media:hover .photo-ph, .split-media:hover .foto{--sc:1.02}

/* Header: some ao descer, volta ao subir */
.site-header{transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .45s var(--ease)}
.site-header.hidden{transform:translateY(-100%)}

/* WhatsApp: pulso discreto */
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--wa); opacity:0;
  animation:wa-pulse 2.8s var(--ease) infinite;
}
@keyframes wa-pulse{
  0%   {transform:scale(1);    opacity:.55}
  70%  {transform:scale(1.55); opacity:0}
  100% {transform:scale(1.55); opacity:0}
}
.wa-float:hover::before{animation-play-state:paused}

/* Ícone do Instagram flutuando */
.insta-icon{animation:float-y 4.5s ease-in-out infinite}
@keyframes float-y{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-7px)}
}

/* O bloco do hero é só o contêiner — quem anima são os filhos, um a um,
   para que a entrada se repita sempre que o topo volta à tela. */
.hero-copy.reveal{opacity:1; transform:none; transition:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .reveal{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important}
  .scroll-progress{display:none}
  .site-header.hidden{transform:none}
}

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,.68fr)}
  /* Em tablet não sobra vão limpo: o selo colidiria com o texto ou com a arte. */
  .selo{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split, .split-reverse{grid-template-columns:1fr; gap:40px}
  .split-reverse .split-media{order:0}
  .split-reverse .split-copy{order:0}
  .split-media{max-width:440px; margin-inline:auto}
  .contact-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr; gap:36px}
}

@media (max-width:820px){
  .nav{
    position:fixed; inset:72px 0 auto 0; margin:0;
    flex-direction:column; gap:0; background:#fff;
    border-bottom:1px solid var(--line); padding:8px 24px 20px;
    box-shadow:0 20px 40px -24px rgba(23,64,76,.5);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.open{opacity:1; transform:none; pointer-events:auto}
  .nav a{padding:14px 0; border-bottom:1px solid var(--mint-100); font-size:1rem}
  .nav a::after{display:none}
  .nav-toggle{display:block; order:3; margin-left:2px; padding:10px 0 10px 8px}
  .header-cta{
    order:2; margin-left:auto;
    padding:10px 16px; font-size:.82rem;
    white-space:nowrap;              /* nunca quebrar em duas linhas */
  }
  .brand{margin-right:auto}
  .brand img{width:50px}
  .header-inner{gap:8px; min-height:72px}

  /* ---- Hero centralizado no mobile ---- */
  .hero{
    text-align:center;
    display:block;
    align-items:flex-start;
    min-height:auto;
    background-position:center bottom;
    /* Arte 480×1200 (1:2,5), topo da cabeça em ~54% da altura.
       `cover` e NÃO `100% auto`: em telas estreitas o texto ocupa mais linhas,
       o hero fica mais alto que a proporção da arte e sobraria faixa vazia no
       topo. Com cover ela sempre preenche; o custo é recortar alguns pixels
       das laterais, que é área de fundo. */
    background-image:url('../assets/img/hero-mobile.jpg');
    background-size:cover;
  }
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .hero .eyebrow{margin-bottom:12px}
  .hero .lead{margin-left:auto; margin-right:auto; max-width:100%}
  /* O max-width:15ch do título deixava a caixa dele colada à esquerda dentro
     do hero centralizado — o texto ficava centrado, o bloco não. */
  .hero h1{margin-inline:auto}

  .selo, .selo.posicionado{
    display:grid; opacity:1;
    left:20px; right:auto; bottom:24px;
    top:auto; transform:none;      /* anula o posicionamento do desktop */
    width:104px; height:104px;
    position:absolute;
  }
  /* No mobile o selo cai sobre o terno azul-marinho do médico, onde o teal
     escuro do SVG some. `brightness(0) invert(1)` pinta qualquer cor de branco
     sólido — mais simples do que manter um segundo arquivo só para isso.
     A sombra segura a leitura caso o selo pegue uma área clara da arte. */
  .selo-anel, .selo-marca{
    filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(14,42,51,.5));
  }
  .selo::before{inset:11px; border-color:rgba(255,255,255,.6)}
  .selo-marca{width:28px}
}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .section{padding:64px 0}

  /* ---- Hero ----
     A folga entre o botão "Agendar Consulta" e a cabeça do médico só se ajusta
     por este padding. O valor atende a PÁGINA MAIS APERTADA das três (a de
     coluna e joelho, cujo título é o mais longo e empurra o botão para baixo)
     — por isso 137vw e não 129vw. Valor medido, não estimado; se a proporção
     da arte mudar, recalcule medindo. */
  .hero{padding:36px 0 137vw}
  .hero h1{font-size:clamp(1.7rem, 7.2vw, 2.25rem); line-height:1.18; margin-bottom:18px}
  .hero .eyebrow{
    font-size:.66rem; letter-spacing:.11em; line-height:1.8;
    max-width:28ch; margin-inline:auto;
  }
  .hero .kicker{font-size:.98rem; margin-bottom:14px}
  .hero .lead{font-size:1.02rem; margin-bottom:28px}

  .cards, .cards-2, .steps{grid-template-columns:1fr}
  .card{padding:28px 22px}
  .step{padding:28px 22px}
  .sub-title{font-size:1.3rem; margin:60px 0 32px}
  .section-title{margin-bottom:40px}
  .section-intro{margin-bottom:40px}
  .cta-row{margin-top:40px}
  .cta-row .btn{width:100%}
  .faq-item summary{padding:18px 20px; font-size:.98rem}
  .faq-body{padding:0 20px 20px}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; gap:6px}
  .wa-float{width:54px; height:54px; right:16px; bottom:16px}
  .contact-map iframe{height:300px}
}

/* Telas muito estreitas: o texto ocupa mais linhas e empurra o botão para
   baixo, então o hero precisa de mais altura para o médico não encostar nele. */
@media (max-width:360px){
  .hero{padding-bottom:168vw}
}

/* =========================================================
   IMPRESSÃO / PDF   (fica no fim do arquivo de propósito:
   a página de impressão tem ~794px de largura, então as media
   queries de mobile acima também valeriam. Estas regras vêm
   depois para vencê-las.)
   ========================================================= */
@media print{
  html,body{background:#fff}
  body{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;          /* mantém fundos escuros e fotos */
    font-size:13px;
  }
  .wrap{max-width:100%; padding-inline:28px}

  /* Sem isso o PDF sai em branco: os blocos entram com opacity:0 e o
     observer que os revela não roda durante a impressão. */
  .reveal, .hero-copy > *{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    transition:none !important;
    animation:none !important;
  }

  /* Só faz sentido na tela */
  .wa-float, .scroll-progress, .nav-toggle, .selo, .skip-link,
  .faixa, .contact-map, .nav{display:none !important}

  .site-header{position:static; background:#fff; border-bottom:1px solid var(--line)}
  .header-inner{min-height:64px}
  .brand img{width:70px}

  /* Topo compacto, com a arte de desktop ancorada à direita */
  .hero{
    display:flex !important; align-items:center;
    min-height:300px !important;
    padding:30px 0 !important;
    text-align:left !important;
    background-image:none !important;   /* o Chrome não inclui background-image no PDF */
    position:relative; overflow:hidden;
  }
  /* Quando a arte existir, o <img class="hero-arte-print"> é o que entra no
     PDF — o Chrome simplesmente não imprime background-image. */
  .hero-arte-print{
    display:block !important;
    position:absolute; right:0; top:0;
    height:100%; width:auto; max-width:none;
  }
  .hero-grid{grid-template-columns:minmax(0,.6fr) !important; position:relative; z-index:1}
  .hero h1{font-size:1.65rem}
  .hero .kicker{font-size:.92rem; margin-bottom:8px}
  .hero .lead{font-size:.9rem; margin:0 0 4px; max-width:100%}
  .hero .eyebrow{font-size:.62rem; margin-bottom:10px}
  .hero .btn{display:none}                 /* botão não clicável no papel */

  /* background-clip:text não é honrado na impressão: o gradiente pintaria
     como um retângulo escuro atrás da frase. No papel vai cor sólida. */
  .destaque{
    background-image:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    -webkit-text-fill-color:var(--teal) !important;
    color:var(--teal) !important;
  }

  .section{padding:34px 0 !important}
  .section-title{font-size:1.5rem; margin-bottom:26px; break-after:avoid}
  .section-title.left{font-size:1.35rem}
  .section-intro{margin:-14px auto 22px; font-size:.86rem}
  .sub-title{margin:28px 0 18px; font-size:1.15rem}
  .cta-row{display:none}                   /* idem: botões soltos no PDF */

  .cards{grid-template-columns:repeat(2,1fr) !important; gap:14px}
  .cards-2{grid-template-columns:repeat(2,1fr) !important}
  .card{padding:16px 18px; break-inside:avoid}
  .card h3{font-size:.95rem}
  .card p{font-size:.82rem}

  .steps{grid-template-columns:repeat(2,1fr) !important; gap:14px}
  .step{padding:16px 18px; break-inside:avoid}

  .split, .split-reverse{grid-template-columns:.9fr 1.1fr !important; gap:26px}
  .split-media{max-width:100%}
  .foto{max-height:340px}

  .tl-item{break-inside:avoid}

  /* <details> fechado não imprime a resposta: no papel vai tudo aberto. */
  .faq-item{break-inside:avoid; border-color:var(--line) !important; box-shadow:none !important}
  .faq-item summary{padding:12px 16px; font-size:.92rem}
  .faq-item summary::after{display:none}
  .faq-body{display:block !important; padding:0 16px 14px; font-size:.84rem}

  /* A linha da timeline é preenchida por JS; no papel vai cheia */
  .timeline::after{clip-path:none !important; -webkit-mask-image:none !important; mask-image:none !important}
  .timeline.js-on .tl-item::before{background:var(--teal); border-color:var(--teal)}
  .timeline.js-on .tl-item:not(.lit) h3{color:var(--teal)}
  .tl-head{display:none !important}

  a[href^="http"]::after{content:""}
}