/* ============================================================ */
/* BASE */
/* ============================================================ */
.paris-dinner-hero,
.paris-dinner-video,
.scrollgallery,
.paris-dinner-split {
    font-family: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #111;
    box-sizing: border-box;
}

    .paris-dinner-hero *,
    .paris-dinner-video *,
    .scrollgallery *,
    .paris-dinner-split * {
        box-sizing: border-box;
    }

/* ============================================================ */
/* 1. HERO */
/* ============================================================ */
/* Medidas de escritorio sacadas de la captura de diseño (tarjeta de 809 px).
   - Posiciones (logo, columnas, márgenes de la tarjeta): en "cqw"
     (1cqw = 1 % del ancho de la tarjeta), escalan con la pantalla.
   - Tipografía: tamaño fijo en --hero-font-size; los espacios del texto
     (sangrados, huecos, párrafos) van en "em" y siguen a la letra. */
.paris-dinner-hero {
    /* Cambia aquí la tipografía si la web usa otra */
    --hero-font: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --hero-font-size: 9px;
    --hero-font-weight: 600;
    --hero-color: #231f20;
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate; /* crea un contexto de apilado propio para el z-index del fondo */
    padding: 100px 16px;
}

/* Imagen de fondo como <img>: ocupa todo el bloque, detrás de la tarjeta.
   object-fit/object-position hacen lo mismo que antes hacían
   background-size: cover y background-position: center. */
.paris-dinner-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.paris-dinner-hero-overlay {
    position: relative;
    container-type: inline-size; /* activa las unidades cqw para su contenido */
    max-width: 1600px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    border-radius: 10px;
    padding: 32px 20px 40px;
    font-family: var(--hero-font);
    color: var(--hero-color);
}

/* ---------- Distribución (móvil) ----------
   El overlay es una rejilla de dos columnas y tres filas, en escalera:
     · fila 1: el SVG a la derecha
     · fila 2: "SPECIAL DINNERS…" / "PARIS…" a la izquierda
     · fila 3: el resto de textos a la derecha (alineados con el SVG),
       empezando justo donde termina el texto de la izquierda
   .paris-dinner-hero-text se "aplana" (display: contents) para que sus dos
   columnas de texto sean celdas de la misma rejilla que el logo. */
.paris-dinner-hero-overlay {
    display: grid;
    /* izquierda: lo que mide su texto (sin partir líneas); derecha: el resto */
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas: ".    logo" "left ." ".    right";
    column-gap: 16px;
    row-gap: 0; /* la columna derecha empieza justo donde acaba la izquierda */
    align-items: start;
}

.paris-dinner-hero-text {
    display: contents;
}

/* ---------- Logo ---------- */
.paris-dinner-hero-logo {
    grid-area: logo;
    width: 100%;
    margin: 0 0 24px; /* separación entre el SVG y los textos */
}

    .paris-dinner-hero-logo svg {
        display: block;
        width: 62%;
        height: auto;
    }

        .paris-dinner-hero-logo svg path {
            fill: var(--hero-color) !important;
        }

/* ---------- Textos ---------- */
.paris-dinner-hero-text-left {
    grid-area: left;
    white-space: nowrap;
}

.paris-dinner-hero-text-right {
    grid-area: right;
}

.paris-dinner-hero-text p {
    margin: 0;
    font-size: var(--hero-font-size);
    font-weight: var(--hero-font-weight);
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase; /* los textos vienen en minúscula desde las variables */
    text-align: left;
}

.paris-dinner-hero-text strong {
    font-weight: 700;
}

.paris-dinner-hero-text-left p + p {
    margin-top: 1.3em;
}

.paris-dinner-hero-text-right p {
    margin-bottom: 1.3em;
}

    .paris-dinner-hero-text-right p:last-child,
    .paris-dinner-hero-text-right p.paris-dinner-hero-p-pegado {
        margin-bottom: 0;
    }

/* Piezas de maquetación que van dentro de las variables de texto
   (hero-line, hero-indent-1/2, hero-justify, hero-gap, <br>).
   MÓVIL: composición adaptada a la columna estrecha. Se mantienen los
   saltos forzados, los sangrados, el hueco y el justificado, pero las
   líneas del bloque justificado se reparten solas y los huecos son más
   cortos para que quepan. */
.hero-line,
.hero-justify {
    display: inline;
}

/* "HACEMOS EN ESPAÑA?»." en su propia línea, sangrada */
.hero-indent-1 {
    display: block;
    padding-left: 6.5em;
}

/* "DÉCADAS DESPUÉS…" empieza sangrado y el texto sigue fluyendo detrás
   (como una sangría de párrafo) */
.hero-indent-2 {
    padding-left: 7.5em;
}

/* Párrafo de "DÉCADAS DESPUÉS…": justificado; las líneas que acaban en
   salto forzado y la última quedan a la izquierda */
.paris-dinner-hero-text-right p:has(.hero-justify) {
    text-align: justify;
}

/* Los saltos del bloque justificado son los de escritorio: en móvil se
   ocultan para que las líneas se repartan solas (salvo los br-m) */
.hero-justify br {
    display: none;
}

    .hero-justify br.br-m {
        display: inline;
    }

/* Hueco entre "CONVERSACIÓN SE" y "ENCONTRARON" */
.hero-gap {
    display: inline-block;
    width: 3em;
}

/* Saltos propios de cada versión:
   <br class="br-m" /> solo en móvil · <br class="br-d" /> solo en escritorio */
.br-m {
    display: inline;
}

.paris-dinner-hero-text-right br.br-d {
    display: none;
}

/* ---------- Logo a partir de 768px ----------
   El SVG ocupa toda la primera fila (las dos columnas) y queda centrado,
   a la mitad de su tamaño. El resto de elementos no cambia. */
@media (min-width: 768px) {
    .paris-dinner-hero-logo {
        grid-column: 1 / -1; /* toda la primera fila */
        grid-row: 1;
        justify-self: stretch;
        width: auto;
    }

        .paris-dinner-hero-logo svg {
            width: 50%; /* mitad del ancho de la fila */
            margin: 0 auto; /* centrado */
        }
}

/* ============================================================ */
/* 2. VÍDEO */
/* ============================================================ */
/* Proporción del bloque = proporción del vídeo, así se ve entero y sin
   recortes: 16:9 en escritorio; en móvil (EsMovil == 1) la sección lleva
   además .paris-dinner-video--v y pasa a 9:16. */
.paris-dinner-video {
    position: relative;
    width: 100%;
    background-color: #000;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.paris-dinner-video--v {
    aspect-ratio: 9 / 16;
}

/* El vídeo lo pinta la parcial _HlsVideoControles:
     .video-card > .video-wrapper(-v).paris-dinner-video-el > video[controls]
   .video-wrapper reserva la proporción con padding-top (56,25 % / 156,25 %).
   Aquí esa proporción la da la propia sección, así que dentro del bloque se
   anula el padding y el <video> ocupa el bloque entero, con sus controles
   visibles. Solo afecta a este bloque: la parcial y .video-wrapper siguen
   igual en el resto de la web. */
.paris-dinner-video .video-card {
    position: absolute;
    inset: 0;
}

.paris-dinner-video .video-wrapper,
.paris-dinner-video .video-wrapper-v {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding-top: 0;
}

    .paris-dinner-video .video-wrapper video,
    .paris-dinner-video .video-wrapper-v video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* ============================================================ */
/* ============================================================ */
/* 3 y 5. GALERÍA CON EFECTO SCROLL */
/* ============================================================ */
.scrollgallery {
    position: relative;
}

/* Común a móvil y escritorio */
.scrollgallery-item {
    display: flex;
    flex-direction: column;
    background-color: #f4f2ef;
}

    /* La galería 1 envuelve las imágenes en <picture>: lo "aplanamos" para
       que el <img> sea hijo flex directo del item, igual que en la galería 2. */
    .scrollgallery-item > picture {
        display: contents;
    }

    .scrollgallery-item img {
        display: block;
        width: 100%;
        object-fit: cover;
    }

.scrollgallery-text {
    color: #111;
    text-shadow: none;
    background-color: inherit;
}

.sg-num {
    margin: 0 0 4px 0;
    font-size: 11px;
    letter-spacing: 1px;
}

.sg-name {
    margin: 0 0 13px 0;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.sg-desc {
    margin: 0;
    font-size: 10px;
    line-height: 11px;
    max-width: 420px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ------------------------------------------------------------
   MÓVIL (<768px): pila nativa con position: sticky
   ------------------------------------------------------------
   Cada imagen+texto es un bloque de pantalla completa en el flujo normal
   de la página, con position: sticky; top: 0. Al hacer scroll, el
   siguiente bloque sube y se queda encima del anterior (efecto "pasar
   páginas") SIN JavaScript moviendo nada: lo hace el propio scroll del
   navegador, que es lo más fluido posible en iOS/Android.
   Los envoltorios que solo existen para el layout de escritorio se
   "aplanan" con display: contents, de modo que todos los items quedan
   como hijos directos de la <section> (su bloque contenedor del sticky).

   El "paso de página" (una imagen por gesto, sin quedarse a medias ni
   saltarse ninguna) lo da scroll-snap: el JS añade marcas invisibles
   cada 100lvh y activa html.sg-snap solo mientras estás dentro de la
   galería. */
@media (max-width: 767px) {
    .scrollgallery-sticky,
    .scrollgallery-track-wrapper,
    .scrollgallery-right,
    .scrollgallery-track {
        display: contents;
    }

    .scrollgallery-item {
        position: sticky;
        top: 0;
        /* lvh = alto de pantalla con las barras del navegador RECOGIDAS:
           así nunca queda franja blanca debajo. Cuando las barras están
           desplegadas, la parte inferior queda tapada por ellas y la
           compensamos con el padding del texto (abajo). */
        height: 100vh;
        height: 100lvh;
    }

        .scrollgallery-item img {
            flex: 1 1 0;
            min-height: 0;
            height: auto;
        }

    .scrollgallery-text {
        flex: 0 0 auto;
        padding: 16px 20px 40px;
        /* --sg-barra la calcula el JS en cada momento: lo que tapa la barra
           del navegador (0 cuando está recogida). Así el texto queda justo
           por encima de la barra cuando se ve, y sin hueco de más cuando no.
           Si el JS aún no ha cargado, se usa (100lvh - 100svh), que es lo
           que ocupa la barra desplegada.
           env(safe-area-inset-bottom) respeta la raya de inicio del iPhone
           cuando la barra está recogida. */
        padding-bottom: calc(40px + max(var(--sg-barra, (100lvh - 100svh)), env(safe-area-inset-bottom, 0px)));
        /* el texto acompaña a la barra con suavidad en vez de saltar */
        transition: padding-bottom 0.25s ease-out;
    }

    /* Marcas de scroll-snap (las crea el JS) */
    .scrollgallery-snap {
        position: absolute;
        left: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
        scroll-snap-align: start;
        scroll-snap-stop: always; /* impide saltarse una imagen con un gesto fuerte */
    }

    html.sg-snap {
        scroll-snap-type: y mandatory;
    }
}

/* ------------------------------------------------------------
   ESCRITORIO (≥768px): imagen izquierda fija; las otras 4 forman una
   cinta vertical en la columna derecha, que el JS desplaza con
   translateY según el progreso del scroll dentro de la sección.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    .paris-dinner-hero {
        padding: 130px 78px 180px;
    }

    .paris-dinner-hero-overlay {
        column-gap: 223px;
    }

    .paris-dinner-hero-overlay {
        padding: 37px 34px 37px;
    }

    .scrollgallery-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        height: var(--sg-alto, 100vh);
        overflow: hidden;
        background-color: #f4f2ef;
        contain: paint;
    }

    .scrollgallery-track-wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 25px;
        padding: 100px 20px;
        height: 100%;
        box-sizing: border-box;
    }

    /* Columna izquierda: imagen fija + texto debajo */
    .scrollgallery-item[data-index="1"] {
        flex: 0 0 calc(50% - 12.5px);
        max-width: calc(50% - 12.5px);
        height: 100%;
    }

        .scrollgallery-item[data-index="1"] img {
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
        }

    /* Columna derecha: viewport de 100% de alto que recorta la cinta */
    .scrollgallery-right {
        display: block;
        flex: 0 0 calc(50% - 12.5px);
        max-width: calc(50% - 12.5px);
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    /* La cinta: su alto y el de cada item los calcula el JS según cuántos
       .scrollgallery-item haya dentro. */
    .scrollgallery-track {
        display: flex;
        flex-direction: column;
        will-change: transform;
    }

        /* Cada item de la cinta es una rejilla:
             · columna 1: la imagen (60 % del ancho), arriba del todo y con
               un alto del 86 % de su "pantalla" de la cinta
             · columna 2: el texto, alineado con el borde INFERIOR de la imagen
           Ancho y alto de la imagen se cambian con estas dos variables. */
        .scrollgallery-track > .scrollgallery-item {
            --sg-img-ancho: 60%;
            --sg-img-alto: 86%;
            display: grid;
            grid-template-columns: var(--sg-img-ancho) minmax(0, 1fr);
            grid-template-rows: var(--sg-img-alto) 1fr;
            column-gap: 24px;
            height: auto;
        }

            /* !important: el <img> de la galería 1 trae style="width:100%" en
               línea y la clase img-fluid (height:auto), que anulaban este
               tamaño. Si quitas esos atributos del marcado, puedes quitarlo. */
            .scrollgallery-track > .scrollgallery-item img {
                grid-column: 1;
                grid-row: 1;
                width: 100% !important;
                height: 100% !important;
            }

            /* Texto a la altura del borde inferior de la imagen */
            .scrollgallery-track > .scrollgallery-item .scrollgallery-text {
                grid-column: 2;
                grid-row: 1;
                align-self: end;
            }

    .scrollgallery-item[data-index="1"] .scrollgallery-text {
        margin-top: 20px;
        padding: 0;
    }

    .scrollgallery-track > .scrollgallery-item .scrollgallery-text {
        flex: 1 1 auto;
        padding: 0;
    }

    .sg-name {
        font-size: 10px;
    }

    .sg-desc {
        font-size: 12px;
    }

    .scrollgallery-snap {
        display: none;
    }
}
/* ---------- Escritorio ----------
   Arriba el SVG, centrado y a todo el ancho.
   Abajo, a la izquierda "SPECIAL DINNERS…" / "PARIS…" y a la derecha el resto. */
@media (min-width: 900px) {
    .paris-dinner-hero {
        --hero-font-size: 11px;
    }

    .paris-dinner-hero-logo svg {
        width: 37%;
        margin: 0 auto;
    }

    .paris-dinner-hero {
        /* márgenes de la tarjeta respecto a la foto de fondo */
        padding: 170px 90px 400px;
    }

    .paris-dinner-hero-overlay {
        padding: 0;
        border-radius: 12px;
        /* 1ª columna: margen izquierdo + columna de 270 px de la captura
           (así la columna derecha empieza donde antes). */
        grid-template-columns: 38.93cqw minmax(0, 1fr);
        grid-template-areas: "logo logo" "left right";
        column-gap: 0;
        row-gap: 0; /* separación entre el logo y los textos */
    }

    .paris-dinner-hero-overlay {
        column-gap: 0;
    }
    /* Logo centrado ocupando todo el ancho útil de la tarjeta */
    .paris-dinner-hero-logo {
        justify-self: center;
        width: 88.9cqw;
        margin: 6.55cqw 5.56cqw 0;
        /* en escritorio la separación la da row-gap */
    }

    .paris-dinner-hero-text-left {
        margin: 3.56cqw 0 11.1cqw 5.56cqw;
    }

    /* Mide lo que su línea más larga: así las líneas justificadas se
       estiran justo hasta ahí y no hasta el borde de la tarjeta. */
    .paris-dinner-hero-text-right {
        justify-self: start;
        width: max-content;
        margin: 10cqw 5.44cqw 11.1cqw 0;
    }

    /* Los espacios internos del texto (sangrados, huecos, párrafos) van en
           "em": se ajustan solos si cambias --hero-font-size. */
    .paris-dinner-hero-text p {
        line-height: 1.2;
    }

    /* Separación entre "HOSTED BY HISPANITAS" y "PARIS · HALO PARIS" */
    .paris-dinner-hero-text-left p + p {
        margin-top: 3.13em;
    }

    .paris-dinner-hero-text-right p {
        margin-bottom: 1.13em; /* una línea en blanco entre párrafos */
        /* Los saltos de línea de esta columna están marcados a mano
               (<br> y bloques): impedimos que el navegador añada otros. */
        white-space: nowrap;
    }

    .paris-dinner-hero-text-right br,
    .paris-dinner-hero-text-right br.br-d,
    .hero-justify br {
        display: inline;
    }

        /* Los saltos solo-móvil no se usan en escritorio */
        .paris-dinner-hero-text-right br.br-m,
        .hero-justify br.br-m {
            display: none;
        }

    .paris-dinner-hero-text-right p:has(.hero-justify) {
        text-align: left;
    }

    /* Líneas sangradas: "HACEMOS EN ESPAÑA?»." y "DÉCADAS DESPUÉS, NUESTRA" */
    .hero-line {
        display: block;
    }

    .hero-indent-1 {
        padding-left: 11em;
    }

    .hero-indent-2 {
        padding-left: 13.8em;
    }

    /* Bloque justificado de "HISTORIA LLEGA A PARÍS…" a "…EL DISEÑO Y LA".
       text-align-last: justify hace que también se justifiquen las líneas
       que terminan en <br>, que por defecto se quedarían a la izquierda. */
    .hero-justify {
        display: block;
        text-align: justify;
        -moz-text-align-last: justify;
        text-align-last: justify;
    }

    /* Hueco entre "CONVERSACIÓN SE" y "ENCONTRARON" */
    .hero-gap {
        display: inline-block;
        width: 12.78em;
    }
}
/* ------------------------------------------------------------
   TABLET (768px – 1199px): mismo esquema que escritorio, pero con menos
   margen a los lados e imágenes más cuadradas.
   - La imagen de la izquierda deja de estirarse a todo el alto de la
     pantalla: tiene proporción fija (6:5, como en escritorio).
   - La galería se queda fija con una ventana del alto de su contenido.
   (En vertical, el bloque siguiente la sustituye por un carrusel.)
   - La columna derecha mide lo mismo que la izquierda (imagen + texto):
     contain: size evita que su contenido (la cinta) empuje la altura.
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) {
    /* La galería se queda fija (como en escritorio), pero la ventana fija
       mide lo que su contenido y no toda la pantalla, así no queda hueco
       encima al llegar a ella.
       --sg-sticky-top: distancia al borde superior de la pantalla a la que
       se queda fija, para que la cabecera de la web no la tape. Ajústalo al
       alto de tu menú. El JS lee este valor. */
    .scrollgallery-sticky {
        --sg-sticky-top: 80px;
        top: var(--sg-sticky-top);
        height: auto;
    }

    .scrollgallery-track-wrapper {
        width: 100%;
        height: auto;
        padding: 24px 4vw;
        gap: 16px;
    }

    .scrollgallery-item[data-index="1"] {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        height: auto;
    }

        .scrollgallery-item[data-index="1"] img {
            flex: none;
            height: auto;
            aspect-ratio: 6 / 5; /* proporción de la imagen de escritorio */
        }

    .scrollgallery-right {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        height: auto;
        align-self: stretch;
        contain: size;
    }

    .scrollgallery-track > .scrollgallery-item {
        --sg-img-ancho: 58%;
        column-gap: 12px;
    }

    .scrollgallery-track > .scrollgallery-item {
        --sg-img-ancho: 80%;
        column-gap: 12px;
    }

    .scrollgallery-item[data-index="1"] .scrollgallery-text {
        margin-top: 12px;
    }

    .scrollgallery-text {
        overflow-wrap: anywhere; /* nombres largos (@usuario) no se salen */
    }

    .sg-name {
        font-size: 10px;
        margin-bottom: 0;
    }

    .sg-desc {
        font-size: 10px;
    }
}

/* ------------------------------------------------------------
   TABLET HORIZONTAL (768px – 1199px, orientación horizontal)
   La galería fija ocupa todo el espacio visible bajo la cabecera: la
   ventana fija mide la pantalla menos --sg-sticky-top, y la imagen de la
   izquierda crece hasta llenarla (dejando sitio a su texto). La columna
   derecha se estira a ese mismo alto.
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
    .scrollgallery-sticky {
        height: calc(var(--sg-alto, 100vh) - var(--sg-sticky-top));
    }

    .scrollgallery-track-wrapper {
        height: 100%;
    }

    .scrollgallery-item[data-index="1"] {
        height: 100%;
    }

        .scrollgallery-item[data-index="1"] img {
            flex: 1 1 auto;
            min-height: 0;
            height: 100%;
            aspect-ratio: auto;
        }
}

/* ------------------------------------------------------------
   TABLET VERTICAL (768px – 1199px, orientación vertical)
   · Sección 1: la primera imagen con su texto a la derecha, alineado
     abajo; el bloque va centrado.
   · Sección 2: carrusel horizontal con el resto de imágenes (mismo
     formato: imagen + texto a la derecha abajo). Se desliza con el dedo
     y cada gesto encaja en una imagen (scroll-snap).
   · La galería no se queda fija: ocupa solo su alto.
   El ancho de cada bloque (sección 1 y cada item del carrusel) se cambia
   con --sg-carrusel-item.
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    .scrollgallery {
        --sg-carrusel-gap: 24px;
        --sg-carrusel-item: calc(85% - var(--sg-carrusel-gap) / 2);
        /*--sg-carrusel-item: calc(50% - var(--sg-carrusel-gap) / 2);*/
        --sg-carrusel-texto: 250px;
    }

    .scrollgallery-sticky {
        position: static;
        height: auto;
        overflow: visible;
        contain: none;
    }

    .scrollgallery-track-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 48px; /* separación entre sección 1 y carrusel */
        padding: 48px 4vw;
        height: auto;
    }

    /* ---------- Sección 1 ---------- */
    .scrollgallery-item[data-index="1"] {
        flex: none;
        width: var(--sg-carrusel-item);
        max-width: none;
        height: auto;
        margin: 0 auto; /* centrado */
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--sg-carrusel-texto); /* imagen | texto */
        column-gap: 16px;
        align-items: end; /* texto abajo, a la altura del pie de la imagen */
    }

        .scrollgallery-item[data-index="1"] img {
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 4;
        }

        .scrollgallery-item[data-index="1"] .scrollgallery-text {
            margin-top: 0;
        }

    /* ---------- Sección 2: carrusel ---------- */
    .scrollgallery-right {
        flex: none;
        width: 100%;
        max-width: none;
        height: auto;
        overflow: visible;
        contain: none;
    }

    .scrollgallery-track {
        flex-direction: row;
        gap: var(--sg-carrusel-gap);
        height: auto;
        transform: none;
        will-change: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* sin barra de scroll visible */
    }

        .scrollgallery-track::-webkit-scrollbar {
            display: none;
        }

        .scrollgallery-track > .scrollgallery-item {
            flex: 0 0 var(--sg-carrusel-item);
            height: auto;
            grid-template-columns: minmax(0, 1fr) var(--sg-carrusel-texto); /* imagen | texto */
            grid-template-rows: auto;
            column-gap: 16px;
            scroll-snap-align: start;
        }

            .scrollgallery-track > .scrollgallery-item img {
                height: auto !important;
                aspect-ratio: 3 / 4;
            }

            .scrollgallery-track > .scrollgallery-item .scrollgallery-text {
                align-self: end;
            }
}


/* ============================================================ */
/* 4. IMAGEN + VÍDEO A DOS COLUMNAS */
/* ============================================================ */
.paris-dinner-split {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Imagen y vídeo en formato cuadrado (1:1) en todas las resoluciones.
   Exporta la imagen y el vídeo cuadrados para que se vean sin recortes. */
.paris-dinner-split-col {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #000;
}

    /* Imagen normal (no de fondo): ocupa su columna y se ve siempre
       completa (contain), sin recortes. Con la imagen exportada en 1:1
       llena la columna exacta. */
    .paris-dinner-split-col img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* La columna de la imagen (la que no es de vídeo) no lleva fondo negro;
   ese es solo para el vídeo. No depende de ninguna clase extra. */
    .paris-dinner-split-col:not(.paris-dinner-split-col-video) {
        background-color: transparent;
    }

        /* Texto centrado sobre la imagen (en horizontal y vertical), con un ancho
   máximo de 215px. width: deja 20px de margen a cada lado en pantallas
   estrechas. */
        .paris-dinner-split-col:not(.paris-dinner-split-col-video) .paris-dinner-split-caption {
            top: 50%;
            bottom: auto;
            left: 50%;
            right: auto;
            width: calc(100% - 40px);
            max-width: 200px;
            transform: translate(-50%, -50%);
            text-align: left;
            z-index: 1;
        }

/* Vídeo de la parcial _HlsVideoControles:
     .video-card > .video-wrapper.paris-dinner-split-video > video[controls]
   Dentro de esta columna se anula el padding-top de .video-wrapper (la
   proporción la da la columna) y el <video> la llena entera, con sus
   controles visibles. Solo afecta a este bloque. */
.paris-dinner-split-col-video .video-card {
    position: absolute;
    inset: 0;
}

.paris-dinner-split-col-video .video-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding-top: 0;
}

    .paris-dinner-split-col-video .video-wrapper video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.paris-dinner-split-caption {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 20px;
    margin: 0;
    color: #111;
    font-size: 9px;
    letter-spacing: 0.5px;
    line-height: 10px;
}

/* En la columna del vídeo el texto va arriba, para no tapar los controles
   (que van en la parte inferior del vídeo), y no captura los clics. */
.paris-dinner-split-col-video .paris-dinner-split-caption {
    top: 20px;
    bottom: auto;
    z-index: 2;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .paris-dinner-split-col:not(.paris-dinner-split-col-video) .paris-dinner-split-caption {
        max-width: 300px;
    }
    .paris-dinner-split-caption {
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
    }
    .paris-dinner-split-caption {
        font-size: 14px;
        line-height: 16px;
    }
}

@media (min-width: 900px) {
    .paris-dinner-split {
        flex-direction: row;
    }

    .paris-dinner-split-col {
        width: 50%; /* sigue siendo cuadrada: mitad del ancho × mitad del ancho */
    }
}

@media (min-width: 1280px) {
    .paris-dinner-hero-text strong {
        font-weight: 700;
        font-size: 20px;
    }
    .paris-dinner-hero-text-right {
        margin: 10cqw 5.44cqw 11.1cqw 9cqw;
    }
    .paris-dinner-hero {
        padding: 200px 150px 600px;
    }

    .paris-dinner-hero-logo svg {
        width: 43%;
    }

    .paris-dinner-hero-text p {
        line-height: 1.3;
        --hero-font-weight: bold;
    }

    .paris-dinner-hero {
        --hero-font-size: 14px;
    }

    .scrollgallery-track-wrapper {
        padding: 50px 20px 20px;
    }

    .sg-name, .sg-desc {
        font-size: 11px;
        line-height: 13px;
    }

    .scrollgallery-track > .scrollgallery-item {
        --sg-img-ancho: 70%;
        --sg-img-alto: 98%;
        column-gap: 15px;
    }
}

/* ============================================================ */
/* GALERÍAS: PROPORCIÓN FIJA DE LAS IMÁGENES (≥768px)           */
/* ============================================================ */
/* Objetivo: exportar UNA imagen de escritorio/tablet por foto y que se
   vea siempre completa y llenando su hueco, en cualquier resolución.
   Para ello la proporción del hueco la marca la imagen, no la pantalla:
     · <picture> es el "marco": ocupa el espacio disponible y es un
       contenedor (container-type: size) para poder medirlo.
     · <img> se dibuja dentro con la proporción fija, lo más grande que
       quepa: width = el menor entre el ancho del marco y su alto × ratio.
   Proporciones (ancho / alto) — exporta las imágenes -H así:
     · --sg-ratio-fija  → imagen fija de la izquierda (data-index="1")
     · --sg-ratio-cinta → imágenes de la cinta / carrusel
   En MÓVIL no cambia nada: imagen -V a pantalla completa con cover. */
.scrollgallery {
    --sg-ratio-fija: 1.25; /* 5:4 */
    --sg-ratio-cinta: 0.75; /* 3:4 */
}

@media (min-width: 768px) {
    .scrollgallery-item > picture {
        display: flex;
        container-type: size;
        min-width: 0;
        min-height: 0;
    }

    /* !important en flex/height/max-width: pisan las reglas anteriores de
       la galería (que estiraban la imagen a todo el hueco) y la clase
       img-fluid del marcado. */
    .scrollgallery-item picture > img,
    .scrollgallery-item[data-index="1"] picture > img,
    .scrollgallery-track > .scrollgallery-item picture > img {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0;
        max-width: none !important;
        object-fit: cover; /* la imagen ya tiene la proporción del hueco: no recorta */
    }

    /* ---------- Imagen fija (izquierda) ---------- */
    .scrollgallery-item[data-index="1"] > picture {
        flex: 1 1 0;
        width: 100%;
        align-items: flex-end; /* apoyada sobre su texto */
        justify-content: flex-start; /* alineada a la izquierda con el texto */
    }

    .scrollgallery-item[data-index="1"] picture > img {
        aspect-ratio: var(--sg-ratio-fija);
        width: min(100cqw, 100cqh * var(--sg-ratio-fija)) !important;
    }

    /* ---------- Imágenes de la cinta (derecha) ---------- */
    .scrollgallery-track > .scrollgallery-item > picture {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-end; /* borde inferior alineado con el texto */
        justify-content: flex-end; /* pegada al texto de la derecha */
    }

    .scrollgallery-track > .scrollgallery-item picture > img {
        aspect-ratio: var(--sg-ratio-cinta);
        width: min(100cqw, 100cqh * var(--sg-ratio-cinta)) !important;
    }
}

/* Tablet vertical (carrusel): los bloques no tienen alto fijo, así que el
   marco es un bloque normal y la imagen ocupa su ancho con la proporción
   fija. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    .scrollgallery-item > picture {
        display: block;
        container-type: normal;
    }

    .scrollgallery-item[data-index="1"] > picture,
    .scrollgallery-track > .scrollgallery-item > picture {
        align-self: end;
    }

    .scrollgallery-item[data-index="1"] picture > img,
    .scrollgallery-track > .scrollgallery-item picture > img {
        width: 100% !important;
    }

    .scrollgallery-item[data-index="1"] picture > img {
        aspect-ratio: var(--sg-ratio-fija);
    }

    .scrollgallery-track > .scrollgallery-item picture > img {
        aspect-ratio: var(--sg-ratio-cinta);
    }
}

/* ------------------------------------------------------------
   ESCRITORIO (≥1200px): COLUMNAS A MEDIDA DE SUS IMÁGENES
   En vez de repartir el ancho al 50 % y encajar la imagen dentro (lo que
   dejaba hueco a los lados en pantallas anchas), cada columna mide lo que
   su imagen: el alto disponible × su proporción. Las dos columnas quedan
   juntas y centradas; lo que sobra de pantalla va a los márgenes.
   Si en alguna pantalla no caben, cada columna se limita a la mitad del
   ancho y la imagen se ajusta dentro (sin recortes).
   Ajustes:
     --sg-texto-fija-alto → espacio reservado bajo la imagen fija para su texto
     --sg-cinta-alto      → alto de cada imagen de la cinta respecto a su
                            "pantalla" (0.98 = 98 %; el resto es la separación)
     --sg-texto-ancho     → ancho del texto a la derecha de la cinta
   El alto disponible se mide en .scrollgallery-track-wrapper (100cqh = su
   alto ya descontado el padding), así que puedes cambiar ese padding sin
   tocar nada más. Las imágenes empiezan justo en el borde superior.
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
    .scrollgallery-track-wrapper {
        container-type: size; /* 100cqh = alto útil (sin padding) */
        justify-content: center;
        --sg-texto-fija-alto: 90px;
        --sg-cinta-alto: 0.98;
        --sg-texto-ancho: 240px;
        --sg-img-fija-w: calc((100cqh - var(--sg-texto-fija-alto)) * var(--sg-ratio-fija));
        --sg-img-cinta-w: calc(100cqh * var(--sg-cinta-alto) * var(--sg-ratio-cinta));
    }

    /* Columna izquierda: ancho = ancho de su imagen */
    .scrollgallery-item[data-index="1"] {
        flex: 0 0 auto;
        width: min(var(--sg-img-fija-w), calc(50% - 12.5px));
        max-width: none;
        justify-content: flex-start; /* imagen arriba, texto justo debajo */
    }

        .scrollgallery-item[data-index="1"] > picture {
            flex: 0 0 auto;
            display: block;
            container-type: normal;
        }

        .scrollgallery-item[data-index="1"] picture > img {
            width: min(100%, calc((100cqh - var(--sg-texto-fija-alto)) * var(--sg-ratio-fija))) !important;
        }

    /* Columna derecha: imagen + separación + texto */
    .scrollgallery-right {
        flex: 0 0 auto;
        width: min(calc(var(--sg-img-cinta-w) + 15px + var(--sg-texto-ancho)), calc(50% - 12.5px));
        max-width: none;
    }

    .scrollgallery-track > .scrollgallery-item {
        grid-template-columns: minmax(0, var(--sg-img-cinta-w)) minmax(120px, 1fr); /* si falta sitio, cede antes el texto (mín. 120px) */
        grid-template-rows: calc(var(--sg-cinta-alto) * 100%) 1fr;
        column-gap: 15px;
    }

        /* la imagen de la cinta arranca arriba a la izquierda de su hueco */
        .scrollgallery-track > .scrollgallery-item > picture {
            justify-content: flex-start;
            align-items: flex-start;
        }
}

/* ------------------------------------------------------------
   TABLET VERTICAL: imagen fija también en vertical
   En el .cshtml, el <picture> de la imagen fija (data-index="1") usa la
   versión -V (móvil, 9:16) también en tablet vertical, así que aquí su
   hueco toma esa proporción. Sin recortes.
   ------------------------------------------------------------ */
.scrollgallery {
    --sg-ratio-movil: 0.5625; /* 9:16 → proporción de las imágenes -V */
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    .scrollgallery-item[data-index="1"] picture > img {
        aspect-ratio: var(--sg-ratio-movil);
    }
}

/* ------------------------------------------------------------
   TABLET HORIZONTAL: imagen fija arriba, con su texto justo debajo
   El ancho de la imagen se calcula con el alto disponible en la ventana
   fija (pantalla − --sg-sticky-top − padding − espacio para el texto),
   así cabe entera sin empujar el texto fuera.
   --sg-texto-fija-alto-t: espacio reservado para el texto bajo la imagen.
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
    .scrollgallery-sticky {
        --sg-texto-fija-alto-t: 80px;
    }

    .scrollgallery-item[data-index="1"] {
        justify-content: flex-start;
    }

        .scrollgallery-item[data-index="1"] > picture {
            flex: 0 0 auto;
            display: block;
            container-type: normal;
        }

        .scrollgallery-item[data-index="1"] picture > img {
            width: min(100%, calc((var(--sg-alto, 100vh) - var(--sg-sticky-top) - 48px - var(--sg-texto-fija-alto-t)) * var(--sg-ratio-fija))) !important;
        }
}

@media (min-width: 1440px) {
    .scrollgallery-track-wrapper {
        padding: 100px 80px 25px;
    }
}

@media (min-width: 1920px) {
    .scrollgallery-track-wrapper {
        padding: 50px 103px 22px;
    }

    .paris-dinner-hero {
        padding: 200px 250px 600px;
    }

    .paris-dinner-hero-text-right {
        margin: 10cqw 5.44cqw 11.1cqw 4cqw;
    }
}

@media (min-width: 2200px) {
    .scrollgallery-track-wrapper {
        padding: 60px 80px; /* menos arriba y abajo → imágenes más grandes */
        gap: 40px; /* más aire entre columnas */
        --sg-texto-fija-alto: 80px;
        --sg-cinta-alto: 0.97;
        --sg-texto-ancho: 320px;
    }
}

/* ------------------------------------------------------------
   ESCRITORIO (≥1200px): texto de la cinta alineado con SU imagen
   Cuando la columna derecha no tiene ancho suficiente, la imagen de la
   cinta se reduce por anchura y queda más baja que su hueco. Antes el
   texto se alineaba con el fondo del hueco y parecía desplazado.
   Ahora la fila de la imagen mide lo que la imagen, y el texto se alinea
   siempre con su borde inferior. La imagen mantiene su proporción y se
   ve completa; el espacio sobrante queda debajo, como separación.
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
    .scrollgallery-track > .scrollgallery-item {
        grid-template-rows: auto 1fr;
        align-items: start;
    }

        .scrollgallery-track > .scrollgallery-item > picture {
            display: block;
            container-type: normal;
            grid-row: 1;
        }

        /* ancho = el menor entre el de su columna y el que le daría el
           alto disponible (100cqh = alto útil de la galería) */
        .scrollgallery-track > .scrollgallery-item picture > img {
            width: min(100%, calc(100cqh * var(--sg-cinta-alto) * var(--sg-ratio-cinta))) !important;
        }

        .scrollgallery-track > .scrollgallery-item .scrollgallery-text {
            grid-row: 1;
            align-self: end;
        }
}