/* =============================================================================
   Clube do Sorriso — landing de pontos
   Camada de página sobre o design system. Nada aqui inventa valor: tudo vem
   das CSS variables de assets/css/tokens/. Os componentes do DS estilizam
   inline (React) e por isso observam breakpoints em JS; aqui, em CSS puro,
   os mesmos três breakpoints — 980 / 860 / 620 — são media queries de verdade.
   ========================================================================== */

/* ---------- Estruturas base ----------------------------------------------- */

.wrap {
  width: min(100% - (var(--block-px) * 2), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--block-py);
  position: relative;
}
.section--tight { padding-block: var(--block-py-tight); }
.section--band {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
}
.section--first { padding-top: var(--header-offset); }

.section__inner {
  position: relative;
  z-index: 1;
}

/* Backdrop: grade de 64px dissolvida no raio + blooms de coral em multiply.
   Réplica de components/blocks/Backdrop.jsx. */
.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.backdrop__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.backdrop__grid--fine { background-size: 48px 48px; }
.backdrop__bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .22;
  mix-blend-mode: multiply;
}
.backdrop__bloom--a {
  width: 640px; height: 640px; left: -10%; top: -18%;
  background: radial-gradient(circle, var(--cds-coral-500) 0%, transparent 62%);
}
.backdrop__bloom--b {
  width: 520px; height: 520px; right: -8%; top: 8%;
  background: radial-gradient(circle, var(--coral-300) 0%, transparent 62%);
}
.backdrop__bloom--warm-a {
  width: 520px; height: 520px; left: 18%; top: -20%;
  background: radial-gradient(circle, var(--gold-300) 0%, transparent 62%);
}
.backdrop__bloom--warm-b {
  width: 600px; height: 600px; right: -12%; bottom: -20%;
  background: radial-gradient(circle, var(--cds-coral-500) 0%, transparent 62%);
}

/* Régua pontilhada — separa as linhas numeradas em vez de cards. */
.rule-dotted {
  height: 1px;
  width: 100%;
  background-image: linear-gradient(90deg, var(--border-strong) 50%, transparent 0);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}

/* ---------- Cabeçalho de seção -------------------------------------------- */

.heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.heading h2 { text-wrap: balance; }
.heading--center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
  max-width: 42rem;
}
.eyebrow {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}
.lede {
  font-size: var(--fs-lg);
  color: var(--fg-2);
  line-height: var(--lh-normal);
  letter-spacing: -.015em;
  max-width: 60ch;
}
.heading--center .lede { max-width: 30rem; text-wrap: balance; }

/* ---------- Botões --------------------------------------------------------- */
/* Geometria de components/core/Button.jsx: 44px, 0 18px, raio 10, peso 500.
   O primário é tinta e troca para o coral no hover — essa troca é a assinatura. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -.005em;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn--sm { height: 34px; padding: 0 14px; font-size: var(--fs-xs); }
.btn--lg { height: 52px; padding: 0 22px; font-size: var(--fs-md); }

.btn--primary {
  background: var(--fg);
  color: var(--bg-0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 8px 24px rgba(10, 10, 18, .16);
}
.btn--primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--glow);
  transform: translateY(var(--lift-hover));
}
.btn--ghost {
  background: var(--surface);
  color: var(--fg-1);
  border-color: var(--border);
}
.btn--ghost:hover {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--fg-1);
  transform: translateY(var(--lift-hover));
}
.btn--on-brand {
  background: var(--bg-2);
  color: var(--fg);
  box-shadow: var(--shadow-1);
  align-self: flex-start;
}
.btn--on-brand:hover { background: var(--bg-1); color: var(--fg); transform: translateY(var(--lift-hover)); }
.btn:active { transform: translateY(0); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"] { pointer-events: none; opacity: .5; }

.btn__arrow {
  opacity: .7;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Chips e pílulas ------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip--points {
  background: var(--status-points-bg);
  color: var(--status-points);
  border-color: transparent;
  padding: 6px 12px;
  font-size: var(--fs-xs);
}

.pill-glass {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--fg-1);
}
.pill-glass__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ---------- Navegação: pílula de vidro fixa -------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 14px 0;
}
.nav__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 14px 10px 20px;
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--border);
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.nav.is-scrolled .nav__pill { box-shadow: var(--shadow-1); }

.nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 34px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-nav-link);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="true"] { color: var(--fg); background: var(--surface); }

.nav__actions { display: flex; align-items: center; gap: 8px; }

.nav__toggle {
  position: relative;
  display: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
}
.nav__toggle span {
  position: absolute;
  width: 14px;
  height: 1px;
  background: var(--fg-1);
  transition: transform var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
.nav__toggle span:nth-child(1) { top: 12px; }
.nav__toggle span:nth-child(2) { top: 19px; }
.nav__toggle[aria-expanded="true"] span { top: 16px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-2);
  box-shadow: var(--shadow-2);
}
.nav__panel.is-open { display: grid; }

/* ---------- Hero ----------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--header-offset);
  padding-bottom: clamp(60px, 8vw, 100px);
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.hero__title {
  max-width: 16ch;
  text-wrap: balance;
  margin: 0;
}
.hero__lede { margin: 0; max-width: 46ch; }
.hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__proof-label { margin: 0; font-size: var(--fs-xs); color: var(--fg-2); }

.proof {
  display: flex;
  align-items: baseline;
  gap: 22px 36px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.proof__item { display: flex; flex-direction: column; gap: 4px; }
.proof__value {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display-sm);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.proof__label { font-size: var(--fs-xs); color: var(--fg-2); }

/* Cartão membro — components/marketing/MemberCard.jsx.
   Único lugar do sistema onde caixa-alta trackeada é intencional: o objeto
   imita um cartão físico. */
.member-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 250px;
  padding: var(--space-8);
  border-radius: var(--radius-panel);
  background: var(--panel-ink);
  color: var(--panel-ink-fg);
  box-shadow: var(--shadow-3);
}
.member-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(212, 138, 143, .42) 0%, rgba(212, 138, 143, 0) 58%);
}
.member-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
}
.member-card > * { position: relative; }
.member-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.member-card__label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--coral-300);
}
.member-card__tier {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--panel-ink-fg-2);
}
.member-card__brand {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display-sm);
  letter-spacing: var(--ls-display);
}
.member-card__balance {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: var(--space-5);
}
.member-card__points {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 52px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.member-card__unit {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--panel-ink-fg-2);
}
.member-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--panel-ink-fg-2);
}

/* ---------- Faixa de unidades ---------------------------------------------- */

.units {
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
  border-block: 1px solid var(--border);
  padding-block: var(--block-py-tight);
}
.units__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.units__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}
.units__city {
  display: flex;
  flex-direction: column;
}
.units__city b {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-heading);
  color: var(--fg);
}
.units__city span { font-size: var(--fs-xs); color: var(--fg-2); }

/* ---------- Etapas em grade editorial -------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-12);
  margin-top: var(--space-8);
}
.step {
  position: relative;
  min-width: 0;
  padding-block: var(--space-8);
}
.step > .rule-dotted { position: absolute; top: 0; left: 0; }
.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  max-width: none;
}
.step__index {
  align-self: flex-start;
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
  color: var(--accent);
}
.step__title { margin: 0; font-size: var(--fs-display-sm); }
.step__text { font-size: var(--fs-md); color: var(--fg-2); line-height: var(--lh-normal); }
.step__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.step__note { margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-xs); color: var(--fg-2); }

/* ---------- Bloco da regra -------------------------------------------------- */

.rules { position: relative; overflow: hidden; }
.rules__card {
  margin-top: clamp(2rem, 4vw, 4rem);
  border-radius: var(--radius-panel);
  border: 1px solid var(--border);
  background: var(--bg-2);
  box-shadow: var(--shadow-1);
}
.rules__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 48px;
}
.rules__figure {
  text-align: center;
  padding-right: 48px;
  border-right: 1px solid var(--border);
}
.rules__figure h3 { margin: 0; font-size: var(--fs-display-sm); }
.rules__figure p { margin-top: 8px; font-size: var(--fs-lg); color: var(--fg-2); }
.rules__value {
  display: inline-block;
  margin: 48px 0 24px;
  font-family: var(--font-numeric);
  font-size: 3.75rem;
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.rules__value i { font-style: normal; font-size: 2.25rem; color: var(--accent); }
.rules__list { display: flex; flex-direction: column; gap: 16px; }
.rules__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--fg);
  font-size: var(--fs-md);
}
.rules__list li::before {
  content: "\2713";
  color: var(--accent);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.6;
}
.rules__footnote { margin-top: 24px; font-size: var(--fs-sm); color: var(--fg-2); }

/* ---------- Prêmios --------------------------------------------------------- */

.prizes { display: flex; flex-direction: column; gap: 40px; }
.prizes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.prize {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.prize:hover {
  border-color: var(--border-strong);
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-1);
}
.prize__image {
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  color: var(--fg-1);
  font-size: var(--fs-xs);
}
.prize__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  flex: 1;
}
.prize__body h3 { margin: 0; font-size: var(--fs-display-sm); }
.prize__body .btn { margin-top: auto; align-self: stretch; }
.prize--empty {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-card-flat);
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 24px;
  text-align: center;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.prize--empty:hover { transform: none; box-shadow: none; border-color: var(--border-strong); }
.prizes__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.prizes__foot span { font-size: var(--fs-xs); color: var(--fg-2); }

/* ---------- Depoimentos ----------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.quote__bubble {
  background: var(--bg-2);
  border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  box-shadow: 0 0 0 1px var(--border);
  padding: 14px 18px;
}
.quote__bubble p { margin: 0; color: var(--fg); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.quote__meta {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.quote__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--coral-100);
  color: var(--coral-800);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  flex-shrink: 0;
}
.quote__name { color: var(--fg); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.quote__dot { width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--fg-4); }
.quote__role { color: var(--fg-2); font-size: var(--fs-sm); }

/* ---------- App ------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.store-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Selos de loja — glifos provisórios. A arte oficial da Apple e do Google
   precisa entrar em assets/img/ antes de qualquer publicação. */
.store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-control);
  background: var(--fg);
  color: var(--bg-0);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.store:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(var(--lift-hover)); }
.store svg { width: 20px; height: 20px; flex-shrink: 0; }
.store__text { display: flex; flex-direction: column; line-height: 1.15; }
.store__text small { font-size: var(--fs-2xs); opacity: .75; }
.store__text b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); }

.image-well {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-card);
  background: var(--bg-3);
  border: 1px dashed var(--border-strong);
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  color: var(--fg-1);
  font-size: var(--fs-xs);
}

/* ---------- FAQ -------------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
}
.faq__help { margin-top: 24px; color: var(--fg-2); font-size: var(--fs-md); }
.faq__list { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
.faq__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--surface-strong); }
.faq__a {
  padding: 0 60px 24px 0;
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

/* ---------- Faixa de chamada final ------------------------------------------- */

.closing {
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding-block: var(--block-py);
}
.closing__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.closing__copy { max-width: 34ch; }
.closing__copy h2 { margin: 0; text-wrap: balance; }
.closing__copy p { margin-top: 14px; color: var(--fg-2); font-size: var(--fs-lg); line-height: var(--lh-normal); }

/* ---------- Rodapé ----------------------------------------------------------- */
/* Laje escura: a escada de tinta inverte e só .92/.66 carregam texto. */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--panel-ink);
  color: var(--panel-ink-fg-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-top: var(--space-20);
}
.footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) repeat(3, minmax(120px, 1fr));
  gap: var(--space-12);
  align-items: start;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 380px;
}
.footer__wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer__wordmark b {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-display);
  color: var(--panel-ink-fg);
}
.footer__wordmark span { font-size: var(--fs-sm); color: var(--panel-ink-fg-2); }
.footer__tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display-md);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  color: var(--panel-ink-fg);
}
.footer__tagline em { font-style: italic; color: var(--coral-300); }
.footer__blurb { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--panel-ink-fg-2); }
.footer__legal { font-size: var(--fs-xs); color: var(--panel-ink-fg-2); margin-top: var(--space-2); }
.footer__col { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__col b {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--panel-ink-fg);
}
.footer__col a { font-size: var(--fs-sm); color: var(--panel-ink-fg-2); }
.footer__col a:hover { color: var(--panel-ink-fg); }
.footer__watermark {
  margin-top: var(--space-16);
  padding: 0 var(--block-px);
  display: flex;
  justify-content: center;
  user-select: none;
}
.footer__watermark img {
  width: min(100%, 860px);
  height: auto;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- Revelação em rolagem --------------------------------------------- */
/* opacidade + 14px de translateY em 800ms, com 60ms de escalonamento. */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Utilidades -------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 24px;
  top: -80px;
  z-index: 200;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  padding: 10px 16px;
  font-size: var(--fs-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 14px; color: var(--fg); }

/* ---------- Breakpoints: 980 · 860 · 620 -------------------------------------- */

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .prizes__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__login { display: none; }
  .nav__toggle { display: grid; }
  .nav__pill { gap: 12px; padding: 10px 10px 10px 14px; }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; margin-top: var(--space-5); }
  .step { padding-block: var(--space-6); }
  .step__body { height: auto; gap: var(--space-3); }
  .step__note { margin-top: 0; padding-top: var(--space-1); }
  .rules__split { grid-template-columns: 1fr; gap: 32px; padding: 24px; }
  .rules__figure {
    padding-right: 0;
    padding-bottom: 32px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .rules__value { margin: 24px 0 20px; }
  .units__list { margin-left: 0; gap: 20px; }
  .faq__a { padding-right: 0; }
}

@media (max-width: 620px) {
  .prizes__grid { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn,
  .closing .btn { width: 100%; }
  .proof { gap: 20px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .prize, .store { transition: none; }
  .btn:hover, .prize:hover, .store:hover { transform: none; }
}