/* Gerado por tools/build.mjs a partir de 01-tokens.css, 02-base.css, 03-nav-hero.css, 04-secoes.css, 05-componentes.css, 06-paginas.css — não edite. */
/* =========================================================================
   01 · TOKENS
   Identidade aprovada: cartão de visita + pasta (PDFs do Canva, set/2026).
   Os hex marcados "amostra" foram medidos pixel a pixel nos PDFs
   rasterizados a 300 dpi — não são cores estimadas. Os "derivados" existem
   para cobrir papéis que o impresso não tem (fundo claro de tela, hover,
   texto secundário) e foram validados em contraste WCAG AA.
   ========================================================================= */
:root {
  /* --- marca ------------------------------------------------------------ */
  --color-bg-dark:        #40240A;  /* amostra · fundo da frente do cartão e da pasta */
  --color-bg-dark-raised: #552F16;  /* amostra · marca d'água do símbolo na pasta */
  --color-surface-taupe:  #B2A99E;  /* amostra · fundo do verso do cartão */
  --color-ink:            #39240B;  /* amostra · nome, CRM e ícones do verso */
  --color-accent-gold:    #7D561B;  /* amostra · subtítulo do verso — 5.75:1 no creme */
  --color-accent-tan:     #ADA68F;  /* amostra · subtítulo da frente e pontos do símbolo — 5.85:1 no marrom */
  --color-silver:         #D2D3D1;  /* amostra · fio do símbolo */
  --color-cream:          #F4F0EA;  /* derivado · o impresso usa branco puro; aquecido na matiz do taupe */

  --color-accent-gold-deep: #6A4712; /* derivado · links sobre claro (6.3:1 no warm) */
  --color-accent-tan-light: #C4BEAA; /* derivado · hover do acento sobre escuro */
  --color-surface-warm:     #E5E0D9; /* derivado · 22% taupe sobre creme */
  --line-on-dark:           #9A8A76; /* derivado · traço das ilustrações sobre marrom (4.25:1) */

  /* texto */
  --ink:          var(--color-ink);
  --ink-muted:    #5E5446;            /* 6.5:1 creme · 5.6:1 warm */
  --ink-muted-on-taupe: #45331F;      /* 5.2:1 sobre taupe */
  --ink-on-dark:  var(--color-cream);
  --muted-on-dark: var(--color-surface-taupe);  /* 6.1:1 sobre marrom */

  /* acento: dourado no claro, tan no escuro (dourado no marrom = 2.2:1) */
  --accent:        var(--color-accent-gold);
  --accent-strong: var(--color-accent-gold-deep);
  --accent-on-dark: var(--color-accent-tan);

  /* superfícies */
  --surface:       var(--color-cream);
  --surface-warm:  var(--color-surface-warm);
  --surface-taupe: var(--color-surface-taupe);
  --surface-dark:  var(--color-bg-dark);
  --hairline:      color-mix(in srgb, var(--color-ink) 14%, transparent);
  --hairline-dark: color-mix(in srgb, var(--color-cream) 18%, transparent);

  /* foco */
  --focus: var(--color-accent-gold);
  --focus-on-dark: var(--color-accent-tan);

  /* --- tipografia ------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* escala fluida — 360px → 1440px */
  --t-eyebrow: clamp(0.688rem, 0.66rem + 0.12vw, 0.75rem);
  --t-micro:   clamp(0.75rem, 0.73rem + 0.1vw, 0.813rem);
  --t-small:   clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --t-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lead:    clamp(1.063rem, 0.99rem + 0.36vw, 1.313rem);
  --t-h4:      clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
  --t-h3:      clamp(1.375rem, 1.22rem + 0.74vw, 1.875rem);
  --t-h2:      clamp(1.875rem, 1.5rem + 1.78vw, 3.25rem);
  --t-h1:      clamp(2.25rem, 1.62rem + 3vw, 4.25rem);
  --t-display: clamp(2.5rem, 1.7rem + 3.8vw, 5rem);

  --lh-tight: 1.06;
  --lh-snug: 1.18;
  --lh-body: 1.66;

  /* --- espaço ----------------------------------------------------------- */
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --space-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --space-block: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --maxw: 75rem;      /* 1200px */
  --maxw-prose: 38rem;
  --maxw-narrow: 52rem;

  /* --- forma ------------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(57,36,11,.06), 0 2px 8px rgba(57,36,11,.05);
  --shadow-md: 0 4px 12px rgba(57,36,11,.07), 0 12px 32px rgba(57,36,11,.07);
  --shadow-lg: 0 8px 24px rgba(57,36,11,.10), 0 28px 64px rgba(57,36,11,.12);

  /* --- movimento --------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --nav-h: 4.5rem;
}

@media (min-width: 64rem) { :root { --nav-h: 5.25rem; } }

/* Celular: respiro entre seções menor — a página é lida em rolagem contínua e
   o espaço vertical é o que mais pesa no comprimento total. */
@media (max-width: 47.99rem) {
  :root {
    --space-section: clamp(3rem, 1.6rem + 6vw, 4.5rem);
    --space-block: clamp(1.25rem, .9rem + 2vw, 1.75rem);
  }
}

/* =========================================================================
   FONTES — auto-hospedadas, subset latin, variáveis
   ========================================================================= */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}
/* Métricas de fallback: evitam salto de layout enquanto a fonte carrega. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman"), local("serif");
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica"), local("sans-serif");
  size-adjust: 102%;
  ascent-override: 103%;
  descent-override: 28%;
  line-gap-override: 0%;
}

/* =========================================================================
   02 · BASE, TIPOGRAFIA, UTILITÁRIOS, BOTÕES, REVEAL
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans), "Manrope Fallback";
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

/* O atributo hidden precisa vencer qualquer display que venhamos a declarar
   depois (a pílula de horário e os passos da triagem dependem disso). */
[hidden] { display: none !important; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--color-accent-tan); color: var(--color-ink); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline-color: var(--focus-on-dark);
}

/* --- tipografia ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display), "Fraunces Fallback";
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--t-h4); line-height: var(--lh-snug); letter-spacing: -0.005em; }

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-sans), "Manrope Fallback";
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 1px;
  background: currentColor;
  opacity: .55;
}
.on-dark .eyebrow { color: var(--accent-on-dark); }

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-muted); }
.on-dark .lead { color: var(--muted-on-dark); }
.prose { max-width: var(--maxw-prose); color: var(--ink-muted); }
.on-dark .prose { color: var(--muted-on-dark); }
.prose > * + * { margin-top: 1.1em; }

/* Texto corrido justificado (pedido do cliente): parágrafos longos sem outro
   tratamento visual — introduções, textos dos heros, biografia, citação e
   respostas do FAQ. Cartões, listas e tabelas continuam alinhados à esquerda. */
.prose, .prose p, .lead, .hero__sub, .faq__resposta p { text-align: justify; }
.secao__topo--centro .lead { text-align: center; }
/* Na coluna estreita do celular, sem hifenização o justificado abre buracos
   entre as palavras ("aliando      conhecimento"). */
@media (max-width: 47.99rem) {
  .prose, .prose p, .lead, .hero__sub, .faq__resposta p { -webkit-hyphens: auto; hyphens: auto; }
  /* Os textos dos heros têm letra maior: no celular, justificados, abriam
     buracos mesmo com hifenização. Ficam alinhados à esquerda. */
  .hero .hero__sub, .hero .lead { text-align: start; -webkit-hyphens: manual; hyphens: manual; }
}

.pull {
  font-family: var(--font-display), "Fraunces Fallback";
  font-size: var(--t-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "WONK" 0;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* --- layout -------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--maxw-narrow)); margin-inline: auto; }

.section { padding-block: var(--space-section); position: relative; }
.section--warm { background: var(--surface-warm); }
/* Taupe = verso do cartão. Dourado sobre taupe não passa AA (2.8:1): aqui o
   texto de apoio escurece e eyebrow/links/foco usam a tinta. */
.section--sand { background: var(--surface-taupe); --ink-muted: var(--ink-muted-on-taupe); --focus: var(--color-ink); }
.section--sand > .wrap > * > .eyebrow { color: var(--ink); }
.section--dark { background: var(--surface-dark); color: var(--ink-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-cream); }

.stack > * + * { margin-top: var(--space-block); }

/* duas colunas editoriais assimétricas */
.duo {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--7-5 { grid-template-columns: 7fr 5fr; }
  .duo--5-7 { grid-template-columns: 5fr 7fr; }
  .duo--start { align-items: start; }
}

/* --- motivo de marca: arco de pontos foliculares ------------------------- */
/* Decoração inspirada na linguagem do símbolo. NÃO é a logo. */
.dots { display: flex; align-items: center; gap: 5px; }
.dots span {
  inline-size: var(--d, 5px);
  block-size: var(--d, 5px);
  border-radius: 50%;
  background: var(--color-accent-tan);
  opacity: var(--o, 1);
}

.rule { block-size: 1px; background: var(--hairline); border: 0; }
.on-dark .rule, .section--dark .rule { background: var(--hairline-dark); }

/* --- botões --------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-bg-dark);
  --btn-fg: var(--color-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-block-size: 3rem;
  padding: .85rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur-fast) linear;
}
/* brilho que atravessa o botão no hover */
.btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 40%;
  inset-inline-start: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start var(--dur-slow) var(--ease-out);
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover::after { inset-inline-start: 115%; }
.btn:active { transform: translateY(0); }

/* Acento: dourado com texto creme no claro (5.75:1); no escuro vira tan com
   texto tinta (6:1) — como o subtítulo da frente do cartão. */
.btn--accent { --btn-bg: var(--color-accent-gold); --btn-fg: var(--color-cream); }
.btn--accent:hover { --btn-bg: var(--color-accent-gold-deep); }
:is(.on-dark, .section--dark, .nav, .menu, .consent) .btn--accent { --btn-bg: var(--color-accent-tan); --btn-fg: var(--color-ink); }
:is(.on-dark, .section--dark, .nav, .menu, .consent) .btn--accent:hover { --btn-bg: var(--color-accent-tan-light); }
.btn--solid-dark:hover { --btn-bg: var(--color-bg-dark-raised); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 26%, transparent);
}
.btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--color-ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
/* .menu e .consent são painéis escuros fora de uma seção .on-dark */
:is(.on-dark, .section--dark, .menu, .consent) .btn--ghost {
  --btn-fg: var(--color-cream);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-cream) 30%, transparent);
}
:is(.on-dark, .section--dark, .menu, .consent) .btn--ghost:hover {
  --btn-bg: color-mix(in srgb, var(--color-cream) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-accent-tan);
}

.btn--block { inline-size: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* link com seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: 2.75rem;      /* alvo de toque de 44px */
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-strong);
  padding-block: .35rem;
  padding-inline: 0;
}
.nowrap { white-space: nowrap; }
.on-dark .link-arrow, .section--dark .link-arrow { color: var(--accent-on-dark); }
.link-arrow svg { transition: transform var(--dur) var(--ease-out); flex: none; }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--down:hover svg { transform: translateY(4px); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }

/* Ícones em botões e links acompanham o tamanho do texto e nunca empurram o
   rótulo para a linha de baixo. */
.btn > svg, .link-arrow > svg {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: none;
}

/* --- acessibilidade ------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--color-bg-dark);
  color: var(--color-cream);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- reveal ao rolar ------------------------------------------------------- */
/* Só transform e opacity. Estado inicial aplicado por JS (classe no <html>)
   para que, sem JS, todo o conteúdo apareça normalmente. */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-anim [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
.js-anim [data-reveal="scale"] { transform: scale(.97); }

/* Deslocamento lateral só onde há espaço. No mobile ele criaria rolagem
   horizontal e obrigaria a depender de overflow-x: hidden. */
@media (min-width: 64rem) {
  .js-anim [data-reveal="left"]  { transform: translate3d(-22px, 0, 0); }
  .js-anim [data-reveal="right"] { transform: translate3d(22px, 0, 0); }
}

/* revelação palavra a palavra */
.word { display: inline-block; }
.js-anim .word {
  opacity: 0;
  transform: translate3d(0, .4em, 0);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 42ms);
}
.js-anim .is-in .word { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal],
  .js-anim .word {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .btn::after { display: none; }
  .btn:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================================
   03 · BARRA DE PROGRESSO, NAVBAR, MENU MOBILE, HERO
   ========================================================================= */

/* --- progresso de leitura -------------------------------------------------- */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 90;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  block-size: 100%;
  inline-size: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-tan));
}

/* --- navbar ----------------------------------------------------------------- */
/* Sempre em vidro marrom: a logo é clara sobre fundo escuro e é assim que
   ela foi desenhada. Evita recolorir a marca. */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 80;
  block-size: var(--nav-h);
  display: flex;
  align-items: center;
  color: var(--color-cream);
  background: color-mix(in srgb, var(--color-bg-dark) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--color-bg-dark) 94%, transparent);
  border-block-end-color: var(--hairline-dark);
  box-shadow: 0 8px 28px rgba(30,17,4,.22);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--color-bg-dark); }
}

/* A largura (com as margens laterais) vem do .wrap; um inline-size: 100% aqui
   colava a logo e o botão nas bordas da tela. */
.nav__inner { display: flex; align-items: center; gap: 1rem; }

/* Lockup horizontal: símbolo OFICIAL da marca + nome tipografado.
   O arquivo da logo só existe em lockup vertical — ver ENTREGA.md. */
.brand { display: inline-flex; align-items: center; gap: .7rem; min-block-size: 2.75rem; text-decoration: none; flex: none; }
.brand__mark { inline-size: auto; block-size: 2.25rem; flex: none; }
@media (min-width: 48rem) { .brand__mark { block-size: 2.6rem; } }
.brand__name {
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: clamp(.875rem, .8rem + .35vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-cream);
  white-space: nowrap;
}
.brand__tag {
  display: none;
  font-family: var(--font-sans), "Manrope Fallback";
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-tan);
  margin-block-start: .2rem;
}
@media (min-width: 30rem) { .brand__tag { display: block; } }

.nav__links { display: none; }
@media (min-width: 64rem) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, -.5rem + 1.9vw, 1.6rem);
    margin-inline-start: auto;
    list-style: none;
    padding: 0;
  }
  .nav__link {
    font-size: var(--t-small);
    font-weight: 500;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-cream) 82%, transparent);
    padding-block: .4rem;
    position: relative;
    white-space: nowrap;
    transition: color var(--dur-fast) linear;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: 1px;
    inline-size: 100%;
    background: var(--color-accent-tan);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--dur) var(--ease-out);
  }
  .nav__link:hover, .nav__link[aria-current="page"], .nav__link.is-atual { color: var(--color-cream); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__link.is-atual::after { transform: scaleX(1); }
}

.nav__cta { display: none; }
@media (min-width: 48rem) {
  .nav__cta { display: inline-flex; margin-inline-start: auto; min-block-size: 2.75rem; padding-inline: 1.35rem; }
}
@media (min-width: 64rem) { .nav__cta { margin-inline-start: clamp(.75rem, 1.5vw, 1.75rem); } }

/* botão hambúrguer */
.nav__burger {
  margin-inline-start: auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--color-cream);
}
@media (min-width: 64rem) { .nav__burger { display: none; } }
@media (min-width: 48rem) { .nav__burger { margin-inline-start: .5rem; } }
.nav__burger span {
  display: block;
  inline-size: 1.25rem;
  block-size: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}
.nav__burger span + span { margin-block-start: 5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* menu mobile em tela cheia */
.menu {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: var(--color-bg-dark);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) max(2rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 64rem) { .menu { display: none; } }
.menu__list { list-style: none; padding: 0; margin: 0; flex: 1; }
.menu__list li + li { border-block-start: 1px solid var(--hairline-dark); }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.05rem;
  min-block-size: 3.25rem;
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--color-cream);
}
.menu__link span { font-family: var(--font-sans), "Manrope Fallback"; font-size: .75rem; color: var(--color-accent-tan); letter-spacing: .1em; }
.menu__foot { padding-block-start: 1.75rem; display: grid; gap: .75rem; }
.menu__meta { font-size: var(--t-small); color: var(--muted-on-dark); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  background: var(--color-bg-dark);
  color: var(--ink-on-dark);
  padding-block-start: calc(var(--nav-h) + clamp(2rem, 1rem + 5vw, 5rem));
  padding-block-end: clamp(3rem, 2rem + 5vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
/* textura sutil: dois halos, sem imagem */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70ch 60ch at 82% 12%, color-mix(in srgb, var(--color-accent-gold) 30%, transparent), transparent 68%),
    radial-gradient(50ch 45ch at 8% 92%, color-mix(in srgb, var(--color-accent-tan) 9%, transparent), transparent 70%);
}
.hero__grid { display: grid; gap: clamp(2.25rem, 1rem + 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem .45rem .6rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--color-cream) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-accent-tan);
}
.hero__selo .dots { --d: 4px; gap: 3px; }

.hero h1 {
  margin-block: 1.5rem 1.25rem;
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-weight: 300;
  letter-spacing: -.028em;
  color: var(--color-cream);
  max-inline-size: 18ch;
}
.hero__sub { max-inline-size: 46ch; color: var(--muted-on-dark); }
.hero .actions { margin-block-start: 2rem; }
.hero__micro {
  margin-block-start: 2rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--hairline-dark);
  font-size: var(--t-micro);
  letter-spacing: .05em;
  color: var(--muted-on-dark);
}

/* Home: assinatura do médico e atalhos dos tratamentos. No celular os
   atalhos vêm logo depois do convite (ordem do HTML); do desktop em diante
   ocupam uma faixa própria, por baixo do texto e do retrato. */
.hero__assinatura {
  margin-block-start: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: var(--t-small);
  line-height: 1.45;
  font-weight: 600;          /* nome e CRM em destaque, como no PDF aprovado */
  color: var(--color-cream);
}
.hero--home .actions { margin-block-start: 1.75rem; }
.hero__trats ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.hero__trats li { display: flex; }
.hero__trat { flex: 1; padding: .7rem 1rem; line-height: 1.25; }
@media (min-width: 60rem) {
  /* O hero inteiro, atalhos inclusive, cabe na primeira tela de um notebook:
     o retrato cede altura em vez de empurrar os atalhos para baixo da dobra. */
  .hero--home { padding-block: calc(var(--nav-h) + 2rem) 2.5rem; }
  .hero--home .hero__portrait {
    aspect-ratio: auto;
    block-size: clamp(30rem, calc(100svh - var(--nav-h) - 12rem), 46rem);
  }
  .hero--home .hero__grid { row-gap: clamp(2rem, 1rem + 2vw, 2.5rem); }
  .hero--home .hero__texto { grid-column: 1; grid-row: 1; }
  .hero--home .hero__media { grid-column: 2; grid-row: 1; }
  .hero--home .hero__trats {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-block-start: clamp(1.5rem, 1rem + 1vw, 2rem);
    border-block-start: 1px solid var(--hairline-dark);
  }
  .hero__trats ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

/* retrato + linha frontal desenhada */
.hero__media { position: relative; }
.hero__portrait {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-bg-dark-raised) var(--lqip, none) center / cover;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 60rem) { .hero__portrait { aspect-ratio: 3 / 4; } }
@media (max-width: 47.99rem) { .hero__portrait { aspect-ratio: 1 / 1; } }
.hero__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, transparent 45%, color-mix(in srgb, var(--color-bg-dark) 72%, transparent));
  pointer-events: none;
}
.hero__line {
  position: absolute;
  inset-block-start: 4%;
  inset-inline-end: -6%;
  inline-size: 46%;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(30,17,4,.45));
}
.hero__caption {
  position: absolute;
  inset-block-end: 1.15rem;
  inset-inline: 1.15rem;
  z-index: 2;
  font-size: var(--t-micro);
  letter-spacing: .04em;
  color: var(--color-cream);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.hero__caption .dots { --d: 4px; gap: 3px; }

/* indicador de rolagem */
.hero__scroll {
  margin-block-start: clamp(2.5rem, 1rem + 4vw, 4rem);
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  gap: .65rem;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  text-decoration: none;
}
/* No celular o retrato vem logo abaixo: a dica de rolagem sobra. */
@media (max-width: 59.99rem) { .hero__scroll { display: none; } }
.hero__scroll i {
  display: block;
  inline-size: 1px;
  block-size: 2.25rem;
  background: linear-gradient(var(--color-accent-tan), transparent);
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(.35); transform-origin: 50% 0; opacity: .5; }
  50%      { transform: scaleY(1);   transform-origin: 50% 0; opacity: 1; }
}

/* Entrada encadeada do hero (< 1,2 s).
   ATENÇÃO: o H1 e o retrato NÃO podem começar com opacity: 0. Um elemento
   invisível não entra na disputa do Largest Contentful Paint, e a métrica
   acabaria caindo em qualquer coisa pintada depois. Por isso eles sobem só com
   transform — que não adia a pintura — e o fade fica para os itens menores. */
.js-anim .hero__in {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: heroIn .8s var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
.js-anim .hero__in--lcp {
  opacity: 1;
  transform: translate3d(0, 14px, 0);
  animation: heroSobe .7s var(--ease-out) forwards;
}
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroSobe { to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-anim .hero__in, .js-anim .hero__in--lcp { animation: none; opacity: 1; transform: none; }
  .hero__scroll i { animation: none; }
}

/* traço da linha frontal desenhando-se */
.draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.js-anim .draw.is-in { animation: draw 1.6s var(--ease-out) forwards; animation-delay: var(--draw-delay, 0ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw { stroke-dashoffset: 0 !important; animation: none !important; } }
html:not(.js-anim) .draw { stroke-dashoffset: 0; }

/* =========================================================================
   04 · SEÇÕES 2–21
   ========================================================================= */

/* --- 2 · Você começou a perceber ------------------------------------------- */
.percebeu__linhas { list-style: none; padding: 0; margin: 0; max-inline-size: 44ch; }
.percebeu__linhas li {
  position: relative;
  padding-inline-start: 2.25rem;
  padding-block: clamp(.7rem, .5rem + .8vw, .9rem);
  font-size: var(--t-lead);
  line-height: 1.5;
  border-block-end: 1px solid var(--hairline);
}
.percebeu__linhas li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.55em;
  inline-size: 1.25rem;
  block-size: 1px;
  background: var(--accent);
}
.percebeu__linhas li:last-child {
  border-block-end: 0;
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink);
}

/* --- 3 · Grid dos 5 fatores -------------------------------------------------- */
/* 1 coluna no celular, 3+2 no tablet, 5 lado a lado no desktop (sem órfão). */
.fatores__grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  align-items: start;
}
@media (min-width: 64rem) { .fatores__grid { grid-template-columns: repeat(5, 1fr); } }
.fator {
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.fator:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--color-surface-taupe), var(--shadow-sm); }
.fator.is-open { box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-sm); }
.fator__btn {
  inline-size: 100%;
  text-align: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-block-size: 2.75rem;
}
.fator__rotulo { font-weight: 600; font-size: var(--t-small); letter-spacing: .005em; }
.fator__sinal { flex: none; inline-size: 1.1rem; block-size: 1.1rem; color: var(--accent); transition: transform var(--dur) var(--ease-out); }
.fator__btn[aria-expanded="true"] .fator__sinal { transform: rotate(45deg); }
.fator__texto {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.fator__texto.is-open { grid-template-rows: 1fr; }
.fator__texto > div { overflow: hidden; }
.fator__texto p { padding-block-start: .6rem; font-size: var(--t-small); color: var(--ink-muted); line-height: 1.55; }

/* --- 4 · Naturalidade ------------------------------------------------------- */
.destaque {
  text-align: center;
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.destaque .pull { max-inline-size: 22ch; margin-inline: auto; color: var(--ink); }
.section--dark .destaque .pull { color: var(--color-cream); }
.destaque .dots { justify-content: center; margin-block-end: 1.75rem; }
.destaque--fecho { padding-block-end: 0; }

/* --- 5 · Linha frontal + técnica + barba e sobrancelha (seção única #fue) ----
   Um palco fixo (sticky) com o boneco e, ao lado, os passos que trocam a cena.
   No celular o palco fica no topo e o texto corre por baixo dele. */
.estudio {
  display: grid;
  gap: 1.5rem clamp(2rem, 1rem + 3vw, 4rem);
  margin-block-start: var(--space-block);
}
@media (min-width: 60rem) { .estudio { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); align-items: start; } }
.estudio__col { position: sticky; inset-block-start: calc(var(--nav-h) + .5rem); z-index: 4; }
@media (min-width: 60rem) { .estudio__col { inset-block-start: calc(var(--nav-h) + 1.5rem); } }
.estudio__painel {
  padding: clamp(.6rem, .35rem + 1vw, 1.1rem);
  border-radius: var(--r-lg);
  background: var(--color-bg-dark);
  color: var(--ink-on-dark);
  box-shadow: var(--shadow-md);
}
.estudio__painel .linha__legenda { margin-block-start: .6rem; padding-block-start: .55rem; }

/* as ilustrações 2D (fallback e preview do 3D) ficam empilhadas; a cena mostra uma */
.estudio__fig {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
.estudio__fig svg { inline-size: 100%; block-size: 100%; }
.estudio__fig.is-atual { opacity: 1; visibility: visible; transition-delay: 0s; }
.estudio__palco.is-3d .estudio__fig[data-fig] { opacity: 0; visibility: hidden; }
/* só os marcadores da cena atual (11-bonecos.js troca a classe) */
.estudio__palco .boneco__marca { display: none; }
.estudio__palco .boneco__marca.is-do-grupo { display: grid; }
/* No celular só a história da FUE precisa do palco fixo: nas outras páginas
   (um passo só) e nas abas da Home ele rola junto com o texto. */
@media (max-width: 59.99rem) {
  .estudio:not(.estudio--historia) .estudio__col { position: static; }
}

/* sem JS: sem sticky, as quatro ilustrações uma embaixo da outra */
html:not(.js-anim) .estudio__col { position: static; }
html:not(.js-anim) .estudio__palco { aspect-ratio: auto; display: grid; gap: 1rem; }
html:not(.js-anim) .estudio__fig { position: static; opacity: 1; visibility: visible; aspect-ratio: 4 / 3; }

.estudio__passos { display: grid; gap: clamp(2.25rem, 1.25rem + 3vw, 4rem); }
.estudio__passo h3 { max-inline-size: 22ch; margin-block-end: .9rem; }
.estudio__passo h4 { font-size: var(--t-h4); margin-block: 1.75rem .9rem; }
.estudio__passo > h4:first-child { margin-block-start: 0; }
.estudio__cta { margin-block-start: 1.25rem; }

/* slider da linha frontal (agora sobre fundo claro; o desenho está no boneco) */
.linha__controle { margin-block-start: 1.5rem; }
.linha__extremos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-block-end: .4rem;
}
.linha__range {
  inline-size: 100%;
  appearance: none;
  background: transparent;
  block-size: 2.75rem;
  cursor: grab;
}
.linha__range:active { cursor: grabbing; }
.linha__range::-webkit-slider-runnable-track {
  block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--pct, 50%), var(--hairline) var(--pct, 50%));
}
.linha__range::-moz-range-track {
  block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--pct, 50%), var(--hairline) var(--pct, 50%));
}
.linha__range::-webkit-slider-thumb {
  appearance: none;
  inline-size: 1.5rem; block-size: 1.5rem;
  margin-block-start: -.6875rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: box-shadow var(--dur-fast) linear;
}
.linha__range::-moz-range-thumb {
  inline-size: 1.5rem; block-size: 1.5rem; border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
}
.linha__range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent); }
.linha__saida { margin-block-start: .75rem; min-block-size: 5rem; }
.linha__saida-titulo {
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--accent-strong);
  margin-block-end: .35rem;
}
.linha__saida p { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; }
.linha__legenda {
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--hairline-dark);
  font-size: var(--t-micro);
  color: var(--muted-on-dark);
  font-style: italic;
}

/* FUE em 3 passos — empilhados, cada um cruza o meio da tela e troca a cena */
.fue__quadros { display: grid; gap: 1rem; margin-block-start: 1.5rem; }
.quadro {
  display: grid;
  grid-template-columns: auto 1fr;      /* número ao lado do título */
  column-gap: .85rem;
  align-items: baseline;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--hairline);
  position: relative;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.quadro.is-active { box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-md); transform: translateY(-4px); }
.quadro__num {
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: 1.25rem;
  color: var(--ink-muted);
  letter-spacing: .04em;
}
.quadro.is-active .quadro__num { color: var(--accent); }
.quadro h4 { margin: 0; }
.quadro p { grid-column: 1 / -1; margin-block-start: .4rem; font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; }
.fue__cena { opacity: .07; transition: opacity var(--dur-slow) var(--ease); }
.fue__cena.is-active { opacity: 1; }

/* No-Shave: variação da técnica, não um quarto passo */
.noshave {
  display: grid;
  gap: .6rem;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
  border-radius: var(--r-lg);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.noshave .selo { justify-self: start; }
.noshave h3 { font-size: var(--t-h4); margin-block-start: .35rem; }
.noshave p { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; }
.selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem .3rem .65rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.selo .dots { gap: 3px; }

/* --- o palco do boneco (2D sempre, 3D sob demanda) ------------------------------- */
.boneco__palco {
  position: relative;
  aspect-ratio: 4 / 3;       /* igual ao viewBox das ilustrações: os marcadores em % casam */
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(80% 75% at 50% 42%, var(--color-bg-dark-raised), var(--color-bg-dark) 78%);
}
.boneco__palco:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 3px; }
.boneco__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100% !important;
  block-size: 100% !important;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  cursor: grab;
  touch-action: pan-y;          /* arrastar na horizontal gira; na vertical rola a página */
}
.boneco__palco.is-arrastando .boneco__canvas { cursor: grabbing; }
.boneco__palco.is-3d .boneco__canvas { opacity: 1; }

/* zonas da ilustração 2D */
.estudio__fig .zona { fill: var(--color-accent-tan); color: var(--color-accent-tan); opacity: .8; transition: opacity var(--dur) var(--ease), fill var(--dur) var(--ease); }
.estudio__fig[data-ativo] .zona { opacity: .22; }
.estudio__fig .zona.is-ativa { opacity: 1; fill: var(--color-cream); color: var(--color-cream); }

/* marcadores numerados sobre a figura (o controle acessível são os chips) */
.boneco__marca {
  position: absolute;
  z-index: 2;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  translate: -50% -50%;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur) var(--ease);
}
.boneco__palco.is-3d .boneco__marca { left: 0 !important; top: 0 !important; translate: none; }
.boneco__marca.is-oculta { opacity: 0; pointer-events: none; }
.boneco__marca i, .boneco__ponto i, .boneco__glossario i {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: .75rem;
  font-weight: 700;
}
.boneco__marca i {
  color: var(--color-cream);
  background: color-mix(in srgb, var(--color-bg-dark) 72%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent-tan);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear, transform var(--dur) var(--ease-out);
}
.boneco__marca::before {        /* pulso discreto: só transform e opacity */
  content: "";
  position: absolute;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--color-accent-tan);
  animation: pulsoMarca 2.6s var(--ease) infinite;
}
@keyframes pulsoMarca { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.boneco__marca:hover i { transform: scale(1.12); }
.boneco__marca.is-ativa i { background: var(--color-accent-tan); color: var(--color-ink); }
.boneco__marca.is-ativa::before { animation: none; opacity: 0; }

.boneco__dica {
  position: absolute;
  z-index: 2;
  inset-inline-start: .8rem;
  inset-block-end: .7rem;
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.boneco__palco.is-3d .boneco__dica { opacity: 1; }
.boneco__palco.is-tocado .boneco__dica { opacity: 0; }
/* chips dos pontos e texto do ponto escolhido (sobre fundo claro) */
.boneco__pontos { display: flex; flex-wrap: wrap; gap: .5rem; }
.boneco__ponto {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: 2.75rem;
  padding: .35rem 1rem .35rem .5rem;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.boneco__ponto i, .boneco__glossario i { color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent); }
.boneco__ponto:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.boneco__ponto[aria-pressed="true"] { background: var(--color-bg-dark); color: var(--color-cream); box-shadow: none; }
.boneco__ponto[aria-pressed="true"] i { color: var(--color-cream); box-shadow: inset 0 0 0 1.5px var(--color-accent-tan); }
.boneco__saida { margin-block-start: 1rem; min-block-size: 4.5rem; }
.boneco__saida-titulo {
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--accent-strong);
  margin-block-end: .3rem;
}
.boneco__saida-titulo:empty { display: none; }
.boneco__saida-texto { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; }
.boneco__glossario { display: grid; gap: .75rem; margin-block-start: 1rem; }
.boneco__glossario dt { display: flex; align-items: center; gap: .55rem; font-size: var(--t-small); font-weight: 600; }
.boneco__glossario dd { margin: .2rem 0 0 2.05rem; font-size: var(--t-small); color: var(--ink-muted); line-height: 1.55; }
.js-anim .boneco__glossario { display: none; }
html:not(.js-anim) .boneco__marca, html:not(.js-anim) .boneco__pontos { display: none; }
@media (prefers-reduced-motion: reduce) { .boneco__marca::before { animation: none; opacity: 0; } }

/* --- 7 · Timeline do método --------------------------------------------------- */
.metodo__trilha { position: relative; display: grid; gap: 0; }
.metodo__passo {
  position: relative;
  padding-inline-start: 3.25rem;
  padding-block: 1.5rem;
}
.metodo__passo::before { /* trilho */
  content: "";
  position: absolute;
  inset-inline-start: .9375rem;
  inset-block: 0;
  inline-size: 1px;
  background: var(--hairline);
}
.metodo__passo:first-child::before { inset-block-start: 1.5rem; }
.metodo__passo:last-child::before { inset-block-end: calc(100% - 2.6rem); }
.metodo__bolha {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.55rem;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.section--warm .metodo__bolha, .section--sand .metodo__bolha { background: var(--color-cream); }
.metodo__passo.is-in .metodo__bolha {
  background: var(--color-bg-dark);
  color: var(--color-accent-tan);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent-tan) 22%, transparent);
}
.metodo__passo h3 { margin-block-end: .5rem; }
.metodo__passo p { color: var(--ink-muted); max-inline-size: 52ch; }
@media (max-width: 63.99rem) {
  .metodo__passo { padding-block: 1.1rem; }
  .metodo__bolha { inset-block-start: 1.15rem; }
  .metodo__passo:first-child::before { inset-block-start: 1.1rem; }
  .metodo__passo:last-child::before { inset-block-end: calc(100% - 2.2rem); }
}

@media (min-width: 64rem) {
  .metodo__trilha { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .metodo__passo { padding-inline-start: 0; padding-block: 3.5rem 0; }
  .metodo__passo::before { inset-block: 0 auto; inset-inline: 0 0; block-size: 1px; inline-size: 100%; inset-block-start: .9375rem; }
  .metodo__passo:first-child::before { inset-inline-start: 50%; inline-size: 50%; inset-block-start: .9375rem; }
  .metodo__passo:last-child::before { inset-inline-end: 50%; inline-size: 50%; inset-block-end: auto; }
  .metodo__bolha { inset-block-start: 0; inset-inline-start: 0; }
  .metodo__passo:first-child::before { inset-inline-start: 1rem; inline-size: calc(100% - 1rem); }
  .metodo__passo:last-child::before { display: none; }  /* a trilha termina no último marcador */
  .metodo__passo h3 { margin-block-start: 1.5rem; font-size: var(--t-h4); }
  .metodo__passo p { padding-inline-end: 1.5rem; }
}

/* --- 9 · Diferenciais ---------------------------------------------------------- */
.cards3 { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border-radius: var(--r-md);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--color-surface-taupe), var(--shadow-md); }
.card__icone { display: block; inline-size: 2.5rem; block-size: 2.5rem; color: var(--accent); margin-block-end: 1.15rem; }
.card h3 { margin-block-end: .6rem; }
.card p { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.65; }
/* Celular: ícone ao lado do título. */
@media (max-width: 51.99rem) {
  .card { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
  .card > * { grid-column: 1 / -1; }
  .card__icone { grid-column: 1; grid-row: 1; margin: 0; inline-size: 2rem; block-size: 2rem; }
  .card h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .card p { margin-block-start: .6rem; }
}

/* --- imagens de seção ---------------------------------------------------------- */
.figura {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-bg-dark-raised) var(--lqip, none) center / cover;
  box-shadow: var(--shadow-md);
}
.figura img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--pos, 50% 22%); }
.figura--retrato { aspect-ratio: 4 / 5; }
.figura--alto { aspect-ratio: 3 / 4; }
/* No celular a foto ocupa a largura toda: quadrada, com o rosto no --pos. */
@media (max-width: 47.99rem) {
  .figura--retrato, .figura--alto { aspect-ratio: 1 / 1; }
  /* São cinco retratos da mesma sessão; no celular ficam três (hero, Sobre e
     convite final). Com display:none o navegador nem baixa a imagem lazy. */
  .figura--sem-mobile { display: none; }
}
.figura::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-cream) 12%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

/* --- 11 · Mini-triagem ------------------------------------------------------------ */
.quiz {
  border-radius: var(--r-lg);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
  padding: clamp(1.35rem, 1rem + 1.8vw, 2.5rem);
  max-inline-size: 46rem;
  margin-inline: auto;
}
.quiz__barra { display: flex; gap: .35rem; margin-block-end: 1.5rem; }
.quiz__barra i {
  block-size: 3px;
  flex: 1;
  border-radius: 2px;
  background: var(--hairline);
  transition: background-color var(--dur) var(--ease);
}
.quiz__barra i.is-done { background: var(--accent); }
.quiz__contagem { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.quiz__pergunta { margin-block: .65rem 1.35rem; }
.quiz__opcoes { display: grid; gap: .55rem; }
@media (min-width: 40rem) { .quiz__opcoes { grid-template-columns: repeat(2, 1fr); } }
.quiz__opcao {
  text-align: start;
  min-block-size: 3.25rem;
  padding: .85rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--surface-warm);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--t-small);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .75rem;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) linear;
}
.quiz__opcao::before {
  content: "";
  flex: none;
  inline-size: .5rem; block-size: .5rem;
  border-radius: 50%;
  background: var(--color-surface-taupe);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) linear;
}
.quiz__opcao:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1.5px var(--accent); }
.quiz__opcao:hover::before { background: var(--accent); transform: scale(1.35); }
.quiz__passo[hidden] { display: none; }
.quiz__voltar { margin-block-start: 1.15rem; }
.quiz__resultado { text-align: center; }
.quiz__resultado .dots { justify-content: center; margin-block-end: 1.25rem; }
.quiz__resumo {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  margin-block: 1.35rem;
}
.quiz__tag {
  font-size: var(--t-micro);
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
  background: var(--surface-warm);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink-muted);
}
.quiz__aviso { margin-block-start: 1.25rem; font-size: var(--t-micro); color: var(--ink-muted); font-style: italic; }

/* --- 13 · Autoridade ------------------------------------------------------------- */
.principios { display: grid; gap: 1px; background: var(--hairline-dark); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 40rem) { .principios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .principios { grid-template-columns: repeat(4, 1fr); } }
.principio { background: var(--color-bg-dark); padding: 1.5rem 1.35rem; }
.principio__icone { display: block; inline-size: 1.75rem; block-size: 1.75rem; color: var(--color-accent-tan); margin-block-end: .9rem; }
.principio h3 { font-size: 1.0625rem; line-height: var(--lh-snug); color: var(--color-cream); margin-block-end: .35rem; }
.principio p { font-size: var(--t-small); color: var(--muted-on-dark); line-height: 1.55; }

/* --- 14 · Sobre -------------------------------------------------------------------- */
.sobre__id { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin-block-end: .35rem; }
.sobre__crm {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--surface-warm);
}
.sobre__atuacao { font-size: var(--t-small); letter-spacing: .04em; color: var(--ink-muted); margin-block-end: 1.5rem; }
.sobre__id + .prose { margin-block-start: 1.5rem; }
.sobre__id ~ .prose + .prose { margin-block-start: 1em; }
.formacao { list-style: none; padding: 0; margin-block-start: 1.75rem; }
.formacao li { padding-block: .85rem; border-block-start: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; }
.formacao strong { font-weight: 600; font-size: var(--t-small); }
.formacao span { font-size: var(--t-small); color: var(--ink-muted); }
.video-slot {
  margin-block-start: 1.75rem;
  padding: 1.35rem;
  border-radius: var(--r-md);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-surface-taupe) 22%, transparent);
  display: flex; align-items: center; gap: 1rem;
}
.video-slot svg { flex: none; inline-size: 2.25rem; block-size: 2.25rem; color: var(--accent); }
.video-slot p { font-size: var(--t-small); color: var(--ink-muted); }
.video-slot strong { display: block; color: var(--ink); font-size: var(--t-small); }

/* --- 15 · Clínica em construção ------------------------------------------------------ */
.galeria {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 22rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-block-end: 1rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
@media (min-width: 64rem) { .galeria { grid-auto-columns: 24rem; } }
.galeria > * { scroll-snap-align: start; }
.slot {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-bg-dark-raised) 92%, transparent), var(--color-bg-dark));
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--muted-on-dark);
}
/* textura de linhas finas, sem imagem */
.slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, color-mix(in srgb, var(--color-cream) 5%, transparent) 0 1px, transparent 1px 14px);
}
.slot__etapa {
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: var(--t-h3);
  color: var(--color-accent-tan);
  position: relative;
}
.slot p { font-size: var(--t-small); position: relative; margin-block-start: .5rem; max-inline-size: 30ch; }
.slot .dots { justify-content: center; margin-block-end: 1rem; position: relative; }
.galeria__nota { font-size: var(--t-micro); color: var(--muted-on-dark); font-style: italic; margin-block-start: .5rem; }

/* --- 18 · FAQ ------------------------------------------------------------------------- */
.faq { max-inline-size: 48rem; }
.faq__item { border-block-end: 1px solid var(--hairline); }
.faq__item:first-child { border-block-start: 1px solid var(--hairline); }
.faq__botao {
  inline-size: 100%;
  text-align: start;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.35rem;
  min-block-size: 3.5rem;
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--dur-fast) linear;
}
@media (max-width: 47.99rem) { .faq__botao { padding-block: .85rem; } }
.faq__botao:hover { color: var(--accent); }
.faq__sinal { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .25rem; color: var(--accent); transition: transform var(--dur) var(--ease-out); }
.faq__botao[aria-expanded="true"] .faq__sinal { transform: rotate(45deg); }
.faq__resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.faq__resposta.is-open { grid-template-rows: 1fr; }
.faq__resposta > div { overflow: hidden; }
.faq__resposta p { padding-block-end: 1.5rem; color: var(--ink-muted); max-inline-size: 60ch; }

/* --- 19 · CTV final --------------------------------------------------------------------- */
.ctv { position: relative; overflow: hidden; isolation: isolate; }
.ctv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60ch 50ch at 78% 30%, color-mix(in srgb, var(--color-accent-gold) 28%, transparent), transparent 70%);
}
.ctv__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .ctv__grid { grid-template-columns: 7fr 5fr; } }
.ctv h2 { max-inline-size: 16ch; }
.ctv .prose { max-inline-size: 46ch; }
/* Celular: o retrato do convite vira um avatar acima do título — fecha o
   ciclo com o hero sem mais uma foto de tela inteira. */
@media (max-width: 59.99rem) {
  .ctv__foto { order: -1; inline-size: 6.5rem; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-tan) 30%, transparent); }
  .ctv__foto img { transform: scale(2.3); transform-origin: 51% 33%; }   /* rosto */
  .ctv__grid { gap: 1.5rem; }
}

/* --- 20 · Localização --------------------------------------------------------------------- */
.local__grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); }
@media (min-width: 60rem) { .local__grid { grid-template-columns: 5fr 7fr; align-items: start; } }
.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem .4rem .7rem;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--surface-warm);
  color: var(--ink);
}
.status__ponto { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--ink-muted); flex: none; }
.status[data-aberto="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface-warm)); }
.status[data-aberto="true"] .status__ponto { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.horarios { list-style: none; padding: 0; margin-block-start: 1.5rem; }
.horarios li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-block-end: 1px solid var(--hairline); font-size: var(--t-small); }
.horarios li:last-child { border-block-end: 0; }
.horarios span:first-child { color: var(--ink-muted); }
.horarios span:last-child { font-weight: 600; }
.endereco { font-style: normal; font-size: var(--t-body); line-height: 1.7; color: var(--ink-muted); }
.endereco strong { display: block; color: var(--ink); font-weight: 600; }

.mapa {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-bg-dark);
  box-shadow: var(--shadow-md);
}
@media (min-width: 60rem) { .mapa { aspect-ratio: 4 / 3; } }
@media (max-width: 47.99rem) { .mapa { aspect-ratio: 16 / 9; } }
.mapa iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.mapa__facade {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .9rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--ink-on-dark);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-cream) 5%, transparent) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-cream) 5%, transparent) 0 1px, transparent 1px 42px),
    var(--color-bg-dark);
}
.mapa__facade p { font-size: var(--t-micro); color: var(--muted-on-dark); max-inline-size: 34ch; }
.mapa__pino { inline-size: 2rem; block-size: 2rem; color: var(--color-accent-tan); }

/* --- 21 · Rodapé ------------------------------------------------------------------------- */
.rodape { background: var(--color-bg-dark); color: var(--ink-on-dark); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; }
/* no celular, espaço para a barra de agendamento não cobrir Termos e Privacidade */
@media (max-width: 47.9375rem) { .rodape { padding-block-end: calc(6.5rem + env(safe-area-inset-bottom)); } }
.rodape__topo { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: 1fr 1fr; }
.rodape__topo > :first-child, .rodape__topo > :last-child { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .rodape__topo { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
  .rodape__topo > :first-child, .rodape__topo > :last-child { grid-column: auto; }
}
.rodape__marca { display: flex; align-items: center; gap: .85rem; margin-block-end: 1.5rem; }
.rodape__marca img { inline-size: auto; block-size: 3.25rem; }
.rodape__marca span {
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: 1.0625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-cream);
}
.rodape__marca small {
  display: block;
  font-family: var(--font-sans), "Manrope Fallback";
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-tan);
  margin-block-start: .25rem;
}
.rodape__titulo {
  font-family: var(--font-sans), "Manrope Fallback";
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-tan);
  margin-block-end: 1rem;
}
.rodape ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.rodape li { font-size: var(--t-small); color: var(--muted-on-dark); line-height: 1.5; }
.rodape a { color: var(--muted-on-dark); text-decoration: none; font-size: var(--t-small); transition: color var(--dur-fast) linear; }
.rodape a:hover { color: var(--color-cream); }
.rodape p { font-size: var(--t-small); color: var(--muted-on-dark); }
.rodape__nap { font-style: normal; font-size: var(--t-small); color: var(--muted-on-dark); line-height: 1.7; }
/* Em telas estreitas os links densos do rodapé e do endereço ganham altura de
   toque confortável; no desktop ficariam desnecessariamente soltos. */
@media (max-width: 63.9375rem) {
  .rodape ul { gap: 0; }
  .rodape li > a,
  .rodape li > button,
  .endereco a,
  .rodape__creditos a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }
}

.rodape__base { margin-block-start: 3rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--hairline-dark); display: grid; gap: 1.25rem; }
.rodape__aviso { font-size: var(--t-micro); line-height: 1.6; color: var(--muted-on-dark); max-inline-size: 70ch; }
.rodape__creditos { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: var(--t-micro); color: var(--muted-on-dark); }

/* =========================================================================
   05 · ELEMENTOS GLOBAIS, MODAL DE AGENDAMENTO, CONSENTIMENTO
   ========================================================================= */

/* --- WhatsApp flutuante ------------------------------------------------------ */
/* ÚNICO botão que abre o WhatsApp direto, sem pop-up. */
.zap {
  position: fixed;
  inset-inline-end: clamp(.85rem, .5rem + 1vw, 1.5rem);
  inset-block-end: calc(clamp(.85rem, .5rem + 1vw, 1.5rem) + env(safe-area-inset-bottom));
  z-index: 70;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-bg-dark);
  color: var(--color-accent-tan);
  box-shadow: 0 6px 20px rgba(30,17,4,.3);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast) linear;
}
.zap:hover { transform: translateY(-3px) scale(1.04); background: var(--color-bg-dark-raised); }
.zap svg { inline-size: 1.65rem; block-size: 1.65rem; }
.zap::before { /* pulso discreto */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-tan) 45%, transparent);
  animation: pulso 3.4s var(--ease) infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-tan) 40%, transparent); }
  60%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* No celular o WhatsApp não flutua sobre o texto: entra na barra do rodapé,
   no espaço à direita de "Agendar avaliação", e aparece junto com ela. */
@media (max-width: 47.9375rem) {
  .zap {
    inset-inline-end: var(--gutter);
    inset-block-end: calc(.7rem + env(safe-area-inset-bottom));
    inline-size: 3rem;
    block-size: 3rem;
    box-shadow: none;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease), visibility 0s linear 0s;
  }
  .zap svg { inline-size: 1.45rem; block-size: 1.45rem; }
  .zap::before { animation: none; }
  .zap:hover { transform: none; }
  body:not(.barra-visivel) .zap {
    opacity: 0;
    visibility: hidden;
    transform: translateY(110%);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
}

/* --- barra fixa de CTA (mobile) ------------------------------------------------ */
.barra {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 69;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-cream) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.barra .btn { inline-size: calc(100% - 3.75rem); max-inline-size: 26rem; }
body.barra-visivel .barra { transform: none; }
@media (min-width: 48rem) { .barra { display: none; } }

/* --- voltar ao topo -------------------------------------------------------------- */
.topo {
  position: fixed;
  inset-inline-end: clamp(.85rem, .5rem + 1vw, 1.5rem);
  inset-block-end: calc(clamp(.85rem, .5rem + 1vw, 1.5rem) + 4.25rem + env(safe-area-inset-bottom));
  z-index: 68;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-cream) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
  color: var(--color-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
body.mostrar-topo .topo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* No celular ele cobria o fim das linhas e o "+" do FAQ: fica só do tablet para cima. */
@media (max-width: 47.9375rem) { .topo { display: none; } }

/* =========================================================================
   MODAL DE AGENDAMENTO
   Abre a partir de TODOS os botões de WhatsApp, exceto o flutuante.
   ========================================================================= */
.modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.modal::backdrop { background: rgba(30,17,4,.55); backdrop-filter: blur(3px); }
.modal__pos {
  min-block-size: 100%;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0;
}
@media (min-width: 40rem) { .modal__pos { align-items: center; padding: 1.5rem; } }

.modal__caixa {
  inline-size: 100%;
  max-inline-size: 30rem;
  background: var(--color-cream);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
  max-block-size: min(92dvh, 46rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px);
  opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
@media (min-width: 40rem) { .modal__caixa { border-radius: var(--r-xl); transform: translateY(0) scale(.96); } }
.modal[open] .modal__caixa { transform: none; opacity: 1; }
.modal.is-fechando .modal__caixa { transform: translateY(24px); opacity: 0; }

/* A caixa tem altura máxima; o que ela limita precisa chegar até o corpo
   rolável. Cada invólucro (a vista do formulário e o <form>) é coluna flex
   com min-block-size 0 — senão o corpo cresce além da caixa, o excesso é
   cortado e o botão de enviar some sem dar para rolar até ele. */
.modal__vista { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; }

/* alça de arraste (bottom sheet) */
.modal__alca {
  padding: .65rem 0 .25rem;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  flex: none;
}
.modal__alca::before { content: ""; inline-size: 2.5rem; block-size: 4px; border-radius: 2px; background: var(--hairline); }
.modal__alca:active { cursor: grabbing; }
@media (min-width: 40rem) { .modal__alca { display: none; } }

.modal__topo {
  padding: 1rem var(--modal-pad, 1.5rem) .75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: none;
}
.modal__topo h2 { font-size: var(--t-h3); }
.modal__apoio { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.5; margin-block-start: .4rem; }
.modal__fechar {
  margin-inline-start: auto;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.modal__fechar:hover { background: var(--surface-warm); color: var(--ink); }
.modal__status { margin-block-start: .75rem; }

.modal__corpo {
  padding: .25rem var(--modal-pad, 1.5rem) 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;          /* rolar o formulário não rola a página atrás */
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-block-size: 0;
}
.modal__pe { padding: 0 var(--modal-pad, 1.5rem) max(1.25rem, env(safe-area-inset-bottom)); flex: none; }

/* campos */
.campo { margin-block-start: 1.1rem; }
.campo > label, .campo__legenda {
  display: block;
  font-size: var(--t-small);
  font-weight: 600;
  margin-block-end: .45rem;
  padding: 0;
}
.campo__dica { font-weight: 400; color: var(--ink-muted); font-size: var(--t-micro); }
.entrada {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: .75rem 1rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent);
  font-size: 1rem; /* 16px: evita zoom automático no iOS */
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.entrada:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.entrada[aria-invalid="true"] { border-color: #A6342B; }
textarea.entrada { min-block-size: 5.25rem; resize: vertical; line-height: 1.5; }
.campo__erro { display: block; font-size: var(--t-micro); color: #A6342B; margin-block-start: .35rem; min-block-size: 1.1rem; }
.campo__contador { font-size: var(--t-micro); color: var(--ink-muted); text-align: end; margin-block-start: .25rem; }

/* chips de assunto e período */
fieldset { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: .5rem .9rem;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 18%, transparent);
  font-size: var(--t-small);
  cursor: pointer;
  transition: background-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear, color var(--dur-fast) linear;
}
.chips label:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.chips input:checked + label { background: var(--color-bg-dark); color: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-bg-dark); }
.chips input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* consentimento */
.consent-campo { display: flex; gap: .7rem; align-items: flex-start; margin-block-start: 1.25rem; }
.consent-campo input[type="checkbox"] {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: .15rem;
  accent-color: var(--color-bg-dark);
}
.consent-campo label { font-size: var(--t-small); line-height: 1.5; color: var(--ink-muted); }
.consent-campo a { color: var(--accent-strong); text-underline-offset: 2px; }

.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* tela de sucesso */
.sucesso { text-align: center; padding: 2rem 1.5rem 1rem; }
.sucesso img { inline-size: auto; block-size: 3rem; margin-inline: auto; margin-block-end: 1.25rem; opacity: .9; }
.sucesso h2 { font-size: var(--t-h3); margin-block-end: .5rem; }
.sucesso p { font-size: var(--t-small); color: var(--ink-muted); }
.sucesso__check { inline-size: 3.5rem; block-size: 3.5rem; margin-inline: auto; margin-block-end: 1rem; color: var(--accent); }
.sucesso__check circle, .sucesso__check path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.modal.is-sucesso .sucesso__check circle { animation: draw .55s var(--ease-out) forwards; }
.modal.is-sucesso .sucesso__check path { animation: draw .35s var(--ease-out) .42s forwards; }
@media (prefers-reduced-motion: reduce) {
  .sucesso__check circle, .sucesso__check path { stroke-dashoffset: 0; animation: none !important; }
  .modal__caixa { transition-duration: 1ms; }
}

/* =========================================================================
   BANNER DE CONSENTIMENTO
   ========================================================================= */
.consent {
  position: fixed;
  inset-inline: clamp(.5rem, 2vw, 1.5rem);
  inset-block-end: calc(clamp(.5rem, 2vw, 1.5rem) + env(safe-area-inset-bottom));
  z-index: 75;
  max-inline-size: 34rem;
  padding: 1.25rem;
  border-radius: var(--r-lg);
  background: var(--color-bg-dark);
  color: var(--ink-on-dark);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 1rem;
  transform: translateY(calc(100% + 2rem));
  transition: transform var(--dur-slow) var(--ease-out);
}
.consent.is-in { transform: none; }
.consent p { font-size: var(--t-small); color: var(--muted-on-dark); line-height: 1.55; }
.consent a { color: var(--accent-on-dark); }
.consent__acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.consent .btn { min-block-size: 2.75rem; flex: 1 1 8rem; }
/* No celular vira uma faixa fina, colada no rodapé e por cima da barra de
   agendamento, para não cobrir o hero (os atalhos dos tratamentos na Home). */
@media (max-width: 47.9375rem) {
  .consent {
    inset-inline: 0;
    inset-block-end: 0;
    max-inline-size: none;
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    border-radius: 0;
    border-block-start: 1px solid var(--hairline-dark);
    gap: .55rem;
  }
  .consent p { font-size: var(--t-micro); line-height: 1.45; }
  .consent__acoes { flex-wrap: nowrap; gap: .5rem; }
  .consent .btn { flex: 1 1 0; padding-block: .5rem; }
}

/* =========================================================================
   06 · SITE COM VÁRIAS PÁGINAS
   Grade de 12 colunas, dropdown "Tratamentos", trilha, hero das subpáginas,
   controles do modelo 3D e abas, blocos de conteúdo (listas, cards, passos,
   tabela, linha do tempo, texto, faixa, referências), cards da Home, rodapé
   em 4 colunas, páginas legais e transição entre páginas.
   ========================================================================= */

/* --- grade de 12 colunas ---------------------------------------------------- */
/* Mesmo contêiner (.wrap, --maxw) em todas as páginas; as colunas só se
   dividem a partir de 60rem. No celular tudo ocupa a largura toda. */
.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, .5rem + 2vw, 2.5rem);
  row-gap: 1rem;
}
.g12 > * { grid-column: 1 / -1; }
@media (min-width: 52rem) { .g12 > .s-6 { grid-column: span 6; } }
@media (min-width: 60rem) {
  .g12 > .s-4 { grid-column: span 4; }
  .g12 > .s-5 { grid-column: span 5; }
  .g12 > .s-7 { grid-column: span 7; }
  .g12 > .s-8 { grid-column: span 8; }
}

/* superfície dos cartões: mais clara que o fundo creme, igual ao creme no quente */
.section { --card: #FBF9F6; }
.section--warm, .section--sand { --card: var(--color-cream); }

/* --- cabeçalho de seção ---------------------------------------------------- */
.secao__topo { max-inline-size: 42rem; margin-block-end: var(--space-block); }
.secao__topo .lead { margin-block-start: 1rem; }
.secao__topo--centro { margin-inline: auto; text-align: center; }
.secao__topo--centro .eyebrow { justify-content: center; }
.secao__nota { margin-block-start: 1.25rem; font-size: var(--t-micro); color: var(--ink-muted); font-style: italic; }
.on-dark .secao__nota { color: var(--muted-on-dark); }
.secao__acao { margin-block-start: 1.25rem; text-align: center; }

/* lista com pontos foliculares (o mesmo arco do símbolo) */
.marcada { list-style: none; padding: 0; display: grid; gap: .55rem; }
.marcada li { position: relative; padding-inline-start: 1.3rem; font-size: var(--t-small); color: var(--ink-muted); line-height: 1.55; }
.marcada li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  inline-size: .42rem;
  block-size: .42rem;
  border-radius: 50%;
  background: var(--accent);
}
.on-dark .marcada li { color: var(--muted-on-dark); }
.on-dark .marcada li::before { background: var(--color-accent-tan); }

/* =========================================================================
   NAVBAR: dropdown "Tratamentos" (desktop) e grupo no menu mobile
   ========================================================================= */
@media (min-width: 64rem) {
  .nav__item { position: relative; }
  .nav__sub-btn { display: inline-flex; align-items: center; gap: .35rem; }
  .nav__sub-btn svg { transition: transform var(--dur) var(--ease-out); }
  .nav__sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav__sub {
    position: absolute;
    inset-block-start: calc(100% + 1rem);
    inset-inline-start: 50%;
    min-inline-size: 23rem;
    padding: .55rem;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--color-bg-dark) 97%, transparent);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hairline-dark);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  /* ponte invisível: o ponteiro atravessa o vão sem fechar o menu */
  .nav__sub::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -1.1rem; block-size: 1.1rem; }
  .nav__sub.is-open,
  html:not(.js-anim) .nav__item--sub:is(:hover, :focus-within) .nav__sub {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
  }
  .nav__sub ul { list-style: none; padding: 0; display: grid; gap: .15rem; }
  .nav__sub-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .8rem;
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--color-cream);
    transition: background-color var(--dur-fast) linear;
  }
  .nav__sub-link:hover, .nav__sub-link[aria-current="page"] { background: color-mix(in srgb, var(--color-cream) 8%, transparent); }
  .nav__sub-ico {
    flex: none;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--color-accent-tan);
    box-shadow: inset 0 0 0 1px var(--hairline-dark);
  }
  .nav__sub-ico svg { inline-size: 1.2rem; block-size: 1.2rem; }
  .nav__sub-link strong { display: block; font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
  .nav__sub-link[aria-current="page"] strong { color: var(--color-accent-tan); }
}
.nav__sub { display: none; }
@media (min-width: 64rem) { .nav__sub { display: block; } }

.menu__grupo { padding-block: .6rem .9rem; }
.menu__rotulo {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent-tan);
  padding-block: .65rem .35rem;
}
.menu__grupo ul { list-style: none; padding: 0; border-inline-start: 1px solid var(--hairline-dark); }
.menu__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 2.9rem;
  padding-inline-start: 1rem;
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--color-cream);
}
.menu__sublink span { font-family: var(--font-sans), "Manrope Fallback"; font-size: .75rem; color: var(--color-accent-tan); letter-spacing: .1em; }
.menu__link[aria-current="page"], .menu__sublink[aria-current="page"] { color: var(--color-accent-tan); }

/* --- trilha (breadcrumb) ----------------------------------------------------- */
.migalhas { margin-block-end: .75rem; font-size: var(--t-micro); color: var(--ink-muted); }
.on-dark .migalhas { color: var(--muted-on-dark); }
.migalhas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: .45rem; }
.migalhas li { display: inline-flex; align-items: center; gap: .45rem; }
.migalhas li + li::before { content: "/"; opacity: .5; }
.migalhas a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: inherit; text-decoration: none; }
.migalhas a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.on-dark .migalhas a:hover { color: var(--color-cream); }
.migalhas [aria-current] { color: var(--ink); font-weight: 600; }
.on-dark .migalhas [aria-current] { color: var(--color-cream); }

/* =========================================================================
   HERO DAS SUBPÁGINAS (leitura em F)
   ========================================================================= */
.hero--pagina { padding-block-start: calc(var(--nav-h) + clamp(1rem, .5rem + 2.5vw, 3rem)); padding-block-end: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero--pagina h1 { font-size: clamp(2rem, 1.45rem + 2.5vw, 3.5rem); max-inline-size: 20ch; margin-block: 1.25rem 1rem; }
.hero--pagina .hero__portrait img { object-position: var(--pos, 50% 16%); }
@media (min-width: 60rem) {
  .hero--pagina .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .hero--pagina .hero__portrait { aspect-ratio: 4 / 5; }
}
.hero__destaques { list-style: none; padding: 0; margin-block-start: 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero__destaques li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem .45rem .7rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--color-cream) 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
  font-size: var(--t-micro);
  letter-spacing: .03em;
  color: var(--color-cream);
}
.hero__destaques .dots { gap: 2px; }
/* Celular: o retrato vira avatar ao lado da assinatura — o modelo 3D sobe. */
@media (max-width: 59.99rem) {
  .hero--pagina .hero__grid { gap: 1.5rem; }
  .hero--pagina .hero__media { display: flex; align-items: center; gap: .85rem; }
  .hero--pagina .hero__portrait {
    flex: none;
    inline-size: 3.75rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-tan) 32%, transparent);
  }
  .hero--pagina .hero__portrait img { transform: scale(1.9); transform-origin: var(--pos, 50% 16%); }
  .hero--pagina .hero__portrait::after { display: none; }
  .hero--pagina .hero__caption { position: static; color: var(--muted-on-dark); }
}
.hero__caption strong { color: var(--color-cream); font-weight: 600; }

/* =========================================================================
   MODELO 3D: barra de controles e abas
   ========================================================================= */
.boneco__controles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  margin-block-start: .65rem;
}
.boneco__ctl {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-cream);
  background: color-mix(in srgb, var(--color-cream) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
  transition: box-shadow var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.boneco__ctl:hover { background: color-mix(in srgb, var(--color-cream) 12%, transparent); box-shadow: inset 0 0 0 1px var(--color-accent-tan); }
.boneco__ctl:active { transform: scale(.94); }
.boneco__ctl svg { inline-size: 1.15rem; block-size: 1.15rem; }
/* respiro entre os grupos: girar · inclinar · zoom · voltar */
.boneco__ctl:nth-child(2), .boneco__ctl:nth-child(4), .boneco__ctl:nth-child(6) { margin-inline-end: .55rem; }
.boneco__ctl--giro { display: none; }
@media (min-width: 26rem) { .boneco__ctl--giro { display: grid; } }

.estudio__abas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem;
  padding: .3rem;
  margin-block-end: 1.5rem;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
@media (min-width: 30rem) {
  .estudio__abas { display: flex; flex-wrap: wrap; border-radius: var(--r-pill); inline-size: fit-content; max-inline-size: 100%; }
}
.estudio__aba {
  min-block-size: 2.75rem;
  padding: .5rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-muted);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.estudio__aba:hover { color: var(--ink); }
.estudio__aba[aria-selected="true"] { background: var(--color-bg-dark); color: var(--color-cream); box-shadow: var(--shadow-sm); }
.estudio__aba-painel > h3 { margin-block-end: .6rem; }
.estudio__aba-painel > .prose { margin-block-end: 1.25rem; }
.estudio__cta.actions { margin-block-start: 1.5rem; }
html:not(.js-anim) .estudio__aba-painel[hidden] { display: block !important; }
html:not(.js-anim) .estudio__abas { display: none; }

/* =========================================================================
   BLOCOS DE CONTEÚDO
   ========================================================================= */
/* --- listas: indicações × contraindicações --- */
.listas__col {
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.listas__col h3 { display: flex; align-items: center; gap: .65rem; font-size: var(--t-h4); margin-block-end: 1.1rem; }
.listas__col h3 svg { flex: none; inline-size: 1.75rem; block-size: 1.75rem; padding: .3rem; border-radius: 50%; }
.listas__col--sim h3 svg { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.listas__col--nao h3 svg { color: var(--ink-muted); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.listas__col--nao .marcada li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-muted); }

/* --- cartões --- */
.cartoes { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cartoes--3, .cartoes--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartoes--1 { max-inline-size: 42rem; grid-template-columns: 1fr !important; }
.cartao {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cartao:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--color-surface-taupe), var(--shadow-md); }
.cartao--selo { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.cartao .selo { align-self: flex-start; }
.cartao h3 { font-size: var(--t-h4); }
.cartao > p { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; }
.cartao__dados {
  margin-block-start: auto;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--hairline);
  display: grid;
  gap: .65rem;
}
.cartao__dados div { display: grid; gap: .1rem; }
.cartao__dados dt { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); }
.cartao__dados dd { margin: 0; font-size: var(--t-small); line-height: 1.5; }

/* --- passos numerados --- */
.passos { list-style: none; padding: 0; margin: 0; display: grid; }
@media (min-width: 52rem) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); } }
.passos__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-block-start: 1px solid var(--hairline);
}
.passos__num {
  font-family: var(--font-display), "Fraunces Fallback";
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--accent);
  min-inline-size: 2.2ch;
}
.passos__item h3 { font-size: var(--t-h4); margin-block-end: .35rem; }
.passos__item p { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; }

/* --- tabela comparativa --- */
.tabela-rolagem {
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
  overscroll-behavior-x: contain;
}
.tabela-rolagem--resumo { max-inline-size: 58rem; margin-inline: auto; }
.tabela {
  inline-size: 100%;
  min-inline-size: 38rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-small);
}
.tabela th, .tabela td {
  padding: .95rem 1.1rem;
  text-align: start;
  vertical-align: top;
  line-height: 1.5;
  border-block-end: 1px solid var(--hairline);
}
.tabela thead th {
  background: var(--color-bg-dark);
  color: var(--color-cream);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tabela thead th:last-child { background: var(--color-bg-dark-raised); }
.tabela thead .selo { margin-inline-start: .5rem; color: var(--color-accent-tan); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-tan) 45%, transparent); font-size: .625rem; padding-block: .2rem; vertical-align: middle; }
.tabela tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-inline-size: 9.5rem;
  background: var(--card);
  font-weight: 600;
  box-shadow: 1px 0 0 var(--hairline);
}
.tabela thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; }
.tabela td { color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 52rem) {
  .tabela { table-layout: fixed; }
  .tabela th:first-child { inline-size: 24%; }
}
.tabela td:last-child { color: var(--ink); }
.tabela tbody tr:last-child > * { border-block-end: 0; }
.tabela tbody tr:hover > * { background: color-mix(in srgb, var(--color-surface-taupe) 14%, var(--card)); }

/* No celular a tabela não rola de lado: cada linha vira um cartão, com o nome
   da coluna (data-col) em cima de cada valor. Assim as duas opções aparecem
   juntas na tela, sem nenhuma coluna escondida à direita. */
@media (max-width: 47.99rem) {
  .tabela-rolagem { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
  .tabela { min-inline-size: 0; }
  .tabela thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela tbody { display: grid; gap: .75rem; }
  .tabela tbody tr {
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
    overflow: hidden;
  }
  .tabela tbody th {
    position: static;
    min-inline-size: 0;
    box-shadow: none;
    padding: 1rem 1.15rem .35rem;
    border: 0;
    font-size: 1rem;
  }
  .tabela td { padding: .65rem 1.15rem; border: 0; }
  .tabela td + td { border-block-start: 1px solid var(--hairline); }
  .tabela td:last-child { padding-block-end: 1rem; }
  .tabela td::before {
    content: attr(data-col);
    display: block;
    margin-block-end: .2rem;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-strong);
  }
  .tabela tbody tr:hover > * { background: none; }
}

/* --- linha do tempo --- */
.tempo { list-style: none; padding: 0; margin: 0; position: relative; max-inline-size: 54rem; }
.tempo::before {
  content: "";
  position: absolute;
  inset-block: .7rem 1.4rem;
  inset-inline-start: .45rem;
  inline-size: 1px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.tempo__item { position: relative; display: grid; gap: .3rem 1.5rem; padding: 0 0 1.6rem 2.1rem; }
.tempo__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .3rem;
  inline-size: .95rem;
  block-size: .95rem;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.tempo__item:last-child::before { background: var(--accent); }
.tempo__quando { font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }
.tempo__corpo h3 { font-size: var(--t-h4); margin-block-end: .25rem; }
.tempo__corpo p { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; max-inline-size: 60ch; }
@media (min-width: 52rem) {
  .tempo__item { grid-template-columns: 9.5rem 1fr; padding-inline-start: 2.4rem; }
  .tempo__quando { padding-block-start: .2rem; }
}

/* --- texto + quadro lateral --- */
.texto .prose > p + p { margin-block-start: 1em; }
.texto__lado {
  align-self: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
@media (min-width: 60rem) { .texto__lado { margin-block-start: 2.5rem; } }
.texto__lado h3 { font-size: var(--t-h4); margin-block-end: .9rem; }

/* --- faixa de chamada no meio da página --- */
.bloco--faixa { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.faixa { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 52rem) { .faixa { grid-template-columns: 1fr auto; } }
.faixa h2 { font-size: var(--t-h3); max-inline-size: 28ch; }
.faixa .lead { margin-block-start: .75rem; max-inline-size: 56ch; }

/* --- referências --- */
.section--compacta { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.referencias { max-inline-size: 54rem; }
.referencias__titulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-sans), "Manrope Fallback";
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-block-end: .75rem;
}
.referencias__titulo svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.referencias p, .referencias li { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.55; }
.referencias ul { margin-block-start: .75rem; padding-inline-start: 1.1rem; display: grid; gap: .3rem; }

/* --- FAQ: apoio ao lado --- */
.faq__ajuda { margin-block: 1.25rem .25rem; font-size: var(--t-small); color: var(--ink-muted); max-inline-size: 32ch; }
@media (min-width: 60rem) { .faq__lado { position: sticky; inset-block-start: calc(var(--nav-h) + 2rem); } }

/* =========================================================================
   HOME
   ========================================================================= */
.trats { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .trats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .trats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.trat:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-md); }
.trat:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.trat__ico { display: block; inline-size: 2.5rem; block-size: 2.5rem; color: var(--accent); }
.trat__topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-block-size: 2.5rem; }
.trat__topo .selo { font-size: .625rem; letter-spacing: .08em; padding-inline: .55rem .65rem; white-space: nowrap; }
.trat h3 { font-size: var(--t-h4); margin-block-start: .35rem; }
.trat__link { color: inherit; text-decoration: none; }
.trat__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* o cartão inteiro é clicável */
.trat__link:focus-visible { outline: none; }
.trat > p { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.6; }
.trat .marcada { flex: 1 0 auto; align-content: start; }
.trat__ir {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block-start: .75rem;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--accent-strong);
}
.trat__ir svg { transition: transform var(--dur) var(--ease-out); }
.trat:hover .trat__ir svg { transform: translateX(4px); }

.pilares { list-style: none; padding: 0; margin-block-start: 1.75rem; display: grid; gap: 1rem; }
.pilares li { display: flex; gap: .9rem; align-items: flex-start; }
.pilares__ico {
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-accent-tan);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
}
.pilares__ico svg { inline-size: 1.2rem; block-size: 1.2rem; }
.pilares strong { display: block; color: var(--color-cream); font-weight: 600; }
.pilares span { font-size: var(--t-small); color: var(--muted-on-dark); }

.fatos { list-style: none; padding: 0; margin-block-start: 1.5rem; display: grid; gap: .8rem; }
.fatos li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: var(--t-small); color: var(--ink-muted); }
.fatos svg { color: var(--accent); flex: none; }
.espacos { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .espacos { grid-template-columns: 1fr 1fr; } }
.slot--espaco { aspect-ratio: 4 / 5; }
@media (max-width: 39.99rem) { .slot--espaco { aspect-ratio: 16 / 9; } }

/* =========================================================================
   RODAPÉ EM 4 COLUNAS
   ========================================================================= */
.rodape__topo { grid-template-columns: 1fr; gap: 2.25rem; }
.rodape__topo > :first-child, .rodape__topo > :last-child { grid-column: auto; }
@media (min-width: 40rem) { .rodape__topo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .rodape__topo { grid-template-columns: 1.15fr .85fr 1.15fr 1fr; gap: 2.5rem; } }
.rodape__marca { text-decoration: none; }
.rodape__nap strong { color: var(--color-cream); font-weight: 600; }
.rodape__col address { margin-block-end: .75rem; }
.rodape__contato a { display: inline-flex; align-items: center; gap: .5rem; }
.rodape__horarios { margin-block-start: 1rem; }
.rodape__status { margin-block-start: .85rem; }
.rodape a[aria-current="page"] { color: var(--color-cream); }
.rodape__social { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 2.75rem; }
.rodape a.rodape__social { color: var(--color-cream); }
.rodape__social svg { color: var(--color-accent-tan); }
.minimapa {
  position: relative;
  display: block;
  margin-block: .9rem .35rem;
  aspect-ratio: 240 / 132;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--color-bg-dark-raised);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
  transition: box-shadow var(--dur-fast) linear;
}
.minimapa:hover { box-shadow: inset 0 0 0 1px var(--color-accent-tan); }
.minimapa svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.minimapa__pino { position: absolute; inset-inline-start: 50%; inset-block-start: 44%; transform: translate(-50%, -85%); color: var(--color-accent-tan); }
.minimapa__pino svg { position: static; inline-size: 1.9rem; block-size: 1.9rem; }
.rodape .minimapa__texto {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: .5rem .8rem .55rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: .1rem .5rem;
  background: linear-gradient(transparent, rgba(30, 17, 4, .88));
  font-size: var(--t-micro);
  color: var(--color-cream);
}
.minimapa__texto strong { font-weight: 600; grid-column: 1 / -1; }
.minimapa__texto span { display: inline-flex; align-items: center; gap: .35rem; }
.minimapa__texto svg { position: static; inline-size: .9rem; block-size: .9rem; }
.rodape__legais { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

/* =========================================================================
   PÁGINAS LEGAIS E 404
   ========================================================================= */
.doc { padding-block: calc(var(--nav-h) + 2rem) var(--space-section); }
.doc h1 { font-size: var(--t-h2); margin-bottom: 1.25rem; }
.doc h2 { font-size: var(--t-h3); margin-block: 2.5rem .75rem; }
.doc p, .doc li { color: var(--ink-muted); }
.doc p + p { margin-block-start: .9rem; }
.doc__atalhos { list-style: none; padding: 0; margin-block-start: 1.5rem; display: grid; gap: .1rem; }
.doc--404 { min-block-size: 70vh; }

/* =========================================================================
   TRANSIÇÃO ENTRE PÁGINAS
   Navegação entre páginas do mesmo site com fade + leve subida (View
   Transitions entre documentos). Navegadores sem suporte trocam de página
   normalmente. Navbar e WhatsApp têm nome próprio e ficam parados.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vtSai 160ms var(--ease) both; }
  ::view-transition-new(root) { animation: vtEntra 420ms var(--ease-out) both; }
  .nav { view-transition-name: nav; }
  .zap { view-transition-name: zap; }
}
@keyframes vtSai { to { opacity: 0; } }
@keyframes vtEntra { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
/* da segunda página da sessão em diante, o hero não refaz a entrada encadeada */
.ja-visitou .hero__in, .ja-visitou .hero__in--lcp { animation: none !important; opacity: 1 !important; transform: none !important; }

/* História da FUE (capilar): no desktop o passo dos pontos ocupa mais da
   tela, para a cena dele não ser trocada pela linha frontal enquanto ainda
   está sendo lido ao lado do palco. */
@media (min-width: 60rem) {
  .estudio--historia .estudio__passos > .estudio__passo:first-child { min-block-size: 58vh; }
}