/* Reset / base */
                        :root {
                            --bg: #050506;
                            --card: #0f0f11;
                            --muted: #9b9b9b;
                            --accent: #ffd34d;
                            /* gold accent similar to ref */
                            --glass: rgba(255, 255, 255, 0.03);
                            --max-w: 1200px;
                            --header-h: 88px;
                        }

                        * {
                            box-sizing: border-box
                        }

                        /* html,
                        body {
                            height: 100%
                        } */

                        /* body {
                            margin: 0;
                            font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
                            background: var(--bg);
                            color: #fff;
                            -webkit-font-smoothing: antialiased;
                            -moz-osx-font-smoothing: grayscale;
                            padding-top: var(--header-h);
                            line-height: 1.3;
                        } */

                        #eyex-navbar-scope {
                            font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
                            color: #fff;
                            line-height: 1.3;
                        }

                        #eyex-navbar-scope h1,
                        #eyex-navbar-scope h2,
                        #eyex-navbar-scope h3,
                        #eyex-navbar-scope h4,
                        #eyex-navbar-scope h5,
                        #eyex-navbar-scope h6 {
                            font-family: 'Inter', sans-serif !important;
                        }

                        a {
                            color: inherit;
                            text-decoration: none
                        }


                        /* ======================
                       LAYOUT CONTAINER
                       ====================== */
                        #eyex-navbar-scope .container {
                            width: min(92%, var(--max-w));
                            margin: 0 auto;
                        }

                        /* ======================
                       HERO
                       ====================== */
                        .hero {
                            padding: 48px 0 36px;
                        }

                        .hero-grid {
                            display: grid;
                            grid-template-columns: 1fr;
                            gap: 32px;
                            align-items: start;
                            margin-bottom: 36px;
                        }

                        .hero-left {
                            padding-top: 48px;
                        }

                        .eyebrow {
                            color: var(--muted);
                            font-size: 0.95rem;
                            margin-bottom: 18px;
                            opacity: 0.9;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                        }

                        .hero-title {
                            font-size: clamp(36px, 7vw, 72px);
                            line-height: 0.95;
                            font-weight: 900;
                            margin: 0;
                            letter-spacing: -1px;
                            background: linear-gradient(180deg, #ffffff, #cfcfcf);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }

                        .hero-divider {
                            margin: 26px 0;
                            height: 1px;
                            background: rgba(255, 255, 255, 0.04);
                        }

                        .hero-sub {
                            color: var(--muted);
                            max-width: 64ch;
                            font-size: 1.05rem;
                            line-height: 1.6;
                        }

                        /* ======================
                       CUADROS MÁS GRANDES (PROGRAM CARDS) - ahora dobles de ancho
                       ====================== */

                        /* Aquí cambié la grilla a 8 columnas y cada .phone ocupa 2 columnas (doble ancho) */
                        .hero-right {
                            display: flex;
                            justify-content: center;
                            margin-top: 60px;
                            /* antes 40px */
                        }

                        .phone-grid {
                            display: grid;
                            grid-template-columns: repeat(4, 1fr);
                            /* 8 columns base */
                            gap: 24px;
                            width: 100%;
                            max-width: 1200px;
                            /* aumenté para que haya espacio a 7 tarjetas */
                        }

                        /* CUADROS MÁS GRANDES - cada .phone ocupa 2 columnas (=> doble ancho) */
                        .phone {
                            width: 100%;
                            height: 400px;
                            border-radius: 24px;
                            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
                            padding: 16px;
                            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
                            border: 1px solid rgba(255, 255, 255, 0.05);
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-end;
                            overflow: hidden;
                            transition: transform 0.3s ease, box-shadow 0.3s ease;
                            position: relative;

                            grid-column: span 2;
                            /* ← ESTA LÍNEA */
                        }


                        .phone:hover {
                            transform: translateY(-8px);
                            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
                            border-color: rgba(255, 211, 77, 0.2);
                        }

                        .phone img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 16px;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }

                        .phone-label {
                            position: absolute;
                            bottom: 20px;
                            left: 20px;
                            right: 20px;
                            background: rgba(0, 0, 0, 0.7);
                            padding: 12px 16px;
                            border-radius: 12px;
                            backdrop-filter: blur(10px);
                            z-index: 2;
                        }

                        .phone-label h3 {
                            margin: 0;
                            font-size: 1.6rem;
                            font-weight: 800;
                            color: #fff;
                        }

                        /* ======================
                                             texto de los programas
                                             ====================== */
                        .phone-label span {
                            display: block;
                            font-size: 1.6rem;
                            color: #ffd34d;
                            margin-top: 4px;
                        }

                        /* ======================
                       FEATURES ROW (icons/text)
                       ====================== */
                        .features {
                            display: flex;
                            gap: 24px;
                            justify-content: space-between;
                            margin-top: 40px;
                            margin-bottom: 48px;
                            flex-wrap: wrap;
                        }

                        .feature {
                            display: flex;
                            gap: 14px;
                            align-items: center;
                            flex: 1;
                            min-width: 220px;
                        }

                        .feature .icon {
                            width: 72px;
                            height: 72px;
                            border-radius: 18px;
                            background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: var(--accent);
                            font-weight: 800;
                            font-size: 2.5rem;
                            flex-shrink: 0;
                        }

                        .feature h4 {
                            margin: 0;
                            font-size: 1.8rem;
                            font-weight: 700;
                        }

                        .feature p {
                            margin: 8px 0 0;
                            color: var(--muted);
                            font-size: 1.4rem;
                            line-height: 1.4;
                        }

                        /* ======================
                       CARDS ROW (locutores) — ahora ligeramente más pequeños
                       ====================== */

                        /* Reduje las alturas para que sean visualmente secundarios frente a los programas */
                        .cards-row {
                            display: grid;
                            grid-template-columns: repeat(4, minmax(0, 1fr));
                            gap: 24px;
                            margin: 60px auto 48px;
                            align-items: stretch;
                            max-width: 1400px;
                            /* ← ESTA ES LA CLAVE */
                        }

                        .card {
                            border-radius: 20px;
                            overflow: hidden;
                            background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
                            border: 1px solid rgba(255, 255, 255, 0.03);
                            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
                            display: flex;
                            flex-direction: column;
                            min-height: 200px;
                            /* reducido desde 240 para quedar más pequeño que phone */
                            transition: transform 0.3s ease;
                        }

                        .card.small {
                            min-height: 160px
                        }

                        /* más pequeño aún para tarjetas secundarias */

                        .card .media {
                            flex: 1 1 auto;
                            min-height: 140px;
                            /* reducido */
                            position: relative;
                        }

                        .card img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            display: block;
                            transition: transform 0.5s ease;
                        }

                        .card:hover img {
                            transform: scale(1.05);
                        }

                        .card .card-body {
                            padding: 16px;
                            /* menos padding para hacerlo más compacto */
                            background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));
                        }

                        .card h3 {
                            margin: 0;
                            font-size: 1.6rem;
                            font-weight: 800;
                            color: #fff;
                            font-family: 'Inter', sans-serif !important;
                        }

                        .card .price {
                            color: var(--muted);
                            margin-top: 8px;
                            font-size: 1.6rem;
                            font-family: 'Inter', sans-serif !important;
                        }

                        /* big right-most highlight card (span 2 rows height) */
                        .card.highlight {
                            grid-column: auto;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            min-height: 360px;
                            position: relative;
                        }

                        .card.highlight::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: linear-gradient(45deg, rgba(255, 122, 0, 0.1), rgba(255, 211, 77, 0.1));
                            border-radius: 20px;
                            z-index: 0;
                        }

                        .card.highlight .card-body {
                            position: relative;
                            z-index: 1;
                            text-align: center;
                        }

                        /* ======================
                       FOOTER LINKS AREA
                       ====================== */
                        .bottom-links {
                            display: flex;
                            gap: 24px;
                            justify-content: space-between;
                            margin-top: 60px;
                            margin-bottom: 80px;
                            color: var(--muted);
                            font-size: 0.95rem;
                            flex-wrap: wrap;
                        }

                        /* small screens responsive */
                        @media (max-width:1100px) {
                            .hero-grid {
                                grid-template-columns: 1fr;
                            }

                            .hero-right {
                                margin-bottom: 24px;
                            }

                            /* tablet: keep double-width behavior but with 4 columns total */
                            .phone-grid {
                                grid-template-columns: repeat(4, 1fr);
                                /* 4 columns on tablet */
                                max-width: 900px;
                            }

                            .phone {
                                grid-column: span 2;
                                /* still 2 columns => two phones per row */
                            }

                            .phone {
                                height: 350px;
                            }

                            .cards-row {
                                grid-template-columns: repeat(2, 1fr)
                            }

                            .card.highlight {
                                grid-column: 1 / -1;
                                min-height: 300px;
                            }

                            .features {
                                flex-direction: column;
                                gap: 20px;
                            }

                            .navbar-list {
                                gap: 15px;
                            }
                        }

                        @media (max-width:768px) {
                            .top-header-inner {
                                padding: 0 15px;
                            }

                            .navbar {
                                display: none;
                                /* Ocultar en móviles, podrías añadir un menú hamburguesa */
                            }

                            .logo-text {
                                font-size: 1.1rem;
                            }

                            /* móvil: volver a 1 columna y desactivar el span para que las tarjetas sean 100% ancho */
                            .phone-grid {
                                grid-template-columns: 1fr;
                                gap: 20px;
                            }

                            .phone {
                                grid-column: auto;
                                /* restablecer span */
                            }

                            .phone {
                                height: 320px;
                                max-width: 400px;
                                margin: 0 auto;
                            }

                            .cards-row {
                                grid-template-columns: 1fr;
                                gap: 20px;
                            }

                            .hero-title {
                                font-size: 42px;
                            }

                            body {
                                padding-top: 70px;
                            }

                            .listen-btn {
                                padding: 8px 16px;
                                font-size: 0.9rem;
                            }

                            .feature {
                                min-width: 100%;
                            }
                        }

                        @media (min-width: 769px) and (max-width: 1024px) {

                            /* small laptops / tablets: use 4 columns with span 2 */
                            .phone-grid {
                                grid-template-columns: repeat(4, 1fr);
                            }

                            .phone {
                                height: 350px;
                                grid-column: span 2;
                            }
                        }

                        /* small decorative dot icon style */
                        .dot {
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: var(--accent);
                            display: inline-block;
                            margin-right: 8px;
                        }

                        .section-title {
                            font-size: 2.5rem;
                            font-weight: 800;
                            margin-bottom: 30px;
                            text-align: center;
                            background: linear-gradient(90deg, #fff, #ffd34d);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                        }

                        /* Estilos de corrección para la sección Programming */
                        /* Solo se modifican los estilos que rompen el flujo */

                        #eyex-navbar-scope {
                            /* Asegurar que el scope no interfiera con el layout principal */
                            width: 100%;
                            max-width: 100%;
                        }

                        /* Corrección crítica: evitar que el reset de body afecte el flujo global */
                        #eyex-navbar-scope html,
                        #eyex-navbar-scope body {
                            height: auto !important;
                            /* Cambiar de 100% a auto */
                            padding-top: 0 !important;
                            /* Eliminar padding-top que desplaza contenido */
                            margin: 0;
                        }

                        /* Asegurar que el container principal respete el ancho del proyecto */
                        #eyex-navbar-scope .container {
                            width: 100% !important;
                            max-width: 100% !important;
                            padding-left: 0;
                            padding-right: 0;
                        }

                        /* Corregir el hero para que no tenga restricciones de ancho */
                        #eyex-navbar-scope .hero {
                            width: 100%;
                            max-width: 100%;
                            padding-left: max(20px, 4vw);
                            padding-right: max(20px, 4vw);
                        }

                        /* Ajustar phone-grid para usar todo el ancho disponible */
                        #eyex-navbar-scope .phone-grid {
                            max-width: 100% !important;
                            width: 100%;
                            padding: 0;
                        }

                        /* Ajustar cards-row para usar todo el ancho */
                        #eyex-navbar-scope .cards-row {
                            max-width: 100% !important;
                            width: 100%;
                            padding-left: max(20px, 4vw);
                            padding-right: max(20px, 4vw);
                        }

                        /* Corregir features para que ocupe todo el ancho */
                        #eyex-navbar-scope .features {
                            width: 100%;
                            max-width: 100%;
                            padding-left: max(20px, 4vw);
                            padding-right: max(20px, 4vw);
                        }

                        /* Ajustar section-title */
                        #eyex-navbar-scope .section-title {
                            width: 100%;
                            padding-left: max(20px, 4vw);
                            padding-right: max(20px, 4vw);
                        }

                        /* Corregir bottom-links */
                        #eyex-navbar-scope .bottom-links {
                            width: 100%;
                            padding-left: max(20px, 4vw);
                            padding-right: max(20px, 4vw);
                        }

                        /* Responsive adjustments */
                        @media (max-width: 1400px) {

                            #eyex-navbar-scope .hero,
                            #eyex-navbar-scope .features,
                            #eyex-navbar-scope .cards-row,
                            #eyex-navbar-scope .section-title,
                            #eyex-navbar-scope .bottom-links {
                                padding-left: max(15px, 3vw);
                                padding-right: max(15px, 3vw);
                            }
                        }

                        @media (max-width: 768px) {

                            #eyex-navbar-scope .hero,
                            #eyex-navbar-scope .features,
                            #eyex-navbar-scope .cards-row,
                            #eyex-navbar-scope .section-title,
                            #eyex-navbar-scope .bottom-links {
                                padding-left: 15px;
                                padding-right: 15px;
                            }
                        }