/* =====================================================================
   Venda Doces no Natal Sem Aparecer — Layout-base (Etapa 1)
   Mobile-first. Ajuste a identidade só pelos tokens em :root.
   ===================================================================== */

/* ---------- 0. Fontes (hospedadas localmente) ----------
   Títulos: Fraunces · Textos: DM Sans · Botões azuis: Manrope (aparência original).
   Arquivos reduzidos aos caracteres latinos (português). */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dmsans.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}
/* Manrope: mantida só para os botões azuis de compra, que preservam a aparência original */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
/* Fontes de reserva com medidas ajustadas: evitam que o texto "pule" quando as fontes carregam */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 94.5%;
  ascent-override: 103.5%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial");
  size-adjust: 106.6%;
  ascent-override: 93.1%;
  descent-override: 29.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial");
  size-adjust: 102.6%;
  ascent-override: 103.9%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Cores da marca */
  /* Natal Premium. O nome --forest foi mantido para não mexer nas regras existentes:
     agora ele é o vermelho vinho principal. */
  --forest: #4A0D12;          /* vermelho vinho principal */
  --forest-700: #300908;      /* vermelho escuro */
  --red: #8F1720;             /* vermelho natalino */
  --cream: #FFF3DF;
  --paper: #FFF9F1;           /* branco suave */
  --gold: #D8A64B;
  --chocolate: #50382D;
  --white: #FFFFFF;

  --gold-300: #E4BC6E;
  --cta: #2563EB;             /* azul dos botões de compra */
  --cta-hover: #1D4ED8;

  /* Papéis de cor — página em verde-floresta, textos em creme */
  --bg: var(--forest);
  --bg-alt: #3D0B10;          /* vinho um tom abaixo, para alternar seções */
  --bg-deep: #300908;         /* vermelho escuro, para a oferta */
  --text: rgba(255, 243, 223, 0.94);
  --text-soft: rgba(255, 243, 223, 0.8);
  --heading: var(--cream);
  --line: rgba(255, 243, 223, 0.16);
  --line-strong: rgba(255, 243, 223, 0.28);
  --placeholder-bg: rgba(255, 243, 223, 0.06);

  /* Tipografia
     Fraunces: serifa encorpada com personalidade, nos títulos (700 principais, 600 secundários).
     DM Sans: sem serifa limpa e legível, nos textos (500), subtítulos e benefícios (600), preços (700). */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body: "DM Sans", "DM Sans Fallback", Arial, sans-serif;
  --font-cta: "Manrope", "Manrope Fallback", Arial, sans-serif;   /* só botões azuis */
  --fw-display: 700;          /* títulos principais: Fraunces Bold */
  --fw-display-strong: 700;
  --fw-display-2: 600;        /* títulos secundários: Fraunces SemiBold */

  /* Escala fluida (mobile → desktop) */
  --fs-xs: 0.8125rem;                                   /* 13 */
  --fs-sm: 0.9375rem;                                   /* 15 */
  --fs-base: 1.0625rem;                                 /* 17 */
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* 17–20 */
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);  /* 19–22 */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);    /* 28–42 */
  --fs-display: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);/* 34–56 */
  --fs-hero: clamp(1.75rem, 1.3rem + 2vw, 3rem);       /* 28–48: headline */

  /* Espaçamento (base 4px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --section-y: clamp(3.25rem, 2.6rem + 3.2vw, 5.5rem);
  --gutter: 1.25rem;

  /* Forma */
  --radius-sm: 4px;
  --radius: 8px;
  --shadow-soft: 0 1px 2px rgba(48, 9, 8, 0.12), 0 14px 34px -12px rgba(20, 2, 2, 0.45);

  --container: 72rem;
  --container-narrow: 40rem;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;                     /* textos descritivos: DM Sans Medium */
  line-height: 1.65;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;   /* números alinhados (preço, "7 anos", "30 receitas") */
  font-variation-settings: "WONK" 0;   /* Fraunces: itálico com desenho clássico (ignorado pelas outras fontes) */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* navegadores antigos */
  overflow-x: clip;     /* não cria contêiner de rolagem */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--paper { background: var(--bg-alt); }
.section--forest { background: var(--bg-deep); }

/* Superfícies claras (cards creme) sobre o fundo verde: textos voltam ao escuro */
.benefit,
.offer-card,
.testimonial {
  --heading: var(--forest);
  --text: var(--chocolate);
  --text-soft: rgba(80, 56, 45, 0.78);
  --line: rgba(80, 56, 45, 0.14);
  --line-strong: rgba(80, 56, 45, 0.24);
  color: var(--chocolate);
}

.section-head { margin-bottom: var(--sp-6); max-width: 36rem; }
.section--tight { padding-block: clamp(2.75rem, 2.2rem + 2.6vw, 4.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.text-center { text-align: center; }

/* ---------- 4. Tipografia ---------- */
.display,
.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--heading);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.08; }
.h2 { font-size: var(--fs-h2); line-height: 1.15; }

/* Itálico da serif para dar ênfase — no lugar de negrito ou cor */
.display em, .h2 em { font-style: italic; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
}
.eyebrow--gold { color: var(--gold); }
.section-head--center .eyebrow::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-lg); color: var(--text-soft); line-height: 1.6; }

.prose { margin-top: var(--sp-6); }
.prose p + p { margin-top: var(--sp-4); }
.prose p { text-wrap: pretty; }

.pull-quote {
  margin-top: var(--sp-7);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--heading);
}

.caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.microcopy {
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.microcopy--center { justify-content: center; }

/* ---------- 5. Ícones ---------- */
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon--sm { width: 1rem; height: 1rem; }

/* ---------- 6. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 3.5rem;            /* 56px: alvo de toque confortável */
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { transition: transform 0.2s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

/* Botão de compra: azul com texto branco (contraste 5,2:1) */
.btn--primary {
  background: var(--cta);
  color: var(--white);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.btn--primary:hover { background: var(--cta-hover); }

.btn--outline {
  background: transparent;
  color: var(--forest);
  border-color: var(--line-strong);
}
.btn--outline:hover { border-color: var(--forest); }

.btn--block { width: 100%; }
.btn.btn--caps {
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  text-wrap: balance;
}
.btn--lg { min-height: 3.75rem; font-size: var(--fs-lg); }

/* ---------- 7. Divisórias ---------- */
.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: var(--sp-6) 0;
}
.ornament {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--gold);
}
.ornament svg { width: 3rem; height: 1rem; }

/* ---------- 8. Espaços para imagem ---------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--placeholder-bg);
}
.media > img { width: 100%; height: 100%; object-fit: cover; }
.media--hero      { aspect-ratio: 4 / 3; }
.media--portrait  { aspect-ratio: 4 / 5; }
.media--landscape { aspect-ratio: 3 / 2; }
.media--square    { aspect-ratio: 1 / 1; }

.media__placeholder {
  position: absolute;
  inset: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  text-align: center;
}
.media__label {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--heading);
}
.media__label--sm { font-size: var(--fs-sm); line-height: 1.25; }
.media__hint { font-size: var(--fs-xs); color: var(--text-soft); max-width: 22ch; }

/* ---------- 9. Cabeçalho / rodapé ---------- */
.draft-bar {
  background: var(--chocolate);
  color: var(--cream);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-2) var(--gutter);
}

.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.75rem;
}
.site-header__tag { font-size: var(--fs-xs); color: var(--text-soft); text-align: right; }

.wordmark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--heading);
  white-space: nowrap;
}
.wordmark em { color: var(--gold); }
.wordmark--sm { font-size: 1.125rem; }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.site-footer__links { display: flex; gap: var(--sp-5); }
.site-footer__links a {
  display: inline-block;
  padding-block: 0.75rem;   /* área de toque ≥ 44px no celular */
  text-decoration: none;
}
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 10. Seções ---------- */

/* 1 · Primeira dobra */
.hero { padding-block: var(--sp-5) var(--sp-7); }
/* Celular: identificação + headline → subheadline + CTA + reforço → imagem */
.hero__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-areas: "head" "body" "visual";
}
.hero-visual { margin-top: var(--sp-4); }
.hero__head  { grid-area: head; }
.hero-visual { grid-area: visual; }
.hero__body  { grid-area: body; }
.hero__head .hero__title { margin-bottom: 0; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
  border: 1px solid rgba(216, 166, 75, 0.5);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--heading);
}
.hero__tag-icon { font-size: 0.875rem; line-height: 1; }

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-hero);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--heading);
  text-wrap: pretty;
  margin-bottom: var(--sp-4);
}

/* Destaque: itálico + sublinhado dourado fino — acompanha a quebra de linha */
.highlight {
  font-style: italic;
  font-weight: var(--fw-display-strong);
  color: var(--gold);
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}

.hero__sub {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 34rem;
  text-wrap: pretty;
}

.hero__action { margin-top: var(--sp-5); }
.mid-cta { margin-top: var(--sp-6); text-align: center; }

.btn--hero {
  width: 100%;
  min-height: 3.75rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  text-wrap: balance;
  box-shadow:
    inset 0 0 0 1px rgba(250, 246, 238, 0.06),
    0 12px 24px -14px rgba(0, 0, 0, 0.55);
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn--hero:hover {
  background: var(--cta-hover);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(250, 246, 238, 0.08),
    0 16px 28px -14px rgba(0, 0, 0, 0.6);
}
.btn--hero:active { transform: translateY(0); }

.hero__reassure {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-soft);
  text-align: center;
  text-wrap: balance;
}
/* Ícone em linha com o texto, para não se afastar quando a frase quebra */
.hero__reassure .icon {
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 0.3em;
  color: var(--gold);
}

/* Composição: foto dos doces + mockup do e-book sobreposto no canto */
.hero-visual { position: relative; padding-bottom: 14%; }
.hero-visual__photo { width: 86%; aspect-ratio: 4 / 3; }
.hero-visual__photo img { object-position: center 65%; }
.hero-visual__book {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  aspect-ratio: 480 / 677;
  background: var(--paper);
  border: 6px solid var(--cream);
  box-shadow: var(--shadow-soft);
}
.hero-visual__book .media__placeholder { inset: var(--sp-2); padding: var(--sp-2); }
.hero-visual__note {
  max-width: 58%;   /* não passa por baixo da capa */
  margin-top: var(--sp-2);
  font-size: 0.75rem;
  color: var(--text-soft);
}

/* 2 · Conexão emocional */
.prose--center { text-align: center; font-size: var(--fs-lg); color: var(--text-soft); }
.statement {
  position: relative;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--heading);
  text-align: center;
  text-wrap: balance;
}
.statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
}

/* 3 · Solução */
.solution {
  display: grid;
  gap: var(--sp-6);
  grid-template-areas: "head" "media" "cards";
}
.solution__head  { grid-area: head; max-width: 36rem; }
.solution__head .h2 { margin-bottom: var(--sp-4); }
.solution__media { grid-area: media; width: 100%; max-width: 15rem; margin-inline: auto; }
.solution__cards { grid-area: cards; }

.benefits { display: grid; gap: var(--sp-3); }
.benefit {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: 1.25rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.benefit__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(216, 166, 75, 0.14);
  color: var(--forest);
}
.benefit__icon svg { width: 1.375rem; height: 1.375rem; }
.benefit__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--forest);
}
.benefit__text { margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-soft); }

/* 4 · Objeções: a dúvida em itálico, a resposta marcada por um fio dourado */
.objections { display: grid; border-top: 1px solid var(--line); }
.objection { padding-block: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); }
.objection__q {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--heading);
}
.objection__a {
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--gold);
  color: var(--text-soft);
  text-wrap: pretty;
}

/* 5 · Demonstração */
.section-head__text { margin-top: var(--sp-4); }
.gallery { display: grid; gap: var(--sp-5) var(--sp-4); grid-template-columns: 1fr 1fr; align-items: start; }
.gallery__item--wide { grid-column: 1 / -1; }
.page-shot {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  background: var(--cream);
}
.gallery__note { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--text-soft); max-width: 40rem; }

/* Capa do e-book (seção Solução) */
.cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 4px rgba(20, 2, 2, 0.2), 0 24px 48px -20px rgba(10, 0, 0, 0.7);
}

/* 6 · Oferta */
.offer-card {
  background: var(--cream);
  --line: rgba(80, 56, 45, 0.14);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--gold);
  display: grid;
  gap: var(--sp-5);
}
.checklist { display: grid; gap: var(--sp-4); }
.checklist li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  line-height: 1.45;
}
.checklist .icon { color: var(--gold); margin-top: 0.1rem; }
.checklist strong { font-weight: 600; color: var(--forest); }

.price { display: grid; justify-items: center; gap: var(--sp-1); margin-bottom: var(--sp-5); text-align: center; }
.price__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.price__main {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2.3rem + 2.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--forest);
}
.price__currency { font-size: 0.42em; vertical-align: 0.9em; letter-spacing: 0; }

/* 7 · FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.5rem;
  padding-block: var(--sp-4);
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--gold);
  transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--sp-5); color: var(--text-soft); max-width: 60ch; }

/* ---------- 11. Telas maiores ---------- */
@media (min-width: 48rem) {               /* ≥ 768px */
  :root { --gutter: 2rem; }

  .benefits { grid-template-columns: 1fr 1fr; }
  .objections { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
  /* Página dupla ocupa 2 colunas; as páginas simples, 1 cada — mesma altura */
  .gallery { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-5); }
  .gallery__item--wide { grid-column: auto; }
  .offer-card {
    grid-template-columns: 13rem 1fr;
    column-gap: var(--sp-7);
    align-items: center;
    padding: var(--sp-7);
  }
  .recipes__photos { gap: var(--sp-4); }
  .testimonials { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

  .site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 64rem) {               /* ≥ 1024px */
  .hero { padding-block: var(--sp-7) var(--sp-8); }
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas: "head visual" "body visual";
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-8);
    row-gap: var(--sp-5);
    align-items: end;
  }
  .hero__body { align-self: start; }
  .hero__action { margin-top: var(--sp-6); display: inline-block; }
  .btn--hero { width: auto; padding-inline: var(--sp-6); }
  .hero-visual__photo { aspect-ratio: 4 / 5; }

  .solution {
    grid-template-columns: 4fr 7fr;
    grid-template-areas: "media head" "media cards";
    column-gap: var(--sp-8);
    row-gap: var(--sp-6);
    align-items: start;
  }
  .solution__head { align-self: end; }
  .solution__media { max-width: none; align-self: center; }
}

/* Sprite de ícones fora do fluxo */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Marca de conteúdo pendente — some quando o texto definitivo entrar */
.pending {
  background: rgba(216, 166, 75, 0.18);
  color: inherit;
  padding: 0.05em 0.3em;
  border-radius: 2px;
  outline: 1px dashed rgba(216, 166, 75, 0.8);
}

/* 5 · Demonstração: prévia das receitas */
.recipes {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.recipes__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--heading);
}
.recipes__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.recipes__tags li {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--heading);
}
.recipes__photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.recipes__photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* 5b · Prova social (só aparece se o template for ativado) */
.testimonials { display: grid; gap: var(--sp-4); }
.testimonial {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-5);
  background: var(--paper);
  border-radius: var(--radius);
}
.testimonial__text { margin: 0; line-height: 1.6; }
.testimonial__author { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial__photo { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-weight: 600; color: var(--forest); }
.testimonial__proof { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* 6 · Autoridade (institucional) */
.about { text-align: center; }
.about__mark,
.about__photo {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: rgba(216, 166, 75, 0.14);
  color: var(--gold);
}
.about__photo {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border: 2px solid var(--gold);
  padding: 4px;
  background: transparent;
}
/* Frase de destaque da criadora */
.about__claim {
  margin-bottom: var(--sp-6);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.25;
  color: var(--heading);
  text-wrap: balance;
}
.about__claim strong {
  display: block;
  font-style: italic;
  font-weight: var(--fw-display-strong);
  font-size: 2.2em;
  line-height: 1.05;
  color: var(--gold);
}
.about__mark svg { width: 1.5rem; height: 1.5rem; }
.about__text { margin-top: var(--sp-4); }
.about__points {
  display: inline-grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  text-align: left;
}
.about__points li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-3);
  line-height: 1.5;
}
.about__points .icon { color: var(--gold); margin-top: 0.15rem; }

/* 7 · Oferta */
.offer { max-width: calc(58rem + var(--gutter) * 2); }
.offer__head { max-width: 44rem; }
.offer__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: rgba(255, 243, 223, 0.86);
  text-wrap: pretty;
}
.offer-card__cover { width: 8.5rem; margin: 0 auto; }
.btn.btn--xl { min-height: 4rem; padding-block: 1rem; font-size: 1rem; }
.offer-card__delivery {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-soft);
  text-align: center;
  text-wrap: balance;
}
.offer-card__delivery .icon { display: inline-block; vertical-align: -0.15em; margin-right: 0.3em; color: var(--gold); }

@media (min-width: 48rem) {
  .offer-card__cover { width: 100%; margin: 0; }
}

/* Bloco 4: cards + página dupla */
.benefits + .gallery { margin-top: var(--sp-6); }
.gallery.gallery--single { grid-template-columns: 1fr; max-width: 52rem; }
.gallery--single .gallery__item--wide { grid-column: auto; }

/* Bloco 9: rodapé de confiança */
.trust {
  text-align: center;
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.trust__photo {
  width: 7rem;
  height: 7rem;
  margin: 0 auto var(--sp-5);
  padding: 4px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  object-fit: cover;
}
.trust__claim {
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  line-height: 1.25;
  color: var(--heading);
  text-wrap: balance;
}
.trust__claim strong {
  display: block;
  font-style: italic;
  font-weight: var(--fw-display-strong);
  font-size: 2.2em;
  line-height: 1.05;
  color: var(--gold);
}
.trust__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--heading);
  text-wrap: balance;
}
.trust__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-soft);
  text-wrap: pretty;
}
.trust__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.trust__facts li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.trust__facts .icon { color: var(--gold); }

@media (min-width: 64rem) {
  .hero-visual { margin-top: 0; }
}

/* =====================================================================
   QUIZ INTERATIVO (seção #quiz)
   Classes próprias (quiz-*, quiz__*). Não altera regras nem tokens globais:
   o card claro define as próprias cores locais, como os outros cards creme.
   ===================================================================== */
.quiz-head { max-width: 38rem; }
.quiz-head__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--heading);
  text-wrap: balance;
}
.quiz-head__sub {
  margin-top: var(--sp-3);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}

.quiz {
  --heading: var(--forest);
  --text: var(--chocolate);
  --text-soft: rgba(80, 56, 45, 0.78);
  --line: rgba(80, 56, 45, 0.14);
  --line-strong: rgba(80, 56, 45, 0.24);
  color: var(--chocolate);
  background: var(--cream);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

/* Topo: voltar + contador */
.quiz__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 2.75rem;
}
.quiz__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0 var(--sp-2) 0 0;
  border: 0;
  background: none;
  font: 600 var(--fs-sm) / 1 var(--font-body);
  color: var(--forest);
  cursor: pointer;
}
.quiz__back:hover { color: var(--chocolate); }
.quiz__back:disabled { visibility: hidden; }   /* mantém o espaço: sem saltos de layout */
.quiz__count {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Barra de progresso */
.quiz__bar {
  height: 4px;
  margin-top: var(--sp-2);
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.quiz__bar-fill {
  display: block;
  width: 33.333%;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width 0.45s var(--ease);
}

/* Etapas empilhadas na mesma área: a altura do card não muda entre perguntas */
.quiz__stage { display: grid; margin-top: var(--sp-5); }
.quiz__step {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}
.quiz__step.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.quiz__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gold);
}
.quiz__q {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--forest);
  text-wrap: pretty;
}
.quiz__q:focus,
.quiz__result-title:focus { outline: none; }

/* Alternativas */
.quiz__options { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.quiz__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  font: 500 var(--fs-base) / 1.4 var(--font-body);
  color: var(--forest);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}
.quiz__opt:hover { border-color: var(--gold); background: #FFFDF8; }
.quiz__opt:active { transform: scale(0.99); }
.quiz__letter {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--chocolate);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* Alternativa escolhida */
.quiz__opt[aria-pressed="true"] {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--cream);
}
.quiz__opt[aria-pressed="true"] .quiz__letter {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest);
}

/* Tela final */
.quiz__result { text-align: center; }
.quiz__result-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.3;
  color: var(--forest);
  text-wrap: balance;
}
.quiz__result-text {
  margin-top: var(--sp-4);
  color: var(--text-soft);
  line-height: 1.6;
  text-wrap: pretty;
}
.quiz__highlight {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: rgba(216, 166, 75, 0.16);
  font-weight: 600;
  line-height: 1.45;
  color: var(--forest);
}
.quiz__cta { margin-top: var(--sp-5); }
.quiz__restart {
  display: block;
  min-height: 2.75rem;
  margin: var(--sp-3) auto 0;
  padding: 0 var(--sp-3);
  border: 0;
  background: none;
  font: 600 var(--fs-sm) / 1 var(--font-body);
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quiz__restart:hover { color: var(--forest); }

@media (min-width: 48rem) {
  .quiz { padding: var(--sp-6) var(--sp-7) var(--sp-7); }
}

/* ---------- Quiz de abertura (tela inicial por cima da página) ----------
   Só aparece com a classe "quiz-open" no <html>. Enquanto aberto, a página
   de vendas fica parada por baixo (sem rolagem) e intacta. */
.quiz-intro { display: none; }
.quiz-open,
.quiz-open body { overflow: hidden; }
.quiz-open .quiz-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  transition: opacity 0.3s var(--ease);
}
.quiz-intro.is-leaving { opacity: 0; }
.quiz-intro__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding-block: var(--sp-5) var(--sp-6);
}
.quiz-intro .quiz-head { margin-bottom: var(--sp-5); }
.quiz-intro__skip {
  align-self: flex-end;
  min-height: 2.75rem;
  margin: calc(var(--sp-4) * -1) calc(var(--sp-3) * -1) var(--sp-2) 0;
  padding: 0 var(--sp-3);
  border: 0;
  background: none;
  font: 500 var(--fs-sm) / 1 var(--font-body);
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quiz-intro__skip:hover { color: var(--heading); }
.quiz-head__title:focus { outline: none; }


/* =====================================================================
   NATAL PREMIUM — acabamentos, tipografia encorpada e decorações
   Só aparência: nenhuma estrutura, texto, link ou script foi alterado.
   Decorações em SVG leve dentro do CSS, sempre com pointer-events: none.
   ===================================================================== */

/* ---- Botões azuis de compra: aparência original preservada ----
   Mesma fonte (Manrope 700), cor, sombra, tamanho e efeitos de antes. */
.btn.btn--primary { font-family: var(--font-cta); }

/* ---- Pesos tipográficos ---- */
.statement,
.objection__q,
.benefit__title,
.recipes__title,
.trust__title,
.quiz__q,
.media__label { font-weight: var(--fw-display-2); }
.hero__sub,
.offer__sub,
.quiz-head__sub,
.section-head__text { font-weight: 600; }          /* subtítulos: DM Sans SemiBold */
.checklist li,
.recipes__tags li { font-weight: 600; }            /* benefícios: DM Sans SemiBold */
.price__main { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.03em; }
.wordmark { font-weight: 700; }

/* ---- Fundos: gradientes discretos entre vinho e vermelho escuro ---- */
body { background: linear-gradient(180deg, #4A0D12 0%, #3F0B10 55%, #300908 100%); }
.section,
.hero { position: relative; isolation: isolate; }
.section--paper { background: linear-gradient(180deg, #3D0B10 0%, #350A0D 100%); }
.section--forest {
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(216, 166, 75, 0.14), transparent 70%),
    linear-gradient(180deg, #300908 0%, #240605 100%);
}
.site-footer { background: #2A0707; }

/* ---- Primeira dobra: iluminação natalina suave e bokeh ---- */
.hero {
  background:
    radial-gradient(42% 38% at 88% 8%, rgba(216, 166, 75, 0.16), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, rgba(143, 23, 32, 0.55), transparent 70%),
    linear-gradient(180deg, #4A0D12 0%, #3D0B10 100%);
}
.hero::after {                      /* bokeh: luzes desfocadas ao fundo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 22%, rgba(255, 214, 140, 0.22) 0, transparent 9px),
    radial-gradient(circle at 18% 64%, rgba(224, 65, 75, 0.20) 0, transparent 14px),
    radial-gradient(circle at 46% 12%, rgba(255, 214, 140, 0.16) 0, transparent 7px),
    radial-gradient(circle at 62% 88%, rgba(255, 214, 140, 0.18) 0, transparent 12px),
    radial-gradient(circle at 78% 52%, rgba(224, 65, 75, 0.16) 0, transparent 10px),
    radial-gradient(circle at 94% 76%, rgba(255, 214, 140, 0.20) 0, transparent 8px),
    radial-gradient(circle at 34% 92%, rgba(255, 214, 140, 0.14) 0, transparent 6px);
  filter: blur(1px);
}
.hero::before {                     /* ramo de pinheiro com bolinhas e estrela, canto superior direito */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 120px;
  height: 64px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 100%22%3E%3Cpath d=%22M178 10 Q110 22 30 58%22 stroke=%22%235B3A1E%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M172.8 11.0 L168.2 24.1%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M172.8 11.0 L163.4 0.0%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M167.5 12.0 L163.5 23.8%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M167.5 12.0 L159.2 2.5%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M162.1 13.1 L158.4 24.8%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M162.1 13.1 L153.3 3.2%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M156.8 14.3 L152.5 28.2%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M156.8 14.3 L147.7 4.3%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M151.4 15.5 L147.3 29.4%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M151.4 15.5 L142.7 6.2%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M146.0 16.8 L141.6 32.0%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M146.0 16.8 L133.7 4.0%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M140.5 18.2 L136.4 33.2%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M140.5 18.2 L128.0 5.4%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M135.0 19.7 L131.1 34.5%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M135.0 19.7 L125.3 9.9%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M129.5 21.2 L125.8 36.0%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M129.5 21.2 L119.6 11.5%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M123.9 22.8 L120.9 35.5%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M123.9 22.8 L112.8 12.1%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M118.3 24.4 L115.1 38.3%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M118.3 24.4 L106.5 13.3%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M112.7 26.2 L110.0 38.3%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M112.7 26.2 L101.7 16.0%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M107.0 28.0 L104.0 42.3%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M107.0 28.0 L96.0 18.1%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M101.3 29.9 L98.5 43.8%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M101.3 29.9 L88.8 18.7%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M95.5 31.8 L92.4 48.2%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M95.5 31.8 L83.9 21.7%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M89.8 33.9 L87.1 48.6%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M89.8 33.9 L77.3 23.2%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M83.9 36.0 L81.3 51.4%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M83.9 36.0 L74.2 27.8%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M78.1 38.1 L76.0 50.9%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M78.1 38.1 L68.1 29.9%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M72.2 40.4 L70.0 54.7%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M72.2 40.4 L62.5 32.5%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M66.3 42.7 L64.1 57.9%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M66.3 42.7 L55.3 33.9%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60.3 45.0 L58.2 60.5%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60.3 45.0 L47.1 34.7%22 stroke=%22%231F5A3A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M54.3 47.5 L52.1 64.4%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M54.3 47.5 L42.6 38.4%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M48.3 50.0 L46.8 62.3%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M48.3 50.0 L35.4 40.2%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M42.2 52.6 L40.5 68.0%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M42.2 52.6 L28.7 42.5%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M36.1 55.3 L34.4 71.5%22 stroke=%22%23174A30%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M36.1 55.3 L24.8 46.9%22 stroke=%22%232E6E46%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M132 37 L132 51%22 stroke=%22%23D8A64B%22 stroke-width=%221%22/%3E%3Crect x=%22129%22 y=%2248%22 width=%226%22 height=%224%22 rx=%221%22 fill=%22%23D8A64B%22/%3E%3Ccircle cx=%22132%22 cy=%2262%22 r=%2211%22 fill=%22%23B3202B%22/%3E%3Ccircle cx=%22128.15%22 cy=%2258.15%22 r=%223.08%22 fill=%22%23FFF3DF%22 opacity=%22.55%22/%3E%3Cpath d=%22M86 54.5 L86 68.5%22 stroke=%22%23D8A64B%22 stroke-width=%221%22/%3E%3Crect x=%2283%22 y=%2265.5%22 width=%226%22 height=%224%22 rx=%221%22 fill=%22%23D8A64B%22/%3E%3Ccircle cx=%2286%22 cy=%2278%22 r=%229.5%22 fill=%22%23D8A64B%22/%3E%3Ccircle cx=%2282.675%22 cy=%2274.675%22 r=%222.66%22 fill=%22%23FFF3DF%22 opacity=%22.55%22/%3E%3Cpath d=%22M52 64 L52 78%22 stroke=%22%23D8A64B%22 stroke-width=%221%22/%3E%3Crect x=%2249%22 y=%2275%22 width=%226%22 height=%224%22 rx=%221%22 fill=%22%23D8A64B%22/%3E%3Ccircle cx=%2252%22 cy=%2286%22 r=%228%22 fill=%22%238F1720%22/%3E%3Ccircle cx=%2249.2%22 cy=%2283.2%22 r=%222.24%22 fill=%22%23FFF3DF%22 opacity=%22.55%22/%3E%3Cpath d=%22M20 70 l2.2 6.4 6.6 2.2 -6.6 2.2 -2.2 6.6 -2.2 -6.6 -6.6 -2.2 6.6 -2.2z%22 fill=%22%23D8A64B%22/%3E%3C/svg%3E") no-repeat right top / contain;
  opacity: 0.95;
}

/* ---- Cabeçalho: gorrinho de Papai Noel no logo e cordão de luzes ---- */
.site-header { position: relative; z-index: 2; }
.wordmark { position: relative; display: inline-block; }
.wordmark::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -13px;
  width: 22px;
  height: 19px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 34%22%3E%3Cpath d=%22M6 26 C8 12 18 3 30 5 C34 6 36 10 35 15 C31 11 27 11 24 14 C20 18 18 22 18 26 Z%22 fill=%22%23B3202B%22/%3E%3Crect x=%223%22 y=%2224%22 width=%2224%22 height=%227%22 rx=%223.5%22 fill=%22%23FFF9F1%22/%3E%3Ccircle cx=%2235%22 cy=%2217%22 r=%224%22 fill=%22%23FFF9F1%22/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-18deg);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 22%22%3E%3Cpath d=%22M0 3 Q20 13 40 3 T80 3%22 stroke=%22%233A2414%22 stroke-width=%221.2%22 fill=%22none%22/%3E%3Crect x=%2218%22 y=%227%22 width=%224%22 height=%223%22 rx=%22.8%22 fill=%22%238A6A2E%22/%3E%3Cellipse cx=%2220%22 cy=%2214%22 rx=%223.3%22 ry=%224.6%22 fill=%22%23E0414B%22/%3E%3Crect x=%2258%22 y=%227%22 width=%224%22 height=%223%22 rx=%22.8%22 fill=%22%238A6A2E%22/%3E%3Cellipse cx=%2260%22 cy=%2214%22 rx=%223.3%22 ry=%224.6%22 fill=%22%23F0C063%22/%3E%3C/svg%3E") repeat-x left top / 80px 20px;
  filter: drop-shadow(0 0 3px rgba(255, 196, 110, 0.55));
  animation: np-twinkle 2.8s ease-in-out infinite alternate;
}
@keyframes np-twinkle {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}

/* ---- Detalhes nas extremidades das seções ---- */
#conexao::after,
#produto::after,
#objecoes::after,
#faq::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
#conexao::after {                  /* estrelas douradas */
  top: 18px; left: 12px; width: 92px; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 52%22%3E%3Cpath d=%22M14 9.0 L16.25 15.75 L23.0 18 L16.25 20.25 L14 27.0 L11.75 20.25 L5.0 18 L11.75 15.75Z%22 fill=%22%23D8A64B%22/%3E%3Cpath d=%22M46 2.5999999999999996 L47.35 6.65 L51.4 8 L47.35 9.35 L46 13.4 L44.65 9.35 L40.6 8 L44.65 6.65Z%22 fill=%22%23D8A64B%22/%3E%3Cpath d=%22M70 22.8 L71.8 28.2 L77.2 30 L71.8 31.8 L70 37.2 L68.2 31.8 L62.8 30 L68.2 28.2Z%22 fill=%22%23D8A64B%22/%3E%3Cpath d=%22M30 39.5 L31.125 42.875 L34.5 44 L31.125 45.125 L30 48.5 L28.875 45.125 L25.5 44 L28.875 42.875Z%22 fill=%22%23D8A64B%22/%3E%3Cpath d=%22M88 5.5 L89.125 8.875 L92.5 10 L89.125 11.125 L88 14.5 L86.875 11.125 L83.5 10 L86.875 8.875Z%22 fill=%22%23D8A64B%22/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.7;
}
#produto::after {                  /* floco de neve */
  top: 18px; right: 14px; width: 54px; height: 54px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 60%22%3E%3Cg transform=%22rotate(0 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(60 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(120 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(240 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(300 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.16;
}
#objecoes::after {                 /* raminho com bolinhas */
  bottom: 14px; left: 10px; width: 84px; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 84 48%22%3E%3Cpath d=%22M4 40 Q40 30 76 8%22 stroke=%22%235B3A1E%22 stroke-width=%222%22 fill=%22none%22/%3E%3Cpath d=%22M10.0 36.3 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M10.0 36.3 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M16.0 32.7 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M16.0 32.7 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M22.0 29.2 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M22.0 29.2 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M28.0 25.9 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M28.0 25.9 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M34.0 22.8 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M34.0 22.8 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M40.0 20.0 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M40.0 20.0 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M46.0 17.5 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M46.0 17.5 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M52.0 15.2 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M52.0 15.2 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M58.0 13.2 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M58.0 13.2 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M64.0 11.3 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M64.0 11.3 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M70.0 9.6 l1.5 -9.9%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M70.0 9.6 l8.4 5.5%22 stroke=%22%232E6E46%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2230%22 cy=%2238%22 r=%225%22 fill=%22%23B3202B%22/%3E%3Ccircle cx=%2240%22 cy=%2236%22 r=%224%22 fill=%22%23D8A64B%22/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.85;
}
#faq::after {                      /* floco de neve */
  top: 22px; left: 16px; width: 44px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 60%22%3E%3Cg transform=%22rotate(0 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(60 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(120 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(180 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(240 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22rotate(300 30 30)%22%3E%3Cpath d=%22M30 30 V6 M30 13 l-5 -5 M30 13 l5 -5 M30 21 l-4 -4 M30 21 l4 -4%22 stroke=%22%23FFF3DF%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.14;
}

/* ---- Cards e oferta: bordas douradas e acabamentos ---- */
.benefit { border-color: rgba(216, 166, 75, 0.55); }
.offer-card {                       /* borda dourada desenhada com sombra: não muda o tamanho de nada */
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(216, 166, 75, 0.7),
    0 0 0 4px rgba(216, 166, 75, 0.08),
    0 24px 48px -18px rgba(10, 0, 0, 0.75);
}
.offer-card::before {               /* laço dourado */
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: 64px;
  height: 36px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 84 46%22%3E%3Cpath d=%22M42 18 C30 2 10 2 12 14 C14 26 32 24 42 18Z%22 fill=%22%23D8A64B%22/%3E%3Cpath d=%22M42 18 C54 2 74 2 72 14 C70 26 52 24 42 18Z%22 fill=%22%23D8A64B%22/%3E%3Cpath d=%22M38 20 L28 44 L35 40 L40 44 L42 22Z M46 20 L56 44 L49 40 L44 44 L42 22Z%22 fill=%22%23C08F36%22/%3E%3Ccircle cx=%2242%22 cy=%2218%22 r=%226%22 fill=%22%23B8862F%22/%3E%3Cpath d=%22M18 12 C22 8 30 9 36 15%22 stroke=%22%23F3D08A%22 stroke-width=%221.4%22 fill=%22none%22 opacity=%22.8%22/%3E%3Cpath d=%22M66 12 C62 8 54 9 48 15%22 stroke=%22%23F3D08A%22 stroke-width=%221.4%22 fill=%22none%22 opacity=%22.8%22/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}
.page-shot { box-shadow: 0 0 0 1px rgba(216, 166, 75, 0.35), var(--shadow-soft); }
.recipes__photos img { box-shadow: 0 0 0 1px rgba(216, 166, 75, 0.35); }
.trust__photo { box-shadow: 0 0 0 6px rgba(216, 166, 75, 0.08); }

/* ---- Quiz: só paleta e tipografia ---- */
.quiz { box-shadow: inset 0 0 0 1px rgba(216, 166, 75, 0.6), var(--shadow-soft); }
.quiz-open .quiz-intro {
  background:
    radial-gradient(50% 35% at 50% 0%, rgba(216, 166, 75, 0.14), transparent 70%),
    linear-gradient(180deg, #4A0D12 0%, #300908 100%);
}
.quiz__opt:hover { background: #FFFBF4; }
.quiz__back,
.quiz__restart,
.quiz-intro__skip { font-weight: 600; }

/* ---- Celular: decorações menores, longe do conteúdo ---- */
@media (max-width: 30rem) {
  .hero::before { width: 76px; height: 41px; top: 26px; }
  #conexao::after { width: 64px; height: 34px; top: 10px; left: 6px; }
  #objecoes::after { width: 60px; height: 34px; bottom: 8px; left: 4px; }
}

/* Telas bem estreitas: o ramo encostaria na etiqueta da primeira dobra */
@media (max-width: 26rem) {
  .hero::before { display: none; }
}

/* ---- Movimento reduzido: sem animação nas luzes ---- */
@media (prefers-reduced-motion: reduce) {
  .site-header::after { animation: none; }
}