/* Páginas de interesse da BF 2026. Cada página define --cor no <body> (cor da escola no ciclo).
   Estrutura inspirada na captação Black Subido + Viver de IA (out/2026): faixa corrida no topo,
   título condensado gigante, faixa de fatos com divisórias, cartão de formulário com campos em pílula e selo. */
:root{
  --bg:#050506; --ink:#f2f2ef; --ink-2:#d6d6d2; --muted:#a3a3ab; --faint:#62626a;
  --card:#0c0c0f; --field:#141418; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06);
  --red:#ff8a80;
  --construir:#f08a55; --analisar:#3cc4ae; --decidir:#9792ff;
  --display:'Anton',Impact,sans-serif; --sans:'Geist',system-ui,sans-serif; --mono:'Geist Mono',monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;background:var(--bg);position:relative}
body::before{ /* grade técnica + brilho na cor da escola */
  content:"";position:absolute;inset:0 0 auto 0;height:900px;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 55% at 78% 18%, color-mix(in srgb, var(--cor) 22%, transparent), transparent 70%),
    linear-gradient(var(--line-2) 1px, transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px) 0 0/72px 72px;
  -webkit-mask-image:radial-gradient(80% 70% at 60% 20%, #000 30%, transparent 80%);
          mask-image:radial-gradient(80% 70% at 60% 20%, #000 30%, transparent 80%);
}
body > *{position:relative;z-index:1}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}

/* faixa corrida */
.faixa{background:var(--cor);color:#050506;overflow:hidden;white-space:nowrap;
  font-family:var(--display);font-size:15px;letter-spacing:.02em;text-transform:uppercase;line-height:30px;height:30px}
.faixa .trilho{display:inline-flex;animation:corre 40s linear infinite}
.faixa span{padding:0 14px}
.faixa b{font-weight:400;opacity:.55;font-size:10px;vertical-align:2px}
@keyframes corre{to{transform:translateX(-50%)}}

/* topo */
.hero{display:grid;grid-template-columns:1fr;gap:64px;padding:44px 0 56px;align-items:center}
@media(min-width:900px){.hero{grid-template-columns:1.15fr .85fr;gap:56px;padding:72px 0 80px}}
.pilula{display:inline-block;border:1px solid var(--cor);color:var(--cor);border-radius:99px;
  padding:5px 16px;font-family:var(--mono);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase}
/* --w no <body> = largura da linha mais larga do título, em em (medida na Anton). O título encolhe
   até essa linha caber inteira na coluna, então o nome da escola nunca quebra. */
.texto{container-type:inline-size}
h1{margin:20px 0 0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:min(6.4rem, calc(100cqw / (var(--w, 7) * 1.03)));line-height:.92;letter-spacing:-.005em;color:var(--ink)}
h1 .nome{white-space:nowrap}
h1 em{font-style:normal;color:var(--cor)}
.lead{margin:24px 0 0;font-size:1.15rem;font-weight:600;line-height:1.4;max-width:30ch}
.lead em{font-style:normal;color:var(--cor)}
.quem{margin:12px 0 0;color:var(--muted);font-size:.95rem}

.fatos{margin:30px 0 0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;border-top:1px solid var(--line)}
.fatos div{padding:14px 22px 0 0;margin-right:22px;border-right:1px solid var(--line);
  font-family:var(--display);text-transform:uppercase;font-size:clamp(.95rem,3.4vw,1.25rem);line-height:1.1}
.fatos div:last-child{border-right:none;margin-right:0;padding-right:0}
.fatos small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--muted);margin-bottom:4px}

/* cartão do formulário */
.cartao{position:relative;background:linear-gradient(180deg, color-mix(in srgb, var(--cor) 9%, var(--card)), var(--card) 55%);
  border:1px solid var(--line);border-radius:22px;padding:30px 22px 22px}
@media(min-width:560px){.cartao{padding:34px 30px 26px}}
.selo{position:absolute;top:-44px;right:-6px;width:92px;height:92px}
@media(min-width:900px){.selo{width:124px;height:124px;top:-58px;right:-34px}}
.selo .disco{fill:#050506;stroke:var(--cor);stroke-width:1.5}
.selo text{font-family:var(--mono);font-size:7.6px;letter-spacing:.24em;fill:var(--ink);text-transform:uppercase}
.selo .arco{fill:none;stroke-width:5;stroke-linecap:round}
.selo .apagado{stroke:rgba(255,255,255,.14)}
.selo .aceso{stroke:var(--cor);filter:drop-shadow(0 0 4px var(--cor))}
.selo .gira{transform-origin:60px 60px;animation:gira 30s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.cartao h2{margin:0 0 18px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.6rem;line-height:1;max-width:12ch}
.f{margin:0 0 12px}
.f label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
input{width:100%;background:var(--field);border:1px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:16px;padding:15px 20px;border-radius:99px;transition:border-color .15s ease}
input:focus{outline:none;border-color:var(--cor)}
input::placeholder{color:var(--faint)}
.bad input{border-color:var(--red)}
.msg{display:none;color:var(--red);font-size:.82rem;margin:6px 0 0 20px}
.bad .msg{display:block}
.btn{margin-top:6px;width:100%;border:none;border-radius:99px;padding:18px 24px;cursor:pointer;
  background:var(--cor);color:#050506;font-family:var(--sans);font-weight:700;font-size:.92rem;
  letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 28px color-mix(in srgb, var(--cor) 35%, transparent)}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn[disabled]{opacity:.65;cursor:wait}
.nota{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;color:var(--muted);font-size:.8rem;line-height:1.45}
.nota svg{flex:none;margin-top:2px;color:var(--cor)}
.erro{display:none;margin:14px 0 0;border:1px solid rgba(255,138,128,.45);background:rgba(255,138,128,.07);
  color:var(--ink-2);padding:12px 16px;border-radius:14px;font-size:.9rem}
.erro.on{display:block}

#ok{display:none;padding:8px 0 4px}
#ok.on{display:block;animation:in .4s ease}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#ok h2{font-size:2.2rem;max-width:none}
#ok h2 em{font-style:normal;color:var(--cor)}
#ok p{color:var(--ink-2);margin:0}
.hide{display:none}

/* segunda dobra: a bandeira */
.bandeira{border-top:1px solid var(--line-2);padding:72px 0 88px;text-align:center}
.bandeira h2{margin:0 auto;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,6.4vw,3.6rem);line-height:.98;max-width:18ch}
.bandeira h2 em{font-style:normal;color:var(--cor)}
.bandeira .intro{margin:22px auto 0;color:var(--muted);font-size:1.02rem;max-width:52ch}
.bandeira .intro strong{color:var(--ink);font-weight:600}
.pilares{margin:44px auto 0;display:grid;grid-template-columns:1fr;gap:16px;max-width:860px;text-align:left}
@media(min-width:720px){.pilares{grid-template-columns:1fr 1fr}}
.pilar{background:var(--card);border:1px solid var(--line);border-top:2px solid var(--cor);border-radius:18px;padding:26px 24px}
.pilar .n{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--cor)}
.pilar h3{margin:14px 0 0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;line-height:1}
.pilar p{margin:10px 0 0;color:var(--muted);font-size:.96rem}
.btn.link{display:inline-block;width:auto;margin-top:44px;padding:18px 34px;text-decoration:none}

footer{margin-top:auto;border-top:1px solid var(--line-2);padding:22px 0;color:var(--faint);font-size:.76rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

@media (prefers-reduced-motion: reduce){.faixa .trilho,.selo .gira,#ok.on{animation:none}}