/* =======================
   GLOBAL RESETS
======================= */


h2, h3 {
    padding-bottom: 0 !important;
}
/*Scroll bar nav*/
/* =======================
   CUSTOM HORIZONTAL SCROLLBAR
   Add this to the BOTTOM of your existing horizontal-page.css
======================= */

@media (min-width: 768px) {
    .custom-horizontal-scrollbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px;
        background-color: ButtonFace;
        box-shadow: inset 0px 0px 0px 20px rgba(255,255,255,0.3);
        z-index: 10000;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    
    .custom-scrollbar-thumb {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 16px;
        background-color: ButtonFace;
        box-shadow: inset 0px 0px 0px 20px rgba(128,128,128,0.3);
        border-left: 2px solid rgba(255,255,255,0.3);
        border-right: 2px solid rgba(255,255,255,0.3);
        border-radius: 30px;
        cursor: grab;
        transition: box-shadow 0.2s ease;
    }
    
    .custom-scrollbar-thumb:hover {
        box-shadow: inset 0px 0px 0px 20px rgba(128,128,128,0.5);
    }
    
    .custom-scrollbar-thumb:active,
    .custom-scrollbar-thumb.dragging {
        cursor: grabbing;
        box-shadow: inset 0px 0px 0px 20px rgba(128,128,128,0.7);
    }
}

/* Performance optimizations for smooth animations */
.video-container,
.img-container {
    will-change: opacity;
}

.draggable {
    will-change: transform;
}

.animated-text,
.spin-img,
.draggable {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Smooth font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduced motion support for accessibility */
@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;
    }
}



/* =======================
   HEADER TEXT STYLING
======================= */
h2 {
    font-weight: 800;
    font-size: 12.1vh;
    color: #BF1E2E !important;
    line-height: 0.8em;
    font-family: "Open Sans", sans-serif;
}

/* =======================
   MAIN SECTION
======================= */
.section {
    padding-top: 10vh;
    height: 95vh;
}

/* The HORIZONTAL SCROLL container */
.racesWrapper {
    height: 100vh;
    /* required so ScrollTrigger has space */
    overflow: hidden;
    position: relative;
}

/* Internal row that is wider than the viewport */
.races {
    display: flex;
    flex-wrap: nowrap;
    width: max-content; /* makes width auto-fit content */
    will-change: transform;
}

/* =======================
   ROW - HORIZONTAL LAYOUT
======================= */
.row {
    margin-top: 3vh;
    display: flex;
    flex-direction: row;
    overflow: visible;
    width: max-content;
    white-space: nowrap;
    padding-right: 20px;
}

/* =======================
   COLUMN SIZE STRUCTURE
======================= */
.col1-container,
.col2-container {
    height: 80vh;
    width: 68vh;
}

.col1-container {
    position: relative;
}

.col2-container {
    margin-left: 2.6vh;
    width: 56vh;
    z-index: 2;
}

.col1,
.col2 {
    height: 100%;
}

/* =======================
   VIDEO-BG + IMAGE CONTAINERS
======================= */
.col1-video-bg-container {
    position: relative;
}

.video-bg-img-container:hover .hero-img {
    opacity: 0;
}

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

video {
    width: 100%;
}

.carta-img {
    height: 20%;
    width: 50%;
    overflow: hidden;
}

/* TAG */
.col1-varro-tag {
    position: absolute;
    width: 25vh;
    top: 2vh;
    right: -2vh;
    z-index: 1000000;
    cursor: grab;
}
.col1-varro-tag:active {
    cursor: grabbing;
}

.video-bg video {
    height: 100%;
    object-fit: cover;
}

.img-container img {
    width: 100%;
}

/* Hover effect hides menu image */
.video-bg-img-container:hover .menu-img {
    opacity: 0;
}

/* =======================
   ANIMATED TEXT SECTION
======================= */
.animated-text {
    height: 11vh;
    width: 100%;
    overflow: hidden;
}

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

/* Text slide animation */
.head-1 {
    margin-top: -12vh;
    transition: all 0.5s ease;
}

.animated-text:hover .head-1 {
    margin-top: 0;
}

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

/* Text alignment adjustments (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;
}

/* =======================
   COLUMN 2
======================= */
.col2-video-bg {
    position: relative;
    width: 38vh;
    margin-top: -21vh;
    height: 68vh;
}

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

.menu-img {
    width: 100%;
    height: 100%;
}

.menu-img img {
    height: 100%;
    object-fit: cover;
}

/* =======================
   ADDITIONAL IMAGES
======================= */


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



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

/* =======================
   COLUMN 3
======================= */
.col3-container {
    width: 70vh;
    position: relative;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flex {
    display: flex;
}

.triangular-images {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vh;
}

/* =======================
   INDIVIDUAL IMAGE HOVERS
======================= */
.bottle-video-bg {
    position: relative;
    width: 47%;
    max-height: 42vh;
    overflow: hidden;
}

.bottle {
    height: 100%;
}

.bottle-video-bg:hover .bottle {
    opacity: 0;
}

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

.lady-video-bg:hover .lady {
    opacity: 0;
}

.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-video-bg:hover .dish {
    opacity: 0;
}

.dish {
    height: 100%;
}

.lolipop {
    width: 44%;
    margin-top: -10vh;
    margin-right: -18vh;
    margin-left: 4vh;
    z-index: 4;
    transform: translateX(0px) translateY(0px) rotateX(0deg) rotateY(170deg) rotateZ(320deg);
}

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

.lolipop img {
    object-fit: contain;
}

/* =======================
   COLUMN 4
======================= */
.col4 {
    position: relative;
    z-index: 4;
}

/* ABOUT US HEADING (ANIMATED) */
.about-us-container {
    position: relative;
    width: 10vh;
    overflow: hidden;
}

.about-us-img-1,
.about-us-img-2 {
    min-width: 10vh;
    transition: all 0.4s ease-in;
}

/* Icon positions before hover */
.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;
}

/* Initial shifted state */
.about-us-img-1,
.about-us-img-2 {
    transform: translateX(-100%);
}

/* Hover Animation */
.about-us-container:hover .about-us-img-1 {
    transform: translateX(0);
}

.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);
}

/* Continuation Column 4 */
.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;
}

/* =======================
   COLUMN 5
======================= */
.col5 {
    padding-left: 3vh;
    position: relative;
}

.t-shirts-video-bg {
    position: relative;
    width: 49.6vh;
    height: 68.6vh;
}

.t-shirts-video-bg:hover .t-shirts {
    opacity: 0;
}

.t-shirts {
    height: 100%;
}

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

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

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

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

.mobile-text-module {
    display: none;
}

.mobile-carta-img {
    display: none;
}

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

/* =======================
   SPINNING ANIMATION
======================= */
.spin-img {
    animation: spin 3s linear infinite;
    transform-origin: center center;
}

.break-glass-mobile {
    display: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =======================
   MEDIA QUERIES
======================= */
@media (max-width: 767px) {
    .section {
        padding-top: 15vw;
        height: auto;
    }

    .racesWrapper {
        overflow-x: visible;
        overflow-y: visible;
        height: auto;
        cursor: default;
    }

    .row {
        width: 100%;
        flex-direction: column;
        overflow: hidden;
        padding: 0 5vw;
    }

    .mobile-text-module {
        display: block;
    }

    .carta-text {
        margin-left: 5.5vw;
    }

    .mobile-text-module h2 {
        font-size: 14.5vw;
        line-height: 1em;
        font-family: "Open Sans", sans-serif;
    }

    .text-module {
        display: none;
    }

    .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: 3vw;
        right: 19vw;
    }

    .col2-video-bg {
        margin-top: 0;
    }

    .col1-container,
    .col2-container,
    .col3-container,
    .col4-container,
    .col5-container {
        height: 100%;
        width: 100%;
    }

    .col2-container {
        margin-left: 0;
    }

    .mobile-tu {
        padding-left: 51vw;
    }

    .mesa {
        padding-left: 51vw;
    }

    .col2-video-bg.video-bg-img-container {
        width: 51vw;
        height: 75vw;
    }

    .eat-tortilla-img {
        width: 27vw;
        margin: 0 auto;
    }

    .col2-video-mobile-neg-margin {
        margin-top: -27vw;
    }

    .col3-container {
        margin-top: 5vw;
    }

    .triangular-images {
        position: relative;
        justify-content: flex-start;
        gap: 0;
    }

    .bottle-video-bg {
        position: relative;
        width: 43%;
        max-height: 55vw;
        overflow: hidden;
    }

    .dish-video-bg {
        position: absolute;
        top: 38vw;
        left: 15vw;
        width: 50vw;
        height: 65vw;
        max-width: 65vw;
        overflow: hidden;
        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;
        overflow: hidden;
        z-index: 3;
    }

    .lolipop {
        position: absolute;
        margin-top: 0;
        margin-right: 0;
        margin-left: 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;
        cursor: grab;
    }
    .gildas:active {
        cursor: grabbing;
    }

    .about-us-text-module {
        display: block;
    }

    .about-us-container {
        position: relative;
        width: 12vw;
        overflow: hidden;
    }

    .about-us-img-1,
    .about-us-img-2 {
        min-width: 12vw;
        transition: all 0.4s ease-in;
    }

    .rocket {
        position: absolute;
        top: 8.4vw;
        left: 3vw;
        width: 6.5vw;
        transform: rotate(70deg);
        opacity: 0;
        transition: all 0.5s ease-in;
    }

    .burger {
        position: absolute;
        bottom: 34vw;
        left: 3vw;
        width: 5.5vw;
        opacity: 0;
        transition: all 0.4s ease-in;
    }

    .about-us-img-1,
    .about-us-img-2 {
        transform: translateX(-100%);
    }

    .about-us-container:hover .about-us-img-1 {
        transform: translateX(0);
    }

    .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);
    }

    .col4-right {
        margin-left: 0;
    }

    .spices {
        width: 59vw;
        position: absolute;
        top: 72vw;
        left: 13vw;
        transform: translateX(0px) translateY(0px) rotateX(0deg) rotateY(180deg) rotateZ(28deg);
        margin-top: 0;
        margin-left: 0;
    }

    .instagram-barcode {
        position: absolute;
        width: 13vw;
        bottom: 26vw;
        right: -8vw;
    }

    .col5-container {
        margin-top: 4vw;
    }

    .col5 {
        padding-left: 0;
        flex-direction: column;
    }

    .t-shirts-video-bg {
        position: relative;
        width: 68%;
        height: 87.6vw;
    }

    .arrow {
        position: absolute;
        width: 32vw;
        top: 44vw;
        left: -3.5vw;
        transform: rotate(-2deg);
    }

    .tienda-mobile-text-module {
        margin-top: 6vw;
    }

    .la-dolorosa {
        display: none;
    }

    .varro-tag {
        width: 34vw;
        position: absolute;
        bottom: 75vw;
        right: 6vw;
    }

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

    .header {
        height: 14vw;
    }
}