/* =========================================================
   Dra. Lilian Ribeiro — Neurologia Clínica · São Gotardo (MG)
   Paleta tirada da logo: #6D1837 (vinho) · #C3B8BC (rosa acinzentado)

   PELE DESTE PROJETO (o que muda em relação aos outros da base):
     · par tipográfico ... Playfair Display / Source Sans 3
     · paleta ........... vinho + rosa acinzentado + marfim
     · raio dos cantos .. 0 (tudo reto)
     · hero ............. espelhado — arte à esquerda, texto à direita
     · cards ............ fundo tonal com filete superior (sem borda completa)
     · faixa ............ serifa grande, alternando cheia e vazada

   DETALHE ASSINATURA: "cantos em L" — dois filetes curtos de 1px marcando
   o canto superior esquerdo e o inferior direito. Ecoa o L da marca e só
   funciona porque os cantos são retos. Repetido em: fotos, cards da seção
   escura, moldura do mapa e faixa de números.  (classe .cantos-l)
   ========================================================= */

:root{
  --vinho:#6D1837;
  --vinho-900:#4A0F25;
  --vinho-950:#380B1C;
  --vinho-700:#8A2249;
  --rosa:#C3B8BC;
  --rosa-100:#EFE7EA;
  --rosa-050:#FAF5F6;
  --ink:#171214;
  --ink-70:#4A4045;
  /* #6B5F65 dá 5,9:1 sobre branco. O rosa da marca (#C3B8BC) só chega a 2,1:1
     e por isso NUNCA carrega texto — fica restrito a filetes e separadores. */
  --ink-55:#6B5F65;
  --white:#FFFFFF;
  --line:#E7DCDF;

  --wa:#25D366;

  /* Playfair Display tem 700 real e itálico 700 real, necessários para o
     destaque do título — negrito sintético em serifa grande fica borrado. */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap:1180px;
  --r:0px;                    /* cantos retos: a pele deste projeto */
  --shadow:0 1px 2px rgba(109,24,55,.05), 0 12px 32px -12px rgba(109,24,55,.16);
  --shadow-lg:0 2px 4px rgba(109,24,55,.06), 0 28px 60px -22px rgba(109,24,55,.26);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:112px; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  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(--vinho); 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(--vinho); color:#fff; padding:12px 18px;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--vinho); outline-offset:3px}

/* =========================================================
   DETALHE ASSINATURA — cantos em L
   Dois filetes curtos marcando cantos opostos. Como os cantos do projeto
   são retos, o L "encaixa" na quina em vez de flutuar solto.
   ========================================================= */
.cantos-l{position:relative}
.cantos-l::before,
.cantos-l::after{
  content:''; position:absolute; width:26px; height:26px;
  pointer-events:none; z-index:2;
  transition:width .5s var(--ease), height .5s var(--ease), border-color .5s var(--ease);
}
.cantos-l::before{
  top:-1px; left:-1px;
  border-top:1px solid var(--vinho); border-left:1px solid var(--vinho);
}
.cantos-l::after{
  bottom:-1px; right:-1px;
  border-bottom:1px solid var(--vinho); border-right:1px solid var(--vinho);
}
/* Sobre fundo escuro o filete vinho some — vira rosa da marca. */
.section-dark .cantos-l::before,
.section-dark .cantos-l::after,
.stats .cantos-l::before,
.stats .cantos-l::after{border-color:rgba(195,184,188,.55)}
/* Os L crescem de leve quando o bloco entra em tela ou no hover. */
.cantos-l:hover::before,
.cantos-l:hover::after{width:38px; height:38px}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; border-radius:var(--r);
  padding:14px 30px; 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(--vinho); color:#fff; box-shadow:0 10px 24px -12px rgba(109,24,55,.65)}
.btn-primary:hover{background:var(--vinho-700); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(109,24,55,.7)}
.btn-light{background:#fff; color:var(--vinho)}
.btn-light:hover{background:var(--rosa-100); transform:translateY(-2px)}
.btn-lg{padding:17px 38px; font-size:.98rem}
.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(109,24,55,.5)}
.header-inner{display:flex; align-items:center; gap:28px; min-height:100px}
/* ATENÇÃO: esta logo é empilhada (ícone sobre o nome), 378×248 — bem mais alta
   em relação à largura que a da base. Por isso ela é dimensionada pela ALTURA,
   e não pela largura: definindo largura, ela estoura o header e encosta nas
   bordas. Mantenha ~17px de folga entre a altura da logo e a do header. */
.brand img{height:66px; width:auto}
.nav{margin-left:auto; display:flex; gap:30px}
.nav a{
  position:relative; text-decoration:none; font-size:.93rem; 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:1px;
  background:var(--vinho); transition:width .3s var(--ease);
}
.nav a:hover{color:var(--vinho)}
.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:1.5px; background:var(--vinho); margin:5px 0; transition:transform .3s var(--ease), opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Hero (espelhado: arte à ESQUERDA, texto à DIREITA) ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:92px 0 108px;
  min-height:clamp(500px, 38vw, 650px);
  display:flex; align-items:center;
  /* A arte de origem (1672×941) foi preparada em três passos: 140px cortados
     da ESQUERDA (afasta a Dra. do texto sem encolhê-la — somar respiro no
     topo também resolvia a sobreposição, mas deixava a Dra. menor e mais
     baixa), extensão do fundo à direita até 3700×941, e os últimos 800px
     dissolvidos nesta cor exata. Por isso não há emenda em largura nenhuma:
     onde a arte acaba, continua a mesma cor. Se a arte for reexportada,
     refazer os três passos e reamostrar esta cor. */
  background-color:#F6E8E4;
  background-image:url('hero-desktop.jpg');
  background-repeat:no-repeat;
  /* A posição da Dra. depende só da ALTURA do hero (é assim que ela não fica
     gigante em monitor largo), mas o texto se afasta conforme a tela cresce.
     Resultado: numa tela de 1900px sobrava um vão enorme entre os dois e ela
     parecia jogada no canto.
     A arte tem 75px de fundo sobrando à esquerda justamente para deslizar:
     em tela estreita puxamos 153px para a esquerda (ela encosta na borda,
     que é onde tem que ficar porque o texto está logo ao lado), e a partir
     de 1750px o deslize chega a zero e ela vai para o centro do vão.
     Ajuste o -153px junto se mexer na altura do hero. */
  background-position-x:clamp(-153px, (100vw - 1750px) * 0.325, 0px);
  background-position-y:center;
  /* `auto 100%`: a arte entra inteira, na altura exata do hero e ancorada à
     esquerda. Nada de corte nem de deformação — o tamanho da Dra. passa a ser
     ditado pela altura do hero, não pela largura da tela (que com `cover`
     deixaria ela gigante em monitores largos). Alargar a arte NÃO aumenta a
     Dra.: só acrescenta fundo à direita. */
  background-size:auto 100%;
}
/* A coluna de texto ocupa a metade direita — a esquerda fica livre para a arte. */
.hero-grid{display:grid; grid-template-columns:minmax(0,.56fr); justify-content:end}
.hero .lead{max-width:46ch}

.hero-arte-print{display:none}

/* Placeholder da arte do topo. Não está mais em uso — a arte chegou — mas
   fica aqui caso alguém precise tirar a imagem temporariamente. */
.hero.sem-arte{background-image:none}
.hero-ph{
  position:absolute; left:4%; top:50%; transform:translateY(-50%);
  width:min(38%, 420px); aspect-ratio:1/1.25;
  border:1px dashed var(--rosa);
  background:repeating-linear-gradient(45deg, rgba(195,184,188,.10) 0 12px, rgba(195,184,188,.20) 12px 24px);
  display:grid; place-items:center; text-align:center; padding:24px;
  color:var(--vinho); font-size:.86rem; font-weight:600; line-height:1.5;
}
.hero-ph small{display:block; margin-top:8px; font-weight:400; color:var(--ink-55)}
.hero:not(.sem-arte) .hero-ph{display:none}

/* ---------- Selo giratório ---------- */
.selo{
  position:absolute; z-index:3;
  /* A posição horizontal é calculada no JS (posicionarSelo), porque depende
     de onde a arte renderiza a Dra., que varia com a largura da tela. */
  left:0; top:64%; transform:translateY(-50%);
  width:154px; height:154px;
  display:grid; place-items:center;
  border-radius:50%;
  /* Invertido em relação à base: disco claro com anel vinho, para não pesar
     sobre a arte e conversar com o marfim do fundo. */
  background:rgba(255,253,253,.95);
  border:1px solid rgba(109,24,55,.22);
  box-shadow:0 18px 44px -20px rgba(109,24,55,.5);
  /* 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(195,184,188,.75);
}
.selo-anel{
  position:absolute; inset:0; width:100%; height:100%;
  animation:selo-girar 26s linear infinite;
}
.selo-marca{width:40px; 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 dela. 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:600; letter-spacing:.18em; text-transform:uppercase;
  /* ink-55 e não o rosa da marca: aqui moram CRM e RQE, que precisam ser lidos. */
  color:var(--ink-55); margin-bottom:24px;
}
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.15rem, 3.5vw, 2.95rem); line-height:1.16;
  letter-spacing:-.015em; margin-bottom:26px;
}
/* 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ã na linha. */
  display:inline;
  font-style:italic;
  font-weight:700;      /* peso real do Playfair Display, não negrito sintético */
  color:var(--vinho);   /* 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(--vinho) 0%,
    var(--vinho) 26%,
    #97325A 40%,
    #B75C7E 50%,
    #97325A 60%,
    var(--vinho) 74%,
    var(--vinho) 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:36px}

/* O botão é inline-flex e, alinhado pela linha de base, ficava 26px mais
   baixo que a caixa de conteúdo do hero — a folga até a cabeça da Dra. no
   mobile saía menor do que a conta previa. Com `top` a linha cresce para
   contê-lo e o hero passa a medir o que realmente ocupa. */
.hero .btn{vertical-align:top}

/* placeholders de foto */
.photo-ph{
  position:relative; width:100%;
  background:
    repeating-linear-gradient(45deg, rgba(195,184,188,.10) 0 12px, rgba(195,184,188,.20) 12px 24px);
  border:1px dashed var(--rosa);
  display:grid; place-items:center; text-align:center; padding:20px;
  color:var(--vinho); 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}
.ph-tall{aspect-ratio:4/5}

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

/* ---------- Faixa rolante (serifa grande, cheia e vazada) ---------- */
.faixa{
  overflow:hidden;
  background:var(--vinho-900);
  padding:18px 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(--serif);
  font-size:1.6rem;
  font-weight:400;
  font-style:italic;
  letter-spacing:.005em;
  line-height:1.4;
  white-space:nowrap;
  padding:0 22px;
  color:rgba(255,255,255,.92);
}
/* Aqui o contorno vazado funciona porque o corpo é grande — no tamanho
   pequeno da base ele ficava sujo e virava opacidade. */
.faixa-item.vazado{
  color:transparent;
  -webkit-text-stroke:1px rgba(195,184,188,.75);
  font-style:normal;
  font-size:1.5rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

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

@media (prefers-reduced-motion:reduce){
  .faixa-trilho{transform:none !important}
}
@media (max-width:640px){
  .faixa{padding:13px 0}
  .faixa-item{font-size:1.12rem; padding:0 16px}
  .faixa-item.vazado{font-size:1.02rem; -webkit-text-stroke-width:.8px}
  .faixa-marca{width:15px}
}

/* ---------- Números ---------- */
.stats{background:var(--vinho); color:#fff; padding:64px 0}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; padding:34px 24px}
.stat{position:relative}
.stat + .stat::before{
  content:''; position:absolute; left:0; top:14%; height:72%; width:1px;
  background:rgba(255,255,255,.2);
}
.stat strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.5rem,4.8vw,3.5rem); line-height:1; color:#fff;
}
.stat span{
  display:block; margin-top:12px; font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78);
}

/* ---------- Seções ---------- */
.section{padding:112px 0; overflow-x:clip}
.section-alt{background:var(--rosa-050)}
.section-dark{
  background:linear-gradient(175deg, var(--vinho-900) 0%, var(--vinho-950) 100%);
  color:rgba(255,255,255,.8);
}
.section-dark h2,.section-dark h3{color:#fff}

.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.95rem, 3.3vw, 2.75rem); line-height:1.18;
  max-width:24ch; margin:0 auto 58px; text-align:center;
}
.section-title.left{text-align:left; margin:0 0 26px; 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}

/* ---------- Cards (fundo tonal + filete superior, sem borda completa) ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{
  position:relative; background:var(--rosa-050); border:0;
  border-top:2px solid var(--vinho);
  border-radius:var(--r); padding:34px 30px 32px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); background:#fff}
.card h3{font-size:1.1rem; font-weight:600; margin-bottom:12px; line-height:1.32}
.card p{margin:0; font-size:.98rem; color:var(--ink-70)}
/* Em section-alt o card inverte: fundo branco sobre o tonal. */
.section-alt .card{background:#fff}
.section-alt .card:hover{background:var(--white); box-shadow:var(--shadow-lg)}

/* O ✅ / ✔ da copy, redesenhado: traço fino em quadrado reto. */
.card-mark, .card-check::before{
  display:block; width:32px; height:32px; margin-bottom:20px; border-radius:0;
  background:var(--rosa-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D1837' stroke-width='1.9' 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:18px;
}
.card-check::before{content:''}

/* Cards sobre a seção escura ("Outras condições que trato") */
.cards-dark .card{
  background:rgba(255,255,255,.04);
  border-top-color:rgba(195,184,188,.6);
}
.cards-dark .card:hover{background:rgba(255,255,255,.08); box-shadow:none}
.cards-dark .card h3{color:#fff}
.cards-dark .card p{color:rgba(255,255,255,.76)}

/* ---------- 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(--rosa); opacity:.5;
}
.tl-item{position:relative; padding-bottom:36px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:''; position:absolute; left:-30px; top:9px; width:12px; height:12px;
  background:var(--vinho); box-shadow:0 0 0 4px var(--rosa-100);
}
.tl-item h3{font-size:1.04rem; margin-bottom:8px}
.tl-item p{margin:0; font-size:.97rem}

/* ---------- Instagram (bloco pronto; hoje comentado no HTML) ---------- */
.insta-inner{text-align:center; max-width:640px}
.insta-icon{width:42px; height:42px; margin:0 auto 18px; fill:var(--vinho); animation:float-y 4.5s ease-in-out infinite}
@keyframes float-y{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-7px)}
}
.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:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-55); margin-bottom:8px;
}
.info-block p{margin:0; font-size:1.06rem; color:var(--vinho); 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; border:1px solid var(--line)}
.contact-map iframe{width:100%; height:400px; border:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--vinho-950); color:rgba(255,255,255,.68); padding:76px 0 28px; font-size:.94rem}
.footer-inner{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px}
/* Pela altura, como no header — a logo é empilhada e alta. */
.footer-brand img{height:96px; width:auto; margin-bottom:22px}
/* A logo é vinho/rosa; no rodapé escuro ela vira branca. */
.logo-invertida{filter:brightness(0) invert(1); opacity:.92}
.site-footer h4{color:#fff; font-size:.76rem; letter-spacing:.16em; 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;
  /* .36 (valor da base) dava só 3,2:1 sobre este vinho, que é mais escuro
     que o navy do projeto de referência. .52 põe em 4,9:1. */
  color:rgba(255,255,255,.52);
}
.assinatura a{
  color:rgba(255,255,255,.76); 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(--vinho), var(--rosa));
  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:-20px;
  width:64px; height:1px; margin-left:-32px;
  background:var(--vinho); 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(--rosa)}

/* 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(195,184,188,.26) 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.08) rotate(-5deg); background-color:var(--vinho)}
.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='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Nos cards da seção escura o ::after vira o canto em L de baixo (o brilho
   quase não aparece sobre vinho escuro, então o slot é melhor aproveitado). */
.cards-dark .card{overflow:visible}
.cards-dark .card::after{
  inset:auto; background:none; transform:none;
  bottom:-1px; right:-1px; width:26px; height:26px;
  border-bottom:1px solid rgba(195,184,188,.55);
  border-right:1px solid rgba(195,184,188,.55);
  transition:width .5s var(--ease), height .5s var(--ease);
}
.cards-dark .card:hover::after{transform:none; width:38px; height:38px}

/* 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(109,24,55,.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(--vinho) 0%, var(--vinho) 62%, #A94268 88%, var(--rosa) 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;
  background:var(--vinho); pointer-events:none;
  transform:translateY(calc(var(--head, 0px) - 6px));
  opacity:var(--headOn, 0);
  box-shadow:0 0 0 5px rgba(109,24,55,.14), 0 0 16px 2px rgba(109,24,55,.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{clip-path:none}

/* pontos: apagados por padrão, acendem quando a linha passa */
.timeline.js-on .tl-item::before{
  background:var(--white);
  border:1.5px solid var(--rosa);
  box-shadow:0 0 0 4px var(--rosa-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(--vinho);
  border-color:var(--vinho);
  transform:scale(1.18);
  box-shadow:0 0 0 5px var(--rosa-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(--rosa-100)}

/* Fotos: leve parallax + zoom no hover.
   Diferente da base, o parallax fica no CONTÊINER e não na foto: os cantos
   em L são pseudo-elementos de .split-media e precisam subir e descer junto
   com a imagem, senão a moldura descola dela ao rolar. */
.split-media{
  will-change:transform;
  transform:translate3d(0, var(--py, 0px), 0);
  transition:transform .5s var(--ease);
}
.photo-ph, .split-media .foto{
  transform: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}

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

@media (max-width:820px){
  .nav{
    /* o topo tem que bater com o min-height do .header-inner logo abaixo */
    position:fixed; inset:76px 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(109,24,55,.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(--rosa-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:.78rem; letter-spacing:.04em;
    white-space:nowrap;              /* nunca quebrar em duas linhas */
  }
  .brand{margin-right:auto}
  /* Também pela altura, pelo mesmo motivo do desktop. */
  .brand img{height:52px}
  .header-inner{gap:8px; min-height:76px}

  /* ---- 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;
    /* `100% auto` (e não `cover`): a arte é sempre escalada pela LARGURA, na
       proporção natural. Duas consequências que importam:
         · a Dra. nunca muda de tamanho nem é recortada nas laterais;
         · a folga entre o botão e a cabeça dela passa a depender só do
           padding — e não de quantas linhas o título ocupa, que é o que
           quebrava em telas estreitas.
       O que sobra acima da arte é preenchido pela background-color, e não
       aparece emenda porque o topo do arquivo foi achatado exatamente
       nesta cor. */
    background-size:100% auto;
    background-color:#F8E8E4;
    padding-bottom:calc(122.82vw + 48px);
  }
  .hero.sem-arte{background-image:none; padding-bottom:40px}
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:0; justify-content:stretch}
  .hero .eyebrow{margin-bottom:16px}
  .hero .lead{margin-left:auto; margin-right:auto; max-width:100%}
  .hero-ph{
    position:static; transform:none; width:min(88%,340px);
    margin:36px auto 0; aspect-ratio:1/1.6;
  }
}

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

  /* ---- Hero ---- */
  /* Arte mobile: 793×2783 (1:3,5095) — é a foto original 793×1983 com 800px
     de cor chapada acrescentados no topo, justamente para caber texto acima
     dela sem apertar a Dra.
     O topo da cabeça está a 65,00% da altura do arquivo, ou seja, a
     (1−0,65)×3,5095 = 122,82vw acima da base. Como a arte é escalada pela
     largura, a conta é direta e não depende do tamanho do texto:
        folga = padding-bottom − 122,82vw
     Daí o `calc(122.82vw + 48px)` na regra de 820px: 48px de folga em
     qualquer largura. MEDIDO no navegador, não estimado.
     ATENÇÃO: se a arte for reexportada, remedir a altura da cabeça e refazer
     os dois números juntos. */
  .hero{padding-top:36px}
  .hero.sem-arte{padding-bottom:36px}
  .hero h1{font-size:clamp(1.72rem, 7.4vw, 2.25rem); line-height:1.2; margin-bottom:18px}
  .hero .eyebrow{
    font-size:.66rem; letter-spacing:.12em; line-height:1.8;
    max-width:28ch; 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}
  .sub-title{font-size:1.35rem; margin:60px 0 32px}
  .stats{padding:44px 0}
  .stats-grid{grid-template-columns:1fr; gap:34px; padding:30px 20px}
  .stat + .stat::before{display:none}
  .stat + .stat{padding-top:34px; border-top:1px solid rgba(255,255,255,.18)}
  .section-title{margin-bottom:42px}
  .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}
  /* Os cantos em L encolhem junto com o resto — inclusive o dos cards da
     seção escura, que usa o ::after e não a classe .cantos-l. */
  .cantos-l::before,.cantos-l::after,
  .cards-dark .card::after{width:20px; height:20px}
}

/* A base tinha aqui uma exceção para telas abaixo de 360px, porque com
   `cover` o texto mais longo empurrava o botão para cima da cabeça. Não é
   mais necessária: com `background-size:100% auto` a folga vem só do
   padding e vale igual em qualquer largura. Conferido em 320px. */

/* =========================================================
   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 vinho 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:74px}
  .brand img{height:52px}   /* pela altura, como na tela */

  /* Topo compacto, com a arte de desktop ancorada à esquerda */
  .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; left:0; top:0;
    height:100%; width:auto; max-width:none;
  }
  .hero.sem-arte .hero-arte-print{display:none !important}
  .hero-ph, .photo-ph{border-color:#bbb}
  .hero-grid{grid-template-columns:minmax(0,.55fr) !important; justify-content:end; position:relative; z-index:1}
  .hero h1{font-size:1.7rem}
  .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(--vinho) !important;
    color:var(--vinho) !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}

  .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{padding:18px 12px}
  .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(--vinho); border-color:var(--vinho)}
  .timeline.js-on .tl-item:not(.lit) h3{color:var(--vinho)}
  .tl-head{display:none !important}

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