/* =========================================================
   Dr. Germano Jatobá — Cirurgia Geral em Arapiraca
   Paleta da marca: #136FB5 (azul) · #5B6770 (ardósia)
   Base estrutural e de animação herdada do padrão Dokta.
   ========================================================= */

:root{
  --azul:#136FB5;
  --azul-900:#0C4E80;
  --azul-700:#1A82CF;
  --azul-claro:#8DC8EE;
  --ardosia:#5B6770;
  --carvao:#2A3942;        /* seção escura, hero, rodapé */
  --carvao-900:#1E2A31;
  --gelo:#F1F4F6;          /* section-alt */
  --gelo-100:#E3E8EB;
  --tinta:#1E2A31;
  --tinta-70:#4A555D;
  --tinta-55:#6B767E;
  --white:#FFFFFF;
  --linha:#DDE3E7;

  --wa:#25D366;

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

  --wrap:1180px;
  --r:8px;
  --shadow:0 1px 2px rgba(42,57,66,.05), 0 14px 34px -14px rgba(42,57,66,.20);
  --shadow-lg:0 2px 6px rgba(42,57,66,.07), 0 30px 64px -24px rgba(42,57,66,.32);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* --- Detalhe assinatura: o G da marca cortando as linhas --- */
  --marca:url('marca.svg');
}

*,*::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(--tinta-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(--carvao); margin:0 0 .5em; line-height:1.2; 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(--azul); color:#fff; padding:12px 18px; border-radius:0 0 var(--r) 0;
}
.skip-link:focus{left:0}

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

/* ---------- Botões (retangulares, canto 8px) ---------- */
.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:var(--r);
  padding:14px 28px; 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(--azul); color:#fff; box-shadow:0 12px 26px -14px rgba(19,111,181,.85)}
.btn-primary:hover{background:var(--azul-900); transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(19,111,181,.9)}
.btn-light{background:#fff; color:var(--azul-900)}
.btn-light:hover{background:var(--gelo); transform:translateY(-2px)}
.btn-lg{padding:17px 36px; 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(--linha); box-shadow:0 6px 24px -18px rgba(42,57,66,.5)}
.header-inner{display:flex; align-items:center; gap:28px; min-height:80px}
.brand img{width:172px; height:auto}
.nav{margin-left:auto; display:flex; gap:28px}
.nav a{
  position:relative; text-decoration:none; font-size:.92rem; font-weight:500;
  color:var(--tinta-70); padding:6px 0; transition:color .2s var(--ease);
}
/* Assinatura (1/5): o sublinhado do menu abre um vão no meio e o G ocupa o vão. */
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:
    linear-gradient(90deg, var(--azul) 0 calc(50% - 8px), transparent calc(50% - 8px) calc(50% + 8px), var(--azul) calc(50% + 8px) 100%);
  transition:width .3s var(--ease);
}
.nav a::before{
  content:''; position:absolute; left:50%; bottom:-3px; width:8px; height:10px;
  margin-left:-4px; opacity:0;
  background:var(--marca) center/contain no-repeat;
  transition:opacity .3s var(--ease) .12s;
}
.nav a:hover{color:var(--azul-900)}
.nav a:hover::after{width:100%}
.nav a:hover::before{opacity:1}

.nav-toggle{display:none; background:none; border:0; padding:10px; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--carvao); 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 (escuro) ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 108px;
  min-height:clamp(520px, 39vw, 660px);
  display:flex; align-items:center;
  color:rgba(255,255,255,.82);
  /* Mesma cor chapada do canto esquerdo da arte, para não haver emenda em
     telas muito largas. */
  background-color:#1B2831;
  background-image:
    radial-gradient(900px 560px at 6% 20%, rgba(19,111,181,.22), transparent 64%),
    url('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 deformação — o tamanho do Dr. passa a ser
     ditado pela altura do hero, e não pela largura da tela (que com `cover`
     o deixava gigante em monitores largos). */
  background-size:auto, auto 100%;
}
/* 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}
.hero .lead{max-width:46ch; color:rgba(255,255,255,.8)}
.hero h1{color:#fff}

.hero-arte-print{display:none}

.hero-nota{
  margin:18px 0 0; font-size:.8rem; letter-spacing:.02em;
  color:rgba(255,255,255,.55);
}

/* ---------- 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:60%; transform:translateY(-50%);
  width:150px; height:150px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(19,111,181,.94);
  box-shadow:0 18px 46px -16px rgba(0,0,0,.65);
  /* 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(255,255,255,.34);
}
.selo-anel{
  position:absolute; inset:0; width:100%; height:100%;
  animation:selo-girar 24s linear infinite;
}
.selo-marca{width:30px; 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(--azul-claro); margin-bottom:22px;
}
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.25rem, 3.8vw, 3.05rem); line-height:1.14;
  letter-spacing:-.012em; 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 uma palavra órfã. */
  display:inline;
  font-style:italic;
  font-weight:700;                    /* peso real do Spectral */
  color:var(--azul-claro);            /* 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(--azul-claro) 0%,
    var(--azul-claro) 26%,
    #B9E0F7 40%,
    #FFFFFF 50%,
    #B9E0F7 60%,
    var(--azul-claro) 74%,
    var(--azul-claro) 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.35rem, 2.1vw, 1.72rem); color:rgba(255,255,255,.62);
}
.lead{font-size:1.13rem; max-width:58ch; margin-bottom:32px}

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

/* ---------- Faixa rolante (clara, para não fundir com o hero escuro) ---------- */
.faixa{
  overflow:hidden;
  background:var(--gelo);
  border-bottom:1px solid var(--linha);
  padding:13px 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:600;
  letter-spacing:.19em; text-transform:uppercase; line-height:1.6;
  white-space:nowrap; padding:0 18px; color:var(--ardosia);
}
/* Alternância de peso visual — mantém o ritmo sem engrossar a faixa. */
.faixa-item.vazado{color:rgba(91,103,112,.45)}
/* Assinatura (2/5): a marca separa os itens da faixa. */
.faixa-marca{flex:0 0 auto; width:11px; height:auto; opacity:.75}

@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:9px}
}

/* ---------- Números ---------- */
.stats{background:var(--azul); color:#fff; padding:54px 0}
.stats-grid{display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:24px; text-align:center}
/* Páginas de campanha: os três itens são números, então as colunas são iguais.
   (Na página principal o terceiro item é uma frase e pede mais largura.) */
.stats-3{grid-template-columns:repeat(3,1fr)}
.stat{position:relative}
.stat + .stat::before{
  content:''; position:absolute; left:0; top:12%; height:76%; width:1px;
  /* Assinatura (3/5): o divisor vertical abre um vão e o G ocupa o vão. */
  background:linear-gradient(180deg,
    rgba(255,255,255,.28) 0 calc(50% - 13px),
    transparent calc(50% - 13px) calc(50% + 13px),
    rgba(255,255,255,.28) calc(50% + 13px) 100%);
}
.stat + .stat::after{
  content:''; position:absolute; left:-6px; top:50%; margin-top:-8px;
  width:13px; height:16px; opacity:.85;
  background:var(--marca) center/contain no-repeat;
  filter:brightness(0) invert(1);
}
.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;
  font-variant-numeric:tabular-nums;
}
.stat span{
  display:block; margin-top:10px; font-size:.85rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8);
}
/* O terceiro item da copy não é número, é uma frase. */
.stat-texto strong{
  font-size:clamp(1.05rem,1.6vw,1.24rem); line-height:1.35; font-style:italic;
  max-width:26ch; margin-inline:auto;
}

/* ---------- Seções ---------- */
.section{padding:112px 0; overflow-x:clip}
.section-alt{background:var(--gelo)}
.section-dark{
  position:relative; color:rgba(255,255,255,.78);
  background:var(--carvao);
}
/* Seção escura com foto de fundo (centro cirúrgico) sob sobreposição sólida. */
.section-dark::before{
  content:''; position:absolute; inset:0;
  background:url('cirurgia.jpg') center/cover no-repeat;
  opacity:.13;
}
.section-dark::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,42,49,.55), rgba(30,42,49,.9));
}
.section-dark > *{position:relative; z-index:1}
.section-dark h2,.section-dark h3{color:#fff}

.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 3.3vw, 2.75rem); line-height:1.18;
  max-width:30ch; margin:0 auto 60px; text-align:center;
}
.section-title.left{text-align:left; margin:0 0 46px; max-width:26ch}
.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}
.fecho{
  max-width:62ch; margin:44px auto 0; text-align:center;
  font-family:var(--serif); font-size:1.1rem; font-style:italic;
  color:rgba(255,255,255,.82);
}

/* ---------- Cards (brancos, sem borda, elevados) ---------- */
.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:0;
  border-radius:var(--r); padding:34px 30px 32px;
  box-shadow:0 1px 2px rgba(42,57,66,.06), 0 10px 26px -18px rgba(42,57,66,.35);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card h3{font-size:1.09rem; font-weight:600; margin-bottom:12px; line-height:1.32}
.card p{margin:0; font-size:.97rem; color:var(--tinta-70)}

.card-mark, .card-check::before{
  display:block; width:34px; height:34px; margin-bottom:18px; border-radius:6px;
  background-color:rgba(19,111,181,.1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23136FB5' 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:''}

/* Cards sobre o fundo escuro */
.cards-dark .card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:none;
  backdrop-filter:blur(2px);
}
.cards-dark .card:hover{background:rgba(255,255,255,.09); 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,.76)}
.cards-dark .card-mark{
  background-color:rgba(255,255,255,.14);
  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:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23136FB5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Lista de benefícios em coluna (seção "Recebeu uma indicação…") */
.beneficios{display:grid; gap:18px}
.beneficios .card{padding:26px 26px 24px}
/* A coluna dos benefícios é bem mais alta que a foto: sem isso sobraria um
   vazio grande à esquerda. A foto acompanha a leitura em vez de ficar
   centralizada no meio do vão. */
@media (min-width:1025px){
  #avaliacao .split{align-items:start}
  #avaliacao .split-media{position:sticky; top:112px}
}

/* ---------- 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}

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

/* ---------- Contato ---------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start}
.info-block{position:relative; padding:22px 0; border-bottom:1px solid var(--linha)}
.info-block:first-child{padding-top:0}
/* Assinatura (4/5): o G corta a linha que separa os blocos de contato. */
.info-block::after{
  content:''; position:absolute; left:0; bottom:-8px; width:13px; height:16px;
  background:var(--marca) center/contain no-repeat;
  background-color:var(--gelo); padding:0 6px 0 0;
}
.info-block:last-child{border-bottom:0}
.info-block:last-child::after{display:none}
.info-block h3{
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ardosia); margin-bottom:8px;
}
.info-block p{margin:0; font-size:1.05rem; color:var(--carvao); 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(--linha)}
.contact-map iframe{width:100%; height:400px; border:0}

/* ---------- Rodapé ---------- */
.site-footer{background:var(--carvao-900); color:rgba(255,255,255,.66); padding:74px 0 28px; font-size:.94rem}
.footer-inner{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px}
.footer-brand img{width:210px; height:auto; margin-bottom:20px}
.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{
  position:relative;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:56px; padding-top:26px;
  /* Assinatura (5/5): o divisor do rodapé abre um vão e o G ocupa o vão. */
  border-top:1px solid transparent;
  background:linear-gradient(90deg,
    rgba(255,255,255,.14) 0 calc(50% - 14px),
    transparent calc(50% - 14px) calc(50% + 14px),
    rgba(255,255,255,.14) calc(50% + 14px) 100%) top/100% 1px no-repeat;
  font-size:.84rem; color:rgba(255,255,255,.5);
}
.footer-bottom::before{
  content:''; position:absolute; left:50%; top:-8px; margin-left:-7px;
  width:14px; height:17px; opacity:.6;
  background:var(--marca) center/contain no-repeat;
  filter:brightness(0) invert(1);
}
.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
   ========================================================= */

.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(--azul), var(--azul-claro));
  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)}

/* Assinatura no traço do título: a linha se desenha com um vão no meio e o G
   entra no vão logo depois. */
.section-title{position:relative}
.section-title::after{
  content:''; position:absolute; left:50%; bottom:-20px;
  width:140px; height:2px; margin-left:-70px;
  background:linear-gradient(90deg,
    var(--azul) 0 calc(50% - 13px),
    transparent calc(50% - 13px) calc(50% + 13px),
    var(--azul) calc(50% + 13px) 100%);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .8s var(--ease) .25s;
}
.section-title::before{
  content:''; position:absolute; left:50%; bottom:-28px; margin-left:-7px;
  width:14px; height:17px; opacity:0;
  background:var(--marca) center/contain no-repeat;
  transition:opacity .5s var(--ease) .75s;
}
.section-title.left::after{left:0; margin-left:0; transform-origin:0 50%}
.section-title.left::before{left:57px; margin-left:0}
.section-title.is-visible::after{transform:scaleX(1)}
.section-title.is-visible::before{opacity:1}
.section-dark .section-title::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.6) 0 calc(50% - 13px),
    transparent calc(50% - 13px) calc(50% + 13px),
    rgba(255,255,255,.6) calc(50% + 13px) 100%);
}
.section-dark .section-title::before{filter:brightness(0) invert(1); opacity:0}
.section-dark .section-title.is-visible::before{opacity:.85}

/* 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(19,111,181,.13) 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(--azul)}
.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(19,111,181,.14), transparent 62%)}

/* ---------- Timeline: linha que se preenche com a rolagem ---------- */
/* 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(--azul) 0%, var(--azul) 62%, var(--azul-700) 88%, var(--azul-claro) 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 */
}
.timeline .tl-head{
  position:absolute; left:0; top:8px; width:12px; height:12px; border-radius:50%;
  background:var(--azul); pointer-events:none;
  transform:translateY(calc(var(--head, 0px) - 6px));
  opacity:var(--headOn, 0);
  box-shadow:0 0 0 5px rgba(19,111,181,.16), 0 0 16px 2px rgba(19,111,181,.38);
  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}

.timeline.js-on .tl-item::before{
  background:var(--white); border:2px solid var(--ardosia);
  box-shadow:0 0 0 4px var(--gelo);
  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(--azul); border-color:var(--azul);
  transform:scale(1.18); box-shadow:0 0 0 5px var(--gelo-100);
}
.tl-item h3{transition:color .6s var(--ease)}
.timeline.js-on .tl-item:not(.lit) h3{color:var(--tinta-55)}
.tl-item:hover::before{transform:scale(1.3); box-shadow:0 0 0 7px var(--gelo-100)}

/* Fotos: leve parallax + zoom no hover */
.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 .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}

/* 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}
  .section-title::before{opacity:1 !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)}
  .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}
  .stats-grid{grid-template-columns:1fr 1fr; gap:34px 24px}
  .stats-3{grid-template-columns:repeat(3,1fr); gap:24px}
  .stat-texto{grid-column:1 / -1}
  .stat-texto::before, .stat-texto::after{display:none}
  .stat-texto{padding-top:30px; border-top:1px solid rgba(255,255,255,.22)}
}

@media (max-width:820px){
  /* Sem menu no mobile: a barra fica só com a logo e o botão, que é o que
     importa numa tela estreita. Os mesmos âncoras continuam no rodapé, em
     "Navegue", então nenhuma seção fica inacessível. */
  .nav, .nav-toggle{display:none}
  .header-cta{
    margin-left:auto;
    padding:12px 20px; font-size:.86rem;
    white-space:nowrap;              /* nunca quebrar em duas linhas */
  }
  .brand{margin-right:auto}
  .brand img{width:152px}
  .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 arte vertical entra pela base; o texto fica na parte de cima. */
    background-image:url('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);
  }
  .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%}
}

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

  /* 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. */
  /* Arte 480×1200 (proporção 1:2,5), com o topo da cabeça a ~53% da altura.
     Esse padding é o que garante a folga entre a nota "*Apenas consultas
     particulares" e a cabeça do Dr. (medido: ~45px em 375px de largura).
     Se a proporção OU a posição da cabeça na arte mudar, este número muda
     junto — recalcule medindo, não chute. */
  .hero{padding:36px 0 124vw}
  .hero h1{font-size:clamp(1.72rem, 7.4vw, 2.3rem); line-height:1.18; margin-bottom:18px}
  .hero h1 em{font-size:1.06rem; 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:26px}

  .cards, .cards-2{grid-template-columns:1fr}
  .card{padding:28px 22px}
  .split-media{margin-inline:auto}
  .sub-title{font-size:1.35rem; margin:60px 0 32px}
  .stats-grid{grid-template-columns:1fr; gap:34px}
  .stat + .stat::before, .stat + .stat::after{display:none}
  .stat + .stat{padding-top:34px; border-top:1px solid rgba(255,255,255,.22)}
  .section-title{margin-bottom:44px}
  .cta-row{margin-top:40px}
  .cta-row .btn{width:100%}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; gap:6px; text-align:center}
  .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:152vw}
}

/* =========================================================
   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;
  }

  .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(--linha)}
  .header-inner{min-height:64px}
  .brand img{width:180px}

  /* 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 */
    background-color:#1B2831 !important;
    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 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(--azul-claro) !important;
    color:var(--azul-claro) !important;
  }

  .section{padding:34px 0 !important}
  .section-dark::before{opacity:.1}
  .section-title{font-size:1.5rem; margin-bottom:30px; 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, .beneficios{grid-template-columns:repeat(2,1fr) !important; display:grid}
  .card{padding:16px 18px; break-inside:avoid}
  .card h3{font-size:.95rem}
  .card p{font-size:.82rem}

  .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}
  .stats-grid{grid-template-columns:1fr 1fr 1.35fr !important}
  .stat strong{font-size:2rem}
  .stat-texto strong{font-size:1rem}
  .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(--azul); border-color:var(--azul)}
  .timeline.js-on .tl-item:not(.lit) h3{color:var(--carvao)}
  .tl-head{display:none !important}

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