/* =========================================================================
   Rafaela Schumacher — Nutricionista
   Sistema de design "Noir & Champagne"

   1. Tokens          9. Reveal          17. Depoimentos
   2. Reset          10. Hero            18. FAQ
   3. Layout         11. Sobre           19. CTA final
   4. Acessibilidade 12. Painéis         20. Rodapé
   5. Botões         13. Section head    21. WhatsApp flutuante
   6. Marca          14. Como funciona   22. Movimento reduzido
   7. Eyebrow        15. O que inclui    23. Impressão
   8. Header         16. Planos
   ========================================================================= */

/* ===== 1. Tokens ===== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0F0E0C;
  --bg-alt:        #15130F;
  --surface:       #1B1815;
  --text:          #F2EDE4;
  --text-muted:    #A79C8B;
  --text-subtle:   #8D8374;
  --border:        #2B2620;
  --border-strong: #3A332A;

  --gold:          #C8A96A;
  --gold-bright:   #DFC48D;
  --gold-dim:      rgba(200, 169, 106, 0.30);
  --gold-wash:     rgba(200, 169, 106, 0.07);
  --on-gold:       #0F0E0C;
  --gold-grad:     linear-gradient(135deg, #DFC48D 0%, #C8A96A 45%, #A88B4F 100%);

  --panel-grad:    radial-gradient(120% 140% at 50% 0%, #221D15 0%, #100F0C 72%);
  --panel-text:    #F4EFE6;
  --panel-muted:   rgba(244, 239, 230, 0.72);

  --header-bg:     rgba(15, 14, 12, 0.82);
  --scrim:         rgba(6, 6, 5, 0.72);
  --chat-paper:    #EDE7DC;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .28), 0 6px 20px rgba(0, 0, 0, .22);
  --shadow-md:   0 2px 6px rgba(0, 0, 0, .32), 0 24px 60px rgba(0, 0, 0, .40);
  --shadow-gold: 0 10px 34px rgba(200, 169, 106, 0.16);
}

[data-theme="light"] {
  color-scheme: light;

  --bg:            #FAF7F1;
  --bg-alt:        #F2ECE1;
  --surface:       #FFFFFF;
  --text:          #14120F;
  --text-muted:    #5F5749;
  --text-subtle:   #6E6657;
  --border:        #E4DCCC;
  --border-strong: #D3C7B1;

  /* Dourados escurecidos o suficiente para o texto passar em AA sobre fundo
     claro (4.5:1) e para o branco passar sobre o degradê do botão. */
  --gold:          #856830;
  --gold-bright:   #6E5522;
  --gold-dim:      rgba(133, 104, 48, 0.34);
  --gold-wash:     rgba(133, 104, 48, 0.08);
  --on-gold:       #FFFFFF;
  --gold-grad:     linear-gradient(135deg, #8F7030 0%, #7D6029 50%, #684E1E 100%);

  --panel-grad:    radial-gradient(120% 140% at 50% 0%, #262019 0%, #14120F 72%);
  --panel-text:    #F7F3EA;
  --panel-muted:   rgba(247, 243, 234, 0.74);

  --header-bg:     rgba(250, 247, 241, 0.85);
  --scrim:         rgba(20, 18, 15, 0.45);
  --chat-paper:    #EDE7DC;

  --shadow-sm:   0 1px 2px rgba(58, 44, 30, .05), 0 6px 20px rgba(58, 44, 30, .06);
  --shadow-md:   0 2px 6px rgba(58, 44, 30, .06), 0 24px 60px rgba(58, 44, 30, .12);
  --shadow-gold: 0 10px 34px rgba(147, 116, 56, 0.14);
}

:root {
  /* Os painéis .panel são escuros nos dois temas, então o dourado usado sobre
     eles não acompanha o tema — precisa ser sempre o claro. */
  --gold-on-panel: #DFC48D;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --container: 1160px;
  --gutter:    clamp(20px, 5vw, 32px);
  --section-y: clamp(64px, 8.5vw, 118px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ===== 2. Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  /* A gaveta do menu fica estacionada fora da tela à direita; sem isto ela cria
     rolagem horizontal no mobile. `clip` (e não `hidden`) porque não cria um
     contexto de rolagem e portanto não quebra o `position: sticky` do header. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.95rem, .92rem + .15vw, 1.02rem);
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }

:where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--text);
  text-wrap: balance;
}
p { text-wrap: pretty; overflow-wrap: break-word; }
/* Em parágrafo centralizado o reequilíbrio de linhas foi testado e reprovado pela
   usuária: as linhas ficam quase do mesmo tamanho e o bloco "desenha um triângulo"
   sob o título. Última linha curta aqui é estilo, não defeito. */
.hero__inner p,
.who__content p,
.section-head p,
.services__payment,
.final-cta p { text-wrap: auto; }
em { font-style: italic; font-weight: 400; color: var(--gold); }

/* ===== 3. Layout ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { padding-block: var(--section-y); }

/* ===== 4. Acessibilidade ===== */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 999;
  transform: translate(-50%, -120%);
  background: var(--gold);
  color: var(--on-gold);
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
.panel :where(a, button):focus-visible { outline-color: #F4EFE6; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== 5. Botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 15px clamp(24px, 4vw, 38px);
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 500;
  font-size: clamp(.7rem, .68rem + .1vw, .75rem);
  text-transform: uppercase;
  letter-spacing: .15em;
  line-height: 1.3;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), filter .3s var(--ease);
}
.btn svg { flex-shrink: 0; width: 17px; height: 17px; }

.btn--primary {
  background: var(--gold-grad);
  color: var(--on-gold);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); filter: brightness(1.06); }

.btn--outline {
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--outline:hover { border-color: var(--gold); background: var(--gold-wash); transform: translateY(-2px); }

.btn--sm { min-height: 44px; padding: 11px 20px; font-size: .66rem; }

.panel .btn--primary { background: var(--panel-text); color: #14120F; box-shadow: var(--shadow-md); }
.panel .btn--primary:hover { background: #fff; filter: none; }
.panel .btn--outline { border-color: rgba(244, 239, 230, .4); color: var(--panel-text); }
.panel .btn--outline:hover { border-color: var(--panel-text); background: rgba(244, 239, 230, .08); }

/* ===== 6. Marca ===== */
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand__mark { width: 40px; height: 40px; color: var(--gold); flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.34rem;
  color: var(--text);
  white-space: nowrap;
}
.brand__name em { font-weight: 300; }
.brand__role {
  margin-top: 5px;
  font-size: .53rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .brand { gap: 10px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 1.12rem; }
  .brand__role { font-size: .48rem; letter-spacing: .24em; }
}

/* ===== 7. Eyebrow / filete ===== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  color: var(--gold);
  font-weight: 400;
  font-size: clamp(.62rem, .6rem + .08vw, .7rem);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: clamp(20px, 4vw, 34px);
  height: 1px;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}
.section-head .eyebrow::after {
  content: "";
  width: clamp(20px, 4vw, 34px);
  height: 1px;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}
.panel .eyebrow { color: var(--gold-on-panel); }

/* ===== 8. Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 13px;
}
.header__tools { display: flex; align-items: center; gap: 8px; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.55vw, 22px); }
.nav__link {
  position: relative;
  padding-block: 6px;
  font-size: .69rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--gold); }
.nav__link.is-active::after { transform: scaleX(1); }
.nav__cta { white-space: nowrap; }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-wash); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.menu-toggle {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.menu-toggle__box { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.menu-toggle__box span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
body.nav-open { overflow: hidden; }

@media (max-width: 1180px) {
  .nav {
    position: fixed;
    inset-block: 0;
    right: 0;
    z-index: 99;
    height: 100dvh;
    width: min(84vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 32px clamp(24px, 6vw, 38px);
    padding-top: max(32px, env(safe-area-inset-top));
    background: var(--bg-alt);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
  .nav__link { font-size: .78rem; padding-block: 15px; border-bottom: 1px solid var(--border); }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 26px; width: 100%; }
  .menu-toggle { display: grid; }
  .menu-toggle.is-open .menu-toggle__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.is-open .menu-toggle__box span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open .menu-toggle__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (min-width: 1181px) { .nav-scrim { display: none; } }

/* ===== 9. Reveal ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-stagger] > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ===== 10. Hero ===== */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(52px, 8vw, 100px) clamp(64px, 10vw, 118px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -45%;
  left: 50%;
  z-index: -1;
  translate: -50% 0;
  width: min(1100px, 135vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--gold-wash) 0%, transparent 62%);
  pointer-events: none;
}
/* Duas colunas: o texto à esquerda, o retrato à direita. O rosto aparece na
   primeira tela, sem rolar. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  align-items: center;
  gap: clamp(38px, 6vw, 76px);
}
.hero__content { max-width: 640px; }
.hero__figure { margin: 0; }
/* Mesmo painel do retrato do Sobre — é o formato oficial de foto de pessoa na
   marca: retangular alto, cantos arredondados, nunca em círculo. */
.hero-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hero h1 {
  font-size: clamp(2.1rem, 1.25rem + 4.2vw, 4.1rem);
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.hero__lead {
  max-width: 620px;
  margin-bottom: clamp(28px, 4vw, 40px);
  color: var(--text-muted);
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 3vw, 34px);
  margin-top: clamp(34px, 5vw, 52px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--border);
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(.64rem, .61rem + .1vw, .71rem);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--text-muted);
}
.hero__trust li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
/* Registro profissional: etiqueta pequena no canto do retrato. */
.hero__figure { position: relative; }
.crn-seal {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  white-space: nowrap;
}
.crn-seal svg { width: 13px; height: 13px; color: var(--gold); }

/* Fotos recortadas (fundo transparente); cada tema trata o fundo de um jeito.
   Escuro: o retrato fica num cartão creme da própria paleta (o mesmo tom do
   texto do tema escuro), no lugar da parede bege original.
   Claro: sem cartão, a Rafaela fica direto sobre o fundo da página, sem sombra
   e com a base esfumada para o corte do retrato não virar uma linha reta. */
[data-theme="dark"] :is(.hero-photo, .about-photo) { background: #F2EDE4; }
[data-theme="light"] :is(.hero-photo, .about-photo) {
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
[data-theme="light"] .about__figure::after { display: none; }

/* ===== 11. Sobre ===== */
.about { background: var(--bg-alt); }
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(38px, 6vw, 74px);
  align-items: center;
}
.about__figure { position: relative; isolation: isolate; margin: 0; }
.about__figure::after {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  z-index: -1;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
}
.about-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.about__credential {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--gold);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.about__credential::before {
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}
.about__content h2 + .about__credential { margin: -6px 0 22px; font-size: .7rem; color: var(--gold); }
@media (max-width: 860px) { .about__credential { justify-content: center; } }

.about__content h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin-bottom: 20px; }
.about__content p { color: var(--text-muted); margin-bottom: 16px; }
.about__tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--text-muted);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.tag:hover { border-color: var(--gold-dim); color: var(--gold); }

@media (max-width: 860px) {
  /* Empilha na mesma largura do Sobre, e o retrato vai para cima do texto:
     o ponto do hero é o rosto aparecer antes de qualquer rolagem. */
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__figure { order: -1; max-width: 340px; margin-inline: auto; }
  .hero__content { margin-inline: auto; }
  .hero__lead { margin-inline: auto; }
  .hero__actions, .hero__trust { justify-content: center; }

  .about__inner { grid-template-columns: 1fr; text-align: center; }
  .about__figure { max-width: 340px; margin-inline: auto; }
  .about__figure::after { inset: 12px -12px -12px 12px; }
  .about__tags { justify-content: center; }
}

/* ===== 12. Painéis escuros ===== */
.panel { background: var(--panel-grad); color: var(--panel-text); }
.panel :where(h2, h3) { color: var(--panel-text); }
.panel p { color: var(--panel-muted); }

.who__inner { display: flex; justify-content: center; }
.who__content { max-width: 800px; text-align: center; }
.who__content h2 { font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2.55rem); margin-bottom: clamp(28px, 4vw, 40px); }
/* Fecho do bloco: mesma coluna da lista, respiro equivalente ao do título. */
.who__fecho { max-width: 620px; margin: clamp(26px, 3.4vw, 36px) auto 0; }
.who__list {
  display: grid;
  gap: 13px;
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}
.who__list li {
  position: relative;
  padding-left: 30px;
  color: var(--panel-muted);
  font-size: clamp(.94rem, .9rem + .2vw, 1.05rem);
}
.who__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .8em;
  width: 16px; height: 1px;
  background: var(--gold-on-panel);
}

/* ===== 13. Cabeçalho de seção ===== */
.section-head { max-width: 680px; margin: 0 auto clamp(38px, 5.5vw, 66px); text-align: center; }
.section-head h2 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 2.95rem); margin-bottom: 14px; }
.section-head p { color: var(--text-muted); }
.section-head .eyebrow { justify-content: center; }

/* ===== 14. Como funciona ===== */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(20px, 2.8vw, 32px);
  counter-reset: step;
}
.step { position: relative; padding-top: 24px; border-top: 1px solid var(--border); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--gold);
}
.step h3 { font-size: 1.32rem; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: .92rem; }

/* ===== 15. O que inclui ===== */
.includes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: clamp(14px, 2vw, 22px);
  max-width: 1020px;
  margin-inline: auto;
}
.includes__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.includes__item:hover { border-color: var(--gold-dim); transform: translateY(-3px); }
/* O item agora tem número, título e descrição. A numeração reaproveita as
   mesmas declarações de `.step::before` — mesmo contador, mesma tinta, mesma
   escala — e entra DENTRO do card que já existia, no lugar do filete que antes
   marcava o item. O título herda a tipografia que o `p` tinha; o `p` passa a
   ser a descrição. */
.includes__grid { counter-reset: incl; }
.includes__item::before {
  counter-increment: incl;
  content: "0" counter(incl);
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--gold);
}
.includes__item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 1.05rem + .3vw, 1.3rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 8px;
}
.includes__item p {
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* ===== 16. Guias ===== */
/* Fundo alternado para separar do "O que inclui" e dos Planos, que sao
   os dois vizinhos em --bg. A capa reusa o tratamento oficial de painel
   de imagem da marca: retangular alto, --radius-lg e --shadow-md. */
.guias { background: var(--bg-alt); }
.guias__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3.2vw, 44px);
  max-width: 960px;
  margin-inline: auto;
}
.guia { margin: 0; }
.guia img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.guia figcaption { margin-top: clamp(16px, 2vw, 22px); text-align: center; }
.guia h3 { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); margin-bottom: 7px; }
.guia figcaption p { color: var(--text-muted); font-size: .92rem; }

@media (max-width: 820px) {
  .guias__grid { grid-template-columns: 1fr; max-width: 320px; gap: 40px; }
}

/* ===== 17. Planos ===== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 26px);
  max-width: 1020px;
  margin-inline: auto;
  align-items: stretch;
}
.plan-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 46px) clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-dim); }
.plan-card h3 { font-size: clamp(1.48rem, 1.35rem + .5vw, 1.78rem); margin-bottom: 24px; }
.plan-card__list { flex-grow: 1; display: grid; gap: 14px; align-content: start; margin-bottom: 30px; }
.plan-card__list li {
  position: relative;
  padding-left: 26px;
  font-size: .9rem;
  color: var(--text-muted);
}
.plan-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .82em;
  width: 14px; height: 1px;
  background: var(--gold);
}
.plan-card__cta {
  width: 100%;
  padding-inline: 18px;
  letter-spacing: .1em;
  white-space: nowrap;
}

.plan-card--highlight {
  border-color: var(--gold-dim);
  background: linear-gradient(180deg, var(--gold-wash) 0%, var(--surface) 36%);
  box-shadow: var(--shadow-md);
}
.plan-card__badge {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% -50%;
  background: var(--gold-grad);
  color: var(--on-gold);
  border-radius: 999px;
  padding: 7px 20px;
  font-size: .62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.services__payment {
  max-width: 640px;
  margin: clamp(32px, 4vw, 46px) auto 0;
  text-align: center;
  color: var(--text-subtle);
  font-size: .84rem;
}

/* ===== 18. Depoimentos ===== */
.testimonials { background: var(--bg-alt); }
.testimonials__grid {
  columns: 3;
  column-gap: clamp(16px, 2.2vw, 26px);
  max-width: 1080px;
  margin-inline: auto;
}
@media (max-width: 940px) { .testimonials__grid { columns: 2; } }
@media (max-width: 620px) { .testimonials__grid { columns: 1; } }

.testimonial {
  break-inside: avoid;
  margin-bottom: clamp(16px, 2.2vw, 26px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-dim); }
.testimonial__header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  background: var(--gold-grad);
}
.testimonial__avatar {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  color: var(--on-gold);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.testimonial__name {
  color: var(--on-gold);
  font-weight: 400;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.testimonial__btn {
  position: relative;
  display: block;
  width: 100%;
  background: var(--chat-paper);
  cursor: zoom-in;
}
.testimonial__btn img { width: 100%; height: auto; }
.testimonial__btn::after {
  content: "Ampliar";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 30px 12px 11px;
  background: linear-gradient(to top, rgba(18, 16, 13, .78), transparent);
  color: #fff;
  font-size: .59rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  text-align: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.testimonial__btn:hover::after,
.testimonial__btn:focus-visible::after { opacity: 1; }

/* Lightbox */
.lightbox {
  margin: auto;
  max-width: min(92vw, 700px);
  max-height: 92dvh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  color: var(--text);
}
.lightbox::backdrop { background: rgba(6, 6, 5, .9); backdrop-filter: blur(4px); }
.lightbox img {
  width: 100%;
  height: auto;
  max-height: 88dvh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--chat-paper);
}
/* Fica dentro dos limites do diálogo para nunca sair da tela em telas pequenas. */
.lightbox__close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #14120F;
  color: #F4EFE6;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  transition: background .25s var(--ease);
}
.lightbox__close:hover { background: var(--gold); color: var(--on-gold); }

/* ===== 19. FAQ ===== */
.faq__list { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(19px, 2.6vw, 26px) 4px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.35;
  color: var(--text);
  transition: color .25s var(--ease);
}
.faq__question:hover { color: var(--gold); }
.faq__icon { position: relative; flex-shrink: 0; width: 15px; height: 15px; }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transition: transform .3s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__question[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.faq__answer > div { overflow: hidden; }
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer p { max-width: 68ch; padding: 0 4px 26px; color: var(--text-muted); font-size: .94rem; }

/* ===== 20. CTA final ===== */
.final-cta { text-align: center; }
.final-cta h2 {
  max-width: 840px;
  margin-inline: auto;
  margin-bottom: 20px;
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 2.95rem);
}
.final-cta p { max-width: 620px; margin-inline: auto; margin-bottom: 14px; }
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 38px);
}

/* ===== 21. Rodapé ===== */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding-top: clamp(44px, 6vw, 64px);
}
.footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 44px);
}
.footer__brand p { max-width: 34ch; margin-top: 14px; color: var(--text-muted); font-size: .85rem; }
.footer__col h3 {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--text-subtle);
}
.footer__list { display: grid; gap: 12px; }
.footer__list a,
.footer__list span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: .85rem;
  transition: color .25s var(--ease);
}
.footer__list a:hover { color: var(--gold); }
.footer__list svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  padding-block: 20px;
  border-top: 1px solid var(--border);
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-subtle);
}

/* ===== 22. WhatsApp flutuante ===== */
.whatsapp-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #1FA855;
  color: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  transition: transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
}
.whatsapp-float:hover { transform: scale(1.07); }
.whatsapp-float.is-hidden,
body.nav-open .whatsapp-float { opacity: 0; visibility: hidden; transform: scale(.7); }

/* ===== 23. Movimento reduzido ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== 24. Impressão ===== */
@media print {
  .header, .whatsapp-float, .nav-scrim, .testimonial__btn::after { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .faq__answer { grid-template-rows: 1fr !important; }
}