/* =========================================================
   Dr. Felipe Fernandes — Spine Cirurgia da Coluna
   Paleta oficial: #02304A (navy) · #9D9DAD (prata) · #000000
   ========================================================= */

:root{
  --navy:#02304A;
  --navy-900:#011E2F;
  --navy-700:#08405F;
  --silver:#9D9DAD;
  --silver-100:#EFEFF3;
  --silver-050:#F7F7FA;
  --ink:#0B0B0B;
  --ink-70:#3E4550;
  --ink-55:#5D6672;
  --white:#FFFFFF;
  --line:#E2E2EA;

  --wa:#25D366;

  /* Newsreader tem pesos reais (inclusive itálico 700), necessários para o
     destaque do título. Instrument Serif só tinha um peso. */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap:1180px;
  --r:14px;
  --shadow:0 1px 2px rgba(2,48,74,.05), 0 12px 32px -12px rgba(2,48,74,.16);
  --shadow-lg:0 2px 4px rgba(2,48,74,.06), 0 28px 60px -22px rgba(2,48,74,.28);
  --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(--navy); 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(--navy); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--navy); 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:600; 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);
}
.btn-primary{background:var(--navy); color:#fff; box-shadow:0 10px 24px -12px rgba(2,48,74,.65)}
.btn-primary:hover{background:var(--navy-700); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(2,48,74,.7)}
.btn-light{background:#fff; color:var(--navy)}
.btn-light:hover{background:var(--silver-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,.88);
  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(2,48,74,.5)}
.header-inner{display:flex; align-items:center; gap:28px; min-height:80px}
.brand img{width:108px; height:auto}
.nav{margin-left:auto; display:flex; gap:30px}
.nav a{
  position:relative; text-decoration:none; font-size:.92rem; font-weight:500;
  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(--navy); transition:width .3s var(--ease);
}
.nav a:hover{color:var(--navy)}
.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(--navy); 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:88px 0 104px;
  min-height:clamp(500px, 38vw, 640px);
  display:flex; align-items:center;
  /* Fundo de apoio: aparece enquanto a foto não estiver na pasta e
     preenche as laterais em telas muito largas. */
  background-color:#F7F8F3;   /* mesma cor chapada da arte, para não haver emenda */
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(157,157,173,.20), transparent 62%),
    url('../assets/img/hero-desktop.jpg');
  background-repeat:no-repeat, no-repeat;
  background-position:center, right center;
  /* `auto 100%`: a arte entra inteira, na altura exata do hero e ancorada à
     direita. Nada de corte nem de deformação — o tamanho do Dr. passa a ser
     ditado pela altura do hero, não pela largura da tela (que com `cover`
     deixava ele gigante em monitores largos). */
  background-size:auto, auto 100%;
}
/* A coluna de texto ocupa a metade esquerda — a direita fica livre para a foto. */
.hero-grid{display:grid; grid-template-columns:minmax(0,.56fr); gap:0}
.hero .lead{max-width:44ch}

.hero-arte-print{display:none}

/* ---------- Selo giratório ---------- */
.selo{
  position:absolute; z-index:2;
  /* A posição horizontal é calculada no JS (posicionarSelo), porque depende
     de onde a arte renderiza o Dr., que varia com a largura da tela. */
  left:0; top:62%; transform:translateY(-50%);
  width:150px; height:150px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(2,48,74,.93);
  box-shadow:0 18px 44px -18px rgba(2,48,74,.6);
  /* 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:13px;
  border-radius:50%; border:1px solid rgba(157,157,173,.4);
}
.selo-anel{
  position:absolute; inset:0; width:100%; height:100%;
  animation:selo-girar 24s linear infinite;
}
/* A marca é navy/prata; dentro do disco navy ela precisa virar branco sólido. */
.selo-marca{width:29px; height:auto; position:relative; filter:brightness(0) invert(1)}
@keyframes selo-girar{to{transform:rotate(360deg)}}
/* Abaixo de 1500px a coluna de texto e o Dr. já se encostam: não sobra vão
   limpo e o selo cairia em cima dele. Melhor não exibir. */
@media (max-width:1499px){ .selo{display:none} }
@media (prefers-reduced-motion:reduce){
  .selo-anel{animation:none}
}
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver); margin-bottom:22px;
}
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.3rem, 3.85vw, 3.1rem); line-height:1.12;
  letter-spacing:-.01em; margin-bottom:24px;
}
/* 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 um "em" solto na linha. */
  display:inline;
  font-style:italic;
  font-weight:700;      /* peso real do Newsreader, não negrito sintético */
  color:var(--navy);                 /* 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(--navy) 0%,
    var(--navy) 26%,
    #1E5878 40%,
    #4B84A6 50%,
    #1E5878 60%,
    var(--navy) 74%,
    var(--navy) 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%}
}

.hero h1 em{
  display:block; margin-top:12px; font-style:italic;
  font-size:clamp(1.4rem, 2.2vw, 1.85rem); color:var(--silver);
}
.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(157,157,173,.10) 0 12px, rgba(157,157,173,.18) 12px 24px);
  border:1px dashed var(--silver);
  display:grid; place-items:center; text-align:center;
  color:var(--navy); font-size:.9rem; font-weight:600; letter-spacing:.02em;
}
.photo-ph small{display:block; margin-top:6px; font-weight:400; 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: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}
.hero-photo{margin:0}

/* ---------- Faixa rolante ---------- */
.faixa{
  overflow:hidden;
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:12px 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}

.faixa-item{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  line-height:1.6;
  white-space:nowrap;
  padding:0 18px;
  color:rgba(255,255,255,.86);
}
/* Alternância de peso visual — mantém o ritmo sem engrossar a faixa.
   (No tamanho pequeno o contorno vazado fica sujo, por isso virou opacidade.) */
.faixa-item.vazado{color:rgba(255,255,255,.34)}

/* Separador: a marca da coluna, discreta, na altura da linha de texto. */
.faixa-marca{
  flex:0 0 auto;
  width:9px; height:auto;
  filter:brightness(0) invert(1); opacity:.5;
}

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

/* ---------- Números ---------- */
.stats{background:var(--navy); color:#fff; padding:52px 0}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center}
.stat{position:relative}
.stat + .stat::before{
  content:''; position:absolute; left:0; top:14%; height:72%; width:1px;
  background:rgba(255,255,255,.18);
}
.stat strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,4.6vw,3.4rem); line-height:1; color:#fff;
}
.stat span{
  display:block; margin-top:10px; font-size:.85rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72);
}

/* ---------- Seções ---------- */
.section{padding:110px 0; overflow-x:clip}
.section-alt{background:var(--silver-050)}
.section-dark{background:var(--navy); color:rgba(255,255,255,.78)}
.section-dark h2,.section-dark h3{color:#fff}

.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.95rem, 3.4vw, 2.85rem); line-height:1.14;
  max-width:22ch; 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:400; font-size:1.6rem;
  text-align:center; margin:88px 0 40px;
}
.body-lg{font-size:1.08rem}

/* ---------- Cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:34px 30px 32px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--silver)}
.card h3{font-size:1.09rem; font-weight:600; margin-bottom:12px; line-height:1.3}
.card p{margin:0; font-size:.97rem; color:var(--ink-70)}

.card-mark, .card-check::before{
  display:block; width:34px; height:34px; margin-bottom:18px; border-radius:9px;
  background:var(--silver-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302304A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:19px;
}
.card-check::before{content:''}
.section-alt .card{background:#fff}

/* Cards sobre fundo navy (seção "Tratamentos e cirurgias que realizo") */
.cards-dark .card{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.14);
}
.cards-dark .card:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.3);
  box-shadow:none;
}
.cards-dark .card h3{color:#fff}
.cards-dark .card p{color:rgba(255,255,255,.74)}
.cards-dark .card-mark{
  background-color:rgba(255,255,255,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cards-dark .card:hover .card-mark{background-color:var(--silver)}
.cards-dark .card:hover .card-mark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302304A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- 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(3,1fr); gap:28px; counter-reset:s}
.step{
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  padding:34px 30px; background:rgba(255,255,255,.035);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.step:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.3); transform:translateY(-4px)}
.step-num{
  display:block; font-family:var(--serif); font-size:2.4rem; line-height:1;
  color:var(--silver); margin-bottom:18px;
}
.step h3{font-size:1.09rem; margin-bottom:12px}
.step p{margin:0; font-size:.97rem; color:rgba(255,255,255,.74)}

/* ---------- Timeline (Sobre mim) ---------- */
.timeline{position:relative; padding-left:30px}
.timeline::before{
  content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--navy), var(--silver));
  opacity:.35;
}
.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(--navy); box-shadow:0 0 0 4px var(--silver-100);
}
.tl-item h3{font-size:1.03rem; margin-bottom:8px}
.tl-item p{margin:0; font-size:.96rem}

/* ---------- Instagram ---------- */
.insta-inner{text-align:center; max-width:640px}
.insta-icon{width:42px; height:42px; margin:0 auto 18px; fill:var(--navy)}
.insta h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.2vw,2.6rem); 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:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--silver); margin-bottom:8px;
}
.info-block p{margin:0; font-size:1.05rem; color:var(--navy); font-weight:500}
.info-block a{text-decoration:none; transition:opacity .2s}
.info-block a:hover{opacity:.65}
.contact-map{border-radius: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(--navy-900); color:rgba(255,255,255,.66); padding:72px 0 28px; font-size:.94rem}
.footer-inner{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px}
.footer-brand img{width:180px; height:auto; margin-bottom:20px}
/* A logo é navy; no rodapé escuro ela vira branca. */
.logo-invertida{filter:brightness(0) invert(1); opacity:.92}
.site-footer h4{color:#fff; font-size:.78rem; 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,.5);
}
.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,.34);
}
.assinatura a{
  color:rgba(255,255,255,.62); font-weight:600; 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(--navy), var(--silver));
  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 sublinhado que se desenha */
.section-title{position:relative}
.section-title::after{
  content:''; position:absolute; left:50%; bottom:-18px;
  width:64px; height:2px; margin-left:-32px;
  background:var(--navy); 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)}
.section-dark .section-title::after{background:var(--silver)}

/* 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(157,157,173,.22) 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)}
.card:hover .card-mark{transform:scale(1.1) rotate(-6deg); background-color:var(--navy)}
.card:hover .card-mark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* 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,.28), transparent 62%);
  opacity:0; transition:opacity .4s var(--ease);
}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0) scale(.98)}
.btn-light::before{background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(2,48,74,.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(--silver), 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:#fff}

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

/* trilho (cinza, sempre visível) */
.timeline::before{
  background:var(--silver);
  opacity:.28;
}
/* 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(--navy) 0%, var(--navy) 62%, #2E6F94 88%, var(--silver) 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(--navy); pointer-events:none;
  transform:translateY(calc(var(--head, 0px) - 6px));
  opacity:var(--headOn, 0);
  box-shadow:0 0 0 5px rgba(2,48,74,.14), 0 0 16px 2px rgba(2,48,74,.35);
  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{transform:scaleY(1)}

/* pontos: apagados por padrão, acendem quando a linha passa */
.timeline.js-on .tl-item::before{
  background:var(--white);
  border:2px solid var(--silver);
  box-shadow:0 0 0 4px var(--silver-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(--navy);
  border-color:var(--navy);
  transform:scale(1.18);
  box-shadow:0 0 0 5px var(--silver-100);
}
.tl-item h3{transition:color .6s var(--ease)}
.timeline.js-on .tl-item:not(.lit) h3{color:var(--silver)}
.tl-item:hover::before{transform:scale(1.3); box-shadow:0 0 0 7px var(--silver-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 o Dr. */
  .selo{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns: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}
  .contact-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr; gap:36px}
}

@media (max-width:820px){
  .nav{
    position:fixed; inset:68px 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(2,48,74,.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(--silver-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:88px}
  .header-inner{gap:8px; min-height:68px}

  /* ---- Hero centralizado no mobile ---- */
  .hero{
    text-align:center;
    display:block;
    align-items:flex-start;
    min-height:auto;
    /* A foto vertical entra pela base; o texto fica na parte de cima. */
    background-image:url('../assets/img/hero-mobile.jpg');
    background-position:center bottom;
    /* `cover` em vez de `100% auto`: em telas estreitas o texto fica mais alto
       que a proporção 1:2,5 da arte e sobrava faixa vazia no topo. Com cover
       ela sempre preenche — no máximo recorta alguns pixels das laterais. */
    background-size:cover;
    padding-bottom:calc(78vw + 40px);   /* espaço para o Dr. aparecer inteiro */
  }
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .hero .eyebrow{margin-bottom:16px}
  .hero .lead{margin-left:auto; margin-right:auto; max-width:100%}

  .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;
  }
  .selo::before{inset:9px}
  .selo-marca{width:21px}

}

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

  /* ---- Hero ---- */
  /* Arte 480×1200 (proporção 1:2,5). A altura do hero precisa bater com a
     altura renderizada da arte (= 250vw/2 = 125vw) para não cortar nem sobrar
     faixa vazia. O padding é o que resta depois do conteúdo. */
  .hero{padding:36px 0 129vw}
  .hero h1{font-size:clamp(1.75rem, 7.5vw, 2.3rem); line-height:1.16; margin-bottom:18px}
  .hero h1 em{font-size:1.08rem; margin-top:10px; line-height:1.35}
  .hero .eyebrow{
    font-size:.68rem; letter-spacing:.11em; line-height:1.8;
    max-width:26ch; margin-inline:auto;
  }
  .hero .lead{font-size:1.02rem; margin-bottom:28px}

  .cards, .cards-2{grid-template-columns:1fr}
  .card{padding:28px 22px}
  .split-media{margin-inline:auto}
  .step{padding:28px 22px}
  .sub-title{font-size:1.35rem}
  .stats-grid{grid-template-columns:1fr; gap:34px}
  .stat + .stat::before{display:none}
  .stat + .stat{padding-top:34px; border-top:1px solid rgba(255,255,255,.16)}
  .section-title{margin-bottom:40px}
  .sub-title{margin:60px 0 32px}
  .cta-row{margin-top:40px}
  .cta-row .btn{width:100%}
  .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 Dr. não encostar nele. */
@media (max-width:360px){
  .hero{padding-bottom:160vw}
}

/* =========================================================
   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 navy 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:120px}

  /* 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;
  }
  .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,.55fr) !important; position:relative; z-index:1}
  .hero h1{font-size:1.7rem}
  .hero h1 em{font-size:1rem; margin-top:6px}
  .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(--navy) !important;
    color:var(--navy) !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}
  .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(3,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}

  .stats{padding:22px 0}
  .stat strong{font-size:2rem}
  .stat, .tl-item{break-inside:avoid}

  /* 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(--navy); border-color:var(--navy)}
  .timeline.js-on .tl-item:not(.lit) h3{color:var(--navy)}
  .tl-head{display:none !important}

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