/* (same styles as antes, resumido para el paquete) */
:root{--accent:#0ea5e9;--accent-2:#10b981;--bg:#0b1020;--card-bg:rgba(255,255,255,.08);--card-stroke:rgba(255,255,255,.18);--text:#e8eef8;--muted:#b7c2d6;--radius:18px;--shadow:0 8px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.bg{position:fixed;inset:0;background-image:url('../img/bg-saltillo.jpg');background-size:cover;background-position:center 55%;filter:blur(6px) saturate(105%);transform:scale(1.04);z-index:-2}
.bg-overlay{position:fixed;inset:0;background:radial-gradient(1200px 600px at 85% 20%,rgba(14,165,233,.25),transparent 60%),radial-gradient(900px 500px at 15% 80%,rgba(16,185,129,.2),transparent 60%),linear-gradient(to bottom right,rgba(7,12,30,.85),rgba(7,12,30,.75));z-index:-1}
.container{min-height:100dvh;display:grid;place-items:center;padding:clamp(16px,3vw,32px)}
.card{width:min(960px,96vw);display:grid;grid-template-columns:1fr;gap:24px;background:var(--card-bg);border:1px solid var(--card-stroke);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);padding:clamp(20px,3vw,36px)}
.card-header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:14px;align-items:center}.brand-badge{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 6px 18px rgba(14,165,233,.35)}
.brand-text h1{font-size:clamp(18px,2.4vw,26px);margin:0 0 2px;letter-spacing:.3px}.subtitle{margin:0;color:var(--muted);font-size:.95rem}
.form{display:grid;gap:16px}.field{display:grid;gap:8px}.field>span{font-weight:600;font-size:.95rem}
.input-wrap{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;display:grid;grid-template-columns:28px 1fr 42px;align-items:center;padding:6px 6px 6px 8px;transition:border-color .2s,background .2s}
.input-wrap:focus-within{border-color:rgba(14,165,233,.65);background:rgba(255,255,255,.10);outline:0}.icon{width:20px;height:20px;fill:#bcd1f9;opacity:.9;margin-left:4px}
.input-wrap input{background:transparent;border:0;outline:0;color:var(--text);padding:10px 8px;font-size:1rem}.input-wrap input::placeholder{color:#9fb3d3;opacity:.9}
.btn-eye{background:transparent;border:0;padding:8px;border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:background .2s}.btn-eye:hover{background:rgba(255,255,255,.06)}.btn-eye .icon{width:22px;height:22px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.check{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--muted)}.check input{width:18px;height:18px;accent-color:var(--accent)}
.link{color:#cfe5ff;text-decoration:none;font-size:.95rem;border-bottom:1px dashed rgba(207,229,255,.4)}.link:hover{color:#fff;border-bottom-color:#fff}
.btn-primary{display:inline-grid;grid-auto-flow:column;gap:10px;align-items:center;justify-content:center;padding:14px 16px;width:100%;font-weight:700;letter-spacing:.2px;font-size:1.03rem;color:#00111f;background:linear-gradient(135deg,#7dd3fc,#22d3ee,#34d399);border:0;border-radius:14px;cursor:pointer;box-shadow:0 10px 25px rgba(34,211,238,.22);transition:transform .04s,box-shadow .2s,filter .2s}
.btn-primary:hover{filter:brightness(1.03);box-shadow:0 12px 30px rgba(34,211,238,.28)}.btn-primary:active{transform:translateY(1px)}.btn-label{pointer-events:none}
.loader{--s:14px;width:var(--s);height:var(--s);border-radius:999px;border:2px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.7);animation:spin .9s linear infinite;display:none}.loading .btn-label{opacity:0}.loading .loader{display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
.hint{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}.btn-ghost{background:transparent;color:#e6fbff;border:1px dashed rgba(255,255,255,.28);padding:8px 12px;border-radius:12px;cursor:pointer}.btn-ghost:hover{background:rgba(255,255,255,.06)}.hint small{color:var(--muted)}
.card-footer{text-align:center;color:var(--muted);margin-top:4px}
@media(min-width:900px){.card{grid-template-columns:1.05fr .95fr}.card-header{grid-column:span 2}.form{max-width:560px}}