/* ===== Sitio público ===== */
:root {
    --marca: #0d3b66;          /* se sobrescribe con el color de Configuración */
    --marca-oscuro: #092a4a;
    --acento: #11a8e0;
}
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2937; }
section { scroll-margin-top: 72px; }

/* Botones de marca: se definen las variables de Bootstrap para que el hover NO quede en blanco */
.btn-marca {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--marca);
    --bs-btn-border-color: var(--marca);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--acento);
    --bs-btn-hover-border-color: var(--acento);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--marca-oscuro);
    --bs-btn-active-border-color: var(--marca-oscuro);
    --bs-btn-focus-shadow-rgb: 17, 168, 224;
}
.btn-acento {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--acento);
    --bs-btn-border-color: var(--acento);
    --bs-btn-hover-color: var(--marca);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--marca);
    --bs-btn-active-bg: #e9f6fc;
    --bs-btn-active-border-color: #e9f6fc;
}
.text-marca { color: var(--marca) !important; }
.bg-marca { background: var(--marca) !important; }

/* Navegación */
.web-nav { background: var(--marca); }
.web-nav .nav-link { color: rgba(255,255,255,.85); font-weight: 500; }
.web-nav .nav-link:hover, .web-nav .nav-link:focus { color: #fff; }

/* Hero */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(17,168,224,.35), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(255,255,255,.08), transparent 40%),
        linear-gradient(135deg, var(--marca-oscuro), var(--marca));
}
.hero h1 { font-weight: 800; letter-spacing: -.02em; }
.hero .lead { opacity: .85; }
.hero-check li { margin-bottom: .45rem; }
.hero-check i { color: var(--acento); }
.hero-visual {
    border: 1px solid rgba(255,255,255,.15); border-radius: 1.25rem;
    background: rgba(255,255,255,.06); backdrop-filter: blur(4px);
}
.hero-visual .barra { height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.hero-visual .barra span { display: block; height: 100%; background: var(--acento); border-radius: 4px; }

/* Secciones */
.titulo-seccion { font-weight: 700; letter-spacing: -.01em; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--acento); }
.seccion-gris { background: #f4f7fb; }

/* Planes */
.plan-card { border: 1px solid #e5e9f0; border-radius: 1rem; transition: transform .2s ease, box-shadow .2s ease; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(13,59,102,.12); }
.plan-card.destacado { border: 2px solid var(--acento); }
.plan-card .precio { font-size: 2.2rem; font-weight: 800; color: var(--marca); }
.plan-card .cinta {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--acento); color: #fff; font-size: .75rem; font-weight: 700;
    padding: .25rem .9rem; border-radius: 2rem; white-space: nowrap;
}
.nav-grupos .nav-link { color: var(--marca); border-radius: 2rem; }
.nav-grupos .nav-link.active { background: var(--marca); color: #fff; }

/* Ventajas */
.icono-ventaja {
    width: 56px; height: 56px; border-radius: 1rem; display: grid; place-items: center;
    background: rgba(17,168,224,.12); color: var(--marca); font-size: 1.6rem;
}

/* Soporte */
.banda-soporte { background: linear-gradient(135deg, var(--marca), var(--marca-oscuro)); color: #fff; border-radius: 1.25rem; }

/* Footer */
.web-footer { background: #0b1f33; color: rgba(255,255,255,.7); }
.web-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.web-footer a:hover { color: #fff; }

/* Pedido */
.ciclo-opcion { cursor: pointer; border: 2px solid #e5e9f0; border-radius: .75rem; transition: border-color .15s; }
.ciclo-opcion:hover { border-color: var(--acento); }
.btn-check:checked + .ciclo-opcion { border-color: var(--marca); background: rgba(13,59,102,.05); }
.resumen-pedido { position: sticky; top: 88px; }

/* WhatsApp flotante */
.wsp-flotante { width: 56px; height: 56px; z-index: 1030; }