html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
}

        /* Animaciones */
        @keyframes pulseDot {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.6); opacity: 0.6; }
        }

        /* Estilos básicos */
        a:link { text-decoration: none; color: #ffffff }
        a:visited { text-decoration: none; color: #ffffff }
        a:hover { text-decoration: underline; color: gold }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        h1 { font-size: 15px; color: #ebf55b; text-align: center }
        h2 { font-size: 12px; color: orange }
        
        body {
            background-color: #0a1825;
            color: #ffffff;
            margin: 0;
            font-family: Tahoma, Verdana, Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        p { padding: 0 0 20px; line-height: 1.7em }
        
        /* Estructura principal con flexbox para footer */
        .page-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .content-wrap {
            flex: 1;
        }
        
        /* Header */
        header {
            background-color: #000000;
            border-bottom: 2px solid #02101c;
            display: flex;
            justify-content: center;
            height: 50px;
            width: 100%;
        }
        
        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* Navegación */
        .nav-container {
            display: flex;
            justify-content: center;
            background-color: #d20000;
            border-bottom: 2px solid #02101c;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-item a {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }
        
        .nav-item a:hover {
            background-color: rgba(0, 0, 0, 0.3);
            color: gold;
            text-decoration: none;
        }
        
        .nav-item a svg {
            margin-right: 8px;
        }
        
        /* Indicator for current page */
        .nav-item.active a {
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10%;
            width: 80%;
            height: 3px;
            background-color: gold;
        }
        
        /* Contenido principal */
        .main {
            flex: 1;
            background-color: #00177c;
            box-shadow: 0 -1px 2px #02101c;
            color: #fff;
            width: 100%;
            z-index: 100;
            font-size: 14px;
            text-align: center;
        }
        
        .contenido {
            background-color: #000000;
            box-shadow: 0 -1px 2px #02101c;
            color: #0e35b4;
            width: 100%;
            z-index: 100;
            text-align: center;
        }
        
        .title {
            box-shadow: 0 -1px 2px #ff0000;
            text-align: center;
            font-size: 20px;
            color: rgb(255, 255, 255);
            padding: 10px 0;
        }
        
        /* Footer */
        footer {
            background-color: #d20000;
            box-shadow: 0 -1px 2px #212121;
            color: #fff;
            width: 100%;
            z-index: 100;
            text-align: center;
            padding: 10px 0;
        }
        
        /* Tarjetas de canales - 6 por fila */
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* antes 140px */
            gap: 20px; /* puedes aumentar si quieres más separación */
            padding: 15px;
            max-width: 1200px; /* opcional para centrar el contenido */
            margin: 0 auto;
        }

        
        .card {
            background-color: #fff;
            border: 2px solid #ff0000;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            text-align: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(255, 0, 0, 0.4);
        }
        
        .card img {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 16/9;
            object-fit: cover;
        }
        
        .card-button {
            background-color: #ff0000;
            color: rgb(255, 255, 255);
            border: none;
            padding: 7px 0;
            cursor: pointer;
            font-size: 15px;
            text-decoration: none;
            display: block;
            margin-top: auto;
            transition: background-color 0.2s;
            font-weight: bold;
        }
        
        .card-button:hover {
            background-color: #000000;
        }
        
        .live-indicator {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: rgba(255, 0, 0, 0.85);
            color: white;
            font-weight: bold;
            font-size: 10px;
            padding: 3px 7px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            z-index: 10;
        }
        
        .live-dot {
            width: 6px;
            height: 6px;
            background-color: white;
            border-radius: 50%;
            margin-right: 4px;
            animation: pulseDot 1.5s infinite;
        }
        
        /* Mobile menu */
        .mobile-menu-button {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 10px;
        }
        
        .mobile-menu {
            display: none;
            flex-direction: column;
            background-color: #d20000;
            width: 100%;
        }
        
        .mobile-menu a {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Media queries para responsividad */
        @media screen and (max-width: 1400px) {
            .card-container {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            }
        }
        
        @media screen and (max-width: 1200px) {
            .card-container {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
        }
        
        /* Tablets (pantallas medianas) */
        @media screen and (max-width: 992px) {
            .card-container {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .nav-menu {
                display: none;
            }
            
            .mobile-menu-button {
                display: block;
            }
            
            .mobile-menu.active {
                display: flex;
            }
        }
        
        /* Celulares (pantallas pequeñas) */
        @media screen and (max-width: 768px) {
            .card-container {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
                gap: 10px;
                padding: 10px;
            }
        }
        
        /* Celulares muy pequeños */
        @media screen and (max-width: 480px) {
            .card-container {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 8px;
                padding: 8px;
            }
            
            .card-button {
                font-size: 14px;
                padding: 5px 0;
            }
            
            .live-indicator {
                font-size: 9px;
                padding: 2px 5px;
            }
        }
        
        /* Fondo de partículas */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #02101c; /*fondo en las particulas*/
            top: 0;
            left: 0;
            z-index: -1;
        }

        .ad-responsive {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            text-align: center;
            margin: 20px 0;
        }

        .ad-responsive iframe {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
        }