/* =============================================================
   VRRO — Horizontal scroll home CSS
   Reescrito limpio desde el original Divi.
   Unidades vh para que el collage escale con la altura de pantalla.
   ============================================================= */

/* ---------------------------------------------------------------
   GLOBAL
--------------------------------------------------------------- */
/*
  overflow-x: hidden en html (NO en body).
  En iOS Safari, ponerlo en body convierte body en scroll container,
  rompiendo position:fixed del header y footer. En html es seguro.
*/
html {
    overflow-x: hidden;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scoped: evita romper header/footer */
.racesWrapper .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.racesWrapper video {
    width: 100%;
}
.racesWrapper .video-bg video {
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------
   SECCIÓN PRINCIPAL
--------------------------------------------------------------- */
.section {
    padding-top: 10vh;
    height: 95vh;
}

/* Contenedor del scroll horizontal — pin de GSAP */
.racesWrapper {
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* Track horizontal (más ancho que el viewport) */
.races {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

.row {
    margin-top: 3vh;
    display: flex;
    /* El elemento .row.races sobreescribe el margin-top abajo */
    flex-direction: row;
    overflow: visible;
    width: max-content;
    white-space: nowrap;
    padding-right: 20px;
}

.row.races {
    margin-top: 0;
}

/* Nav right-align: mueve ul a la derecha empujando con margin-left:auto */
ul.hidden.items-center.gap-8.uppercase.md\:flex {
    margin-right: 0;
    margin-left: auto;
}

.flex {
    display: flex;
}
.align-end {
    align-items: flex-end;
}

/* ---------------------------------------------------------------
   COLUMNAS — tamaño base
--------------------------------------------------------------- */
.col1-container,
.col2-container {
    height: 75vh;
    width: 68vh;
}
.col1-container {
    position: relative;
}
.col2-container {
    margin-left: 2.6vh;
    width: 56vh;
    z-index: 2;
}
.col1,
.col2 {
    height: 100%;
}
.col3-container {
    width: 70vh;
    height: 77vh;
    position: relative;
}
.col4 {
    position: relative;
    z-index: 4;
}
.col5 {
    padding-left: 3vh;
    position: relative;
}

/* ---------------------------------------------------------------
   VIDEO-BG + IMAGEN SUPERPUESTA
   Patrón: vídeo (z-index -32) detrás de imagen overlay.
   Hover: imagen se desvanece → aparece el vídeo.
--------------------------------------------------------------- */
.col1-video-bg-container {
    position: relative;
}

.video-container {
    height: 80%;
    width: 100%;
    overflow: hidden;
    margin-bottom: 2.5vh;
}

.video-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -32;
    padding: 0 1px;
    margin-bottom: 0 !important;
}

/* Imagen overlay: se oculta en hover para revelar el vídeo */
.video-bg-img-container {
    position: relative;
}
/* hero-img siempre oculta — el vídeo se muestra permanentemente */
.hero-img {
    opacity: 0 !important;
}
.video-bg-img-container:hover .lady {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.video-bg-img-container:hover .dish {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.video-bg-img-container:hover .t-shirts {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero-img,
.lady,
.dish,
.t-shirts {
    transition: opacity 0.4s ease;
}

/* ---------------------------------------------------------------
   COLUMNA 1
--------------------------------------------------------------- */
.carta-img {
    height: 20%;
    width: 50%;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

/* Sello VRRO circular giratorio (draggable) */
.col1-varro-tag {
    position: absolute;
    width: 25vh;
    top: 14vh;
    right: -2vh;
    z-index: 100;
    cursor: grab;
}
.col1-varro-tag:active {
    cursor: grabbing;
}

/* Mobile: imagen carta alternativa */
.mobile-carta-img {
    display: none;
}

/* ---------------------------------------------------------------
   COLUMNA 2
--------------------------------------------------------------- */
.col2-video-bg {
    position: relative;
    width: 38vh;
    margin-top: -21vh;
    height: 68vh;
    pointer-events: none;
}

.menu-img {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.menu-img img {
    height: 100%;
    object-fit: cover;
}

.eat-tortilla-img {
    width: 22vh;
    margin-right: -17vh;
    margin-left: 5vh;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    text-decoration: none;
    cursor: pointer;
}

.col2-video-mobile-neg-margin {
    /* controlado en móvil */
}

/* ---------------------------------------------------------------
   COLUMNA 3 — collage triangular
--------------------------------------------------------------- */
.triangular-images {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vh;
}

.bottle-video-bg {
    position: relative;
    width: 47%;
    max-height: 42vh;
    overflow: hidden;
}
.bottle {
    height: 100%;
}

.lady-video-bg {
    position: relative;
    width: 47%;
    height: 52vh;
    max-height: 47vh;
    overflow: hidden;
    z-index: 3;
}
.lady {
    height: 100%;
}

.dish-video-bg {
    position: relative;
    width: 32vh;
    height: 45vh;
    max-height: 45vh;
    overflow: hidden;
    margin-top: -11vh;
    margin-right: -10vh;
    z-index: 2;
}
.dish {
    height: 100%;
}

/* Gilda (ilustración decorativa) */
.lolipop {
    width: 55%;
    margin-top: -10vh;
    margin-right: -18vh;
    margin-left: 4vh;
    z-index: 4;
}
.lolipop img {
    object-fit: contain;
    height: auto; /* evita que height:100% la corte */
    width: 100%;
}

/* Sticker arrastrable de gildas */
.gildas {
    position: absolute;
    width: 23%;
    bottom: 1.9vh;
    right: 2vh;
    z-index: 100;
    cursor: grab;
}
.gildas:active {
    cursor: grabbing;
}

/* Break glass: solo desktop */
.break-glass-mobile {
    display: none;
}

/* ---------------------------------------------------------------
   COLUMNA 4
--------------------------------------------------------------- */
/* About Us — franja con imágenes que se deslizan en hover */
.about-us-container {
    position: relative;
    width: 10vh;
    overflow: hidden;
    display: flex;
}

.about-us-img-1,
.about-us-img-2 {
    min-width: 10vh;
    transform: translateX(-100%);
    transition: transform 0.4s ease-in;
}

/* Iconos: rocket/burger están ocultos globalmente en el sitio actual */
.img-container.rocket,
.img-container.burger {
    display: none;
}
.rocket {
    position: absolute;
    top: 7.4vh;
    left: 2vh;
    width: 5.5vh;
    transform: rotate(70deg);
    opacity: 0;
    transition: all 0.5s ease-in;
}
.burger {
    position: absolute;
    bottom: 28.4vh;
    left: 2vh;
    width: 5.3vh;
    opacity: 0;
    transition: all 0.4s ease-in;
}

/* Hover: imágenes entran deslizando */
.about-us-container:hover .about-us-img-1,
.about-us-container:hover .about-us-img-2 {
    transform: translateX(0);
}
.about-us-container:hover .rocket {
    opacity: 1;
    transform: rotate(0);
}
.about-us-container:hover .burger {
    opacity: 1;
    transform: rotate(60deg);
}

/* "You" heading */
.text-module.you h2 {
    font-size: 9vh;
    line-height: 12vh;
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    color: #bf1e2e;
}

.col4-right {
    margin-left: -6vh;
    position: relative;
}

.spices {
    width: 42vh;
    margin-top: -17vh;
    margin-left: -7vh;
}

.break-glass {
    width: 32.4vh;
    margin-left: auto;
}

.instagram-barcode {
    position: absolute;
    width: 14vh;
    bottom: 15vh;
    right: 0;
}

/* ---------------------------------------------------------------
   COLUMNA 5
--------------------------------------------------------------- */
.t-shirts-video-bg {
    position: relative;
    width: 49.6vh;
    height: 68.6vh;
}
.t-shirts {
    height: 100%;
}

.arrow {
    position: absolute;
    width: 25vh;
    top: 33vh;
    left: 2.5vh;
    transform: rotate(-11deg);
}

.tienda {
    margin-top: 4.7vh;
    margin-left: 4vh;
}

.la-dolorosa {
    margin-left: 4vh;
    width: 30vh;
}

.varro-tag {
    width: 25vh;
    position: absolute;
    bottom: 5vh;
    right: 13vh;
    z-index: 100;
    cursor: grab;
}
.varro-tag:active {
    cursor: grabbing;
}

.la-dolorosa-mobile {
    display: none;
}

/* ---------------------------------------------------------------
   TEXTO ANIMADO (CARTA / RESERVA / TIENDA)
   head-1 empieza fuera (margin-top -12vh), entra en hover.
   head-2 es el espejo decorativo (aria-hidden).
--------------------------------------------------------------- */
.text-module {
    /* visible en desktop, oculto en móvil (ver media query) */
}

.animated-text {
    height: 11vh;
    width: 100%;
    overflow: hidden;
}

.animated-text h3 a,
.animated-text h2 a {
    display: block;
    text-decoration: none;
    font-size: 9vh;
    line-height: 12vh;
    font-family: "Open Sans", sans-serif;
    color: #bf1e2e;
    font-weight: 800;
}

.head-1 {
    margin-top: -12vh;
    transition: margin-top 0.5s ease;
}
.animated-text:hover .head-1 {
    margin-top: 0;
}

/* RESERVA TU MESA */
.reserva {
    margin-top: 3vh;
}
.tu,
.mesa {
    text-align: right;
}
.mesa-animated-text {
    margin-left: 14vh;
    margin-right: -14vh;
}
.tu {
    margin-right: 2vh;
}

/* ---------------------------------------------------------------
   ELEMENTOS MÓVILES (ocultos en desktop)
--------------------------------------------------------------- */
.mobile-text-module {
    display: none;
}
.mobile-text-module a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: block;
}
.mobile-carta-img {
    text-decoration: none;
    cursor: pointer;
}

/* ---------------------------------------------------------------
   ANIMACIÓN SPIN (sello VRRO giratorio)
--------------------------------------------------------------- */
.spin-img {
    animation: spin 3s linear infinite;
    transform-origin: center center;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------
   OPTIMIZACIONES DE RENDIMIENTO
--------------------------------------------------------------- */
.video-container,
.img-container {
    will-change: opacity;
}
.draggable {
    will-change: transform;
}
.animated-text,
.spin-img,
.draggable {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ---------------------------------------------------------------
   SCROLLBAR HORIZONTAL PERSONALIZADA (desktop)
--------------------------------------------------------------- */
@media (min-width: 768px) {
    .custom-horizontal-scrollbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
        z-index: 10000;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .custom-scrollbar-thumb {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 6px;
        min-width: 40px;
        background-color: #bf1e2e;
        border-radius: 30px;
        cursor: grab;
        transition: background-color 0.2s ease;
    }

    .custom-scrollbar-thumb:hover {
        background-color: #9a1522;
    }

    .custom-scrollbar-thumb:active,
    .custom-scrollbar-thumb.dragging {
        cursor: grabbing;
        background-color: #9a1522;
    }
}

/* ---------------------------------------------------------------
   ACCESIBILIDAD — reduced motion
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------
   MEDIA QUERIES — MÓVIL (<768px)
   El scroll horizontal se desactiva; el collage se apila en vertical.
--------------------------------------------------------------- */
@media (max-width: 767px) {
    .section {
        padding-top: 6vh;   /* coincide con la altura del header en móvil */
        height: auto;
    }

    /* Header 6vh en móvil (override del inline style height:10vh) */
    header nav {
        height: 6vh !important;
    }

    /* Hamburguesa pegada a la derecha del header */
    .nav-actions {
        margin-left: auto;
    }

    /* Botón RESERVAR MESA en el header — tamaño cómodo en móvil */
    .reservar-header-btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
        margin-left: 0 !important;
        letter-spacing: 0.05em;
        line-height: 1;
    }

    .racesWrapper {
        /*
          overflow-x: clip recorta el overflow horizontal de .races (width:max-content)
          sin crear un nuevo stacking context ni cambiar el scroll container.
          A diferencia de overflow:hidden, NO rompe position:fixed del header y footer.
          overflow-y: visible permite que el contenido vertical (columnas apiladas) fluya.
          El 'overflow: hidden' previo actúa de fallback para navegadores muy antiguos.
        */
        overflow: hidden;
        overflow-x: clip;
        overflow-y: visible;
        height: auto;
        cursor: default;
    }

    .row {
        width: 100%;
        flex-direction: column;
        overflow: visible;
        padding: 0 5vw;
        margin-top: 0;
        white-space: normal;
    }

    /* Belt-and-suspenders: .races nunca supera el ancho del viewport */
    .races {
        max-width: 100%;
    }

    /* Mostrar texto móvil; ocultar módulos de texto desktop */
    .mobile-text-module {
        display: block;
    }
    .text-module {
        display: none;
    }
    .about-us-text-module {
        display: block; /* col4 sigue visible */
    }

    .mobile-text-module h2 {
        font-size: 12vw;
        line-height: 1em;
        font-family: "Open Sans", sans-serif;
        font-weight: 800;
        color: #bf1e2e;
    }
    .carta-text {
        margin-left: 5.5vw !important;
    }

    /* Columnas al 100% */
    .col1-container,
    .col2-container,
    .col3-container,
    .col4-container,
    .col5-container {
        height: auto;
        width: 100%;
    }
    .col2-container {
        margin-left: 0;
    }

    /* Col 1 */
    .col1 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .carta-img {
        display: none;
    }
    .mobile-carta-img {
        display: block;
        margin-top: 3vw;
        width: 100%;
    }
    .mobile-carta-img img {
        object-fit: contain;
    }
    .col1-video-bg-container {
        width: 80%;
        height: 75vw;
        margin-bottom: 0;
    }
    .col1-varro-tag {
        width: 35vw;
        top: 14vw;
        right: 19vw;
    }

    /* Col 2 */
    .col2-video-bg {
        margin-top: 0;
        width: 51vw;
        height: 75vw;
    }
    .col2-video-mobile-neg-margin {
        margin-top: -24vw;  /* sube la imagen 24vw = TU(12vw)+MESA(12vw) → RESERVA queda justo encima */
    }
    .mobile-tu {
        padding-left: 51vw;
    }
    .mesa {
        padding-left: 51vw;
    }
    .eat-tortilla-img {
        width: 27vw;
        margin: 0 auto;
    }

    /* Col 3 */
    .col3-container {
        margin-top: 5vw;
    }
    .triangular-images {
        position: relative;
        justify-content: flex-start;
        gap: 0;
    }
    .bottle-video-bg {
        width: 43%;
        max-height: 55vw;
    }
    .dish-video-bg {
        position: absolute;
        top: 38vw;
        left: 15vw;
        width: 50vw;
        height: 65vw;
        max-width: 65vw;
        margin-top: 0;
        margin-right: 0;
        z-index: 2;
    }
    .lady-video-bg {
        position: absolute;
        bottom: -84vw;
        right: 20vw;
        width: 42%;
        height: 53vw;
        max-height: 61vw;
        z-index: 3;
    }
    .lolipop {
        position: absolute;
        margin: 0;
        left: 34vw;
        width: 35%;
    }
    .break-glass {
        display: none;
    }
    .break-glass-mobile {
        display: block;
        position: absolute;
        top: 18vw;
        right: 0;
        width: 30vw;
        height: 50vw;
        z-index: 2;
    }
    .break-glass-mobile img {
        object-fit: contain;
    }
    .gildas {
        position: absolute;
        width: 23%;
        bottom: 40vw;
        right: 5vw;
    }

    /* Col 4 */
    .col4-right {
        margin-left: 0;
    }
    .about-us-container {
        width: 12vw;
    }
    .about-us-img-1,
    .about-us-img-2 {
        min-width: 12vw;
    }
    .rocket {
        top: 8.4vw;
        left: 3vw;
        width: 6.5vw;
    }
    .burger {
        bottom: 34vw;
        left: 3vw;
        width: 5.5vw;
    }
    .spices {
        width: 59vw;
        position: absolute;
        top: 72vw;
        left: 13vw;
        transform: rotateY(180deg) rotateZ(28deg);
        margin: 0;
    }
    .instagram-barcode {
        width: 17vw;
        bottom: 26vw;
        right: -8vw;
    }

    /* Scroll-triggered video reveal (equivalente al hover de desktop) */
    .video-bg-img-container.video-revealed .lady,
    .video-bg-img-container.video-revealed .dish,
    .video-bg-img-container.video-revealed .t-shirts {
        opacity: 0;
    }

    /* Footer — relativo en móvil (no sigue al scroll; z-index activo para el dropdown legal) */
    footer[role="contentinfo"] {
        position: relative !important;
        z-index: 20;
        height: auto !important;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    /* Footer — Instagram visible en móvil */
    footer a[aria-label="VRRO en Instagram"] {
        display: inline-flex;
        align-items: center;
    }
    footer a[aria-label="VRRO en Instagram"] svg {
        width: 24px !important;
        height: 24px !important;
    }
    /* Footer LEGAL legible en móvil */
    #legal-toggle {
        font-size: 12px !important;
    }

    /* Col 5 */
    .col5-container {
        margin-top: 4vw;
    }
    .col5 {
        padding-left: 0;
        flex-direction: column;
    }
    .t-shirts-video-bg {
        width: 68%;
        height: 87.6vw;
    }
    .arrow {
        width: 32vw;
        top: 44vw;
        left: -3.5vw;
        transform: rotate(-2deg);
    }
    .tienda-mobile-text-module {
        margin-top: 6vw;
    }
    .la-dolorosa {
        display: none;
    }
    .la-dolorosa-mobile {
        display: block;
        margin-bottom: 10vh;
    }
    .varro-tag {
        width: 34vw;
        position: absolute;
        bottom: 75vw;
        right: 6vw;
    }
}