/* Portada pública de la OTT (index.php). Retoques de estética: no cambian el comportamiento de los
   bloques ni su configuración (colores, textos, imágenes, anchos y radios siguen saliendo del gestor).
   Todo va bajo .portada-ott, el <main> de index.php. La cabecera (Cabecera2) lleva sus estilos en
   includes/bloque_portada_home2.php */

.portada-ott {
    --portada-hueco: clamp(56px, 7vw, 112px);
    --portada-velo: color-mix(in srgb, var(--color-primary, #141623) 82%, transparent);
}

/* ---------- Cabecera clásica (bloque «Cabecera»: la usa, p. ej., voley; Cabecera2 va en su plantilla) ---------- */

/* Pantalla completa (svh: el alto con las barras del navegador del móvil visibles) con la imagen cubriendo
   el fondo; el texto, centrado en vertical con flex (si no cabe, la cabecera crece en vez de cortarlo) */
.portada-ott .background-wrapper.cabecera-clasica {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

/* La imagen oculta que antes daba el alto (el de la foto) ya no hace falta */
.portada-ott .cabecera-clasica__medida {
    display: none;
}

/* Velo del color primario por la izquierda (detrás del texto) y fundido al color de la página por abajo */
.portada-ott .cabecera-clasica::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--color-primary, #141623) 78%, transparent) 0%, transparent 58%),
        linear-gradient(to bottom, transparent 72%, var(--color-primary, #141623) 100%);
}

.portada-ott .cabecera-clasica__texto {
    position: relative !important;
    z-index: 1;
    width: min(56%, 700px);
    margin-left: clamp(20px, 6vw, 120px);
    padding: clamp(96px, 12vh, 140px) 0 clamp(80px, 10vh, 120px) !important;
}

.portada-ott .cabecera-clasica__logo {
    max-width: 100%;
    height: auto;
    margin-bottom: clamp(12px, 1.6vw, 24px);
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
}

/* Sin logo configurado no queda una imagen vacía ni su salto de línea */
.portada-ott .cabecera-clasica__logo[src=""],
.portada-ott .cabecera-clasica__logo[src=""] + br {
    display: none;
}

.portada-ott .cabecera-clasica__titulo {
    margin: 0 0 0.35em;
    color: #fff;
    font-size: clamp(2rem, 0.8rem + 2.9vw, 4.25rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
}

.portada-ott .cabecera-clasica__subtitulo {
    max-width: 32em;
    margin: 0 0 1.75em;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
    font-weight: 400;
    line-height: 1.5;
    text-wrap: pretty;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

/* Botones de suscripción: coolBtn translúcido con el borde de «Color Botón», que lo rellena al pasar el ratón */
.portada-ott .cabecera-clasica__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.portada-ott .cabecera-clasica__botones .header-tipo-suscripcion {
    display: block;
    flex: 1 1 200px;
    width: auto;
    max-width: 280px;
    margin: 0;
}

.portada-ott .cabecera-clasica__botones .coolBtn {
    --cool-btn-bg: color-mix(in srgb, var(--color-primary, #141623) 40%, transparent);
    --cool-btn-fg: #fff;
    --cool-btn-border: var(--cabecera-btn, var(--color-secondary, #3df59e));
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
}

.portada-ott .cabecera-clasica__botones .coolBtn:hover {
    --cool-btn-bg: var(--cabecera-btn, var(--color-secondary, #3df59e));
    --cool-btn-fg: var(--cabecera-btn-texto, var(--color-primary, #141623));
    --cool-btn-border: var(--cabecera-btn, var(--color-secondary, #3df59e));
}

/* home.css les pone un fondo !important (de cuando eran btn-primary): el fondo es el del coolBtn */
.portada-ott .cabecera-clasica .header-tipo-suscripcion a.coolBtn {
    background-color: transparent !important;
    border-color: var(--cool-btn-border) !important;
}

/* Botón de sesión (arriba a la derecha): sus colores siguen saliendo de la plantilla */
.portada-ott .cabecera-clasica a.btn-inicio-sesion {
    z-index: 2;
    top: clamp(12px, 2vw, 24px);
    right: clamp(12px, 2vw, 24px);
    padding: 10px 22px;
    border-radius: var(--radius-btn, 10px);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.portada-ott .cabecera-clasica a.btn-inicio-sesion:active {
    transform: translateY(1px);
}

.portada-ott .cabecera-clasica a.btn-inicio-sesion:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .portada-ott .cabecera-clasica__texto > :not(br) {
        animation: cabecera-clasica-entra 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .portada-ott .cabecera-clasica__titulo {
        animation-delay: 0.1s;
    }

    .portada-ott .cabecera-clasica__subtitulo {
        animation-delay: 0.18s;
    }

    .portada-ott .cabecera-clasica__botones {
        animation-delay: 0.26s;
    }
}

@keyframes cabecera-clasica-entra {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* Móvil y tableta en vertical: el contenido centrado (como en ordenador y en Cabecera2) sobre un velo
   uniforme que oscurece la foto, recortada en vertical, y la funde abajo con la página */
@media (max-width: 768px) {
    .portada-ott .cabecera-clasica::before {
        background:
            linear-gradient(to bottom, transparent 62%, var(--color-primary, #141623) 100%),
            linear-gradient(color-mix(in srgb, var(--color-primary, #141623) 52%, transparent), color-mix(in srgb, var(--color-primary, #141623) 52%, transparent));
    }

    .portada-ott .cabecera-clasica__texto {
        width: 100%;
        margin: 0;
        padding: 88px 20px 64px !important;
        text-align: center;
    }

    /* Botones uno debajo del otro y anchos: uno al lado del otro no cabían y el texto se partía */
    .portada-ott .cabecera-clasica__botones {
        flex-direction: column;
        align-items: center;
    }

    .portada-ott .cabecera-clasica__botones .header-tipo-suscripcion {
        flex: none;
        width: 100%;
        max-width: 360px;
    }

    .portada-ott .cabecera-clasica__logo {
        max-width: 60% !important;
    }

    .portada-ott .cabecera-clasica__subtitulo {
        margin-inline: auto;
    }

}

/* «Disfruta en directo» (vídeos marcados para la portada): el título como los demás de la portada */
.portada-ott .cabecera-clasica-directo {
    margin-inline: 0;
    padding-top: var(--portada-hueco);
}

.portada-ott .cabecera-clasica-directo__carrusel {
    width: min(100%, 1100px);
    margin: 0 auto;
    padding-inline: 16px;
    text-align: center;
}

/* ---------- Bloques de imagen: Banner, Info a la derecha, Info a la izquierda ---------- */

/* Sin el hueco de línea bajo cada imagen (antes se tapaba con margin-bottom: -7px) */
.portada-ott .background-wrapper {
    display: block;
    margin-bottom: 0;
}

.portada-ott .background-wrapper img {
    vertical-align: bottom;
}

/* Banner con enlace: un leve realce al pasar el ratón */
.portada-ott .background-wrapper > a {
    display: block;
    overflow: hidden;
}

.portada-ott .background-wrapper > a img {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s ease;
}

@media (hover: hover) {
    .portada-ott .background-wrapper > a:hover img {
        transform: scale(1.01);
        filter: brightness(1.06);
    }
}

/* Título y subtítulo sobre la foto: escalan con límites (antes 5vw y 1.25vw) y con ancho de lectura */
.portada-ott .bloque_home h1,
.portada-ott .bloque_home.displays_options h1 {
    font-size: clamp(2rem, 1.1rem + 3vw, 4.25rem) !important;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.portada-ott .bloque_home h2,
.portada-ott .bloque_home.displays_options h2 {
    max-width: 36em;
    font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3rem);
    font-weight: 400;
    line-height: 1.6;
    text-wrap: pretty;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Velo del color primario por el lado del texto, para que se lea sobre cualquier foto. Solo si el
   bloque tiene texto (con-texto lo ponen las plantillas) y solo en ordenador: en móvil el texto va aparte */
@media (min-width: 769px) {
    .portada-ott .background-wrapper.con-texto::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .portada-ott .background-wrapper.con-texto.texto-izquierda::after {
        background: linear-gradient(90deg, var(--portada-velo) 0%, transparent 62%);
    }

    .portada-ott .background-wrapper.con-texto.texto-derecha::after {
        background: linear-gradient(270deg, var(--portada-velo) 0%, transparent 62%);
    }
}

@media (max-width: 768px) {
    .portada-ott .bloque_home h2,
    .portada-ott .bloque_home.displays_options h2 {
        margin-inline: auto;
    }
}

/* ---------- Patrocinadores y Carrusel: el mismo ritmo y el mismo título ---------- */

.portada-ott .portada-logos {
    margin: 0 !important;
    padding-top: var(--portada-hueco) !important;
    padding-bottom: calc(var(--portada-hueco) * 0.8) !important;
}

/* Título centrado con un acento del color secundario (antes uno a la izquierda con raya y otro centrado) */
.portada-ott .portada-patrocinadores header {
    justify-content: center !important;
    margin-bottom: 2.5rem !important;
}

.portada-ott .portada-patrocinadores header > .border-top,
.portada-ott .portada-patrocinadores header > .tab-nav__v2 {
    display: none !important;
}

.portada-ott .portada-patrocinadores header > div:first-child,
.portada-ott .portada-carrusel > h2,
.portada-ott .cabecera-clasica-directo__titulo,
.portada-ott .portada-seccion__titulo {
    position: relative;
    padding-bottom: 0.9rem;
    color: #fff;
    font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
}

.portada-ott .portada-patrocinadores header > div:first-child {
    margin: 0 !important;
}

.portada-ott .portada-carrusel > h2,
.portada-ott .cabecera-clasica-directo__titulo {
    margin: 0 auto 2.5rem !important;
    padding-inline: 16px;
}

.portada-ott .cabecera-clasica-directo__titulo {
    width: 100%;
}

.portada-ott .portada-patrocinadores header > div:first-child::after,
.portada-ott .portada-carrusel > h2::after,
.portada-ott .cabecera-clasica-directo__titulo::after,
.portada-ott .portada-seccion__titulo::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--color-secondary, #3df59e);
    transform: translateX(-50%);
}

.portada-ott .portada-patrocinadores header > div:first-child:empty,
.portada-ott .portada-carrusel > h2:empty {
    display: none;
}

/* Logos de patrocinadores: sin ancho configurado no pasan de 280px (antes ocupaban la columna entera,
   hasta 560px). Con ancho configurado manda ese ancho */
.portada-ott .portada-patrocinadores .slick-slide img:not([style*="width"]) {
    width: 100%;
    max-width: 280px;
}

.portada-ott .portada-patrocinadores .slick-slide img {
    transition: transform 0.25s ease, filter 0.25s ease;
}

@media (hover: hover) {
    .portada-ott .portada-patrocinadores .slick-slide a:hover img {
        transform: translateY(-3px);
        filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
    }
}

/* El carrusel no va dentro de un contenedor: un margen a los lados para que las tarjetas no toquen el borde */
.portada-ott .portada-carrusel > .js-slick-carousel {
    padding-inline: clamp(8px, 2.5vw, 40px);
}

/* Logos del carrusel: cada uno en una tarjeta discreta de la misma altura. El hueco entre tarjetas es
   un borde transparente, para no descuadrar el ancho que calcula el carrusel. El radio sigue siendo
   el configurado (va en el propio logo) */
.portada-ott .portada-carrusel img.slick-slide {
    box-sizing: border-box;
    height: 116px !important; /* slick pone height: auto en línea */
    padding: 18px 26px !important;
    border: 6px solid transparent;
    background: color-mix(in srgb, var(--color-light-primary, #333843) 60%, transparent) padding-box;
    object-fit: contain;
    opacity: 0.88;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
    .portada-ott .portada-carrusel img.slick-slide:hover {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* Flechas de los carruseles con el aspecto de los botones de la OTT (coolBtn) */
.portada-ott .slick-arrow.slick-arrow-svg-left,
.portada-ott .slick-arrow.slick-arrow-svg-right {
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--color-secondary, #3df59e) 20%, transparent);
    background-color: var(--color-light-primary, #333843);
    color: var(--color-secondary, #3df59e);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.portada-ott .slick-arrow.slick-arrow-svg-left:hover,
.portada-ott .slick-arrow.slick-arrow-svg-right:hover {
    border-color: var(--color-secondary, #3df59e);
    background-color: var(--color-secondary, #3df59e);
    color: var(--color-primary, #141623);
}

.portada-ott .slick-arrow.slick-arrow-svg-left::before,
.portada-ott .slick-arrow.slick-arrow-svg-right::before {
    content: '' !important;
    width: 9px;
    height: 16px;
    margin: 0;
    background: currentColor;
    -webkit-mask: var(--portada-flecha) center / contain no-repeat;
    mask: var(--portada-flecha) center / contain no-repeat;
}

.portada-ott .slick-arrow.slick-arrow-svg-left {
    --portada-flecha: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18"><path d="M9 1 1 9l8 8" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.portada-ott .slick-arrow.slick-arrow-svg-right {
    --portada-flecha: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18"><path d="m1 1 8 8-8 8" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* ---------- Bloques de contenido (Nuevos vídeos, Preguntas frecuentes, Dónde verlo, Cifras, Competiciones o
   clubes): mismo hueco, mismo ancho y el mismo título que el resto de la portada ---------- */

.portada-ott .portada-seccion {
    position: relative;
    padding: var(--portada-hueco) 16px;
    background-position: center;
    background-size: cover;
    color: #fff;
}

.portada-ott .portada-seccion__marco {
    width: min(100%, 1320px);
    margin-inline: auto;
}

.portada-ott .portada-seccion__cabecera {
    margin-bottom: 2.5rem;
    text-align: center;
}

.portada-ott .portada-seccion__titulo {
    margin: 0 auto;
}

.portada-ott .portada-seccion__subtitulo {
    max-width: 40em;
    margin: 1.1rem auto 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.6;
    text-wrap: pretty;
}

/* Título a un lado (Preguntas frecuentes y Dónde verlo con imagen, en ordenador): el acento, debajo a la izquierda */
@media (min-width: 992px) {
    .portada-ott .portada-faq__marco--con-cabecera .portada-seccion__titulo,
    .portada-ott .portada-donde--con-imagen .portada-seccion__titulo {
        text-align: left;
    }

    .portada-ott .portada-faq__marco--con-cabecera .portada-seccion__titulo::after,
    .portada-ott .portada-donde--con-imagen .portada-seccion__titulo::after {
        left: 0;
        transform: none;
    }

    .portada-ott .portada-faq__marco--con-cabecera .portada-seccion__subtitulo,
    .portada-ott .portada-donde--con-imagen .portada-seccion__subtitulo {
        margin-left: 0;
    }
}

/* ---------- Nuevos vídeos: la tarjeta de vídeo de dentro de la OTT (.cardVideo) en rejilla ---------- */

.portada-ott .portada-videos__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 20px;
}

.portada-ott .portada-videos .cardVideo {
    aspect-ratio: 16 / 9;
}

/* Móvil: una fila que se desliza con el dedo (asoma la tarjeta siguiente), en vez de una columna muy larga */
@media (max-width: 576px) {
    .portada-ott .portada-videos__rejilla {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: 12px;
        margin-inline: -16px;
        padding: 10px 16px 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }

    .portada-ott .portada-videos__rejilla::-webkit-scrollbar {
        display: none;
    }

    .portada-ott .portada-videos .cardVideo {
        scroll-snap-align: start;
    }
}

/* ---------- Preguntas frecuentes: el título a un lado y las preguntas, desplegables, al otro ---------- */

.portada-ott .portada-faq__marco {
    display: grid;
    gap: 0 4rem;
    width: min(100%, 1100px);
}

.portada-ott .portada-faq__cabecera {
    margin-bottom: 2.5rem;
    text-align: center;
}

@media (min-width: 992px) {
    .portada-ott .portada-faq__marco--con-cabecera {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        align-items: start;
    }

    .portada-ott .portada-faq__marco--con-cabecera .portada-faq__cabecera {
        position: sticky;
        top: 96px;
        margin-bottom: 0;
        text-align: left;
    }
}

.portada-ott .portada-faq__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portada-ott .portada-faq__item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-card, 14px);
    background: color-mix(in srgb, var(--color-light-primary, #333843) 55%, transparent);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.portada-ott .portada-faq__item[open] {
    border-color: color-mix(in srgb, var(--color-secondary, #3df59e) 45%, transparent);
    background: color-mix(in srgb, var(--color-light-primary, #333843) 85%, transparent);
}

.portada-ott .portada-faq__pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 18px 20px 18px 22px;
    border-radius: inherit;
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.portada-ott .portada-faq__pregunta::-webkit-details-marker {
    display: none;
}

.portada-ott .portada-faq__pregunta:hover {
    color: var(--color-secondary, #3df59e);
}

.portada-ott .portada-faq__pregunta:focus-visible {
    outline: 2px solid var(--color-secondary, #3df59e);
    outline-offset: 2px;
}

/* Un «+» que se vuelve «−» al abrir */
.portada-ott .portada-faq__icono {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-secondary, #3df59e) 14%, transparent);
}

.portada-ott .portada-faq__icono::before,
.portada-ott .portada-faq__icono::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-secondary, #3df59e);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
}

.portada-ott .portada-faq__icono::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.portada-ott .portada-faq__item[open] .portada-faq__icono::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.portada-ott .portada-faq__respuesta {
    max-width: 62ch;
    padding: 0 22px 20px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
}

.portada-ott .portada-faq__respuesta p {
    margin: 0 0 0.75em;
}

.portada-ott .portada-faq__respuesta p:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .portada-ott .portada-faq__item[open] .portada-faq__respuesta {
        animation: portada-faq-abre 0.3s ease both;
    }
}

@keyframes portada-faq-abre {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* ---------- Dónde verlo: insignias de las tiendas (las imágenes del menú lateral) ---------- */

.portada-ott .portada-donde__marco {
    display: grid;
    gap: 2.5rem 4rem;
    align-items: center;
    width: min(100%, 1100px);
    text-align: center;
}

.portada-ott .portada-donde__tiendas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.portada-ott .portada-donde__tienda {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portada-ott .portada-donde__tienda img {
    display: block;
    width: auto;
    height: 52px;
}

@media (hover: hover) {
    .portada-ott .portada-donde__tienda:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 0 1px var(--color-secondary, #3df59e), 0 12px 24px -12px rgba(0, 0, 0, 0.7);
    }
}

.portada-ott .portada-donde__tienda:active {
    transform: translateY(0);
}

.portada-ott .portada-donde__tienda:focus-visible {
    outline: 2px solid var(--color-secondary, #3df59e);
    outline-offset: 3px;
}

/* Plataformas sin app todavía: más pequeñas y apagadas */
.portada-ott .portada-donde__pronto {
    margin: 2rem 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.portada-ott .portada-donde__tiendas--pronto {
    gap: 8px;
    margin-top: 0.75rem;
}

.portada-ott .portada-donde__tiendas--pronto .portada-donde__tienda {
    opacity: 0.55;
    filter: grayscale(1);
}

.portada-ott .portada-donde__tiendas--pronto .portada-donde__tienda:hover {
    opacity: 0.8;
}

.portada-ott .portada-donde__tiendas--pronto .portada-donde__tienda img {
    height: 38px;
}

.portada-ott .portada-donde__imagen img {
    display: block;
    width: 100%;
    max-height: 520px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

@media (min-width: 992px) {
    .portada-ott .portada-donde--con-imagen .portada-donde__marco {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        text-align: left;
    }

    .portada-ott .portada-donde--con-imagen .portada-donde__tiendas {
        justify-content: flex-start;
    }
}

/* ---------- Cifras: lo que hay en la OTT, contado de la base de datos ---------- */

.portada-ott .portada-cifras {
    padding-block: calc(var(--portada-hueco) * 0.8);
    background: linear-gradient(to bottom,
        transparent,
        color-mix(in srgb, var(--color-light-primary, #333843) 35%, transparent) 50%,
        transparent);
}

.portada-ott .portada-cifras__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2.25rem 1rem;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.portada-ott .portada-cifras__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.portada-ott .portada-cifras__icono {
    margin-bottom: 0.3rem;
    color: color-mix(in srgb, var(--color-secondary, #3df59e) 75%, transparent);
    font-size: 1.1rem;
}

.portada-ott .portada-cifras__valor {
    color: var(--color-secondary, #3df59e);
    font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.portada-ott .portada-cifras__texto {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    font-weight: 500;
}

@media (max-width: 576px) {
    .portada-ott .portada-cifras__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Con un número impar de cifras, la última, centrada en su fila */
    .portada-ott .portada-cifras__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ---------- Competiciones o clubes: tarjeta de sección (secciones_canal.css) o de club (club_cards.css) ---------- */

.portada-ott .portada-clubes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portada-ott .portada-clubes .containerEscudo {
    display: block;
    width: 8.5rem;
}

.portada-ott .portada-clubes .club-link {
    gap: 10px;
}

.portada-ott .portada-clubes .club-link:focus-visible {
    outline: 2px solid var(--color-secondary, #3df59e);
    outline-offset: 4px;
    border-radius: 8px;
}

.portada-ott .portada-clubes__videos {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: -4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.portada-ott .portada-clubes__videos i {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65em;
}

/* Móvil: tres escudos por fila (de dos en dos, veinte clubes eran una lista muy larga) */
@media (max-width: 576px) {
    .portada-ott .portada-clubes {
        gap: 1.5rem 12px;
    }

    .portada-ott .portada-clubes .containerEscudo {
        width: calc((100% - 24px) / 3);
    }

    .portada-ott .portada-clubes .imgEscudo {
        width: 5.25rem;
        height: 5.25rem;
        padding: 0.5rem;
    }

    .portada-ott .portada-clubes .club-name {
        font-size: 0.72rem;
    }
}