/* ===============================
   Marca, tipografía y variables
   =============================== */
:root { /* Paleta de marca */
    --brand-dark: #0f2d57;
    --brand-primary: #446c9e;
    --brand-light: #ffffff;
    --brand-accent: #00c2ff; /* usada en badges de TV y gradientes */
    /* Integramos con Bootstrap */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 68,108,158; /* rgb de #446c9e */
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--brand-primary), black 20%);
}

/* Tipografía global */
html, body {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: #0f2d57; /* texto base */
}

/* Fallback si el navegador no soporta color-mix */
@supports not (color: color-mix(in srgb, black, white)) {
    a {
        color: var(--brand-primary);
    }

        a:hover {
            color: #3b5f8f;
        }
    /* tono más oscuro */
}

/* ===============================
   Navbar (usa tu paleta)
   =============================== */
.navbar {
    background-color: var(--brand-light);
}

    .navbar .navbar-brand,
    .navbar .nav-link {
        color: var(--brand-dark);
    }

        .navbar .nav-link:hover {
            color: var(--brand-primary);
        }

        /* Estado activo */
        .navbar .nav-link.active {
            color: var(--brand-primary);
            border-bottom: 2px solid currentColor;
            font-weight: 600;
        }

    /* Tamaños y gaps (mobile-first) */
    .navbar .nav-link {
        padding: .6rem .9rem;
        font-size: 1.05rem;
    }

    .navbar .navbar-nav {
        gap: .5rem;
    }

@media (min-width: 992px) {
    .navbar .nav-link {
        padding: .5rem 1rem;
        font-size: 1.05rem;
    }

    .navbar .navbar-nav {
        gap: 1rem;
    }
}

/* Subrayado animado en hover */
.navbar .nav-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .2s, color .2s, background-color .2s;
}

    .navbar .nav-link:hover {
        background-size: 100% 2px;
    }

/* Botones primarios con tu color */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary), black 10%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary), black 10%);
    --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary), black 15%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary), black 15%);
}

/* ===============================
   Hero / Carrusel
   =============================== */
.hero {
    background: radial-gradient(120% 120% at 50% 0%, rgba(var(--bs-primary-rgb), .08), transparent 60%);
}

/* Altura responsiva y recorte de imagen */
.hero-carousel .carousel-item {
    height: clamp(220px, 42vw, 520px); /* móvil -> desktop */
}

    .hero-carousel .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Indicadores del carrusel */
.hero-carousel .carousel-indicators {
    bottom: -1.2rem;
}

    .hero-carousel .carousel-indicators [data-bs-target] {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--brand-dark);
        opacity: .25;
    }

    .hero-carousel .carousel-indicators .active {
        opacity: .95;
        background-color: var(--brand-primary);
    }

/* Botón "Más información" */
.hero-info-btn {
    border-radius: 9999px;
    padding: .5rem 1rem;
    font-size: .95rem;
    min-height: 44px;
    color: var(--brand-dark);
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.18);
    box-shadow: 6px 6px 0 rgba(0,0,0,.2);
    transition: transform .1s, box-shadow .1s;
}

    .hero-info-btn:hover {
        transform: translateY(-1px);
        box-shadow: 8px 8px 0 rgba(0,0,0,.22);
    }

@media (min-width: 768px) {
    .hero-info-btn {
        padding: .7rem 1.25rem;
        font-size: 1.05rem;
    }
    /* ~16.8px */
}

/* Tarjetas de acciones bajo el hero */
.action-card {
    background: #fff;
    border: 1.5px solid rgba(0,0,0,.24);
    border-radius: .5rem;
    box-shadow: 6px 6px 0 rgba(0,0,0,.15);
    transition: transform .1s, box-shadow .1s;
}

    .action-card:focus,
    .action-card:hover {
        transform: translateY(-2px);
        box-shadow: 8px 8px 0 rgba(0,0,0,.2);
        outline: none;
    }

/* Scroll suave para anclas (#planes) */
html {
    scroll-behavior: smooth;
}

/* Botón que invita a bajar (bounce sutil) */
.jump-to-plans {
    position: relative;
    border-radius: 9999px;
    padding: .7rem 1.4rem;
    box-shadow: 6px 6px 0 rgba(0,0,0,.15);
    transition: transform .15s, box-shadow .15s;
    animation: bounceY 1.6s ease-in-out infinite;
}

    .jump-to-plans:hover {
        transform: translateY(-2px);
        box-shadow: 8px 8px 0 rgba(0,0,0,.18);
    }

@keyframes bounceY {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .jump-to-plans {
        animation: none;
    }
}

/* ===============================
   Caja del estado inicial de planes
   (por si la usas en otra vista)
   =============================== */
.plans-box {
    width: 100%;
    max-width: 1120px; /* ajústalo si quieres */
    background: #fff;
    border: 2px solid rgba(0,0,0,.85);
    border-radius: .75rem;
    box-shadow: 8px 8px 0 rgba(0,0,0,.2);
    padding-inline: 1.25rem;
}

/* Variables de altura para ocupar casi una pantalla en "planes-box-full" */
:root {
    --planes-head: 220px; /* h2 + h3 + p + márgenes */
    --planes-cta: 120px; /* botón "Validar cobertura" + nota */
}

.plans-box-full {
    min-height: calc(100vh - var(--planes-head) - var(--planes-cta));
    display: grid;
    place-items: center;
    padding-block: 2rem;
}

@supports (min-height: 100dvh) {
    .plans-box-full {
        min-height: calc(100dvh - var(--planes-head) - var(--planes-cta));
    }
}

@media (max-width: 575.98px) {
    :root {
        --planes-head: 180px;
        --planes-cta: 96px;
    }
}

/* Botón tipo “chip” (pestañas/selector genérico) */
.btn-chip {
    border-radius: 9999px;
    padding: .55rem 1.1rem;
    border: 1.5px solid rgba(0,0,0,.55);
    background: #fff;
    color: var(--brand-dark);
    box-shadow: 4px 4px 0 rgba(0,0,0,.18);
    transition: transform .1s, box-shadow .1s, background-color .1s, color .1s;
    font-weight: 500;
}

    .btn-chip:hover {
        transform: translateY(-1px);
        box-shadow: 6px 6px 0 rgba(0,0,0,.22);
    }

    .btn-chip.active,
    .btn-chip.btn-primary {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

/* ===============================
   NUEVO: Sección de precios/planes
   =============================== */
/* Titulares */
.title {
    color: var(--brand-dark);
}

.subtitle {
    color: royalblue;
}


/* Toggle (Sin TV / Con TV) */
.toggle .btn {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 600;
}

    .toggle .btn.active,
    .toggle .btn:hover {
        background: var(--brand-primary);
        color: #fff;
    }

/* Tarjetas de planes */
.plan-card {
    border: 1px solid rgba(15,45,87,.12);
    border-radius: 1.25rem;
    box-shadow: 0 6px 20px rgba(15,45,87,.08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .plan-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 32px rgba(15,45,87,.18);
        border-color: rgba(15,45,87,.25);
    }

/* Velocidad/precio destacados */
.speed {
    font-weight: 700;
    color: var(--brand-primary);
}

/* Separador decorativo */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15,45,87,.2), transparent);
}

/* Botón de marca dentro de tarjetas */
.btn-brand {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary), black 12%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary), black 12%);
    --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary), black 18%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary), black 18%);
    color: #fff;
}

/* Destacado / recomendado */
.featured {
    border: 2px solid var(--brand-primary);
    position: relative;
}

    .featured::after {
        content: "Recomendado";
        position: absolute;
        top: -0.75rem;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
        color: #fff;
        font-size: .75rem;
        letter-spacing: .02em;
        padding: .35rem .6rem;
        border-radius: 999px;
        box-shadow: 0 6px 14px rgba(68,108,158,.25);
    }

/* Lista de características */
.feature {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

    .feature svg {
        flex: 0 0 auto;
        margin-top: .2rem;
    }

/* Badge +TV */
.tv-badge {
    display: inline-block;
    background: rgba(0, 194, 255, .12);
    color: var(--brand-accent);
    border: 1px solid rgba(0, 194, 255, .35);
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* Textos y ajustes generales de tarjetas */
.card-title {
    color: var(--brand-dark);
}

.card p {
    margin-bottom: .5rem;
}

.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(0,0,0,.08);
    z-index: 1030;
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: 84px;
    }
}





.info-card {
    /* Fondo degradado sutil */
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden; /* Para que la imagen con bordes no se salga */
}

    /* Efecto al pasar el cursor */
    .info-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    }

    .info-card h1 {
        /* Estilo de texto elegante y moderno */
        font-family: 'Montserrat', sans-serif;
        color: #334e68;
        font-weight: 700;
        border-bottom: 2px solid #5a7b97; /* Línea decorativa */
        padding-bottom: 10px;
    }

    .info-card p {
        /* Texto secundario con estilo claro */
        font-family: 'Roboto', sans-serif;
        color: #5a7b97;
        line-height: 1.6;
    }

    .info-card .img-fluid {
        /* Bordes redondeados para la imagen */
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

/* Para dispositivos móviles */
@media (max-width: 768px) {
    .info-card {
        padding: 25px;
    }

        .info-card .img-fluid {
            margin-top: 20px;
        }
}

/* Igualar estilo de #btnConTv (toggle) en los botones Contratar */
.contratar-btn {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 600;
}

    .contratar-btn:hover,
    .contratar-btn:focus {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

    /* Mantener ancho completo y altura cómoda */
    .contratar-btn.w-100 {
        padding: .6rem 1rem;
        border-radius: .5rem;
    }
.contratar-btn-neg {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
    .contratar-btn-neg:focus {
        border-color: var(--brand-primary);
        color: var(--brand-primary);
        font-weight: 600;
    }



/* ============================
   Mosaico TV – Archivo Completo
   ============================ */

.tv-mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 70px;
    gap: 1rem;
}

.tile {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15,45,87,.12);
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(15,45,87,.08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    background: #fff;
}

    .tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .tile:hover {
        transform: scale(1.03);
        box-shadow: 0 18px 32px rgba(0,0,0,.25);
        border-color: rgba(15,45,87,.35);
    }

    .tile::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
        opacity: 0.45;
        transition: opacity .3s ease;
    }

    .tile:hover::after {
        opacity: 0.75;
    }

/* ===== Tamaños según las dimensiones reales ===== */

/* 945×354: Deportes, Infantil */
.tile--wide-xl {
    grid-column: span 6;
    grid-row: span 3;
}

/* 591×354: Documentales, Internacional */
.tile--wide {
    grid-column: span 4;
    grid-row: span 3;
}

/* 709×827: Películas */
.tile--tall-xl {
    grid-column: span 3;
    grid-row: span 6;
}

/* 945×236: Variedad */
.tile--banner-wide {
    grid-column: span 6;
    grid-row: span 2;
}

/* 709×236: Noticias */
.tile--banner {
    grid-column: span 4;
    grid-row: span 2;
}

/* 472×236: Religiosos */
.tile--square-sm {
    grid-column: span 2;
    grid-row: span 2;
}

/* ========== Responsive Tablet ========== */
@media (max-width: 991.98px) {
    .tv-mosaic {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 64px;
    }

    .tile--wide-xl {
        grid-column: span 6;
        grid-row: span 3;
    }

    .tile--wide {
        grid-column: span 6;
        grid-row: span 3;
    }

    .tile--tall-xl {
        grid-column: span 3;
        grid-row: span 6;
    }

    .tile--banner-wide,
    .tile--banner {
        grid-column: span 6;
        grid-row: span 2;
    }

    .tile--square-sm {
        grid-column: span 3;
        grid-row: span 2;
    }
}

/* ========== Responsive Móvil ========== */
@media (max-width: 575.98px) {
    .tv-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 120px;
    }

    .tile--wide-xl,
    .tile--wide,
    .tile--tall-xl,
    .tile--banner-wide,
    .tile--banner {
        grid-column: span 2;
        grid-row: span 1;
    }

    .tile--square-sm {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Botón con pequeño "bounce" (reusa tu estilo) */
.btn-cta-bounce {
    animation: bounceY 1.6s ease-in-out infinite;
    border-radius: 9999px;
}

@keyframes bounceY {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}
















/* ===== Footer Zafiro ===== */
.site-footer {
    background: var(--brand-dark);
    color: rgba(255,255,255,.92);
    position: relative;
    box-shadow: 0 -18px 40px rgba(15,45,87,.18); /* sombreado superior suave */
}

    /* Texto y enlaces del footer */
    .site-footer .footer-title {
        font-size: .9rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #e7eef8;
        margin-bottom: .75rem;
    }

    .site-footer a.link-footer {
        color: #e7eef8;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: color .15s ease, border-color .15s ease;
    }

        .site-footer a.link-footer:hover {
            color: #ffffff;
            border-color: rgba(255,255,255,.3);
        }

/* Lista de cobertura en columnas en pantallas medianas+ */
.coverage-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .coverage-list {
        columns: 2;
        column-gap: 1.25rem;
    }
}

.coverage-list li {
    break-inside: avoid;
    margin-bottom: .35rem;
}

/* Botones sociales circulares */
.footer-social .btn.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    color: #e7eef8;
    transition: all .15s ease;
}

    .footer-social .btn.btn-icon:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
        border-color: rgba(255,255,255,.6);
    }

/* Legal en lista compacta */
.footer-legal li {
    margin-bottom: .25rem;
}

/* Franja inferior */
.footer-bottom {
    background: rgba(0,0,0,.12);
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
}

/* Accesibilidad: alto contraste en íconos */
.site-footer .fa-solid,
.site-footer .fa-brands {
    opacity: .95;
}




/*FIBRA*/
/* ===== Animación fibra: versión más suave y delicada ===== */

/* Cables: trazo un poco más delgado, más duración y easing suave */
.cable {
    fill: none;
    stroke-width: 5; /* antes 6 */
    stroke-linecap: round;
    filter: url(#glowCable);
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: .80;
    /* dibujo + leve “fade” para que no aparezca brusco */
    animation: cableDraw 1.8s cubic-bezier(.22,.61,.36,1) forwards, cableFade .8s ease-out forwards;
    animation-play-state: paused; /* se activa con .play */
}

/* escalonamos un poco más los tiempos */
#fibra-hero.play #c1 {
    animation-delay: .20s, .20s;
    animation-play-state: running;
}

#fibra-hero.play #c2 {
    animation-delay: .90s, .90s;
    animation-play-state: running;
}

#fibra-hero.play #c3 {
    animation-delay: 1.60s, 1.60s;
    animation-play-state: running;
}

@keyframes cableDraw {
    to {
        stroke-dashoffset: 0;
        opacity: .95;
    }
}

@keyframes cableFade {
    from {
        opacity: .70;
    }

    to {
        opacity: .95;
    }
}

/* Ventanas: encendido más gradual + micro “pop” muy sutil */
.house .window {
    fill: #cbd5e1; /* apagado */
    transform-origin: center;
    transition: fill .25s ease-out, filter .25s ease-out;
}

@keyframes lightUp {
    0% {
        fill: #cbd5e1;
    }

    100% {
        fill: #ffe082;
        filter: drop-shadow(0 0 8px rgba(255,224,130,.70));
    }
}

@keyframes windowPop {
    0% {
        transform: scale(.985);
    }

    100% {
        transform: scale(1);
    }
}

/* tiempos un poco más largos y espaciados */
#fibra-hero.play #house1 .window {
    animation: lightUp .70s ease-out forwards, windowPop .45s ease-out forwards;
    animation-delay: 1.10s, 1.10s;
}

#fibra-hero.play #house2 .window {
    animation: lightUp .70s ease-out forwards, windowPop .45s ease-out forwards;
    animation-delay: 1.70s, 1.70s;
}

#fibra-hero.play #house3 .window {
    animation: lightUp .70s ease-out forwards, windowPop .45s ease-out forwards;
    animation-delay: 2.30s, 2.30s;
}

/* Badge “Velocidad de la luz”: aparece con blur->nítido y ease suave */
.speed-badge {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(1px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}

#fibra-hero.play .speed-badge {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition-delay: 2.7s, 2.7s, 2.7s;
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .cable {
        animation: none;
        stroke-dashoffset: 0;
        opacity: .95;
    }

    #fibra-hero .window {
        fill: #ffe082 !important;
        filter: none !important;
    }

    #fibra-hero .speed-badge {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}


/* Grid de beneficios */
.feature-list .benefit {
    background: #fff;
    border: 1px solid rgba(15,45,87,.12);
    border-radius: .85rem;
    box-shadow: 0 6px 18px rgba(15,45,87,.08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .feature-list .benefit:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(15,45,87,.14);
        border-color: rgba(15,45,87,.2);
    }

/* Icono circular con color de marca */
.benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    background: color-mix(in srgb, var(--brand-primary), white 82%);
    color: var(--brand-dark);
}

    .benefit-icon i {
        font-size: 1rem;
    }





   Estilos específicos para la vista Nosotros
   Usa variables definidas en styles.css (:root)
*/

/* Recuadro principal */
.about-card {
    border-radius: 16px;
    border: 1px solid rgba(15,45,87,0.06);
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,252,255,0.98));
    box-shadow: 0 10px 30px rgba(15,45,87,0.04);
    margin-bottom: 1.5rem;
}

/* HERO */
.about-hero {
    padding: 2.25rem 0 1rem 0;
    background: transparent; /* ya está dentro del about-card */
}

    .about-hero .lead {
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--brand-dark);
        max-width: 70ch;
    }

/* Info header (icono + titulo) */
.info-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}

.info-icon {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary), white 85%);
    color: var(--brand-primary);
    box-shadow: 0 6px 18px rgba(68,108,158,0.06);
}

/* Valores (grid responsive) */
.values-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Tarjeta de valor */
.value-card {
    padding: 1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(15,45,87,0.06);
    box-shadow: 0 8px 20px rgba(15,45,87,0.05);
    text-align: center;
}

/* Icono del valor centrado arriba */
.value-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto .6rem auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-primary), white 90%);
    color: var(--brand-primary);
    box-shadow: 0 8px 20px rgba(68,108,158,0.06);
}

/* Titulos y parrafos dentro de tarjetas */
.value-card h3 {
    margin-top: .35rem;
    margin-bottom: .45rem;
    color: var(--brand-dark);
}

.value-card p {
    margin-bottom: 0;
    color: rgba(15,45,87,0.75);
}

/* Objetivo 2025 */
.objective-2025 {
    background: linear-gradient(90deg, rgba(0,194,255,0.04), rgba(68,108,158,0.02));
    padding: 1rem;
    border-radius: 10px;
    border: 1px dashed rgba(68,108,158,0.06);
}

/* Equipo técnico (grid de miembros) */
.team-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 0.75rem;
}

.team-member {
    background: #fff;
    border-radius: 10px;
    padding: 0.9rem;
    text-align: center;
    border: 1px solid rgba(15,45,87,0.06);
    box-shadow: 0 8px 18px rgba(15,45,87,0.04);
}

    .team-member img {
        width: 92px;
        height: 92px;
        object-fit: cover;
        border-radius: 999px;
        margin-bottom: 0.5rem;
        box-shadow: 0 8px 18px rgba(15,45,87,0.06);
    }

/* CTA para verificar cobertura */
.contact-cta {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(68,108,158,0.08);
}

/* Botón chip (reusa variable de marca) */
.btn-chip {
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(15,45,87,0.12);
    background: #fff;
    color: var(--brand-dark);
    box-shadow: 0 6px 16px rgba(15,45,87,0.06);
    font-weight: 600;
}

    .btn-chip.active {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

/* Pequeños ajustes responsivos */
@media (max-width: 575.98px) {
    .about-card {
        padding: 1rem;
        border-radius: 12px;
    }

    .about-hero {
        padding: 1.25rem 0;
    }

        .about-hero .lead {
            font-size: 1rem;
        }

    .team-member img {
        width: 78px;
        height: 78px;
    }
}

/* Impresión */
@media print {
    .contact-cta {
        display: none;
    }
}

/* Logos OTT */
/* Logos OTT */
/* Logos OTT */
/* Logos OTT */
/* Logos OTT */
/* Logos OTT */
/* ===== Mosaico OTT ===== */
/* ===== OTT Mosaico ===== */
.ott-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    align-items: center;
    justify-items: center;
    max-width: 900px;
    margin: 0 auto;
}

    .ott-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border-radius: 12px;
        padding: 0.75rem 1rem;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

        .ott-grid a:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

    .ott-grid img {
        max-width: 100%;
        max-height: 60px;
        object-fit: contain;
    }

/* ?? Centrado visual para logos desiguales */
.centered-logo img {
    display: block;
    margin: auto;
    max-height: 50px; /* los más altos se reducen un poco más */
}

/* ?? Estilo del mensaje destacado */
.promo-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #ff005a, #ffae00);
    color: #fff;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.95rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    animation: pulseBadge 2s infinite ease-in-out;
}

/* ?? Animación del badge */
@keyframes pulseBadge {
    0%, 100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.08);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ott-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.8rem;
    }

        .ott-grid img {
            max-height: 45px;
        }
}

@media (max-width: 480px) {
    .ott-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .ott-grid img {
            max-height: 40px;
        }

    .promo-badge {
        font-size: 0.85rem;
        padding: 5px 14px;
    }
}






/*soporte*/
/*soporte*/
/*soporte*/
/*soporte*/
/*soporte*/
.full-screen {
    min-height: 100vh;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f9f9f9;
}

.btn-next, .btn-whatsapp, .step-actions button {
    display: inline-block;
    padding: 10px 20px;
    margin: 8px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}

.btn-next {
    background: #0f2d57;
    color: #fff;
}

.btn-whatsapp {
    background: #25d366;
    color: #fff;
}

.step-card {
    display: none;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: center;
}

    .step-card.active {
        display: block;
    }

.step-content img {
    max-width: 80px;
    margin-bottom: 15px;
}

/* ====== Estilos generales ====== */
#soporte-tecnico {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    max-width: 650px;
    margin: 40px auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    /* ====== Título ====== */
    #soporte-tecnico h2 {
        color: #0f2d57;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: center;
    }

/* ====== Tarjetas ====== */
.step-card {
    display: none;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    animation: fadeIn 0.6s ease-in-out;
}

    .step-card.active {
        display: block;
    }

/* ====== Texto con iconos ====== */
.step-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .step-content img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

/* ====== Botones ====== */
.step-actions {
    margin-top: 20px;
    text-align: center;
}

    .step-actions button,
    .step-actions a {
        background-color: #0f2d57;
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 12px 25px;
        margin: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }

        .step-actions button:hover,
        .step-actions a:hover {
            background-color: #154076;
            transform: scale(1.05);
        }

/* ====== Botón WhatsApp ====== */
.btn-whatsapp {
    background-color: #25d366 !important;
}

    .btn-whatsapp:hover {
        background-color: #1ebd58 !important;
    }

/* ====== Animación ====== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Normativa / Protección al usuario - Zafiro theme */
/* Normativa / Protección al usuario - Zafiro theme */
/* Normativa / Protección al usuario - Zafiro theme */
/* Normativa / Protección al usuario - Zafiro theme */
/* Normativa / Protección al usuario - Zafiro theme */
#proteccion-usuario .card {
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15,45,87,0.06);
    transition: transform .18s ease, box-shadow .18s ease;
    border: 1px solid rgba(15,45,87,0.06);
}

#proteccion-usuario .norm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 46px rgba(15,45,87,0.12);
}

#proteccion-usuario .card-title {
    color: var(--brand-dark);
    font-weight: 600;
}

#proteccion-usuario .card-text {
    color: #5f6f85;
}

/* Botones */
#proteccion-usuario .btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
}

/* Buscador */
#normSearch {
    border-radius: 999px;
    padding-left: 1rem;
}

/* Ajustes responsive */
@media (max-width: 575.98px) {
    #proteccion-usuario .card {
        padding: 0.25rem;
    }

    #proteccion-usuario .card-title {
        font-size: 1rem;
    }

    #proteccion-usuario .card-text {
        font-size: .85rem;
    }
}

/* Link visual (pie) */
#proteccion-usuario .link-primary {
    color: var(--brand-primary);
    text-decoration: underline;
}




/*PQR*/
/*PQR*/
/*PQR*/
/*PQR*/



.pqrs-page .card {
    border-radius: .75rem;
    border: 0;
    background: #fff;
}

.pqrs-page h2 {
    color: var(--brand-dark);
}

.pqrs-page .form-label {
    font-weight: 600;
    color: var(--brand-dark);
}

.pqrs-page .form-control:focus {
    box-shadow: 0 6px 18px rgba(68,108,158,.12);
    border-color: var(--brand-primary);
}

.pqrs-page .btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
}

/* archivos - pequeña previsualización */
.pqrs-attachments-list {
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--muted);
}

/* alert */
#pqrsAlert {
    border-radius: .5rem;
}

/* responsive spacing */
@media (max-width: 575.98px) {
    .pqrs-page .card {
        padding: 1rem;
    }
}



/*COBERTURA*/
/*COBERTURA*/

/*COBERTURA*/

/*COBERTURA*/

/*COBERTURA*/

.map-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: .75rem;
    box-shadow: 0 8px 20px rgba(15,45,87,.08);
    background: #f6f8fb;
}

    .map-responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: .75rem;
    }


/* ===== Hero Section ===== */
/* ===== Hero Section ===== */
/* ===== Hero Section ===== */
/* ===== Hero Section ===== */
/* ===== Hero Section ===== */
/* ===== Hero Section ===== */

.tv-hero {
    text-align: center;
    padding: 60px 20px;
    background: #FFFFFF;
}

.tv-hero__content h2 {
    font-size: 48px;
    font-weight: 800;
    color: #0099E6;
    margin-bottom: 10px;
}

.tv-hero__content p {
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
}

/* ===== Slider Logos ===== */
.tv-logos-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.tv-logos-track {
    display: flex;
    gap: 40px;
    animation: scroll-logos 50s linear infinite;
}

    .tv-logos-track img {
        height: 90px;
        width: auto;
        object-fit: contain;
        user-select: none;
        pointer-events: none;
        transition: transform .3s ease;
    }

        .tv-logos-track img:hover {
            transform: scale(1.15);
        }

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* ===== Stats ===== */
.tv-stats {
    display: flex;
    justify-content: center;
    gap: 120px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.stat span {
    font-size: 42px;
    font-weight: 700;
    color: #0099E6;
    display: block;
}

.stat p {
    margin: 5px 0 0;
    color: #333;
    font-size: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .tv-hero__content h2 {
        font-size: 32px;
    }

    .tv-logos-track {
        gap: 30px;
    }

    .tv-stats {
        gap: 40px;
    }

    .stat span {
        font-size: 32px;
    }
}


















/* ===============================
   Footer SIEMPRE al final
   =============================== */
/* El body ocupa la altura de la ventana y organiza en columna */
html, body {
    height: 100%;
}

body {
    min-height: 100vh; /* fallback */
    min-height: 100svh; /* mobile moderno, evita barras URL */
    display: flex;
    flex-direction: column;
}

    /* En el layout típico: body > .container > main ... > footer
   Hacemos que el contenedor y el main crezcan para empujar el footer */
    body > .container {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
    }

        body > .container > main {
            flex: 1 0 auto; /* ocupa el espacio libre */
        }

/* El footer nunca fijo */
footer.footer {
    position: static !important;
}

/* Evita scroll “interno” en el primer bloque en móviles */
@media (max-width: 767.98px) {
    .first-fold {
        overflow: visible !important;
        min-height: auto !important;
    }
}
/* Ajuste de columnas para cobertura con 4 columnas de footer */
.site-footer .coverage-list {
    columns: 1;
}

@media (min-width: 992px) { /* a partir de lg */
    .site-footer .coverage-list {
        columns: 2;
        column-gap: 1.25rem;
    }
}

/* Si usas navbar sticky/fija, deja margen al anclar a #planes */
#planes {
    scroll-margin-top: 80px;
}