/* ==========================================================================
   Vanessa Klockner — Hipnoterapia
   Design system: design-system-vanessa.md
   ========================================================================== */

/* ---------- Fontes (self-hosted) ---------------------------------------- */
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/hankengrotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ------------------------------------------------------ */
:root{
  --color-paper:#FEFDFB;
  --color-plum-noir:#241420;
  --color-champagne:#E6D6B3;
  --color-gold:#A17F3E;
  --color-hairline:#E9E2D6;

  --color-plum-ink:#544250;
  --color-plum-grey:#7C6C76;      /* só metadados/legendas muito secundárias */

  --color-gold-hover:#8A6C34;
  --color-gold-tint-10:#F7F2E9;
  --color-gold-tint-18:#F0E7D6;
  --color-plum-raised:#33202D;

  /* Dourado claro: sobre ele o texto ameixa chega a 6,3:1 (o #A17F3E dava 4,4:1).
     O degradê dá o brilho metálico sem escurecer a área do texto. */
  --gold-light:#C6A055;
  --grad-gold:linear-gradient(135deg,#CBA45C 0%,#B98F49 52%,#C29A52 100%);
  --grad-gold-hover:linear-gradient(135deg,#D4AE68 0%,#C39954 52%,#CCA45E 100%);

  --text-on-dark:var(--color-champagne);
  --text-on-dark-body:rgba(230,214,179,.86);
  --text-on-dark-muted:rgba(230,214,179,.62);
  --border-on-dark:rgba(230,214,179,.22);

  --font-display:'Newsreader',ui-serif,Georgia,serif;
  --font-body:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;

  /* Curvatura padronizada: uma única medida para caixas e imagens do site
     inteiro, e uma um pouco menor para botões. */
  --radius:14px;
  --radius-btn:12px;
  --radius-full:999px;

  /* Superfície dos cards, sempre em contraste com o fundo da seção:
     fundo quase branco → card creme;  fundo creme → card branco.
     Os tokens são redefinidos por .s-tint mais abaixo e herdam para dentro. */
  --card-bg:var(--color-gold-tint-10);
  --card-bg-hover:var(--color-gold-tint-18);
  --card-border:#EDE3D1;
  --chip-bg:var(--color-paper);

  --edge:3px;                     /* borda esquerda dourada dos cards */
  --shadow-card:0 14px 30px -18px rgba(36,20,32,.34);
  --shadow-btn:0 10px 22px -12px rgba(36,20,32,.5);

  --ease:cubic-bezier(.4,0,.2,1);
  --header-h:66px;

  --pad-x:clamp(20px,5vw,48px);
  --pad-y:clamp(72px,9vw,132px);
  --wrap:1120px;
}

/* ---------- Base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-paper);color:var(--color-plum-noir);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
/* height:auto neutraliza a "presentational hint" dos atributos width/height do HTML.
   Sem isso a altura vira fixa e o aspect-ratio do CSS é ignorado. */
img{max-width:100%;display:block;height:auto}
a{color:var(--color-gold);text-decoration:none;transition:color 150ms var(--ease)}
a:hover{color:var(--color-gold-hover)}
strong,b{font-weight:650;color:var(--color-plum-noir)}
:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px;border-radius:2px}
section[id],footer[id]{scroll-margin-top:calc(var(--header-h) + 8px)}

/* ---------- Utilitários ------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;width:100%}
.sec{padding:var(--pad-y) var(--pad-x)}
.s-paper{background:var(--color-paper)}
.s-tint{
  background:var(--color-gold-tint-10);
  border-top:1px solid var(--color-hairline);border-bottom:1px solid var(--color-hairline);
  --card-bg:var(--color-paper);
  --card-bg-hover:var(--color-gold-tint-10);
  --card-border:var(--color-hairline);
  --chip-bg:var(--color-gold-tint-18);
}
.s-plum{background:var(--color-plum-noir);color:var(--text-on-dark)}
.s-plum strong{color:var(--color-champagne)}

.eyebrow{
  font-size:12.5px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-gold);margin-bottom:18px;
}
.s-plum .eyebrow{color:var(--color-champagne);opacity:.75}

h1,.h1{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(38px,6.4vw,66px);line-height:1.06;letter-spacing:-.015em;text-wrap:pretty;
}
h2,.h2{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(30px,4.6vw,50px);line-height:1.12;letter-spacing:-.015em;text-wrap:pretty;
}
h3,.h3{font-size:19.5px;font-weight:650;line-height:1.32}

.lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.72;color:var(--color-plum-ink);text-wrap:pretty}
.body{font-size:clamp(16.5px,1.4vw,18px);line-height:1.72;color:var(--color-plum-ink);text-wrap:pretty}
.s-plum .lead,.s-plum .body{color:var(--text-on-dark-body)}
.stack>*+*{margin-top:18px}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,60px)}
.sec-head h2{margin-bottom:20px}
.sec-head.is-center{max-width:680px;margin-left:auto;margin-right:auto;text-align:center}

/* Sub-título interno de seção (um degrau abaixo do h2) */
.subhead{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(22px,2.6vw,29px);line-height:1.2;letter-spacing:-.01em;
  color:var(--color-plum-noir);margin-bottom:24px;text-wrap:pretty;
}
.s-plum .subhead{color:var(--color-champagne)}

/* Frase de apoio em serifada dourada (usada nas seções ameixa) */
.kicker-serif{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(20px,2.6vw,28px);line-height:1.4;
  color:var(--color-gold);margin-bottom:36px;
}
.center-actions{margin-top:40px;display:flex;justify-content:center}

/* ---------- Botões ------------------------------------------------------ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:var(--radius-btn);border:none;cursor:pointer;
  font-family:var(--font-body);font-size:15.5px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),
             background 200ms var(--ease),color 150ms var(--ease);
}
/* Brilho que varre o botão no hover — a única animação "de luxo" do site,
   reservada para o CTA. */
.btn-primary::after,.btn-plum::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform 620ms var(--ease);
}
.btn-primary:hover::after,.btn-plum:hover::after{transform:translateX(120%)}

.btn-primary{background:var(--grad-gold);color:var(--color-plum-noir);box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--grad-gold-hover);color:var(--color-plum-noir);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(36,20,32,.55)}

/* Ameixa com texto champanhe (12,2:1) — usado nas seções creme, onde o
   dourado se aproxima demais do fundo. */
.btn-plum{background:var(--color-plum-noir);color:var(--color-champagne);box-shadow:var(--shadow-btn)}
.btn-plum:hover{background:var(--color-plum-raised);color:var(--color-champagne);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(36,20,32,.55)}
.btn-plum::after{background:linear-gradient(105deg,transparent 35%,rgba(230,214,179,.22) 50%,transparent 65%)}

.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--color-plum-noir);padding:16px 6px;font-weight:650;box-shadow:none}
.btn-ghost:hover{color:var(--color-gold);transform:none;box-shadow:none}
.btn-ghost .arw{display:inline-block;transition:transform 260ms var(--ease)}
.btn-ghost:hover .arw{transform:translateX(5px)}
.s-plum .btn-ghost{color:var(--color-champagne)}
.btn svg{flex-shrink:0}

/* ---------- Cabeçalho --------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--header-h);padding:0 var(--pad-x);
  background:transparent;border-bottom:1px solid transparent;
  transition:background 260ms var(--ease),border-color 260ms var(--ease),box-shadow 260ms var(--ease);
}
.site-header.is-solid{
  background:rgba(254,253,251,.94);backdrop-filter:blur(10px);
  border-bottom-color:var(--color-hairline);
}
/* A logo encosta na mesma linha em que começa o texto das seções e o botão
   termina onde o texto termina: o cabeçalho usa a mesma área útil do .wrap. */
.header-inner{
  height:100%;max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);
}
.site-header .logo{flex-shrink:0;display:block;line-height:0}
.site-header .logo img{height:38px;width:auto}

.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav a{
  font-size:12.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-plum-noir);position:relative;padding:6px 0;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--color-gold);transform:scaleX(0);transform-origin:left;
  transition:transform 220ms var(--ease);
}
.nav a:hover{color:var(--color-gold)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--color-gold)}

/* Precisa vencer `.nav a` (0,1,1) — senão o botão herda padding:6px 0 dali e
   fica sem margem lateral nenhuma. */
.nav a.header-cta{padding:11px 24px;font-size:12.5px;letter-spacing:.06em;flex-shrink:0}
.nav a.header-cta::after{display:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--color-plum-noir)}

/* Abaixo de 1140px o trio logo+menu+botão não cabe com respiro nas laterais:
   passa para logo à esquerda e hambúrguer à direita. */
@media (max-width:1140px){
  .header-inner{justify-content:space-between;gap:16px}
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch;
    gap:0;margin:0;padding:8px var(--pad-x) 24px;
    background:rgba(254,253,251,.97);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--color-hairline);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity 200ms var(--ease),transform 200ms var(--ease);
    max-height:calc(100svh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:15px 0;font-size:13.5px;border-bottom:1px solid var(--color-hairline)}
  .nav a::after{display:none}
  .nav a.header-cta{margin-top:18px;border-bottom:none;justify-content:center;padding:16px 24px;font-size:14.5px}
  .site-header .logo img{height:34px}
}

/* ---------- Hero -------------------------------------------------------- */
/* A foto entra como background, não como <img>: um <img> escondido com
   display:none continua sendo baixado, e no celular isso custava 67 KB de
   uma imagem que nunca aparece. Assim cada tamanho de tela baixa só a sua. */
.hero{
  position:relative;
  background-color:var(--color-paper);
  background-image:url('../hero-desktop.webp');
  background-size:cover;background-position:center right;background-repeat:no-repeat;
  padding:calc(var(--header-h) + 40px) var(--pad-x) clamp(56px,7vw,96px);
  display:flex;align-items:center;min-height:min(92svh,880px);
}
/* O véu abre na borda esquerda para deixar aparecer os traços abstratos da
   foto, fecha atrás do texto e some sobre a Vanessa. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(254,253,251,.40) 0%, rgba(254,253,251,.88) 13%,
    rgba(254,253,251,.90) 38%, rgba(254,253,251,.52) 56%,
    rgba(254,253,251,0) 70%);
}
/* Faixa clara sob o cabeçalho transparente: sem ela o último item do menu cai
   sobre o quadro escuro da foto e some. */
.hero::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:1;
  height:calc(var(--header-h) + 34px);
  background:linear-gradient(rgba(254,253,251,.86),rgba(254,253,251,.55) 62%,rgba(254,253,251,0));
}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:620px}
.hero .eyebrow{color:var(--color-gold)}
.hero h1{color:var(--color-plum-noir);margin-bottom:22px}
.hero-lead{
  font-size:clamp(16.5px,1.7vw,19px);line-height:1.68;color:var(--color-plum-ink);
  margin-bottom:28px;max-width:560px;text-wrap:pretty;
}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px}
.hero-tags li{
  padding:7px 15px;border:1px solid rgba(36,20,32,.2);border-radius:var(--radius-full);
  font-size:13px;color:var(--color-plum-ink);background:rgba(254,253,251,.62);
  transition:border-color 200ms var(--ease),background 200ms var(--ease),
             color 200ms var(--ease),transform 200ms var(--ease);
}
.hero-tags li:hover{
  border-color:var(--color-gold);background:var(--color-gold-tint-18);
  color:var(--color-plum-noir);transform:translateY(-2px);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

@media (max-width:860px){
  /* Mobile: a foto vira o fundo da seção (Vanessa embaixo) e o texto ocupa
     a metade de cima, centralizado no mesmo eixo dela. */
  /* A foto é o fundo da seção, ancorada embaixo. O padding inferior reserva
     exatamente a faixa em que a Vanessa aparece (ela começa a 63% da imagem),
     e a cor de fundo continua o creme do topo se a seção ficar mais alta. */
  .hero{
    display:block;min-height:0;
    padding:calc(var(--header-h) + 26px) var(--pad-x) 103vw;
    background-color:#FEEDE1;
    background-image:url('../hero-mobile-bg.webp');
    background-size:100% auto;background-position:bottom center;background-repeat:no-repeat;
  }
  .hero::after{display:none}
  .hero-inner{max-width:none;text-align:center}
  .hero .eyebrow{margin-bottom:14px}
  .hero-lead{margin-left:auto;margin-right:auto}
  .hero-tags{justify-content:center;margin-bottom:28px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-actions .btn-ghost{width:auto;margin:0 auto}
}

/* ---------- Seção com imagem lateral ------------------------------------ */
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(36px,5vw,68px);align-items:center;
}
.split-media{border-radius:var(--radius);overflow:hidden}
.split-media img{width:100%;height:auto;display:block}

/* Bloco de destaque com ornamento */
.pullquote{
  position:relative;margin:28px 0;padding:30px clamp(24px,3vw,34px) 28px;
  background:var(--color-champagne);border-radius:var(--radius);
}
.s-plum .pullquote{background:rgba(51,32,45,.82);border:1px solid var(--border-on-dark);backdrop-filter:blur(2px)}
.pullquote p{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.5vw,27px);line-height:1.3;color:var(--color-plum-noir);text-wrap:pretty;
}
.s-plum .pullquote p{color:var(--color-champagne)}

/* Ornamento com filetes que saem para os dois lados e somem nas pontas. */
.ornament{display:block;margin:0 auto 16px;color:var(--color-gold);flex-shrink:0}
.ornament-rule{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.ornament-rule .ornament{margin:0}
.ornament-rule::before,.ornament-rule::after{
  content:"";height:1px;flex:1;min-width:20px;
  background:linear-gradient(90deg,transparent,var(--color-gold));
}
.ornament-rule::after{background:linear-gradient(90deg,var(--color-gold),transparent)}
.s-plum .ornament-rule::before{background:linear-gradient(90deg,transparent,var(--color-champagne))}
.s-plum .ornament-rule::after{background:linear-gradient(90deg,var(--color-champagne),transparent)}

/* ---------- Entender o problema ----------------------------------------- */
/* Grade que deixa a imagem entrar no meio do texto no mobile (texto → imagem
   → caixa de destaque) sem quebrar as duas colunas do desktop. */
.split-interleave{
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"a media" "b media";
  gap:0 clamp(36px,5vw,68px);align-items:center;
}
.split-interleave>.txt-a{grid-area:a}
.split-interleave>.txt-b{grid-area:b}
.split-interleave>.split-media{grid-area:media}
@media (max-width:860px){
  .split-interleave{
    grid-template-columns:1fr;grid-template-areas:"a" "media" "b";
    gap:clamp(30px,6vw,42px) 0;
  }
}

/* ---------- O que é a hipnoterapia -------------------------------------- */
/* Duas colunas centralizadas: texto + caixa à esquerda; relógio e cards de
   recurso à direita. No mobile a ordem do HTML já entrega texto → caixa →
   relógio → cards. */
.terapia{
  background-image:linear-gradient(115deg,rgba(36,20,32,.93) 0%,rgba(36,20,32,.84) 55%,rgba(36,20,32,.92) 100%),url('../entender-bg.webp');
  background-size:cover;background-position:center;
}
/* Coluna única centralizada: relógio grande abre a seção, o texto usa uma
   medida larga (por isso ocupa menos altura) e os recursos fecham lado a lado. */
.terapia-col-unica{text-align:center}
.terapia-clock{
  width:min(560px,82%);margin:0 auto clamp(30px,4vw,46px);
}
.terapia-col{max-width:820px;margin:0 auto}
.terapia-recursos{margin-top:clamp(46px,5.5vw,72px)}
.terapia-cta{margin-top:clamp(40px,4.5vw,56px);display:flex;justify-content:center}

/* Cards em creme sobre o ameixa — quebra o bloco escuro da seção, que é a
   mais textual da página. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-auto-rows:1fr;text-align:left}
.pillar{
  padding:22px 22px 24px;background:var(--card-bg);
  border:1px solid var(--card-border);border-radius:var(--radius);
  transition:border-color 240ms var(--ease),background 240ms var(--ease),
             transform 240ms var(--ease),box-shadow 240ms var(--ease);
}
.pillar:hover{
  border-color:var(--color-gold);background:var(--card-bg-hover);
  transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(0,0,0,.55);
}
.pillar-icon{color:var(--color-gold);margin-bottom:12px}
.pillar h3{margin-bottom:8px;color:var(--color-plum-noir);font-family:var(--font-display);font-style:normal;font-weight:500;font-size:19px}
.pillar p{font-size:15px;line-height:1.58;color:var(--color-plum-ink);text-wrap:pretty}
.s-plum .pillar strong{color:var(--color-plum-noir)}

@media (max-width:820px){
  .pillars{grid-template-columns:1fr}
}
@media (max-width:900px){
  .terapia-col-unica{text-align:left}
  .terapia-clock{width:min(88%,360px)}
  /* O subtítulo dos recursos sobe para o mesmo tamanho da headline da seção. */
  .terapia .subhead{
    font-size:clamp(30px,4.6vw,50px);line-height:1.12;letter-spacing:-.015em;
    margin-bottom:26px;
  }
}

/* ---------- No que é eficaz (lista direta) ------------------------------ */
.sintomas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sintomas li{
  padding:12px 20px;border-radius:var(--radius-full);
  background:var(--card-bg);border:1px solid var(--card-border);
  font-size:15.5px;font-weight:600;color:var(--color-plum-noir);
  display:flex;align-items:center;gap:9px;
  transition:border-color 220ms var(--ease),background 220ms var(--ease),transform 220ms var(--ease);
}
.sintomas li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--color-gold);flex-shrink:0;
}
.sintomas li:hover{border-color:var(--color-gold);background:var(--card-bg-hover);transform:translateY(-2px)}
.sintomas-note{
  margin-top:clamp(28px,3.5vw,38px);text-align:center;
  font-size:15px;color:var(--color-plum-grey);
}

/* ---------- Lista "Para quem é" ----------------------------------------- */
.checks{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin-bottom:clamp(40px,5vw,54px)}
.checks li{
  flex:1 1 268px;max-width:min(340px,100%);display:flex;gap:13px;align-items:flex-start;
  padding:18px 19px;background:var(--card-bg);
  border:1px solid var(--card-border);border-radius:var(--radius);
  transition:border-color 240ms var(--ease),background 240ms var(--ease),
             transform 240ms var(--ease),box-shadow 240ms var(--ease);
}
.checks li:hover{border-color:var(--color-gold);background:var(--card-bg-hover);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.checks .tick{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--chip-bg);
  border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;margin-top:1px;color:var(--color-gold);
}
.checks span{font-size:15.5px;line-height:1.55;color:var(--color-plum-ink)}
.checks strong{color:var(--color-plum-noir)}

/* ---------- Etapas (Como funciona) -------------------------------------- */
.steps-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:clamp(30px,4vw,54px);align-items:stretch}

/* Trilho vertical: a calha tem --rail-w de largura e o fio corre exatamente no
   meio dela, no mesmo eixo do centro dos círculos. Todos os cards têm a mesma
   altura (grid-auto-rows:1fr), então a numeração fica em ritmo constante. */
.steps{
  --rail-w:64px;--dot:38px;
  position:relative;display:grid;grid-auto-rows:1fr;gap:16px;padding-left:var(--rail-w);
}
.steps::before{
  content:"";position:absolute;
  left:calc(var(--rail-w) / 2 - 1.5px);width:3px;
  top:calc(var(--dot) / 2);bottom:calc(var(--dot) / 2);
  background:linear-gradient(180deg,transparent 0,var(--color-gold) 5%,var(--color-gold) 95%,transparent 100%);
  opacity:.5;
}
/* Trecho já percorrido do trilho, preenchido conforme as etapas aparecem. */
.steps::after{
  content:"";position:absolute;
  left:calc(var(--rail-w) / 2 - 1.5px);width:3px;
  top:calc(var(--dot) / 2);height:var(--rail-fill,0%);
  background:var(--color-gold);
  transition:height 900ms var(--ease);
}
.step{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:22px 24px;
  background:var(--card-bg);border:1px solid var(--card-border);
  border-left:var(--edge) solid var(--color-gold);border-radius:var(--radius);
  transition:border-color 240ms var(--ease),transform 240ms var(--ease),box-shadow 240ms var(--ease);
}
.step:hover{border-color:var(--color-gold);transform:translateX(5px);box-shadow:var(--shadow-card)}
.step-n{
  position:absolute;top:50%;
  left:calc((var(--rail-w) + var(--dot)) / -2 - var(--edge) / 2);
  transform:translateY(-50%);
  width:var(--dot);height:var(--dot);border-radius:50%;
  border:1.5px solid var(--color-gold);color:var(--color-gold);background:var(--chip-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;z-index:1;
  transition:background 300ms var(--ease),color 300ms var(--ease),transform 300ms var(--ease);
}
/* Ao entrar na tela o número acende: o trilho vai "subindo" do 1 ao 5. */
.step.is-visible .step-n{background:var(--color-gold);color:var(--color-plum-noir);transform:translateY(-50%) scale(1.08)}
.step h3{margin-bottom:6px;color:var(--color-plum-noir)}
.step p{font-size:15.5px;line-height:1.6;color:var(--color-plum-ink);text-wrap:pretty}
/* A imagem acompanha a altura da coluna de etapas, sem sticky nem parallax. */
.steps-media{border-radius:var(--radius);overflow:hidden}
.steps-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

@media (max-width:900px){
  .steps-grid{grid-template-columns:1fr}
  .steps-media{order:-1}
  .steps-media img{aspect-ratio:1/1;height:auto}
}
@media (max-width:520px){
  .steps{--rail-w:52px;--dot:34px}
  .step-n{font-size:13px}
  .step{padding:20px 20px}
}

/* ---------- Você não precisa apagar a sua história ----------------------- */
.historia{
  background-image:linear-gradient(rgba(36,20,32,.86),rgba(36,20,32,.93)),url('../dark-plum-texture.webp');
  background-size:cover;background-position:center;
}
@media (max-width:900px){
  /* Relógios na vertical, bem apagados para não roubar a leitura. */
  .historia{
    background-image:linear-gradient(rgba(36,20,32,.80),rgba(36,20,32,.88)),url('../historia-mobile.webp');
    background-position:center top;
  }
}

/* ---------- Um processo que vai nas causas ------------------------------- */
/* A imagem entra como <img> (não background) para poder ficar centralizada de
   verdade na altura da seção. A máscara apaga o lado direito por completo —
   assim o elemento gráfico da direita não disputa espaço com o texto, mesmo
   que a arte venha sem opacidade. */
.causas{position:relative;overflow:hidden;background:var(--color-plum-noir)}
.causas-bg{
  position:absolute;inset:0;display:block;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.30) 47%,transparent 58%);
          mask-image:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.30) 47%,transparent 58%);
}
/* O cérebro está a 35,9% da altura do arquivo, não no meio. Em vez de recortar
   a imagem (o que exigiria recomprimir e perder nitidez), ela é exibida maior
   que a seção e deslocada — assim o arquivo original fica intacto.
   Contas: com altura H=142% da seção, o deslocamento que leva o cérebro ao
   centro é 0,5 − 0,359×1,42 = −0,98% da seção = −0,69% da imagem. */
.causas-bg img{
  position:absolute;left:0;top:0;
  width:auto;height:142%;min-width:100%;
  object-fit:cover;object-position:left top;
  transform:translateY(-0.69%);
}
.causas>.wrap{position:relative;z-index:1}
.causas-col{margin-left:auto;max-width:min(520px,52%)}
.causas-actions{margin-top:38px}
@media (max-width:900px){
  .causas-bg{
    /* Sem máscara no vertical: a opacidade sobre o ameixa já apaga o
       suficiente para o texto ler por cima. */
    -webkit-mask-image:none;mask-image:none;
    opacity:.55;filter:blur(1px);
  }
  .causas-bg img{
    width:100%;height:100%;min-width:0;
    object-position:center;transform:none;
  }
  .causas-col{margin-left:0;max-width:none;text-align:center}
  .causas-col .stack{max-width:560px;margin-left:auto;margin-right:auto}
  .causas-actions{display:flex;justify-content:center}
}

/* ---------- Formações (Quem é Vanessa) ---------------------------------- */
.creds-block{margin-top:clamp(48px,6vw,78px)}
.creds-title{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(22px,3vw,32px);line-height:1.25;margin-bottom:28px;text-wrap:pretty;
}
/* grid-auto-rows:1fr iguala a altura de todas as linhas, não só das colunas —
   sem isso o card de duas linhas fica maior que os de uma. */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;grid-auto-rows:1fr}
.creds li{
  display:flex;gap:14px;align-items:center;padding:18px 20px;
  background:var(--card-bg);border:1px solid var(--card-border);
  border-left:var(--edge) solid var(--color-gold);border-radius:var(--radius);
  transition:background 240ms var(--ease),border-color 240ms var(--ease),
             transform 240ms var(--ease),box-shadow 240ms var(--ease);
}
.creds li:hover{background:var(--card-bg-hover);border-color:var(--color-gold);transform:translateY(-3px);box-shadow:var(--shadow-card)}
.creds svg{flex-shrink:0;color:var(--color-gold)}
.creds p{font-size:15.5px;line-height:1.45;color:var(--color-plum-ink)}

.sobre-media{border-radius:var(--radius);overflow:hidden}
.sobre-media img{width:100%;height:auto}

/* ---------- Carrosséis --------------------------------------------------- */
.rail-head{
  display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(28px,4vw,44px);
}
.rail-nav{display:flex;gap:10px}
.rail-btn{
  width:46px;height:46px;border-radius:50%;border:none;background:var(--color-plum-noir);
  color:var(--color-champagne);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background 180ms var(--ease),transform 180ms var(--ease),opacity 200ms var(--ease);
}
.rail-btn:hover{background:var(--color-plum-raised);transform:translateY(-2px)}
.rail-btn:active{transform:translateY(0)}
.rail-btn[disabled]{opacity:.28;cursor:default;transform:none}
.rail{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px var(--pad-x) 20px;scrollbar-width:thin;scrollbar-color:var(--color-hairline) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--color-hairline);border-radius:999px}
.rail figure{margin:0;scroll-snap-align:center;border-radius:var(--radius);overflow:hidden}
.rail-consultorio figure{flex:0 0 min(86vw,620px)}
.rail-consultorio img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 500ms var(--ease)}
.rail-consultorio figure:hover img{transform:scale(1.04)}
.rail-depo figure{flex:0 0 min(74vw,318px);border:1px solid var(--color-hairline)}
.rail-depo img{width:100%;aspect-ratio:700/1167;object-fit:cover;display:block}

/* ---------- FAQ ---------------------------------------------------------- */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(30px,5vw,60px);align-items:start}
.faq-intro{position:sticky;top:calc(var(--header-h) + 24px)}
.faq details{border-bottom:1px solid var(--color-hairline)}
.faq summary{
  display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:17px;font-weight:650;line-height:1.45;color:var(--color-plum-noir);
  transition:color 180ms var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-gold)}
.faq summary .chev{flex-shrink:0;color:var(--color-gold);transition:transform 240ms var(--ease);margin-top:3px}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .answer{overflow:hidden}
.faq .answer p{padding-right:44px;font-size:16.5px;line-height:1.7;color:var(--color-plum-ink);text-wrap:pretty}
.faq .answer p:last-child{padding-bottom:24px}
.faq .answer p+p{margin-top:14px}
@media (max-width:900px){.faq-intro{position:static}}

/* ---------- Contato ------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,3vw,38px);align-items:start}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-card{
  display:flex;gap:16px;align-items:flex-start;padding:24px;
  border:1px solid var(--card-border);border-radius:var(--radius);background:var(--card-bg);
  transition:border-color 200ms var(--ease),background 200ms var(--ease),
             transform 200ms var(--ease),box-shadow 200ms var(--ease);
}
.contact-card:hover{border-color:var(--color-gold);transform:translateY(-3px);box-shadow:var(--shadow-card)}
.contact-card.dark{background:var(--color-plum-noir);border-color:var(--color-plum-noir)}
.contact-card.dark:hover{background:var(--color-plum-raised);border-color:var(--color-plum-raised)}
.contact-card .ic{flex-shrink:0;color:var(--color-gold);margin-top:2px}
.contact-card .label{
  display:block;font-size:11.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-plum-grey);margin-bottom:7px;
}
.contact-card.dark .label{color:var(--text-on-dark-muted)}
.contact-card .value{display:block;font-size:18px;font-weight:650;color:var(--color-plum-noir);margin-bottom:4px}
.contact-card.dark .value{color:var(--color-champagne)}
/* O e-mail é a palavra mais longa do site: encolhe em vez de quebrar no meio. */
.contact-card .value-email{font-size:clamp(14px,3.9vw,16.5px);overflow-wrap:break-word}
.contact-card .note{display:block;font-size:14.5px;color:var(--color-plum-ink)}
.contact-card.dark .note{color:var(--text-on-dark-muted)}
.contact-card address{font-style:normal;font-size:16px;line-height:1.6;color:var(--color-plum-ink)}
.map{width:100%;height:min(520px,58vh);border:1px solid var(--color-hairline);border-radius:var(--radius);display:block;filter:saturate(.85)}
@media (max-width:900px){.map{height:auto;aspect-ratio:4/3}}

/* ---------- Rodapé ------------------------------------------------------- */
.site-footer{padding:clamp(40px,5vw,58px) var(--pad-x);background:var(--color-paper);border-top:1px solid var(--color-hairline)}
.footer-top{
  max-width:var(--wrap);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:center;
}
.footer-brand{max-width:400px}
.footer-brand img{height:42px;width:auto;margin-bottom:16px}
.footer-brand p{font-size:15px;line-height:1.65;color:var(--color-plum-ink)}
.social{display:flex;gap:12px}
.social a{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--color-hairline);
  display:flex;align-items:center;justify-content:center;color:var(--color-plum-noir);
  transition:border-color 200ms var(--ease),color 200ms var(--ease),
             background 200ms var(--ease),transform 200ms var(--ease);
}
.social a:hover{border-color:var(--color-gold);color:var(--color-gold);background:var(--color-gold-tint-10);transform:translateY(-3px)}
.footer-bottom{
  max-width:var(--wrap);margin:clamp(28px,3.5vw,40px) auto 0;padding-top:22px;
  border-top:1px solid var(--color-hairline);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}
.footer-bottom p{font-size:13.5px;color:var(--color-plum-grey)}
@media (max-width:860px){
  .footer-top{flex-direction:column;align-items:center;text-align:center;gap:26px}
  .footer-brand{max-width:none}
  .footer-brand img{height:36px;margin-left:auto;margin-right:auto}
  .footer-bottom{justify-content:center;text-align:center;gap:8px}
  .footer-bottom p{width:100%}
}

/* ---------- Páginas de texto corrido (política de privacidade) ----------- */
.legal{padding:calc(var(--header-h) + clamp(48px,7vw,88px)) var(--pad-x) clamp(60px,8vw,100px)}
.legal-wrap{max-width:760px;margin:0 auto}
.legal h1{font-size:clamp(34px,5vw,52px);margin-bottom:14px}
.legal .updated{font-size:14.5px;color:var(--color-plum-grey);margin-bottom:clamp(36px,5vw,52px)}
.legal h2{
  font-size:clamp(22px,2.6vw,28px);line-height:1.2;
  margin:clamp(40px,5vw,56px) 0 16px;
}
.legal h3{font-size:17px;margin:26px 0 10px;color:var(--color-plum-noir)}
.legal p,.legal li{font-size:16.5px;line-height:1.75;color:var(--color-plum-ink);text-wrap:pretty}
.legal p+p{margin-top:14px}
.legal ul{margin:14px 0 0;padding-left:0}
.legal ul li{position:relative;padding-left:22px;margin-bottom:10px}
.legal ul li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--color-gold);
}
.legal strong{color:var(--color-plum-noir)}
.legal-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15.5px}
.legal-table th,.legal-table td{
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--color-hairline);
  vertical-align:top;color:var(--color-plum-ink);
}
.legal-table th{
  font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-gold);border-bottom-color:var(--color-gold);
}
.legal-table td:first-child{font-weight:650;color:var(--color-plum-noir);white-space:nowrap}
.legal-scroll{overflow-x:auto;margin-bottom:22px}
.legal-scroll+p,.legal ul+p{margin-top:16px}
.legal-box{
  margin-top:22px;padding:clamp(20px,3vw,26px);
  background:var(--color-gold-tint-10);border:1px solid var(--card-border);
  border-left:var(--edge) solid var(--color-gold);border-radius:var(--radius);
}
.legal-box p{font-size:16px}
.legal-back{
  display:inline-flex;align-items:center;gap:8px;margin-top:clamp(44px,5vw,60px);
  font-size:15px;font-weight:650;
}
.legal-back .arw{display:inline-block;transition:transform 260ms var(--ease)}
.legal-back:hover .arw{transform:translateX(-5px)}
@media (max-width:560px){
  .legal-table td:first-child{white-space:normal}
}

/* ---------- WhatsApp flutuante ------------------------------------------- */
.wa-float{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:70;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--grad-gold);color:var(--color-plum-noir);box-shadow:0 10px 26px -8px rgba(36,20,32,.5);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity 320ms var(--ease),transform 320ms var(--ease),background 180ms var(--ease);
}
.wa-float.is-on{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{background:var(--grad-gold-hover);color:var(--color-plum-noir);transform:translateY(-3px)}

/* ---------- Animações de entrada ----------------------------------------- */
/* Usa @keyframes, não transition: os cards têm `transition` própria para o
   hover, e uma declaração de transition no elemento sobrescreveria a da
   animação de entrada — foi o que fazia os blocos aparecerem secos. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes rise-sm{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes slide-x{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes zoom-soft{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

[data-reveal]{opacity:0}
[data-reveal].is-visible{opacity:1;animation:rise 780ms var(--ease) backwards}

/* Imagens entram com um respiro de escala em vez de deslizar. */
.split-media[data-reveal].is-visible,
.sobre-media[data-reveal].is-visible,
.steps-media[data-reveal].is-visible{animation:zoom-soft 900ms var(--ease) backwards}

/* Filhos em cascata: o JS numera cada item em --i. */
[data-stagger]>*{opacity:0}
[data-stagger].is-visible>*{
  opacity:1;
  animation:rise-sm 640ms var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
[data-stagger="x"].is-visible>*{animation-name:slide-x}

/* Etapas: cada card é observado sozinho, então a numeração vai subindo
   conforme a pessoa rola. */
[data-reveal-each]>*{opacity:0}
[data-reveal-each]>*.is-visible{opacity:1;animation:slide-x 620ms var(--ease) backwards}

.terapia-clock{opacity:0}
.terapia-clock.is-visible{opacity:1;animation:fade-in 1400ms var(--ease) backwards}

/* ---------- Ajustes de mobile por seção ---------------------------------- */
@media (max-width:860px){
  /* Entender: a imagem entra entre o texto e a caixa de destaque. */
  .entender-media{max-width:min(92%,420px);margin:0 auto}

  /* Para quem é: a borda esquerda dourada vira a marca das caixas no mobile,
     mantendo a mesma curvatura do resto do site. */
  .checks li{border-left:var(--edge) solid var(--color-gold)}

  /* Quem é Vanessa: o retrato vira uma faixa de ponta a ponta no topo da
     seção — usa a largura toda e o fundo da seção segue abaixo dele. */
  .sobre-media{
    margin:calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) clamp(30px,6vw,44px);
    max-width:none;border-radius:0;
  }
  /* Sem aspect-ratio: a foto aparece inteira, na proporção original, ocupando
     a largura toda. Era o recorte 4/3 que cortava a Vanessa no peito. */
  .sobre-media img{width:100%;height:auto}
  .creds-title{
    font-size:clamp(30px,4.6vw,50px);line-height:1.12;letter-spacing:-.015em;
    margin-top:clamp(14px,3vw,22px);margin-bottom:26px;
  }
  .creds-block{
    margin-top:clamp(44px,8vw,64px);padding-top:clamp(38px,7vw,54px);
    border-top:1px solid var(--color-hairline);
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-stagger]>*,[data-reveal-each]>*,.terapia-clock{
    opacity:1;transform:none;animation:none!important;
  }
  .steps::after{transition:none}
  .rail{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}