/* ==========================================================================
   IMPORTACIÓN DE FUENTES LOCALES (BEBAS NEUE MULTI-WEIGHT)
   ========================================================================== */

/* Variante BOOK / LIGHT (La usaremos como peso 300) */
@font-face {
    font-family: 'bebas_neuebook';
    src: url('../fonts/bebasneue_book-webfont-04ceb458d606b9cb3bd2f86dbad8eb9a.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Variante REGULAR / MEDIUM (La usaremos como peso 400) */
@font-face {
    font-family: 'bebas_neueregular';
    src: url('../fonts/bebasneue_regular-webfont-10eb91f51bb2659e642f5cba4a84370.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Variante BOLD / IMPACT (La usaremos como peso 700 o 900) */
@font-face {
    font-family: 'bebas_neuebold';
    src: url('../fonts/bebasneue_bold-webfont-60e112fa4d9696fb821be56ffad281f8.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'venera_700';
    src: url('../fonts/Venera-700-c753082a4f95588ffe947ce5fa14a183.woff2') format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

/* ==========================================================================
   VARIABLES DE IDENTIDAD (PALETA EXCLUSIVA PARA COMPONENTES OSCUROS)
   ========================================================================== */
:root {
    --adac-dark-bg: #141218;
    --adac-dark-surface: #0A0B0E;
    --adac-primary-blue: #2D80EF;
    /* Azul Eléctrico Racing */
    --adac-dark-text-muted: #C9C5D0;
    --md-sys-color-outline: #938F99;
    --mdsys-color-white: #ffffff;
    --adac-dark-blue: #00466C;
    /* Azul oscuro profundo (Logo / Hover de Noticias) */
    --adac-light-blue: #009CDE;
    /* Azul brillante de fondo (F2 Main Color) */
    --adac-sec-text: #00466c;
    /* Color del texto de links secundarios */
    /* Corregido para empatar tu variable del layout anterior */
}

/* ==========================================================================
   ESTILOS GENERALES (MODO CLARO POR DEFECTO)
   ========================================================================== */
body {
    font-family: 'Roboto', sans-serif;
}

@media (min-width: 992px) {
    body {
        padding-top: 125px;
        /* Suma exacta de la altura total de tu header (50px + 75px) */
    }
}

/* ==========================================================================
   HEADER DESKTOP & VARIABLES
   ========================================================================== */
:root {
    --adac-dark-blue: #00466C;
    /* Azul oscuro profundo (Logo / Hover de Noticias) */
    --adac-light-blue: #009CDE;
    /* Azul brillante de fondo (F2 Main Color) */
    --adac-sec-text: #00466c;
    /* Color del texto de links secundarios */
}

/* Tipografía densa estilo competición */
.fw-black {
    font-weight: 900 !important;
}

.font-italic {
    font-style: italic !important;
}

/* Contenedor Header General */
.site-header.desktop {
    background-color: #FFFFFF !important;
    position: fixed;
    /* Hace que el header flote sobre el contenido */
    top: 0;
    /* Lo posiciona al ras del borde superior */
    left: 0;
    /* Lo alinea a la izquierda */
    width: 100%;
    /* Fuerza a que ocupe todo el ancho de la pantalla */
    z-index: 1050;
    /* Mantiene el header por encima de todo el contenido del sitio */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   NAVBAR SECUNDARIA (TOP BAR) - ESTILO INDYCAR CON PÍLDORA EN HOVER
   ========================================================================== */
.navbar-secondary-container {
    height: 50px;
    background-color: #FFFFFF;
    /* border-bottom: 1px solid #EAEAEA; */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Enlaces normales de texto en estado pasivo */
.nav-link-sec {
    font-family: 'venera_700', sans-serif;
    /* Variante Regular para links secundarios */
    font-weight: 700;
    font-size: 11px;
    /* Subimos milimétricamente el tamaño ya que las fuentes condensadas se ven un poco más pequeñas */
    color: #00314d !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    /* Un espaciado limpio estilo automovilismo pro */
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out, color 0.2s ease, padding 0.2s ease-in-out;
    margin-right: 8px;
}

/* Modificación de la flecha de Bootstrap */
.nav-link-sec.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.355em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    opacity: 0.8;
}

/* Hover clásico de los links con dropdown */
.nav-link-sec:hover:not(.btn-pill-hover),
.nav-link-sec:focus:not(.btn-pill-hover) {
    color: var(--adac-light-blue, #009CDE) !important;
}

/* --- EFECTO MÁGICO: LA TIENDA SÓLO SE HACE PÍLDORA EN HOVER --- */
.btn-pill-hover {
    /* En reposo no tiene fondo */
    background-color: transparent;
}

.btn-pill-hover:hover {
    background-color: #EFEFEF !important;
    /* Aparece el gris claro de IndyCar */
    color: #111111 !important;
    /* Mantiene el texto oscuro e íntegro */
}

/* Comportamiento del icono de la tienda */
.btn-pill-hover svg {
    color: #111111;
    transition: transform 0.2s ease;
}

.btn-pill-hover:hover svg {
    transform: translate(1px, -1px);
    /* Pequeño desplazamiento técnico en hover */
}

/* ==========================================================================
   NAVBAR PRINCIPAL (UNIFICADA & OPTIMIZADA PARA DROPDOWNS)
   ========================================================================== */
.navbar-primary-wrapper {
    height: 75px;
    /* Altura idéntica al estándar de FIA */
    background-color: var(--adac-light-blue);
    overflow: visible !important;
    /* Permite que el menú flote hacia afuera sin recortarse */
}

/* --- EL LOGO TRAPEZOIDAL --- */
.polygon-logo {
    background-color: var(--adac-dark-blue);
    display: flex;
    align-items: center;
    /* CAMBIO: Alinea el contenido (logo) hacia el extremo derecho del bloque */
    justify-content: flex-end;

    padding-left: 2rem;
    /* Reducido porque el espacio ahora sobra a la izquierda */
    padding-right: 5.5rem;
    /* Ajustado para que el logo no se encime en el corte diagonal */

    clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
    position: relative;
    z-index: 10;
    height: 100%;
    width: 25%;
    /* Tu ancho fijo */
}

.logo-wrapper {
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

/* --- CONTENEDOR DE ENLACES (Mete la barra debajo del logo) --- */
.polygon-navbar {
    z-index: 5;
}

/* --- ENLACES ESTILO F2 --- */
.polygon-navbar .nav-link-main {
    font-family: 'venera_700', sans-serif;
    /* Exclusivo para menú principal desktop */
    font-weight: 700;
    font-size: 11px;
    /* Ajustado levemente ya que Venera es más ancha que Bebas */
    color: #FFFFFF !important;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 0 22px;
    height: 100%;
    position: relative;
    transition: background-color 0.2s ease;
}

/* Ajuste del texto interno para heredar propiedades */
.polygon-navbar .nav-link-main span {
    position: relative;
    z-index: 2;
}

/* Flecha indicadora premium para los enlaces principales con submenú */
.polygon-navbar .nav-link-main.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.45em;
    vertical-align: 0.18em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: transform 0.2s ease;
}

/* --- EFECTO HOVER Y ACTIVO: BLOQUE OSCURO INTEGRADO --- */
.polygon-navbar .nav-link-main:hover,
.polygon-navbar .nav-link-main.active,
.polygon-navbar .dropdown:hover .nav-link-main,
.polygon-navbar .dropdown-toggle.show {
    background-color: var(--adac-dark-blue) !important;
}

/* Rotación de la flecha al abrir el menú */
.polygon-navbar .dropdown:hover .nav-link-main::after,
.polygon-navbar .dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.polygon-navbar .nav-link-main:hover span::after,
.polygon-navbar .nav-link-main.active span::after {
    transform: scaleX(1);
}

/* --- CORRECCIÓN INTEGRAL DE DROPDOWNS --- */
/* Hacer que las cajas desplegables floten oscuras y elegantes */
.dropdown-menu-dark {
    background-color: var(--adac-dark-blue) !important;
    border-radius: 0 0 4px 4px !important;
    /* Recto arriba para acoplarse a la barra, curvo abajo */
    margin-top: 0px !important;
    /* Alineación milimétrica al ras de los 75px */
    border: none !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    min-width: 210px;
}

.dropdown-menu-dark .dropdown-item {
    font-family: 'venera_700', sans-serif;
    /* Exclusiva también para las subcategorías */
    font-size: 11px;
    text-transform: uppercase;
    padding: 0.65rem 1.5rem;
    color: #C9C5D0 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-menu-dark .dropdown-item:hover {
    background-color: var(--adac-primary-blue, #0061A4) !important;
    color: #FFFFFF !important;
}

/* Hovers generales de interacción */
.text-hover-blue:hover,
.shortcuts-bar a:hover {
    color: var(--adac-primary-blue, #0061A4) !important;
    transition: color 0.2s ease;
}

/* --- COMPORTAMENTO PREMIUM DESKTOP (HOVER AUTOMÁTICO) --- */
@media (min-width: 992px) {
    .polygon-navbar .dropdown:hover .dropdown-menu-dark {
        display: block;
    }
}

/* ==========================================================================
   ESTILOS PARA EL LOGOTIPO DEL HEADER (PROPORCIÓN 1500x1200)
   ========================================================================== */

/* Contenedor del enlace */
.header-logo-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Imagen del logotipo optimizada */
.header-logo-img {
    /* Ajuste de dimensiones respetando la proporción 5:4 original */
    height: 120px;
    width: auto;
    aspect-ratio: 1500 / 1200;
    /* Fuerza al navegador a mantener la proporción exacta */

    object-fit: contain;
    /* Asegura que el archivo WebP se rinda limpio sin cortes */
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    transform-origin: center;
}

/* Efecto Hover interactivo (Suave zoom como en IndyCar) */
.header-logo-link:hover .header-logo-img {
    transform: scale(1.05);
}

/* ==========================================================================
   MÓDULO DE FIJACIÓN MÓVIL SÚPER EXCLUSIVO (CERO TRANSPARENCIAS)
   ========================================================================== */

/* Forzar que el panel colapsable sea negro opaco absoluto */
#mobileNavigationDropdown {
    background-color: #000000 !important;
    border-bottom: 4px solid var(--adac-primary-blue) !important;
}

/* Hamburguesa manual Indycar (Líneas minimalistas negras sobre blanco) */
.navbar-toggler-icon-custom {
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #FFFFFF;
    transition: transform 0.2s ease;
}

.navbar-toggler-icon-custom::before,
.navbar-toggler-icon-custom::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #FFFFFF;
    left: 0;
}

.navbar-toggler-icon-custom::before {
    top: -6px;
}

.navbar-toggler-icon-custom::after {
    top: 6px;
}

/* Estilado de la lista de hipervínculos principales del menú móvil */
.mobile-custom-list-links .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-custom-list-links .nav-link {
    font-family: 'venera_700', sans-serif !important;
    /* Forzada la fuente Venera */
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 1.2rem !important;
    /* Ajustado ópticamente al ancho de Venera */
    color: #FFFFFF !important;
    padding: 1rem 0.75rem !important;
    letter-spacing: 0.03em;
}

/* Estilado específico de la sección de links secundarios */
.secondary-links-list .nav-link {
    font-family: 'venera_700', sans-serif !important;
    /* Forzada la fuente Venera */
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 1.05rem !important;
    color: #C9C5D0 !important;
}

/* Estilo para los paneles interiores colapsados (Submenús) */
.mobile-sub-panel {
    background-color: #0A0A0C !important;
}

.mobile-sub-panel a {
    font-family: 'venera_700', sans-serif !important;
    /* Forzada la fuente Venera */
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 0.9rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding: 0.85rem 1rem !important;
}

.mobile-sub-panel a i {
    font-size: 0.75rem;
    opacity: 0.4;
}

/* Quitar decoración de flechas nativas rotativas de Bootstrap */
.mobile-custom-list-links .dropdown-toggle::after {
    display: none !important;
}

/* ==========================================================================
   AJUSTE DE CENTRADO OPTICO DEL LOGO MÓVIL
   ========================================================================== */
.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

/* Optimización extra para prevenir estiramientos en WebP móvil */
.mobile-header-logo-img {
    max-width: 100%;
    transform-origin: center;
}

/* ==========================================================================
   MÓDULO TARJETA TELEMETRÍA "NEXT RACE" (CONTRAL CONTRAL DE CAPAS)
   ========================================================================== */

/* Forzar que el contenedor no genere bordes o esquinas heredadas */
.custom-sidebar-race-card {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
}

/* Forzar los números gigantes del reloj regresivo de telemetría */
.custom-sidebar-race-card .fs-1 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #111111 !important;
}

/* Modificación interactiva para el botón píldora inferior */
.custom-pill-schedule-btn {
    border-color: #111111 !important;
    color: #111111 !important;
    font-weight: 800 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.custom-pill-schedule-btn:hover {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.custom-pill-schedule-btn i {
    transition: transform 0.25s ease;
}

.custom-pill-schedule-btn:hover i {
    transform: translateX(3px);
    /* Desplaza sutilmente la flecha en hover */
}

/* Alineación óptica para el logo de la categoría en el reloj */
.alignment-telemetry-logo {
    vertical-align: middle;
    transform: translateY(-1px);
    /* Ajuste fino de píxel para centrado exacto con la tipografía */
}

/* ==========================================================================
   MÓDULO DE CALENDARIO COMPACTO (CON PAGINACIÓN DINÁMICA)
   ========================================================================== */
:root {
    --adac-secondary-gray: #6c757d;
    /* Gris para eventos próximos */
}

/* Evitar líneas divisorias residuales en el último ítem de cada página */
.last-border-0:last-child {
    border-bottom: 0 !important;
}

/* Efecto sutil de pulsación para eventos EN VIVO */
.animate-pulse {
    animation: adacPulse 2s infinite;
}

@keyframes adacPulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Contenedor dinámico del Mini Calendario Cuadrado con Ancho Fijo Estricto */
.mini-calendario-box {
    width: 50px !important;
    min-width: 50px !important;
    height: 52px !important;
    line-height: 1.1;
    transition: all 0.2s ease;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden;
    background-color: #f8f9fa !important;
}

/* Forzar que las cabeceras de los meses ocupen el 100% simétrico */
.mini-calendario-box .calendar-head {
    width: 100% !important;
    text-align: center !important;
    padding: 3px 0 !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    font-family: monospace !important;
    letter-spacing: 0.05em;
    color: #ffffff !important;
    /* Forzamos texto blanco para legibilidad */
    display: block !important;
}

/* Centrado numérico del día */
.mini-calendario-box .calendar-day {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    color: #111111 !important;
    /* Forzamos el color oscuro del número */
    padding-top: 4px !important;
    line-height: 1 !important;
    display: block !important;
}

/* Estados de Color Estructurales (Manejados por las clases dinámicas de PHP) */
.mini-calendario-box.status-concluido {
    border: 1px solid var(--adac-primary-blue) !important;
}

.mini-calendario-box.status-concluido .calendar-head {
    background-color: var(--adac-primary-blue) !important;
}

.mini-calendario-box.status-proximo {
    border: 1px solid var(--adac-dark-surface) !important;
}

.mini-calendario-box.status-proximo .calendar-head {
    background-color: var(--adac-dark-surface) !important;
}

.mini-calendario-box.status-en-vivo {
    border: 1px solid #dc3545 !important;
}

.mini-calendario-box.status-en-vivo .calendar-head {
    background-color: #dc3545 !important;
}

/* ==========================================================================
   MÓDULO DE NOTICIAS
   ========================================================================== */

/* Layout general de alturas responsivas */
.news-grid-container {
    min-height: 480px;
}

/* Tarjeta Principal Izquierda */
.news-main-card {
    min-height: 400px;
    height: 100%;
    background-color: #000;
    border: none !important;
}

.news-main-img-wrapper {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-main-card:hover .news-main-img-wrapper {
    transform: scale(1.5);
}

/* Degradado oscuro para que el texto blanco siempre sea legible */
.news-main-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 90%);
    z-index: 2;
}

.news-main-title {
    font-size: 1.8rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

@media (min-width: 992px) {
    .news-main-title {
        font-size: 2.2rem;
    }
}

/* Sidebar Derecho (Items pequeños) */
.news-sidebar-item {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-sidebar-link:hover .news-sidebar-item {
    background-color: #F8F9FA !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.news-sidebar-thumb-wrapper {
    width: 100px;
    height: 65px;
    background-color: #222;
}

.news-sidebar-thumb-wrapper img {
    transition: transform 0.3s ease;
}

.news-sidebar-link:hover .news-sidebar-thumb-wrapper img {
    transform: scale(1.08);
}

.news-sidebar-title {
    font-size: 0.88rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Limitador de líneas de texto (Evita que títulos largos rompan el diseño) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   DETALLE NOTICIAS
   ========================================================================== */

/* Línea superior característica de prensa de carreras */
.news-editorial-body {
    border-top: 4px solid var(--adac-primary-blue, #2D80EF);
}

/* Indicador de categoría con acento izquierdo */
.news-badge-category {
    font-family: 'venera_700', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--adac-primary-blue, #2D80EF);
    border-left: 3px solid var(--adac-primary-blue, #2D80EF);
    padding-left: 8px;
    text-transform: uppercase;
}

/* Título de gran impacto visual */
.news-main-title {
    font-family: 'bebas_neuebold', sans-serif;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #000000;
    text-transform: uppercase;
}

/* Subtítulo editorial legible */
.news-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: #4A4A4A;
}

/* Metadatos (Autor, Fecha) compactos y técnicos */
.news-meta-data {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #777777;
}

/* Contenedor de imagen principal con corte aerodinámico asimétrico (SIN SOMBRAS) */
.news-hero-image-wrapper {
    position: relative;
    overflow: hidden;
    border-bottom-right-radius: 35px;
}

/* Cuerpo del artículo optimizado para lectura fluida */
.news-article-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #1F;
}

.news-article-content p {
    margin-bottom: 1.5rem;
}

/* Bloque lateral / Caja de siguiente lectura interactiva */
.news-next-read-box {
    background-color: #F8F9FA;
    border-left: 4px solid var(--adac-dark-blue, #00466C);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.news-next-read-box:hover {
    background-color: #F3F5;
    transform: translateX(4px);
}

/* Miniatura del artículo recomendado */
.news-next-read-thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

/* Etiqueta superior del módulo de recomendación */
.news-next-read-label {
    font-family: 'venera_700', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--adac-primary-blue, #2D80EF);
    text-transform: uppercase;
}

/* Ajustes responsivos para pantallas grandes (Estilo de encabezado gigante) */
@media (min-width: 992px) {
    .news-main-title {
        font-size: 4rem;
    }
}

/* ==========================================================================
   MÓDULO DE ACCESOS DIRECTOS PREMIUM (ESTILO DE COMPETICIÓN PLANO)
   ========================================================================== */

.shortcut-premium-link {
    text-decoration: none !important;
}

/* Estado Normal del Botón */
.shortcut-premium-item {
    background-color: #009CDE !important;
    /* Color normal plano solicitado */
    border: none !important;
    box-shadow: none !important;
    height: 100%;
    transition: background-color 0.2s ease-in-out;
}

/* Tipografía e Iconografía */
.shortcut-premium-text {
    font-family: 'bebas_neuebold', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    color: #FFFFFF !important;
    /* Texto blanco permanente */
    text-transform: uppercase;
    line-height: 1;
}

.shortcut-premium-icon {
    font-size: 0.95rem;
    color: #FFFFFF !important;
    /* Icono blanco permanente */
    opacity: 0.85;
    line-height: 1;
}

/* Estado Interactiva (Hover) */
.shortcut-premium-link:hover .shortcut-premium-item {
    background-color: #00466C !important;
    /* Color hover solicitado */
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   MÓDULO DE PATROCINADORES CON ESTILO DE ALTA COMPETICIÓN (MARQUEE EN LÍNEA)
   ========================================================================== */

.marquee-viewport {
    width: 100%;
}

.marquee-track {
    width: max-content;
    animation: marqueeHorizontal 25s linear infinite;
}

.marquee-viewport:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marqueeHorizontal {
    0% {
        transform: translateX(0);
    }

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

/* Base de la tarjeta heredando la paleta de equipo */
.sponsor-card {
    min-width: 220px;
    max-width: 220px;
    height: 95px;
    background-color: var(--sponsor-team-colour);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    cursor: pointer;
}

.sponsor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Réplica exacta del gradiente de esquina a 315 grados */
.sponsor--gradient {
    background: linear-gradient(315deg,
            transparent 0%,
            var(--sponsor-accessible-colour) 100%);
}

/* Réplica matemática del patrón técnico de micro-puntos de la imagen */
.sponsor--pattern {
    height: 45px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 0);
    background-size: 4px 4px;
    background-position: bottom left;
    /* Máscara de desvanecido superior para fundirse con el fondo */
    mask-image: linear-gradient(to top, #000 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 100%);
}

/* Contenedor e imágenes de logotipos */
.sponsor-logo-only {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sponsor-card:hover .sponsor-logo-only {
    transform: scale(1.06);
}

.sponsor-logo-only img {
    max-width: 85%;
    max-height: 70%;
    object-fit: contain;
}

/* Regla especial para escudos verticales */
.sponsor-logo-only img.logo-vertical {
    max-height: 90% !important;
    max-width: 85% !important;
}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
        overflow-x: auto;
        width: 100%;
        width: max-content;
        animation: marqueeHorizontal 45s linear infinite;
    }
}

/* ==========================================================================
   MÓDULO FEATURED VIDEOS (DISTRIBUCIÓN HORIZONTAL)
   ========================================================================== */
#contenedor-video-featured {
    max-width: 100%;
    /* Ahora permitimos que use todo el ancho horizontal disponible */
    width: 100%;
    margin-left: 0;
    background-color: #000000;
}

#contenedor-video-featured iframe {
    border: none;
    display: block;
}

/* Enlace contenedor de las miniaturas de abajo */
.featured-bottom-thumb-link {
    text-decoration: none !important;
    display: block;
}

/* Tarjeta estructurada para cada miniatura inferior */
.featured-bottom-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Caja contenedora de la imagen para forzar proporción 16:9 exacta */
.featured-bottom-img-box {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
    /* Relación de aspecto idéntica al reproductor */
    border-radius: 12px;
    overflow: hidden;
    background-color: #000000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Ajuste absoluto de la imagen dentro de su contenedor */
.featured-bottom-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* --- EFECTOS HOVER ESTILO RACING --- */
/* Pequeño brinco hacia arriba de toda la tarjeta al pasar el cursor */
.featured-bottom-thumb-link:hover .featured-bottom-card {
    transform: translateY(-4px);
}

/* Zoom milimétrico a la imagen de YouTube en hover */
.featured-bottom-thumb-link:hover .featured-bottom-img-box img {
    transform: scale(1.05);
}

/* Texto del título inferior */
.featured-bottom-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111111 !important;
    margin: 0;
    padding: 0 2px;
    /* Control de desborde: Corta el texto limpio a 2 renglones si se pasa de largo */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

/* Cambio sutil de color en las letras al pasar el mouse */
.featured-bottom-thumb-link:hover .featured-bottom-title {
    color: #009CDE !important;
    /* Usa tu color variable brillante de carreras */
}

/* ==========================================================================
   SLIDER HORIZONTAL MÓVIL (VIDEOS DESTACADOS)
   ========================================================================== */
@media (max-width: 767.98px) {
    .highlights-row {
        /* Desplazamiento ultra suave en dispositivos táctiles */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        /* Ocultar barra de scroll en navegadores modernos */
        scrollbar-width: none;
        /* Firefox */
    }

    /* Ocultar barra de scroll en Chrome, Safari y Edge */
    .highlights-row::-webkit-scrollbar {
        display: none;
    }

    /* Efecto imán: cada tarjeta se centra o alinea perfectamente al deslizar */
    .highlights-row>[class*="col-"] {
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   FLECHAS DE NAVEGACIÓN FLOTANTES PARA VIDEOS (SÓLO MÓVIL)
   ========================================================================== */
@media (max-width: 991.98px) {
    .slider-video-wrapper {
        padding: 0 5px;
    }

    .btn-slider-nav {
        position: absolute;
        top: 35%;
        /* Centrado vertical alineado a la miniatura de video */
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        background-color: rgba(0, 0, 0, 0.8) !important;
        /* Fondo ultra oscuro Racing */
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 50% !important;
        color: #FFFFFF !important;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 25;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        transition: background-color 0.2s ease, transform 0.1s ease;
    }

    .btn-slider-nav:active {
        background-color: var(--adac-light-blue, #009CDE) !important;
        /* Destello azul en Tap */
        transform: translateY(-50%) scale(0.9);
    }

    .btn-prev {
        left: -5px;
    }

    .btn-next {
        right: -5px;
    }
}

/* ==========================================================================
   CINTILLA DE CUENTA REGRESIVA EMERGENTE (SCROLL STICKY BAR)
   ========================================================================== */
#sticky-countdown-bar,
#sticky-countdown-bar .fw-black {
    font-family: 'venera_700', sans-serif !important;
    font-weight: 700 !important;
}

#sticky-countdown-bar {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 1040;
    /* Justo debajo del z-index 1050 del header principal */
    background-color: #00314d;
    border-bottom: 0px solid var(--adac-primary-blue, #2D80EF);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    /* Evita clics accidentales mientras está oculta */
}

#sticky-countdown-bar .badge,
#sticky-countdown-bar span[id^="sticky-"] {
    font-family: 'bebas_neuebold', sans-serif !important;
    font-weight: 700 !important;
}

/* Estado activo administrado por JavaScript cambiando transform y opacidad */
#sticky-countdown-bar.active {
    transform: translateY(0%) !important;
    opacity: 1;
    pointer-events: auto;
}

/* Efecto de parpadeo racing ("Live") para el indicador de Próxima Fecha */
.animate-pulse {
    animation: racing-pulse 2s infinite ease-in-out;
}

@keyframes racing-pulse {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        opacity: 0.8;
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Ajustes responsivos para que se acople perfectamente con la altura de tu menú */
@media (min-width: 992px) {
    #sticky-countdown-bar {
        display: block !important;
    }
}

@media (max-width: 991.98px) {
    #sticky-countdown-bar {
        display: none !important;
        /* Se oculta en móviles para no colapsar la pantalla */
    }
}

/* ==========================================================================
   MÓDULO CINTILLA CON VIDEO DE FONDO LOCAL (WEB M HERO BANNER)
   ========================================================================== */
.video-banner-container {
    border-top: 4px solid var(--adac-primary-blue);
    border-bottom: 4px solid var(--adac-dark-blue);
}

/* El truco mágico: object-fit cover se encarga del escalado perfecto sin romper la proporción */
.local-video-bg {
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.video-banner-container .animate-pulse {
    display: inline-block;
    animation: racing-bell-pulse 2s infinite ease-in-out;
}

/* Animación exclusiva para la campana: destello de silueta + sutil latido racing */
@keyframes racing-bell-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }

    50% {
        opacity: 0.85;
        transform: scale(1.15);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
}

/* ==========================================================================
   MÓDULO DE POSICIONES (DRIVER STANDINGS) - ESTILO OSCURO PREMIUM
   ========================================================================== */

.custom-standings-card {
    background-color: var(--adac-dark-blue) !important;
    border-radius: 16px !important;
    color: var(--mdsys-color-white) !important;
    max-width: 500px;
}

/* Título principal con tipografía densa de carreras */
.custom-standings-card .standings-title {
    font-family: 'venera_700', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mdsys-color-white);
}

.columnside-title {
    font-family: 'venera_700', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Filas divisorias con el outline exacto del sistema */
.standings-row {
    border-top: 1px solid rgba(147, 143, 153, 0.2);
    /* Opacidad suave sobre el outline */
}

/* Posición numérica (Estilo Bebas Neue Impact) */
.standings-row .driver-position {
    font-family: 'bebas_neuebold', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    min-width: 35px;
    color: var(--mdsys-color-white);
}

/* Nombre del piloto */
.standings-row .driver-name {
    font-family: 'venera_700', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--mdsys-color-white);
}

/* Nombre de la escudería / Texto secundario atenuado */
.standings-row .driver-team {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--adac-dark-text-muted);
    margin-top: 2px;
}

/* Puntos en el extremo derecho (Grandes e impactantes) */
.standings-row .driver-points {
    font-family: 'bebas_neuebold', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--mdsys-color-white);
    line-height: 1;
}




/* ==========================================================================
   ENCAPSULAMIENTO DE MODO OSCURO (SÓLO EN EL FOOTER)
   ========================================================================== */
.main-footer {
    background-color: var(--adac-dark-surface) !important;
    color: #FFFFFF !important;
}

/* Forzar que los títulos internos del footer sean blancos */
.main-footer h1,
.main-footer h2,
.main-footer h3,
.main-footer h4,
.main-footer h5,
.main-footer h6 {
    color: #FFFFFF !important;
}

/* Enlaces del pie de página con su comportamiento interactivo */
.footer-links-col a {
    color: var(--adac-dark-text-muted) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links-col a:hover {
    color: var(--adac-primary-blue) !important;
}

@media (max-width: 768px) {
    .footer-sponsors {
        display: none !important;
    }

    .footer-social {
        display: none !important;
    }
}

/* Estilo premium de patrocinadores con filtro interactivo */
.sponsor-item img {
    opacity: 0.5;
    filter: brightness(0) invert(1);
    /* Aplana los logos a blanco puro */
    transition: all 0.3s ease-in-out;
}

.sponsor-item:hover img {
    opacity: 1;
    filter: none;
    /* Recupera su color o brillo original en hover */
    transform: scale(1.05);
}

/* Banda negra de ancho completo (Disclaimer y Copyright nativos) */
.full-width-black-bar {
    background-color: #000000 !important;
    width: 100%;
}

.full-width-black-bar .copyright {
    color: #FFFFFF !important;
}

.full-width-black-bar .legal-disclaimer {
    font-size: 0.75rem;
    color: var(--md-sys-color-outline) !important;
    line-height: 1.5;
}

/* ==========================================================================
   BOTÓN BACK TO TOP (INTERACTIVO COMPATIBLE CON MÓVIL)
   ========================================================================== */
#btn-back-to-top {
    transition: opacity 0.3s ease, transform 0.2s ease;
    background-color: var(--adac-primary-blue) !important;
    border: none !important;
    display: none;
    /* Controlado por JS */
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    /* Asegura que sea clickeable en pantallas táctiles */
}

#btn-back-to-top:hover,
#btn-back-to-top:active {
    transform: scale(1.1);
    background-color: #004b80 !important;
}

/* ==========================================================================\
   BARRA DE COOKIES PERSONALIZADA (PILOTOS ADAC)
   ========================================================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #00466C;
    /* Fondo azul principal solicitado */
    color: #ffffff;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    /* Asegura superposición sobre cualquier elemento */
    font-family: sans-serif;
    padding: 18px 0;
    display: none;
    /* Controlado dinámicamente por JavaScript */
}

.cookie-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    gap: 24px;
}

.cookie-text-container {
    flex: 1;
}

.cookie-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.cookie-link {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
}

.cookie-link:hover {
    color: #009CDE;
}

.cookie-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Base de botones */
.cookie-btn {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

/* Botón Permitir (Aceptar) */
.cookie-btn.btn-accept {
    background-color: #009CDE;
    /* Azul vivo */
    color: #ffffff;
    border: 1px solid #009CDE;
}

.cookie-btn.btn-accept:hover {
    background-color: #00314D;
    /* Azul oscuro en hover */
    border-color: #00314D;
}

/* Botón Rechazar (Contorno plano) */
.cookie-btn.btn-decline {
    background-color: #00466C;
    /* Mismo color del fondo */
    color: #FFFFFF;
    border: 1px solid #009CDE;
    /* Solo el borde */
}

.cookie-btn.btn-decline:hover {
    background-color: #00314D;
    border: 1px solid #009CDE;
}

/* Adaptación para dispositivos móviles */
@media (max-width: 768px) {
    .cookie-container {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .cookie-text {
        text-align: center;
    }

    .cookie-buttons {
        width: 100%;
        flex-direction: column-reverse;
        /* El botón principal queda arriba en móvil */
        gap: 10px;
    }

    .cookie-btn {
        width: 100%;
    }
}

/* ==========================================================================\
   BANNER
   ========================================================================== */

/* Contenedor del Banner */
.banner-container {
    position: relative;
    width: 100%;
    min-height: 180px;
    overflow: hidden;
    padding: 40px 24px;
    display: flex;
    align-items: center;
}

/* Alineación del Contenido */
.banner-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* --- MÓVIL (Por defecto) --- */
@media (max-width: 768px) {
    .banner-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

/* Estilos de Textos */
.banner-title {
    font-family: 'venera_700', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
    text-align: center;
}

.banner-description {
    color: #333333;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.banner-description img {
    filter: brightness(0);
    /* Opcional: añade una transición suave si planeas hacer un efecto hover */
    transition: filter 0.3s ease;
}

/* Opcional: Por si quieres que cambien de color al pasar el mouse */
.banner-description a:hover img {
    filter: brightness(0) opacity(0.7);
}

/* --- ESCRITORIO (Pantallas medianas/grandes) --- */
@media (min-width: 768px) {
    .banner-content {
        display: table;
    }

    .banner-text-group {
        display: table-cell;
        vertical-align: middle;
        padding-right: 30px;
    }

    .banner-actions {
        display: table-cell;
        vertical-align: middle;
        text-align: right;
        width: 1%;
        white-space: nowrap;
    }

    .banner-title,
    .banner-description {
        text-align: right;
    }
}

/* ==========================================================================
   HERO SLIDER ASÍNCRONO
   ========================================================================== */
.event-hero {
    position: relative;
    background-color: var(--adac-dark-blue) !important;
    overflow: hidden;
    transition: background-image 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.event-hero .overlay {
    position: absolute;
    inset: 0;
    background-color: var(--adac-dark-blue) !important;
    z-index: 2;
}

@media (min-width: 992px) {
    .event-hero .overlay {
        background-color: var(--adac-dark-blue) !important;
    }
}

.track-map {
    max-width: 130px;
}

@media (min-width: 992px) {
    .track-map {
        max-width: 180px;
    }
}

.font-racing {
    font-family: 'venera_700', sans-serif !important;
    line-height: 0.95;
}

/* Paneles de detalles */
.race-details-panel {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.race-details-panel.active {
    opacity: 1;
    transform: translateY(0);
}

/* Botones de navegación redondos */
.btn-vertical-nav {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    z-index: 10;
}

.btn-vertical-nav:hover {
    background-color: #2D80EF;
    border-color: #2D80EF;
    transform: scale(1.1);
}

/* ==========================================================================
   ESTILOS MÓVIL (BARRA INFERIOR HORIZONTAL)
   ========================================================================== */
.mobile-controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.event-timeline.horizontal-mode {
    display: flex;
    flex-direction: row;
    gap: 25px;
}

.event-timeline.horizontal-mode .timeline-item {
    color: rgba(255, 255, 255, .4);
    text-align: center;
}

.event-timeline.horizontal-mode .timeline-item .month {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.event-timeline.horizontal-mode .timeline-item .day {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: #FFFFFF;
}

.event-timeline.horizontal-mode .timeline-item.active {
    color: #FFF;
    transform: scale(1.1);
}

/* ==========================================================================
   ESTILOS DESKTOP (BARRA LATERAL VERTICAL FIJA)
   ========================================================================== */
@media (min-width: 992px) {
    .desktop-controls-fixed {
        position: absolute;
        left: 60px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 100px;
    }

    .event-timeline.vertical-mode {
        display: flex;
        flex-direction: column;
        gap: 35px;
        /* 👇 Centra los bloques .timeline-item horizontalmente */
        align-items: center;
    }

    .event-timeline.vertical-mode .timeline-item {
        color: rgba(0, 0, 0, .4);
        position: relative;
        /* 👇 Centra el texto (mes y día) dentro de cada item */
        text-align: center;
    }

    .event-timeline.vertical-mode .timeline-item .month {
        display: block;
        font-size: 0.9rem;
    }

    .event-timeline.vertical-mode .timeline-item .day {
        display: block;
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1;
    }

    .event-timeline.vertical-mode .timeline-item.active {
        color: #FFF;
    }

    /* Ojo con este pseudo-elemento si notas que se desplaza */
    .event-timeline.vertical-mode .timeline-item.active::after {
        content: "";
        position: absolute;
        left: 115%;
        top: 50%;
        width: 50px;
        height: 2px;
        background: #2D80EF;
    }
}

/* ==========================================================================
   MÓDULO DE PATROCINADORES PREMIUM (ESTILO  SECTIONS)
   ========================================================================== */

.partners-section {
    width: 100%;
    overflow: hidden;
}

/* Escalado de fondos usando tu variable principal y mezclas oscuras */
.tier-top {
    background-color: var(--adac-dark-blue, #00466C) !important;
}

.tier-mid {
    /* Un tono milimétricamente más claro por transparencia overlay */
    background-color: #0d537a !important;
}

.tier-bottom {
    /* Un tono más profundo/oscuro hacia el negro */
    background-color: #003350 !important;
}

/* Tipografías del Encabezado */
.partners-title {
    font-family: 'venera_700', sans-serif !important;
    font-size: 1.75rem;
    color: #FFFFFF !important;
    letter-spacing: -0.01em;
}

.view-all {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.view-all:hover {
    color: #FFFFFF !important;
}

/* --- INTERRUPTOR MONOCROMÁTICO (EL TRUCO DE LA ) --- */
.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Aplana CUALQUIER logo comercial a blanco puro absoluto */
    filter: brightness(0) invert(1);
    opacity: 0.75;
    transition: all 0.25s ease;
}

/* Hover: El logo recupera nitidez o color original si remueves el filter */
.partner-item:hover {
    transform: scale(1.05);
}

.partner-item:hover img {
    opacity: 1;
    /* Puedes usar "none" si quieres que en hover brille con su color real de marca */
    filter: brightness(0) invert(1);
}

/* --- JERARQUÍA DE ALTURAS MATEMÁTICAS (Como en image_345afa.png) --- */
.partner-item.tier-1 {
    height: 48px;
    max-width: 150px;
}

.partner-item.tier-2 {
    height: 32px;
    max-width: 120px;
}

.partner-item.tier-3 {
    height: 24px;
    max-width: 90px;
}

/* Ajuste fino para pantallas táctiles/móviles */
@media (max-width: 768px) {
    .partners-title {
        font-size: 1.4rem;
    }

    .partner-item.tier-1 {
        height: 38px;
        max-width: 110px;
    }

    .partner-item.tier-2 {
        height: 33px;
        max-width: 90px;
    }

    .partner-item.tier-3 {
        height: 30px;
        max-width: 75px;
    }
}

/* ==========================================================================
   CALENDARIO 2026
   ========================================================================== */

/* Estructura base para contenedores de tarjetas de carrera con imagen de fondo */
.status-race-card {
    background-size: cover;
    background-position: center;
    min-height: 240px;
    border-radius: 12px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: pointer;
}

/* Efecto hover interactivo */
.status-race-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Capa de optimización de contraste visual para el texto superior */
.status-race-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    z-index: 0;
}

.status-race-card:hover::before {
    background-color: rgba(0, 0, 0, 0);
}

/* Modificadores de espaciado de texto y tipografía pesada */
.tracking-wider {
    letter-spacing: 1px;
}

.tracking-widest {
    letter-spacing: 2px;
}

.fw-extrabold {
    font-weight: 800;
}

/* Acento visual superior para destacar el evento principal o más cercano */
.race-live-border {
    border-top: 4px solid #0d6efd !important;
}

/* Animación de atención suavizada para badges de eventos activos */
@keyframes pulseSubtle {
    0% {
        opacity: 0.85;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.85;
    }
}

.animate-pulse-subtle {
    animation: pulseSubtle 2s infinite ease-in-out;
}

/* Tarjetas del listado de carreras */
.race-schedule-card {
    background-color: #ffffff;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.race-schedule-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Badge estilizado para la fecha de la carrera */
.date-badge {
    background-color: #f3f5;
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* Tipografía ultra compacta para datos técnicos y podios */
.small-xs {
    font-size: 0.68rem;
}

/* Ajuste responsivo para que los títulos no se rompan feo en móviles con 2 columnas */
@media (max-width: 576px) {
    .race-schedule-card h4 {
        font-size: 0.95rem;
    }

    .date-badge {
        font-size: 0.65rem;
        padding: 4px 6px;
    }
}

/* ==========================================================================
   SECCIÓN PÁGINA DE CATEGORÍAS (ESTILO MOTORSPORT / )
   ========================================================================== */

/* Tarjeta Principal de Categoría */
.category-card {
    border: none;
    border-radius: 0 16px 0 16px;
    /* Esquinas asimétricas agresivas estilo circuito */
    border-top: 5px solid #dddddd;
    /* Línea de color dinámico de la escudería */
    background-color: #f8f9fa;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease-in-out;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Efecto Hover estilo  Elite */
.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
}

/* Variaciones de colores basadas en los equipos y texturas provistas */
.border-team-orange {
    border-top-color: #ff6a00 !important;
}

.border-team-darkblue {
    border-top-color: #0b3c5d !important;
}

.border-team-lightblue {
    border-top-color: #0081c6 !important;
}

.border-team-electricblue {
    border-top-color: #3273f5 !important;
}

/* Tipografía de Títulos de Carreras */
.card-racing-title {
    font-family: 'Bebas Neue', 'Arial Black', sans-serif;
    /* Consistencia de marca */
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #1a1a1a;
}

/* Insignias de Categoría (Badges) */
.badge-racing-status {
    background-color: #1a1a1a;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 5px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Botones de acción minimalistas y técnicos */
.btn-racing {
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    background: transparent;
    border-radius: 0 8px 0 8px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease-in-out;
}

.btn-racing:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    transform: scale(1.02);
}

/* Iconos decorativos del Motorsport */
.racing-icon-box {
    color: #8c96a0;
    transition: color 0.3s ease;
}

.category-card:hover .racing-icon-box {
    color: #1a1a1a;
}

/* ==========================================================================
   TARJETAS DE CATEGORÍAS (ESTILO AUTOMOVILISMO DE ÉLITE)
   ========================================================================== */

/* Tarjeta contenedora principal (Todo el card es un enlace) */
.racing-team-card {
    position: relative;
    z-index: 0;
    border-radius: 8px;
    overflow: hidden;
    min-height: 256px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    text-decoration: none;
    background-color: var(--racing-team-colour);
    color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

@media (min-width: 992px) {
    .racing-team-card {
        padding: 24px;
    }
}

/* Efecto al pasar el cursor (Hover) */
.racing-team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

/* Capa 1: El degradado dinámico oscuro para asegurar legibilidad */
.racing-card-gradient {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Copia exacta del algoritmo de desvanecimiento usando la variable de color accesible */
    background: linear-gradient(315deg, rgba(0, 0, 0, 0) 0%, var(--racing-accessible-colour) 100%);
    pointer-events: none;
}

/* Capa 2: Contenedor para el patrón de textura/gráfico de fondo */
.racing-card-pattern {
    position: absolute;
    z-index: 1;
    height: 130px;
    bottom: -2px;
    right: 0;
    opacity: 0.25;
    /* Suave para que no compita con el texto */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.racing-team-card:hover .racing-card-pattern {
    opacity: 0.45;
    /* Resalta sutilmente la textura al hacer hover */
}

/* Contenido de la tarjeta por encima de los fondos */
.racing-card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

/* Títulos con tipografía imponente */
.racing-title-text {
    font-family: 'Bebas Neue', 'Arial Black', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.card-logo {
    display: block;
    width: 100%;
    max-width: 85%;
    height: auto;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

@media (max-width: 576px) {
    .card-logo {
        max-width: 100%;
    }
}

/* ==========================================================================
   PANEL INTEGRAL DE RECURSOS Y SECCIONES DE DESCARGA
   ========================================================================== */

/* Maquetación de la Parrilla de Cards Masivas */
.hub-cards-grid {
    display: grid;
    gap: 24px;
    padding: 8px 0;
}

/* Estructura Base de la Tarjeta Independiente de Alto Impacto */
.big-download-card {
    background-color: #ffffff;
    border: 1px solid #e9ebeb;
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    min-height: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Burbuja Circular para el Icono de la Especialidad */
.card-icon-wrap {
    width: 70px;
    height: 70px;
    background-color: #f3f3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* Tipografía Principal del Documento Interno */
.card-doc-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #121212;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Botón de Acción Circular Tipo Píldora */
.btn-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #121212;
    color: #ffffff;
    padding: 10px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-top: auto;
}

.btn-action-pill:hover {
    color: #ffffff;
}

/* ==========================================================================
   POLITICA DE COOKIES
   ========================================================================== */
.last-border-0:last-child {
    border-bottom: 0 !important;
}

.cookie-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.cookie-section p,
.cookie-section li {
    font-size: 0.95rem;
    color: #333333;
}

.cookie-section ul {
    padding-left: 1.25rem;
}

/* ==========================================================================
   TERMINOS DE SUSCRIPCION
   ========================================================================== */
.terms-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
    border-left: 4px solid #2D80EF;
    /* Detalle deportivo */
    padding-left: 10px;
}

.terms-section p,
.terms-section li {
    font-size: 0.95rem;
    color: #333333;
    text-align: justify;
}

.terms-section ul {
    padding-left: 1.25rem;
}

/* ==========================================================================
   MÓDULO DE PREDICCIONES (ESTILO COMPETICIÓN)
   ========================================================================== */
/* Ajustes de Bordes de Acento en Títulos */
.border-primary {
    border-color: var(--adac-primary-blue, #2D80EF) !important;
}

/* --- TABLA DE ESPECIFICACIONES TÉCNICAS --- */
.technical-spec-table {
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    overflow: hidden;
}

.technical-spec-table tbody tr {
    transition: background-color 0.15s ease;
}

.technical-spec-table td {
    padding: 14px 16px;
    font-size: 0.95rem;
}

/* Botón estilo carreras para descargas */
.btn-racing-download {
    background-color: #f3f3;
    border: 1px solid #dcdcdc;
    color: #111111;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 10px 20px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.btn-racing-download:hover {
    background-color: var(--adac-primary-blue, #2D80EF);
    color: #FFFFFF !important;
    border-color: var(--adac-primary-blue, #2D80EF);
}

/* --- TARJETA HOMOLOGACIÓN E IMAGEN (Módulo Oscuro) --- */
.identity-homologation-card {
    background-color: var(--adac-primary-blue, #2D80EF);
    border: 1px solid;
    border-radius: 16px;
    color: #FFFFFF;
}

.icon-box-homologation {
    width: 50px;
    height: 50px;
    background-color: rgba(45, 128, 239, 0.15);
    color: var(--adac-primary-blue, #2D80EF);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-light-muted {
    color: #A6A2B0 !important;
}

/* --- AJUSTES EXTRA PARA LAS CLASS CLASIFICACIÓN (FORZAR ANCHO RESPONSIVO) --- */
.custom-standings-card {
    background-color: var(--adac-dark-blue, #00466C) !important;
    max-width: 100% !important;
    /* Permitimos que se adapte al contenedor de la columna */
}

/* ==========================================================================
   MÓDULO PÁGINA DE ERROR 404 (ESTILO ALTA COMPETICIÓN)
   ========================================================================== */

.racing-error-container {
    padding: 2rem;
    border: 2px solid #EAEAEA;
    border-radius: 16px;
    background-color: #F8F9FA;
    position: relative;
    overflow: hidden;
}

/* Cintilla superior de advertencia tipo Comisarios/Marshal */
.racing-warning-strip {
    background-color: #FFCC00;
    /* Amarillo banderazo */
    color: #111111;
    font-family: 'venera_700', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 2rem;
}

/* Código numérico imponente de telemetría */
.racing-error-code {
    font-family: 'bebas_neuebold', sans-serif;
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--adac-dark-blue, #00466C);
    margin: 0;
    letter-spacing: -2px;
}

/* Título de error agresivo */
.racing-error-title {
    font-family: 'venera_700', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #111111;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

/* Cuerpo de texto legible */
.racing-error-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #4A4A4A;
    margin-bottom: 1.5rem;
}

/* Línea divisoria simulando marcas de asfalto */
.racing-pit-actions {
    border-top: 2px dashed #DCDCDC;
}

/* Botones de acción personalizados estilo "Pit Stop" */
.btn-racing-action {
    font-family: 'venera_700', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

/* Botón Principal (Azul de carreras) */
.btn-racing-action.primary {
    background-color: var(--adac-primary-blue, #2D80EF);
    color: #FFFFFF !important;
    border: 1px solid var(--adac-primary-blue, #2D80EF);
}

.btn-racing-action.primary:hover {
    background-color: var(--adac-dark-blue, #00466C);
    border-color: var(--adac-dark-blue, #00466C);
    transform: translateY(-2px);
}

/* Botón Secundario (Contorno plano y limpio) */
.btn-racing-action.secondary {
    background-color: transparent;
    color: #111111 !important;
    border: 1px solid #111111;
}

.btn-racing-action.secondary:hover {
    background-color: #111111;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

/* Ajustes responsivos para que los números no se desborden */
@media (min-width: 768px) {
    .racing-error-code {
        font-size: 8rem;
    }

    .racing-error-title {
        font-size: 2.2rem;
    }
}

/* ==========================================================================
   MÓDULO PÁGINA DE SOLICITU DE LICENCIA FEMADAC
   ========================================================================== */
.wizard-step {
    display: none;
}

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

/* Indicador visual superior estilo Telemetría */
.step-indicator {
    font-family: 'venera_700', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--adac-dark-text-muted);
    transition: color 0.3s;
}

.step-indicator.active {
    color: var(--adac-primary-blue) !important;
    border-bottom: 2px solid var(--adac-primary-blue);
}

.signature-container {
    border: 2px dashed var(--md-sys-color-outline);
    background-color: #f8f9fa;
    border-radius: 8px;
    position: relative;
}

#signature-pad {
    width: 100%;
    height: 200px;
    cursor: crosshair;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--adac-primary-blue);
    box-shadow: 0 0 0 0.25rem rgba(45, 128, 239, 0.25);
}

/* ==========================================================================
   DISEÑO EXCLUSIVO DE ACORDEÓN PREMIUM (ESTILO TARJETAS INDEPENDIENTES)
   ========================================================================== */

/* Contenedor principal sin bordes heredados */
.accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-bg: transparent;
}

/* Cada bloque del acordeón ahora es una tarjeta blanca redondeada e independiente */
.accordion-item {
    background-color: #FFFFFF !important;
    border: none !important;
    border-radius: 16px !important;
    /* Curvatura limpia idéntica a la imagen */
    margin-bottom: 16px;
    /* Separación entre bloques */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    /* Suave sombra de fondo */
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.accordion-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* Encabezado/Botón del acordeón */
.accordion-button {
    font-family: 'venera_700', sans-serif !important;
    /* Conserva tu fuente de carreras */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    background-color: #FFFFFF !important;
    padding: 22px 24px !important;
    /* Espaciado interno premium */
    border: none !important;
    box-shadow: none !important;
}

/* Quitar el color azul nativo de Bootstrap cuando está abierto o enfocado */
.accordion-button:not(.collapsed),
.accordion-button:focus {
    background-color: #FFFFFF !important;
    color: #111111 !important;
    box-shadow: none !important;
}

/* Personalización de la flecha minimalista a la derecha */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111111'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-size: 1.1rem;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cuerpo del contenido desplegado */
.accordion-body {
    padding: 0px 24px 24px 24px !important;
    /* Unimos el fondo sin cortes visuales */
    background-color: #FFFFFF !important;
    color: #333333;
    font-size: 14px;
}

/* ==========================================================================
   ESPACIO DE TRABAJO E IDENTIDAD CORPORATIVA
   ========================================================================== */

/* Contenedor general del panel */
.hub-panel {
    background-color: #ffffff !important;
    border: 1px solid #e9ebeb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden;
}

/* Faja gris superior del encabezado */
.hub-panel-header {
    background-color: #f8f9fa;
    padding: 16px 20px;
    border-bottom: 1px solid #eaeaea;
}

/* Tipografía de competición para el título del panel */
.hub-panel-title {
    font-family: 'venera_700', sans-serif !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #111111;
}

/* Burbuja circular para el icono de cabecera */
.hub-panel-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Bloque contenedor de enlaces */
.hub-panel-list {
    padding: 12px 20px;
}

/* Limitador de altura con barra de scroll para el panel grande */
.hub-panel-list.scrollable {
    max-height: 280px;
    overflow-y: auto;
}

/* Estilización premium y minimalista de los enlaces internos */
.hub-panel-link {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    color: #222222 !important;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease;
}

/* Icono de flecha interna de los enlaces */
.hub-panel-link i {
    font-size: 11px;
    color: #777777;
}

/* Estados hover de los enlaces */
.hub-panel-link:hover {
    color: var(--adac-primary-blue, #2D80EF) !important;
}

.hub-panel-link:not(:last-child) {
    border-bottom: 1px solid #f3f3f3;
}

/* Barra inferior del panel */
.hub-panel-footer {
    padding: 12px 20px;
    border-top: 1px solid #f3f3f3;
    background-color: #ffffff;
}

/* Botón "Ver todo" */
.hub-footer-action {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    color: #111111 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

.hub-footer-action i {
    font-size: 9px;
    transition: transform 0.15s ease;
}

.hub-footer-action:hover {
    color: var(--adac-primary-blue, #2D80EF) !important;
}

.hub-footer-action:hover i {
    transform: translateX(2px);
}

/* ==========================================================================
   ESTILOS EXCLUSIVOS PARA LA PÁGINA DE LOGIN (ESTILO COMUNICACIÓN DE CARRERAS)
   ========================================================================== */

.login-page-wrapper {
    min-height: 100vh;
    background-color: #ffffff;
}

/* Contenedor del formulario acotado para simetría visual perfecta */
.login-form-container {
    width: 100%;
    max-width: 440px;
    padding: 10px;
}

/* Etiquetas técnicas de los campos del formulario */
.form-label-custom {
    font-family: 'venera_700', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #111111;
    margin-bottom: 6px;
    display: inline-block;
}

/* Cajas de texto personalizadas con icono integrado */
.input-group-custom {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-group-custom .input-icon {
    position: absolute;
    left: 16px;
    color: #777777;
    font-size: 1.1rem;
    z-index: 3;
    pointer-events: none;
}

.input-group-custom .form-control {
    padding: 12px 16px 12px 48px;
    font-size: 0.95rem;
    border-radius: 8px;
    border: 1px solid #DCDCDC;
    background-color: #F8F9FA;
    color: #111111;
    transition: all 0.2s ease-in-out;
}

.input-group-custom .form-control:focus {
    background-color: #FFFFFF;
    border-color: var(--adac-primary-blue, #2D80EF);
    box-shadow: 0 0 0 4px rgba(45, 128, 239, 0.15);
}

/* Enlaces secundarios internos del formulario */
.form-link-forgot {
    font-family: 'bebas_neuebold', sans-serif;
    font-size: 13px;
    color: #777777;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.15s ease;
}

.form-link-forgot:hover {
    color: var(--adac-primary-blue, #2D80EF);
}

/* Checkbox adaptado */
.form-check-custom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-custom .form-check-input {
    cursor: pointer;
    margin: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.form-check-custom .form-check-input:checked {
    background-color: var(--adac-primary-blue, #2D80EF);
    border-color: var(--adac-primary-blue, #2D80EF);
}

.form-check-custom .form-check-label {
    font-size: 0.88rem;
    color: #4A4A4A;
    cursor: pointer;
    user-select: none;
}

/* Botón de envío agresivo / Estilo Pit Stop */
.btn-login-submit {
    font-family: 'venera_700', sans-serif;
    background-color: #111111;
    color: #FFFFFF;
    border: none;
    padding: 14px 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.btn-login-submit:hover {
    background-color: var(--adac-primary-blue, #2D80EF);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 128, 239, 0.3);
}

/* Caja inferior de invitación al registro */
.registration-prompt-box {
    border-top: 1px dashed #EAEAEA;
    font-size: 0.9rem;
    color: #4A4A4A;
}

.text-primary-action {
    color: var(--adac-primary-blue, #2D80EF);
    text-decoration: none;
    font-size: 0.85rem;
    font-family: 'venera_700', sans-serif;
    letter-spacing: 0.3px;
}

.text-primary-action:hover {
    text-decoration: underline;
}

/* --- PANEL LATERAL DE HERO DE ALTO IMPACTO (DERECHO) --- */
.login-side-hero-panel {
    position: relative;
    background-color: var(--adac-dark-surface, #0A0B0E);
    /* Puedes cambiar la URL por la imagen de circuito de tu preferencia */
    background-image: url('https://www.pilotosadac.com/assets/img/news/09-03-2026/2.jpg');
    background-size: cover;
    background-position: center;
}

/* Filtro oscuro encima de la imagen lateral para garantizar contraste con textos blancos */
.hero-panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 11, 14, 0.95) 0%, rgba(0, 70, 108, 0.8) 100%);
    z-index: 1;
}

.max-width-hero-text {
    max-width: 500px;
}

/* ==========================================================================
   DISEÑO EXCLUSIVO PARA EL ACORDEÓN DEL CENTRO DE AYUDA (SIDEBAR)
   ========================================================================== */

/* Contenedor del Acordeón del Sidebar */
.help-sidebar-accordion {
    background-color: transparent !important;
}

/* Items individuales del Sidebar */
.accordion-item.help-sidebar-item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 0px !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

/* Botones de Cabecera en el menú lateral */
.accordion-button.help-sidebar-btn {
    font-family: 'venera_700', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    background-color: transparent !important;
    padding: 16px 8px !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease;
}

/* Quitar fondos y sombras forzadas por Bootstrap al abrir o enfocar */
.accordion-button.help-sidebar-btn:not(.collapsed),
.accordion-button.help-sidebar-btn:focus {
    background-color: transparent !important;
    color: #00466C !important; /* Tu variable --adac-dark-blue */
    box-shadow: none !important;
}

/* Modificamos el tamaño y color del icono SVG integrado en el botón */
.accordion-button.help-sidebar-btn::after {
    background-size: 0.9rem;
    opacity: 0.7;
}

/* Cuerpo desplegable del menú de ayuda */
.accordion-body.help-sidebar-body {
    padding: 0px 8px 20px 44px !important; /* Desplazamiento estratégico alineado al texto */
    background-color: transparent !important;
}

/* Tamaño de los iconos principales al lado del título */
.help-icon {
    font-size: 1.15rem;
    line-height: 1;
}

/* Lista de Enlaces Internos */
.help-links-list li {
    margin-bottom: 12px;
}

.help-links-list li:last-child {
    margin-bottom: 0;
}

/* Hipervínculos Internos de Soporte */
.help-link {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    color: #4A4A4A !important;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.help-link i {
    font-size: 11px;
    color: #999999;
    margin-top: 3px;
}

.help-link:hover {
    color: var(--adac-light-blue, #009CDE) !important;
}

.help-link:hover i {
    color: var(--adac-light-blue, #009CDE);
}

/* Estilo para el link activo en el que se encuentra actualmente el usuario */
.help-active-link {
    font-weight: 600;
    color: #111111 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

.help-active-link i {
    color: #111111 !important;
}

/* Botón "Ver más" dentro de los bloques colapsables */
.help-view-more {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    color: #111111 !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

.help-view-more i {
    font-size: 9px;
    transition: transform 0.15s ease;
}

.help-view-more:hover {
    color: var(--adac-light-blue, #009CDE) !important;
}

.help-view-more:hover i {
    transform: translateX(2px);
}

/* ==========================================================================
    TV LIVE EXPERIENCE MODULE (SECCIÓN EXCLUSIVA DE TRANSMISIÓN)
   ========================================================================== */

/* Contenedor General de la Plataforma de Video */
.tv-live-workspace {
    background-color: #0A0B0E !important; /* Superficie ultra oscura de cine */
    min-height: calc(100vh - 125px);
    overflow: hidden;
    margin-top: 20px;
}

/* Cintilla de Estado en Directo */
.tv-live-ticker {
    background-color: #141218;
    border-bottom: 2px solid #22252a;
}

.tv-ticker-title {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

.tv-badge-live {
    font-family: 'venera_700', sans-serif;
    background-color: #dc3545;
    color: #ffffff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Marcos y Contenedores */
.bg-dark-surface {
    background-color: #111317 !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tv-theater-frame {
    background-color: #000000;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-main-title {
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

/* Botonera de Control de Canales */
.btn-tv-control {
    background-color: #1f2229;
    color: #C9C5D0;
    border: 1px solid transparent;
    font-family: 'venera_700', sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.btn-tv-control:hover {
    background-color: var(--adac-light-blue, #009CDE);
    color: #FFFFFF;
}

/* Tarjetas de Selección de Canales Opcionales (Sidebar Multi-Cam) */
.tv-sidebar-title {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

.tv-channel-card {
    text-decoration: none !important;
    background-color: #16191f;
    border: 1px solid rgba(255, 255, 255, 0.02);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tv-channel-card .tv-channel-name {
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #EFEFEF;
}

/* Miniaturas de canales */
.tv-thumb-wrapper {
    width: 60px;
    height: 38px;
    background-color: #000000;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tv-play-icon {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    z-index: 2;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Comportamiento Hover y Estado Activo de Canales */
.tv-channel-card:hover {
    background-color: #1f242e;
    transform: translateX(2px);
}

.tv-channel-card:hover .tv-play-icon {
    color: #FFFFFF;
    transform: scale(1.1);
}

.tv-channel-card.active {
    background-color: #1b2230;
    border-color: var(--adac-light-blue, #009CDE);
}

.tv-channel-card.active .tv-channel-name {
    color: #FFFFFF;
    font-weight: 700;
}

.tv-channel-card.active .tv-play-icon {
    color: var(--adac-light-blue, #009CDE);
}

/* Sección interna de Posiciones */
.tv-live-standings span {
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* Ajustes Extra para Scroll Limpio de Canales */
.tv-channel-grid::-webkit-scrollbar {
    width: 4px;
}
.tv-channel-grid::-webkit-scrollbar-track {
    background: transparent;
}
.tv-channel-grid::-webkit-scrollbar-thumb {
    background: #2a2f3b;
    border-radius: 2px;
}

/* ==========================================================================
   NUEVAS REGLAS DE CONTROL BANNER HERO DE TRANSMISIÓN (RELACIÓN EXACTA)
   ========================================================================== */

/* Ajuste del contenedor maestro basado en la proporción intrínseca */
.hero-live-container.ratio-hero-custom {
    background-color: #0A0B0E; /* Tu variable --adac-dark-surface */
    width: 100%;
    aspect-ratio: 2890 / 1239; 
}

/* Escalado asíncrono de la imagen de fondo */
.hero-live-bg {
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* Doble degradado: Bloqueo izquierdo para textos + Bloqueo inferior para títulos de miniaturas */
.hero-live-overlay {
    background: 
        linear-gradient(90deg, rgba(10, 11, 14, 0.95) 0%, rgba(10, 11, 14, 0.6) 35%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(0deg, rgba(10, 11, 14, 0.95) 0%, rgba(10, 11, 14, 0.4) 20%, rgba(0, 0, 0, 0) 50%);
    z-index: 2;
}

/* Caja de textos principales */
.hero-live-content {
    z-index: 3;
    max-width: 500px;
    height: 65%; /* Limita el contenedor para que no baje al área de las tarjetas */
}

/* Categoría o Badge superior */
.hero-live-category {
    color: var(--adac-dark-text-muted, #C9C5D0);
    font-family: 'bebas_neuebold', sans-serif !important;
    font-size: 14px;
    letter-spacing: 0.8px;
}

/* Título Premium en alta definición */
.hero-live-title {
    color: #FFFFFF;
    font-size: 2.2rem;
    line-height: 1.05;
    letter-spacing: -0.5px;
}

/* Resumen/Descripción */
.hero-live-desc {
    color: #C9C5D0;
    font-size: 13px;
    line-height: 1.4;
}

/* Botón de reproducción estilo pildora roja */
.btn-hero-play {
    background-color: #dc3545; /* Rojo FIA */
    color: #FFFFFF !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 8px 24px;
    border-radius: 50px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-hero-play:hover {
    background-color: #bd2130;
    transform: scale(1.03);
}

/* Área inferior de miniaturas destacadas */
.hero-live-highlights {
    z-index: 4;
}

/* Forzar ancho personalizado para simular las columnas F1 */
.grid-highlight-item {
    width: 240px !important;
}

/* Miniaturas compactas integradas en el flujo inferior */
.featured-bottom-card.custom-live-mini {
    background: transparent;
}

.featured-bottom-card.custom-live-mini .featured-bottom-img-box {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px; /* Bordes rectos minimalistas de competición */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.featured-bottom-card.custom-live-mini .featured-bottom-title {
    font-size: 0.78rem !important;
    font-weight: 700;
    color: #FFFFFF !important; /* Texto blanco sólido idéntico al ejemplo */
    letter-spacing: 0.2px;
}

/* Efecto hover interactivo en títulos */
.featured-bottom-thumb-link:hover .custom-live-mini .featured-bottom-title {
    color: var(--adac-light-blue, #009CDE) !important;
}

/* --- ADAPTACIÓN RESPONSIVA PANTALLAS GRANDES --- */
@media (min-width: 992px) {
    .hero-live-title {
        font-size: 3.4rem;
    }
}

/* --- ADAPTACIÓN RESPONSIVA DISPOSITIVOS MÓVILES --- */
@media (max-width: 767.98px) {
    .hero-live-container.ratio-hero-custom {
        aspect-ratio: auto;
        min-height: 520px; /* Suficiente espacio vertical para apilar el diseño sin que se rompa */
    }
    .hero-live-overlay {
        background: linear-gradient(180deg, rgba(10, 11, 14, 0.4) 0%, rgba(10, 11, 14, 0.98) 80%) !important;
    }
    .hero-live-content {
        position: relative !important;
        height: auto !important;
        padding-top: 50px !important;
        padding-bottom: 20px !important;
        max-width: 100%;
    }
    .hero-live-highlights {
        position: relative !important;
        padding-top: 10px !important;
        padding-bottom: 30px !important;
    }
    .grid-highlight-item {
        width: 190px !important; /* Miniaturas sutilmente más compactas en celular */
    }
}

/* Animación de zoom en la imagen al posicionar el cursor sobre la tarjeta */
.media-card-link .media-transform-img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.media-card-link:hover .media-transform-img {
  transform: scale(1.04);
}

/* Transición de realce de color en el botón */
.media-card-link .btn-danger {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.media-card-link:hover .btn-danger {
  background-color: #bd2130; /* Tono rojo oscuro de acción */
  border-color: #bd2130;
}

/* Limitador de líneas para prevenir asimetría entre títulos largos */
.media-title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}