/* CLUBE 4236 · base + formulário + estados + sucesso, comum a /4236 e /4236/cadastro.
 * Tokens (--o-*) e peças (.o-btn, .o-card, .o-lock) vêm de /assets/clube/onda.css. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
body{font-family:var(--o-body);background:var(--o-ink);color:var(--o-bone);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
a{color:var(--o-gold1);text-underline-offset:3px}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--o-gold1);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 32px}}
.bod{font-family:var(--o-display)}
h1,h2{font-family:var(--o-display);font-weight:400;line-height:1.06;letter-spacing:-.01em;color:var(--o-bone)}
h1 i,h2 i{font-style:italic;background:var(--o-gold);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.o-btn,.o-btn-ghost{text-align:center}

/* cartão: legenda embaixo */
.card-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;font-size:13px;color:var(--o-mute)}
.card-cap .o-lbl{font-size:11px}
.o-card .bot b[data-card-name]{max-width:15ch}
/* o cartão não mostra mais faixa de fundador: o selo legado nunca aparece */
.o-card [data-card-wave]{display:none!important}

/* escassez é só o prazo: preço de fundador pra quem entrar até o fim das inscrições */
.deadline{margin-top:14px;padding:12px 14px;border:1px solid var(--o-line-gold);border-radius:2px;background:rgba(201,165,74,.06);color:#c3cad6;font-size:14px;line-height:1.5}
.deadline b{color:var(--o-gold1);font-weight:700}

/* formulário */
.f-row{margin-bottom:18px}
.f-row label,.f-row legend{display:block;font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#c3cad6;margin-bottom:8px}
.f-row label .opt{color:var(--o-mute2);font-weight:600;letter-spacing:.08em}
.f-row input[type=text],.f-row input[type=email],.f-row input[type=tel]{width:100%;font-family:var(--o-body);font-size:16px;color:var(--o-bone);background:#0d1322;border:1px solid rgba(232,235,241,.16);border-radius:2px;padding:14px;min-height:52px;transition:border-color .15s}
.f-row input::placeholder{color:#5f6a80}
.f-row input:focus{outline:none;border-color:var(--o-gold2);box-shadow:0 0 0 3px rgba(201,165,74,.18)}
.f-row input[aria-invalid=true]{border-color:#ff9a8a}
.f-row fieldset{border:0}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.yn label{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid rgba(232,235,241,.16);border-radius:2px;cursor:pointer;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--o-bone);margin:0;background:#0d1322}
.yn input{position:absolute;opacity:0;width:1px;height:1px}
.yn label:has(input:checked){border-color:var(--o-gold2);background:rgba(201,165,74,.08);color:var(--o-gold1)}
.yn label:has(input:focus-visible){outline:2px solid var(--o-gold1);outline-offset:2px}
.hint{font-size:12.5px;color:var(--o-mute);margin-top:6px}
/* legado (V1): cartões de rádio da escolha de entrada; sem uso desde a V2 de 19/10, entrada única pela Coinbase */
.paths{display:grid;gap:10px}
.path{position:relative;display:block;cursor:pointer;margin:0!important;text-transform:none!important;letter-spacing:0!important;font-weight:400!important;font-size:14px!important;color:#c3cad6!important}
.path input{position:absolute;opacity:0;width:1px;height:1px}
.path-b{position:relative;display:block;padding:16px 16px 14px 50px;border:1px solid rgba(232,235,241,.16);border-radius:4px;background:#0d1322;transition:border-color .2s,background-color .2s,box-shadow .2s}
.path-b::before{content:'';position:absolute;left:16px;top:18px;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(232,235,241,.35);background:#0a0e1a;transition:border-color .2s,box-shadow .2s}
.path-b b{display:block;color:var(--o-bone);font-size:16px;font-weight:700;line-height:1.3;padding-right:4px}
.path-p{display:block;margin-top:4px;font-family:var(--o-display);font-weight:700;font-size:19px;line-height:1.2;color:var(--o-bone)}
.path-s{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--o-mute)}
.path-tag{position:absolute;top:-9px;right:12px;font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#141006;background:var(--o-gold);padding:3px 8px;border-radius:99px}
.path-cb .path-b{border-color:var(--o-line-gold);background:radial-gradient(120% 120% at 100% 0%,rgba(201,165,74,.10),transparent 60%),#0d1322}
.path-cb .path-p{background:var(--o-gold);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%;padding-right:.04em}
.path:has(input:checked) .path-b{border-color:var(--o-gold2);background-color:rgba(201,165,74,.08);box-shadow:0 0 0 1px var(--o-gold2) inset}
.path:has(input:checked) .path-b::before{border-color:var(--o-gold1);box-shadow:inset 0 0 0 5px #0a0e1a,inset 0 0 0 10px var(--o-gold1)}
.path:has(input:focus-visible) .path-b{outline:2px solid var(--o-gold1);outline-offset:2px}
.path .pub{margin-left:0}
/* pós-cadastro do caminho sem Coinbase: pagar a 1ª mensalidade */
.ok-pay{max-width:460px;margin:0 auto 22px;text-align:left;border:1px solid var(--o-gold2);border-radius:6px;padding:18px 18px 16px;background:radial-gradient(120% 120% at 100% 0%,rgba(201,165,74,.14),transparent 60%),#10172a}
.ok-pay .o-lbl{display:block}
.ok-pay-t{font-family:var(--o-display);font-size:21px;line-height:1.25;color:var(--o-bone);margin:6px 0 12px}
.ok-pay .o-btn{width:100%}
.ok-pay-n{margin-top:10px;font-size:13.5px;color:#c3cad6;line-height:1.5}
.ok-pay-n.err{color:#ffc9c0}
.ck{display:flex!important;gap:12px;align-items:flex-start;cursor:pointer;font-size:14px!important;color:#c3cad6!important;text-transform:none!important;letter-spacing:0!important;font-weight:400!important;line-height:1.5}
.ck input{flex-shrink:0;width:22px;height:22px;margin-top:0;accent-color:#c9a54a}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.f-err{display:none;margin:4px 0 16px;padding:12px 14px;border-radius:2px;border:1px solid rgba(255,154,138,.45);background:rgba(255,154,138,.07);color:#ffc9c0;font-size:14px}
.f-err.on{display:block}
.f-submit{width:100%}
.f-fine{margin-top:14px;font-size:12px;color:var(--o-mute);text-align:center}
.f-fine a{color:var(--o-mute)}

/* estados */
.state{display:none;text-align:center;padding:8px 0}
.state.on{display:block}
.state h3{font-family:var(--o-display);font-weight:400;font-size:clamp(26px,6vw,34px);line-height:1.1;margin:10px 0}
.state p{color:#c3cad6;max-width:46ch;margin:0 auto 12px}
.state .o-btn-ghost{margin-top:10px}

/* sucesso */
.ok-head{font-family:var(--o-display);font-weight:400;font-size:clamp(26px,6.4vw,36px);line-height:1.1;margin:10px 0 20px}
.ok-head i{font-style:italic;background:var(--o-gold);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
#ok-card{max-width:460px;margin:0 auto;text-align:left}
.ok-actions{display:flex;flex-direction:column;gap:10px;max-width:460px;margin:18px auto 0}
.ok-note{margin-top:14px;font-size:14px;color:var(--o-mute)}
.ok-steps{list-style:none;text-align:left;margin:30px auto 8px;max-width:460px;counter-reset:s;border-top:1px solid var(--o-line)}
.ok-steps li{counter-increment:s;position:relative;padding:16px 0 16px 50px;border-bottom:1px solid var(--o-line);color:#c3cad6;font-size:15px}
.ok-steps li::before{content:counter(s);position:absolute;left:4px;top:10px;font-family:var(--o-display);font-weight:700;font-size:30px;line-height:1;background:var(--o-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.ok-steps b{color:var(--o-bone)}

.pub{display:inline-block;font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--o-mute);border:1px solid var(--o-line);border-radius:2px;padding:1px 6px;margin-left:4px;vertical-align:1px}

/* ── microinterações (botões e campos) ── */
.o-btn{position:relative;overflow:hidden;transition:background-position .5s ease,transform .18s ease,box-shadow .25s ease}
.o-btn::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);pointer-events:none;opacity:0}
.o-btn:hover{transform:translateY(-1px);box-shadow:0 18px 46px -14px rgba(201,165,74,.8),inset 0 1px 0 rgba(255,255,255,.45)}
.o-btn:hover::after{animation:btnShine .9s ease}
@keyframes btnShine{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:130%;opacity:0}}
.o-btn-ghost{transition:border-color .2s,background-color .2s,color .2s}
.o-btn-ghost:hover{background:rgba(201,165,74,.07)}
.f-row label{transition:color .2s}
.f-row:focus-within>label{color:var(--o-gold1)}
.f-row input[type=text],.f-row input[type=email],.f-row input[type=tel]{transition:border-color .2s,box-shadow .2s,background-color .2s}
.f-row.ok input{border-color:rgba(201,165,74,.5);padding-right:44px;background:#0d1322 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23c9a54a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center}
.f-row.bad input{border-color:#ff9a8a;box-shadow:0 0 0 3px rgba(255,154,138,.12)}
.f-msg{font-size:12.5px;color:#ffc9c0;margin-top:6px;min-height:0}
.f-msg:empty{display:none}
.f-row.bad .hint{display:none}

/* ── cartão vivo (fx.js) ── */
.fx-tilt{will-change:transform;transform-style:preserve-3d;backface-visibility:hidden}
.fx-holo{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,70%) var(--my,25%),rgba(255,236,180,.22),transparent 45%),
  linear-gradient(115deg,transparent calc(var(--hx,50%) - 26%),rgba(232,200,114,.08) calc(var(--hx,50%) - 12%),rgba(255,244,210,.24) var(--hx,50%),rgba(201,165,74,.08) calc(var(--hx,50%) + 12%),transparent calc(var(--hx,50%) + 26%))}
.fx-flip{animation:fxFlip 1s cubic-bezier(.2,.75,.2,1) both}
.fx-flip .fx-holo{animation:fxGlint 1.2s ease .5s both}
@keyframes fxFlip{0%{transform:perspective(1000px) rotateY(-96deg) scale(.9);opacity:0}45%{opacity:1}75%{transform:perspective(1000px) rotateY(8deg) scale(1.01)}100%{transform:perspective(1000px) rotateY(0) scale(1)}}
@keyframes fxGlint{0%{--hx:-30%;opacity:1}100%{--hx:130%;opacity:1}}
@property --hx{syntax:'<percentage>';inherits:true;initial-value:50%}

/* ── revelação ao rolar: só existe depois que o JS marca o que está fora da tela ── */
[data-rv]{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
[data-rv="2"]{transition-delay:.08s}[data-rv="3"]{transition-delay:.16s}[data-rv="4"]{transition-delay:.24s}
.rv-wait{opacity:0;transform:translate3d(0,26px,0)}

/* ── selo de fase (antecipado / lançamento / aberto) ── */
.phase{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;border:1px solid var(--o-line-gold);border-radius:99px;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#e6d9b4;background:rgba(201,165,74,.06)}
.phase::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--o-gold1);box-shadow:0 0 0 0 rgba(232,200,114,.6);animation:dotPulse 2.2s ease-out infinite}
.phase.vip{color:#0a0e1a;background:var(--o-gold);border-color:transparent}
.phase.vip::before{background:#0a0e1a;box-shadow:none;animation:none}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(232,200,114,.55)}80%,100%{box-shadow:0 0 0 9px rgba(232,200,114,0)}}

/* ── bônus: contagem e letras miúdas (comum às duas páginas) ── */
.bn-cd{display:flex;gap:14px}
.bn-cd>div{text-align:center;min-width:38px}
.bn-cd b{display:block;font-family:var(--o-display);font-weight:700;font-size:30px;line-height:1;color:var(--o-bone)}
.bn-cd span{font-weight:700;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--o-mute)}
.fine{font-size:12px;line-height:1.55;color:#8a93a6;border-top:1px solid var(--o-line);padding-top:14px;margin-top:18px}
.fine b{color:#c3cad6;font-weight:700}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.rv-wait{opacity:1!important;transform:none!important}.fx-tilt{transform:none!important}}
@media(max-width:479px){.card-cap>span:last-child{display:none}}
@media(max-width:420px){.f-submit{letter-spacing:.08em;padding:0 14px;font-size:13px}}

/* sem JS: não mostra relógio parado em 00 */
html:not(.fx-on) .cd-n,html:not(.fx-on) .bn-cd{display:none}

/* pós-cadastro: o sistema mostra o que acabou de fazer, item por item */
.ok-boot{max-width:460px;margin:0 auto 22px;text-align:left;border:1px solid var(--o-line-gold);border-radius:6px;padding:16px 18px 6px;background:linear-gradient(180deg,rgba(27,39,66,.55),rgba(10,14,26,.6));position:relative;overflow:hidden}
.ok-boot::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(232,200,114,.025) 3px 4px);pointer-events:none}
.ob-bar{height:2px;background:rgba(232,235,241,.08);border-radius:2px;overflow:hidden;margin-bottom:12px}
.ob-bar i{display:block;height:100%;width:100%;background:var(--o-gold);transform-origin:left;transform:scaleX(0)}
.ok-boot.run .ob-bar i{animation:obBar 1.9s cubic-bezier(.2,0,0,1) forwards}
@keyframes obBar{to{transform:scaleX(1)}}
.ob-list{list-style:none;margin:0;padding:0}
.ob-list li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--o-line);opacity:0;transform:translate3d(0,6px,0)}
.ob-list li:first-child{border-top:0}
.ok-boot.run .ob-list li{animation:obIn .45s cubic-bezier(.2,0,0,1) var(--d) forwards}
@keyframes obIn{to{opacity:1;transform:none}}
.ob-list b{display:block;font-weight:700;font-size:15px;color:var(--o-bone);line-height:1.3}
.ob-list small{display:block;font-size:13px;color:var(--o-mute);font-variant-numeric:tabular-nums}
.ob-ic{width:20px;height:20px;border-radius:50%;margin-top:1px;position:relative;border:1px solid var(--o-line-gold)}
.ob-ok .ob-ic{background:var(--o-gold);border-color:transparent}
.ob-ok .ob-ic::after{content:'';position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #141006;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ob-warn .ob-ic{border-color:#e58b7b}
.ob-warn .ob-ic::after{content:'!';position:absolute;inset:0;text-align:center;font-weight:700;font-size:12px;line-height:18px;color:#e58b7b}
.ob-next .ob-ic::after{content:'';position:absolute;inset:4px;border-radius:50%;border:2px solid var(--o-gold1);border-right-color:transparent;animation:obSpin 1s linear infinite}
.ob-next b{color:var(--o-gold1)}
@keyframes obSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ob-list li{opacity:1;transform:none}.ob-bar i{transform:none}.ob-next .ob-ic::after{animation:none}}

/* V2 (19/10): o rótulo "Quero ser fundador do Clube" cabe numa linha no celular */
@media(max-width:440px){.o-btn{letter-spacing:.08em;padding-left:16px;padding-right:16px}}