/* GEN.ar · Alta (cotizar + crear cuenta) */
:root{
  --verde:#2e7d4f;--verde2:#3f9a63;--oscuro:#173a2b;--tinta:#16241c;--suave:#5b6b62;
  --borde:#dfe7e2;--fondo-card:#ffffff;--campo:#f6f9f7;--error:#b0352a;--ambar:#94631b;
  color-scheme:light;
}
html.dark{
  --tinta:#e8f0eb;--suave:#a5b6ac;--borde:#2f4237;--fondo-card:#16211b;--campo:#1d2a23;--error:#ff8a7d;--ambar:#e6b25e;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tinta);min-height:100vh;
  background:radial-gradient(1200px 600px at 10% -10%,#2e7d4f55,transparent 60%),linear-gradient(160deg,#173a2b 0%,#0f2a1e 60%,#0b1f16 100%);
  display:flex;flex-direction:column;align-items:center;padding:24px 16px 40px;
}
a{color:var(--verde)}
html.dark a{color:#7fd1a0}
.al-top{width:100%;max-width:980px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.al-top img{height:38px}
.al-top .al-ya{color:#cfe8d6;font-size:14px;text-decoration:none}
.al-top .al-ya b{color:#fff;text-decoration:underline}
.al-tema{line-height:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:999px;width:34px;height:34px;cursor:pointer;margin-left:10px;font-size:15px}
.al-wrap{width:100%;max-width:980px;display:grid;grid-template-columns:1fr 460px;gap:32px;align-items:center;flex:1}
.al-hero{color:#eaf4ee}
.al-hero h1{font-size:40px;line-height:1.08;margin:0 0 14px;letter-spacing:-.02em}
.al-hero h1 span{color:#8fdcae}
.al-hero p{font-size:16px;color:#c6dccf;margin:0 0 20px;max-width:440px}
.al-hero ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.al-hero li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#dcebe2}
.al-hero li i{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#2e7d4f;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff;margin-top:1px}
.al-card{background:var(--fondo-card);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:22px 22px 18px}
.al-pasos{display:flex;gap:6px;margin-bottom:16px}
.al-pasos span{flex:1;height:4px;border-radius:4px;background:var(--borde)}
.al-pasos span.on{background:var(--verde)}
.al-paso h2{font-size:21px;margin:0 0 4px}
.al-paso .al-sub{color:var(--suave);font-size:14px;margin:0 0 16px}
.al-paso[hidden]{display:none}
.al-planes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.al-plan{position:relative;border:1.5px solid var(--borde);border-radius:12px;padding:12px;cursor:pointer;background:var(--campo);transition:border-color .15s}
.al-plan input{position:absolute;opacity:0;pointer-events:none}
.al-plan b{display:block;font-size:16px}
.al-plan small{color:var(--suave);font-size:12.5px;display:block;margin-top:2px}
.al-plan .al-tag{position:absolute;top:-9px;right:10px;background:var(--verde);color:#fff;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px}
.al-plan:has(input:checked){border-color:var(--verde);box-shadow:0 0 0 3px #2e7d4f22}
.al-plan:has(input:focus-visible){outline:2px solid var(--verde);outline-offset:2px}
.al-campo{display:block;margin-bottom:12px}
.al-campo>span{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.al-campo>span small{font-weight:400;color:var(--suave)}
.al-in,.al-campo select{width:100%;font:inherit;font-size:15px;color:var(--tinta);background:var(--campo);border:1.5px solid var(--borde);border-radius:10px;padding:10px 12px;outline:none}
.al-in:focus,.al-campo select:focus{border-color:var(--verde);box-shadow:0 0 0 3px #2e7d4f22}
.al-in.mal{border-color:var(--error)}
.al-fila{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.al-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.al-chips button{font:inherit;font-size:12.5px;border:1px solid var(--borde);background:transparent;color:var(--tinta);border-radius:999px;padding:4px 10px;cursor:pointer}
.al-chips button.on{background:var(--verde);border-color:var(--verde);color:#fff}
.al-precio{border-radius:12px;background:linear-gradient(135deg,#2e7d4f,#3f9a63);color:#fff;padding:14px 16px;margin:4px 0 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.al-precio .al-monto{font-size:30px;font-weight:800;line-height:1;white-space:nowrap}
.al-precio .al-monto small{font-size:14px;font-weight:600;opacity:.85}
.al-precio .al-det{font-size:12px;opacity:.9;text-align:right}
.al-prueba{font-size:13px;color:var(--suave);margin:-6px 0 14px;text-align:center}
.al-btn{width:100%;font:inherit;font-weight:700;font-size:15.5px;border:0;border-radius:11px;padding:12px 14px;cursor:pointer;background:var(--verde);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.al-btn:hover{background:#276b43}
.al-btn:disabled{opacity:.6;cursor:default}
.al-btn.sec{background:transparent;color:var(--tinta);border:1.5px solid var(--borde)}
.al-volver{background:none;border:0;color:var(--suave);font:inherit;font-size:13.5px;cursor:pointer;padding:0;margin:0 0 10px}
.al-social{display:grid;gap:10px;margin-bottom:6px}
.al-social>div{min-height:44px;display:flex;justify-content:center}
#alApple{cursor:pointer;height:44px;width:100%;max-width:400px}
.al-o{display:flex;align-items:center;gap:10px;color:var(--suave);font-size:12.5px;margin:12px 0}
.al-o::before,.al-o::after{content:"";flex:1;height:1px;background:var(--borde)}
.al-quien{display:flex;align-items:center;gap:10px;background:var(--campo);border:1px solid var(--borde);border-radius:12px;padding:9px 12px;margin-bottom:14px;font-size:14px}
.al-quien img{width:32px;height:32px;border-radius:50%}
.al-quien .al-cambiar{margin-left:auto;background:none;border:0;color:var(--verde);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}
.al-tel{display:grid;grid-template-columns:112px 1fr;gap:8px}
.al-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--suave);margin:4px 0 14px}
.al-check input{margin-top:2px;accent-color:var(--verde)}
.al-err{color:var(--error);font-size:13.5px;min-height:0;margin:0 0 10px}
.al-err:empty{display:none}
.al-err a{color:inherit;font-weight:700}
.al-resumen{font-size:12.5px;color:var(--suave);text-align:center;margin-top:12px}
.al-creando{text-align:center;padding:28px 6px}
.al-creando .al-spin{width:42px;height:42px;border:4px solid var(--borde);border-top-color:var(--verde);border-radius:50%;margin:0 auto 14px;animation:algira .9s linear infinite}
@keyframes algira{to{transform:rotate(360deg)}}
.al-pie{color:#9fb8a9;font-size:12px;margin-top:22px;text-align:center}
.al-pie a{color:#cfe8d6}
@media(max-width:860px){
  .al-wrap{grid-template-columns:1fr;gap:18px}
  .al-hero{padding-top:0}
  .al-hero h1{font-size:28px}
  .al-hero p{font-size:15px;margin-bottom:12px}
  .al-hero ul{display:none}
  .al-card{padding:18px 16px 14px}
  .al-precio{flex-direction:column;align-items:flex-start}
  .al-precio .al-det{text-align:left}
}
@media(max-width:380px){.al-fila{grid-template-columns:1fr}}

/* ── Fondo con foto al azar + tarjetas efecto vidrio (js/fondo.js) ── */
html.fondo-foto body{background:#0f2a1e}
html.fondo-foto body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(160deg,rgba(15,42,30,.78) 0%,rgba(11,31,22,.45) 50%,rgba(11,31,22,.80) 100%),var(--fondo-img) center/cover no-repeat,#0f2a1e}
html.fondo-foto .al-hero h1,html.fondo-foto .al-hero p,html.fondo-foto .al-hero li,html.fondo-foto .al-top .al-ya,html.fondo-foto .al-pie{text-shadow:0 1px 12px rgba(0,0,0,.45)}
html.fondo-foto .al-card{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
html.fondo-foto{--campo:rgba(255,255,255,.62);--borde:rgba(23,58,43,.16)}
html.fondo-foto.dark .al-card{background:rgba(18,28,22,.62);border-color:rgba(255,255,255,.10);box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
html.fondo-foto.dark{--campo:rgba(255,255,255,.07);--borde:rgba(255,255,255,.14)}
html.fondo-foto .al-plan{background:var(--campo)}
html.fondo-foto .al-tema{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.fondo-foto .al-card{background:rgba(255,255,255,.94)}
  html.fondo-foto.dark .al-card{background:rgba(18,28,22,.94)}
}

/* ── alta.html: que entre en pantalla sin scroll ── */
@media (min-width:861px) and (max-height:820px){
  body.alta{padding-top:10px;padding-bottom:10px}
  body.alta .al-top{margin-bottom:4px}
  body.alta .al-top img{height:32px}
  body.alta .al-hero h1{font-size:34px;margin-bottom:10px}
  body.alta .al-hero p{margin-bottom:12px;font-size:15px}
  body.alta .al-hero ul{gap:6px}
  body.alta .al-card{padding:16px 20px 14px}
  body.alta .al-pasos{margin-bottom:10px}
  body.alta .al-paso h2{font-size:19px}
  body.alta .al-paso .al-sub{margin-bottom:10px;font-size:13.5px}
  body.alta .al-campo{margin-bottom:8px}
  body.alta .al-campo>span{margin-bottom:3px}
  body.alta .al-in,body.alta .al-campo select{padding:8px 11px}
  body.alta .al-planes{margin-bottom:10px}
  body.alta .al-plan{padding:9px 12px}
  body.alta .al-chips{margin-bottom:10px!important}
  body.alta .al-precio{padding:10px 14px;margin-bottom:8px}
  body.alta .al-precio .al-monto{font-size:26px}
  body.alta .al-prueba{margin:-2px 0 10px}
  body.alta .al-btn{padding:10px 14px}
  body.alta .al-volver{margin-bottom:4px}
  body.alta .al-quien{padding:6px 10px;margin-bottom:8px}
  body.alta .al-check{margin:2px 0 10px}
  body.alta .al-resumen{margin-top:8px}
  body.alta .al-social>div{min-height:40px}
  body.alta .al-o{margin:8px 0}
  body.alta .al-pie{margin-top:6px}
}
@media (max-width:860px){
  body.alta{padding-top:12px;padding-bottom:14px}
  body.alta .al-top{margin-bottom:8px}
  body.alta .al-hero p{display:none}
  body.alta .al-hero h1{font-size:24px;margin-bottom:0}
  body.alta .al-wrap{gap:12px}
  /* Desde el paso 2 el título ya no hace falta: más lugar para el formulario */
  body.alta[data-paso="2"] .al-hero,body.alta[data-paso="3"] .al-hero,body.alta[data-paso="4"] .al-hero{display:none}
  body.alta .al-card{padding:16px 16px 12px}
  body.alta .al-pasos{margin-bottom:10px}
  body.alta .al-paso .al-sub{margin-bottom:10px}
  body.alta .al-campo{margin-bottom:9px}
  body.alta .al-in,body.alta .al-campo select{padding:9px 11px}
  body.alta .al-precio{padding:10px 14px;margin-bottom:8px}
  body.alta .al-prueba{margin:-2px 0 10px}
  body.alta .al-check{margin:2px 0 10px}
  body.alta .al-quien{margin-bottom:10px}
  body.alta .al-pie{margin-top:10px}
}