/*
 * Tema full width: estética de plataforma de vídeo. Contenido a todo el ancho con el mismo margen lateral, títulos de
 * bloque sobrios con «Ver todo» a la derecha, carruseles alineados a la izquierda que llegan al borde de la pantalla
 * (la tarjeta siguiente asoma; en móvil se desliza), flechas en los bordes que aparecen al pasar el ratón y tarjetas
 * 16:9 con el título sobre la imagen. Ver includes/tema.php.
 * Usa lo que se elige en Común › Diseño: --radius-card, --card-hover-lift, --card-hover-zoom, --color-live...
 * Los bloques unificados (.ott-*, ver _base.css) van arriba; al final, el contenedor de página (.ott-contenedor) y
 * lo que necesitan con este tema los bloques de la portada que aún no son .ott-* ([data-pagina="index2"]).
 */

/* Medidas del tema */
:root {
    --fw-lado: clamp(16px, 3.5vw, 64px);                      /* margen lateral del contenido */
    --fw-hueco: clamp(10px, 1vw, 18px);                       /* separación entre tarjetas */
    --fw-radio: var(--radius-card, 12px);                     /* esquinas de las tarjetas */
    --fw-espacio: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);   /* entre bloques */
    --fw-sombra: 0 12px 28px rgba(0, 0, 0, 0.45);             /* tarjeta al pasar el ratón */
}

/* Bloque: todos con el mismo margen lateral y la misma separación */
.ott-bloque {
    padding-top: var(--fw-espacio);
}

.ott-bloque__contenedor {
    width: 100%;
    padding-left: var(--fw-lado);
    padding-right: var(--fw-lado);
}

.ott-bloque__cuerpo {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Cabecera: título a la izquierda y, a la derecha, «Ver todo», las pestañas o los botones del bloque */
.ott-bloque .home-section {
    padding: 0;
    margin: 0 0 0.875rem;
}

.ott-bloque__cabecera {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0;
}

.ott-bloque__cabecera > :last-child:not(:first-child) {
    margin-left: auto;
}

.ott-bloque__titulo {
    max-width: 100%;
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* Vídeos de un canal: logo delante del nombre (con este tema el logo no va como diapositiva) */
.ott-bloque__logo {
    display: block;
    width: auto;
    height: 2.25rem;
    max-width: 8rem;
    object-fit: contain;
    border-radius: 6px;
}

.ott-bloque__ver-todo {
    display: inline-flex !important;   /* gana al display: none !important de _base.css y al display en línea de la página */
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    color: var(--color-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.ott-bloque__ver-todo:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.ott-bloque__ver-todo i {
    font-size: 0.7em;
    transition: transform 0.2s ease;
}

.ott-bloque__ver-todo:hover i {
    transform: translateX(3px);
}

/* El «Ver...» de abajo sobra donde la cabecera ya lo lleva */
.ott-bloque--destacados .ott-bloque__pie,
.ott-bloque--nuevos .ott-bloque__pie,
.ott-bloque--ultimos-directos .ott-bloque__pie,
.ott-bloque--programacion .ott-bloque__pie,
.ott-bloque--videos-canal .ott-bloque__pie,
.ott-bloque--clubes .ott-bloque__pie {
    display: none;
}

/* Etiquetas: el «Ver todos en ...» de cada pestaña sigue abajo, como enlace */
.ott-bloque .ott-bloque__pie {
    margin-top: 0.5rem;
}

.ott-bloque .ott-boton-ver,
.ott-bloque .ott-boton-ver:hover {
    --cool-btn-bg: transparent;
    --cool-btn-border: transparent;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.ott-bloque .ott-boton-ver:hover {
    --cool-btn-fg: #FFFFFF;
}

/* Pestañas (Más vistos, Etiquetas): pastillas; la activa, del color secundario */
.ott-bloque .tab-nav__v2 .nav {
    gap: 0.5rem;
}

.ott-bloque .tab-nav__v2 .nav-item {
    margin: 0 !important;
}

.ott-bloque .tab-nav__v2 .coolBtn {
    --cool-btn-bg: rgba(255, 255, 255, 0.08);
    --cool-btn-fg: rgba(255, 255, 255, 0.8);
    --cool-btn-border: transparent;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.ott-bloque .tab-nav__v2 .coolBtn:hover {
    --cool-btn-bg: rgba(255, 255, 255, 0.16);
    --cool-btn-fg: #FFFFFF;
}

/* .active con más peso que el estilo en línea de Más vistos (.nav:not(.nav-pills) .nav-link.active) */
.ott-bloque .tab-nav__v2 .nav .coolBtn.active,
.ott-bloque .tab-nav__v2 .nav .nav-link.coolBtn.active {
    --cool-btn-bg: var(--color-secondary);
    --cool-btn-fg: var(--color-secondary-text, #000000);
    color: var(--color-secondary-text, #000000);
}

/* Carrusel: alineado a la izquierda y hasta el borde derecho de la pantalla, así la tarjeta siguiente asoma; como
   mucho 5 tarjetas por debajo de 1600px, 4 por debajo de 1300, 3 en tableta, 2 en móvil grande y 1 en móvil (con más
   asomo para que se vea que se puede deslizar). Arriba y abajo deja sitio para la sombra de la tarjeta al pasar el ratón */
.ott-carrusel {
    margin-left: calc(var(--fw-hueco) / -2);
    margin-right: calc(var(--fw-lado) * -1);
    --carrusel-centrado: 0;
    --carrusel-restar: 0;
    --fw-asomo: 0px;
}

.ott-carrusel .slick-list {
    padding-top: 6px;
    padding-bottom: 18px;
    padding-right: calc(var(--fw-lado) - var(--fw-hueco) / 2 + var(--fw-asomo)) !important;
}

/* Cada tarjeta es una diapositiva: el hueco va como margen (slick lo descuenta del ancho), con !important para ganar
   al m-2 de programación y al margen de las tarjetas de sección */
.ott-bloque .ott-carrusel .slick-slide {
    margin-left: calc(var(--fw-hueco) / 2) !important;
    margin-right: calc(var(--fw-hueco) / 2) !important;
}

@media (max-width: 1599.98px) {
    .ott-carrusel { --carrusel-maximo: 5; }
}

@media (max-width: 1299.98px) {
    .ott-carrusel { --carrusel-maximo: 4; }
}

@media (max-width: 991.98px) {
    .ott-carrusel { --carrusel-maximo: 3; }
}

@media (max-width: 767.98px) {
    .ott-carrusel { --carrusel-maximo: 2; --fw-asomo: 8vw; }
}

@media (max-width: 575.98px) {
    .ott-carrusel { --carrusel-maximo: 1; --fw-asomo: 14vw; }
}

/* Flechas: círculos oscuros translúcidos, centrados en alto sobre el borde de la primera y la última tarjeta visibles;
   aparecen al pasar el ratón por el carrusel y se rellenan del color secundario al pasar por encima. Sin flecha donde
   no hay más (slick-disabled) ni en pantallas táctiles, donde se desliza. .ott-carrusel delante para ganar a .fa */
.ott-carrusel {
    --fw-flecha: 44px;
}

.ott-carrusel .ott-carrusel__flecha {
    position: absolute;
    top: calc(50% - 6px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fw-flecha);
    height: var(--fw-flecha);
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ott-carrusel .ott-carrusel__flecha--anterior {
    left: calc(var(--fw-hueco) / 2 - var(--fw-flecha) / 2);
}

.ott-carrusel .ott-carrusel__flecha--siguiente {
    right: calc(var(--fw-lado) - var(--fw-flecha) / 2);
}

.ott-carrusel:hover .ott-carrusel__flecha,
.ott-carrusel .ott-carrusel__flecha:focus-visible {
    opacity: 1;
}

.ott-carrusel .ott-carrusel__flecha:hover {
    border-color: transparent;
    background: var(--color-secondary);
    color: var(--color-secondary-text, #000000);
    transform: translateY(-50%) scale(1.06);
}

.ott-carrusel .ott-carrusel__flecha.slick-disabled {
    opacity: 0 !important;
    pointer-events: none;
}

@media (hover: none) {
    .ott-carrusel .ott-carrusel__flecha {
        display: none !important;
    }
}

/* Tarjetas: sin el relleno de la tarjeta antigua (el hueco lo pone el carrusel o la rejilla) */
.ott-bloque .product {
    position: relative;
    overflow: visible;
    padding: 0 !important;
}

.ott-bloque .product > .mb-4 {
    margin-bottom: 0 !important;
}

/* Seguir viendo (assets/css/imports/bloque_seguir_viendo.css, que va detrás: de ahí el .ott-bloque): aquí la tarjeta no
   lleva relleno ni baja la imagen */
.ott-bloque .ott-seguir {
    --seguir-hueco: 0px;
    --seguir-arriba: 0px;
}

/* Tarjeta de vídeo (includes/bloque_video_standart.php y bloque_video_vertical.php): imagen recortada sin deformar
   (16:9, o 2:3 en la vertical), esquinas de Común › Diseño y, al pasar el ratón, sube y amplía la imagen según
   Común › Diseño › Efecto de las tarjetas */
.ott-bloque .video-titulo-container .mt-2,
.ott-bloque .video-vertical-container .mt-2 {
    position: relative;
    margin-top: 0 !important;
    overflow: hidden;
    border-radius: var(--fw-radio);
    background-color: rgba(255, 255, 255, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ott-bloque .video-titulo-container .mt-2:hover,
.ott-bloque .video-vertical-container .mt-2:hover {
    transform: translateY(calc(-4px * var(--card-hover-lift, 1)));
    box-shadow: var(--fw-sombra);
}

.ott-bloque .video-titulo-container img,
.ott-bloque .video-vertical-container img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none !important;
    transition: transform 0.35s ease;
}

.ott-bloque .video-vertical-container img {
    aspect-ratio: 2 / 3;
}

.ott-bloque .video-titulo-container .mt-2:hover img,
.ott-bloque .video-vertical-container .mt-2:hover img {
    transform: scale(calc(1 + 0.05 * var(--card-hover-zoom, 1)));
}

/* Título en dos líneas sobre un degradado (sin el desenfoque de antes) */
.ott-bloque .video-titulo-container .gradiente_texto,
.ott-bloque .video-vertical-container .gradiente_texto {
    position: absolute !important;
    top: auto;
    right: 0;
    bottom: 0 !important;
    left: 0;
    z-index: 2;
    width: auto;
    height: auto;
    padding: 2.5rem 0.75rem 0.6rem !important;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    text-transform: none;
    letter-spacing: 0;
    font-size: inherit;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: none;
    border-radius: 0;
    pointer-events: none;
}

.ott-bloque .video-titulo-container .gradiente_texto a,
.ott-bloque .video-vertical-container .gradiente_texto a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 0.925rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.ott-bloque .video-titulo-container .mt-2:hover .gradiente_texto a,
.ott-bloque .video-vertical-container .mt-2:hover .gradiente_texto a {
    color: var(--color-secondary);
}

/* Fecha: pastilla discreta arriba a la derecha */
.ott-bloque .video-titulo-container .fecha-video,
.ott-bloque .video-vertical-container .fecha-video {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    bottom: auto;
    left: auto;
    z-index: 2;
    width: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    backdrop-filter: blur(4px);
}

/* «Visto» y «Directo»: etiquetas arriba a la izquierda */
.ott-bloque .ott-visto {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    width: auto;
    height: auto;
    padding: 0.25rem 0.5rem;
    clip-path: none;
    border: 0;
    border-radius: 999px !important;
    background: var(--color-secondary);
    color: var(--color-secondary-text, #000000);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.ott-bloque .ott-visto::before {
    content: "\2713";
}

.ott-bloque .ott-visto__texto {
    display: inline;
}

.ott-bloque .ott-etiqueta--directo {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--color-live, #E50914);
    color: var(--color-live-text, #FFFFFF);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ott-bloque .ott-etiqueta--directo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: live-pulse 1.5s ease-in-out infinite;
}

.ott-bloque--directos .ott-visto {
    top: 2.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .ott-bloque .ott-etiqueta--directo::before {
        animation: none;
    }
}

/* Tarjetas de canal (imagen del canal o póster vertical) con el mismo comportamiento */
.ott-bloque .ott-tarjeta {
    overflow: hidden;
    border-radius: var(--fw-radio);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ott-bloque .ott-tarjeta:hover {
    transform: translateY(calc(-4px * var(--card-hover-lift, 1)));
    box-shadow: var(--fw-sombra);
}

.ott-bloque .ott-tarjeta img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 0;
    box-shadow: none !important;
    transition: transform 0.35s ease;
}

.ott-bloque .ott-tarjeta:hover img {
    transform: scale(calc(1 + 0.05 * var(--card-hover-zoom, 1)));
}


/* ---- Ajustes de cada bloque ---- */

/* Canales: sin el alto mínimo de la lista de carrouselCanalInferior */
.ott-bloque--canales .slick-list.draggable {
    min-height: 0;
}

/* Programación y subcanales: sus tarjetas con las mismas esquinas, sombra y efecto que las de vídeo */
.ott-bloque--programacion .coolCardMatch {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: var(--fw-radio);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ott-bloque--programacion .coolCardMatch:hover {
    transform: translateY(calc(-4px * var(--card-hover-lift, 1)));
    box-shadow: var(--fw-sombra);
}

.ott-bloque--subcanales .coolCardBanner {
    min-height: 6.5rem;
    margin-top: 0;
    margin-bottom: 0;
    padding: 1.5rem 1.25rem;
    border-radius: var(--fw-radio);
    font-size: 1.05rem;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.ott-bloque--subcanales .coolCardBanner:hover {
    transform: translateY(calc(-4px * var(--card-hover-lift, 1)));
    box-shadow: var(--fw-sombra);
    text-decoration: none;
}

/* Rejilla de vídeos (Nuevos vídeos, Más vistos): 1 por fila en móvil, 2 en tableta y 3 desde 992px, con el mismo
   hueco que los carruseles */
.ott-rejilla {
    align-items: flex-start;
}

.ott-rejilla__item {
    flex: 0 0 100%;
    max-width: 100%;
    padding: calc(var(--fw-hueco) / 2);
}

@media (min-width: 768px) {
    .ott-rejilla__item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .ott-rejilla__item {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

.ott-rejilla__principal {
    padding: calc(var(--fw-hueco) / 2) !important;
}

/* Vídeos de un canal: el logo va en la cabecera (la diapositiva del logo se quita), sin «Ver todos» abajo */
.ott-carrusel .ott-logo-canal {
    display: none;
}


/* ---- Contenedor de página (all_clubs, listado, mi_club, programacion y subcanal) ----
   El PHP pinta siempre «container ott-contenedor» (el contenedor de Bootstrap, como en el clásico); este tema lo deja
   a todo el ancho, como el antiguo container-full, que no tenía estilos propios */
.container.ott-contenedor {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

/* mi_club y subcanal: al 90% y centrado (sus estilos en línea de .container-full) */
:where([data-pagina="mi_club"], [data-pagina="subcanal"]) .container.ott-contenedor {
    width: 90%;
    margin: 0 auto;
}

/* subcanal: tarjetas con la imagen redondeada y el título sobre ella (sus estilos en línea de .container-full) */
:where([data-pagina="subcanal"]) .ott-contenedor .product {
    position: relative;
    width: 100%;
}

:where([data-pagina="subcanal"]) .ott-contenedor .product .img-fluid {
    width: 100%;
    border-radius: 16px;
    min-height: 180px;
}

:where([data-pagina="subcanal"]) .ott-contenedor .product .product-title {
    position: absolute;
    left: 0;
    width: 100%;
    height: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    padding: 0.5em;
    backdrop-filter: brightness(1) blur(1em);
    background: linear-gradient(180deg, rgba(18, 9, 17, 0.50) -96.72%, #0E0E0E -96.69%, rgba(86, 86, 86, 0.00) 184.43%);
    color: #fff;
    bottom: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* listado: igual, con el título en .gradiente_texto (antes en assets/css/imports/listado.css) */
.ott-contenedor .lv-card .product {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ott-contenedor .lv-card .product .img-fluid {
    width: 100%;
    min-height: 180px;
    border-radius: var(--radius-card, 16px);
}

.ott-contenedor .lv-card .product .gradiente_texto {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: fit-content;
    padding: 0.5em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 1;
    color: #fff;
    background: linear-gradient(180deg, rgba(18, 9, 17, 0.5) -96.72%, #0E0E0E -96.69%, rgba(86, 86, 86, 0) 184.43%);
    backdrop-filter: brightness(1) blur(1em);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}


/* ---- Portada (index2.php): bloques que aún no son .ott-* ----
   Banners, patrocinadores, federación, sliders...: títulos .titulo-seccion, flechas .prevButton/.nextButton, tarjetas
   .product. Antes, assets/css/styles_full_width.php en la portada con este tema. Son reglas de toda la página
   (también llegan a la cabecera, los menús y el pie) y :where() no suma especificidad: pesan lo mismo que entonces.
   Los títulos ya van como los de los bloques .ott-* */
:where([data-pagina="index2"]) .container-full .home-section {
    padding: 1.5em;
    margin-top: 2em;
}

:where([data-pagina="index2"]) .titulo-seccion {
    color: #FFFFFF;
    font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    max-width: 100%;
}

:where([data-pagina="index2"]) .nextButton,
:where([data-pagina="index2"]) .prevButton {
    background: var(--color-primary);
    font-size: 17px;
    cursor: pointer;
    color: var(--color-secondary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    border-radius: 50%;
}

:where([data-pagina="index2"]) .nextButton:hover,
:where([data-pagina="index2"]) .prevButton:hover {
    filter: opacity(0.5);
}

:where([data-pagina="index2"]) .prevButton {
    left: 1em;
}

:where([data-pagina="index2"]) .nextButton {
    right: 1em;
}

:where([data-pagina="index2"]) .product {
    position: relative;
    overflow: hidden;
    padding-bottom: 0.75em;
}

:where([data-pagina="index2"]) .product img {
    width: 100%;
    border-radius: var(--radius-card, 16px);
    min-height: 180px;
}

:where([data-pagina="index2"]) .video-vertical-container img {
    height: 440px;
    object-fit: cover;
}

:where([data-pagina="index2"]) .product-title {
    font-weight: bold;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where([data-pagina="index2"]) .gradiente_texto {
    position: absolute;
    left: 0;
    width: 100%;
    height: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    padding: 0.5em;
}

:where([data-pagina="index2"]) .video-titulo-container .gradiente_texto {
    backdrop-filter: brightness(1) blur(1em);
    background: linear-gradient(180deg, rgba(18, 9, 17, 0.50) -96.72%, #0E0E0E -96.69%, rgba(86, 86, 86, 0.00) 184.43%);
    color: #fff;
    bottom: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

:where([data-pagina="index2"]) .video-vertical-container .gradiente_texto {
    top: 0;
    background: var(--color-secondary);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    text-transform: uppercase;
    color: #000;
    height: 56px;
    font-size: 1.5em;
    letter-spacing: -2px;
}

:where([data-pagina="index2"]) .fecha-video {
    position: absolute;
}

:where([data-pagina="index2"]) .video-titulo-container .fecha-video {
    background-color: white;
    right: 1em;
    top: 1em;
    border-radius: 22px;
    padding: 0.25em 0.5em;
    color: #0C0C0C;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.32px;
}

:where([data-pagina="index2"]) .video-vertical-container .fecha-video {
    backdrop-filter: brightness(1) blur(1em);
    background: linear-gradient(180deg, rgba(18, 9, 17, 0.50) -96.72%, #0E0E0E -96.69%, rgba(86, 86, 86, 0.00) 184.43%);
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    width: 100%;
    padding: 0.5em 1em;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 32.128px;
    letter-spacing: -0.22px;
}

:where([data-pagina="index2"]) .manita {
    color: #FFFFFF;
}

:where([data-pagina="index2"]) .gradiente_texto:hover .manita {
    color: var(--color-secondary);
}

:where([data-pagina="index2"]) .video-vertical-container .manita {
    color: #000000;
}

@media (max-width: 576px) {
    :where([data-pagina="index2"]) .container-full {
        padding: 0.5em;
    }

    :where([data-pagina="index2"]) .titulo-seccion {
        padding-left: 0;
    }

    :where([data-pagina="index2"]) .carrouselVerticalBanner {
        margin: 0 auto;
        width: 90%;
    }
}


/* ---- Portada: cabecera grande (slider y superdestacado) y federación, alineados con los bloques .ott-* ---- */

/* Slider 2 (includes/bloque_slider_home2.php). La altura la marca la imagen (el gestor la recorta a 1920×645), así no
   se corta; el texto va abajo a la izquierda con el margen de los bloques y entra con un fundido al cambiar de
   diapositiva; barras de progreso en vez de puntos y flechas en círculo abajo a la derecha al pasar el ratón. En móvil,
   la imagen entera arriba y el texto debajo. El bloque trae estilos en línea detrás de esta hoja: por eso los
   selectores del texto y de las barras llevan una clase más (.ott-slider__texto, .home-slider) */
.slider-home2 {
    --fw-slider-proporcion: 1920 / 645;
    --fw-slider-pase: 5.3s;                              /* autoplaySpeed (5000) + speed (300) del bloque */
    --fw-slider-barras: calc(var(--fw-espacio) * 0.75);  /* distancia de las barras y las flechas al borde de abajo */
    --fw-flecha: 44px;
}

/* Todas las diapositivas igual de altas: si un texto no cabe, la más alta manda */
.slider-home2 #sliderSyncingNav2 .slick-track {
    display: flex;
}

.slider-home2 #sliderSyncingNav2 .slick-track::before,
.slider-home2 #sliderSyncingNav2 .slick-track::after {
    display: none;
}

.slider-home2 #sliderSyncingNav2 .slick-slide {
    flex-shrink: 0;
    float: none;
    height: auto;
}

/* Como mínimo, el alto de la imagen a todo el ancho (no aspect-ratio: con él la diapositiva no crece si el texto no cabe) */
.slider-home2 .ott-slider__diapositiva {
    min-height: calc(100vw / (var(--fw-slider-proporcion)));
    align-items: flex-end !important;
    background-position: center top;
}

/* Oscurecer solo las diapositivas con texto, a la izquierda y abajo, donde va; los banners sin texto se ven limpios */
.slider-home2 .ott-slider__diapositiva--texto::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 65%),
        linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);
    pointer-events: none;
}

/* Fundido con el fondo de la página abajo, en todas */
.slider-home2 .ott-slider__diapositiva::after {
    height: 25%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-primary));
    pointer-events: none;
}

.slider-home2 .ott-slider__texto {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    width: auto;
    max-width: min(42rem, 58%);
    margin: 0 var(--fw-lado) !important;
    padding: var(--fw-espacio) 0 calc(var(--fw-slider-barras) + 2.5rem) !important;
}

/* Subcanales: etiqueta pequeña del color secundario, en línea y separados por «·» */
.slider-home2 .ott-slider__texto .lista-canales {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0 0 0.75rem;
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.slider-home2 .ott-slider__texto .lista-canales li + li::before {
    content: "·";
    margin-right: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.slider-home2 .ott-slider__texto .lista-canales a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.slider-home2 .ott-slider__texto .lista-canales a:hover {
    color: #FFFFFF;
}

/* Título: grande, en negrita y como mucho en tres líneas */
.slider-home2 .ott-slider__texto .text-titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-width: none;
    margin: 0 0 1.25rem;
    color: #FFFFFF;   /* también los «...» del corte */
    font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.slider-home2 .ott-slider__texto .text-titulo a {
    color: #FFFFFF !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.slider-home2 .ott-slider__texto .text-titulo a[href]:hover {
    color: var(--color-secondary) !important;
}

/* Botón «▶ Ver ahora» en pastilla, con el fondo secundario que ya le da .btn-primary */
.slider-home2 .ott-slider__texto .btn-ir-url {
    align-self: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 1.75rem 0.8rem 1.4rem;
    border-radius: 999px !important;
    color: var(--color-secondary-text, #000000) !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.slider-home2 .ott-slider__texto .btn-ir-url:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* Entrada del texto al cambiar de diapositiva: subcanales, título y botón, uno detrás de otro */
@keyframes ott-slider-entrada {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

.slider-home2 .ott-slider__diapositiva.slick-current .ott-slider__texto > * {
    animation: ott-slider-entrada 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.slider-home2 .ott-slider__diapositiva.slick-current .ott-slider__texto > :nth-child(2) {
    animation-delay: 0.08s;
}

.slider-home2 .ott-slider__diapositiva.slick-current .ott-slider__texto > :nth-child(3) {
    animation-delay: 0.16s;
}

/* Barras en vez de puntos, abajo a la izquierda con el texto; la activa se llena durante el pase (el slider no se para
   al pasar el ratón, pero sí con el foco dentro: entonces la barra también se para) */
@keyframes ott-slider-progreso {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.slider-home2 .home-slider .slick-pagination {
    left: var(--fw-lado);
    right: auto;
    bottom: 0;
    z-index: 2;
    gap: 6px;
    justify-content: flex-start;
    margin-bottom: var(--fw-slider-barras) !important;
}

.slider-home2 .home-slider .slick-pagination li {
    margin: 0;
    padding: 10px 0;
}

.slider-home2 .home-slider .slick-pagination li span {
    position: relative;
    display: block;
    width: 28px;
    height: 4px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.35);
    transform: none;
    transition: width 0.3s ease, background-color 0.2s ease;
}

.slider-home2 .home-slider .slick-pagination li:hover span {
    background-color: rgba(255, 255, 255, 0.6);
}

.slider-home2 .home-slider .slick-pagination li.slick-active span {
    width: 48px;
    background-color: rgba(255, 255, 255, 0.35);
    transform: none;
}

.slider-home2 .home-slider .slick-pagination li.slick-active span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--color-secondary);
    transform-origin: left center;
    animation: ott-slider-progreso var(--fw-slider-pase) linear both;
}

.slider-home2 .home-slider:focus-within .slick-pagination li.slick-active span::after {
    animation-play-state: paused;
}

/* Flechas: círculos como los de los carruseles, juntos abajo a la derecha a la altura de las barras; aparecen al pasar el
   ratón. Sin flechas en pantallas táctiles ni en móvil (se desliza) ni con las miniaturas a la vista. Los display van con
   !important porque slick hace .show() de las flechas al arrancar y jQuery les pone display: block en línea */
.slider-home2 .ott-slider__flecha {
    position: absolute;
    bottom: calc(var(--fw-slider-barras) + 12px - var(--fw-flecha) / 2);
    z-index: 3;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--fw-flecha);
    height: var(--fw-flecha);
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.slider-home2 .ott-slider__flecha--anterior {
    right: calc(var(--fw-lado) + var(--fw-flecha) + 8px);
}

.slider-home2 .ott-slider__flecha--siguiente {
    right: var(--fw-lado);
}

.slider-home2 .home-slider:hover .ott-slider__flecha,
.slider-home2 .ott-slider__flecha:focus-visible {
    opacity: 1;
}

.slider-home2 .ott-slider__flecha:hover {
    border-color: transparent;
    background: var(--color-secondary);
    color: var(--color-secondary-text, #000000);
    transform: scale(1.06);
}

.slider-home2 .ott-slider__flecha:focus {
    outline: none;
}

.slider-home2 .ott-slider__flecha:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (min-width: 1200px) {
    .slider-home2:has(#sliderSyncingThumb2:not([style*="none"])) .ott-slider__flecha {
        display: none !important;
    }
}

@media (hover: none), (max-width: 767.98px) {
    .slider-home2 .ott-slider__flecha {
        display: none !important;
    }
}

/* Miniaturas (si están activadas, solo en pantallas grandes): abajo a la derecha, 16:9 y redondeadas; atenuadas
   menos la activa, que lleva un borde del color secundario. Sin el gris, el borde blanco ni el triángulo de antes */
@media (min-width: 1200px) {
    .slider-home2 .home-slider > .position-xl-absolute {
        left: auto;
        right: var(--fw-lado);
        bottom: 0;
        z-index: 2;
        flex: none;
        width: min(40%, 40rem);
        max-width: none;
        margin-bottom: calc(var(--fw-slider-barras) - 0.25rem) !important;
        padding: 0 !important;
        justify-content: flex-end !important;
    }
}

.slider-home2 #sliderSyncingThumb2 {
    width: 100%;
}

.slider-home2 .home-slider #sliderSyncingThumb2 .slick-track .slick-slide,
.slider-home2 .home-slider #sliderSyncingThumb2 .slick-track .slick-slide.slick-active {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.slider-home2 .home-slider #sliderSyncingThumb2 .thumb-img::before {
    content: none !important;
}

.slider-home2 .home-slider #sliderSyncingThumb2 .slick-slide img {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 0 !important;
    border-radius: 8px;
    filter: none !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.slider-home2 .home-slider #sliderSyncingThumb2 .slick-slide:hover img {
    opacity: 0.85;
}

.slider-home2 .home-slider #sliderSyncingThumb2 .slick-slide.slick-current img {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
    opacity: 1;
}

/* Móvil: la imagen entera arriba (la pinta el ::before, que hereda el fondo de la diapositiva) y el texto debajo,
   sobre el fondo de la página */
@media (max-width: 767.98px) {
    .slider-home2 .ott-slider__diapositiva {
        display: block !important;
        min-height: 0;
        background-size: 0 0;
    }

    .slider-home2 .ott-slider__diapositiva::before,
    .slider-home2 .ott-slider__diapositiva--texto::before {
        content: "";
        position: relative;
        inset: auto;
        display: block;
        aspect-ratio: var(--fw-slider-proporcion);
        background: none;
        background-image: inherit;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .slider-home2 .ott-slider__diapositiva::after {
        top: 0;
        bottom: auto;
        height: auto;
        aspect-ratio: var(--fw-slider-proporcion);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, var(--color-primary));
    }

    .slider-home2 .ott-slider__texto {
        max-width: none;
        padding: 0.75rem 0 calc(var(--fw-slider-barras) + 2.25rem) !important;
    }

    .slider-home2 .ott-slider__texto .lista-canales {
        margin-bottom: 0.5rem;
    }

    .slider-home2 .ott-slider__texto .text-titulo {
        margin-bottom: 1rem;
        font-size: clamp(1.35rem, 1rem + 2.2vw, 1.75rem);
        text-shadow: none;
    }

    .slider-home2 .ott-slider__texto .btn-ir-url {
        padding: 0.7rem 1.5rem 0.7rem 1.25rem;
        font-size: 0.9375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slider-home2 .ott-slider__diapositiva.slick-current .ott-slider__texto > *,
    .slider-home2 .home-slider .slick-pagination li.slick-active span::after {
        animation: none;
    }
}

/* Superdestacado: igual, con el título grande, la entradilla en tres líneas y el botón en pastilla */
:where([data-pagina="index2"]) .container-superdestacado {
    position: relative;
    margin-top: var(--fw-espacio) !important;
}

:where([data-pagina="index2"]) .container-superdestacado::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 75%),
        linear-gradient(to top, var(--color-primary) 0%, rgba(0, 0, 0, 0) 35%);
    pointer-events: none;
}

:where([data-pagina="index2"]) .container-superdestacado > .container {
    position: relative;
    z-index: 1;
    max-width: none;
    padding-left: var(--fw-lado) !important;
    padding-right: var(--fw-lado) !important;
}

:where([data-pagina="index2"]) .container-superdestacado .display-8 {
    font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

:where([data-pagina="index2"]) .container-superdestacado p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1rem;
}

:where([data-pagina="index2"]) .container-superdestacado .btn {
    border-radius: 999px !important;
    padding: 0.75rem 1.75rem !important;
    font-weight: 700;
}

/* Federación: el mismo margen lateral que los bloques */
:where([data-pagina="index2"]) .container-full:has(> .fed) {
    padding-left: var(--fw-lado) !important;
    padding-right: var(--fw-lado) !important;
}