/* ============================================================
   PLENIT NODE · Página de Registro (sobre theme.css)
   ============================================================ */

/* ---------- HERO ---------- */
.hero{text-align:center;padding:48px 16px 26px;position:relative}
.hero-logo{
    width:min(560px,84vw);height:auto;display:block;margin:0 auto;max-width:100%;
    filter:drop-shadow(0 14px 40px rgba(0,0,0,.65));
    animation:logoIn 1s cubic-bezier(.2,.8,.2,1);
}
@keyframes logoIn{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
.hero-tag{
    color:var(--gold-soft);letter-spacing:.4em;font-size:clamp(.65rem,2vw,.82rem);font-weight:600;
    margin-top:6px;text-transform:uppercase;
}
.hero-scroll{margin-top:26px;display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:.8rem;text-decoration:none}
.hero-scroll i{font-size:1.3rem;color:var(--blue-soft);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* ---------- CONTENEDOR ----------
   Un solo contenedor para todo el sitio, con margen generoso a los lados.
   El padding antes bajaba a 14px, y en móvil el contenido quedaba pegado a
   los bordes. Ahora nunca baja de 20px y crece con la pantalla. */
.wrap{
    max-width:1140px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 48px);
}
.block{padding:42px 0}

/* Pantallas grandes: más aire todavía, sin que el texto se estire de más. */
@media (min-width:1400px){
    .wrap{max-width:1240px;padding:0 56px}
}
/* Móvil: 20px a cada lado es lo mínimo cómodo para leer. */
@media (max-width:520px){
    .wrap{padding:0 20px}
    .block{padding:30px 0}
}

/* ---------- SELECTOR DE NODE ---------- */
.plan-section{margin:0}
.plan-radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.plan-card{display:block;cursor:pointer;height:100%}
.plan-card .hud-fill{padding:24px 20px 22px;text-align:center;position:relative;transition:.25s}
.plan-badge{
    position:absolute;top:14px;left:50%;transform:translateX(-50%);
    font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    padding:4px 14px;border-radius:20px;color:#0a0e1a;white-space:nowrap;
}
.plan-node3 .plan-badge{background:linear-gradient(90deg,var(--blue),var(--blue-soft));box-shadow:0 0 16px rgba(27,157,240,.5)}
.plan-node6 .plan-badge{background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));box-shadow:0 0 16px rgba(212,166,74,.5)}
.plan-coin{width:128px;height:128px;border-radius:50%;object-fit:cover;margin:26px auto 12px;display:block;transition:.3s;filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
.plan-name{display:block;font-family:'Unbounded','Cinzel',serif;font-weight:700;font-size:1.7rem;letter-spacing:.05em;margin-bottom:14px}
.plan-specs{list-style:none;margin:0 auto;padding:0;text-align:left;max-width:280px}
.plan-specs li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);color:var(--muted);font-size:.9rem}
.plan-specs li:last-child{border-bottom:none}
.plan-specs li b{color:#fff;margin-left:auto;font-weight:700}
.plan-pick{
    position:absolute;top:12px;right:12px;width:28px;height:28px;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
    display:grid;place-items:center;background:rgba(0,0,0,.4);color:transparent;font-size:.85rem;transition:.25s;
    box-shadow:inset 0 0 0 1px var(--line);
}

/* NODE 3 azul */
.plan-node3 .plan-name{color:var(--blue-soft)}
.plan-node3 .plan-specs li i{color:var(--blue-soft)}
.plan-card.plan-node3:hover .plan-coin{transform:scale(1.04)}
.plan-radio:checked + .plan-card.plan-node3 .hud-fill{background:linear-gradient(180deg,rgba(13,32,58,.94),rgba(8,16,32,.96))}
.plan-radio:checked + .plan-card.plan-node3 .plan-coin{transform:scale(1.07);filter:drop-shadow(0 0 26px rgba(91,200,255,.65))}
.plan-radio:checked + .plan-card.plan-node3 .plan-pick{background:linear-gradient(160deg,var(--blue),var(--blue-soft));color:#04121f;box-shadow:0 0 16px rgba(27,157,240,.6)}

/* NODE 6 dorado */
.plan-node6 .plan-name{color:var(--gold-soft)}
.plan-node6 .plan-specs li i{color:var(--gold-soft)}
.plan-card.plan-node6:hover .plan-coin{transform:scale(1.04)}
.plan-radio:checked + .plan-card.plan-node6 .hud-fill{background:linear-gradient(180deg,rgba(40,30,8,.92),rgba(20,14,4,.96))}
.plan-radio:checked + .plan-card.plan-node6 .plan-coin{transform:scale(1.07);filter:drop-shadow(0 0 26px rgba(244,212,136,.65))}
.plan-radio:checked + .plan-card.plan-node6 .plan-pick{background:linear-gradient(160deg,var(--gold-deep),var(--gold-soft));color:#1a1304;box-shadow:0 0 16px rgba(212,166,74,.6)}

.plan-error{display:none;color:var(--danger);font-size:.85rem;text-align:center;margin-top:14px}
.plan-section.invalid .plan-error{display:block}

/* aviso de referido */
.ref-banner{
    max-width:420px;margin:0 auto 26px;text-align:center;padding:10px 16px;border-radius:30px;
    background:rgba(27,157,240,.1);border:1px solid rgba(27,157,240,.35);color:#bfe3ff;font-size:.88rem;
}
.ref-banner i{color:var(--blue-soft);margin-right:6px}
.ref-banner b{color:#fff;letter-spacing:.08em}

/* ---------- FORMULARIO ---------- */
.form-wrap .hud-fill{padding:clamp(22px,4vw,40px)}
.card-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.card-kicker i{color:var(--blue-soft)}
.card-title{font-family:'Unbounded','Cinzel',serif;font-size:clamp(1.4rem,3.6vw,1.9rem);margin:8px 0 6px;color:#fff}
.card-sub{color:var(--muted);font-size:.95rem;margin-bottom:24px}

.form-label{font-size:.8rem;font-weight:600;color:#c7d2ef;margin-bottom:6px}
.form-label i{color:var(--gold);margin-right:5px}
.form-control,.form-select{
    background:rgba(5,9,18,.75);border:1px solid var(--line);color:var(--text);
    border-radius:12px;padding:.72rem .9rem;transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-control::placeholder{color:#566083}
.form-control:focus,.form-select:focus{background:rgba(5,9,18,.95);border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(27,157,240,.18);color:#fff}
.form-select option{background:var(--navy-2);color:var(--text)}
.hint{display:block;margin-top:6px;color:#6b769a;font-size:.78rem}
.wallet-input{position:relative}
.wallet-check{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ok);font-size:1.1rem}

/* zona conexión */
.connect-zone{margin-top:22px}
.wallet-status{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;color:var(--ok);font-size:.85rem;font-weight:500}
.wallet-status .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}

/* activación NFT / pago */
.activation-box{border-top:1px dashed var(--line);padding-top:20px;margin-top:22px}
.act-state{display:flex;gap:14px;align-items:flex-start;background:rgba(5,9,18,.55);border:1px solid var(--line);border-radius:14px;padding:16px}
.act-icon{flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem}
.act-icon.ok{background:rgba(55,214,122,.12);color:var(--ok)}
.act-icon.pay{background:rgba(212,166,74,.12);color:var(--gold)}
.act-state h6{margin:0 0 4px;color:#fff;font-weight:700}
.act-state p{margin:0;color:var(--muted);font-size:.9rem}
.act-state a{color:var(--blue-soft);text-decoration:none}

/* ---- Ejemplo bajo las tarjetas de plan ---- */
.plan-ej{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
    font-size:.78rem;color:var(--muted);text-align:center}

/* ---- Resumen del ciclo en el registro ---- */
.resumen{margin-top:20px;padding:18px;border-radius:14px;border:1px solid var(--line);
    background:rgba(5,9,18,.5);opacity:.55;transition:opacity .25s ease,border-color .25s ease}
.resumen.listo{opacity:1;border-color:rgba(212,166,74,.3)}
.resumen-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.resumen-head b{display:block;font-family:'Unbounded','Cinzel',serif;font-size:1.15rem;color:#fff;letter-spacing:.04em}
.resumen-head small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.resumen-list{list-style:none;margin:0;padding:0}
.resumen-list li{display:flex;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);
    color:var(--muted);font-size:.88rem}
.resumen-list li b{margin-left:auto;color:#fff;font-weight:700}
.resumen-list .resumen-total{border-bottom:none;border-top:1px solid var(--line);margin-top:4px;padding-top:13px}
.resumen-list .resumen-total b{font-size:1.2rem;color:var(--gold-soft)}
.resumen-cuota{margin-top:14px;padding:14px;border-radius:12px;text-align:center;
    border:1px solid rgba(212,166,74,.3);background:rgba(212,166,74,.07)}
.resumen-cuota small{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--muted)}
.resumen-cuota small b{color:#dfe7f8}
.resumen-cuota>div{font-family:'Unbounded','Cinzel',serif;font-weight:800;font-size:1.7rem;
    color:var(--gold-soft);line-height:1.3;margin:2px 0}
.resumen-nota{margin:14px 0 0;padding:12px 14px;border-radius:10px;font-size:.8rem;line-height:1.55;
    color:#c7d2ef;border:1px solid rgba(255,107,107,.25);background:rgba(255,107,107,.06)}
.resumen-nota i{color:#ff9d6b;margin-right:6px}
.resumen-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.85rem;
    color:var(--blue-soft);text-decoration:none}
.resumen-link:hover{color:#fff;text-decoration:underline}

.pay-note{text-align:center;color:#6b769a;font-size:.8rem;margin-top:18px}
.pay-note i{color:var(--gold)}
.pay-note code{background:var(--navy-2);color:var(--blue-soft);padding:1px 7px;border-radius:6px;border:1px solid var(--line)}
.pay-note .pay-addr{display:inline-block;margin-top:6px;word-break:break-all;font-size:.82rem;
    letter-spacing:.02em;color:var(--gold-soft)}
.pay-note small{display:block;margin-top:7px;color:#5c6786;font-size:.74rem}

/* alertas */
.alert-box{border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:10px}
.alert-box.ok{background:rgba(55,214,122,.1);border:1px solid rgba(55,214,122,.4);color:#a8f0c6}
.alert-box.err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.4);color:#ffc1c1}
.alert-box.info{background:rgba(27,157,240,.1);border:1px solid rgba(27,157,240,.4);color:#bfe3ff}

/* botón submit ocupa estructura .btn-node con spinner/texto */
#btnSubmit .btn-spinner,#btnSubmit .btn-text{display:inline-flex;align-items:center;gap:10px}

@media (max-width:576px){
    .plan-coin{width:104px;height:104px}
    .plan-name{font-size:1.4rem}
}

/* Resumen del registro: cuándo arranca el nodo y cuándo llega el primer cobro. */
.resumen-lista{list-style:none;padding:0;margin:12px 0 0}
.resumen-lista li{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:7px 0;border-top:1px solid rgba(120,160,220,.12);
    color:var(--muted);font-size:.86rem;
}
.resumen-lista li b{color:#fff;font-weight:700}