/* Point 1: Levitation effect for main plates */
.slide1-paella-img, .slide2-main-plate, .slide3-main-plate {
    animation: float-bob-y 3s infinite linear alternate !important;
}


/* Safari / iOS WOW.js and Animation Fixes */


html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { min-width: 0; }
h1, h2, h3, h4, h5, h6 { letter-spacing: 0 !important; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
button, a { touch-action: manipulation; }
a:focus-visible, button:focus-visible { outline: 3px solid #1ca3b0; outline-offset: 4px; }
.regina-nav { display: none; }
.theme-btn { white-space: normal; text-align: center; }
.swiper-slide:not(.swiper-slide-active) .slide1-floating img,
.swiper-slide:not(.swiper-slide-active) .slide2-item,
.swiper-slide:not(.swiper-slide-active) .slide3-item,

#legalModalOverlay { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important; }
#legalModalOverlay > div { max-height: 90vh !important; max-height: 90dvh !important; min-height: 0; }
#legalModalContent { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }


@media (max-width: 1199px) {
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
    .container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
    .header-main { padding: 12px 0 !important; gap: 8px; flex-wrap: wrap; }
    .header-main .logo { flex: 0 0 auto; }
    .header-main .logo img { width: 136px !important; }
    .header-main .header-left { display: none; }
    .header-main .header-right { min-width: 0; flex: 1 1 auto; width: auto !important; }
    .header-main .header-button { display: flex !important; justify-content: flex-end; width: auto !important; }
    .header-main .header-button > .theme-btn { display: none; }
    .lang-switcher { gap: 0 !important; margin-right: 0 !important; flex-flow: row nowrap !important; justify-content: center; width: 220px; flex-shrink: 0; }
    .lang-switcher a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
    .lang-switcher a.active { box-shadow: inset 0 -2px #1ca3b0; }
    .regina-nav { position: fixed; z-index: 1000; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: #fff; border-top: 1px solid #dbe5e5; box-shadow: 0 -3px 14px #033e4a12; }
    .regina-nav a, .regina-nav button { min-height: 50px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #36585e; font: 600 12px/1.2 Arial, sans-serif; padding: 4px; }
    .regina-nav i { font-size: 19px; }
    .regina-nav [aria-current="page"] { color: #087c87; background: #e6f5f5; border-radius: 6px; }
    .scroll-up { bottom: calc(84px + env(safe-area-inset-bottom)) !important; right: 16px !important; }
    .slide1-hero, .slide2-hero, .slide3-hero { height: auto !important; min-height: 690px !important; padding: 36px 0 24px !important; }
    .slide1-text-wrapper, .slide2-text-wrapper, .slide3-text-wrapper { text-align: center; padding-top: 0 !important; }
    .slide1-main-title, .slide2-main-title, .slide3-main-title { font-size: 44px !important; line-height: 1.08 !important; margin-bottom: 18px !important; }
    .slide3-main-title { color: #033e4a !important; }
    .slide1-dish-scene, .slide2-dish-scene, .slide3-dish-scene { width: 100%; max-width: 420px; margin: 16px auto 0; padding: 20px 0 !important; }
    .hero-button { display: flex; justify-content: center; }
    .mockup-section.section-padding { padding-top: 56px !important; padding-bottom: 56px !important; }
    .mockup-section h2 { font-size: 36px !important; line-height: 1.15 !important; }
    .landing-hero h1 { font-size: 44px !important; line-height: 1.08 !important; }
    .landing-hero p { max-width: 32rem; }
    .landing-hero p br { display: none; }
    .floating-socials-wrapper { display: none !important; }
    .kfc-wrapper .kfc-image-items .offer-shape { right: 0 !important; bottom: 0 !important; width: 110px !important; }
    .footer-new { padding-bottom: 30px !important; }
    input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 575px) {
    .header-main .logo { width: 100%; text-align: center; }
    .header-main .header-right, .header-main .header-button { justify-content: center !important; }
    .header-main .header-right { flex-basis: 100%; }
    .header-main { gap: 0; padding: 8px 0 !important; }
    .slide1-main-title, .slide2-main-title, .slide3-main-title { font-size: 36px !important; }
    .slide1-hero, .slide2-hero, .slide3-hero { min-height: 630px !important; }
    .slide1-dish-scene, .slide2-dish-scene, .slide3-dish-scene { max-width: 320px; }
    .mockup-section h2 { font-size: 30px !important; }
    .landing-hero h1 { font-size: 38px !important; }
    .landing-hero { background-image: url('../images/header.webp') !important; background-position: left center !important; }
    .mockup-section .theme-btn { max-width: 100%; padding: 16px 20px !important; }
    .accordion-button { font-size: 18px !important; }
    #legalModalContent { padding: 18px !important; }
    #legalModalOverlay > div > div:first-child { flex-wrap: wrap; gap: 8px; }
    #legalModalOverlay > div > div:first-child > div { flex-wrap: wrap; gap: 4px !important; }
    #legalModalOverlay button { min-height: 44px; }
}
@media (hover: none) {
    .cat-card-arch:hover, .cat-card-arch:hover img, .cat-card-arch:hover .cat-card-title, .hover-slide-horizontal:hover { transform: none !important; }
}


/* ===================================================
   RESPONSIVE & MOBILE POLISH (APPLE / SAFARI / ALL)
   =================================================== */

/* Safari & iOS Animation Hardware Acceleration */


@media (max-width: 991px) {
    /* Fluid responsive typography to prevent overflow and text clashing */
    .mockup-heading, 
    .mockup-section h2, 
    .landing-hero h1, 
    .landing-section-01 h2, 
    .landing-section-02 h2 {
        font-size: clamp(26px, 7vw, 38px) !important;
        line-height: 1.15 !important;
        margin-bottom: 16px !important;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* Proper mobile padding for landing sections */
    .landing-hero,
    .landing-section-01,
    .landing-section-02 {
        padding: 60px 0 !important;
    }
    
    .mockup-section {
        padding: 50px 0 !important;
    }

    /* Fix misaligned column borders and paddings on mobile */
    .landing-section-01 .col-lg-4,
    .cta-border-col {
        border-left: none !important;
        border-right: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    
    /* Point 2: Centered plates in slide 02 and 03 */
    .slide2-main-plate, .slide3-main-plate {
        margin-left: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* CTA Section: perfect mobile diagramming */
    #cta-section-bg {
        padding: 50px 0 !important;
        background-position: center center !important;
    }
    #cta-section-bg .cta-border-col,
    #cta-section-bg .cta-info-col {
        border: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: center !important;
    }
    #cta-section-bg .cta-border-col {
        margin-bottom: 35px !important;
    }
    #cta-section-bg .cta-info-col .d-flex {
        justify-content: center !important;
        text-align: left !important;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    #cta-section-bg a[target="_blank"] {
        margin-left: 0 !important;
        display: inline-block;
        margin-top: 10px;
    }

    /* Category cards on mobile */
    .cat-card-arch {
        margin-bottom: 15px;
    }

    /* Take Away clean responsive */
    .take-away-section, .kfc-wrapper {
        padding: 40px 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 575px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .slide1-main-title, .slide2-main-title, .slide3-main-title {
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.1 !important;
    }
    .theme-btn {
        padding: 12px 24px !important;
        font-size: 15px !important;
    }
}


@media (max-width: 767px) {
    /* Point 6: Instagram Gallery to 2-column grid on mobile */
    .instagram-banner-slider .swiper-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        transform: none !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .instagram-banner-slider .swiper-slide {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }
    .instagram-banner-slider { overflow: visible !important; }
    .instagram-banner-slider .banner-image img {
        border-radius: 8px;
    }

    /* Point 7: Center Footer Elements perfectly */
    .footer-new {
        text-align: center !important;
    }
    .footer-new-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 25px !important;
    }
    .footer-new-contact li {
        justify-content: center !important;
    }
    .footer-new-contact i {
        margin-right: 10px !important;
        margin-left: 0 !important;
    }
    .footer-new-menu li {
        text-align: center !important;
    }
    .footer-divider {
        display: none !important;
    }
    .footer-new .flex-lg-row {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .footer-new .flex-lg-row > div {
        margin-bottom: 15px !important;
    }
}

/* Make brand slider linear for marquee effect */


@media (max-width: 991px) { .slide1-dish-scene, .slide2-dish-scene, .slide3-dish-scene { text-align: center !important; } }

@media (max-width: 767px) { .instagram-banner-items, .banner-image { width: 100% !important; height: 100% !important; } .banner-image img { aspect-ratio: 1/1 !important; object-fit: cover !important; } }

/* Stagger the levitation so they don't move as a single block */
.slide1-paella-img { animation-delay: 0.1s !important; }
.slide2-main-plate { animation-delay: 0.3s !important; }
.slide3-main-plate { animation-delay: 0.5s !important; }

.slide2-item-pimiento-rojo { animation-delay: 0.2s !important; }
.slide2-item-romero { animation-delay: 0.8s !important; }
.slide2-item-tomate { animation-delay: 1.4s !important; }
.slide2-item-sal { animation-delay: 0.5s !important; }
.slide2-item-rabano { animation-delay: 1.1s !important; }
.slide2-item-pimiento-amarillo { animation-delay: 0.7s !important; }

.slide3-item-espinaca-izq { animation-delay: 0.3s !important; }
.slide3-item-espinaca-der { animation-delay: 0.9s !important; }
.slide3-item-ricotta { animation-delay: 1.5s !important; }
.slide3-item-pasta { animation-delay: 0.4s !important; }
.slide3-item-pinones { animation-delay: 1.2s !important; }
.slide3-item-espinaca-izq { animation-delay: 0.8s !important; }

/* Make sure wow animations hold their hidden state before and after animating */
.animated {
    -webkit-animation-fill-mode: both !important;
    animation-fill-mode: both !important;
}
/* The five food categories share a single row on desktop. */
@media (min-width: 992px) {
    .regina-category-grid > .col-lg-3 { flex: 0 0 20%; width: 20%; }
}