:root{
  /* Brand */
  --violet:#9D4EF9;      /* violeta vivo */
  --blue:#2BA7FF;        /* azul eléctrico */
  --glow: rgba(157,78,249,.55);

  /* UI */
  --bg:#070A16;          /* fondo base oscuro (casi negro azulado) */
  --panel:#0C1224;       /* panel oscuro */
  --panel-2:#0A1120;
  --stroke:rgba(130,160,255,.18);
  --text:#EAF1FF;
  --muted:#A8B2D9;
  --place:#7C8BB8;
  --ok:#A7F3D0;
  --err:#FECACA;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(40% 55% at 15% 0%, rgba(157,78,249,.18), transparent 60%),
    radial-gradient(35% 55% at 95% 15%, rgba(43,167,255,.16), transparent 60%),
    linear-gradient(180deg, #060913 0%, #080B17 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

.wrap{min-height:100dvh; display:grid; place-items:center; padding:24px}
.card{
  width:min(520px, 100%);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--stroke);
  border-radius:24px;
  padding:24px 22px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 48px rgba(157,78,249,.14); /* glow tenue */
}

/* Header / brand */
.brand{
  display:block;
  width:220px; height:auto;
  filter: drop-shadow(0 8px 22px var(--glow));
  margin:2px 0 8px;
}
.lead{margin:.25rem 0 1.1rem; color:var(--muted); font-size:.98rem}

/* CTA */
.actions{margin-bottom:12px}
.btn{
  display:inline-block;
  width:100%;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  color:#fff; text-decoration:none;
  border:none; border-radius:14px;
  padding:.9rem 1.1rem; font-weight:700; cursor:pointer;
  box-shadow: 0 10px 26px rgba(43,167,255,.28);
  transition: transform .06s ease;
}
.btn:active{ transform: translateY(1px) }
.btn:disabled{ opacity:.7; cursor:not-allowed }

/* Form */
form{display:grid; gap:10px}
.row{display:flex; gap:10px}
.row>*{flex:1}

input, select, button{
  font: inherit;
}
input, select{
  width:100%;
  background:#0a1226;
  border:1px solid var(--stroke);
  color:var(--text);
  padding:.9rem 1rem;
  border-radius:14px;
  outline: none;
}
input::placeholder{ color:var(--place) }
select{
  appearance:none;
  background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px; background-repeat:no-repeat;
}
input:focus, select:focus{
  border-color: rgba(157,78,249,.55);
  box-shadow: 0 0 0 3px rgba(157,78,249,.18);
}

/* Checkbox */
.ck{display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.95rem}
.ck input[type="checkbox"]{ accent-color: var(--violet) }
.link{ color:#C7D2FE; text-underline-offset:2px }

/* Messages */
.msg{min-height:1.25rem; font-size:.95rem}
.msg.ok{ color: var(--ok) }
.msg.err{ color: var(--err) }

/* Footer */
footer{margin-top:8px; display:flex; justify-content:space-between; align-items:center; color:var(--muted)}
footer a{ color:#CAD4FF }

/* Responsive */
@media (max-width:520px){
  .row{flex-direction:column}
  .card{padding:18px}
  .brand{width:200px}
}
/* --- patch F0: spacing logo + acciones en fila --- */
.brand{ margin: 6px 0 14px; }                /* más aire entre logo y texto */
.actions.actions--split{                     /* usar .btn existente, sin nuevas clases en los botones */
  display:flex; gap:10px; margin-bottom:12px;
}
.actions.actions--split .btn{ flex:1; width:auto; }
@media (max-width:520px){
  .actions.actions--split{ flex-direction:column; }
}
/* --- patch F0: fix consentimiento alineado --- */
.ck {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
  font-size: .95rem;
  flex-wrap: wrap;             /* si falta espacio en móviles, salta línea */
  line-height: 1.3;            /* altura consistente */
}

.ck input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--violet);
  margin: 0;
  flex-shrink: 0;
}
/* === Polishing F0 · waitlist card (no breaking changes) === */

/* Más respiración bajo el logo */
.brand { margin-bottom: 10px; }

/* Filas de CTAs (App Store / Google Play) con mejor espaciado y wrap */
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 180px; text-align: center; }

/* Checkbox de consentimiento más legible y bien alineado */
.ck{
  display: flex;
  align-items: center;
  gap: .6rem;
  line-height: 1.25;
  margin: .25rem 0 .35rem;
  max-width: 100%;
}
.ck input[type="checkbox"]{
  /* aumentar tamaño sin remaquetar */
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--violet);
  /* fallback si el navegador no soporta accent-color */
  transform: translateY(0.5px);
}
.ck .link{ white-space: nowrap; } /* evita saltos feos en “Política de Privacidad” */

/* Botón principal con micro-interacciones (mismo gradiente de marca) */
.btn{
  background: linear-gradient(135deg, var(--violet), var(--blue));
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 14px 34px rgba(43,167,255,.35),
    0 0 0 3px rgba(157,78,249,.14) inset;
}
.btn:active{ transform: translateY(0); }

/* Inputs: mantener consistencia de foco en todos los navegadores */
input:focus, select:focus{
  border-color: rgba(157,78,249,.55);
  box-shadow: 0 0 0 3px rgba(157,78,249,.18);
}

/* ====== LEGAL PAGES ====== */
.brand.small{ width:160px; margin:0 0 6px; }
.card.legal{ max-width:840px; padding:28px 26px; }
.legal-head{ display:flex; gap:18px; align-items:flex-end; margin-bottom:10px; }
.legal-title{ margin:0; font-size:1.45rem; letter-spacing:.2px; }
.legal-content{
  color:var(--text);
  line-height:1.65; font-size:1rem;
  display:grid; gap: .75rem;
}
.legal-content h1,.legal-content h2,.legal-content h3{
  margin: 1.2rem 0 .4rem;
}
.legal-content p{ color:var(--muted); margin:.25rem 0; }
.legal-content ul{ padding-left:1.2rem; color:var(--muted); }
.legal-content a{ color:#C7D2FE; text-underline-offset:2px; }
.legal-foot{ display:flex; gap:14px; justify-content:flex-end; margin-top:12px; }

/* ====== Download buttons (sobrios) ====== */
.btn.ghost{
  display:inline-block;
  background:transparent;
  border:1px solid var(--stroke);
  color:var(--text);
  border-radius:14px;
  padding:.75rem 1rem;
  text-decoration:none;
  transition: background .12s ease, border-color .12s ease;
}
.btn.ghost:hover{
  background: rgba(157,78,249,.07);
  border-color: rgba(157,78,249,.35);
}
/* Ajustes legales: más ancho + solo logo */
/* ====== LEGAL PAGES (más anchas, look de documento) ====== */
.card.legal{
  /* ancho tipo hoja en pantalla grande */
  max-width: 1200px;
  width: min(96%, 1200px);
  padding: 44px 40px;
}

/* cabecera centrada con logo-sello */
.legal-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin-bottom: 20px;
}

.brand.small{
  width: 220px;
  height: auto;
  margin: 0 auto;
}

/* contenido con buen interlineado */
.legal-content{
  color: var(--text);
  line-height: 1.7;
  font-size: 1rem;
  display: grid;
  gap: .9rem;
}
.legal-content h1,.legal-content h2,.legal-content h3{
  margin: 1.25rem 0 .5rem;
}

/* ====== Fondo sin cortes (elimina la “línea”) ====== */
/* Base sólida */
body{
  background-color: var(--bg); /* #070A16 */
  position: relative;
  overflow-x: hidden;
}

/* Capas de gradiente como overlay fijo para evitar seams */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(157,78,249,.18), transparent 62%),
    radial-gradient(50% 70% at 88% 18%, rgba(43,167,255,.16), transparent 62%),
    linear-gradient(180deg, #060913 0%, #080B17 100%);
  background-repeat: no-repeat;
  z-index: -1;           /* queda detrás de todo */
  will-change: transform;/* evita banding en algunos GPUs */
}

/* opcional: sutil borde para “hoja” */
.card.legal{
  border:1px solid var(--stroke);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 48px rgba(157,78,249,.10);
  border-radius: 24px;
}