/* Página de pré-inscrição do Smile & Faith · redesign 2026-10-13.
   Só var(--token) do DS (ds/tokens.css) e componentes do ui-kit (ds/ui-kit.css).
   Sem hex e sem px crus: media query em rem, porque var() não vale dentro dela.

   O DS é flat (shadow.none). Este redesign pede profundidade, então a página declara AQUI,
   e só aqui, três elevações e um raio grande DERIVADOS dos tokens (color-mix sobre o marinho
   da marca, calc sobre --radius-xl e --space-*). Não é token novo do DS: se a direção for
   aprovada, a proposta sobe para o DS pelo dono dele (Matt), não por edição daqui. */

:root {
  --pg-raio: var(--radius-xl);
  --pg-raio-grande: calc(var(--radius-xl) * 1.5);
  --pg-tinta: var(--color-brand-primary-navy);
  --pg-sombra-baixa: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--pg-tinta) 7%, transparent);
  --pg-sombra-media: 0 var(--space-2) var(--space-6) color-mix(in srgb, var(--pg-tinta) 10%, transparent),
                     0 var(--space-1) var(--space-2) color-mix(in srgb, var(--pg-tinta) 6%, transparent);
  --pg-sombra-alta: 0 var(--space-6) var(--space-16) color-mix(in srgb, var(--pg-tinta) 18%, transparent),
                    0 var(--space-2) var(--space-4) color-mix(in srgb, var(--pg-tinta) 8%, transparent);
  --pg-dur-cena: calc(var(--duration-slow) * 2);
  --pg-topo-altura: calc(var(--size-touch-xl) + var(--space-6));
  --pg-branco: var(--color-brand-neutral-white);
  /* Gutter único: header, abertura e seções começam na mesma linha vertical. */
  --pg-gutter: var(--space-5);
  --pg-conteudo: calc(var(--size-content-max) - 2 * var(--pg-gutter));
  --pg-noite: var(--color-brand-primary-navy-deep);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pg-topo-altura) + var(--space-4));
  scrollbar-color: color-mix(in srgb, var(--pg-tinta) 35%, transparent) var(--color-bg);
  -webkit-text-size-adjust: 100%;
}
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  overflow-x: clip;
  caret-color: var(--color-action);
}

::selection { background: color-mix(in srgb, var(--color-highlight) 55%, transparent); color: var(--pg-tinta); }

img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-link); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; transition: color var(--duration-fast); }
a:hover { color: var(--color-action-hover); }
:focus-visible { outline: var(--border-width-strong) solid var(--color-focus); outline-offset: var(--space-1); }

/* Ícones do sprite: traço 2, pontas redondas, currentColor (07-assets/icones/README.md). */
svg:has(> use) {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.so-leitor {
  position: absolute; width: var(--border-width-hairline); height: var(--border-width-hairline);
  margin: calc(-1 * var(--border-width-hairline)); padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-24));
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  background: var(--color-surface); z-index: 100; font-weight: var(--font-weight-bold);
}
.pular:focus { top: var(--space-4); }

@media (min-width: 40rem) { :root { --pg-gutter: var(--space-8); } }
.largura { width: 100%; max-width: var(--size-content-max); margin: 0 auto; padding: 0 var(--pg-gutter); }
.largura--estreita { max-width: 36rem; }

.titulo-principal, .titulo-secao {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--pg-tinta);
  margin: 0;
  text-wrap: balance;
}
.titulo-principal { font-size: var(--font-size-display); line-height: var(--line-height-tight); }
.titulo-secao { font-size: var(--font-size-h1); line-height: var(--line-height-snug); margin-bottom: var(--space-8); }

/* Botões do ui-kit, com elevação e seta que anda no hover. */
.kfc-btn { transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-normal) var(--easing-enter), box-shadow var(--duration-normal); }
.kfc-btn:not(.kfc-btn--ghost):not(:disabled) { box-shadow: var(--pg-sombra-baixa); }
.kfc-btn:not(.kfc-btn--ghost):not(:disabled):hover { transform: translateY(calc(-1 * var(--space-1) / 2)); box-shadow: var(--pg-sombra-media); }
.kfc-btn:not(:disabled):active { transform: scale(.97); }
.kfc-btn svg { transition: transform var(--duration-normal) var(--easing-enter); }
.kfc-btn:hover svg:has(use[href="#i-seta-dir"]) { transform: translateX(var(--space-1)); }
.kfc-btn:hover svg:has(use[href="#i-seta-esq"]) { transform: translateX(calc(-1 * var(--space-1))); }

/* ========================================================================
   Header flutuante
   ======================================================================== */
.topo {
  position: fixed; inset: var(--space-3) 0 auto; z-index: 50;
  padding: 0 calc(var(--pg-gutter) - var(--space-2));
  pointer-events: none;
  transition: transform var(--duration-slow) var(--easing-standard);
}
.topo__pilula {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-3);
  max-width: calc(var(--pg-conteudo) + 2 * var(--space-2)); margin: 0 auto;
  min-height: var(--size-touch-xl);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(var(--space-4)) saturate(1.5);
  backdrop-filter: blur(var(--space-4)) saturate(1.5);
  box-shadow: var(--pg-sombra-media);
  transition: background var(--duration-slow), box-shadow var(--duration-slow), padding var(--duration-slow) var(--easing-standard);
}
.topo.is-rolado .topo__pilula { background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: var(--pg-sombra-alta); }

.topo__marca {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-touch-min);
  color: var(--pg-tinta); text-decoration: none;
  font-size: var(--font-size-overline); font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; white-space: nowrap;
}
.topo__marca img { width: auto; height: var(--size-icon-md); transition: transform var(--duration-slow) var(--easing-enter); }
.topo__marca:hover { color: var(--pg-tinta); }
.topo__marca:hover img { transform: rotate(-14deg) scale(1.12); }

.topo__status {
  display: none;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  background: var(--color-brand-soft-yellow); color: var(--pg-tinta);
  font-size: var(--font-size-overline); font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; white-space: nowrap;
}
.topo__nav { display: none; }
.topo__cta { margin-left: auto; min-height: var(--size-touch-kids); padding: 0 var(--space-4); font-size: var(--font-size-overline); white-space: nowrap; }

.topo__progresso { position: fixed; inset: 0 0 auto; height: calc(var(--space-1) * 0.75); pointer-events: none; }
.topo__progresso i {
  display: block; height: 100%;
  background: var(--color-brand-primary-blue);
  transform: scaleX(var(--progresso, 0)); transform-origin: 0 50%;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

@media (min-width: 30rem) {
  .topo__marca { font-size: var(--font-size-caption); gap: var(--space-2); }
  .topo__marca img { height: var(--size-icon-lg); }
  .topo__cta { padding: 0 var(--space-5); font-size: var(--font-size-caption); }
  .topo__status { display: inline-block; }
}
@media (min-width: 75rem) {
  .topo__nav { display: flex; gap: var(--space-1); margin-left: auto; }
  .topo__nav a {
    position: relative;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
    color: var(--pg-tinta); text-decoration: none;
    font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast);
  }
  .topo__nav a:hover { background: var(--color-brand-soft-blue); }
  .topo__nav a.is-ativo { background: var(--color-brand-soft-blue); color: var(--color-action); }
  .topo__cta { margin-left: var(--space-2); }
}

/* ========================================================================
   Abertura · mobile-first: a base é o celular de 360; cada min-width só acrescenta.
   ======================================================================== */
.abertura {
  /* Medidas do convite, usadas pelo vídeo e pelo cartão juntos. */
  --video-w: clamp(6.5rem, 28vw, 9rem);
  --video-h: calc(var(--video-w) * 16 / 9);
  --cartao-pad: var(--space-5);
  position: relative; isolation: isolate;
  min-height: 100svh;
  padding: calc(var(--pg-topo-altura) + var(--space-6)) var(--pg-gutter) var(--space-16);
  border-radius: 0 0 var(--pg-raio-grande) var(--pg-raio-grande);
  background: var(--color-brand-soft-blue);
  overflow: hidden;
}
.abertura__cena { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.abertura__fundo {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100svh; max-width: none;
  object-fit: cover; object-position: 60% 30%;
  translate: 0 var(--py, 0);
  -webkit-mask-image: linear-gradient(180deg, var(--color-bg) 70%, transparent 100%);
  mask-image: linear-gradient(180deg, var(--color-bg) 70%, transparent 100%);
}
/* Véu para leitura: claro no alto (celular) e à esquerda (desktop), deixando a casa à mostra. */
.abertura__veu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg) 72%, transparent) 0%,
      color-mix(in srgb, var(--color-bg) 50%, transparent) 40%,
      color-mix(in srgb, var(--color-bg) 0%, transparent) 65%);
}

.enfeite { position: absolute; height: auto; max-width: none; translate: 0 var(--py, 0); }
.enfeite--estrela-a, .enfeite--estrela-b, .enfeite--lanterna, .enfeite--flores { display: none; }
.enfeite--estrela-a { width: clamp(2.25rem, 4vw, 3.5rem); top: 22%; left: 46%; }
.enfeite--estrela-b { width: clamp(1.5rem, 2.4vw, 2.25rem); top: 16%; left: 58%; }
.enfeite--lanterna { width: clamp(2.5rem, 4vw, 3.75rem); bottom: var(--space-12); left: 15%; }
.enfeite--flores { width: clamp(6rem, 13vw, 11rem); bottom: calc(-1 * var(--space-4)); left: calc(-1 * var(--space-4)); }

.abertura__grade {
  max-width: var(--pg-conteudo); margin: 0 auto;
  display: grid; gap: var(--space-8); align-items: center;
}
.abertura__texto { display: grid; gap: var(--space-4); justify-items: start; max-width: 36rem; }
.abertura .titulo-principal { font-size: var(--font-size-h1); }
.abertura__sub {
  margin: 0; max-width: 34rem;
  font-size: var(--font-size-body-sm); line-height: var(--line-height-normal);
  color: var(--color-text); text-wrap: pretty;
}
.abertura__garantias { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: none; flex-wrap: wrap; gap: var(--space-2); }
.abertura__garantias li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-touch-min);
  padding: 0 var(--space-4); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(var(--space-2)); backdrop-filter: blur(var(--space-2));
  font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--pg-tinta);
}
.abertura__garantias svg { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-action); }

.abertura__rolar {
  display: none;
  position: absolute; left: 50%; bottom: var(--space-5); translate: -50% 0;
  align-items: center; gap: var(--space-1);
  min-height: var(--size-touch-min);
  padding: 0 var(--space-4); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(var(--space-2)); backdrop-filter: blur(var(--space-2));
  color: var(--pg-tinta); text-decoration: none;
  font-size: var(--font-size-caption); font-weight: var(--font-weight-bold);
}
.abertura__rolar svg { width: var(--size-icon-sm); height: var(--size-icon-sm); animation: cutuca calc(var(--duration-slow) * 5) var(--easing-standard) infinite; }
@keyframes cutuca { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(var(--space-1)); } }

/* ---------- O convite: vídeo da dupla + cartão do formulário ----------
   Celular: o vídeo entra pelo canto direito do cartão. O cabeçalho reserva a largura
   do vídeo (--video-w) e a parte dele que fica dentro do cartão (60% da altura). */
.convite {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--video-w);
  width: 100%; max-width: 34rem; margin: 0 auto;
}
.enfeite--convite-estrela { width: clamp(1.75rem, 8vw, 2.5rem); top: calc(-1 * var(--space-5)); right: calc(var(--video-w) - var(--space-3)); z-index: 3; }
/* As flores ficam abaixo da borda do cartão, nunca sobre o botão. */
.enfeite--convite-flores { width: clamp(4rem, 18vw, 5.5rem); top: calc(100% - var(--space-4)); right: var(--space-4); z-index: 3; }
.convite__video {
  grid-column: 2; grid-row: 1;
  position: relative; z-index: 2; margin: 0;
  width: var(--video-w); aspect-ratio: 9 / 16; align-self: start;
  border-radius: var(--pg-raio);
  overflow: hidden;
  background: var(--color-brand-secondary-sky);
  box-shadow: var(--pg-sombra-alta);
  rotate: 3deg;
  transition: rotate var(--pg-dur-cena) var(--easing-enter), scale var(--pg-dur-cena) var(--easing-enter);
}
.convite__video:hover { rotate: 1deg; scale: 1.02; }
.convite__video video { width: 100%; height: 100%; object-fit: cover; }
.convite__pausa {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  display: grid; place-items: center;
  width: var(--size-touch-min); height: var(--size-touch-min);
  border: 0; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  -webkit-backdrop-filter: blur(var(--space-2)); backdrop-filter: blur(var(--space-2));
  color: var(--pg-tinta); cursor: pointer;
  transition: transform var(--duration-fast), background var(--duration-fast);
}
.convite__pausa:hover { transform: scale(1.08); background: var(--color-surface); }
.convite__pausa svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.convite__pausa svg[hidden] { display: none; }

.cartao {
  container: cartao / inline-size;
  grid-column: 1 / -1; grid-row: 1;
  position: relative; z-index: 1;
  margin-top: calc(var(--video-h) * 0.4);
  padding: var(--cartao-pad);
  border-radius: var(--pg-raio-grande);
  background: var(--color-surface);
  box-shadow: var(--pg-sombra-alta);
  outline: none;
}
.cartao.is-chamado { animation: chamado calc(var(--duration-slow) * 3) var(--easing-enter); }
@keyframes chamado {
  0% { box-shadow: var(--pg-sombra-alta), 0 0 0 0 color-mix(in srgb, var(--color-highlight) 90%, transparent); }
  40% { box-shadow: var(--pg-sombra-alta), 0 0 0 var(--space-3) color-mix(in srgb, var(--color-highlight) 55%, transparent); }
  100% { box-shadow: var(--pg-sombra-alta), 0 0 0 var(--space-6) color-mix(in srgb, var(--color-highlight) 0%, transparent); }
}
.cartao__cabeca {
  padding-right: calc(var(--video-w) - var(--cartao-pad) + var(--space-3));
  min-height: calc(var(--video-h) * 0.6 - var(--cartao-pad));
  display: grid; align-content: start; gap: var(--space-2);
}
.cartao__titulo {
  margin: 0;
  font-family: var(--font-family-title); font-weight: var(--font-weight-title);
  font-size: var(--font-size-h3); line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight); color: var(--pg-tinta);
}
.cartao__intro { margin: 0; font-size: var(--font-size-caption); line-height: var(--line-height-normal); color: var(--color-text-muted); }

@media (min-width: 30rem) {
  .abertura { --cartao-pad: var(--space-6); }
  .abertura__sub { font-size: var(--font-size-body); }
  .cartao__titulo { font-size: var(--font-size-h2); }
}

@media (min-width: 40rem) {
  .abertura__garantias { display: flex; }
}

/* Tablet: ainda empilhado, alinhado à esquerda como as seções abaixo. */
@media (min-width: 48rem) {
  .abertura { --video-w: 10rem; }
  .convite { margin: 0; }
}

/* Desktop: texto à esquerda, convite à direita (vídeo ao lado do cartão, sem sobrepor). */
@media (min-width: 64rem) {
  .abertura {
    --video-w: clamp(9.5rem, 12vw, 13.5rem);
    --cartao-pad: var(--space-6);
    display: grid; align-items: center;
    padding-bottom: var(--space-24);
  }
  .abertura__grade { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); width: 100%; }
  .abertura__texto { max-width: none; }
  .abertura__sub { font-size: var(--font-size-body-lg); }
  .abertura__veu {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--color-bg) 88%, transparent) 0%,
        color-mix(in srgb, var(--color-bg) 70%, transparent) 30%,
        color-mix(in srgb, var(--color-bg) 0%, transparent) 58%),
      linear-gradient(0deg, color-mix(in srgb, var(--color-bg) 40%, transparent) 0%, transparent 30%);
  }
  .abertura__fundo { top: -6%; height: 118%; object-position: 70% 62%; -webkit-mask-image: none; mask-image: none; }
  .abertura__rolar { display: inline-flex; }
  .enfeite--lanterna, .enfeite--flores { display: block; }

  .convite { max-width: none; grid-template-columns: var(--video-w) minmax(0, 24rem); column-gap: var(--space-6); align-items: center; }
  /* A cena já tem estrelas: fica só o par da abertura. As flores vão para o pé do vídeo. */
  .enfeite--convite-estrela { display: none; }
  .enfeite--convite-flores { top: auto; bottom: var(--space-4); left: calc(-1 * var(--space-12)); right: auto; }
  .convite__video { grid-column: 1; align-self: center; rotate: -4deg; }
  .convite__video:hover { rotate: -1deg; }
  /* O cartão fica à direita do vídeo: a pausa vai para o canto esquerdo. */
  .convite__pausa { right: auto; left: var(--space-3); bottom: var(--space-3); }
  .cartao { grid-column: 2; margin: 0; }
  .cartao__cabeca { padding-right: 0; min-height: 0; }
}
@media (min-width: 80rem) {
  .abertura { --cartao-pad: var(--space-8); }
  .abertura .titulo-principal { font-size: var(--font-size-display); }
}

/* Ajustes pela largura do PRÓPRIO cartão: vale em qualquer tela. */
@container cartao (max-width: 22rem) {
  .cartao .kfc-btn--lg { font-size: var(--font-size-caption); padding-inline: var(--space-4); }
  .cartao .chip { padding-inline: var(--space-3); }
  .cartao .trilha__nome { letter-spacing: var(--letter-spacing-normal); }
}

/* ---------- Trilha de etapas: as pedras do caminho ---------- */
.trilha {
  list-style: none; margin: var(--space-5) 0 var(--space-2); padding: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  --progresso-trilha: 0;
}
.trilha::before, .trilha::after {
  content: ""; position: absolute;
  left: calc(100% / 6); right: calc(100% / 6); top: calc(var(--space-8) / 2 - var(--space-1) / 2);
  height: var(--space-1); border-radius: var(--radius-full);
}
.trilha::before { background: var(--color-border); }
.trilha::after {
  background: var(--color-highlight);
  transform: scaleX(var(--progresso-trilha)); transform-origin: 0 50%;
  transition: transform var(--pg-dur-cena) var(--easing-enter);
}
.trilha__pedra { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--space-1); }
.trilha__marca {
  display: grid; place-items: center;
  width: var(--space-8); height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  border: var(--border-width-strong) solid var(--color-border);
  color: var(--color-text-muted);
  transition: background var(--duration-normal), border-color var(--duration-normal), color var(--duration-normal), transform var(--duration-normal) var(--easing-enter);
}
.trilha__marca svg { width: var(--size-icon-sm); height: var(--size-icon-sm); scale: 0; transition: scale var(--duration-slow) var(--easing-enter); }
.trilha__nome { font-size: var(--font-size-overline); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-text-muted); }
.trilha__pedra.is-atual .trilha__marca { background: var(--color-brand-soft-yellow); border-color: var(--color-highlight); color: var(--pg-tinta); transform: scale(1.12); }
.trilha__pedra.is-atual .trilha__marca svg { scale: .8; }
.trilha__pedra.is-atual .trilha__nome { color: var(--pg-tinta); }
.trilha__pedra.is-feita .trilha__marca { background: var(--color-highlight); border-color: var(--color-highlight); color: var(--pg-tinta); }
.trilha__pedra.is-feita .trilha__marca svg { scale: 1; fill: currentColor; }
.trilha__pedra.is-feita .trilha__nome { color: var(--pg-tinta); }
/* A pedra acende como as do caminho da animação: um brilho curto, sem flash. */
.trilha__pedra.acendeu .trilha__marca { animation: acende calc(var(--duration-slow) * 2.5) var(--easing-enter); }
@keyframes acende {
  0% { transform: scale(.8); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-highlight) 80%, transparent); }
  35% { transform: scale(1.22); box-shadow: 0 0 var(--space-4) var(--space-2) color-mix(in srgb, var(--color-highlight) 55%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 var(--space-6) var(--space-3) color-mix(in srgb, var(--color-highlight) 0%, transparent); }
}

/* ========================================================================
   Formulário em etapas
   ======================================================================== */
.form { margin-top: var(--space-4); }
.etapas { position: relative; transition: height var(--duration-slow) var(--easing-standard); }
.etapas.is-medindo { overflow: hidden; }
.etapa { border: 0; margin: 0; padding: 0; min-width: 0; }
.etapa[hidden] { display: none; }
.etapa > * + * { margin-top: var(--space-5); }
.etapa > legend + * { margin-top: 0; }
.etapa__titulo {
  float: left; width: 100%; padding: 0; margin: 0 0 var(--space-4);
  font-family: var(--font-family-title); font-weight: var(--font-weight-title);
  font-size: var(--font-size-h3); line-height: var(--line-height-snug); color: var(--pg-tinta);
  outline: none;
}
.etapa__titulo + * { clear: both; }
.etapa.is-entrando { animation: etapa-entra var(--duration-slow) var(--easing-enter) both; }
.etapas[data-direcao="voltar"] .etapa.is-entrando { animation-name: etapa-volta; }
@keyframes etapa-entra { from { opacity: 0; transform: translateX(var(--space-8)); filter: blur(var(--space-1)); } }
@keyframes etapa-volta { from { opacity: 0; transform: translateX(calc(-1 * var(--space-8))); filter: blur(var(--space-1)); } }

.form .kfc-input {
  min-height: var(--size-touch-xl);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-body-sm);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.form .kfc-input:hover:not(:focus) { border-color: var(--pg-tinta); }
.form .kfc-label { color: var(--pg-tinta); }

.campo__caixa { position: relative; }
.campo__caixa .kfc-input { padding-right: var(--space-12); }
.campo__ok {
  position: absolute; right: var(--space-4); top: 50%;
  width: var(--size-icon-sm); height: var(--size-icon-sm);
  translate: 0 -50%; scale: .4; opacity: 0;
  color: var(--color-success);
  transition: scale var(--duration-normal) var(--easing-enter), opacity var(--duration-fast);
  pointer-events: none;
}
.kfc-field.is-success .campo__ok { scale: 1; opacity: 1; }

.telefone { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--space-2); }
.telefone__outro:not([hidden]) ~ .telefone__numero { grid-column: 1 / -1; }
.telefone__ddi { padding-right: var(--space-2); }
.kfc-hint { margin: 0; }

.sugestao { margin: 0; font-size: var(--font-size-caption); color: var(--color-text-muted); }
.sugestao[hidden] { display: none; }
.sugestao button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: var(--font-weight-bold); color: var(--color-link);
  text-decoration: underline; text-underline-offset: 0.2em;
}

/* Faixas de idade: chips de um toque. Marcado = borda + ícone de check, nunca só a cor. */
.faixas { border: 0; margin: 0; padding: 0; min-width: 0; }
.faixas legend { padding: 0; margin-bottom: var(--space-3); color: var(--pg-tinta); }
.opcional { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.faixas__opcoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  --chip-fundo: var(--color-brand-soft-blue);
  --chip-forte: var(--color-brand-secondary-sky);
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-touch-min);
  padding: 0 var(--space-4);
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--radius-full);
  background: var(--chip-fundo); color: var(--pg-tinta);
  font-size: var(--font-size-caption); font-weight: var(--font-weight-bold);
  cursor: pointer; user-select: none;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-normal) var(--easing-enter), box-shadow var(--duration-normal);
}
.chip--amarelo { --chip-fundo: var(--color-brand-soft-yellow); --chip-forte: var(--color-brand-secondary-yellow); }
.chip--verde { --chip-fundo: var(--color-brand-soft-green); --chip-forte: var(--color-brand-tertiary-green); }
.chip--rosa { --chip-fundo: var(--color-brand-soft-pink); --chip-forte: var(--color-brand-tertiary-pink); }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip svg { width: 0; height: var(--size-icon-sm); opacity: 0; transition: width var(--duration-normal) var(--easing-enter), opacity var(--duration-fast); }
.chip:hover { transform: translateY(calc(-1 * var(--space-1) / 2)); box-shadow: var(--pg-sombra-baixa); }
.chip:active { transform: scale(.95); }
.chip:has(input:checked) { background: var(--chip-forte); border-color: var(--pg-tinta); }
.chip:has(input:checked) svg { width: var(--size-icon-sm); opacity: 1; }
.chip:has(input:focus-visible) { outline: var(--border-width-strong) solid var(--color-focus); outline-offset: var(--space-1); }

.etapa__acoes { margin-top: var(--space-6); }
.botao-voltar { padding: 0 var(--space-3); }
.botao-seguir, .botao-enviar { white-space: nowrap; }
.etapa__acoes--final { display: grid; justify-items: center; gap: var(--space-2); }
.kfc-field.is-success .kfc-hint { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }

/* Resumo da etapa 3: o que vai ser enviado, com atalho para corrigir. */
.resumo { margin: 0; padding: var(--space-1) var(--space-4); border-radius: var(--radius-lg); background: var(--color-brand-soft-blue); }
.resumo__linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rotulo editar" "valor valor";
  column-gap: var(--space-3); align-items: center;
  min-height: var(--size-touch-min); padding: var(--space-2) 0;
  border-bottom: var(--border-width-hairline) solid color-mix(in srgb, var(--pg-tinta) 12%, transparent);
}
.resumo__linha:last-child { border-bottom: 0; }
.resumo dt { grid-area: rotulo; font-size: var(--font-size-overline); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.resumo dd { grid-area: valor; margin: 0; font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--pg-tinta); overflow-wrap: break-word; }
.resumo dd.is-vazio { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.resumo__editar {
  grid-area: editar;
  min-height: var(--size-touch-min); padding: 0 var(--space-2); margin-right: calc(-1 * var(--space-2));
  border: 0; border-radius: var(--radius-full); background: none; cursor: pointer;
  font: inherit; font-size: var(--font-size-caption); font-weight: var(--font-weight-bold);
  color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em;
  transition: background var(--duration-fast);
}
.resumo__editar:hover { background: color-mix(in srgb, var(--color-surface) 70%, transparent); }

.consentimento {
  display: grid; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--radius-lg);
  background: var(--color-brand-soft-yellow);
  transition: border-color var(--duration-fast);
}
.consentimento__rotulo { align-items: flex-start; font-size: var(--font-size-body-sm); line-height: var(--line-height-normal); color: var(--pg-tinta); }
.consentimento__rotulo input { margin-top: var(--space-1); background: var(--color-surface); }
.consentimento .kfc-hint { margin: 0; }
.consentimento.is-error { border-color: var(--color-error); }

.erro { margin: 0; font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-error); }
.erro:empty { display: none; }
.kfc-field.is-error .kfc-input { border-color: var(--color-error); }
.kfc-field.is-error .erro { animation: treme-nao var(--duration-normal) var(--easing-enter); }
@keyframes treme-nao { from { opacity: 0; transform: translateY(calc(-1 * var(--space-1))); } }

/* Honeypot fora da tela, não display:none (alguns robôs pulam campo escondido). */
.armadilha { position: absolute; left: -100vw; width: var(--space-1); height: var(--space-1); overflow: hidden; }
#aviso-erro[hidden] { display: none; }

.botao-enviar.is-enviando { pointer-events: none; }
.botao-enviar.is-enviando::before {
  content: ""; width: var(--size-icon-sm); height: var(--size-icon-sm);
  border: var(--border-width-strong) solid currentColor; border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: gira calc(var(--duration-slow) * 2) linear infinite;
}
@keyframes gira { to { transform: rotate(1turn); } }

/* ========================================================================
   Seções
   ======================================================================== */
.secao { padding: var(--space-12) 0; }
@media (min-width: 56rem) { .secao { padding: var(--space-16) 0; } }

/* ---------- O que vem aí: bento ---------- */
.bento { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.bento__item {
  --rx: 0deg; --ry: 0deg; --sobe: 0;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-4);
  min-height: 13rem;
  padding: var(--space-6);
  border-radius: var(--pg-raio-grande);
  background: var(--color-surface);
  box-shadow: var(--pg-sombra-baixa);
  transform: perspective(60rem) rotateX(var(--rx)) rotateY(var(--ry)) translateY(calc(var(--sobe) * -1 * var(--space-1)));
  transition: transform var(--duration-slow) var(--easing-enter), box-shadow var(--duration-slow) var(--easing-enter);
}
.bento__item:hover { --sobe: 1; box-shadow: var(--pg-sombra-alta); }
.bento__item p { margin: 0; max-width: 34rem; font-size: var(--font-size-body-sm); line-height: var(--line-height-normal); }
.bento__item strong {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--font-family-title); font-weight: var(--font-weight-title);
  font-size: var(--font-size-h3); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-tight);
  color: var(--pg-tinta);
}
.bento__icone {
  display: grid; place-items: center; flex: none;
  width: var(--size-icon-badge); height: var(--size-icon-badge);
  border-radius: var(--radius-full); color: var(--pg-tinta);
  transition: transform var(--duration-slow) var(--easing-enter);
}
.bento__item:hover .bento__icone { transform: rotate(-8deg) scale(1.08); }
.bento__icone svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.bento__icone--verde { background: var(--color-brand-tertiary-green); }

/* Histórias: o bloco escuro da página, com o loop do livro na proporção original. */
.bento__item--historias {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5);
  background: var(--pg-tinta); color: var(--color-brand-neutral-mist);
}
.bento__item--historias strong { color: var(--pg-branco); }
.bento__midia {
  order: 2; width: min(100%, 12rem); justify-self: center;
  aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--pg-raio);
  transition: transform var(--pg-dur-cena) var(--easing-enter);
}
.bento__item--historias:hover .bento__midia { transform: scale(1.03) rotate(-1.5deg); }
.bento__midia video { width: 100%; height: 100%; object-fit: cover; }
.bento__texto { display: grid; gap: var(--space-4); justify-items: start; }

.bento__item--atividades { background: var(--color-brand-soft-yellow); padding-top: var(--space-16); }
@media (min-width: 30rem) {
  .bento__item--historias { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); align-items: center; }
  .bento__midia { order: 0; width: 100%; }
}
.bento__enfeite {
  position: absolute; top: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); z-index: -1;
  width: clamp(4.5rem, 18vw, 6rem); height: auto;
  rotate: 8deg;
  transition: rotate var(--pg-dur-cena) var(--easing-enter), scale var(--pg-dur-cena) var(--easing-enter);
}
.bento__item--atividades:hover .bento__enfeite { rotate: -4deg; scale: 1.1; }

.bento__item--noite { background: var(--pg-noite); color: var(--color-brand-neutral-mist); min-height: 16rem; }
.bento__item--noite strong { color: var(--pg-branco); }
.bento__fundo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%;
  transition: scale calc(var(--pg-dur-cena) * 2) var(--easing-enter);
}
.bento__item--noite::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--pg-noite) 15%, color-mix(in srgb, var(--pg-noite) 55%, transparent) 55%, color-mix(in srgb, var(--pg-noite) 0%, transparent) 100%);
}
.bento__item--noite:hover .bento__fundo { scale: 1.08; }

.bento__item--calmo { background: var(--color-brand-soft-green); }
.bento__item--caminhada { background: var(--color-brand-soft-pink); padding-top: calc(var(--space-24) + var(--space-8)); }
.bento__casa {
  position: absolute; z-index: -1;
  right: calc(-1 * var(--space-4)); top: calc(-1 * var(--space-2));
  width: 8rem; height: auto;
  transition: translate var(--pg-dur-cena) var(--easing-enter), opacity var(--pg-dur-cena);
}
.bento__item--caminhada:hover .bento__casa { translate: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); }

@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__item--historias { grid-column: 1 / -1; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); padding: var(--space-8); gap: var(--space-8); }
  .bento__item--historias strong { font-size: var(--font-size-h2); }
}
@media (min-width: 64rem) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(15rem, auto); }
  .bento__item--historias { grid-column: 1 / 3; grid-row: 1 / 3; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
  .bento__item--atividades { grid-column: 3; grid-row: 1; }
  .bento__item--noite { grid-column: 3; grid-row: 2; }
  .bento__item--calmo { grid-column: 1; grid-row: 3; }
  .bento__item--caminhada { grid-column: 2 / 4; grid-row: 3; padding-top: var(--space-6); padding-right: 16rem; }
  .bento__casa { width: 15rem; right: calc(-1 * var(--space-2)); top: auto; bottom: calc(-1 * var(--space-8)); }
}

/* ---------- Quem está na lista ---------- */
/* Cartão amarelo-claro. Texto navy sobre amarelo (8,47:1 no DS); nunca branco. */
.quem {
  position: relative;
  display: grid; gap: var(--space-12); align-items: center;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--pg-raio-grande);
  background: var(--color-brand-soft-yellow);
}
.quem .titulo-secao { margin-bottom: var(--space-6); }
.vantagens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.vantagens { gap: 0; }
.vantagens li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center;
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-hairline) solid color-mix(in srgb, var(--pg-tinta) 14%, transparent);
  font-size: var(--font-size-body); line-height: var(--line-height-normal);
  transition: transform var(--duration-normal) var(--easing-enter);
}
.vantagens li:last-child { border-bottom: 0; }
.vantagens li:hover { transform: translateX(var(--space-1)); }
.vantagens svg { width: var(--size-icon-md); height: var(--size-icon-md); color: var(--color-success); }
.quem__cta { width: 100%; margin-top: var(--space-8); padding: 0 var(--space-4); font-size: var(--font-size-caption); white-space: nowrap; }
@media (min-width: 30rem) { .quem__cta { width: auto; padding: 0 var(--space-8); font-size: var(--font-size-body-sm); } }

.quem__arte { position: relative; width: 100%; max-width: 22rem; margin: 0 auto; }
/* A cena já vem cortada nos joelhos; o quadro 4:5 ancorado a 45% mantém os chifres inteiros
   (começam a ~23% da altura) e mostra a cruz do moletom do Smile. */
.quem__cena {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%;
  border-radius: var(--pg-raio-grande);
  box-shadow: var(--pg-sombra-alta);
  rotate: 2deg;
  translate: 0 var(--py, 0);
  transition: rotate var(--pg-dur-cena) var(--easing-enter);
}
.quem__arte:hover .quem__cena { rotate: 0deg; }
.enfeite--quem-estrela { width: clamp(2.5rem, 6vw, 4rem); top: calc(-1 * var(--space-6)); left: calc(-1 * var(--space-4)); z-index: 1; }
.enfeite--quem-arbusto { width: clamp(6rem, 14vw, 9rem); bottom: calc(-1 * var(--space-8)); right: calc(-1 * var(--space-8)); z-index: 1; }

@media (min-width: 56rem) {
  .quem { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: var(--space-16) var(--space-12); gap: var(--space-16); }
  .vantagens li { font-size: var(--font-size-body-lg); }
  .quem__arte { margin: calc(-1 * var(--space-24)) 0; max-width: 26rem; }
}

/* ---------- Josiane ---------- */
.josiane {
  margin: 0 auto; max-width: 50rem;
  display: grid; justify-items: center; gap: var(--space-6);
  text-align: center;
}
.josiane__aspas { width: var(--space-16); height: auto; fill: var(--color-brand-secondary-sky); stroke: none; }
.josiane__fala { margin: 0; }
.josiane__fala p {
  margin: 0;
  font-family: var(--font-family-title); font-weight: var(--font-weight-title);
  font-size: var(--font-size-h3); line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--pg-tinta); text-wrap: balance;
}
@media (min-width: 48rem) { .josiane__fala p { font-size: var(--font-size-h2); } }
.josiane__assinatura {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--font-size-caption); font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-text-muted);
}
.josiane__assinatura::before, .josiane__assinatura::after {
  content: ""; width: var(--space-8); height: var(--border-width-strong);
  border-radius: var(--radius-full); background: var(--color-brand-secondary-sky);
}
.josiane__foto { width: var(--space-24); height: var(--space-24); border-radius: var(--radius-full); object-fit: cover; }

/* ---------- Dúvidas ---------- */
.secao--duvidas { padding-top: 0; }
.duvidas { display: grid; gap: var(--space-2); align-items: start; }
.duvidas__lista { display: grid; gap: var(--space-3); }
.duvidas .kfc-accordion {
  border: 0; border-radius: var(--radius-xl);
  box-shadow: var(--pg-sombra-baixa);
  transition: box-shadow var(--duration-normal);
}
.duvidas .kfc-accordion + .kfc-accordion { margin-top: 0; }
.duvidas .kfc-accordion:hover, .duvidas .kfc-accordion[open] { box-shadow: var(--pg-sombra-media); }
.duvidas summary { font-size: var(--font-size-body-sm); color: var(--pg-tinta); padding-block: var(--space-3); transition: color var(--duration-fast); }
.duvidas summary:hover { color: var(--color-action); }
.duvidas summary svg { width: var(--size-icon-md); height: var(--size-icon-md); padding: var(--space-1); box-sizing: content-box; border-radius: var(--radius-full); background: var(--color-brand-soft-blue); transition: transform var(--duration-normal) var(--easing-enter), background var(--duration-fast); }
.duvidas details[open] summary svg { background: var(--color-highlight); }
.duvidas .sanfona__corpo p { color: var(--color-text-muted); line-height: var(--line-height-relaxed); font-size: var(--font-size-body-sm); }
@supports (interpolate-size: allow-keywords) {
  .duvidas details::details-content {
    height: 0; overflow: clip;
    transition: height var(--duration-slow) var(--easing-standard), content-visibility var(--duration-slow) allow-discrete;
  }
  .duvidas details[open]::details-content { height: auto; }
}
@media (min-width: 56rem) {
  .duvidas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-16); }
  .duvidas .titulo-secao { position: sticky; top: calc(var(--pg-topo-altura) + var(--space-8)); }
}

/* ---------- Fechamento: a casa à noite ---------- */
.noite {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: var(--space-8);
  padding: var(--space-24) 0 var(--space-16);
  border-radius: var(--pg-raio-grande) var(--pg-raio-grande) 0 0;
  background: var(--pg-noite);
  color: var(--color-brand-neutral-mist);
}
.noite__fundo {
  position: absolute; left: 0; top: -8%; z-index: -2;
  width: 100%; height: 116%; max-width: none;
  object-fit: cover; object-position: 75% 50%;
  translate: 0 var(--py, 0);
}
.noite__veu {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pg-noite) 20%, transparent) 0%,
    color-mix(in srgb, var(--pg-noite) 70%, transparent) 50%,
    var(--pg-noite) 100%);
}
.noite__grade { display: grid; gap: var(--space-8); justify-items: center; text-align: center; }
.noite__cartela {
  width: 100%; max-width: 16rem; height: auto;
  filter: drop-shadow(0 var(--space-4) var(--space-8) color-mix(in srgb, var(--pg-noite) 70%, transparent));
}
.noite__texto { display: grid; gap: var(--space-5); justify-items: center; max-width: 30rem; }
.noite__texto .titulo-secao { color: var(--pg-branco); margin: 0; }
.noite__texto p { margin: 0; font-size: var(--font-size-body); line-height: var(--line-height-normal); }
.noite__texto .kfc-btn { width: 100%; padding: 0 var(--space-4); font-size: var(--font-size-caption); white-space: nowrap; }
@media (min-width: 30rem) {
  .noite__texto p { font-size: var(--font-size-body-lg); }
  .noite__texto .kfc-btn { width: auto; padding: 0 var(--space-8); font-size: var(--font-size-body-sm); }
}

@media (min-width: 56rem) {
  .noite { padding: var(--space-24) 0; min-height: 40rem; display: grid; align-items: center; }
  .noite__veu {
    background: linear-gradient(90deg,
      var(--pg-noite) 0%,
      color-mix(in srgb, var(--pg-noite) 75%, transparent) 40%,
      color-mix(in srgb, var(--pg-noite) 0%, transparent) 75%);
  }
  .noite__grade { grid-template-columns: minmax(0, 18rem) minmax(0, 28rem); justify-content: start; justify-items: start; text-align: left; gap: var(--space-12); }
  .noite__cartela { max-width: none; }
  .noite__texto { justify-items: start; }
}

/* ---------- Rodapé ---------- */
.rodape {
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface-alt);
  text-align: center;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}
.rodape p { margin: 0; }
.rodape--noite {
  padding-bottom: calc(var(--space-8) + var(--size-touch-xl) + env(safe-area-inset-bottom));
  background: var(--pg-noite);
  color: color-mix(in srgb, var(--pg-branco) 72%, transparent);
  border-top: var(--border-width-hairline) solid color-mix(in srgb, var(--pg-branco) 10%, transparent);
}
.rodape--noite a { color: var(--color-brand-secondary-sky); }
.rodape--noite a:hover { color: var(--pg-branco); }
@media (min-width: 60rem) { .rodape--noite { padding-bottom: var(--space-8); } }

/* ---------- Atalho fixo no celular ---------- */
.atalho {
  position: fixed; z-index: 40;
  left: var(--space-4); right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-touch-xl);
  border-radius: var(--radius-full);
  background: var(--color-highlight); color: var(--color-on-highlight);
  font-size: var(--font-size-body-sm); font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; text-decoration: none;
  box-shadow: var(--pg-sombra-alta);
  translate: 0 calc(100% + var(--space-8));
  transition: translate var(--duration-slow) var(--easing-enter);
}
.atalho svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.atalho:hover { color: var(--color-on-highlight); }
.atalho.is-visivel { translate: 0 0; }
@media (min-width: 60rem) { .atalho { display: none; } }

/* ========================================================================
   Motion: estado visível por padrão; o JS só liga o que dá para desligar.
   ======================================================================== */
html.js [data-entra] { animation: entra var(--pg-dur-cena) var(--easing-enter) both; }
html.js [data-entra="2"] { animation-delay: calc(var(--duration-normal) * 0.6); }
html.js [data-entra="3"] { animation-delay: calc(var(--duration-normal) * 1.2); }
html.js .convite__video[data-entra] { animation-name: entra-quadro; }
html.js .cartao[data-entra] { animation-name: entra-cartao; animation-duration: calc(var(--pg-dur-cena) * 1.25); }
@keyframes entra { from { opacity: 0; transform: translateY(var(--space-6)); filter: blur(var(--space-1)); } }
@keyframes entra-quadro { from { opacity: 0; transform: translateY(var(--space-12)) scale(.92); } }
@keyframes entra-cartao { from { opacity: 0; transform: translateY(var(--space-16)) rotate(-2deg); } }
html.js .abertura__fundo { animation: assenta calc(var(--pg-dur-cena) * 2.5) var(--easing-enter) both; }
@keyframes assenta { from { scale: 1.08; } }

html.js [data-revela] {
  opacity: 0;
  transform: translateY(var(--space-8));
  filter: blur(var(--space-1));
  transition: opacity var(--pg-dur-cena) var(--easing-enter), transform var(--pg-dur-cena) var(--easing-enter), filter var(--pg-dur-cena) var(--easing-enter);
  transition-delay: calc(var(--i, 0) * var(--duration-fast) / 1.5);
}
html.js [data-revela].is-visivel { opacity: 1; transform: none; filter: none; }
/* No bento o transform é da inclinação; a revelação usa só opacidade e desfoque. */
html.js .bento__item[data-revela] { transform: perspective(60rem) rotateX(var(--rx)) rotateY(var(--ry)) translateY(calc(var(--sobe) * -1 * var(--space-1))); }
html.js .bento__item[data-revela]:not(.is-visivel) { translate: 0 var(--space-8); }
html.js .bento__item[data-revela] { transition: opacity var(--pg-dur-cena) var(--easing-enter), translate var(--pg-dur-cena) var(--easing-enter), filter var(--pg-dur-cena) var(--easing-enter), transform var(--duration-slow) var(--easing-enter), box-shadow var(--duration-slow) var(--easing-enter); }

[data-flutua] { animation: flutua calc(var(--duration-slow) * 15) ease-in-out infinite alternate; }
.enfeite--estrela-b[data-flutua] { animation-duration: calc(var(--duration-slow) * 11); animation-delay: calc(-1 * var(--duration-slow) * 4); }
@keyframes flutua { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(calc(-1 * var(--space-4))) rotate(6deg); } }
[data-balanca] { animation: brilha calc(var(--duration-slow) * 8) ease-in-out infinite alternate; }
@keyframes brilha { from { filter: brightness(1); } to { filter: brightness(1.25) drop-shadow(0 0 var(--space-3) color-mix(in srgb, var(--color-highlight) 60%, transparent)); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-entra], html.js .convite__video[data-entra], html.js .cartao[data-entra],
  html.js .abertura__fundo, [data-flutua], [data-balanca], .abertura__rolar svg { animation: none; }
  html.js [data-revela], html.js .bento__item[data-revela] { opacity: 1; transform: none; translate: none; filter: none; transition: none; }
  .etapa.is-entrando { animation-name: so-aparece; }
  .etapas[data-direcao="voltar"] .etapa.is-entrando { animation-name: so-aparece; }
  @keyframes so-aparece { from { opacity: 0; } }
  .trilha__pedra.acendeu .trilha__marca { animation: none; }
  .bento__item, .convite__video, .quem__cena, .chip, .kfc-btn, .vantagens li { transition-property: background, color, box-shadow, border-color, opacity; }
  .etapas { transition: none; }
}

/* ========================================================================
   Páginas internas (obrigado, privacidade, 404)
   ======================================================================== */
.interna { max-width: 44rem; margin: 0 auto; padding: var(--space-12) var(--space-5) var(--space-16); }
.interna h1 { font-family: var(--font-family-title); font-weight: var(--font-weight-title); font-size: var(--font-size-h1); line-height: var(--line-height-tight); color: var(--pg-tinta); margin: 0 0 var(--space-6); text-wrap: balance; }
.interna h2 { font-family: var(--font-family-title); font-weight: var(--font-weight-title); font-size: var(--font-size-h3); color: var(--pg-tinta); margin: var(--space-8) 0 var(--space-3); }
.interna p, .interna li { line-height: var(--line-height-relaxed); }
.interna__arte { width: 100%; max-width: 20rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; border-radius: var(--pg-raio-grande); box-shadow: var(--pg-sombra-alta); margin: 0 0 var(--space-8); }
.interna .kfc-btn { margin-top: var(--space-4); }

/* Obrigado: o céu da manhã de fundo e o cartão no mesmo mundo do formulário. */
.pagina-ceu {
  background: var(--color-brand-soft-blue) url("../img/ceu-1600.webp") center bottom / cover no-repeat fixed;
}
.pagina-ceu { min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--space-6); gap: var(--space-6); }
.pagina-ceu .interna--cartao { margin-block: auto; width: calc(100% - 2 * var(--space-4)); }
.pagina-ceu .rodape { background: color-mix(in srgb, var(--color-surface) 70%, transparent); }
.interna--cartao {
  display: grid; gap: var(--space-8); align-items: center;
  max-width: 60rem; margin: var(--space-4) auto; padding: var(--space-6);
  align-self: center;
  border-radius: var(--pg-raio-grande);
  background: var(--color-surface);
  box-shadow: var(--pg-sombra-alta);
}
.interna--cartao .interna__arte { margin: 0 auto; }
.interna--cartao h1 { margin-bottom: var(--space-4); }
.interna__corpo .trilha { max-width: 20rem; margin: 0 0 var(--space-6); }
.trilha--completa { --progresso-trilha: 1; }
.trilha--completa .trilha__pedra .trilha__marca { animation: acende calc(var(--duration-slow) * 2.5) var(--easing-enter) both; }
.trilha--completa .trilha__pedra:nth-child(2) .trilha__marca { animation-delay: var(--duration-normal); }
.trilha--completa .trilha__pedra:nth-child(3) .trilha__marca { animation-delay: calc(var(--duration-normal) * 2); }
@media (min-width: 48rem) {
  .interna--cartao { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-12); padding: var(--space-12); margin: var(--space-16) auto; }
}
@media (prefers-reduced-motion: reduce) { .trilha--completa .trilha__pedra .trilha__marca { animation: none; } }