/*
 * Tema classic: contenido centrado con el ancho del contenedor de Bootstrap, título con una línea hasta el
 * borde, flechas finas por fuera del carrusel y como mucho 3 diapositivas en tableta. Ver includes/tema.php.
 * Los valores son los de las utilidades del tema (theme.css) que usaban los bloques classic.
 */

/* Bloque y contenedor (antes primary-color pt-5 + container px-md-6 px-xl-7 px-wd-6 pb-3) */
.ott-bloque {
    padding-top: 2rem;
}

.ott-bloque__contenedor {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 1rem;
}

@media (min-width: 576px) {
    .ott-bloque__contenedor { max-width: 540px; }
}

@media (min-width: 768px) {
    .ott-bloque__contenedor {
        max-width: 720px;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

@media (min-width: 992px) {
    .ott-bloque__contenedor { max-width: 960px; }
}

/* Desde 1200px manda .home-v5 .container de theme.css */
@media (min-width: 1200px) {
    .ott-bloque__contenedor {
        max-width: 1776px;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width: 1480px) {
    .ott-bloque__contenedor {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* Cabecera: título y una línea hasta el borde en escritorio */
.ott-bloque__cabecera {
    margin-bottom: 1.5rem;
}

.ott-bloque__titulo {
    font-family: var(--font-principal, "Montserrat", sans-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .ott-bloque__titulo { margin-bottom: 0; }
}

@media (min-width: 992px) {
    .ott-bloque__separador {
        display: block;
        position: relative;
        flex: 1 1 0%;
        max-width: 100%;
        margin: 0 1rem;
        border-top: 0.0625rem solid #394253;
    }
}

/* Carrusel: las diapositivas configuradas en escritorio, 3 como mucho en tableta y una en móvil; sin centrar */
.ott-carrusel {
    margin-left: -0.7rem;
    margin-right: -0.7rem;
}

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

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

/* Flechas finas y transparentes por fuera del carrusel, a 40px del borde inferior (antes slick-arrow-svg-*).
   La de «siguiente» lleva además el chevron de Font Awesome, como antes */
.ott-carrusel__flecha {
    position: absolute;
    bottom: 40px;
    background-color: transparent;
}

.ott-carrusel__flecha:hover {
    background-color: transparent;
}

.ott-carrusel .ott-carrusel__flecha::before {
    width: 1.375rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="42" fill="rgb(177, 177, 177)"><path d="M21.988,40.588 L20.602,41.988 L0.011,21.204 L0.214,20.999 L0.011,20.795 L20.602,0.011 L21.988,1.410 L2.582,20.999 L21.988,40.588 Z"/></svg>');
}

.ott-carrusel .ott-carrusel__flecha--anterior::before {
    content: "";
}

.ott-carrusel .ott-carrusel__flecha--siguiente::before {
    margin-left: auto;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="43"><path d="M22.707,21.707 L1.707,42.707 L0.293,41.293 L20.086,21.500 L0.293,1.706 L1.707,0.292 L22.707,21.292 L22.500,21.499 L22.707,21.707 Z" fill="rgb(177, 177, 177)"/></svg>');
}

.ott-carrusel__flecha--anterior {
    left: 0;
    margin-left: -1.5rem;
}

.ott-carrusel__flecha--siguiente {
    right: 0;
}

@media (min-width: 992px) {
    .ott-carrusel__flecha--siguiente { margin-right: -2rem; }
}

@media (min-width: 1480px) {
    .ott-carrusel__flecha--anterior { margin-left: -2rem; }
    .ott-carrusel__flecha--siguiente { margin-right: -3rem; }
}

/* «Ver todos...»: botón pequeño del color secundario (antes btn btn-primary text-white botonpocopadding) */
.ott-boton-ver {
    --cool-btn-bg: var(--color-secondary);
    --cool-btn-fg: #fff;
    --cool-btn-border: var(--color-secondary);
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-btn, 0.3125rem);
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
    box-shadow: none;
}

.ott-boton-ver:hover {
    --cool-btn-bg: var(--color-secondary);
    --cool-btn-fg: #fff;
    --cool-btn-border: var(--color-secondary);
}

/* Pestañas (Más vistos): enlaces de texto gris, el activo en negrita y del color secundario (antes nav-link) */
.ott-pestana,
.ott-pestana:hover {
    --cool-btn-bg: transparent;
    --cool-btn-fg: #949cb0;
    --cool-btn-border: transparent;
}

.ott-pestana {
    display: block;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: inherit;
    letter-spacing: normal;
}

.ott-pestana.active {
    --cool-btn-bg: transparent;
    --cool-btn-fg: var(--color-secondary);
    --cool-btn-border: transparent;
    font-weight: 700;
}

/* Rejilla de vídeos: dos por fila y tres desde 992px (antes col-6 col-lg-4 px-2) */
.ott-rejilla__item {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

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

/* Tarjetas de vídeo: velo muy suave sobre la imagen (antes gradiente_imagen, que heredaban las tarjetas pintadas
   después de «Nuevos vídeos»); en la grande de la rejilla, sin los 20px de la derecha */
.ott-bloque .product.video-titulo-container .mt-2 > div:first-child > .manita::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(240, 47, 23, 0) 0, rgba(0, 0, 0, 0.9) 100%);
    opacity: 0.1;
}

@media (min-width: 992px) {
    .ott-bloque .ott-rejilla__principal .product.video-titulo-container .mt-2 > div:first-child > .manita::before {
        width: calc(100% - 20px);
    }
}

/* Elementos opcionales del carrusel que classic no tenía: la tarjeta «más vídeos» */
.ott-carrusel__extra--mas-videos {
    display: none;
}


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

/* Canales y canales verticales (antes space-1 pb-5, pt-1, mb-5, slick-gutters-2 y flechas centradas sin icono) */
.ott-bloque--canales,
.ott-bloque--canales-verticales {
    padding-bottom: 2rem;
}

.ott-bloque--canales .ott-bloque__contenedor,
.ott-bloque--canales-verticales .ott-bloque__contenedor {
    padding-top: 0.25rem;
    padding-bottom: 0;
}

.ott-bloque--canales .ott-bloque__cabecera,
.ott-bloque--canales-verticales .ott-bloque__cabecera {
    margin-bottom: 2rem;
}

.ott-bloque--canales .ott-carrusel,
.ott-bloque--canales-verticales .ott-carrusel {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.ott-bloque--canales .ott-carrusel .slick-slide,
.ott-bloque--canales-verticales .ott-carrusel .slick-slide {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.ott-bloque--canales .ott-carrusel__flecha,
.ott-bloque--canales-verticales .ott-carrusel__flecha {
    top: 50%;
    bottom: auto;
    transform: translate(0, -50%);
}

.ott-bloque--canales .ott-carrusel .ott-carrusel__flecha--siguiente::before,
.ott-bloque--canales-verticales .ott-carrusel .ott-carrusel__flecha--siguiente::before {
    content: "";
}

@media (min-width: 1480px) {
    .ott-bloque--canales .ott-carrusel__flecha--anterior,
    .ott-bloque--canales-verticales .ott-carrusel__flecha--anterior {
        margin-left: -1.5rem;
    }
}

/* Subcanales y programación: tarjetas de otra altura que las de vídeo, así que las flechas van centradas en alto y
   sin icono, como en canales */
.ott-bloque--subcanales .ott-carrusel__flecha,
.ott-bloque--programacion .ott-carrusel__flecha {
    top: 50%;
    bottom: auto;
    transform: translate(0, -50%);
}

.ott-bloque--subcanales .ott-carrusel .ott-carrusel__flecha--siguiente::before,
.ott-bloque--programacion .ott-carrusel .ott-carrusel__flecha--siguiente::before {
    content: "";
}

/* Canales verticales: alto mínimo del carrusel (antes carrouselVertical) */
.ott-bloque--canales-verticales .slick-list.draggable {
    min-height: 550px;
    padding-top: 10px;
}

/* Etiquetas (antes pt-10 y border-bottom) */
.ott-bloque--etiquetas {
    padding-top: 4.5rem;
}

.ott-bloque--etiquetas .ott-bloque__cuerpo {
    border-bottom: 0.0625rem solid rgba(247, 246, 246, 0.2);
}

/* Directos (sin pb-4) */
.ott-bloque--directos .ott-bloque__cuerpo {
    padding-bottom: 0;
}

/* Cabeceras que acababan en unas pestañas vacías: en móvil el margen del título no se junta con el de la cabecera */
@media (max-width: 767.98px) {
    .ott-bloque--recomendaciones .ott-bloque__cabecera,
    .ott-bloque--directos .ott-bloque__cabecera,
    .ott-bloque--ultimos-directos .ott-bloque__cabecera,
    .ott-bloque--destacados .ott-bloque__cabecera,
    .ott-bloque--nuevos .ott-bloque__cabecera,
    .ott-bloque--videos-canal .ott-bloque__cabecera {
        display: flow-root;
    }
}

/* Nuevos vídeos y más vistos (antes space-1, container pt-4 y cabecera pb-1) */
.ott-bloque--nuevos,
.ott-bloque--mas-vistos {
    padding-bottom: 2rem;
}

.ott-bloque--nuevos .ott-bloque__contenedor,
.ott-bloque--mas-vistos .ott-bloque__contenedor {
    padding-top: 1.5rem;
    padding-bottom: 0;
}

.ott-bloque--mas-vistos .ott-bloque__contenedor {
    padding-bottom: 0.25rem;
}

.ott-bloque--nuevos .ott-bloque__cabecera,
.ott-bloque--mas-vistos .ott-bloque__cabecera {
    padding-bottom: 0.25rem;
}

/* Destacados (antes pt-10 y border-bottom) con su tarjeta de siempre: más relleno, imagen entera, título en negrita
   sobre la imagen y sin fecha */
.ott-bloque--destacados {
    padding-top: 4.5rem;
}

.ott-bloque--destacados .ott-bloque__cuerpo {
    border-bottom: 0.0625rem solid rgba(247, 246, 246, 0.2);
}

.ott-bloque--destacados .product {
    padding-left: 0.7rem !important;  /* la tarjeta lleva px-1d, con !important */
    padding-right: 0.7rem !important;
}

.ott-bloque--destacados .v9_imagen_grande {
    width: auto;
}

.ott-bloque--destacados .gradiente_texto {
    position: absolute;
}

.ott-bloque--destacados .gradiente_texto a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #fff;
    font-size: 0.87422rem;
    font-weight: 700;
}

.ott-bloque--destacados .gradiente_texto a:hover {
    color: #24baef;
}

.ott-bloque--destacados .fecha-video {
    display: none;
}

/* Vídeos de un canal: sin aire arriba, logo con la descripción debajo y flechas de Font Awesome grandes y
   translúcidas por fuera (antes slide-arrow) */
.ott-bloque--videos-canal {
    padding-top: 0;
}

.ott-carrusel .ott-logo-canal {
    margin: 0.75rem 0.5rem 1.5rem;
    text-align: center;
}

@media (min-width: 992px) {
    .ott-carrusel .ott-logo-canal { margin-bottom: 0; }
}

.ott-logo-canal__imagen {
    height: 5rem;
    width: 100%;
    object-fit: contain;
}

.ott-logo-canal__descripcion {
    color: white;
}

.ott-bloque--videos-canal .ott-carrusel__flecha {
    top: 50%;
    bottom: auto;
    margin-top: -15px;
    width: 0;
    height: 0;
    font-size: 2.5rem;
    color: #ffffff40;
}

.ott-bloque--videos-canal .ott-carrusel__flecha--anterior {
    left: -40px;
    margin-left: 0;
}

.ott-bloque--videos-canal .ott-carrusel__flecha--siguiente {
    right: -40px;
    margin-right: 0;
}

.ott-bloque--videos-canal .ott-carrusel .ott-carrusel__flecha::before {
    width: 100%;
    margin-left: 0;
    background-image: none;
}

.ott-bloque--videos-canal .ott-carrusel .ott-carrusel__flecha--anterior::before {
    content: "\f053";
}

.ott-bloque--videos-canal .ott-carrusel .ott-carrusel__flecha--siguiente::before {
    content: "\f054";
}