/* =============================================================================
   LISTA DE ESPERA · MAGO DO PISM  (Curso do Mago · @magodopism)
   Identidade: flat editorial vector. Tokens do brandkit oficial.
   Proporção ~60/30/10, UMA cor de destaque (butter), cantos retos por padrão,
   pílula (999px) só em rótulo e botões. Sem sombra, sem vidro, sem degradê em texto.
   ============================================================================= */

:root{
  --navy:#101F4B;
  --deep-top:#1E5FC4;
  --deep-bottom:#15489C;
  --butter:#FFE88A;
  --off:#F8F8F5;
  --muted:#5A6488;
  --muted-dark:#A9B3D6;
  /* do brandkit, reservados e não usados nesta página: --electric #0019FF, --cream #F3ECDD, --text-blue #1A4FA8, --line #DDD8CC */

  --font-title:"Sora","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(20px,5.5vw,36px);
  --wrap:1040px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--navy)}
body{
  margin:0;background:var(--navy);color:var(--off);
  font:400 17px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2{font-family:var(--font-title);font-weight:800;letter-spacing:-.025em;line-height:.95;margin:0}
p{margin:0}
.wrap{
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}

/* ------------------------------ HERO ------------------------------ */
/* minimalista: cor chapada (navy #101F4B), tipografia fazendo o trabalho, uma estrela e muito respiro.
   Sem degradê, sem textura de grade, sem marca d'água: o fundo é uma cor só e o título é o elemento mais forte. */
html{scroll-behavior:smooth} /* o botão do hero rola suave até o formulário (#entrar) */
.hero{
  position:relative;overflow:hidden;
  padding:44px 0 52px;
  background:var(--navy);
}

.hero-top{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.star{width:20px;height:20px;flex:none;fill:var(--butter)}
.label{
  display:block;font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-dark);
}

.hero h1{font-size:clamp(42px,12.4vw,98px);max-width:11em;text-wrap:balance}
.hl{color:var(--butter)}
.sub{
  margin-top:28px;max-width:22em;
  font:800 clamp(20px,5.6vw,30px)/1.15 var(--font-title);letter-spacing:-.012em;color:var(--off);
}
.lead{margin-top:14px;max-width:32em;color:var(--muted-dark);font-size:17px;text-wrap:pretty}

/* botão do hero: pílula butter com texto navy (o CTA da marca). Navegação interna até o formulário, não é WhatsApp. */
.hero-cta{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;max-width:380px;min-height:60px;margin-top:32px;padding:0 28px;
  border-radius:999px;background:var(--butter);color:var(--navy);
  font:800 18px/1 var(--font-title);letter-spacing:-.01em;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.hero-cta svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.hero-cta:hover svg{transform:translateY(3px)}
.hero-cta:active{transform:translateY(1px)}
.hero-cta:focus{outline:none}
.hero-cta:focus-visible{outline:3px solid var(--off);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-cta svg{transition:none}
  .hero-cta:hover svg,.hero-cta:active{transform:none}
}

/* ------------------------------ FILTRO ------------------------------ */
.signup{
  padding:40px 0 52px;
  /* degradê azul profundo: só como fundo, vertical */
  background:linear-gradient(180deg,var(--deep-top) 0%,var(--deep-bottom) 100%);
}
.signup-grid{display:grid;gap:32px}
.signup h2{font-size:clamp(32px,8.6vw,52px);text-wrap:balance}
.signup-intro p{margin-top:14px;max-width:30em;color:var(--off)}

.field{margin:0 0 24px;padding:0;border:0;min-width:0}
.lbl{
  display:block;margin:0 0 10px;
  font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--off);
}
.ask{display:block;padding:0;margin:0 0 12px;font:600 18px/1.35 var(--font-body);color:var(--off);text-wrap:balance}

input[type="text"]{
  display:block;width:100%;min-height:60px;padding:0 18px;
  border:2px solid var(--off);border-radius:0;background:var(--off);color:var(--navy);
  font:600 18px/1.2 var(--font-body);-webkit-appearance:none;appearance:none;
}
input[type="text"]::placeholder{color:var(--muted);font-weight:400;opacity:1}
input[type="text"]:focus{outline:none}
input[type="text"]:focus-visible{outline:3px solid var(--butter);outline-offset:3px}

/* SIM / NÃO: radios reais (teclado e leitor de tela), visual em pílula */
.pills{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pills input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pill{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:0 16px;border:2px solid var(--off);border-radius:999px;
  color:var(--off);font:600 16px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.pill:hover{background:rgba(248,248,245,.1)}
.tick{display:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pills input:checked + .pill{background:var(--off);color:var(--navy)}
.pills input:checked + .pill .tick{display:block}
#pism-sim:checked + .pill{background:var(--butter);border-color:var(--butter)}
.pills input:focus-visible + .pill{outline:3px solid var(--butter);outline-offset:3px}

/* botão: destravado = pílula butter com texto navy; travado = contorno apagado + cadeado */
.btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:64px;padding:0 28px;margin-top:8px;
  border:2px solid var(--butter);border-radius:999px;background:var(--butter);color:var(--navy);
  font:800 19px/1 var(--font-title);letter-spacing:-.01em;text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.btn svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn .i-arrow{transition:transform .15s ease}
.btn:hover .i-arrow{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none}
.btn:focus-visible{outline:3px solid var(--off);outline-offset:3px}

.btn[aria-disabled="true"]{background:transparent;border-color:var(--muted-dark);color:var(--muted-dark);cursor:not-allowed}
.btn[aria-disabled="true"]:active{transform:none}
.btn[aria-disabled="true"]:hover .i-arrow{transform:none}
.btn[aria-disabled="true"] .i-arrow{display:none}
.btn:not([aria-disabled="true"]) .i-lock{display:none}

.hint{margin-top:16px;min-height:3em;font-size:15px;line-height:1.5;color:var(--off);text-wrap:balance}

/* ------------------------------ RODAPÉ ------------------------------ */
.foot{background:var(--navy);padding:34px 0 calc(40px + env(safe-area-inset-bottom))}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.mark{font:800 20px/1 var(--font-title);letter-spacing:-.02em;color:var(--off)}
.mark span{color:var(--butter)}
.foot a{color:var(--muted-dark);font-weight:600;font-size:15px;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot a:focus-visible{outline:3px solid var(--butter);outline-offset:3px}

/* ------------------------------ TELAS MAIORES ------------------------------ */
@media (min-width:900px){
  .hero{padding:88px 0 112px}
  .hero-top{margin-bottom:40px;gap:12px}
  .star{width:24px;height:24px}
  .label{font-size:13px}
  .sub{margin-top:36px}
  .lead{font-size:19px}

  .signup{padding:80px 0 96px}
  .signup-grid{grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .signup-intro p{font-size:19px}
  .filter{max-width:520px}
}

@media (prefers-reduced-motion:reduce){
  .btn .i-arrow{transition:none}
  .btn:hover .i-arrow{transform:none}
  .btn:active{transform:none}
}