/* =============================================================================
   SWEET FERRON — COMPONENTS
   Implementação do DESIGN-SYSTEM.md §4. Consome SÓ tokens de tokens.css.
   -----------------------------------------------------------------------------
   REGRAS QUE ESTE ARQUIVO NÃO PODE QUEBRAR (lint em DESIGN-SYSTEM.md §9):
   1. Zero hex aqui. Nenhum. Só var(--token).
   2. O vermelho do Cardápio Web é banido na página inteira (§1.1).
   3. O verde do WhatsApp só existe em .btn--wa / .cta-sticky. Em mais nenhum pixel.
      ⚠️ O lint §9-3 é line-based: TODA declaração que usa o token verde está
      escrita na MESMA LINHA do seu seletor, de propósito. Não quebre essas linhas.
   4. Grid de ocasiões: 2 colunas no mobile. Nunca 3.
   5. Toda imagem com aspect-ratio (+ width/height no HTML). CLS alvo = 0.

   ⚠️ NENHUM comentário aqui pode escrever um hex literal nem o prefixo do token
      verde: o lint do §9 é textual e não distingue comentário de declaração.
      Citar a cor proibida reprova a build. Descreva em palavras.
   ============================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  /* §4.2 — obrigatório: sem isto a barra sticky come o rodapé. */
  padding-bottom: calc(var(--h-sticky-cta) + env(safe-area-inset-bottom));
}

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

img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
}

h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-xl);  font-weight: var(--fw-bold); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-lg);  font-weight: var(--fw-medium); line-height: var(--lh-snug); }

p { margin: 0; }

a { color: var(--theme-accent); }

/* §7 — foco visível em TODA a página. outline:none sem substituto é proibido. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* -----------------------------------------------------------------------------
   LAYOUT — container / seção / ritmo
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }

.section--alt { background: var(--bg-surface-alt); }

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--sp-8);
}

.section__sub {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-md);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }

/* Eyebrow — §2.1 */
.eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--theme-accent);
}

/* Skip link — §7 */
.skip {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); }

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

/* -----------------------------------------------------------------------------
   §4.1  .btn--wa — BOTÃO WHATSAPP (o único caminho de conversão)
   ⚠️ Fundo = verde ESCURO (branco = 5.10:1, AA). NÃO o verde vivo oficial:
      branco sobre ele dá 1.98:1 e reprova. O verde vivo entra só como ícone,
      aura e hover (tinta escura por cima = 10.6:1). Ver §1.3.
   ⚠️ As linhas de cor abaixo são single-line por causa do lint §9-3.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 0;
}

.btn--wa {
  min-height: var(--touch-cta);
  padding: var(--sp-3) var(--sp-6);
  width: 100%;
  max-width: 28rem;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1.2;
  border-radius: var(--r-pill);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

/* ↓↓↓ NÃO quebrar estas linhas — lint §9-3 é line-based ↓↓↓ */
.btn--wa { background: var(--c-wa-600); color: var(--c-white); box-shadow: var(--shadow-cta), var(--inset-hairline); }
.btn--wa .icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--c-wa-500); }
.btn--wa:hover { background: var(--c-wa-500); color: var(--c-ink-900); box-shadow: var(--shadow-cta-hover); transform: translateY(-1px); }
.btn--wa:active { background: var(--c-wa-700); box-shadow: var(--shadow-sm); transform: translateY(0); }
.btn--wa:focus-visible { outline: 3px solid var(--focus-ring-inverse); outline-offset: 3px; }
/* ↑↑↑ NÃO quebrar estas linhas ↑↑↑ */

.btn--wa .icon path { fill: currentColor; }

/* §4.3 — secundário. Borda vinho, nunca verde, nunca preenchido. */
.btn--ghost {
  min-height: var(--touch-house);
  padding: var(--sp-3) var(--sp-5);
  background: transparent;
  color: var(--theme-accent);
  border: 2px solid var(--theme-accent);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1.2;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn--ghost:hover {
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

.btn-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   §4.8  .urgency + .topbar
   A urgência ROLA JUNTO (não é sticky). Só a topbar gruda. — §4.8
   -------------------------------------------------------------------------- */
/* A copy (Bloco 0) torna esta barra CLICÁVEL. Sendo link, ela cai sob o piso
   absoluto de 44px do §5.3 — por isso min-height é --touch-min e não --h-urgency
   (32px, que o §4.8 assume pra uma barra NÃO-clicável). Custo real: +2px.
   ✅ A barra mede 44px (piso do touch target), não 32px. O --h-chrome do tokens.css
      já reflete isso: 96px no mobile (44+52) e 108px em >=768 (44+64). */
.urgency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: var(--sp-1) var(--gutter);
  background: var(--theme-urgency-bg);
  color: var(--theme-urgency-fg);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.urgency:hover { background: var(--theme-accent-hover); }
.urgency:focus-visible { outline: 3px solid var(--focus-ring-inverse); outline-offset: -3px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-top);
  min-height: var(--h-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--bg-page) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}

/* O logo é um link → alvo de toque. A imagem tem 34px (§4.8), mas a ÁREA
   clicável precisa respeitar o piso de 44px do §5.3. */
.topbar__home {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}
.topbar__logo { height: 34px; width: auto; }

/* Sempre visível no mobile. Nunca display:none. Piso 44px (§5.3). */
.topbar__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding-inline: var(--sp-3);
  color: var(--theme-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-subtle);
}
.topbar__wa .icon { width: 20px; height: 20px; flex: 0 0 20px; }
.topbar__wa:hover { border-color: var(--border-accent); }

/* -----------------------------------------------------------------------------
   §5.1  .hero — a conta do fold. Não mexer sem refazer a matemática.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  height: clamp(420px, calc(100svh - var(--h-chrome)), 560px);
  display: flex;
  overflow: hidden;
}

/* Camada 1 — a foto, full-bleed */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  aspect-ratio: 4 / 5;
}

/* Camada 2 — o scrim. OBRIGATÓRIO: sem ele não há contraste sobre a foto (§1.4). */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background: var(--theme-hero-scrim);
  pointer-events: none;
}

/* Camada 3 — o texto.
   MOBILE: ancorado no TOPO do hero (decisão da cliente, 16/07) — o texto senta
   sobre o céu desfocado, onde o escurecimento (assado na foto + scrim) é máximo,
   e a cesta fica 100% visível e limpa na metade inferior. O scrim acompanha:
   escuro no topo, transparente embaixo (token --theme-hero-scrim). */
.hero__inner {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-5) var(--gutter);
}

.hero__title {
  color: var(--text-on-inverse);
  max-width: 20ch;
}

.hero__sub {
  margin-top: var(--sp-3);
  color: var(--text-on-inverse);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  max-width: 42ch;
}

/* Selo de prova — 5,0 no Google. Fica ENTRE o subtítulo e o botão.
   MOBILE: o chip é um SCRIM LOCAL escuro (§1.4). Com o texto no topo, o selo
   cai na faixa onde a rampa da foto já desvaneceu (a cesta precisa ficar limpa
   embaixo) — então o próprio chip carrega o contraste do texto creme. */
.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  background: color-mix(in srgb, var(--c-ink-900) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--ornament) 55%, transparent);
  border-radius: var(--r-pill);
  color: var(--text-on-inverse);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

/* MOBILE: .hero__text vira coluna flex de altura total e o CTA desce com
   margin-top:auto até a BASE do hero (decisão do cliente, 16/07) — a cesta
   fica LIVRE entre o selo e o botão. O padding-top garante respiro mínimo
   quando o hero encolhe pro piso de 420px. Desktop reseta no @media.
   (.hero__note removido a pedido do cliente 2026-07-16 — HTML e CSS.) */
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.hero__cta { margin-top: auto; padding-top: var(--sp-4); width: 100%; }

/* ≥768px — grid 7/5 (texto | foto). Foto integrada, arredondada, nunca solta.
   ⚠️ O grid vive em .hero, que é o pai REAL de .hero__media e .hero__inner.
      Colocá-lo em .hero__inner (que só contém o texto) não forma coluna nenhuma
      e deixa a foto vazando no flex. Não mover. */
@media (min-width: 768px) {
  .hero {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: var(--sp-10);
    height: auto;
    min-height: 560px;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--section-y) var(--gutter);
    overflow: visible;
  }
  .hero__media {
    position: static;
    order: 2;
    align-self: center;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .hero__scrim { display: none; }

  /* O texto deixa de ser overlay: vira a coluna esquerda do grid. */
  .hero__inner {
    order: 1;
    display: block;
    max-width: none;
    margin-inline: 0;
    padding: 0;
  }
  .hero__title { font-size: var(--fs-3xl); color: var(--text-strong); max-width: 16ch; }
  .hero__sub { color: var(--text-muted); }
  .hero__selo {
    background: var(--bg-surface);
    border-color: var(--border-accent);
    color: var(--text-strong);
  }
  .hero__text { display: block; flex: none; }
  .hero__cta { margin-top: var(--sp-4); padding-top: 0; max-width: 28rem; }
}

/* -----------------------------------------------------------------------------
   §4.9  .trust-bar — ÍCONES DOURADOS. Nunca verdes. (§1 — a regra mais fácil de furar)
   -------------------------------------------------------------------------- */
/* ⚠️ DESVIO CONSCIENTE do §4.9 (grid 2 col mobile / 4 col ≥768) — reportado.
   O §4.9 assume 3–4 itens de rótulo CURTO ("entrega no mesmo dia"). A copy
   (Bloco 2) entrega 3 itens de FRASE INTEIRA e diz explicitamente "no mobile
   vira 3 linhas empilhadas". Frase inteira em coluna de 158px é ilegível, e
   3 itens em grid de 2 col deixam órfão. → 1 col mobile / 3 col ≥768.
   Isto NÃO afeta a regra "2 colunas nunca 3", que é do grid de OCASIÕES (§4.4). */
.trust-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-surface-alt);
  border-radius: var(--r-lg);
}
@media (min-width: 768px) {
  .trust-bar { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-6); }
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-default);
}
.trust-item__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--ornament);
}
.trust-item__title {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: var(--sp-1);
}

/* -----------------------------------------------------------------------------
   §4.4  .grid-ocasioes / .card-ocasiao
   2 COLUNAS NO MOBILE. NUNCA 3. (360 − 32 gutter − 12 gap) / 2 = 158px.
   -------------------------------------------------------------------------- */
.grid-ocasioes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 768px)  { .grid-ocasioes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 1024px) { .grid-ocasioes { grid-template-columns: repeat(4, 1fr); } }

.card-ocasiao {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.card-ocasiao__media { aspect-ratio: 1 / 1; }
.card-ocasiao__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }

.card-ocasiao__body { padding: var(--sp-3); }

.card-ocasiao__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

/* Card inteiro clicável — alvo ~158×220px, muito acima dos 44px. */
.card-ocasiao__title a { text-decoration: none; color: inherit; }
.card-ocasiao__title a::after { content: ""; position: absolute; inset: 0; }

.card-ocasiao__meta {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.card-ocasiao:hover,
.card-ocasiao:focus-within {
  transform: translateY(-2px);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md);
}
.card-ocasiao:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.card-ocasiao__title a:focus-visible { outline: none; }

/* CTA de escape — abaixo dos cards */
.escape {
  margin-top: var(--sp-8);
  text-align: center;
}
.escape p {
  margin-bottom: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-md);
}

/* -----------------------------------------------------------------------------
   §4.5  .card-preco / .grid-precos / .precos__* — REMOVIDOS em 2026-07-14.
   A seção "Quanto custa?" saiu da página a pedido da cliente (catálogo de preços
   vai por WhatsApp). Regras órfãs deletadas após grep: zero uso no HTML.
   O token --text-price PERMANECE (usado por .assinatura, .link-prova e afins).
   O primitivo .btn--ghost PERMANECE (componente do DS §4.3), embora sem uso atual.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   §4.6  .card-depoimento — scroll horizontal com snap. Zero JS.
   -------------------------------------------------------------------------- */
.depoimentos {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--sp-2) var(--sp-4);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  -webkit-overflow-scrolling: touch;
}
.depoimentos > * { scroll-snap-align: start; flex: 0 0 82vw; max-width: 30rem; }

@media (min-width: 768px) {
  .depoimentos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .depoimentos > * { flex: initial; max-width: none; }
}

.card-depoimento {
  position: relative;
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--bg-surface-alt);
  border-left: 3px solid var(--ornament);
  border-radius: var(--r-sm) var(--r-md) var(--r-md) var(--r-sm);
}

.card-depoimento::before {
  content: "\201C";
  position: absolute;
  top: -8px;
  left: var(--sp-4);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--ornament);
  opacity: 0.35;
  pointer-events: none;
}

.card-depoimento__estrelas {
  color: var(--ornament);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--sp-2);
}

.card-depoimento__texto {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-default);
}

/* Autor = só o nome (2026-07-16): avatar "?" e data/origem da review saíram do
   card por decisão do Gabriel. O flex+gap que os alinhava saiu junto — figcaption
   em fluxo normal, sem coluna vazia. */
.card-depoimento__autor {
  margin-top: var(--sp-4);
}

.card-depoimento__nome {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-strong);
}

.link-prova {
  display: inline-block;
  margin-top: var(--sp-6);
  color: var(--theme-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}

/* -----------------------------------------------------------------------------
   .steps — "Como funciona" (Bloco 6 da copy).
   Não há spec no DS §4 pra este organismo. Construído só com tokens.
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  counter-reset: step;
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
}

.step {
  position: relative;
  padding-left: var(--sp-12);
  counter-increment: step;
}
@media (min-width: 768px) {
  .step { padding-left: 0; padding-top: var(--sp-12); }
}

.step::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-10);
  height: var(--sp-10);
  background: var(--bg-surface);
  border: 2px solid var(--border-accent);
  border-radius: var(--r-circle);
  color: var(--text-price);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: 1;
}

.step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.step__desc {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.steps__fecho {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-subtle);
  max-width: var(--measure);
  color: var(--text-default);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

/* -----------------------------------------------------------------------------
   §4.7  .faq-item — <details>/<summary> nativo. ZERO JavaScript.
   -------------------------------------------------------------------------- */
.faq { max-width: var(--measure); }

.faq-item { border-bottom: 1px solid var(--border-subtle); }

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--touch-house);
  padding: var(--sp-4) 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-right: var(--sp-1);
  border-right: 2px solid var(--ornament);
  border-bottom: 2px solid var(--ornament);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] .faq-item__q::after { transform: rotate(-135deg); }

.faq-item__q:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.faq-item__a {
  padding-bottom: var(--sp-4);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}
.faq-item__a p + p { margin-top: var(--sp-3); }

/* -----------------------------------------------------------------------------
   .sobre — "Quem é a Hevelin" (Bloco 8 da copy). Sem spec no DS §4.
   -------------------------------------------------------------------------- */
.sobre { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; }
@media (min-width: 768px) {
  .sobre { grid-template-columns: 5fr 7fr; gap: var(--sp-12); }
}

.sobre__media { aspect-ratio: 3 / 4; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.sobre__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }

.sobre__texto p + p { margin-top: var(--sp-4); }
.sobre__texto p { color: var(--text-default); line-height: var(--lh-loose); max-width: var(--measure); }

/* Script — SÓ o eco do wordmark. Nunca headline, nunca botão, nunca < 20px. (§2) */
.assinatura {
  margin-top: var(--sp-6);
  font-family: var(--font-script);
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--text-price);
}

.sobre__social {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   .cta-final — Bloco 9
   -------------------------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-final__sub {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-md);
}
.cta-final__acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--sp-8);
}
.cta-final__selo {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

/* -----------------------------------------------------------------------------
   §4.11  .divisor — filete com abelha. Ornamento puro → aria-hidden.
   -------------------------------------------------------------------------- */
.divisor {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ornament);
}
.divisor::before,
.divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.divisor__glyph::before {
  content: var(--theme-ornament-glyph);
  font-size: 1.1rem;
}

/* -----------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding-block: var(--sp-10);
}
.rodape__nome {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--text-on-inverse);
}
.rodape p { margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.rodape a { color: var(--text-on-inverse); font-weight: var(--fw-bold); }
.rodape a:focus-visible { outline: 3px solid var(--focus-ring-inverse); outline-offset: 3px; }

/* Redes sociais — ícones de marca (SVG inline). Alvo de toque = --touch-min (44px),
   §5.3. Cor herdada do rodapé invertido: zero hex hardcoded. */
.rodape__social-list {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-4);
  margin-left: calc(var(--sp-2) * -1); /* compensa o padding do 1º ícone: alinha ao texto */
  padding: 0;
  list-style: none;
}
.rodape__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border-radius: var(--r-sm);
  color: var(--text-on-inverse);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.rodape__social-link .icon { width: 1.5rem; height: 1.5rem; }
.rodape__social-link:hover { opacity: 0.75; }
.rodape__social-link:focus-visible { outline: 3px solid var(--focus-ring-inverse); outline-offset: 2px; }

/* -----------------------------------------------------------------------------
   §4.2  .cta-sticky — barra fixa de rodapé
   FAIL-OPEN: data-visible="true" é o default no HTML. Sem JS, a barra fica
   visível. Nunca falhamos CONTRA a conversão.
   ⚠️ A linha da borda verde é single-line por causa do lint §9-3.
   -------------------------------------------------------------------------- */
.cta-sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky-cta);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sticky);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}

/* ↓↓↓ NÃO quebrar esta linha — lint §9-3 é line-based ↓↓↓ */
.cta-sticky { border-top: 2px solid var(--c-wa-500); }
/* ↑↑↑ NÃO quebrar esta linha ↑↑↑ */

.cta-sticky[data-visible="true"] { transform: translateY(0); }

.cta-sticky__label {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
@media (max-width: 479px) {
  .cta-sticky__label { display: none; }
}

.cta-sticky .btn--wa { min-height: var(--touch-house); width: auto; flex: 1; }
@media (min-width: 480px) {
  .cta-sticky .btn--wa { flex: 0 1 20rem; }
}

/* -----------------------------------------------------------------------------
   §4.10  .ph — PLACEHOLDER. Estilo declaradamente "não-final".
   Usado aqui pros DADOS que a Hevelin ainda não confirmou (preço, frete,
   bairros, reviews, endereço). As FOTOS pendentes são <img> cinza em ./img/.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 100%;
  aspect-ratio: var(--ph-ratio, 1 / 1);
  background: var(--bg-surface-alt);
  background-image: repeating-linear-gradient(45deg,
      transparent 0 10px,
      color-mix(in srgb, var(--ornament) 10%, transparent) 10px 20px);
  border: 2px dashed var(--border-accent);
  border-radius: inherit;
  color: var(--c-gold-900);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-align: center;
  padding: var(--sp-2);
}
.ph::before { content: "\1F4F7\00A0" attr(data-slot); }
.ph::after  { content: attr(data-ratio); font-weight: var(--fw-regular); opacity: 0.75; }

/* Variante TEXTO — pro dado pendente que vive dentro de uma frase.
   Não é foto: sem aspect-ratio, sem ícone de câmera. */
.ph--text {
  display: inline;
  width: auto;
  aspect-ratio: auto;
  padding: 0.1em 0.4em;
  border-width: 1px;
  border-radius: var(--r-xs);
  font-size: inherit;
  text-align: left;
  vertical-align: baseline;
}
.ph--text::before,
.ph--text::after { content: none; }

/* Bloco inteiro pendente (review de exemplo, endereço, frete). */
.ph--bloco {
  display: block;
  width: auto;
  aspect-ratio: auto;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  text-align: left;
  font-size: var(--fs-xs);
}
.ph--bloco::before,
.ph--bloco::after { content: none; }

/* Rede de segurança do §4.10: em prod o placeholder GRITA.
   O §4.10 escreve essa cor como hex literal, o que o lint §9-1 reprova. Usei a
   palavra-chave CSS `magenta` — mesmo pixel, zero hex, lint limpo. Ver relatório. */
html[data-env="prod"] .ph { outline: 4px solid magenta; outline-offset: -4px; }