/* ============================================================================
   ESTRENOS — lanzamientos recientes y los que vienen
   ----------------------------------------------------------------------------
   Tres carruseles con el mismo slide: el video arriba y su ficha debajo, del
   mismo ancho. La ficha es el enganche hacia la página de la banda.
   ============================================================================ */

.page-estrenos { padding-block: var(--pr-sp-6, 2.5rem) var(--pr-sp-8, 4rem); }

.pr-estrenos-cabecera { margin-bottom: var(--pr-sp-6, 2.5rem); }
.pr-estrenos-cabecera__titulo { display: flex; align-items: center; gap: .45rem; }
.pr-estrenos-cabecera h1 { margin-bottom: .35rem; }
.pr-estrenos-cabecera p { max-width: 62ch; margin: 0; opacity: .8; }

.pr-estrenos-bloque { margin-bottom: var(--pr-sp-8, 3.5rem); }
.pr-estrenos-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; margin-bottom: var(--pr-sp-4, 1.25rem); }
.pr-estrenos-titulo h2 { margin: 0; }
.pr-estrenos-titulo p { margin: 0; font-size: .92rem; opacity: .72; }

/* El slide entero ES la tarjeta: video arriba, ficha abajo, un solo bloque
   recortado por el padre. La ficha va en el crema oscuro del portal
   —--pr-surface-alt, el mismo fondo un tono más abajo— para que la tarjeta se
   despegue de la página en vez de flotar sobre ella. */
.pr-estreno {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--pr-border, #e7dcca);
    border-radius: var(--pr-radius, 12px);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}
.pr-estreno:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(35, 24, 19, .13); }

.pr-estreno__video {
    position: relative;
    aspect-ratio: 16 / 9;
    /* Recorta lo suyo: sin esto la miniatura ampliada se derramaba sobre la
       ficha de abajo, porque el recorte solo existía en el borde de la tarjeta. */
    overflow: hidden;
    background: #120a0d;
}
.pr-estreno__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Portada propia: mientras no haya reproductor, el carrusel se puede arrastrar
   por encima del video. */
/* La portada se esconde mientras suena su video y vuelve al abrirse otro. El
   atributo hidden necesita esta regla porque la clase le fija display. */
.pr-estreno__portada[hidden] { display: none; }

.pr-estreno__portada {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.pr-estreno__portada img {
    width: 100%; height: 100%;
    /* cover ya recorta las franjas negras de la miniatura de YouTube: ampliarla
       además la desbordaba. El zoom queda solo como gesto al pasar por encima. */
    object-fit: cover;
    transition: transform .3s ease;
}
.pr-estreno__portada:hover img { transform: scale(1.05); }

.pr-estreno__play {
    position: absolute;
    top: 50%; left: 50%;
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    color: #fff;
    background: rgba(18, 10, 13, .62);
    font-size: 1.9rem;
    line-height: 1;
    transform: translate(-50%, -50%);
    transition: background .16s ease, transform .16s ease;
}
.pr-estreno__portada:hover .pr-estreno__play,
.pr-estreno__portada:focus-visible .pr-estreno__play {
    background: var(--pr-vino, #7a1428);
    transform: translate(-50%, -50%) scale(1.08);
}

/* Ficha en dos columnas: la foto a la izquierda, alineada con las dos líneas
   de texto de la derecha. */
.pr-estreno__ficha {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1 1 auto;
    padding: .8rem .95rem .9rem;
}

.pr-estreno__foto { display: inline-flex; flex: 0 0 auto; border-radius: 50%; }
.pr-estreno__logo {
    width: 48px; height: 48px; min-width: 48px;
    font-size: 1rem;
    transition: transform .16s ease;
}
.pr-estreno__foto:hover .pr-estreno__logo { transform: scale(1.06); }

/* Nombre de banda y canción comparten columna: uno sobre el otro. */
.pr-estreno__textos { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }

.pr-estreno__nombre {
    overflow: hidden;
    color: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.pr-estreno__nombre:hover, a.pr-estreno__nombre:focus-visible { text-decoration: underline; }
.pr-estreno__nombre--suelto { color: var(--pr-text-2, #53443a); font-weight: 600; }

/* La canción, a dos líneas como máximo para que las tarjetas queden parejas. */
.pr-estreno__cancion {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: .98rem;
    font-weight: 750;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pr-estreno__fecha {
    display: inline-flex; align-items: center; gap: .3rem;
    margin: .15rem 0 0; font-size: .8rem; font-weight: 700;
    color: var(--pr-dorado, #c8871f);
}

/* Colaboración: las caras montadas ocupan el lugar de la foto. */
.pr-estreno__caras { display: flex; flex: 0 0 auto; align-items: center; }
.pr-estreno__caras > * { margin-right: -14px; }
.pr-estreno__caras > *:last-child { margin-right: 0; }
.pr-estreno__caras .pr-avatar {
    /* El borde despega una cara de la siguiente: va del color de la tarjeta. */
    box-shadow: 0 0 0 2px var(--pr-surface-alt, #f4ebdd);
    transition: transform .16s ease;
}
.pr-estreno__caras a:hover .pr-avatar { transform: translateY(-3px); }

.pr-estreno__mas {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 800;
}

/* Los slides se estiran al más alto de la fila: sin esto, un título de dos
   líneas deja su tarjeta más larga que las vecinas. */
.pr-estrenos-bloque .swiper-slide { height: auto; }

/* Las flechas viven en el envoltorio y no dentro del carrusel: por omisión
   Swiper las pone sobre los slides y quedaban montadas encima del video.
   Van peladas, sin botón de fondo. */
.pr-estrenos-carrusel { position: relative; }
.pr-estrenos-bloque .swiper { padding-bottom: .25rem; }

.pr-estrenos-bloque .swiper-button-prev,
.pr-estrenos-bloque .swiper-button-next {
    /* Al centro de la tarjeta completa, no del video: alineadas con la ficha
       la fila se lee más pareja. */
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0;
    border: 0;
    color: var(--pr-vino, #7a1428);
    background: none;
    transition: transform .15s ease, opacity .15s ease;
}
.pr-estrenos-bloque .swiper-button-prev::after,
.pr-estrenos-bloque .swiper-button-next::after { font-size: 1.5rem; font-weight: 900; }
.pr-estrenos-bloque .swiper-button-prev:hover,
.pr-estrenos-bloque .swiper-button-next:hover { transform: scale(1.15); }
.pr-estrenos-bloque .swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Los puntos: la señal de que hay más videos. */
.pr-estrenos-bloque .swiper-pagination {
    position: static;
    margin-top: .85rem;
    line-height: 1;
}
.pr-estrenos-bloque .swiper-pagination-bullet {
    width: 8px; height: 8px;
    opacity: .3;
    background: var(--pr-vino, #7a1428);
    transition: opacity .15s ease, width .15s ease;
}
.pr-estrenos-bloque .swiper-pagination-bullet-active { width: 22px; border-radius: 4px; opacity: 1; }

@media (min-width: 992px) {
    /* El canal lateral que deja libres los bordes de las tarjetas. */
    .pr-estrenos-carrusel { padding-inline: 2.75rem; }
    .pr-estrenos-bloque .swiper-button-prev { left: 0; }
    .pr-estrenos-bloque .swiper-button-next { right: 0; }
}

@media (max-width: 991.98px) {
    /* En pantallas chicas se desliza con el dedo: las flechas solo taparían.
       Los puntos se quedan, que son la señal de que hay más. */
    .pr-estrenos-bloque .swiper-button-prev,
    .pr-estrenos-bloque .swiper-button-next { display: none; }
}

.pr-estrenos-vacio { padding: var(--pr-sp-8, 3.5rem) 1rem; text-align: center; }
.pr-estrenos-vacio i { font-size: 2.6rem; opacity: .35; }
.pr-estrenos-vacio h2 { margin: .8rem 0 .4rem; }
.pr-estrenos-vacio p { max-width: 48ch; margin: 0 auto 1.4rem; opacity: .78; }

@media (max-width: 575.98px) {
    .pr-estrenos-titulo h2 { font-size: 1.35rem; }
    .pr-estreno__ficha { padding-inline: .75rem; }
}