/* ==== App base (modo oscuro, glass, tipografía) ==== */
:root{
  --bg:#0b1020; --bg-2:#0c1327;
  --card:#0f1b34cc; --text:#e9f1ff; --muted:#93a3c3; --stroke:#1f2b4d;
  --primary:#5aa2ff; --primary-2:#3f86ff;
  --radius:24px;
  --shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, #12214b 0%, transparent 60%),
    radial-gradient(900px 500px at 120% 120%, #0d1533 0%, transparent 55%),
    var(--bg);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  /* Respeta el notch en móviles */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ==== Contenedores y tarjetas ==== */
.envoltorio{max-width:1200px; margin:40px auto; padding:0 20px}
.grid{display:grid; gap:28px; grid-template-columns:1.1fr 1fr}
.panel{background:var(--card); border:1px solid var(--stroke); border-radius:28px; box-shadow:var(--shadow)}
.panel.izq{padding:40px 42px; display:flex; flex-direction:column; align-items:center}
.panel.der{padding:32px 30px; display:flex; align-items:center; justify-content:center}
.card{background:linear-gradient(180deg, rgba(19,31,63,.65), rgba(16,27,52,.65)); border:1px solid var(--stroke); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.card-narrow{width:100%; max-width:520px}

/* ==== Branding / texto ==== */
.logo{
  width:min(240px, 60%); height:auto; display:block; margin-bottom:18px;
  filter:
    drop-shadow(0 0 20px rgba(90,162,255,0.65))
    drop-shadow(0 0 40px rgba(90,162,255,0.45))
    drop-shadow(0 0 60px rgba(90,162,255,0.25));
}
.titulo{font-weight:800; font-size:40px; letter-spacing:.2px; text-align:center; margin:6px 0 4px;
  text-shadow:0 0 8px rgba(90,162,255,0.7), 0 0 16px rgba(90,162,255,0.5);}
.sub{color:var(--muted); text-align:center; margin-bottom:24px; font-size:15px;
  text-shadow:0 0 6px rgba(90,162,255,0.4)}

/* ==== Bloques informativos ==== */
.features{display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:540px}
.feature{background:#0f1b3480; border:1px solid var(--stroke); border-radius:16px; padding:14px}
.feature b{display:block; margin-bottom:4px}
.foot{margin-top:14px; color:var(--muted); font-size:12px; text-align:center}

/* ==== Formularios ==== */
h1,h2{margin:4px 0 8px}
h2{font-size:26px}
p.desc{color:var(--muted); margin:0 0 14px}
label{display:block; color:var(--muted); margin:12px 0 6px; font-size:14px}
input{
  width:100%; padding:13px 14px; border-radius:12px;
  background:#0e162e; border:1px solid var(--stroke); color:var(--text);
  outline:none; transition:border .2s, box-shadow .2s;
}
input:focus{border-color:#2a3f72; box-shadow:0 0 0 3px rgba(90,162,255,.15)}
.fila{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.btn{
  margin-top:18px; width:100%; padding:14px; border:0; border-radius:12px; font-weight:700; font-size:15px;
  color:#06122c; cursor:pointer; background:linear-gradient(180deg, var(--primary), var(--primary-2));
  box-shadow:0 8px 24px rgba(62,133,255,.35);
}
.links{display:flex; gap:8px; flex-wrap:wrap; justify-content:space-between; margin-top:14px}
.links a{color:var(--primary); text-decoration:none; font-weight:600; font-size:14px}
.links a:hover{text-decoration:underline}
.error,.msg-err{background:#3a1020; border:1px solid #b74b6a; padding:12px; border-radius:12px; color:#ffc0ca; margin:8px 0 10px}
.msg-ok{background:#10341a; border:1px solid #3f8f5a; color:#b7ffd1; padding:12px; border-radius:12px; margin:10px 0}

/* ==== Panel simple ==== */
.panel-contenido{padding:32px; text-align:center}
.panel-contenido a{color:var(--primary)}

/* ==== Responsivo ==== */
/* Desktop mediano ↓ */
@media (max-width: 1080px){
  .envoltorio{margin:28px auto}
  .titulo{font-size:36px}
}
/* Tablet ↓ */
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .panel.izq{order:2}
  .panel.der{order:1}
  .features{grid-template-columns:1fr 1fr}
}
/* Tablet chica ↓ */
@media (max-width: 720px){
  .envoltorio{padding:0 16px}
  .features{grid-template-columns:1fr}
  .fila{grid-template-columns:1fr}
  .titulo{font-size:32px}
  .card-narrow{max-width:560px}
}
/* Móvil ↓ */
@media (max-width: 480px){
  .panel.izq{padding:28px 22px}
  .panel.der{padding:22px 18px}
  .card{padding:22px}
  .titulo{font-size:28px}
  input,.btn{padding:13px 12px}
  .links{justify-content:center}
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}

/* iOS zoom fix en inputs */
@supports (-webkit-touch-callout: none) {
  input{font-size:16px}
}
/* ===== Centrado vertical/horizontal de una sola tarjeta ===== */
.page-center{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px; /* respiración en desktop */
}
@media (max-width: 720px){
  .page-center{ padding: 28px 16px; } /* respiración en móvil/tablet */
}