/* =========================================================
   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)
   ========================================================= */

/* =========================================================
   FONTES — auto-hospedadas, não vindas do Google
   Motivo: buscar no Google custava duas conexões extras
   (fonts.googleapis.com + fonts.gstatic.com) antes de qualquer
   texto aparecer, o que pesa justamente no celular em rede ruim.
   São os mesmos arquivos que o Google serviria, subconjunto latino —
   conferido que ele cobre os 83 caracteres usados na página.
   Cada arquivo é uma fonte VARIÁVEL: um só cobre 400→700.
   ========================================================= */
@font-face{
  font-family:'Playfair Display';
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url('playfair.woff2?v=202608271224') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic; font-weight:400 700; font-display:swap;
  src:url('playfair-italic.woff2?v=202608271224') format('woff2');
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url('sourcesans3.woff2?v=202608271224') format('woff2');
}

: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,
/* 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;
  /* O tamanho da Dra. é ditado pela ALTURA do hero, e a coluna de texto
     encolhe com a tela. Se a altura não acompanhar a largura, ela invade o
     texto nas telas médias — foi o que aconteceu duas vezes.
     Este `42vw` vale para TODAS as larguras de desktop, sem faixas: a
     proporção entre ela e o texto fica constante e não há salto em nenhum
     ponto de quebra. O valor vem da referência aprovada pelo cliente — ela
     preenche o hero (isso está na própria arte), então encurtar o hero a
     diminui junto e abre o vão até o texto.
     Se mexer aqui, remeça a folga entre ela e o texto. */
  min-height:clamp(430px, 42vw, 660px);
  display:flex; align-items:center;
  /* ATENÇÃO AO TAMANHO DO ARQUIVO: a CDN da Hostinger reprocessa e reduz
     qualquer imagem acima de 1600px de largura. Um hero de 3900px chegava ao
     visitante como 1600×386 — a figura da Dra. com 265px reais em vez de 647,
     visivelmente borrada. Por isso a arte tem 1250×690 e NÃO deve passar de
     1600: o que faltar de largura na tela é preenchido por esta cor, e não
     por mais arquivo.
     A arte veio pronta do cliente (`Artboard 1.png`, 1903×690) e passou por
     dois ajustes: cortada em 1250px (o trecho removido era só fundo, que esta
     cor repõe) e os últimos 300px dissolvidos nesta cor exata. Por isso não há
     emenda em largura nenhuma: onde a arte acaba, continua a mesma cor. */
  background-color:#F6E8E4;
  background-image:url('hero-desktop.jpg?v=202608271224');
  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.
     O deslize máximo é -60px: nesta arte ela já está posicionada com folga da
     borda (x=256 de 1500), então puxar demais a colaria na lateral.
     Ajuste junto se mexer na altura do hero ou na posição dela na arte. */
  background-position-x:clamp(-60px, (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.
   `.5fr` em todas as larguras: com `.56fr` o texto começava cedo demais e
   colidia com a Dra. nas telas médias. */
.hero-grid{display:grid; grid-template-columns:minmax(0,.5fr); 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}

/* O SELO GIRATÓRIO FOI REMOVIDO a pedido do cliente. Saiu por inteiro — CSS,
   marcação, JS de posicionamento e o arquivo `selo-anel.svg` — em vez de ser
   apenas escondido, para não deixar código e asset mortos no projeto.
   O padrão da agência prevê "sem selo" como variação legítima. */

/* ---------- Hierarquia do topo ----------
   A pedido da Dra.: o NOME é o elemento dominante, as credenciais vêm em
   seguida e a frase fica MENOR que elas. É uma inversão em relação ao padrão
   da agência (onde a frase é o título), então os três tamanhos são
   deliberados e precisam ser mexidos juntos:
        nome  >  credenciais  >  frase
   Se mexer em um, confira os outros dois — a ordem é o pedido dela. */
.hero-nome{
  font-family:var(--serif); font-weight:400;
  /* O mínimo é 1.8rem para "Dra. Lilian Ribeiro" caber em UMA linha a 320px —
     nome quebrado em duas linhas enfraquece o topo. */
  font-size:clamp(1.8rem, 8.5vw, 3.6rem); line-height:1.08;
  letter-spacing:-.015em; margin:0 0 14px;
}
.eyebrow{
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-size:clamp(1.08rem, 4vw, 1.35rem);
  /* ink-55 e não o rosa da marca: aqui moram CRM e RQE, que precisam ser lidos. */
  color:var(--ink-55); margin-bottom:20px;
}
.hero-frase{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(.94rem, 3.1vw, 1.1rem); line-height:1.5;
  /* Sem margem embaixo: a frase é o último elemento do bloco, e no mobile
     a folga até a cabeça da Dra. é dada pelo padding-bottom do hero. */
  color:var(--ink-70); max-width:34ch;
}
/* 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}

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

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

/* ---------- Entrada do topo: CSS puro, sem esperar o JavaScript ----------
   O hero está FORA do IntersectionObserver (ver o filtro no main.js?v=202608271224), porque
   o título é o conteúdo mais importante da página e não pode depender do
   script para ser pintado. Sem estas regras ele ficaria em opacity:0 para
   sempre. */
.hero .reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  animation:entrada-topo .55s var(--ease) forwards;
  /* ARMADILHA JÁ COMETIDA: `.reveal-soft` aplica `filter:blur(4px)` e
     `.reveal-mask` aplica `clip-path`, e os dois só eram limpos por
     `.reveal.is-visible` — classe que o hero não recebe mais. Sem zerar aqui,
     o olho-de-boi (que é `.reveal-soft`) fica borrado permanentemente. */
  filter:none;
  clip-path:none;
  transition:none;
}
.hero-copy > .reveal:nth-child(2){animation-delay:.07s}
.hero-copy > .reveal:nth-child(3){animation-delay:.14s}
.hero-copy > .reveal:nth-child(4){animation-delay:.21s}
@keyframes entrada-topo{ to{ opacity:1; transform:none } }

/* 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.
   ARMADILHA JÁ COMETIDA: `.hero-copy` TAMBÉM tem a classe `.reveal`. Se o
   contêiner animar junto com os filhos, as opacidades se multiplicam: no meio
   da transição o texto fica em 0,25 em vez de 0,5, aparece lavado e a entrada
   parece durar o dobro. Por isso ele precisa ficar neutro. */
.hero-copy.reveal{opacity:1; transform:none; transition:none; animation:none; filter:none; clip-path: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:1000px){
  /* ---- Hero EMPILHADO (arte embaixo, texto centralizado em cima) ----
     Vale a partir de 1000px, e não de 820 como na base. Motivo: abaixo de
     ~900px o hero para de encolher (o título e o botão têm altura mínima),
     mas a coluna de texto continua estreitando com a tela — e a Dra., que
     tem tamanho ditado pela altura do hero, passava por cima do texto.
     Empilhar resolve de vez: não existe mais colisão possível.
     O limite é 1000px porque abaixo disso o hero para de encolher (título
     e botão têm altura mínima) enquanto a coluna de texto continua
     estreitando: a 925px a Dra. já invadia o texto em 20px. Medido. */
  .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?v=202608271224');
    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:#F3DFDB;
    padding-bottom:calc(112.91vw + 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:1024px){
  .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}

  /* O header é fixo: o `backdrop-filter` é reprocessado a cada quadro de
     rolagem. Fundo sólido custa nada e em tela pequena a diferença é
     imperceptível. */
  .site-header{
    background:rgba(255,255,255,.97);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }

}

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

  /* ---- Hero ---- */
  /* Arte mobile: 793×2100 — fundo da marca com o recorte da Dra. composto na
     base, sangrando de leve nos dois lados (a figura tem 870px de largura).
     Arte do cliente (`Artboard 2.png`, 480×1200), ampliada para 860×2150
     porque o layout empilhado vai até 1024px e 480 ficava borrado no tablet.
     A conta que importa: a altura visível dela é 971px numa arte de 860px de
     largura, ou seja 971/860 = 112,91vw acima da base. Como a arte é escalada
     pela largura, isso não depende do tamanho do texto:
        folga = padding-bottom − 123,08vw
     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}
  /* Os tamanhos do topo já vêm de `clamp()` e se viram sozinhos aqui. NÃO
     reintroduza `font-size` para `.hero-nome`, `.eyebrow` ou `.hero-frase`
     neste bloco: era o que existia antes e derrubava as credenciais para
     baixo da frase, invertendo a hierarquia pedida pela Dra. */
  .hero .eyebrow{line-height:1.6; margin-inline:auto}
  .hero-frase{margin-inline:auto}

  .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}
  .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, .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}
  /* No papel a hierarquia é a mesma: nome > credenciais > frase. */
  .hero-nome{font-size:1.7rem; margin-bottom:8px}
  .hero .eyebrow{font-size:.85rem; margin-bottom:8px}
  .hero-frase{font-size:.8rem; margin:0 0 4px; max-width:100%}

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

  .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:""}
}