/* ── CUENTA · alta, login, pago y verificación ───────────────────
   No son páginas de marketing: son formularios. Misma identidad y el
   mismo fondo, pero la maqueta es una hoja centrada y angosta, con la
   marca arriba y nada que distraiga del campo que hay que llenar.
   Depende de pieza5-legales.css (tokens, fondo, botones). */
.cuenta{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:clamp(24px,4vw,48px) var(--pad) clamp(40px,6vw,72px);position:relative;z-index:1}
.cuenta>.marca-top{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--c100);margin-bottom:clamp(26px,4vw,44px)}
.cuenta>.marca-top i.acc{font-style:normal;color:var(--v)}
.hoja{width:100%;max-width:520px;border:1px solid var(--g800);border-radius:8px;background:linear-gradient(180deg,var(--vSoft),transparent 46%),var(--g900);padding:clamp(24px,3.4vw,40px);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.hoja.ancha{max-width:940px}
.hoja h1{font-family:var(--display);font-size:clamp(30px,4.4vw,46px);line-height:.98;letter-spacing:-.2px;text-transform:uppercase;margin-bottom:12px}
.hoja .sub{font-size:15.5px;line-height:1.62;color:var(--c300);text-wrap:pretty}
.hoja .pie-h{margin-top:clamp(22px,2.6vw,30px);padding-top:18px;border-top:1px solid rgba(245,244,242,.07);font-size:14.5px;line-height:1.6;color:var(--c500);text-wrap:pretty}
.hoja .pie-h a{color:var(--vTxt);text-decoration:underline;text-decoration-color:var(--vB);text-underline-offset:3px}

/* ── Campos ────────────────────────────────────────────────────── */
.campos{display:flex;flex-direction:column;gap:15px;margin-top:clamp(20px,2.6vw,28px)}
.fila2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:15px}
.campo-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo-f label{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c500)}
.campo-f input,.campo-f select{font-family:inherit;font-size:15.5px;color:var(--c100);background:var(--g950);border:1px solid var(--g700);border-radius:3px;padding:13px 14px;min-height:48px;width:100%;transition:border-color 180ms ease,box-shadow 180ms ease}
.campo-f input::placeholder{color:var(--g700)}
.campo-f input:focus,.campo-f select:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 3px var(--vSoft)}
.campo-f .par{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.campo-f select{min-width:96px;width:auto;cursor:pointer}
.ayudita{font-size:13px;line-height:1.55;color:var(--c500)}
.cta-full{width:100%;justify-content:center;margin-top:clamp(18px,2.4vw,24px)}
.cta-full[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.legal-f{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--c500);text-wrap:pretty}
.legal-f a{color:var(--c300);text-decoration:underline;text-decoration-color:var(--g700)}
.legal-f a:hover{color:var(--vTxt)}

/* ── Stepper del alta ──────────────────────────────────────────── */
.stepper{display:flex;align-items:center;gap:7px;margin-bottom:clamp(18px,2.4vw,26px)}
.stepper .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c500);white-space:nowrap;margin-right:5px}
.stepper .barra{display:flex;gap:5px;flex:1;min-width:0}
/* en --g800 los tramos apagados medían 1,2:1 y la barra se leía como un
   guion suelto: no se veía cuánto faltaba */
.stepper .barra i{flex:1;height:3px;border-radius:2px;background:var(--g700);transition:background 320ms ease}
.stepper .barra i.on{background:var(--v)}
.paso-w[hidden]{display:none}

/* ── Código de verificación ────────────────────────────────────── */
.codigo{display:flex;gap:8px;margin-top:clamp(18px,2.4vw,26px)}
.codigo input{flex:1;min-width:0;text-align:center;font-family:var(--mono);font-size:22px;letter-spacing:.05em;color:var(--c100);background:var(--g950);border:1px solid var(--g700);border-radius:3px;min-height:60px;transition:border-color 180ms ease,box-shadow 180ms ease}
.codigo input:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 3px var(--vSoft)}
.reenviar{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:none;border:0;padding:0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--vTxt);cursor:pointer}
.reenviar:hover{color:var(--v)}

/* ── Planes en el alta ─────────────────────────────────────────── */
.planes-w{display:flex;flex-direction:column;gap:11px;margin-top:clamp(18px,2.4vw,26px)}
.plan-w{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:13px;align-items:center;padding:16px 17px;border:1px solid var(--g800);border-radius:4px;background:var(--g950);cursor:pointer;transition:border-color 200ms ease,background 200ms ease}
.plan-w:hover{border-color:var(--g700)}
.plan-w.on{border-color:var(--v);background:linear-gradient(180deg,var(--vSoft),transparent 70%),var(--g900)}
.plan-w .radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--g700);display:grid;place-items:center;transition:border-color 200ms ease}
.plan-w.on .radio{border-color:var(--v)}
.plan-w.on .radio::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--v)}
.plan-w b{display:block;font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:.2px;text-transform:uppercase;line-height:1}
.plan-w span.d{display:block;font-size:13.5px;line-height:1.5;color:var(--c500);margin-top:4px;text-wrap:pretty}
.plan-w .pr{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.5px;white-space:nowrap}
.plan-w .pr em{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c500);margin-top:5px}

/* ── Identidad · las dos opciones reales ──────────────────────── */
.opc{display:flex;flex-direction:column;gap:11px;margin-top:clamp(18px,2.4vw,26px)}
.op{padding:18px;border:1px solid var(--g800);border-radius:4px;background:var(--g950);cursor:pointer;transition:border-color 200ms ease,background 200ms ease}
.op:hover{border-color:var(--g700)}
.op.on{border-color:var(--v);background:linear-gradient(180deg,var(--vSoft),transparent 70%),var(--g900)}
.op.off{opacity:.5;cursor:not-allowed}
.op .top{display:flex;align-items:baseline;gap:11px}
.op b{font-size:16px;font-weight:600;letter-spacing:-.1px;color:var(--c100)}
.op .tag{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c500);border:1px solid var(--g700);border-radius:3px;padding:3px 7px;white-space:nowrap}
.op.on .tag{color:var(--vTxt);border-color:var(--vB);background:var(--vSoft)}
.op p{font-size:14px;line-height:1.6;color:var(--c300);margin-top:7px;text-wrap:pretty}
.op ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:11px}
.op li{display:block;position:relative;padding-left:15px;font-size:13.5px;line-height:1.55;color:var(--c500)}
.op li::before{content:'';position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--v)}
.consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;margin-top:14px;padding-top:14px;border-top:1px solid rgba(245,244,242,.07)}
.consent input{width:20px;height:20px;accent-color:var(--v);margin-top:1px;cursor:pointer}
.consent span{font-size:13px;line-height:1.6;color:var(--c300);text-wrap:pretty}
.consent b{color:var(--c100)}
.consent a{color:var(--vTxt);text-decoration:underline;text-decoration-color:var(--vB);text-underline-offset:2px}
.estado{display:flex;align-items:center;gap:11px;margin-top:16px;padding:14px 16px;border:1px solid var(--vB);border-radius:4px;background:var(--vSoft);font-size:14.5px;line-height:1.5;color:var(--c100)}
.estado.ok{border-color:var(--gB);background:var(--gSoft)}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--vB);border-top-color:var(--v);animation:gira .8s linear infinite;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
.estado.ok .spin{border:0;animation:none;color:var(--green);font-size:15px;width:auto;height:auto}
.saltar{display:block;width:100%;margin-top:14px;background:none;border:0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--c500);cursor:pointer;padding:10px}
.saltar:hover{color:var(--c100)}

/* ── Cierre del alta ──────────────────────────────────────────── */
.listo{text-align:center;padding:clamp(10px,2vw,20px) 0}
.listo .tick{width:66px;height:66px;border-radius:50%;background:var(--gSoft);border:1px solid var(--gB);color:var(--green);display:grid;place-items:center;font-size:30px;margin:0 auto 20px}
.listo h1{margin-bottom:14px}
.listo .sub{max-width:36em;margin:0 auto}
.pendientes{display:flex;flex-direction:column;gap:9px;margin-top:22px;text-align:left}
.pendientes div{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;font-size:14px;line-height:1.55;color:var(--c300)}
.pendientes i{font-style:normal;color:var(--green)}

/* ── Pago · MercadoPago ───────────────────────────────────────── */
.mp{display:flex;align-items:center;gap:10px;padding:13px 15px;border:1px solid var(--g800);border-radius:4px;background:var(--g950);margin-top:clamp(18px,2.4vw,24px);font-size:13.5px;color:var(--c300)}
.mp .lg{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--c500);margin-left:auto;white-space:nowrap}
.resumen{display:flex;align-items:baseline;gap:12px;padding:16px 17px;border:1px solid var(--vB);border-radius:4px;background:linear-gradient(180deg,var(--vSoft),transparent 70%),var(--g900);margin-top:clamp(18px,2.4vw,26px)}
.resumen b{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.5px}
.resumen span{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c500)}
.resumen em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--vTxt)}
.seguro{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--c500);text-wrap:pretty}

/* ── Estados de verificación de email ─────────────────────────── */
.estados{display:flex;gap:8px;margin-bottom:clamp(18px,2.4vw,26px);flex-wrap:wrap}
.estados button{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid var(--g700);background:transparent;color:var(--c500);cursor:pointer;transition:all 200ms ease}
.estados button:hover{color:var(--c100);border-color:var(--c500)}
.estados button.on{background:var(--v);border-color:var(--v);color:#fff}
.sello-v{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:28px;margin:0 auto 20px}
.sello-v.ok{background:var(--gSoft);border:1px solid var(--gB);color:var(--green)}
.sello-v.no{background:var(--coSoft);border:1px solid var(--coB);color:var(--coral)}