:root{--azul: #1a3a6b;--azul-claro: #2c5aa0;--gris-bg: #f5f6f8;--ok: #1a7f37;--err: #cf222e;--pend: #9a6700;--borde: #d0d7de;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--gris-bg);color:#1f2328}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{background:var(--azul);color:#fff;padding:14px 24px;display:flex;align-items:center;gap:24px;box-shadow:0 1px 4px #00000026}.brand{font-weight:700;font-size:18px}.navbar nav{display:flex;gap:8px}.nav-link{color:#fff;text-decoration:none;padding:6px 12px;border-radius:6px;opacity:.85}.nav-link.active{background:#ffffff2e;opacity:1}.container{max-width:760px;width:100%;margin:32px auto;padding:0 16px;flex:1}.page{background:#fff;border:1px solid var(--borde);border-radius:10px;padding:28px}.page h1{margin-top:0;color:var(--azul)}.subtitle{color:#57606a;margin-top:4px}.paquetes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:20px 0}.paquete{border:2px solid var(--borde);border-radius:8px;padding:16px;background:#fff;cursor:pointer;text-align:center;transition:.15s}.paquete:hover{border-color:var(--azul-claro)}.paquete.selected{border-color:var(--azul);background:#eef3fb}.paq-cant{display:block;font-size:22px;font-weight:700;color:var(--azul)}.paq-precio{display:block;font-size:14px;color:#57606a}.form-grid{display:grid;gap:10px;margin:16px 0}.form-grid input{padding:10px 12px;border:1px solid var(--borde);border-radius:6px;font-size:15px}.form-grid input:focus{outline:2px solid var(--azul-claro);border-color:var(--azul-claro)}.form-grid input[readonly]{background:#eef1f4;color:#444;cursor:not-allowed}.form-grid input[readonly]:focus{outline:none;border-color:var(--borde)}.estado-lookup{color:#57606a;font-size:14px;margin:4px 0 8px}.estado-ok{color:var(--ok);font-size:14px;font-weight:600;margin:4px 0 8px}.estado-error{color:var(--err);font-size:14px;margin:4px 0 8px}.factura-check,.recaptcha-fake{display:flex;align-items:center;gap:8px;color:#57606a;margin:12px 0}.recaptcha-placeholder{border:1px solid var(--borde);border-radius:6px;padding:12px;margin:12px 0}.factura-campos{display:grid;gap:10px;margin:0 0 12px;border:1px solid var(--borde);border-radius:6px;padding:12px;background:#f8fafd}.factura-campos select,.factura-campos input{padding:10px 12px;border:1px solid var(--borde);border-radius:6px;font-size:15px;background:#fff;width:100%}.factura-campos select:focus,.factura-campos input:focus{outline:2px solid var(--azul-claro);border-color:var(--azul-claro)}.factura-titulo{font-weight:700;color:var(--azul);margin:0 0 2px}.factura-ayuda{color:#57606a;font-size:13px;margin:2px 0 0}.metodo-selector{display:flex;gap:10px;margin:12px 0 20px;flex-wrap:wrap}.metodo-card{flex:1;min-width:120px;border:2px solid var(--borde);border-radius:8px;padding:12px;cursor:pointer;text-align:center;transition:.15s}.metodo-card.selected{border-color:var(--azul);background:#eef3fb}.metodo-card input{display:none}.metodo-label{display:block;font-weight:600}.metodo-desc{display:block;font-size:12px;color:#6e7781}.btn-primario,.btn-pagar{background:var(--azul);color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:16px;font-weight:600;cursor:pointer;width:100%}.btn-primario:hover,.btn-pagar:hover{background:var(--azul-claro)}.btn-primario:disabled,.btn-pagar:disabled{opacity:.6;cursor:not-allowed}.btn-secundario{display:inline-block;background:#fff;color:var(--azul);border:1px solid var(--azul);border-radius:8px;padding:10px 18px;text-decoration:none;font-weight:600}.resumen-pago{background:var(--gris-bg);border-radius:8px;padding:14px;margin-bottom:16px}.resumen-pago .monto{font-size:20px;color:var(--azul);margin-top:4px}.checkout-form{display:flex;flex-direction:column;gap:16px}.checkout-wrapper{margin-top:24px;border-top:1px solid var(--borde);padding-top:20px}.error-message{background:#ffeef0;color:var(--err);border:1px solid #ffd4d9;border-radius:6px;padding:10px;margin-top:12px}.estado-pago{text-align:center;padding:24px}.estado-icon{font-size:48px}.estado-pago h2{margin:8px 0}.estado-pago.ok h2{color:var(--ok)}.estado-pago.err h2{color:var(--err)}.estado-pago.pend h2{color:var(--pend)}.estado-error{color:var(--err)}.monto{font-size:22px;font-weight:700}.concepto{color:#57606a}.ayuda{color:#6e7781;font-size:14px;max-width:420px;margin:16px auto}.acciones{margin-top:24px;text-align:center}.redirect-info{background:#fff8c5;padding:10px;border-radius:6px;color:var(--pend)}.footer{text-align:center;padding:16px;color:#6e7781}