/* ====== Prestacarga – Estilos globales ====== */
/* Variables */
:root{
  --brand:#00a1d5; --brand-dark:#0089b6; --primary:#2d2f77;
  --bg:#f4f4f4; --card:#fff; --text:#333; --muted:#555;
  --nav-bg:#ffffffcc; --nav-border:#e5e7eb;
  --footer-bg:#0f172a; --footer-text:#e5e7eb; --footer-border:#1e293b; --footer-muted:#94a3b8;
  --badge-w:260px;
}

/* Base / reset mínimo */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ====== Layouts generales ====== */
.wrap{max-width:1150px;margin:26px auto 40px;padding:0 20px}
section{scroll-margin-top:90px}
h1{margin:12px 0 0;font-size:clamp(26px,6vw,48px);font-weight:700;color:var(--brand)}
h2{font-size:clamp(22px,4vw,36px);color:var(--primary);margin:0 0 12px;font-weight:600}
p{color:var(--muted);margin:0 0 18px}

/* ====== NAV ====== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(6px);
  background:var(--nav-bg); border-bottom:1px solid var(--nav-border);
}
.nav-wrap{max-width:1150px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:700;color:var(--brand);font-size:20px;letter-spacing:-.3px}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{padding:8px 10px;border-radius:10px;transition:background .15s}
.nav-links a:hover{background:#eef7fb}
.nav-toggle{display:none;background:transparent;border:0;padding:8px;border-radius:10px}
.nav-toggle svg{width:24px;height:24px}
@media (max-width:860px){
  .nav-links{position:fixed; inset:auto 0 0 0; top:56px; background:#fff; border-top:1px solid var(--nav-border);
    display:none; flex-direction:column; padding:14px 20px}
  .nav-links.show{display:flex}
  .nav-toggle{display:inline-flex}
}

/* ====== HERO ====== */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media (max-width:920px){.hero{grid-template-columns:1fr}}
.btn{
  display:inline-block;background:var(--brand);color:#fff;font-weight:700;
  padding:12px 18px;border-radius:10px;text-transform:uppercase;cursor:pointer;transition:.2s
}
.btn:hover{background:var(--brand-dark);transform:translateY(-2px)}
.imagen-panel{border-radius:18px;overflow:hidden;background:var(--card);position:relative;isolation:isolate;box-shadow:0 10px 25px rgba(0,0,0,.15)}
.hero-placeholder{
  width:100%; aspect-ratio:16/10; display:grid; place-items:center; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(0,161,213,.25), transparent 60%),
    radial-gradient(120% 100% at 100% 0%, rgba(45,47,119,.25), transparent 60%),
    linear-gradient(180deg, #f8fafc, #eef2f7);
}
.hero-illustration{width:68%; max-width:520px}

/* ====== Beneficios ====== */
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:56px}
.benefit{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.08);text-align:center}
.benefit p{margin-top:10px}

/* Badges (PNG/WebP) */
.badge-cred{width: var(--badge-w);height:auto;display:inline-block;vertical-align:middle;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;filter: drop-shadow(0 6px 14px rgba(0,0,0,.25))}
@media (prefers-color-scheme: light){.badge-cred{ filter: drop-shadow(0 8px 18px rgba(0,115,255,.18))}}
@media (prefers-color-scheme: dark){.badge-cred{ filter: drop-shadow(0 10px 22px rgba(0,140,255,.28))}}
.badge-cred.sm { --badge-w: 200px } .badge-cred.md { --badge-w: 260px } .badge-cred.lg { --badge-w: 320px } .badge-cred.xl { --badge-w: 380px }

/* ====== Operadoras ====== */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:20px;padding:0}
.logos li{list-style:none}
.logo-btn{
  appearance:none;border:0;background:#fff;padding:14px;border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);cursor:pointer;width:100%;
  display:flex;justify-content:center;align-items:center;transition:.2s
}
.logo-btn:hover{transform:scale(1.03)}
.logo-btn.selected{box-shadow:0 0 0 3px var(--brand)}
.logo-btn:focus-visible{outline:3px solid var(--brand)}
.logos img{max-width:100%;max-height:64px;object-fit:contain}
.op-hint{margin-top:8px;color:#0f172a;font-weight:600}

/* ====== Pasos ====== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:20px}
.step{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.step h3{margin:0 0 6px;color:var(--brand)}

/* ====== Promos ====== */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:20px}
.promo-card{border-radius:12px;padding:18px;background:linear-gradient(120deg, rgba(0,161,213,.15), rgba(45,47,119,.15));border:1px solid #e5e7eb;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.promo-card h3{margin:0 0 6px}
.promo-cta{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:10px;background:linear-gradient(120deg,var(--brand),var(--brand-dark));color:#fff;font-weight:600}

/* ====== Card / Formularios (recarga) ====== */
.card{background:var(--card);border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.08);padding:22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:820px){.form-grid{grid-template-columns:1fr}}
label{font-weight:600;color:#0f172a}
input,select{width:100%;padding:12px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font:inherit}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:8px;background:#eef7fb;border:1px solid #dbeafe;color:#0f172a;border-radius:999px;padding:8px 12px;font-weight:600}
.divider{height:1px;background:#e5e7eb;margin:18px 0}

/* Loader */
.loader{display:none;margin-top:12px;align-items:center;gap:10px}
.loader.show{display:flex}
.dot{width:10px;height:10px;background:var(--brand);border-radius:50%;animation:b 1s infinite ease-in-out}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{opacity:.2;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}

/* ====== Footer ====== */
.footer{background:var(--footer-bg);color:var(--footer-text);padding:40px 20px 20px;margin-top:60px}
.footer-content{max-width:1150px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.footer-brand h2{margin:0;font-size:24px;font-weight:700;color:var(--brand)}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}
.footer-links a{color:var(--footer-text);font-size:.9rem}
.footer-links a:hover{color:var(--brand)}
.footer-bottom{max-width:1150px;margin:20px auto 0;padding-top:15px;border-top:1px solid var(--footer-border);text-align:center;font-size:.85rem;color:var(--footer-muted)}

/* ====== Páginas legales (opcional, si querés más margen) ====== */
.doc .wrap{max-width:900px}
.doc h1{margin-top:24px}