:root{
  --bg:#0a0b0f; --panel:#11131a; --card:#141826; --text:#e8ecf1; --muted:#a3aab8;
  --accent:#8a2be2; /* violeta (podés cambiarlo) */
  --accent-2:#4b0082; --radius:16px; --shadow:0 12px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(138,43,226,.15), transparent 40%),
    radial-gradient(900px 600px at -10% 20%, rgba(75,0,130,.12), transparent 40%),
    var(--bg);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1200px, 92vw); margin-inline:auto}

header.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(10,11,15,.9), rgba(10,11,15,.6));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:clamp(56px, 9vw, 110px); width:auto; filter:drop-shadow(0 2px 8px rgba(138,43,226,.35))}
.links{display:flex; gap:18px; align-items:center; font-size:14.5px; color:var(--muted)}
.links a{padding:8px 10px; border-radius:10px; transition:120ms ease-in-out background}
.links a:hover{background:rgba(255,255,255,.06); color:var(--text)}

/* === "← Volver" al margen derecho === */
header.site-header .nav{
  justify-content: flex-start;
}
header.site-header .nav .links{
  order: 99;            /* se va al final */
  margin-left: auto;    /* empuja hasta el borde derecho */
  margin-right: 14px;   /* espacio de respiro a la derecha */
}
header.site-header .nav .actions{
  margin-left: 0;
}

.btn{
  padding:9px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  color:var(--text); background:#0e111a; box-shadow:0 12px 40px rgba(0,0,0,.35);
  display:inline-flex; align-items:center; gap:8px; cursor:pointer
}
.btn:hover{border-color:rgba(138,43,226,.45); box-shadow:0 0 0 3px rgba(138,43,226,.15)}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border:none}
.btn.sm{padding:6px 10px; font-size:13px}
.btn-full{width:100%; justify-content:center; margin-top:8px}

main{display:grid; place-items:center; min-height:calc(100vh - 70px); padding:24px}
.card{width:min(560px, 92vw); background:#141826; border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.35);}
.panel{padding:16px 16px 22px}

form label{display:block; margin:6px 0}
input[type="email"], input[type="password"], input[type="text"], select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:#0f1422; color:#e8ecf1
}

#message{font-weight:700; margin:10px 16px}
.muted{color:#a3aab8; font-size:13px}

/* Cartel superior estilo “pestaña activa” */
.tab-banner{
  margin:12px 16px 0;
  padding:10px 12px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  text-align:center;
  font-weight:700;
  letter-spacing:.2px;
}

/* Nota centrada de prueba gratis */
.trial-note{
  text-align:center;
  margin: 8px 16px 0;
  color: var(--muted);
  font-size: 13px;
}

/* -------- Password toggle (OJO) -------- */
.password-field{ position:relative; }
.password-field input{ padding-right:44px; }
.pw-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; padding:6px; border-radius:8px;
  color:var(--accent);
}
.pw-toggle:hover{ box-shadow:0 0 0 3px rgba(138,43,226,.15); }
.pw-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.icon-eye{ width:22px; height:22px; display:block; }
.eye-off{ display:none; }
.pw-toggle.is-on .eye-on{ display:none; }
.pw-toggle.is-on .eye-off{ display:block; }

/* === Disposición en 2 columnas (medio formulario cada campo) === */
.row.two-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;               /* alinear la base de los inputs */
}
.row.two-cols .half{
  display: flex;
  flex-direction: column;
}
.row.two-cols .half input,
.row.two-cols .half select{
  height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
}
/* En pantallas chicas, apilar */
@media (max-width: 520px){
  .row.two-cols{ grid-template-columns: 1fr; }
}

/* (Compatibilidad) Si aún usás .phone-group para Teléfono, aplicá el mismo layout */
.phone-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.phone-group .field{
  display: flex;
  flex-direction: column;
}
.phone-group .field input,
.phone-group .field select{
  height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
}
@media (max-width: 520px){
  .phone-group{ grid-template-columns: 1fr; }
}

/* ====== Parche de alineación para el bloque de teléfono (.phone2) ====== */
:root{
  --phone2-label-row: 1.25rem;
  --phone2-help-row:  0.9rem;
}
.row.two-cols.phone2{
  align-items: start !important;
}
.phone2 > label.half{
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: var(--phone2-label-row) 44px var(--phone2-help-row);
  align-items: center;
}
.phone2 .f-label{
  display: flex;
  align-items: flex-end;
  margin: 0;
  line-height: 1.2;
  height: var(--phone2-label-row);
  font-size: 14px;
  color: var(--text);
}
.phone2 .f-input{
  height: 44px !important;
  padding: 10px 12px !important;
  box-sizing: border-box;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: #0f1422;
  color: #e8ecf1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.phone2 .f-help{
  display: flex;
  align-items: flex-start;
  margin-top: 6px;
  height: var(--phone2-help-row);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 520px){
  .row.two-cols{ grid-template-columns: 1fr; }
}

/* Tamaño ajustable de la nota bajo el precio */
:root{
  --price-help-size: 11px;
}
#suscripcion-row .price-help{
  display: block;
  margin-top: 6px;
  font-size: var(--price-help-size);
  line-height: 1.25;
  color: var(--muted);
  opacity: .95;
}
:root{
  --sus-label-row: 1.25rem;
  --sus-input-row: 44px;
  --sus-help-row:  0.9rem;
  --price-help-size: 11px;
}
#suscripcion-row{
  align-items: start !important;
}
#suscripcion-row > label.half{
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: var(--sus-label-row) var(--sus-input-row) var(--sus-help-row);
  align-items: center;
}
#suscripcion-row .half input,
#suscripcion-row .half select{
  height: var(--sus-input-row);
  padding: 10px 12px;
  box-sizing: border-box;
}
#suscripcion-row .price-help{
  grid-row: 3 / 4;
  display: block;
  margin-top: 6px;
  height: var(--sus-help-row);
  font-size: var(--price-help-size);
  line-height: 1.25;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#suscripcion-row > label.half::after{
  content: "";
  grid-row: 3 / 4;
  height: var(--sus-help-row);
}
#suscripcion-row > label.half:has(.price-help)::after{
  display: none;
}
@media (max-width: 520px){
  .row.two-cols{ grid-template-columns: 1fr; }
}

/* estado visual para botón bloqueado */
.btn.is-disabled,
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* estilo del enlace de términos */
.terms-label a:hover {
  text-decoration:overline #5f01a1 ;
}

/* color del checkbox cuando está marcado */
#accept-terms {
  accent-color: #5f01a1  ; /* verde (cambiá por tu color) */
}