/* =========================================================================
   MOVIOLA.CSS — Tira de piezas en flujo continuo (galerías La Manigua)
   -------------------------------------------------------------------------
   Patrón compartido de galería: las piezas no van en cajas, pasan como una
   moviola (misma física que la constelación del HUB) y se abren en un modal.
   · Sin cajas / sin plate — la pieza respira, sombra suave (lenguaje Apple).
   · Sin botón de play sobre la imagen — nada incrustado salvo el póster.
   · Altura uniforme, ancho por formato — mismo peso visual; horizontales en
     16:9 y verticales (reels) en 9:16 comparten la misma altura de tira.
   · Motor JS en js/lamanigua-moviola.js (reduce-motion → scroll nativo).
   Pensado para replicarse en cine, servicios y todas las subgalerías.

   -------------------------------------------------------------------------
   2026-07-28 · El patrón sale de La Manigua y entra en el espacio personal
   de Raúl (/actor/). Tres extensiones, las tres retrocompatibles: donde no
   se declara la variable nueva, la cadena de respaldo devuelve exactamente
   el valor que tenía antes, así que las cinco páginas de La Manigua no se
   mueven.

   1 · --moviola-accent · el acento deja de estar cableado al teal. La
       Manigua no declara nada y sigue en teal; /actor/ declara oro.
   2 · .moviola--contenida · tira que vive DENTRO de un contenedor (un panel
       editorial) en vez de romper a 100vw. La sangría se hereda del padre
       por --moviola-sangria, así el primer ítem se alinea con el texto.
   3 · .moviola-item.is-libre · ancho por proporción REAL de cada pieza en
       vez de 16:9 / 9:16 fijos. Nace de una regla del dossier: un cartel no
       se recorta. Ocho carteles van del 0,607 de Ferozz al 0,772 de La
       Piscina, y los retratos del 0,666 al 1,499; encajarlos a la fuerza en
       una caja común sería justo la jaula que este patrón evita.
   ========================================================================= */

.moviola {
    /* Tira a sangre: rompe la columna de 1140px del .film-portfolio y ocupa
       el ancho del viewport para leerse como una tira de cine. El overflow-x:
       clip de html/body (fix del cintillo) evita el scroll horizontal. */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(1.25rem, 3vw, 2.25rem) 0;
    overflow: hidden;
    cursor: grab;
    scrollbar-width: none;
    /* El gesto horizontal lo resuelve el motor JS; pan-y conserva el scroll
       vertical de la página cuando el dedo empieza sobre la tira. */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    /* Bordes fundidos: la tira nace y muere en penumbra, sin línea dura. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.moviola::-webkit-scrollbar { display: none; }
.moviola.is-dragging { cursor: grabbing; }

.moviola-track {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.1rem, 2.4vw, 2rem);
    width: max-content;
    padding: 0 max(2rem, calc(50vw - 560px)); /* alinea el 1er ítem con la columna de texto */
    will-change: transform;
    /* Movimiento por requestAnimationFrame (ver JS): sin animación CSS. El
       script lee --moviola-speed (px/s) y traslada la tira cada frame. */
    --moviola-speed: 24;
    -webkit-user-select: none;
    user-select: none;
}

/* --- Pieza -------------------------------------------------------------- */
.moviola-item {
    /* Altura uniforme de la tira; el ancho lo fija el formato (abajo). */
    --moviola-h: clamp(190px, 30vh, 320px);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.moviola-item.is-horiz { width: calc(var(--moviola-h) * 16 / 9); }
.moviola-item.is-vert  { width: calc(var(--moviola-h) * 9 / 16); }

/* Póster: sin caja ni plate; solo esquina redonda y sombra que lo posa
   sobre el fondo. La luz y la escala responden al hover/focus. */
.moviola-thumb {
    position: relative;
    width: 100%;
    height: var(--moviola-h);
    border-radius: 14px;
    overflow: hidden;
    background-color: #0a1315;
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    transition:
        transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.45s ease,
        filter 0.45s ease;
    filter: saturate(0.96) brightness(0.94);
}

.moviola-item:hover .moviola-thumb,
.moviola-item:focus-visible .moviola-thumb {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 30px 66px rgba(0, 0, 0, 0.5);
    filter: saturate(1.04) brightness(1.02);
}

.moviola-item:focus-visible {
    outline: none;
}
.moviola-item:focus-visible .moviola-thumb {
    outline: 2px solid var(--moviola-accent, var(--film-teal-light, #2a6b7c));
    outline-offset: 3px;
}

/* Etiqueta bajo la pieza: título + descripción breve. Nada sobre la imagen. */
.moviola-label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding-left: 0.15rem;
    max-width: 100%;
}

.moviola-title {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
}

/* Los reels conservan el ancho 9:16; un título largo sin espacios no debe
   invadir la etiqueta de la pieza siguiente en móvil. */
.moviola-item.is-vert .moviola-title {
    overflow-wrap: anywhere;
}

.moviola-kicker {
    font-family: var(--font-ui, 'Montserrat', sans-serif);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
}

/* Señal discreta «Ver» — vive en la etiqueta, nunca sobre la imagen.
   Aparece al acercarse (hover/focus); en táctil se muestra tenue siempre. */
.moviola-cue {
    font-family: var(--font-ui, 'Montserrat', sans-serif);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--moviola-accent-soft, var(--film-teal-light, #6fb7c9));
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.moviola-item:hover .moviola-cue,
.moviola-item:focus-visible .moviola-cue {
    opacity: 0.9;
    transform: translateY(0);
}

@media (hover: none) {
    .moviola-cue { opacity: 0.6; transform: none; }
}

/* Clones del bucle: invisibles para lectores de pantalla y teclado. */
.moviola-item[data-moviola-clone] {
    pointer-events: auto; /* el ratón/tacto sí puede tocarlos */
}

/* --- Modal de ficha ---------------------------------------------------- */
.moviola-modal {
    width: min(960px, calc(100vw - 2.5rem));
    max-width: 960px;
    max-height: calc(100dvh - 2.5rem);
    /* shared.css aplica `* { margin: 0 }` y anula el margin:auto con que el
       UA centra un <dialog>:modal → lo restauramos para centrarlo. */
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 22px;
    background: var(--moviola-surface, linear-gradient(180deg, #0d181b 0%, #060d0f 100%));
    color: #fff;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.moviola-modal::backdrop {
    background: var(--moviola-backdrop, rgba(2, 6, 8, 0.72));
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

/* Animación de entrada (respeta reduce-motion abajo). */
.moviola-modal[open] {
    animation: moviolaModalIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes moviolaModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.moviola-modal-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    max-height: calc(100dvh - 2.5rem);
}

.moviola-modal.is-vert .moviola-modal-inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
}

/* Media: póster que al pulsar «Ver» carga el reproducible en su lugar. */
.moviola-modal-media {
    position: relative;
    background: var(--moviola-media-bg, #04090b);
    min-height: 220px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.moviola-modal-media .moviola-modal-poster {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.82);
}

.moviola-modal-media iframe {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 240px;
    border: 0;
}

.moviola-modal.is-vert .moviola-modal-media { aspect-ratio: 9 / 16; }

.moviola-modal-playbtn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.5rem;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: var(--moviola-accent-veil, rgba(27, 84, 98, 0.6));
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-ui, 'Montserrat', sans-serif);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}
.moviola-modal-playbtn:hover {
    background: var(--moviola-accent, var(--film-teal-light, #2a6b7c));
    transform: scale(1.04);
}
.moviola-modal-playbtn::before {
    content: '';
    width: 0; height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid currentColor;
}

.moviola-modal-body {
    padding: clamp(1.6rem, 3vw, 2.6rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.moviola-modal-kicker {
    font-family: var(--font-ui, 'Montserrat', sans-serif);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--moviola-accent-soft, var(--film-teal-light, #6fb7c9));
}

.moviola-modal-title {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    line-height: 1.12;
    margin: 0;
}

.moviola-modal-synopsis {
    font-size: 0.98rem;
    line-height: 1.66;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.moviola-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.moviola-modal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: var(--font-ui, 'Montserrat', sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.moviola-modal-link:hover {
    border-color: var(--moviola-accent, var(--film-teal-light, #2a6b7c));
    background: var(--moviola-accent-wash, rgba(42, 107, 124, 0.16));
    color: #fff;
}

.moviola-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--moviola-chrome, rgba(6, 13, 15, 0.6));
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
}
.moviola-modal-close:hover {
    background: var(--moviola-accent-strong, rgba(42, 107, 124, 0.5));
    transform: rotate(90deg);
}

/* showModal() lleva el foco al primer elemento enfocable —este botón— así que
   el anillo se ve SIEMPRE al abrir la ficha. Sin esta regla el que se pinta es
   el azul por defecto del navegador, que no es de ninguna de las dos casas. */
.moviola-modal-close:focus-visible {
    outline: 2px solid var(--moviola-accent, var(--film-teal-light, #2a6b7c));
    outline-offset: 2px;
}

.moviola-modal-playbtn:focus-visible,
.moviola-modal-link:focus-visible {
    outline: 2px solid var(--moviola-accent, var(--film-teal-light, #2a6b7c));
    outline-offset: 3px;
}

/* --- Tira contenida (dentro de un panel, no a sangre de viewport) -------
   La variante de La Manigua rompe a 100vw porque vive suelta en la página.
   Dentro de un panel editorial eso no vale: el panel tiene overflow:auto,
   así que un 100vw le abriría scroll horizontal.

   Aquí la tira ocupa el ancho del contenedor y solo se come el padding del
   padre, que el padre declara en --moviola-sangria. El track lo devuelve
   como padding propio, de modo que el primer cartel arranca en la misma
   vertical que el texto de arriba pero la tira sí muere en los bordes del
   panel: sigue leyéndose como tira, no como fila de tarjetas. */
.moviola--contenida {
    /* Dentro de un panel el aire de la versión a sangre sobra: allí la tira
       separa dos secciones de página, aquí convive con el resto del panel. */
    padding-block: clamp(0.7rem, 1.6vw, 1.15rem);
    width: auto;
    margin-left: calc(-1 * var(--moviola-sangria, 0px));
    margin-right: calc(-1 * var(--moviola-sangria, 0px));
}

.moviola--contenida .moviola-track {
    padding-left: var(--moviola-sangria, 0px);
    padding-right: var(--moviola-sangria, 0px);
}

/* --- Pieza de proporción libre ------------------------------------------
   is-horiz / is-vert imponen 16:9 y 9:16 y recortan con background-size:
   cover, que para un fotograma de vídeo es correcto. Un cartel o un retrato
   no: ahí el encuadre ES la obra. is-libre conserva la altura común de la
   tira —el mismo peso visual— y toma el ancho de la proporción real, que
   cada pieza declara en --pieza-ratio (ancho ÷ alto del archivo).

   Como la caja mide exactamente lo que la imagen, `contain` no deja franjas
   y `cover` no recorta: las dos coinciden. Se usa contain porque si algún
   día un ratio llega mal redondeado, el fallo seguro es una franja de un
   píxel, no un corte en la cara de alguien. */
.moviola-item.is-libre {
    width: calc(var(--moviola-h) * var(--pieza-ratio, 0.7));
}

.moviola-item.is-libre .moviola-thumb {
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    /* 14px enmarca; a 6px la esquina apenas se insinúa y lo que se ve es la
       obra, no su continente. */
    border-radius: 6px;
}

/* Estado activo — solo lo usa la galería, donde la tira además de mostrar
   elige qué se ve en grande. Sin él no habría forma de saber cuál está
   puesta. */
.moviola-item.is-current .moviola-thumb {
    outline: 2px solid var(--moviola-accent, var(--film-teal-light, #2a6b7c));
    outline-offset: 3px;
    filter: saturate(1.04) brightness(1.04);
}

/* --- Móvil ------------------------------------------------------------- */
@media (max-width: 760px) {
    .moviola-item { --moviola-h: clamp(170px, 42vw, 230px); }
    .moviola-modal-inner,
    .moviola-modal.is-vert .moviola-modal-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .moviola-modal-media { aspect-ratio: 16 / 9; min-height: 0; }
    .moviola-modal.is-vert .moviola-modal-media { aspect-ratio: 9 / 16; }
}

/* --- Reduce-motion: sin motor, scroll nativo, sin animación de modal ---- */
@media (prefers-reduced-motion: reduce) {
    .moviola {
        overflow-x: auto;
        touch-action: auto;
        cursor: default;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .moviola-thumb,
    .moviola-item:hover .moviola-thumb,
    .moviola-item:focus-visible .moviola-thumb {
        transition: none;
        transform: none;
    }
    .moviola-modal[open] { animation: none; }
}