@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@700;800&display=swap');

:root {
    --navy: #0B1E3D;
    --navy-deep: #071429;
    --blue: #2563EB;
    --blue-dark: #1D4ED8;
    --ink: #12151C;
    --gray: #6B7280;
    --border: #E4E7EC;
    --bg: #F5F7FA;
    --white: #FFFFFF;
    --verde: #12B886;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', Arial, sans-serif; background: var(--white); color: var(--ink); font-size: 15px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* Barra superior */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 30px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 10;
}
.topbar .marca { display: flex; align-items: center; gap: 8px; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 20px; color: var(--navy); }
.topbar .marca .icono { width: 26px; height: 26px; background: var(--blue); border-radius: 7px; display:inline-block; }
.hamburguesa { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; cursor: pointer; background: #fff; }
.hamburguesa div { width: 20px; height: 2px; background: var(--ink); margin: 4px 0; }

/* Menú desplegable */
.menu-publico { display: none; padding: 10px 20px 20px; border-bottom: 1px solid var(--border); }
.menu-publico.abierto { display: block; }
.menu-publico a { display: block; padding: 10px 0; color: var(--ink); font-size: 15px; }
.menu-publico .botones { display: flex; gap: 10px; margin-top: 10px; }
.menu-publico .botones a { flex: 1; text-align: center; padding: 11px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.btn-outline { border: 1px solid var(--navy); color: var(--navy) !important; }
.btn-solido { background: var(--navy); color: #fff !important; }

/* Hero */
.hero {
    background: linear-gradient(160deg, var(--navy-deep), var(--blue) 140%);
    color: #fff; padding: 56px 30px 68px;
}
.hero .pill { display: inline-block; background: rgba(255,255,255,.15); padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; margin-bottom: 18px; }
.hero h1 { font-family: 'Manrope', sans-serif; font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 18px; letter-spacing: -0.5px; }
.hero p { color: #D6E0F5; font-size: 16px; line-height: 1.65; margin-bottom: 28px; max-width: 560px; }
.hero .acciones { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.hero .acciones a { text-align: center; padding: 13px; border-radius: 10px; font-weight: 700; font-size: 14.5px; }
.hero .acciones .primario { background: #fff; color: var(--navy); }
.hero .acciones .secundario { border: 1px solid rgba(255,255,255,.5); color: #fff; }

/* Beneficios */
.beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 24px; padding: 48px 30px; text-align: center; }
.beneficio .icono { font-size: 26px; color: var(--blue); margin-bottom: 12px; }
.beneficio h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.beneficio p { font-size: 13.5px; color: var(--gray); line-height: 1.5; }

/* Sección planes */
.seccion-planes { background: var(--bg); padding: 52px 30px; }
.seccion-planes h2 { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.seccion-planes .sub { color: var(--gray); font-size: 14px; margin-bottom: 18px; }
.ver-catalogo { display: inline-block; border: 1px solid var(--navy); color: var(--navy); padding: 12px 20px; border-radius: 30px; font-weight: 600; font-size: 14px; margin-bottom: 24px; }

.plan-card { background: #fff; border-radius: 18px; padding: 28px; margin-bottom: 20px; border: 1px solid var(--border); }
.plan-card .etiqueta { display: inline-flex; align-items: center; gap: 6px; background: #F0F3F9; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.plan-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.plan-card .desc { color: var(--gray); font-size: 13.5px; margin-bottom: 16px; }
.precio-fila {
    display: flex; justify-content: space-between; align-items: center;
    border: 1.5px solid var(--navy); border-radius: 30px; padding: 12px 18px; margin-bottom: 10px;
    font-weight: 700; color: var(--navy); font-size: 14.5px;
}
.precio-fila span:first-child { font-weight: 500; color: #3A4152; }
.plan-card .comprar { display: block; text-align: center; background: var(--blue); color: #fff; padding: 13px; border-radius: 10px; font-weight: 700; margin-top: 14px; }

/* Ya eres cliente */
.ya-cliente { padding: 40px 24px; }
.ya-cliente h2 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.ya-cliente p { color: var(--gray); font-size: 14px; margin-bottom: 18px; line-height: 1.6; }
.ya-cliente .botones { display: flex; gap: 10px; }
.ya-cliente .botones a { flex: 1; text-align: center; padding: 13px; border-radius: 10px; font-weight: 700; font-size: 14px; }

/* Footer */
footer.publico { border-top: 1px solid var(--border); padding: 24px; }
footer.publico .contacto { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--gray); margin-bottom: 16px; }
footer.publico .legal { font-size: 12px; color: #9AA4B2; border-top: 1px solid var(--border); padding-top: 16px; }
footer.publico .legal a { color: var(--gray); margin-right: 14px; }

/* Registro (wizard) */
.registro-body { background: var(--navy-deep); color: #fff; min-height: 100vh; }
.registro-header { padding: 30px 24px 10px; }
.registro-header h1 { font-family:'Manrope',sans-serif; font-size: 26px; font-weight: 800; }
.registro-header .paso { color: #8DA0C4; font-size: 13px; margin-top: 4px; }
.barra-progreso { height: 6px; background: rgba(255,255,255,.12); border-radius: 4px; margin: 14px 24px 26px; overflow: hidden; }
.barra-progreso div { height: 100%; background: linear-gradient(90deg, #5B9DFF, var(--verde)); }

.registro-form { padding: 0 24px 40px; }
.campo-icono { position: relative; margin-bottom: 14px; }
.campo-icono input, .campo-icono select {
    width: 100%; padding: 14px 14px 14px 44px; border-radius: 10px; border: none;
    background: rgba(255,255,255,.08); color: #fff; font-size: 14.5px;
}
.campo-icono input::placeholder { color: #8DA0C4; }
.campo-icono .icono { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .8; }

.registro-recaptcha { background: #fff; color: #222; border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 10px; margin: 18px 0; font-size: 13.5px; }

.registro-acciones { display: flex; gap: 12px; margin-top: 10px; }
.registro-acciones button, .registro-acciones a { flex: 1; text-align: center; padding: 14px; border-radius: 30px; font-weight: 700; font-size: 14.5px; border: none; }
.btn-volver { background: transparent; border: 1px solid rgba(255,255,255,.3) !important; color: #fff; }
.btn-continuar { background: linear-gradient(90deg, var(--blue), #38BDF8); color: #fff; }

/* ===== Secciones extendidas estilo landing moderna ===== */
.eyebrow { color: var(--verde); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display:flex; align-items:center; gap:8px; margin-bottom: 10px; }
.eyebrow::before { content:''; width:20px; height:2px; background: var(--verde); display:inline-block; }

.hero .stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }
.hero .stats span { border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.hero .stats b { font-weight: 800; }

.estado-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 18px; margin-top: 10px; }
.estado-card .puntos { display:flex; gap:6px; margin-bottom: 10px; }
.estado-card .puntos span { width:9px; height:9px; border-radius:50%; }
.estado-card .titulo { color:#B7C2D6; font-size:12.5px; font-weight:600; margin-bottom:12px; }
.estado-card .bloque-blanco { background:#fff; border-radius:10px; padding:16px; display:flex; justify-content:space-between; align-items:center; color:var(--ink); }
.estado-card .bloque-blanco .estacion { font-size:13px; color:var(--gray); }
.estado-card .bloque-blanco .nombre { font-weight:800; font-size:15px; margin-top:2px; }
.estado-card .en-linea { color: var(--verde); font-weight:800; font-size:13px; display:flex; align-items:center; gap:5px; }
.estado-card .metricas { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.estado-card .metricas div { background: rgba(255,255,255,.05); border-radius:8px; padding:10px 12px; }
.estado-card .metricas .etq { color:#8DA0C4; font-size:11.5px; }
.estado-card .metricas .val { font-weight:800; font-size:14px; margin-top:2px; }

.seccion-blanca { padding: 56px 30px; }
.seccion-blanca h2 { font-family:'Manrope',sans-serif; font-size: 27px; font-weight: 800; line-height:1.3; margin-bottom: 24px; letter-spacing: -0.3px; }
.seccion-gris { background: var(--bg); }
.seccion-oscura { background: var(--navy-deep); color:#fff; }
.seccion-oscura .eyebrow { color:#5EE6C0; }

.categoria-titulo { color: var(--blue); font-weight: 800; font-size: 12.5px; letter-spacing:.05em; text-transform:uppercase; margin: 24px 0 12px; }
.servicio-card { border-left: 3px solid var(--blue); border: 1px solid var(--border); border-left-width:3px; border-radius: 14px; padding: 26px; margin-bottom: 16px; background:#fff; }
.servicio-card .icono-caja { width:44px; height:44px; background:#EEF2FF; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.servicio-card h3 { font-size: 16px; font-weight: 800; margin-bottom:6px; }
.servicio-card p { color: var(--gray); font-size:13.5px; line-height:1.5; }

.audiencia-card { border:1px solid var(--border); border-radius:16px; padding:28px; margin-bottom:16px; background:#fff; }
.audiencia-card .icono-caja { width:44px; height:44px; background:#EEF2FF; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.audiencia-card h3 { font-size:16px; font-weight:800; margin-bottom:6px; }
.audiencia-card p { color: var(--gray); font-size:13.5px; }

.logos-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding: 36px 30px; }
.logos-grid span { border:1px solid var(--border); border-radius:10px; padding:14px; display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:#3A4152; justify-content:center; }

.soporte-card { text-align:center; border:1px solid var(--border); border-radius:14px; padding:30px 20px; margin: 0 24px 30px; }
.soporte-card .icono { font-size:28px; color:var(--blue); margin-bottom:12px; }
.soporte-card h3 { font-size:17px; font-weight:800; margin-bottom:8px; }
.soporte-card p { color:var(--gray); font-size:13.5px; line-height:1.6; }

/* ===== Opciones de método de pago (registro) ===== */
.opcion-pago {
    display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 12px 16px;
    margin-bottom: 10px; color: #fff; font-size: 14px; cursor: pointer;
}
.opcion-pago:hover { border-color: #2563EB; }
.opcion-pago input { width: auto; margin: 0; }