/**
 * Archivo: assets/css/relatos-reels.css
 * Módulo: shop-core — visor de reels de la pestaña "Los Relatos" para el
 * cliente (8/10/2026). Ver includes/categoria/relatos-reels.php y
 * assets/js/relatos-reels.js.
 *
 * Sin scroll de página: el visor ocupa el hueco de la pestaña (la misma
 * cadena flex-column con min-height:0 del resto de la categoría) y el reel
 * se ajusta a esa altura manteniendo el formato vertical 9:16. En pantalla
 * ancha el reel activo va en el centro y el anterior y el siguiente asoman
 * apagados a los lados; en el móvil solo se ve el activo. Las flechas son
 * las del carrusel (.sc-carrusel-tips-flecha, categoria.css), con el mismo
 * formato que el botón "Ver más".
 */
.sc-reels {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}
/* Tres huecos fijos (anterior · activo · siguiente): el reel activo queda
   siempre en el centro y las flechas siempre en el mismo sitio, haya o no
   vecino a cada lado. */
.sc-reels-pista {
    flex: 0 1 900px;
    height: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 100%;
    align-items: center;
    gap: 1.4rem;
}
.sc-reels .sc-carrusel-tips-flecha { flex: 0 0 auto; }

/* ----- Un reel ----- */
.sc-reel {
    display: none;
    position: relative;
    flex: 0 0 auto;
    height: 62%;
    aspect-ratio: 9 / 16;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.3);
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.sc-reel-previo,
.sc-reel-siguiente,
.sc-reel-activo { display: block; }
.sc-reel-previo:hover,
.sc-reel-siguiente:hover { opacity: 0.6; }
.sc-reel-previo { grid-column: 1; grid-row: 1; justify-self: end; }
.sc-reel-activo {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    opacity: 1;
    border-color: rgba(var(--sc-gold-rgb), 0.6);
}
.sc-reel-siguiente { grid-column: 3; grid-row: 1; justify-self: start; }

.sc-reel-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* Lo que va sobre el vídeo solo se ve en el reel activo. */
.sc-reel-contador,
.sc-reel-play,
.sc-reel-pie { display: none; }
.sc-reel-activo .sc-reel-contador,
.sc-reel-activo .sc-reel-pie { display: block; }
.sc-reel-activo .sc-reel-play { display: flex; }

.sc-reel-contador {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.6);
    color: var(--sc-text);
    font-size: var(--sc-fs-label);
    letter-spacing: 0.05em;
}

/* Botón de reproducir; desaparece mientras el reel suena. */
.sc-reel-play {
    position: absolute;
    /* Más abajo del centro (12/10/2026): la portada del reel es su imagen
       final, con el logo en el centro, y el botón lo tapaba. */
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--sc-gold);
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.7);
    color: var(--sc-gold);
    font-size: 1.6rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.sc-reel-play:hover { background: var(--sc-gold); color: #111; }
.sc-reel-play i { color: inherit; }
.sc-reel-sonando .sc-reel-play { display: none; }

/* Pie: título, barra de avance y "Ver productos", sobre un velo oscuro. */
.sc-reel-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.4rem 14px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
}
.sc-reel-titulo {
    margin: 0 0 8px;
    font-family: var(--sc-font-title);
    font-size: var(--sc-fs-card);
    line-height: 1.3;
    color: var(--sc-text);
}
/* El título solo presenta el reel: al darle al play desaparece (8/10/2026,
   Javier) y con él casi todo el velo, para no tapar el vídeo; vuelve al
   pausar. La barra de avance y "Ver productos" se quedan. */
.sc-reel-sonando .sc-reel-titulo { display: none; }
.sc-reel-sonando .sc-reel-pie {
    padding-top: 1.2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.sc-reel-barra {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
}
.sc-reel-barra span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--sc-gold);
}
/* Mismo formato que el botón "Ver más" del banner de portada. */
.sc-reel-productos,
.sc-reel-productos:visited {
    /* Centrado respecto al vídeo (8/10/2026, Javier). */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.35rem;
    margin: 10px auto 0;
    padding: 0.32rem 0.95rem;
    border: 1px solid var(--sc-gold);
    border-radius: 999px;
    background: #111;
    color: var(--sc-gold);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.sc-reels .sc-reel-productos:hover,
.sc-reels .sc-reel-productos:focus {
    background: var(--sc-gold);
    color: #111;
    text-decoration: none;
}
.sc-reel-productos i { color: inherit; }

/* ----- Móvil: solo el reel activo, con las flechas encima de sus bordes ----- */
@media (max-width: 700px) {
    .sc-reels { position: relative; gap: 0; }
    .sc-reels-pista { flex: 1 1 auto; display: flex; justify-content: center; }
    .sc-reel-previo,
    .sc-reel-siguiente { display: none; }
    .sc-reel-activo { max-width: 100%; }
    .sc-reels .sc-carrusel-tips-flecha {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 36px;
        height: 36px;
    }
    .sc-reels .sc-reels-prev { left: 4px; }
    .sc-reels .sc-reels-next { right: 4px; }
}

/* ----- Historia de la que se ven los reels (11/10/2026): desplegable encima
   del visor, centrado, con el dorado de la web ----- */
.sc-reels-historias {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.sc-reels-historias-etiqueta {
    margin: 0;
    color: var(--sc-muted);
    font-size: var(--sc-fs-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sc-reels-historia {
    max-width: min(100%, 520px);
    padding: 0.4rem 2rem 0.4rem 0.9rem;
    border: 1px solid var(--sc-gold);
    border-radius: 999px;
    background-color: #111;
    color: var(--sc-gold);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
    cursor: pointer;
    text-overflow: ellipsis;
}
.sc-reels-historia option { background: #111; color: var(--sc-text); }
@media (max-width: 700px) {
    .sc-reels-historias { margin-bottom: 0.5rem; }
    .sc-reels-historias-etiqueta { display: none; }
}