/* ==========================================================================
   ENGINE — landing premium (agnóstico de cliente)
   Copie como css/main.css e troque APENAS o bloco "Marca".
   Regra de ouro: todo o CSS está em `em`. Não introduza px/rem.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Motor fluido */
  --size-unit: 16;
  --size-container-ideal: 1600;
  --size-container: clamp(360px, 100vw, 1920px);
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  /* ===== TROQUE SÓ ESTE BLOCO POR CLIENTE =====================
     --grey       texto secundário sobre claro  (mín. 4.5:1)
     --grey-2     texto secundário sobre escuro (mín. 4.5:1)
     --gold-text  acento escurecido p/ fundo claro (mín. 4.5:1)
     --terra-text cor de assinatura sobre claro  (mín. 3:1)
     `.dark` reaponta --gold-text/--terra-text para as versões vibrantes.
     Valide o contraste ANTES de escrever o HTML. */
  /* MARCA: Ana Claudia Braga — fisioterapia pélvica (brand book, set/2026).
     Razões medidas sobre o nude #F5EBE6 ANTES de escrever o HTML (regra 8). */
  --ink:        #3E3E3E;   /* grafite / cinza quente — brand book */
  --ink-2:      #2E2C2B;   /* grafite aprofundado: superfícies dentro do escuro */
  --cream:      #F5EBE6;   /* nude / bege claro — brand book */
  --cream-2:    #FAFAFA;   /* branco suave — brand book */
  --gold:       #C47B6A;   /* terracota suave — decorativo, 2,80:1 no nude */
  --gold-2:     #D8A49B;   /* blush — decorativo, 1,85:1 no nude */
  --blush:      #D8A49B;
  --terra:      #C47B6A;
  --serene:     #8A9A86;   /* verde sálvia clínico — decorativo, 2,54:1 no nude */
  --grey:       #6B615B;   /* texto secundário sobre claro  — 5,14:1 */
  --grey-2:     #C9BDB7;   /* texto secundário sobre escuro — 5,83:1 */
  /* Os TRÊS núcleos da marca reprovam AA como texto sobre o nude. Estas são as
     versões escurecidas que carregam a mesma matiz e passam. */
  --gold-text:  #9A4F3C;   /* terracota escurecida — 5,03:1 no nude */
  --terra-text: #9A4F3C;
  --sage-text:  #4F5C4B;   /* sálvia escurecida — 6,04:1 no nude */

  /* Semânticos */
  --bg:         var(--cream);
  --fg:         var(--ink);
  --fg-soft:    var(--grey);
  --accent:     var(--terra);
  --line:       rgba(20,16,14,.14);

  /* Easings (espelham os CustomEase do motor JS) */
  --e-move:  cubic-bezier(.5,0,.2,1);
  --e-soft:  cubic-bezier(.65,.05,0,1);
  --e-out:   cubic-bezier(.16,1,.3,1);

  --radius: .6em;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
img, video, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
/* Skip link — o PLAYBOOK exige que seja o 1º focável da página. Marcação:
   <a href="#conteudo" class="skip">Ir para o conteúdo</a> logo depois de <body>. */
.skip {
  position: absolute; left: .8em; top: -6em; z-index: 999;
  background: var(--gold); color: var(--ink);
  padding: .8em 1.2em; border-radius: var(--radius);
  font-size: .8em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: top .25s var(--e-move);
}
.skip:focus-visible { top: .8em; }

body {
  font-size: var(--size-font);
  font-family: var(--sans);
  font-weight: 300;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; height: 100svh; }

/* ---------- 3. Tipografia ---------- */
.display, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.d1 { font-size: 7.2em; }
.d2 { font-size: 5em; }
.d3 { font-size: 3.2em; }
.d4 { font-size: 2.1em; }
.script { font-family: var(--serif); font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.italic { font-style: italic; }

.kicker {
  font-size: .72em; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-soft);
  display: flex; align-items: center; gap: .8em;
}
.kicker::before {
  content: ""; width: 2.2em; height: 1px;
  background: currentColor; opacity: .5; flex: none;
}

.lede { font-size: 1.35em; line-height: 1.45; font-weight: 300; max-width: 22em; }
.body-txt { font-size: 1.0625em; line-height: 1.6; color: var(--fg-soft); max-width: 34em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 4. Layout ---------- */
.section { padding-block: 8em; position: relative; }
.section--sm { padding-block: 5em; }
.wrap { max-width: 82em; margin-inline: auto; width: 100%; }
.dark {
  background: var(--ink); color: var(--cream-2);
  --fg: var(--cream-2); --fg-soft: var(--grey-2); --line: rgba(250,250,250,.18);
  /* No escuro o acento vira BLUSH, não terracota: terracota sobre grafite dá
     3,25:1 e reprova em texto pequeno; blush dá 4,93:1. */
  --gold-text: var(--blush); --terra-text: var(--blush); --sage-text: var(--grey-2);
}
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2em; flex-wrap: wrap; margin-bottom: 3.5em; }
.sec-head__n { font-size: .72em; letter-spacing: .16em; color: var(--gold-text); }

/* ---------- 5. Anti-FOUC do texto animado ----------
   `anim-ready` é setado inline no <head>; sem JS o texto nunca some. */
html.anim-ready [data-anim="text"] { visibility: hidden; }
/* A máscara do SplitText usa overflow:clip e corta descendentes (g, j, p, y) e
   acentos. Padding + margem negativa devolvem o espaço sem mexer no layout. */
.split-line-mask { padding-block: .16em !important; margin-block: -.16em !important; }
/* Sem `will-change` fixo: o GSAP promove o elemento durante o tween e solta depois.
   Deixar fixo aqui promoveria dezenas de linhas de texto para sempre — caro no mobile. */

/* ---------- 6. Botões ---------- */
.btn {
  --btn-fg: var(--cream); --btn-bg: var(--ink);
  display: inline-flex; align-items: center; gap: .9em;
  padding: 1.05em 1.9em; border-radius: 100px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .84em; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--e-move);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold); border-radius: inherit;
  transform: translateY(101%); transition: transform .55s var(--e-soft);
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { color: var(--ink); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border: 1px solid var(--line); }
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink); }
.btn--gold::after { background: var(--ink); }
.btn--gold:hover { color: var(--cream); }

/* Link com sublinhado animado */
.ulink { position: relative; display: inline-block; }
.ulink::after {
  content: ""; position: absolute; left: 0; bottom: -.14em;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--e-soft);
}
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 8. Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6em 2.5em; color: var(--cream);
  pointer-events: none; transition: color .5s var(--e-move);
}
.nav.is-dark { color: var(--ink); }
.nav > * { pointer-events: auto; }
.nav__logo { font-family: var(--serif); font-size: 1.45em; letter-spacing: -.01em; line-height: 1; }
.nav__logo em { font-family: var(--serif); font-style: normal; }
.nav__links { display: flex; gap: 2em; font-size: .76em; letter-spacing: .14em; text-transform: uppercase; }
.nav__cta { display: flex; align-items: center; gap: 1.4em; }
@media (max-width: 991px) { .nav__links, .nav__cta .btn { display: none; } .nav { padding: 1.2em 1.25em; }  }

.menu-btn {
  width: 3em; height: 3em; border-radius: 50%;
  border: 1px solid currentColor;
  display: none; place-items: center;
}
.menu-btn i { display: block; width: 1.1em; height: 1px; background: currentColor; }
.menu-btn i + i { margin-top: .32em; }
@media (max-width: 991px) { .menu-btn { display: grid; }  }

.overlay {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.5em 1.25em;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--e-move), visibility .5s;
}
/* Ao abrir, a visibilidade vira na hora (senão o foco não entra no "Fechar");
   ao fechar, ela espera o fade da regra de cima. */
.overlay.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--e-move), visibility 0s; }
.overlay nav a { font-family: var(--serif); font-size: 2.6em; line-height: 1.28; display: block; }
.overlay__foot { margin-top: 2.5em; display: grid; gap: .6em; font-size: .8em; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); }
.overlay__close { position: absolute; top: 1.4em; right: 1.25em; font-size: .76em; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8em 2.5em 2.2em; color: var(--cream); overflow: hidden;
}
.hero > .hero__content { position: relative; z-index: 2; }
/* max-width no próprio h1: em `em` ele resolve contra o font-size do h1, não do pai. */
.hero__head .d1 { font-size: 7em; max-width: 9.5em; }
.hero__kicker { margin-bottom: 1.6em; color: var(--gold-2); }
.hero__foot {
  margin-top: 3em; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2em; flex-wrap: wrap;
  border-top: 1px solid rgba(248,246,240,.18); padding-top: 1.6em;
}
.hero__cue { display: flex; align-items: center; gap: .7em; font-size: .7em; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-2); }
.hero__cue i { display: block; width: 1px; height: 2.6em; background: currentColor; opacity: .5; animation: cue 2.2s var(--e-move) infinite; transform-origin: top; }
@keyframes cue { 0%, 100% { transform: scaleY(.25); opacity: .3; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 991px) { .hero__head .d1 { font-size: 5.2em; max-width: 9em; }  }
@media (max-width: 767px) {
  .hero { padding: 7em 1.25em 1.6em; }
  .hero__head .d1 { font-size: 3.4em; max-width: none; }

  .hero__cue { display: none; }

}

/* ---------- 11. Serviços (pin) ---------- */
/* A seção com pin tem que caber na viewport: se for mais alta, o cabeçalho fica preso
   atrás da nav durante todo o pin. `stretch` + `aspect-ratio: auto` faz a imagem seguir
   a altura da lista em vez de ditá-la. */
[data-svc] { min-height: 100svh; display: flex; align-items: center; }
/* O `transform` da imagem pertence ao GSAP (parallax). O hover usa `filter` para não
   competir com o estilo inline — se usar scale aqui, o parallax mata o hover. */

/* ---------- 14. Processo ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5em; }
@media (max-width: 991px) { .steps { grid-template-columns: 1fr 1fr; gap: 2em; }  }
@media (max-width: 479px) { .steps { grid-template-columns: 1fr; }  }

/* ---------- 16. Contato ---------- */
.cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5em; align-items: start; }
.form { display: grid; gap: 1.2em; }
.field { display: grid; gap: .45em; }
.field label { font-size: .7em; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-soft); }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: .7em 0; font-size: 1em; font-weight: 300; color: inherit;
  transition: border-color .4s var(--e-move); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 4em; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--gold); }
.field select option { background: var(--ink); color: var(--cream); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.form__note { font-size: .76em; color: var(--fg-soft); }
.cta__aside li { display: flex; gap: 1em; padding: 1.1em 0; border-bottom: 1px solid var(--line); font-size: .95em; }
.cta__aside li b { color: var(--gold-text); font-weight: 400; flex: none; width: 6.5em; font-size: .78em; letter-spacing: .14em; text-transform: uppercase; padding-top: .25em; }
@media (max-width: 991px) { .cta__grid { grid-template-columns: 1fr; gap: 3em; }  }
@media (max-width: 767px) {
  .cta__aside li { flex-direction: column; gap: .2em; }
  .cta__aside li b { width: auto; padding-top: 0; }

}
@media (max-width: 479px) { .form__row { grid-template-columns: 1fr; }  }

/* ---------- 17. Footer parallax ---------- */
.footer-outer { position: relative; overflow: clip; }
.footer {
  background: var(--ink); color: var(--cream-2);
  --fg: var(--cream-2); --fg-soft: var(--grey-2); --line: rgba(250,250,250,.18);
  --gold-text: var(--blush); --terra-text: var(--blush);
  padding: 6em 2.5em 2em;
}
.footer__top { display: flex; justify-content: space-between; gap: 3em; flex-wrap: wrap; align-items: flex-end; }
.footer__mark { font-family: var(--serif); font-size: 8.5em; line-height: .85; letter-spacing: -.04em; }
.footer__mark em { font-family: var(--serif); font-style: normal; color: var(--gold); }
.footer__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 3em; font-size: .86em; }
.footer__cols h3 { font-family: var(--sans); font-size: .7em; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 1em; font-weight: 400; }
.footer__cols li + li { margin-top: .5em; }
.footer__bottom {
  margin-top: 4em; padding-top: 1.4em; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1.5em; flex-wrap: wrap;
  font-size: .7em; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2);
}
@media (max-width: 991px) { .footer__mark { font-size: 5em; } .footer__cols { grid-template-columns: 1fr 1fr; gap: 2em; }  }
@media (max-width: 767px) { .footer { padding: 4em 1.25em 1.6em; } .footer__mark { font-size: 3.4em; }  }

/* ---------- 18. Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  width: 6.4em; height: 6.4em; margin: -3.2em 0 0 -3.2em; display: none;
}
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }

}

/* ---------- 19. WhatsApp flutuante ---------- */
.wa-float {
  position: fixed; right: 1.1em; bottom: 1.1em; z-index: 80;
  width: 3.6em; height: 3.6em; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 .5em 1.6em rgba(0,0,0,.24);
  transform: scale(0); transition: transform .5s var(--e-soft);
}
.wa-float.is-on { transform: scale(1); }
.wa-float svg { width: 1.8em; height: 1.8em; }

/* ---------- 19b. Feedback de toque ----------
   Em touch o `:hover` nunca dispara — sem isto, nada responde ao dedo. */
@media (hover: none) {
  .btn { transition: color .45s var(--e-move), transform .25s var(--e-move); }
  .btn:active { transform: scale(.97); }
  .btn:active::after { transform: translateY(0); }
  .btn:active { color: var(--ink); }
  .btn--gold:active { color: var(--cream); }

  .menu-btn { transition: transform .25s var(--e-move); }
  .menu-btn:active { transform: scale(.9); }

  .wa-float.is-on:active { transform: scale(.9); }

  .ulink:active::after { transform: scaleX(1); transform-origin: left; }

}

/* ---------- 20. Breakpoints do motor fluido ---------- */
@media screen and (max-width: 991px) { :root { --size-container-ideal: 880; }  }
@media screen and (max-width: 767px) { :root { --size-container-ideal: 430; } .section { padding-block: 4.5em; } .sec-head { margin-bottom: 2.2em; }  }
@media screen and (max-width: 479px) { :root { --size-container-ideal: 400; }  }

/* ---------- 21. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.anim-ready [data-anim="text"] { visibility: visible; }
  .cursor { display: none !important; }

}

/* ==========================================================================
   22. VARIANTES — alternativas por papel (PLAYBOOK §4.2)
   Existem porque 4 builds seguidos saíram idênticos: os 5 componentes de
   assinatura (svc pin, pf follower, gal desalinhada, steps 4-col, tst slider)
   ERAM o visual do site. Enquanto os 5 estiverem sempre presentes, todo build
   é o mesmo build. Escolha uma variante por papel a partir do teardown.
   Todas herdam os tokens: nenhuma introduz px, nenhuma precisa de JS novo
   (a única interativa usa <details>, que é nativo).
   ========================================================================== */

/* --- ABERTURA: hero sem foto ------------------------------------------- */
/* .hero--tipo — só tipografia. Use quando não houver imagem em alta. */
.hero--tipo { justify-content: center; background: var(--ink); }
.hero--tipo .hero__head .d1 { font-size: 9em; max-width: none; }
.hero--tipo .lede { margin-top: 1.6em; }
@media (max-width: 991px) { .hero--tipo .hero__head .d1 { font-size: 5.6em; }  }
@media (max-width: 767px) { .hero--tipo .hero__head .d1 { font-size: 3.6em; }  }

/* .hero--split — texto de um lado, imagem retrato do outro. Resolve acervo
   de foto vertical (Instagram) sem esticar nada. */

/* --- OFERTA: alternativas ao pin --------------------------------------- */

/* --- ACERVO: alternativas ao follower ---------------------------------- */

/* --- IMAGEM: alternativas à galeria desalinhada ------------------------ */

/* --- MÉTODO: alternativas aos 4 passos --------------------------------- */

/* --- VOZ: alternativas ao slider --------------------------------------- */

/* --- CONVERSÃO / FECHO ------------------------------------------------- */