/* Comprobantes SRI — landing y flujo de compra. */
:root{
  --navy:#1d3557; --navy2:#16283f; --acento:#2f6fb5; --acento2:#4f9bef;
  --amarillo:#f2c04d; --fondo:#ffffff; --suave2:#f4f7fc; --panel:#fff;
  --borde:#e2e8f2; --texto:#1f2937; --suave:#5b6b82; --ok:#1a7f4b;
  --sombra:0 10px 30px rgba(16,28,46,.08); --sombra-fuerte:0 18px 50px rgba(16,28,46,.16);
  --radio:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',"Segoe UI",Roboto,Arial,sans-serif;color:var(--texto);background:var(--fondo);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--acento);text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{line-height:1.15;color:var(--navy);margin:0}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;border:1.5px solid var(--borde);background:#fff;color:var(--navy);font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sombra)}
.btn-primario{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primario:hover{background:var(--navy2)}
.btn-grande{padding:15px 30px;font-size:16px}
.btn-ghost{background:transparent}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:14px 28px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:.2s}
.nav.scrolled{border-bottom-color:var(--borde);box-shadow:0 2px 14px rgba(16,28,46,.05)}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--navy)}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a{color:var(--suave);font-weight:600}
.nav-links a:hover{color:var(--navy)}
.nav-cta{margin-left:8px}

/* Hero */
.hero{background:radial-gradient(1200px 500px at 80% -10%,rgba(79,155,239,.25),transparent),linear-gradient(160deg,#22406e,#142744);color:#fff;padding:70px 28px 90px}
.hero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.pill{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#dbe6f7;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;margin-bottom:18px}
.hero h1{color:#fff;font-size:46px;font-weight:900;letter-spacing:-.5px}
.hero .resalte{color:var(--amarillo)}
.lead{font-size:19px;color:#cfdcf0;margin:18px 0 26px;max-width:560px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:18px;padding:0;margin:24px 0 0;color:#b9c8dd;font-size:14px}
.hero-trust li{display:flex;align-items:center;gap:7px}
.hero-trust li::before{content:"✓";color:var(--amarillo);font-weight:900}

/* Chips de SO en el hero */
.hero-os{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-os-label{color:#b9c8dd;font-size:14px;font-weight:600}
.os-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;font-size:14px}
.os-chip svg{width:18px;height:18px}
a.os-chip:hover{background:rgba(255,255,255,.2)}
.os-chip.off{color:#93a6c2;cursor:default}
.os-chip.off i{font-style:normal;font-size:11px;background:rgba(255,255,255,.12);padding:1px 7px;border-radius:8px;color:#cfdcf0}

/* Sección de descarga (selector de SO) */
.descarga-sec{max-width:none;background:var(--suave2)}
.descarga-sec .seccion-cab,.os-cards,.descarga-nota{max-width:1080px;margin-left:auto;margin-right:auto}
.os-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.os-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:#fff;border:1.5px solid var(--borde);border-radius:var(--radio);padding:30px 24px;color:var(--texto);transition:.15s}
a.os-card:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--acento)}
.os-card.os-reco{border-color:var(--acento);box-shadow:0 10px 30px rgba(47,111,181,.14)}
.os-ico{color:var(--navy)}
.os-ico svg{width:52px;height:52px}
.os-txt b{display:block;font-size:19px;color:var(--navy)}
.os-txt span{color:var(--suave);font-size:13px}
.os-btn{margin-top:6px;display:inline-block;padding:11px 26px;border-radius:12px;background:var(--navy);color:#fff;font-weight:700}
a.os-card:hover .os-btn{background:var(--navy2)}
.os-btn-off{background:#e7edf6;color:var(--suave)}
.os-proximo{opacity:.75}
.os-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--amarillo);color:#3a2c05;font-size:12px;font-weight:800;padding:3px 12px;border-radius:999px}
.descarga-nota{text-align:center;color:var(--suave);font-size:13px;margin-top:22px}

/* Captura real en el hero */
.hero-visual{display:flex;justify-content:center;min-width:0}
.hero-shot{margin:0;width:100%;max-width:640px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:var(--sombra-fuerte);line-height:0}
.hero-shot img{width:100%;height:auto;display:block}

/* Galería de capturas reales */
.capturas-sec{max-width:none;background:var(--suave2)}
.capturas-sec .seccion-cab{max-width:760px;margin-left:auto;margin-right:auto}
.shots{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.shot{margin:0}
.shot-ancha{grid-column:1 / -1}
.shot img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--borde);box-shadow:var(--sombra);background:#fff}
.shot figcaption{margin-top:14px;color:var(--suave);font-size:14px;line-height:1.55}
.shot figcaption b{display:block;color:var(--navy);font-size:16.5px;margin-bottom:3px}

/* Franja de confianza */
.franja{max-width:1180px;margin:-40px auto 0;position:relative;z-index:2;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:22px}
.franja-item{text-align:center;padding:6px}
.franja-item b{display:block;color:var(--navy);font-size:16px}
.franja-item span{color:var(--suave);font-size:13px}

/* Secciones */
.seccion{max-width:1180px;margin:0 auto;padding:80px 28px}
.seccion-cab{text-align:center;max-width:680px;margin:0 auto 46px}
.seccion-cab h2{font-size:34px;font-weight:800}
.seccion-cab p{color:var(--suave);font-size:18px;margin:12px 0 0}

/* Cards de funciones */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:28px;transition:.15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.card.destacada{border-color:var(--acento);box-shadow:0 10px 30px rgba(47,111,181,.14)}
.card-ico{color:var(--acento);margin-bottom:14px;display:inline-flex}
.card-ico svg{width:34px;height:34px}
.card.destacada .card-ico{color:var(--navy)}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--suave);margin:0}

/* Pasos */
.pasos-sec{background:var(--suave2);max-width:none}
.pasos-sec .seccion-cab,.pasos-grid{max-width:1180px;margin-left:auto;margin-right:auto}
.pasos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.paso-card{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:28px;position:relative}
.paso-n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;margin-bottom:12px}
.paso-card h3{font-size:19px;margin-bottom:6px}
.paso-card p{color:var(--suave);margin:0}

/* Tutoriales */
.tut-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}
.tut-video{position:relative;aspect-ratio:16/9;background:var(--navy);border-radius:var(--radio);overflow:hidden;cursor:pointer;box-shadow:var(--sombra)}
.tut-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;background:linear-gradient(160deg,#22406e,#142744)}
.tut-play{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:26px}
.tut-video:hover .tut-play{background:var(--amarillo);color:var(--navy);border-color:var(--amarillo)}
.tut-lista{display:flex;flex-direction:column;gap:10px}
.tut-item{display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border:1px solid var(--borde);border-radius:12px;color:var(--texto);font-weight:600}
.tut-item:hover{border-color:var(--acento);box-shadow:var(--sombra)}
.tut-mini{width:30px;height:30px;flex:none;border-radius:8px;background:#eef3fb;color:var(--acento);display:flex;align-items:center;justify-content:center;font-size:12px}

/* Precios */
.precios-sec{background:var(--suave2);max-width:none}
.precios-sec .seccion-cab,.planes,.precios-nota{max-width:1180px;margin-left:auto;margin-right:auto}
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.plan{position:relative;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:30px 26px;text-align:center;box-shadow:var(--sombra)}
.plan.destacado{border:2px solid var(--navy);transform:scale(1.02)}
.plan-cinta{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amarillo);color:#3a2c05;font-size:12px;font-weight:800;padding:4px 14px;border-radius:999px}
.plan h3{font-size:20px}
.plan-precio{font-size:44px;font-weight:900;color:var(--navy);margin:8px 0 2px}
.plan-precio small{font-size:15px;color:var(--suave);font-weight:600}
.plan-empresas{color:var(--acento);font-weight:700;margin:0 0 14px}
.plan-lista{list-style:none;padding:0;margin:0 0 18px;text-align:left}
.plan-lista li{padding:7px 0 7px 26px;position:relative;color:var(--texto);font-size:14.5px;border-bottom:1px solid #f2f5fa}
.plan-lista li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:900}
.plan .btn{width:100%}
.precios-nota{text-align:center;color:var(--suave);font-size:14px;margin-top:22px}
.cargando{text-align:center;color:var(--suave)}

/* Beneficios */
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ben{background:#fff;border:1px solid var(--borde);border-left:4px solid var(--acento);border-radius:var(--radio);padding:26px}
.ben h3{font-size:19px;margin-bottom:8px}
.ben p{color:var(--suave);margin:0}

/* FAQ */
.faq-sec{max-width:820px}
.faq details{background:#fff;border:1px solid var(--borde);border-radius:12px;margin-bottom:12px;padding:2px 18px}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);padding:16px 0;list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:22px;color:var(--acento);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--suave)}

/* CTA final */
.cta-final{text-align:center;background:linear-gradient(160deg,#22406e,#142744);color:#fff;padding:70px 28px}
.cta-final h2{color:#fff;font-size:32px}
.cta-final p{color:#cfdcf0;font-size:18px;margin:12px 0 26px}
.cta-final .hero-cta{justify-content:center}
.cta-final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}

/* Footer */
.pie{background:var(--navy);color:#c7d4e6;padding:50px 28px 26px}
.pie-cols{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.pie-marca{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:17px;margin-bottom:10px}
.pie h4{color:#fff;font-size:14px;margin:0 0 12px}
.pie-cols a{display:block;color:#b9c8dd;padding:4px 0}
.pie-cols a:hover{color:#fff}
.pie-legal{max-width:1180px;margin:30px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#8fa3c0;text-align:center}

/* ---- Checkout profesional (comprar.html) ---- */
.nav-volver{margin-left:auto;color:var(--suave);font-weight:600}
.nav-volver:hover{color:var(--navy)}
.checkout{max-width:1080px;margin:32px auto 60px;padding:0 24px}
.checkout h1{font-size:28px;margin-bottom:22px}
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.co-form{min-width:0}
.co-bloque{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:24px;margin-bottom:20px;box-shadow:var(--sombra)}
.co-bloque h2{font-size:18px;margin-bottom:6px}
.co-ayuda{color:var(--suave);font-size:14px;margin:0 0 16px}
.co-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.co-campo{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--navy);font-size:14px}
.co-campo.ancho{grid-column:1 / -1}
.co-campo .opc{color:var(--suave);font-weight:400}
.co-campo input,.co-campo select{font:inherit;font-weight:400;color:var(--texto);padding:11px 13px;border:1.5px solid var(--borde);border-radius:10px;background:#fff}
.co-campo input:focus,.co-campo select:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(47,111,181,.12)}
.co-campo small{font-weight:400;color:var(--suave);font-size:12.5px}

/* Planes como tarjetas seleccionables */
.planes-radio{display:flex;flex-direction:column;gap:12px}
.plan-radio{display:grid;grid-template-columns:1fr;gap:4px;border:1.5px solid var(--borde);border-radius:12px;padding:16px 18px;cursor:pointer;transition:.12s}
.plan-radio:hover{border-color:var(--acento)}
.plan-radio.sel{border-color:var(--navy);background:#f7faff;box-shadow:0 0 0 3px rgba(29,53,87,.08)}
.plan-radio input{position:absolute;opacity:0}
.pr-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pr-nombre{font-weight:800;color:var(--navy);font-size:16px}
.pr-precio{font-weight:800;color:var(--navy)}
.pr-precio small{font-size:12px;color:var(--suave);font-weight:600}
.pr-det{color:var(--suave);font-size:13px}

/* Resumen (sticky) */
.co-resumen{position:sticky;top:90px}
.resumen-card{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:24px;box-shadow:var(--sombra)}
.resumen-card h3{font-size:16px;margin-bottom:14px}
.resumen-plan{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.resumen-plan #r-plan{font-weight:800;color:var(--navy);font-size:17px}
.resumen-periodo{color:var(--suave);font-size:13px}
.resumen-precio{font-size:36px;font-weight:900;color:var(--navy)}
.resumen-precio small{font-size:14px;color:var(--suave);font-weight:600}
.resumen-incluye{list-style:none;padding:0;margin:16px 0}
.resumen-incluye li{padding:6px 0 6px 24px;position:relative;font-size:14px;color:var(--texto)}
.resumen-incluye li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:900}
.resumen-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0;margin-top:6px;border-top:1px solid var(--borde);font-size:15px}
.resumen-total b{font-size:20px;color:var(--navy)}
.resumen-card .btn{width:100%;margin-top:6px}
.resumen-nota{font-size:12.5px;color:var(--suave);margin:14px 0 0;line-height:1.5}

/* Pago + comprobante */
.pago-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:32px;box-shadow:var(--sombra);text-align:center}
.pago-card h1{margin-bottom:8px}
.pago-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;text-align:left}
.subir-box{background:var(--suave2);border-radius:12px;padding:20px}
.subir-box h3{font-size:16px;margin-bottom:4px}
.subir-box p{color:var(--suave);font-size:14px;margin:0 0 12px}
.subir-box input[type=file]{width:100%;font:inherit;padding:10px;border:1.5px dashed var(--borde);border-radius:10px;background:#fff;margin-bottom:12px}
.subir-box .btn{width:100%}

@media (max-width:860px){
  .checkout-grid{grid-template-columns:1fr}
  .co-resumen{position:static}
  .co-campos{grid-template-columns:1fr}
  .pago-grid{grid-template-columns:1fr}
}

/* ---- Flujo de compra (estado.html) ---- */
.compra{max-width:600px;margin:34px auto;padding:0 20px}
.pasos{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 22px;font-size:13px}
.pasos li{flex:1;text-align:center;padding:9px;border-radius:10px;background:var(--suave2);color:var(--suave)}
.pasos li.activo{background:var(--navy);color:#fff;font-weight:700}
.tarjeta-compra{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:28px;box-shadow:var(--sombra)}
.tarjeta-compra h2{margin:0 0 16px}
.tarjeta-compra label{display:block;margin-bottom:14px;font-weight:600;color:var(--navy)}
.tarjeta-compra input,.tarjeta-compra select,.compra input{width:100%;font:inherit;font-weight:400;padding:11px 13px;border:1.5px solid var(--borde);border-radius:10px;margin-top:6px;color:var(--texto)}
.tarjeta-compra input:focus,.tarjeta-compra select:focus{outline:none;border-color:var(--acento)}
.tarjeta-compra small{display:block;font-weight:400;color:var(--suave);margin-top:6px}
.sub{color:var(--navy);font-size:15px;margin:20px 0 10px;border-top:1px solid var(--borde);padding-top:16px}
.banco{display:grid;gap:9px;background:var(--suave2);border-radius:12px;padding:18px;margin:14px 0}
.banco div{display:flex;justify-content:space-between;gap:12px}
.banco span{color:var(--suave)}
.error{background:#fbe9e7;color:#b3261e;padding:10px 13px;border-radius:10px}
.estado-resultado{margin-top:16px;background:var(--suave2);padding:16px;border-radius:10px}
.nota{font-size:14px;color:var(--suave)}

.oculto{display:none}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .hero h1{font-size:36px}
  .franja{grid-template-columns:repeat(2,1fr)}
  .cards,.pasos-grid,.planes,.ben-grid,.tut-grid,.pie-cols{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr;max-width:560px}
  .os-cards{grid-template-columns:1fr;max-width:420px}
  .nav-links{display:none}
  .plan.destacado{transform:none}
}