/* =============================================================================
   Dra. Danielle Narciso — Cirurgiã-dentista
   Conceito: "Beleza com intenção. Cuidado com precisão."
   Identidade editorial: marfim luminoso, ameixa profunda, dourado fosco.
   CSS3 puro, mobile-first, sem frameworks.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Cor: base marfim / branco quente --- */
  --c-ivory:            #FBF7F2;
  --c-ivory-deep:       #F4EDE4;
  --c-ivory-warm:       #F8F1E9;
  --c-white-warm:       #FFFDFB;

  /* --- Cor: principal, ameixa profunda / cacau --- */
  --c-plum-900:         #2E1119;
  --c-plum-800:         #3A1620;
  --c-plum-700:         #4A1F2B;   /* principal */
  --c-plum-600:         #5C2A38;
  --c-plum-500:         #6E3746;
  --c-plum-300:         #8E5B69;

  /* --- Cor: acento dourado fosco / champagne --- */
  --c-gold:             #C0A06B;
  --c-gold-soft:        #DCC79E;
  --c-gold-wash:        #EFE3CC;

  /* --- Cor: secundária, rosa queimado / nude rosado (uso mínimo) --- */
  --c-rose:             #BE8577;
  --c-nude:             #E9D6CD;

  /* --- Cor: texto --- */
  --c-ink:              #2A1B20;
  --c-ink-soft:         #5A464C;
  --c-ink-mute:         #776469;   /* AA sobre marfim profundo: 4.8:1 */
  --c-on-dark:          #F6EFE7;
  --c-on-dark-soft:     #D8C6C0;

  /* --- Cor: sinal funcional WhatsApp (nunca dominante) --- */
  --c-wa:               #1E9E52;
  --c-wa-deep:          #16773D;

  /* --- Cor: linhas e superfícies --- */
  --c-line:             rgba(74, 31, 43, 0.14);
  --c-line-soft:        rgba(74, 31, 43, 0.08);
  --c-line-gold:        rgba(192, 160, 107, 0.45);
  --c-surface:          var(--c-white-warm);
  --c-surface-alt:      var(--c-ivory-deep);
  --c-overlay:          rgba(46, 17, 25, 0.42);

  /* --- Tipografia --- */
  --f-serif:  "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-sans:   "Work Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida (320px → 1440px) */
  --fs-100:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-200:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-300:   1rem;
  --fs-400:   clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-500:   clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
  --fs-600:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-700:   clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --fs-800:   clamp(1.875rem, 1.55rem + 1.6vw, 2.875rem);
  --fs-900:   clamp(2.25rem, 1.7rem + 2.7vw, 4rem);

  --lh-tight: 1.08;
  --lh-title: 1.16;
  --lh-body:  1.68;
  --ls-wide:  0.14em;
  --ls-mid:   0.06em;

  /* --- Espaçamento --- */
  --sp-3xs:   0.25rem;
  --sp-2xs:   0.5rem;
  --sp-xs:    0.75rem;
  --sp-sm:    1rem;
  --sp-md:    1.5rem;
  --sp-lg:    2rem;
  --sp-xl:    clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --sp-2xl:   clamp(3.5rem, 2.6rem + 3.6vw, 6rem);
  --sp-3xl:   clamp(5rem, 3.4rem + 6.4vw, 9rem);
  --sp-gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);

  /* --- Larguras --- */
  --w-shell:  1220px;
  --w-text:   64ch;
  --w-narrow: 46ch;

  /* --- Bordas e raios --- */
  --bd-hair:  1px solid var(--c-line);
  --bd-gold:  1px solid var(--c-line-gold);
  --r-xs:     4px;
  --r-sm:     8px;
  --r-md:     12px;
  --r-lg:     18px;
  --r-pill:   999px;

  /* --- Sombras e elevação (curtas, sem peso) --- */
  --sh-0:     none;
  --sh-1:     0 1px 2px rgba(46, 17, 25, 0.06);
  --sh-2:     0 2px 6px rgba(46, 17, 25, 0.08);
  --sh-3:     0 6px 18px rgba(46, 17, 25, 0.10);
  --sh-4:     0 14px 40px rgba(46, 17, 25, 0.14);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --sh-press: inset 0 2px 5px rgba(23, 8, 12, 0.34);

  /* --- Motion --- */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --t-fast:   160ms;
  --t-base:   400ms;
  --t-slow:   500ms;
  --t-reveal: 720ms;
  --stagger:  60ms;

  /* --- Camadas --- */
  --z-base:   1;
  --z-fab:    60;
  --z-bar:    70;
  --z-header: 80;
  --z-menu:   90;
  --z-skip:   100;

  /* --- Breakpoints (referência; media queries usam os valores literais) ---
     --bp-sm: 480px; --bp-md: 720px; --bp-lg: 960px; --bp-xl: 1200px; --bp-2xl: 1440px */
}

/* -----------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--c-ivory);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  font-weight: 400;
  /* Sem overflow-x: hidden — ele criaria um container de recorte no <body>.
     As sangrias decorativas (-14px nas molduras) cabem dentro do gutter mínimo (20px). */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: var(--lh-title); }
p { margin: 0 0 var(--sp-sm); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

button { font: inherit; color: inherit; }

address { font-style: normal; }

::selection { background: var(--c-gold-wash); color: var(--c-plum-800); }

:focus-visible {
  outline: 2px solid var(--c-plum-700);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.shell {
  width: 100%;
  max-width: var(--w-shell);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.skip-link {
  position: absolute;
  left: var(--sp-sm);
  top: -100px;
  z-index: var(--z-skip);
  padding: 0.75rem 1.25rem;
  background: var(--c-plum-700);
  color: var(--c-on-dark);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.02em;   /* frase corrida: tracking largo atrapalha a leitura */
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-sm); }

/* -----------------------------------------------------------------------------
   3. MARCADORES DE DESENVOLVIMENTO
   Tudo entre colchetes é dado pendente de validação — nunca publicar como fato.
   O botão no rodapé alterna a visibilidade para pré-visualizar a versão final.
   -------------------------------------------------------------------------- */
.pending {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--fs-100);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--c-plum-600);
  background: rgba(192, 160, 107, 0.12);
  border: 1px dashed var(--c-line-gold);
  border-radius: var(--r-xs);
  padding: 0.2em 0.55em;
  /* não herda a caixa alta dos rótulos que os contêm (eyebrow, chips, dt) */
  text-transform: none;
  font-weight: 400;
}
.pending--inline { margin-inline: 0.15em; }
.pending--block { display: block; width: fit-content; max-width: 100%; margin-block: var(--sp-xs); }

body:not(.dev-markers) .pending { display: none !important; }

.dev-toggle {
  background: transparent;
  border: 1px dashed var(--c-line-gold);
  color: var(--c-ink-mute);
  font-size: var(--fs-100);
  font-family: var(--f-mono);
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 44px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dev-toggle:hover { color: var(--c-plum-700); border-color: var(--c-gold); }

/* -----------------------------------------------------------------------------
   4. TIPOGRAFIA EDITORIAL
   -------------------------------------------------------------------------- */
.section-kicker {
  margin: 0 0 var(--sp-sm);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-plum-500);   /* sobre o nude da seção .calm: 6.5:1 */
}
.section-kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 0.75em;
  vertical-align: middle;
  background: var(--c-gold);
}

.section-title {
  font-family: var(--f-serif);
  font-size: var(--fs-800);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-plum-800);
  max-width: 20ch;
}
.section-head--center .section-title { max-width: 24ch; margin-inline: auto; }

.section-lead {
  margin-top: var(--sp-md);
  max-width: var(--w-text);
  color: var(--c-ink-soft);
  font-size: var(--fs-500);
}
.section-head--center .section-lead { margin-inline: auto; text-align: center; }

.section-head { margin-bottom: var(--sp-xl); }
.section-head--center { text-align: center; }

.section-cta { margin-top: var(--sp-xl); text-align: center; }

.lead { font-size: var(--fs-500); color: var(--c-ink-soft); }

.microcopy {
  margin: var(--sp-xs) 0 0;
  font-size: var(--fs-200);
  color: var(--c-ink-mute);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.microcopy::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-wa);
  box-shadow: 0 0 0 3px rgba(30, 158, 82, 0.14);
  flex: none;
}

.disclaimer {
  margin-top: var(--sp-lg);
  font-size: var(--fs-200);
  color: var(--c-ink-mute);
  font-style: italic;
  max-width: var(--w-text);
}

.rule-note {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: var(--bd-gold);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-600);
  color: var(--c-plum-500);
  max-width: 22ch;
}

/* -----------------------------------------------------------------------------
   5. BOTÕES E LINKS (skeuomorfismo discreto, só nos controles)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 44px;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.btn__icon { display: inline-flex; flex: none; }
.btn__icon svg { display: block; }

/* Primário — materialidade contida: borda fina, highlight superior, sombra curta */
.btn--primary {
  color: var(--c-on-dark);
  background-image: linear-gradient(180deg, var(--c-plum-600) 0%, var(--c-plum-700) 55%, var(--c-plum-800) 100%);
  background-color: var(--c-plum-700);
  border-color: var(--c-plum-900);
  box-shadow: var(--sh-inset-top), var(--sh-2);
}
.btn--primary:hover {
  background-image: linear-gradient(180deg, var(--c-plum-500) 0%, var(--c-plum-600) 55%, var(--c-plum-700) 100%);
  box-shadow: var(--sh-inset-top), var(--sh-3);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--sh-press);
  background-image: linear-gradient(180deg, var(--c-plum-800) 0%, var(--c-plum-700) 100%);
}
/* Sinal funcional discreto do WhatsApp: micro-ponto verde, nunca a cor do botão */
.btn--primary .btn__icon { position: relative; color: var(--c-gold-soft); }
.btn--primary .btn__icon::after {
  content: "";
  position: absolute;
  right: -1px; top: -1px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-wa);
  border: 1px solid var(--c-plum-800);
}

.btn--ghost {
  color: var(--c-plum-700);
  background: transparent;
  border-color: var(--c-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--ghost:hover {
  border-color: var(--c-plum-300);
  background: var(--c-white-warm);
  box-shadow: var(--sh-1);
}
.btn--ghost:active { box-shadow: inset 0 2px 4px rgba(46,17,25,.12); }

.btn--sm { padding: 0.6rem 1.05rem; font-size: var(--fs-200); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--fs-400); }

.link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  color: var(--c-plum-600);
  font-size: var(--fs-200);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-gold);
  padding-block: 0.15em;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.link-secondary:hover { color: var(--c-plum-800); border-color: var(--c-plum-700); }

/* -----------------------------------------------------------------------------
   6. CABEÇALHO
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  /* Fio quase imperceptível mesmo antes da rolagem — dá ao cabeçalho uma
     borda de referência sutil sem pesar o "leve" da primeira dobra. */
  border-bottom: 1px solid rgba(74, 31, 43, 0.05);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              backdrop-filter var(--t-base) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(251, 247, 242, 0.88);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: var(--c-line-soft);
  box-shadow: var(--sh-1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  min-height: 4.5rem;
}

.brand {
  display: grid;
  gap: 0.15rem;
  text-decoration: none;
  padding-block: 0.4rem;
  /* Cabeçalho compacto: a marca encolhe um pouco ao rolar — só transform,
     sem tocar em min-height/padding (evita layout thrash a cada scroll). */
  transform: scale(1);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
}
.site-header.is-scrolled .brand { transform: scale(0.9); }

.brand__name {
  font-family: var(--f-serif);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  color: var(--c-plum-800);
  letter-spacing: 0.005em;
  transition: color var(--t-fast) var(--ease);
}
.brand__role {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.brand:hover .brand__name,
.brand:focus-visible .brand__name { color: var(--c-plum-600); }

.nav__list { display: none; }
.nav__cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: linear-gradient(180deg, var(--c-white-warm), var(--c-ivory-deep));
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--sh-1);
  color: var(--c-plum-700);
  font-size: var(--fs-200);
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.menu-toggle:active { box-shadow: inset 0 2px 5px rgba(46,17,25,.16); }
.menu-toggle__bars { display: grid; gap: 4px; width: 18px; }
.menu-toggle__bars span {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  z-index: -1;
}
.menu-backdrop.is-visible { opacity: 1; }

/* Menu mobile — painel materializado */
@media (max-width: 959px) {
  .nav {
    position: fixed;
    top: 4.75rem;
    left: var(--sp-gutter);
    right: var(--sp-gutter);
    z-index: var(--z-menu);
    padding: var(--sp-md);
    background: linear-gradient(180deg, var(--c-white-warm), var(--c-ivory-warm));
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                visibility 0s linear var(--t-base);
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .nav__list { display: grid; gap: 0.15rem; }
  .nav__link {
    position: relative;
    display: block;
    padding: 0.85rem 0.5rem 0.85rem 1rem;
    min-height: 44px;
    font-size: var(--fs-500);
    font-family: var(--f-serif);
    color: var(--c-plum-800);
    text-decoration: none;
    border-bottom: 1px solid var(--c-line-soft);
    transition: color var(--t-fast) var(--ease);
  }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
  .nav__cta { display: inline-flex; width: 100%; margin-top: var(--sp-sm); }

  /* Seção atual, calculada pela rolagem (ver initHeader em script.js) */
  .nav__link::before {
    content: "";
    position: absolute;
    left: 0; top: 0.95rem; bottom: 0.95rem;
    width: 2px;
    background: var(--c-gold);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
  }
  .nav__link.is-active { color: var(--c-plum-600); font-style: italic; }
  .nav__link.is-active::before { opacity: 1; }
}

@media (min-width: 960px) {
  .menu-toggle, .menu-backdrop { display: none; }
  .nav { display: flex; align-items: center; gap: var(--sp-md); }
  .nav__list { display: flex; align-items: center; gap: clamp(0.75rem, 0.2rem + 1.2vw, 1.75rem); }
  .nav__link {
    position: relative;
    display: inline-block;
    padding: 0.75rem 0;
    font-size: var(--fs-200);
    font-weight: 500;
    color: var(--c-ink-soft);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0.45rem;
    width: 100%; height: 1px;
    background: var(--c-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base) var(--ease);
  }
  .nav__link:hover { color: var(--c-plum-800); }
  .nav__link:hover::after { transform: scaleX(1); }

  /* Seção atual, calculada pela rolagem (ver initHeader em script.js) */
  .nav__link.is-active { color: var(--c-plum-800); font-weight: 600; }
  .nav__link.is-active::after { transform: scaleX(1); background: var(--c-plum-600); }

  .nav__cta { display: inline-flex; }
}

/* -----------------------------------------------------------------------------
   7. RETRATOS (fotografia real em grande escala)
   -------------------------------------------------------------------------- */
.portrait { margin: 0; position: relative; }

.portrait__frame {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-ivory-deep);
  box-shadow: var(--sh-3);
}
.portrait--hero .portrait__frame { aspect-ratio: 4 / 5; }
.portrait--about .portrait__frame { aspect-ratio: 4 / 5; }

.portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* Moldura fina dourada, deslocada — composição assimétrica */
.portrait::after {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 46%;
  border-right: var(--bd-gold);
  border-bottom: var(--bd-gold);
  pointer-events: none;
}
.portrait--about::after { inset: -14px auto auto -14px; border: 0; border-left: var(--bd-gold); border-top: var(--bd-gold); }

/* Nome próprio: sem caixa alta — o formato das palavras ajuda a leitura */
.portrait__caption {
  margin-top: var(--sp-xs);
  font-size: var(--fs-200);
  letter-spacing: 0.01em;
  color: var(--c-ink-mute);
}

.portrait.is-placeholder .portrait__frame { box-shadow: none; border: 1px dashed var(--c-line-gold); }

/* -----------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--sp-xl) var(--sp-2xl);
  background:
    radial-gradient(120% 90% at 88% 8%, var(--c-ivory-warm) 0%, rgba(248,241,233,0) 62%),
    linear-gradient(180deg, var(--c-white-warm) 0%, var(--c-ivory) 100%);
}
.hero__grid { display: grid; gap: var(--sp-xl); align-items: center; }

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 var(--sp-md);
  /* 48 caracteres é longo demais para caixa alta: mantemos o ar de rótulo
     com corpo pequeno, peso e tracking, preservando o formato das palavras. */
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-plum-500);
}
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-gold); flex: none;
}

.hero__title {
  font-family: var(--f-serif);
  font-size: var(--fs-900);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--c-plum-800);
  max-width: 15ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--c-plum-600);
  position: relative;
}

.hero__lead {
  margin-top: var(--sp-md);
  max-width: 52ch;
  font-size: var(--fs-500);
  color: var(--c-ink-soft);
}

.hero__actions { margin-top: var(--sp-lg); }
.hero__actions .btn { width: 100%; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-line-soft);
}
/* Chip de credencial — materialidade discreta */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45rem 0.7rem;
  background: linear-gradient(180deg, var(--c-white-warm), var(--c-ivory-deep));
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--sh-1);
}
.chip__key {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
/* Some chips carry confirmed data now (CRO, localização) — só esconder o
   chip inteiro quando ele ainda contiver um valor pendente. */
body:not(.dev-markers) .chip:has(.pending) { display: none; }

@media (min-width: 860px) {
  .hero { padding-block: var(--sp-2xl) var(--sp-3xl); }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
  .hero__actions .btn { width: auto; }
  .hero__media { transform: translateY(1.5rem); }
}

/* -----------------------------------------------------------------------------
   9. MANIFESTO
   -------------------------------------------------------------------------- */
.manifesto {
  padding-block: var(--sp-2xl);
  background: var(--c-plum-800);
  color: var(--c-on-dark);
}
.manifesto__inner { display: grid; gap: var(--sp-lg); }
.manifesto .section-kicker { color: var(--c-gold-soft); }
.manifesto .section-kicker::before { background: var(--c-gold); }

.manifesto__title {
  font-family: var(--f-serif);
  font-size: var(--fs-800);
  font-weight: 400;
  color: var(--c-on-dark);
  max-width: 22ch;
  text-wrap: balance;
}
.manifesto__title em { font-style: italic; color: var(--c-gold-soft); }

.manifesto__text { max-width: var(--w-text); color: var(--c-on-dark-soft); font-size: var(--fs-400); }

.manifesto .rule-note {
  border-top-color: rgba(220, 199, 158, 0.35);
  color: var(--c-gold-soft);
}

@media (min-width: 860px) {
  .manifesto__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 1rem + 4vw, 6rem);
    align-items: start;
  }
  .manifesto .section-kicker { grid-column: 1 / -1; }
  .manifesto__title { margin: 0; }
  .manifesto .rule-note { grid-column: 2; margin-top: 0; }
}

/* -----------------------------------------------------------------------------
   10. A PROFISSIONAL
   -------------------------------------------------------------------------- */
.about { padding-block: var(--sp-2xl); }
.about__grid { display: grid; gap: var(--sp-xl); }

.about__signature {
  margin: var(--sp-md) 0 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-700);
  color: var(--c-plum-300);   /* sem opacity: a assinatura fica em 5.1:1 */
}

.about__body { margin-top: var(--sp-md); max-width: var(--w-text); }

.credentials {
  margin: var(--sp-lg) 0;
  display: grid;
  gap: 0;
  border-top: var(--bd-hair);
}
.credentials__row {
  display: grid;
  gap: var(--sp-3xs);
  padding-block: var(--sp-sm);
  border-bottom: var(--bd-hair);
}
.credentials dt {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.credentials dd { margin: 0; color: var(--c-ink); }
.about .btn { margin-top: var(--sp-lg); }

@media (min-width: 860px) {
  .about__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5.5rem);
    align-items: start;
  }
  .about__media { position: sticky; top: 7rem; }
  .credentials__row { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--sp-sm); align-items: baseline; }
}

/* -----------------------------------------------------------------------------
   11. O QUE VOCÊ DESEJA CUIDAR (painéis acessíveis)
   -------------------------------------------------------------------------- */
.needs { padding-block: var(--sp-2xl); background: var(--c-ivory-warm); }

.needs__panelbox { display: grid; gap: var(--sp-lg); }

.needs__tablist { display: grid; gap: var(--sp-3xs); }

.need-tab {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  width: 100%;
  min-height: 44px;
  padding: 1rem 1.1rem;
  text-align: left;
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--c-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.need-tab:hover { color: var(--c-plum-800); background: rgba(255,255,255,.6); }
/* Painel selecionado — materialidade discreta */
.need-tab[aria-selected="true"] {
  color: var(--c-plum-800);
  font-weight: 600;
  background: linear-gradient(180deg, var(--c-white-warm), var(--c-ivory-deep));
  border-color: var(--c-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-2);
}
.need-tab__num {
  font-family: var(--f-serif);
  font-size: var(--fs-300);
  color: var(--c-gold);
  flex: none;
}
.need-tab[aria-selected="true"] .need-tab__num { color: var(--c-plum-600); }

.need-panel {
  padding: var(--sp-lg) 0 0;
  max-width: var(--w-text);
}
.need-panel:focus-visible { outline-offset: 6px; }
.need-panel__title {
  font-family: var(--f-serif);
  font-size: var(--fs-700);
  font-weight: 400;
  color: var(--c-plum-800);
  margin-bottom: var(--sp-sm);
}
.need-panel p { color: var(--c-ink-soft); }
.need-panel__pending { font-size: var(--fs-200); }
.need-panel__note {
  font-size: var(--fs-200);
  color: var(--c-ink-mute);
  font-style: italic;
}
.need-panel .btn { margin-top: var(--sp-md); }

/* Sem JavaScript: todos os painéis ficam legíveis e a lista de abas é ocultada */
.no-js .needs__tablist { display: none; }
.no-js .need-panel { border-top: var(--bd-hair); padding-top: var(--sp-lg); }

@media (min-width: 860px) {
  .needs__panelbox {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }
  .need-panel { padding-top: 0; }
  .no-js .needs__panelbox { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   12. COMO FUNCIONA O ATENDIMENTO
   -------------------------------------------------------------------------- */
.process { padding-block: var(--sp-2xl); }

.steps { display: grid; gap: var(--sp-lg); counter-reset: step; }
.step {
  position: relative;
  padding-top: var(--sp-md);
  border-top: var(--bd-hair);
}
.step__num {
  display: block;
  font-family: var(--f-serif);
  font-size: var(--fs-700);
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: var(--sp-2xs);
}
.step__title {
  font-family: var(--f-serif);
  font-size: var(--fs-600);
  font-weight: 400;
  color: var(--c-plum-800);
  margin-bottom: var(--sp-2xs);
}
.step p { color: var(--c-ink-soft); font-size: var(--fs-300); }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-xl); }
}
@media (min-width: 1080px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-lg); }
}

/* -----------------------------------------------------------------------------
   13. DIFERENCIAIS
   -------------------------------------------------------------------------- */
.values { padding-block: var(--sp-2xl); background: var(--c-ivory-warm); }

.values__list { display: grid; gap: var(--sp-lg); }
.value { max-width: 44ch; }
.value__title {
  font-family: var(--f-serif);
  font-size: var(--fs-600);
  font-weight: 400;
  color: var(--c-plum-800);
  margin-bottom: var(--sp-2xs);
  padding-bottom: var(--sp-2xs);
  border-bottom: var(--bd-gold);
  display: inline-block;
}
.value p { color: var(--c-ink-soft); font-size: var(--fs-300); }

@media (min-width: 720px) {
  .values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-xl); row-gap: var(--sp-xl); }
}
@media (min-width: 1080px) {
  .values__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .values__list .value:nth-child(4) { grid-column: 1; }
}

/* -----------------------------------------------------------------------------
   14. CASOS E RESULTADOS
   -------------------------------------------------------------------------- */
.cases { padding-block: var(--sp-2xl); }

/* Galeria de casos — placeholders cinzas até a chegada das fotos reais
   (ver data-photo em cada <figure>, trocado automaticamente por script.js). */
.case-gallery {
  display: grid;
  gap: var(--sp-md);
  margin-bottom: var(--sp-xl);
}
.case-card { display: grid; gap: var(--sp-xs); }
.case-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-ivory-deep);
}
.case-photo.is-placeholder { border: 1px dashed var(--c-line-gold); }
.case-photo__img { width: 100%; height: 100%; object-fit: cover; }
.case-card__title {
  font-size: var(--fs-200);
  color: var(--c-ink-mute);
}

.cases__grid { display: grid; gap: var(--sp-lg); }
.case-note {
  padding: var(--sp-lg);
  background: var(--c-white-warm);
  border: var(--bd-hair);
  border-radius: var(--r-md);
}
.case-note h3 {
  font-family: var(--f-serif);
  font-size: var(--fs-600);
  font-weight: 400;
  color: var(--c-plum-800);
  margin-bottom: var(--sp-2xs);
}
.case-note p { color: var(--c-ink-soft); font-size: var(--fs-300); }

@media (min-width: 860px) {
  .case-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cases__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); }
}

/* -----------------------------------------------------------------------------
   15. PACIENTES ANSIOSOS
   -------------------------------------------------------------------------- */
.calm {
  padding-block: var(--sp-2xl);
  background:
    radial-gradient(90% 120% at 20% 0%, var(--c-nude) 0%, rgba(233,214,205,0) 55%),
    var(--c-ivory-deep);
}
.calm__inner { max-width: 58ch; }
.calm__title {
  font-family: var(--f-serif);
  font-size: var(--fs-800);
  font-weight: 400;
  color: var(--c-plum-800);
  text-wrap: balance;
}
.calm__text {
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-lg);
  font-size: var(--fs-500);
  color: var(--c-ink-soft);
}

/* -----------------------------------------------------------------------------
   16. DEPOIMENTOS
   -------------------------------------------------------------------------- */
.reviews { padding-block: var(--sp-2xl); }
.reviews__list { display: grid; gap: var(--sp-lg); margin-top: var(--sp-lg); margin-bottom: var(--sp-md); }
.review { padding-left: var(--sp-md); border-left: 2px solid var(--c-gold); }
.review__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-2xs);
}
.review__stars {
  color: var(--c-gold);
  letter-spacing: 0.1em;
  font-size: var(--fs-300);
}
.review__date { font-size: var(--fs-100); color: var(--c-ink-mute); }
.review blockquote { margin: 0; font-family: var(--f-serif); font-size: var(--fs-500); color: var(--c-plum-700); }
.review footer { margin-top: var(--sp-2xs); font-size: var(--fs-200); color: var(--c-ink-mute); }

@media (min-width: 860px) {
  .reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------------------------
   17. FAQ (details/summary — acessível sem JavaScript)
   -------------------------------------------------------------------------- */
.faq { padding-block: var(--sp-2xl); background: var(--c-ivory-warm); }
.faq__inner { max-width: 62rem; }
.faq__list { display: grid; gap: var(--sp-2xs); }

.qa {
  background: var(--c-white-warm);
  border: var(--bd-hair);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.qa[open] { border-color: var(--c-line-gold); box-shadow: var(--sh-2); }

/* Controle do FAQ — materialidade discreta */
.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  min-height: 56px;
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--c-plum-800);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(244,237,228,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: background-color var(--t-fast) var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { background: linear-gradient(180deg, #fff, var(--c-ivory-deep)); }
.qa__q:active { box-shadow: inset 0 2px 5px rgba(46,17,25,.10); }

.qa__icon {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--c-line-gold);
}
.qa__icon::before, .qa__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1.5px;
  background: var(--c-plum-600);
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.qa__a {
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  color: var(--c-ink-soft);
  font-size: var(--fs-300);
  border-top: 1px solid var(--c-line-soft);
}
/* Fallback sem GSAP: o próprio <details> já abre/fecha nativamente; esta
   keyframe só cuida da entrada visual. Quando script.js assume o controle
   (classe .qa--motion), a keyframe cede lugar à animação de altura do GSAP,
   evitando um duplo movimento. */
.qa[open]:not(.qa--motion) .qa__a { animation: qa-in var(--t-base) var(--ease) both; }
@keyframes qa-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.faq__note {
  margin-top: var(--sp-lg);
  font-size: var(--fs-200);
  color: var(--c-ink-mute);
  font-style: italic;
  max-width: var(--w-text);
}

/* -----------------------------------------------------------------------------
   18. LOCALIZAÇÃO
   -------------------------------------------------------------------------- */
.location { padding-block: var(--sp-2xl); }
.location__grid { display: grid; gap: var(--sp-xl); align-items: center; }

.location__address { margin-top: var(--sp-md); color: var(--c-ink-soft); max-width: 46ch; }
.location__line {
  display: grid;
  gap: var(--sp-3xs);
  padding-block: var(--sp-xs);
  border-top: var(--bd-hair);
  margin-top: var(--sp-sm);
}
.location__label {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.location__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.map-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: var(--bd-hair);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--c-ivory-deep), var(--c-ivory-warm));
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.map-card:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }
.map-card__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line-soft) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.9;
}
.map-card__pin {
  position: absolute;
  left: 50%; top: 44%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--c-plum-700);
  box-shadow: 0 0 0 6px rgba(74, 31, 43, 0.12), 0 0 0 14px rgba(74, 31, 43, 0.06);
}
.map-card__label {
  position: absolute;
  left: var(--sp-md); right: var(--sp-md); bottom: var(--sp-md);
  display: grid;
  gap: var(--sp-3xs);
  padding: var(--sp-sm) var(--sp-md);
  background: rgba(255, 253, 251, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: var(--fs-200);
}
.map-card__label strong { font-family: var(--f-serif); font-size: var(--fs-500); font-weight: 500; color: var(--c-plum-800); }
.map-card__cta { color: var(--c-plum-600); font-weight: 600; }
.map-card .pending { justify-self: start; }

@media (min-width: 860px) {
  .location__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); column-gap: clamp(2rem, 1rem + 4vw, 5rem); }
}

/* -----------------------------------------------------------------------------
   19. CTA FINAL
   -------------------------------------------------------------------------- */
.final {
  padding-block: var(--sp-2xl);
  background: var(--c-plum-800);
  color: var(--c-on-dark);
  text-align: center;
}
.final__inner { max-width: 46rem; margin-inline: auto; }
.final__title {
  font-family: var(--f-serif);
  font-size: var(--fs-800);
  font-weight: 400;
  color: var(--c-on-dark);
  text-wrap: balance;
}
.final__text {
  margin: var(--sp-md) auto var(--sp-lg);
  max-width: 46ch;
  font-size: var(--fs-500);
  color: var(--c-on-dark-soft);
}
.final .microcopy { justify-content: center; color: var(--c-on-dark-soft); margin-top: var(--sp-md); }
.final .btn--primary {
  background-image: linear-gradient(180deg, var(--c-ivory) 0%, var(--c-ivory-deep) 100%);
  background-color: var(--c-ivory);
  color: var(--c-plum-800);
  border-color: var(--c-gold-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-3);
}
.final .btn--primary:hover { background-image: linear-gradient(180deg, #fff, var(--c-ivory)); }
.final .btn--primary:active { box-shadow: inset 0 2px 6px rgba(46,17,25,.18); }
.final .btn--primary .btn__icon { color: var(--c-plum-700); }
.final .btn--primary .btn__icon::after { border-color: var(--c-ivory); }

/* -----------------------------------------------------------------------------
   20. RODAPÉ
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--sp-2xl) var(--sp-lg);
  background: var(--c-ivory-deep);
  border-top: var(--bd-gold);
  font-size: var(--fs-300);
  color: var(--c-ink-soft);
}
.footer__grid { display: grid; gap: var(--sp-xl); }
.footer__name { font-family: var(--f-serif); font-size: var(--fs-700); color: var(--c-plum-800); margin-bottom: 0; }
.footer__role {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: var(--sp-2xs);
}
.footer__cro { font-size: var(--fs-200); color: var(--c-ink-mute); }
.footer__title {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: var(--sp-sm);
}
.footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-weight: 600;
  color: var(--c-plum-700);
  text-decoration: none;
  border-bottom: 1px solid var(--c-plum-300);
}
.footer__wa::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-wa);
  box-shadow: 0 0 0 3px rgba(30,158,82,.15);
}
.footer__wa:hover { color: var(--c-plum-900); }
.footer__addr { font-size: var(--fs-200); margin-top: var(--sp-2xs); }
.footer__nav { display: grid; gap: var(--sp-3xs); }
.footer__nav a {
  display: inline-block;
  padding-block: 0.5rem;
  min-height: 44px;
  font-size: var(--fs-200);
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer__nav a:hover { color: var(--c-plum-700); }

.footer__legal {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-line-soft);
}
.privacy { margin-bottom: var(--sp-sm); }
.privacy summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--c-plum-700);
}
.privacy__body { padding-top: var(--sp-2xs); font-size: var(--fs-200); color: var(--c-ink-mute); max-width: var(--w-text); }
.footer__disclaimer { font-size: var(--fs-100); color: var(--c-ink-mute); max-width: var(--w-text); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
  font-size: var(--fs-100);
  color: var(--c-ink-mute);
}

@media (min-width: 720px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-lg); }
}

/* -----------------------------------------------------------------------------
   21. BARRA FIXA (mobile) E BOTÃO FLUTUANTE (desktop)
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  padding: 0.6rem var(--sp-sm);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(251,247,242,.94), var(--c-ivory));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 20px rgba(46,17,25,.08);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease);
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  max-width: 40rem;
  margin-inline: auto;
}
.mobile-bar__text { margin: 0; display: grid; line-height: 1.25; min-width: 0; }
.mobile-bar__text strong {
  font-family: var(--f-serif);
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--c-plum-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-bar__text span {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.btn--wa { flex: none; padding-inline: 1.15rem; }

/* Reserva de espaço para a barra não cobrir conteúdo */
@media (max-width: 959px) {
  body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 960px) {
  .mobile-bar { display: none; }
}

.fab {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: var(--z-fab);
  display: none;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--c-on-dark);
  background-image: linear-gradient(180deg, var(--c-plum-600), var(--c-plum-800));
  border: 1px solid var(--c-plum-900);
  box-shadow: var(--sh-inset-top), var(--sh-3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.fab__icon { position: relative; display: inline-flex; color: var(--c-gold-soft); }
.fab__icon::after {
  content: "";
  position: absolute; right: -2px; top: -2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-wa); border: 1px solid var(--c-plum-800);
}
.fab:hover { box-shadow: var(--sh-inset-top), var(--sh-4); }
.fab:active { box-shadow: var(--sh-press); }
@media (min-width: 960px) {
  .fab { display: inline-flex; }
  .fab.is-visible { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------------
   22. MOTION — reveal editorial (uma única vez por seção)
   Estado oculto compartilhado pelas duas engines possíveis: com GSAP
   disponível (classe .gsap no <html>, ver script.js), o próprio GSAP anima
   opacity/transform quadro a quadro e a transição CSS abaixo fica desligada
   — do contrário as duas curvas de easing disputariam a mesma propriedade ao
   mesmo tempo. Sem GSAP, a transição CSS assume o reveal via .is-visible,
   exatamente como antes.
   -------------------------------------------------------------------------- */
[data-reveal-item] {
  opacity: 0;
  transform: translateY(14px);
}
html:not(.gsap) [data-reveal-item] {
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
}
[data-reveal].is-visible [data-reveal-item] { opacity: 1; transform: none; }

/* Stagger total limitado a ~240ms (fallback sem GSAP) */
html:not(.gsap) [data-reveal].is-visible [data-reveal-item]:nth-child(1) { transition-delay: 0ms; }
html:not(.gsap) [data-reveal].is-visible [data-reveal-item]:nth-child(2) { transition-delay: 60ms; }
html:not(.gsap) [data-reveal].is-visible [data-reveal-item]:nth-child(3) { transition-delay: 120ms; }
html:not(.gsap) [data-reveal].is-visible [data-reveal-item]:nth-child(4) { transition-delay: 180ms; }
html:not(.gsap) [data-reveal].is-visible [data-reveal-item]:nth-child(n+5) { transition-delay: 240ms; }

/* Entrada de imagem: máscara + escala máxima 1.03 */
[data-reveal] .portrait__frame { clip-path: inset(0 0 100% 0); }
[data-reveal] .portrait__img { transform: scale(1.03); }
html:not(.gsap) [data-reveal] .portrait__frame { transition: clip-path var(--t-reveal) var(--ease); }
html:not(.gsap) [data-reveal] .portrait__img { transition: transform 800ms var(--ease); }
[data-reveal].is-visible .portrait__frame { clip-path: inset(0 0 0 0); }
[data-reveal].is-visible .portrait__img { transform: scale(1); }

/* Sem JavaScript: nada fica escondido */
.no-js [data-reveal-item] { opacity: 1; transform: none; }
.no-js .portrait__frame { clip-path: none; }
.no-js .portrait__img { transform: none; }
.no-js .mobile-bar { transform: none; }

/* -----------------------------------------------------------------------------
   23. PREFERÊNCIA POR MENOS MOVIMENTO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal-item] { opacity: 1; transform: none; }
  [data-reveal] .portrait__frame { clip-path: none; }
  [data-reveal] .portrait__img { transform: none; }
  .btn--primary:hover, .map-card:hover, .fab { transform: none; }
  .mobile-bar { transform: translateY(110%); }
  .mobile-bar.is-visible { transform: none; }
}

/* -----------------------------------------------------------------------------
   24. IMPRESSÃO
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-bar, .fab, .dev-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .manifesto, .final { background: #fff; color: #000; }
  .manifesto__title, .final__title { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; word-break: break-all; }
}