/* =====================================================================
   PÁGINA DE CAPTURA · /streetfighter/lista
   Usa tokens.css + styles.css. Aqui só o layout específico.
   ===================================================================== */

/* ---------- cabeçalho mínimo ---------- */
.lnav {
  position: fixed;
  top: var(--annbar);
  inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--navh);
  display: flex;
  align-items: center;
  background: rgba(7, 6, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.lnav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.lnav__timer { display: flex; align-items: center; gap: var(--space-3); }
.lnav__lbl { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--dim); }
.lnav__cd { padding: 6px 10px; border: 2px solid #fff3d6; background: var(--ink); color: var(--gold); font-size: 14px; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- hero ---------- */
.lhero { min-height: 100svh; padding-top: calc(var(--header) + var(--space-12)); padding-bottom: var(--space-16); text-align: left; }
.lhero .hero__bg::before { background: radial-gradient(55% 55% at 30% 10%, rgba(227, 0, 27, 0.28), transparent 70%), radial-gradient(40% 50% at 80% 60%, rgba(255, 180, 0, 0.1), transparent 70%); }
.lhero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas: "copy card" "perks card";
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}
.perks-list { grid-area: perks; }
.lhero__copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding-top: var(--space-4); }
.lhero__copy .cd { margin-top: 0; }
.lhero__title {
  /* o mínimo governa abaixo de 625px (6.4vw só ultrapassa 40px a partir dali).
     24px é o maior tamanho em que a headline de 4 linhas continua em 4 linhas
     num aparelho de 360px, medido; a 40px ela virava 8. Desktop não muda. */
  font-size: clamp(21px, 6.4vw, 63px);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
  filter: drop-shadow(0 0.125em 0 var(--red-deep)) drop-shadow(0 0 30px rgba(227, 0, 27, 0.3));
}
.lhero__sub { max-width: 46ch; font-size: var(--fs-body-l); color: var(--muted); }

.perks-list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; width: 100%; max-width: 520px; }
.perks-list li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--line); background: rgba(17, 13, 20, 0.7); }
.perks-list b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; background: var(--gold); color: var(--ink); font-size: 13px; font-weight: var(--fw-black); clip-path: var(--slant); }
.perks-list span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); color: var(--muted); }
.perks-list strong { font-size: 15px; font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }


/* ---------- cartão do formulário ---------- */
.lcard {
  grid-area: card;
  position: sticky;
  top: calc(var(--header) + var(--space-5));
  border: var(--border-strong) solid var(--line-2);
  background: rgba(17, 13, 20, 0.94);
  box-shadow: var(--outline-arcade), var(--shadow-float);
}
.lcard__head { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 10px var(--space-5); border-bottom: var(--border-strong) solid var(--line-2); background: rgba(227, 0, 27, 0.08); }
.lcard__step { font-size: 13px; font-weight: var(--fw-heavy); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-2); }

.lform { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.lform em, .field em { font-style: normal; font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: none; color: var(--dim); }

.field__err { min-height: 0; font-size: 13px; font-weight: var(--fw-bold); color: var(--error); }
.field__err:empty { display: none; }
.field.is-invalid input { border-color: var(--error); }
.field input::placeholder { color: var(--dim); }
/* o link da política mudou de lugar (saiu da caixa de aceite, foi para a nota
   abaixo do botão) e leva o mesmo estilo junto */
.check a,
.lform__note a { color: var(--gold); border-bottom: 1px solid currentColor; }
.lform > .field__err { margin-top: calc(var(--space-2) * -1); padding-left: 28px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lform .btn { margin-top: var(--space-2); }
.lform .btn[aria-busy="true"] { pointer-events: none; opacity: 0.8; }
.lform__note { font-size: 12.5px; text-align: center; color: var(--dim); }

/* sucesso */
.lwin { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-6); text-align: center; outline: none; }
.lwin__you {
  font-size: clamp(44px, 6vw, 64px);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 0 var(--red-deep));
  animation: punch 0.7s var(--ease-punch) both;
}
.lwin__title { font-size: 26px; font-weight: var(--fw-black); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; }
.lwin__text { max-width: 38ch; color: var(--muted); }
.lwin__actions { display: grid; gap: var(--space-3); width: 100%; margin-top: var(--space-2); }

/* ---------- seções ---------- */
.lfoot { padding-block: var(--space-10) var(--space-8); }

/* CTA fixo do celular */
.lsticky { position: fixed; inset: auto 0 0; z-index: 100; padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); background: rgba(7, 6, 10, 0.94); border-top: 1px solid var(--line); backdrop-filter: blur(10px); transform: translateY(0); transition: transform var(--dur) var(--ease); }
.lsticky.is-off { transform: translateY(110%); }

/* ---------- responsivo ---------- */
@media (max-width: 960px) {
  .lhero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "card" "perks"; }
  .lhero__copy { align-items: stretch; }
  .lcard { position: relative; top: auto; max-width: 560px; width: 100%; margin-inline: auto; }
  .perks-list { max-width: none; }
}
@media (max-width: 600px) {
  .lhero { min-height: auto; padding-top: calc(var(--header) + var(--space-6)); }
  .lnav__lbl { display: none; }
  .lnav__cd { font-size: 12px; padding: 5px 8px; }
  .lhero__copy { gap: var(--space-5); }
  .perks-list li { padding: var(--space-3); }
  .lform { padding: var(--space-5) var(--space-4); }
  .lfoot { padding-bottom: 96px; }
}
@media (min-width: 961px) {
  .lsticky { display: none; }
  /* Acima de 961px o hero vira duas colunas e a do título encolhe (~520px a 961px,
     ~741px a 1440px), então o tamanho que mantém as 4 linhas é bem menor que o da
     faixa de coluna única. Os dois tetos foram medidos no navegador. */
  .lhero__title { font-size: clamp(30px, 2.9vw, 42px); }
}