/* ============================================================
   CÉLIA . O SABOR QUE VOCÊ APROVA . LP mobile-first
   Celular: base  |  Tablet: a partir de 600px  |  Desktop: a partir de 1024px
   ============================================================ */

/* Fontes oficiais Célia: Amsi Pro Ultra (títulos) + Amsi Pro Cond (texto) */
@font-face{font-family:"Amsi Ultra";src:url(/fonts/amsi-ultra.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Pesos não condensados da Amsi Pro: exportar em WOFF2, colocar em public/fonts e ligar aqui.
   @font-face{font-family:"Amsi Pro";src:url(/fonts/amsi-regular.woff2) format("woff2");font-weight:400;font-display:swap}
   @font-face{font-family:"Amsi Pro";src:url(/fonts/amsi-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
   @font-face{font-family:"Amsi Pro";src:url(/fonts/amsi-bold.woff2) format("woff2");font-weight:700;font-display:swap}
   Enquanto não chegam, o texto cai numa sans neutra do sistema. */

:root{
  --titulo:"Amsi Ultra","Amsi Pro",sans-serif;
  --texto:"Amsi Pro","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --vermelho:#C32B29;
  --vermelho-escuro:#8E1714;
  --amarelo:#EFC81E;
  --amarelo-claro:#FBE06A;
  --laranja:#D9481B;
  --creme:#FCEFD6;
  --tinta:#2A1410;
  --tinta-2:#6B4A3E;
  --branco:#FFFFFF;
  --raio:20px;
  --raio-pill:999px;
  --max:520px;
  --letreiro:50px;
  --mola:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3,.pill{font-family:var(--titulo);font-weight:400;letter-spacing:-.005em}
img{display:block;max-width:100%;height:auto}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.bloco{padding:44px 20px}
.bloco > .interno{max-width:var(--max);margin:0 auto}

/* ---------- botão pill ---------- */
.pill{
  display:inline-block;
  width:100%;
  max-width:340px;
  border:0;
  cursor:pointer;
  background:var(--amarelo);
  color:var(--tinta);
  font-size:1.05rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  padding:17px 28px;
  border-radius:var(--raio-pill);
  box-shadow:0 5px 0 #B8951A;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pill:active{transform:translateY(4px);box-shadow:0 1px 0 #B8951A}
.pill--vermelho{background:var(--vermelho);color:#fff;box-shadow:0 5px 0 var(--vermelho-escuro)}
.pill--vermelho:active{box-shadow:0 1px 0 var(--vermelho-escuro)}
.pill--whats{background:#25D366;color:#063A1C;box-shadow:0 5px 0 #169C4A}
.pill--whats:active{box-shadow:0 1px 0 #169C4A}
.pill[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.pill.enviando{opacity:.8;cursor:progress}

.selo-tempo{
  display:inline-block;
  background:var(--amarelo);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:700;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:6px 16px;
  border-radius:var(--raio-pill);
  margin-bottom:14px;
}

/* ============================================================
   REVELAR AO ROLAR (o JS só esconde o que está abaixo da dobra)
   ============================================================ */
.revelar{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.revelar.visivel{opacity:1;transform:none}
.revelar[data-atraso="1"]{transition-delay:.12s}
.revelar[data-atraso="2"]{transition-delay:.24s}
.revelar[data-atraso="3"]{transition-delay:.36s}

/* ============================================================
   1. CAPA
   ============================================================ */
.capa{background:var(--vermelho);text-align:center;position:relative}
.capa__arte{position:relative}
/* KV completo, sempre inteiro na tela, nunca cortado */
.capa__kv{width:100%;height:auto;display:block;animation:kvEntra 1.1s ease-out backwards}
.capa__conteudo{padding:24px 20px 30px;background:var(--vermelho)}
.capa__linha{
  color:#FFF6DF;
  font-size:1.05rem;
  line-height:1.35;
  max-width:34ch;      /* mantém a frase em duas linhas */
  text-wrap:balance;
  margin:0 auto 22px;
  font-family:var(--titulo);
  font-weight:400;
  animation:sobe .8s ease-out .35s backwards;
}
.capa__cta{position:relative;animation:ctaEntra .7s var(--mola) .55s backwards}
.capa__cta::after{
  content:"";position:absolute;inset:-5px;border-radius:inherit;
  border:3px solid var(--amarelo);pointer-events:none;opacity:0;
  animation:ctaPulso 2.4s ease-out 1.6s infinite;
}

/* Letreiro corrido amarelo */
.letreiro{
  height:var(--letreiro);overflow:hidden;white-space:nowrap;
  background:var(--amarelo);color:var(--tinta);
  display:flex;align-items:center;
  border-top:3px solid var(--tinta);border-bottom:3px solid var(--tinta);
}
.letreiro__trilho{display:inline-flex;align-items:center;animation:letreiro 32s linear infinite;will-change:transform}
.letreiro__trilho span{font-family:var(--titulo);font-size:1rem;text-transform:uppercase;letter-spacing:.03em;margin-right:22px}
.letreiro__trilho i{font-style:normal;color:var(--vermelho);font-size:1.1rem;margin-right:22px}

/* ============================================================
   2. MANIFESTO + COMO FUNCIONA
   ============================================================ */
.manifesto{background:var(--creme)}
.manifesto h2{font-size:2.05rem;line-height:1.08;margin:0 0 14px}
.manifesto p{font-size:1.02rem}
.como-funciona{font-weight:700;margin-top:26px;margin-bottom:0}

.passos{list-style:none;margin:18px 0 0;padding:0;position:relative}
.passos::before{
  content:"";position:absolute;left:31px;top:44px;bottom:44px;
  border-left:3px dotted #E0B98A;transform-origin:top;
}
.passo{display:flex;gap:16px;align-items:center;padding:12px 0;position:relative}
.passo__icone{
  flex:none;position:relative;width:64px;height:64px;border-radius:50%;
  background:#FBE3B8;box-shadow:inset 0 0 0 3px #fff;display:grid;place-items:center;
}
.passo__icone svg{width:46px;height:46px;overflow:visible}
.passo__icone b{
  position:absolute;top:-5px;right:-5px;width:27px;height:27px;border-radius:50%;
  background:var(--laranja);color:#fff;border:3px solid var(--creme);
  font-family:var(--titulo);font-weight:400;font-size:.82rem;display:grid;place-items:center;
}
.passo__texto strong{display:block;font-family:var(--titulo);font-weight:400;font-size:1.15rem;margin-bottom:1px}
.passo__texto span{display:block;font-size:.95rem;color:#5A3A30;line-height:1.45}
.passo:hover .passo__icone{animation:balanca .6s ease}

/* entrada dos passos */
.passos.revelar{opacity:1;transform:none}
.passos.revelar::before{transform:scaleY(0);transition:transform 1.3s ease .3s}
.passos.revelar.visivel::before{transform:scaleY(1)}
.passos.revelar .passo{opacity:0;transform:translateX(-26px);transition:opacity .5s ease, transform .7s var(--mola)}
.passos.revelar .passo__icone{transform:scale(.3) rotate(-25deg);transition:transform .7s var(--mola)}
.passos.revelar.visivel .passo,
.passos.revelar.visivel .passo__icone{opacity:1;transform:none}
.passos.revelar.visivel .passo:nth-child(2),
.passos.revelar.visivel .passo:nth-child(2) .passo__icone{transition-delay:.35s}
.passos.revelar.visivel .passo:nth-child(3),
.passos.revelar.visivel .passo:nth-child(3) .passo__icone{transition-delay:.7s}

/* animações contínuas dos ícones */
.icone-check{stroke-dasharray:36;stroke-dashoffset:36;animation:marcar 3.2s ease-in-out infinite}
.bolha{animation:bolha 2.1s ease-in infinite}
.bolha:nth-of-type(2){animation-delay:.7s}
.bolha:nth-of-type(3){animation-delay:1.4s}
.onda{animation:onda 1.6s ease-in-out infinite}
.onda + .onda{animation-delay:.3s}

/* ============================================================
   3. FORMULÁRIO GAMIFICADO
   ============================================================ */
.form-secao{background:var(--laranja);color:#fff;padding-top:26px}

/* Trilha de fases (fica grudada no topo) */
.progresso{position:sticky;top:0;z-index:20;background:var(--laranja);padding:10px 0 10px;margin-bottom:8px}
.trilha{position:relative}
.trilha__barra{
  position:absolute;left:12.5%;right:12.5%;top:20px;height:8px;
  border-radius:var(--raio-pill);background:rgba(255,255,255,.25);overflow:hidden;
}
.trilha__preenchido{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--amarelo-claro),var(--amarelo));
  transition:width .6s var(--mola);
}
.trilha__fases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.trilha__fases li{display:flex;flex-direction:column;align-items:center;gap:3px}
.trilha__icone{
  position:relative;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:1.25rem;line-height:1;
  background:#E46A43;border:3px solid rgba(255,255,255,.35);
  transition:background .3s ease, border-color .3s ease, transform .3s var(--mola);
}
.trilha__nome{font-size:.7rem;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.trilha__fases li.atual .trilha__icone{background:#fff;border-color:var(--amarelo);transform:scale(1.1);animation:pulsoFase 1.8s ease-in-out infinite}
.trilha__fases li.feita .trilha__icone{background:var(--amarelo);border-color:#fff}
.trilha__fases li.feita .trilha__icone::after{
  content:"✓";position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;
  background:var(--vermelho);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center;
  animation:popEntra .4s var(--mola);
}
.trilha__fases li.atual .trilha__nome,.trilha__fases li.feita .trilha__nome{color:#fff}
.progresso__texto{font-size:.8rem;color:#FFE7CF;font-weight:700;text-align:center;margin:8px 0 0}
.progresso__pct b{display:inline-block;color:#fff}
.progresso__pct b.pulou{animation:numPula .45s var(--mola)}

.cartao{
  background:var(--branco);
  color:var(--tinta);
  border-radius:var(--raio);
  padding:22px 18px;
  margin-bottom:16px;
}
.cartao h3{font-size:1.32rem;margin:0 0 4px;line-height:1.25}
.cartao h3:focus{outline:none}
.cartao .dica{font-size:.88rem;color:var(--tinta-2);margin:0 0 16px}
.cartao.tremer{animation:tremer .45s ease}
.fase-tag{
  display:inline-block;margin:0 0 10px;padding:4px 11px;border-radius:var(--raio-pill);
  background:#FDEBDD;color:var(--laranja);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
legend{font-family:var(--titulo);font-weight:400;font-size:1.12rem;padding:0;margin-bottom:10px}
legend small{font-family:var(--texto);font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#9A7B6C;margin-left:6px}

.opcoes{display:grid;gap:10px}
.opcoes--duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.opcao{position:relative;display:flex}
.opcao input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opcao span{
  display:grid;
  grid-template-columns:22px 1fr auto;
  column-gap:10px;
  align-content:center;
  align-items:center;
  width:100%;
  min-height:56px;
  padding:12px 16px;
  border:2px solid #E6D9C4;
  border-radius:14px;
  font-weight:600;
  line-height:1.3;
  transition:border-color .15s ease, background .15s ease, opacity .2s ease, transform .15s ease;
}
.opcao span::before{
  content:"";
  width:22px;height:22px;
  align-self:center;
  border:2px solid #C9B79C;border-radius:50%;
  transition:background .15s ease, border-color .15s ease;
}
.opcao input[type=checkbox] + span::before{border-radius:6px}
.opcao input:checked + span{border-color:var(--vermelho);background:#FDF0EE}
.opcao input:checked + span::before{
  border-color:var(--vermelho);background:var(--vermelho);
  box-shadow:inset 0 0 0 3px #fff;
}
.opcao input:focus-visible + span{outline:3px solid var(--tinta);outline-offset:2px}
.opcao span.pop{animation:pop .38s var(--mola)}
.icone{grid-column:3;align-self:center;width:30px;height:39px;flex:none}
.icone--chip{width:36px;height:30px}
.icone--embalagem{width:auto;height:46px;filter:drop-shadow(0 3px 3px rgba(42,20,16,.25))}
.opcao input:checked + span .icone{animation:balanca .6s ease}

/* ---------- fase 2: espaços dos 3 sabores ---------- */
.slots{background:#FFF6E6;border:2px solid #F3DEB7;border-radius:16px;padding:12px;margin-bottom:12px}
.slots__topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.slots__titulo{font-family:var(--titulo);font-size:1rem}
.slots__contador{font-size:.8rem;font-weight:700;color:var(--vermelho)}
.slots__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slot{min-height:56px;border:2px dashed #E0C79B;border-radius:12px;display:flex;background:#fff}
.slot--cheio{border-style:solid;border-color:var(--vermelho)}
.slot__vazio{margin:auto;font-size:.76rem;font-weight:700;color:#B39A7A}
.slot__cheio{
  flex:1;border:0;border-radius:9px;cursor:pointer;position:relative;
  background:var(--vermelho);color:#fff;font:inherit;font-weight:700;font-size:.78rem;line-height:1.2;
  padding:6px 22px 6px 9px;text-align:left;animation:slotEntra .45s var(--mola);
}
.slot__cheio::after{content:"✕";position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:.72rem;opacity:.85}
.slot__cheio:hover{background:var(--vermelho-escuro)}
.slots.tremer{animation:tremer .45s ease}
.slots.completo{border-color:var(--amarelo);background:#FFF3C4}
.aviso-limite{
  background:#FFF3C4;border-left:5px solid var(--amarelo);color:var(--tinta);
  font-size:.86rem;font-weight:600;padding:9px 12px;border-radius:8px;margin:0 0 12px;
  animation:sobe .3s ease;
}
.grupos-sabor{display:grid;gap:14px}
.grupo-sabor h4{font-family:var(--texto);font-weight:700;font-size:.9rem;margin:0 0 8px;color:var(--tinta-2)}
.opcoes--sabores{grid-template-columns:repeat(2,minmax(0,1fr))}
.grupos-sabor.cheio .opcao input:not(:checked) + span{opacity:.42;filter:grayscale(.5)}

/* ---------- campos ---------- */
label.campo{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px}
input[type=text],input[type=tel],textarea{
  width:100%;
  font-family:inherit;font-size:1rem;
  color:var(--tinta);
  padding:14px 16px;
  border:2px solid #E6D9C4;border-radius:14px;
  background:#FFFDF8;
  margin-bottom:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{border-color:var(--laranja);outline:none;box-shadow:0 0 0 4px rgba(217,72,27,.14)}
.ajuda{font-size:.82rem;color:var(--tinta-2);margin:-8px 0 16px}

/* ---------- fase 3: laboratório ---------- */
.lab{display:grid;gap:18px}
.lab__vitrine{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:radial-gradient(circle at 50% 38%, #FFF6DD 0%, #FBE2B2 75%);
  border-radius:18px;padding:18px 12px 10px;position:relative;overflow:hidden;
}
.lab__vitrine::before{
  content:"";position:absolute;inset:-40%;
  background:repeating-conic-gradient(from 0deg, rgba(239,200,30,.18) 0 9deg, transparent 9deg 18deg);
  animation:girar 40s linear infinite;
}
.lab__pacote{width:168px;position:relative;margin-bottom:10px}
/* Fase 1 no celular: vitrine compacta, embalagem ao lado da legenda */
.lab--fase1{margin-bottom:4px}
.lab--fase1 .lab__vitrine{flex-direction:row;justify-content:center;gap:16px;padding:14px 16px}
.lab--fase1 .lab__pacote{width:92px;margin-bottom:8px}
.lab--fase1 .lab__legenda{max-width:15ch;text-align:left;font-size:.78rem;line-height:1.3}
.lab__legenda{position:relative;margin:4px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A6A5C}

/* ---------- fase 4: assinatura ---------- */
.assinatura{display:grid;gap:14px}
.assinatura__pacote{width:118px;margin:0 auto 4px}

.aceite{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;font-size:.9rem}
.aceite input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--vermelho)}
.aceite a{color:var(--vermelho)}

.acoes{display:flex;flex-direction:column;gap:10px;align-items:center}
.voltar{
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:700;
  color:var(--tinta-2);text-decoration:underline;padding:8px;
}
.erro{
  background:#FDECEA;border-left:5px solid var(--vermelho);
  color:#8E1714;font-size:.9rem;font-weight:600;
  padding:10px 14px;border-radius:8px;margin-bottom:14px;
}

/* ============================================================
   EMBALAGEM PERSONALIZADA (fases 1, 3 e 4, revelação final e prêmio)
   Camadas: base > arte impressa > sombra (multiply) > brilho (screen) > reflexo
   ============================================================ */
.pacote{position:relative;width:100%;aspect-ratio:200/260;container-type:inline-size}
.pacote__corpo{
  position:absolute;inset:0;isolation:isolate;
  animation:boiar 3.6s ease-in-out infinite;
  filter:drop-shadow(0 3cqw 3.5cqw rgba(42,20,16,.3));
}
.pacote__sombra{
  position:absolute;left:18%;right:18%;bottom:-5%;height:7%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(42,20,16,.42), rgba(42,20,16,0));
  animation:sombra 3.6s ease-in-out infinite;
}
.pacote__img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none}
.pacote__img--sombra{mix-blend-mode:multiply}
.pacote__img--brilho{mix-blend-mode:screen}
.pacote[data-tipo="lata"] .so-pacote,
.pacote[data-tipo="pacote"] .so-lata{display:none}
.pacote__arte{position:absolute;inset:0}

/* Reflexo de luz que atravessa o laminado de tempos em tempos */
.pacote__reflexo{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 60%) no-repeat;
  background-size:300% 100%;background-position:100% 0;
  -webkit-mask:url(/img/embalagem/pacote-base.webp) center/100% 100% no-repeat;
  mask:url(/img/embalagem/pacote-base.webp) center/100% 100% no-repeat;
  animation:reflexo 5.5s ease-in-out infinite;
}
.pacote[data-tipo="lata"] .pacote__reflexo{
  -webkit-mask-image:url(/img/embalagem/lata-base.webp);
  mask-image:url(/img/embalagem/lata-base.webp);
}

/* Arte impressa */
.pacote__logo{position:absolute;left:50%;top:12%;width:46%;transform:translateX(-50%);filter:drop-shadow(0 .7cqw 0 rgba(94,13,11,.5))}
.pacote__novo{
  position:absolute;right:12%;top:10.5%;width:19%;aspect-ratio:1;display:grid;place-items:center;
  background:var(--amarelo);color:var(--tinta);
  clip-path:polygon(50% 0%,61% 12%,76% 6%,79% 22%,95% 25%,88% 39%,100% 50%,88% 61%,95% 75%,79% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,21% 78%,5% 75%,12% 61%,0% 50%,12% 39%,5% 25%,21% 22%,24% 6%,39% 12%);
  animation:selo 5s ease-in-out infinite;
}
.pacote__novo span{font-family:var(--titulo);font-size:3cqw;line-height:.95;text-align:center;text-transform:uppercase}
.pacote__rotulo{
  position:absolute;left:50%;top:29%;margin:0;transform:translateX(-50%) rotate(-3deg);
  background:#5E0F0C;color:#fff;border-radius:2cqw;padding:1.5cqw 4.4cqw 1.9cqw;
  text-align:center;line-height:1;white-space:nowrap;
}
.pacote__rotulo b{display:block;font-family:var(--titulo);font-weight:400;font-size:8.6cqw;letter-spacing:.02em;text-transform:uppercase}
.pacote__rotulo span{display:block;margin-top:.6cqw;font-family:var(--titulo);font-size:4.2cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--amarelo)}
.pacote__rotulo em{font-style:normal}
.pacote__faixa{position:absolute;left:12%;right:12%;top:45%;transform:rotate(-4deg)}
.pacote__faixa-miolo{
  background:var(--amarelo);color:var(--tinta);text-align:center;padding:2.4cqw 8cqw 2.8cqw;
  clip-path:polygon(0 0,100% 0,93% 50%,100% 100%,0 100%,7% 50%);
}
.pacote__faixa small{display:block;font-weight:700;font-size:3.5cqw;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.pacote__nome{display:block;font-family:var(--titulo);font-size:9.6cqw;line-height:1;overflow-wrap:anywhere}
.pacote__nome[data-tamanho="m"]{font-size:8cqw}
.pacote__nome[data-tamanho="p"]{font-size:6.6cqw}
.pacote__nome[data-tamanho="pp"]{font-size:5.4cqw}
.pacote__nome.vazio{opacity:.45}
.pacote__monte{position:absolute;left:12%;width:76%;top:66%;height:auto;overflow:visible}
.pacote__batatas{display:none;transform-box:fill-box;transform-origin:center}
.pacote[data-formato=""] .batatas--lisa,
.pacote[data-formato="lisa"] .batatas--lisa,
.pacote[data-formato="ondulada"] .batatas--ondulada,
.pacote[data-formato="super"] .batatas--super{display:inline}

/* Lata: rótulo mais estreito, abaixo da tampa */
.pacote[data-tipo="lata"] .pacote__logo{top:20%;width:42%}
.pacote[data-tipo="lata"] .pacote__novo{right:18%;top:18.5%;width:16%}
.pacote[data-tipo="lata"] .pacote__novo span{font-size:2.6cqw}
.pacote[data-tipo="lata"] .pacote__rotulo{top:35%}
.pacote[data-tipo="lata"] .pacote__faixa{top:50%;left:18%;right:18%}
.pacote[data-tipo="lata"] .pacote__faixa-miolo{padding-left:6.5cqw;padding-right:6.5cqw}
.pacote[data-tipo="lata"] .pacote__monte{left:19%;width:62%;top:69%}

/* ============================================================
   REVELAÇÃO FINAL: o tacho mágico
   ============================================================ */
.cartao.revelacao,.form-secao .cartao.revelacao{padding:0;overflow:hidden;text-align:center}
.revelacao:focus{outline:none}
.palco{
  position:relative;height:400px;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 46%, #E75A2C 0%, #B92A25 52%, #761310 100%);
}
.palco__raios{
  position:absolute;left:50%;top:40%;width:1000px;height:1000px;margin:-500px 0 0 -500px;
  background:repeating-conic-gradient(from 0deg, rgba(255,228,130,.2) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 58%);
  mask-image:radial-gradient(circle, #000 12%, transparent 58%);
  opacity:0;transition:opacity .8s ease;animation:girar 26s linear infinite;
}
.palco.pronto .palco__raios{opacity:1}
.palco__estrelas i{
  position:absolute;width:6px;height:6px;border-radius:50%;background:#FBE06A;
  box-shadow:0 0 10px 3px rgba(251,224,106,.75);animation:piscar 2.6s ease-in-out infinite;
}
.palco__estrelas i:nth-child(1){left:12%;top:22%}
.palco__estrelas i:nth-child(2){left:84%;top:18%;animation-delay:.4s}
.palco__estrelas i:nth-child(3){left:22%;top:62%;animation-delay:.9s}
.palco__estrelas i:nth-child(4){left:78%;top:58%;animation-delay:1.3s}
.palco__estrelas i:nth-child(5){left:50%;top:10%;animation-delay:.6s}
.palco__estrelas i:nth-child(6){left:6%;top:84%;animation-delay:1.7s}
.palco__estrelas i:nth-child(7){left:92%;top:82%;animation-delay:2s}
.palco__estrelas i:nth-child(8){left:36%;top:30%;animation-delay:1.1s}
.palco__status{
  position:absolute;left:0;right:0;top:16px;margin:0;padding:0 16px;z-index:8;
  color:#FFE7CF;font-weight:700;font-size:.92rem;letter-spacing:.02em;
}
.palco{transition:height .6s cubic-bezier(.2,.8,.2,1)}
.palco.pronto{height:470px}
/* "Nasceu um sabor novo!" vira uma faixa amarela, no estilo da embalagem */
.palco__status--final{
  top:20px;left:50%;right:auto;width:max-content;transform:translateX(-50%) rotate(-3deg);max-width:calc(100% - 20px);padding:11px 28px 13px;white-space:nowrap;
  font-family:var(--titulo);font-weight:400;font-size:clamp(.95rem, 4.8vw, 1.3rem);line-height:1.1;letter-spacing:.01em;color:var(--tinta);
  filter:drop-shadow(0 4px 0 rgba(60,8,6,.35)) drop-shadow(0 0 18px rgba(251,224,106,.55));
  animation:faixaEntra .75s var(--mola) both, faixaPulsa 2.4s ease-in-out .9s infinite;
}
.palco__status--final::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--amarelo);
  clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);
}
.palco__status--final::after{
  content:"✦";position:absolute;right:-6px;top:-12px;color:#FFF6C9;font-size:1.1rem;
  animation:piscar 1.8s ease-in-out infinite;
}
.palco__pular{
  position:absolute;right:12px;bottom:12px;z-index:8;
  background:rgba(42,20,16,.35);color:#fff;border:0;border-radius:var(--raio-pill);
  padding:7px 13px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
}
.palco__flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,255,255,.6) 30%, rgba(255,255,255,0) 70%);opacity:0}

/* Sem transform no tacho: assim suas camadas e as fichas dividem a mesma ordem de profundidade do palco */
.tacho{position:absolute;left:50%;bottom:10%;width:min(280px,78%);margin-left:max(-140px,-39%);aspect-ratio:240/150}
.tacho::before{
  content:"";position:absolute;left:8%;right:8%;top:-22%;height:70%;z-index:0;
  background:radial-gradient(ellipse at 50% 60%, rgba(251,224,106,.75), rgba(251,224,106,0) 70%);
  opacity:.75;transition:transform .3s ease, opacity .3s ease;
}
.tacho.agitando{animation:agitar .12s linear infinite}
.tacho.agitando::before,.tacho.brilha::before{transform:scale(1.35);opacity:1}
.tacho__fundo,.tacho__superficie,.tacho__frente{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 100%}
.tacho__fundo{z-index:1}
.tacho__superficie{z-index:3}
.tacho__frente{z-index:6}
.tacho__slot{position:absolute;left:50%;top:26%;width:58%;z-index:5;transform:translate(-50%,-100%)}
.palco__particulas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.tacho__slot .pacote__sombra{display:none}
.tacho__bolha{animation:bolhaTacho 1.3s ease-in infinite;transform-box:fill-box;transform-origin:center}
.tacho__bolha:nth-of-type(2){animation-delay:.45s}
.tacho__bolha:nth-of-type(3){animation-delay:.9s}
.tacho__caldo{transform-box:fill-box;transform-origin:center}
.tacho__caldo.espirro{animation:espirro .35s ease}

.ficha{
  position:absolute;left:0;top:0;z-index:4;display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--tinta);border-radius:var(--raio-pill);
  padding:5px 10px 5px 6px;box-shadow:0 6px 16px rgba(0,0,0,.28);
  font-weight:700;font-size:.72rem;line-height:1.1;white-space:nowrap;
  max-width:124px;overflow:hidden;text-overflow:ellipsis;
  will-change:transform;backface-visibility:visible;
}

.ficha i{font-style:normal;font-size:1.1rem;line-height:1}
.ficha--nome{background:var(--amarelo);font-family:var(--titulo);font-weight:400;font-size:.9rem}

.revelacao__texto{padding:24px 20px 30px;animation:sobe .6s ease}
.revelacao__texto .selo-tempo{margin-bottom:8px}
.revelacao__texto h3{font-size:1.6rem;margin:0 0 4px}
.revelacao__esperar{font-family:var(--titulo);font-size:1.3rem;color:var(--vermelho);margin-bottom:10px}
#compartilhar{margin-top:4px;font-size:.92rem;padding:16px 18px}

/* Rodapé da revelação: logo da Célia e regulamento */
.revelacao__rodape{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--tinta);padding:14px 20px;
}
.revelacao__rodape img{width:84px;height:auto}
.revelacao__rodape a{color:var(--amarelo);font-weight:700;font-size:.82rem;text-align:right}

/* Celular: revelação em tela cheia, animação em cima e texto embaixo, sem rolagem */
html.tela-travada,html.tela-travada body{overflow:hidden;overscroll-behavior:none}
.form-secao .cartao.revelacao--tela-cheia,.cartao.revelacao--tela-cheia{
  position:fixed;inset:0;z-index:60;margin:0;border-radius:0;
  height:100vh;height:100dvh;display:flex;flex-direction:column;
}
.revelacao--tela-cheia .palco,
.revelacao--tela-cheia .palco.pronto{flex:1 1 auto;height:auto;min-height:0;container-type:size}
/* tacho e embalagem se ajustam à altura disponível */
.revelacao--tela-cheia .tacho{width:min(78%, 280px, 52cqh);margin-left:calc(min(78%, 280px, 52cqh) / -2)}
.revelacao--tela-cheia .revelacao__texto{flex:none;padding:12px 18px 14px}
.revelacao--tela-cheia .revelacao__texto .selo-tempo{font-size:.66rem;padding:4px 12px;margin-bottom:6px}
.revelacao--tela-cheia .revelacao__texto h3{font-size:1.2rem;margin-bottom:2px}
.revelacao--tela-cheia .revelacao__esperar{font-size:1rem;margin-bottom:6px}
.revelacao--tela-cheia .revelacao__texto p{font-size:.8rem;line-height:1.35;margin-bottom:6px}
.revelacao--tela-cheia #compartilhar{margin-top:4px;padding:12px 16px;font-size:.84rem}
.revelacao--tela-cheia .revelacao__rodape{flex:none;padding:10px 18px calc(10px + env(safe-area-inset-bottom))}
.revelacao--tela-cheia .revelacao__rodape img{width:70px}
.revelacao--tela-cheia .revelacao__rodape a{font-size:.74rem}

/* Toast de conquista */
.conquista-toast{
  position:fixed;left:50%;top:12px;z-index:70;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
  background:var(--tinta);color:#fff;border-radius:16px;padding:9px 16px 9px 9px;
  box-shadow:0 14px 34px rgba(0,0,0,.32);text-align:left;
}
.conquista-toast.entra{animation:toastEntra 2.8s ease both}
.conquista-toast i{font-style:normal;flex:none;width:42px;height:42px;border-radius:50%;background:var(--amarelo);display:grid;place-items:center;font-size:1.35rem}
.conquista-toast small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--amarelo)}
.conquista-toast strong{display:block;font-family:var(--titulo);font-weight:400;font-size:1rem;line-height:1.2}

/* Camada de confete e farelos */
.efeitos-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:65}

/* ============================================================
   4. PRÊMIO
   ============================================================ */
.premio{background:var(--vermelho);color:#fff;overflow:hidden}
.premio h2{font-size:1.7rem;margin:0 0 12px;line-height:1.2}
.premio p{color:#FFE2DF}
.premio ul{margin:0;padding-left:20px;color:#FFE2DF;font-size:.95rem}
.premio li{margin-bottom:8px}
.link-regulamento{margin-top:20px}
.link-regulamento a{color:var(--amarelo);font-weight:700}

/* ---------- rodapé ---------- */
.rodape{background:var(--tinta);color:#E8D9C8;font-size:.82rem;line-height:1.45;padding:36px 20px calc(22px + env(safe-area-inset-bottom))}
.rodape__interno{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.rodape__logo{width:118px;height:auto}
.rodape__legal{margin:0;max-width:38ch}
.rodape__legal a{color:var(--amarelo);font-weight:700}
.rodape__redes{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.rodape__redes a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;border:2px solid rgba(255,255,255,.22);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--mola);
}
.rodape__redes a:hover,.rodape__redes a:focus-visible{background:var(--amarelo);border-color:var(--amarelo);color:var(--tinta);transform:translateY(-3px)}
.rodape__redes svg{width:20px;height:20px}
.rodape__credito{max-width:1080px;margin:26px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:center}
.rodape__fullgaz{
  display:inline-flex;align-items:center;gap:10px;
  color:#BFAFA2;text-decoration:none;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:color .2s ease;
}
.rodape__fullgaz:hover,.rodape__fullgaz:focus-visible{color:#fff}
.rodape__fullgaz-logo{height:13px;width:auto;color:#fff}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes kvEntra{from{opacity:0;transform:scale(1.035)}}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}}
@keyframes ctaEntra{from{opacity:0;transform:scale(.7) translateY(10px)}}
@keyframes ctaPulso{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(1.12,1.45);opacity:0}}
@keyframes letreiro{to{transform:translateX(-50%)}}
@keyframes marcar{0%,12%{stroke-dashoffset:36}38%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:-36}}
@keyframes bolha{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-26px);opacity:0}}
@keyframes onda{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes balanca{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes popEntra{from{transform:scale(0);opacity:0}}
@keyframes numPula{0%{transform:scale(1)}40%{transform:scale(1.45);color:var(--amarelo-claro)}100%{transform:scale(1)}}
@keyframes pulsoFase{0%,100%{box-shadow:0 0 0 0 rgba(251,224,106,.75)}55%{box-shadow:0 0 0 9px rgba(251,224,106,0)}}
@keyframes tremer{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes slotEntra{from{transform:scale(.4) rotate(-6deg);opacity:0}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes faixaEntra{0%{transform:translateX(-50%) rotate(-3deg) scale(0);opacity:0}100%{transform:translateX(-50%) rotate(-3deg) scale(1);opacity:1}}
@keyframes faixaPulsa{0%,100%{transform:translateX(-50%) rotate(-3deg) scale(1)}50%{transform:translateX(-50%) rotate(-3deg) scale(1.06)}}
@keyframes boiar{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4%) rotate(1.5deg)}}
@keyframes sombra{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.65}}
@keyframes reflexo{0%,55%{background-position:100% 0}85%,100%{background-position:0% 0}}
@keyframes selo{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(8deg) scale(1.08)}}
@keyframes piscar{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes agitar{0%{transform:rotate(0)}25%{transform:translateX(-3px) rotate(-1.5deg)}75%{transform:translateX(3px) rotate(1.5deg)}100%{transform:rotate(0)}}
@keyframes bolhaTacho{0%{transform:translateY(4px) scale(.4);opacity:0}30%{opacity:1}100%{transform:translateY(-14px) scale(1.1);opacity:0}}
@keyframes espirro{0%,100%{transform:scaleY(1)}40%{transform:scaleY(1.35)}}
@keyframes toastEntra{0%{transform:translate(-50%,-140%);opacity:0}10%,86%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,-140%);opacity:0}}

/* =================== CELULAR (até 599px): escala mais compacta =================== */
@media (max-width:599px){
  html{font-size:15px}
  body{font-size:15.5px}
  .bloco{padding:36px 16px}
  .form-secao{padding-top:20px}
  .cartao{padding:18px 14px;margin-bottom:12px}
  .cartao h3{font-size:1.25rem}
  .cartao .dica{margin-bottom:12px}
  fieldset{margin-bottom:14px}
  legend{font-size:1.05rem;margin-bottom:8px}
  .opcoes{gap:8px}
  .opcao span{grid-template-columns:18px minmax(0,1fr) auto;column-gap:8px;min-height:46px;padding:8px 10px;border-radius:12px;font-size:.93rem;line-height:1.2}
  .opcao span::before{width:18px;height:18px}
  .icone--chip{width:30px;height:25px}
  .icone--embalagem{height:38px}
  .slots{padding:10px;margin-bottom:10px}
  .slots__lista{gap:6px}
  .slot{min-height:44px}
  .grupo-sabor h4{font-size:.85rem;margin-bottom:6px}
  .grupos-sabor{gap:10px}
  .progresso{padding:8px 0}
  .trilha__icone{width:38px;height:38px;font-size:1.05rem;border-width:2px}
  .trilha__barra{top:16px;height:6px}
  .trilha__nome{font-size:.66rem}
  .progresso__texto{margin-top:6px}
  .pill{padding:14px 22px;font-size:1rem}
  .acoes{gap:6px}
  input[type=text],input[type=tel],textarea{padding:12px 14px;margin-bottom:12px}
  .lab__vitrine{padding:14px 10px 8px}
  .lab__pacote{width:150px}
  .manifesto h2{font-size:1.9rem}
  .passo__icone{width:56px;height:56px}
  .passo__icone svg{width:40px;height:40px}
  .passos::before{left:27px}
}

/* Formulário no celular: ainda mais compacto */
@media (max-width:599px){
  .form-secao{padding:14px 10px 28px}
  .form-secao .cartao{padding:16px 12px;border-radius:16px}
  .form-secao .cartao h3{font-size:1.1rem}
  .form-secao .cartao .dica{font-size:.82rem;margin-bottom:10px}
  .fase-tag{font-size:.6rem;padding:3px 9px;margin-bottom:8px}
  .form-secao legend{font-size:.95rem;margin-bottom:6px}
  .form-secao fieldset{margin-bottom:12px}
  .form-secao .opcoes{gap:6px}
  .opcao span{grid-template-columns:16px minmax(0,1fr) auto;column-gap:7px;min-height:40px;padding:6px 9px;border-radius:10px;font-size:.85rem;border-width:1.5px}
  .opcao span::before{width:16px;height:16px;border-width:1.5px}
  .icone--chip{width:26px;height:22px}
  .icone--embalagem{height:32px}
  .slots{padding:8px 10px}
  .slots__titulo{font-size:.9rem}
  .slots__contador{font-size:.72rem}
  .slot{min-height:36px;border-radius:10px}
  .slot__vazio{font-size:.68rem}
  .slot__cheio{font-size:.7rem;padding:4px 18px 4px 7px}
  .grupo-sabor h4{font-size:.78rem;margin-bottom:5px}
  .grupos-sabor{gap:8px}
  .aviso-limite{font-size:.78rem;padding:7px 10px}
  .trilha__icone{width:32px;height:32px;font-size:.9rem}
  .trilha__barra{top:14px;height:5px}
  .trilha__nome{font-size:.6rem}
  .progresso__texto{font-size:.72rem;margin-top:4px}
  .form-secao .pill{padding:12px 20px;font-size:.92rem}
  .form-secao .voltar{font-size:.84rem;padding:6px}
  .form-secao label.campo{font-size:.84rem;margin-bottom:4px}
  .form-secao input[type=text],.form-secao input[type=tel],.form-secao textarea{padding:10px 12px;font-size:.95rem;border-radius:12px;margin-bottom:10px}
  .form-secao textarea{min-height:78px}
  .form-secao .ajuda{font-size:.74rem}
  .aceite{font-size:.8rem;gap:9px}
  .aceite input{width:20px;height:20px}
  .lab{gap:12px}
  .lab__pacote{width:128px}
  .lab__legenda{font-size:.64rem}
  .lab--fase1 .lab__vitrine{padding:10px 12px;gap:12px}
  .lab--fase1 .lab__pacote{width:74px}
  .lab--fase1 .lab__legenda{font-size:.7rem}
  .assinatura__pacote{width:96px}
  .erro{font-size:.8rem;padding:8px 11px}
}

/* =================== TABLET (600px+) =================== */
@media (min-width:600px){
  body{font-size:17.5px}
  .bloco{padding:60px 32px}
  .bloco > .interno{max-width:640px}
  .capa__conteudo{padding:28px 32px 36px}
  .capa__linha{font-size:1.25rem;max-width:36ch}
  .pill{width:auto;min-width:300px}

  .manifesto h2{font-size:2.5rem}

  .form-secao{padding-top:34px}
  .trilha__icone{width:48px;height:48px;font-size:1.35rem}
  .trilha__barra{top:22px}
  .trilha__nome{font-size:.76rem}
  .opcoes--tres{grid-template-columns:repeat(3,1fr)}
  .cartao{padding:30px 28px}
  .cartao h3{font-size:1.5rem}
  .acoes{flex-direction:row-reverse;justify-content:space-between}
  .acoes .pill{min-width:240px}

  .grupos-sabor{grid-template-columns:1fr 1fr;gap:18px}
  .opcoes--sabores{grid-template-columns:1fr}
  .slot__cheio{font-size:.84rem}

  .lab{grid-template-columns:210px 1fr;align-items:start;gap:22px}
  .lab--fase1 .lab__vitrine{flex-direction:column;gap:6px;padding:22px 12px 12px}
  .lab--fase1 .lab__pacote{width:150px}
  .lab--fase1 .lab__legenda{max-width:none;text-align:center;font-size:.72rem}
  .lab--fase1 .opcoes--tres{grid-template-columns:1fr}
  .lab__vitrine{position:sticky;top:120px;padding:22px 12px 12px}
  .lab__pacote{width:176px}
  .assinatura{grid-template-columns:150px 1fr;align-items:start;gap:22px}
  .assinatura__pacote{width:150px;margin:0;position:sticky;top:120px}

  .palco{height:440px}
  .palco.pronto{height:510px}
  .palco__status--final{font-size:1.55rem;padding:12px 42px 14px}
  .ficha{max-width:190px;font-size:.8rem;padding:6px 12px 6px 7px}
  #compartilhar{font-size:1.05rem;padding:17px 28px}
  .revelacao__texto{padding:28px 40px 34px}

  .premio h2{font-size:2rem}
}

/* =================== DESKTOP (1024px+) =================== */
@media (min-width:1024px){
  body{font-size:18px}
  .bloco{padding:88px 48px}

  /* KV de ponta a ponta, ocupando a primeira tela. As laterais que sobram em telas
     muito largas continuam as cores das bordas da arte (vermelho à esquerda, amarelo à direita). */
  .capa{background:linear-gradient(90deg,#A11D1B 50%,#ECC01C 50%)}
  .capa__arte{
    width:min(100%, calc((100vh - var(--letreiro)) * 1.7785));
    width:min(100%, calc((100svh - var(--letreiro)) * 1.7785));
    margin:0 auto;container-type:inline-size;
  }
  /* Frase e botão entram na área vermelha abaixo de "O sabor da gente vira Chips." */
  .capa__conteudo{
    position:absolute;left:29.5%;bottom:1.8%;transform:translateX(-50%);
    width:46%;padding:0;background:none;
    display:flex;flex-direction:column;align-items:center;gap:.55cqw;
  }
  .capa__linha{font-size:max(13px,1.18cqw);max-width:none;white-space:nowrap;margin:0;text-shadow:0 2px 8px rgba(80,0,0,.35)}
  .capa__cta{
    width:auto;min-width:0;max-width:none;
    font-size:max(13px,1.12cqw);padding:.8cqw 2.6cqw;box-shadow:0 .32cqw 0 #B8951A;
  }
  .capa__cta:hover{filter:brightness(1.06)}
  .letreiro__trilho span{font-size:1.1rem}
  .pill:hover{filter:brightness(1.05)}

  /* Manifesto em duas colunas */
  .manifesto > .interno{
    max-width:1080px;
    display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start;
  }
  .manifesto h2{font-size:3.2rem;margin-bottom:18px}
  .manifesto p{font-size:1.1rem}
  .manifesto__passos .como-funciona{margin-top:6px}
  .passo{padding:14px 0}
  .passo__icone{width:72px;height:72px}
  .passos::before{left:35px}

  /* Formulário */
  .form-secao{padding-top:48px;padding-bottom:88px}
  .form-secao > .interno{max-width:860px}
  .cartao{padding:40px 44px}
  .cartao h3{font-size:1.7rem}
  .opcao span{min-height:60px}
  .opcao:hover input:not(:checked) + span{border-color:#D9C3A3;background:#FFFBF3}
  .voltar:hover{color:var(--tinta)}
  .lab{grid-template-columns:250px 1fr;gap:30px}
  .lab--fase1 .lab__pacote{width:180px}
  .lab--fase1 .opcoes--tres{grid-template-columns:repeat(3,1fr)}
  .lab__pacote{width:210px}
  .assinatura{grid-template-columns:190px 1fr;gap:30px}
  .assinatura__pacote{width:190px}
  .palco{height:480px}
  .palco.pronto{height:550px}
  .palco__status--final{font-size:1.8rem}
  .tacho{width:300px}

  /* Prêmio em duas colunas */
  .premio > .interno{
    max-width:1080px;
    display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start;
  }
  .premio h2{font-size:2.6rem;line-height:1.1}
  .premio ul{font-size:1rem}

  .rodape{padding:40px 48px 24px}
  .rodape__interno{flex-direction:row;justify-content:space-between;text-align:left;gap:32px}
  .rodape__legal{max-width:none;flex:1}
  .rodape__credito{justify-content:flex-end}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .revelar,.passos.revelar .passo,.passos.revelar .passo__icone{opacity:1 !important;transform:none !important}
  .passos.revelar::before{transform:none !important}
  .icone-check{stroke-dashoffset:0}
}
