/* MÓVIL */
@media (max-width: 768px) {
    body {font: var(--type-body-small-1);}
    .fondo___hero {min-height: 19vh !important;}
    
    
    
    
    
    
    
    .box___style_empanadas {display: block;}
    .box___style_empanadas p{padding-top: 12px;}




    .whatsapp-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 30px;
    }

    .floating-stack {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .floating-stack img {
        position: relative !important; /* Vuelven a su sitio normal */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 90%; /* Se adaptan al ancho del móvil */
    }
    .newsletter__input {width: 100%;}


    .parent-container_2 {height: 300px !important;}




    .fondo___img_2{background-size: 10% !important;
    height: 300px !important;}




}














/* TABLET */
@media (max-width: 1200px) { 
    body {overflow-x: hidden;}
    .container-main_movil {padding-left: 30px !important;padding-right: 30px !important;}
    .separator {height: 5rem;}
    .separator_2 {height: 2rem;}
    .separator_3 {height: 5rem;}
    .container-grid_1 {width: 100% !important;max-width: 100% !important;margin: 0 !important;padding: 0 15px;}
    h1{font-size: 42px !important; }
    h2{font-size: 38px !important;}
    h3{font-size: 32px !important;}
    h4{font-size: 26px !important;}
    .style__r{font-size: 30px; }
    .font-subtitles {font-size: 20px !important;}
    .font-subtitles-bold {font-size: 20px !important;}
    .font-body {font-size: 18px !important;}
    .font-body-bold {font-size: 24px !important;}
    .font-small-1 {font-size: 16px !important;}
    .font-small-1-bold {font-size: 16px !important;}
    .font-small-2 {font-size: 14px !important;}
    .font-small-2-bold {font-size: 14px !important;}
    

    .menu-toggle {
        display: block; /* Aparece en tablets y móviles */
    }

    .nav-menu_1 {
        /* POSICIONAMIENTO FLOTANTE */
        display: flex; /* Se activa con la clase .active del JS */
        flex-direction: column;
        padding: 20px;
        z-index: 2000;
        position: absolute;
        top: 100%;
        margin-top: 1px;
        right: 20px;
        width: 240px;
        /* Glass Light */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px) saturate(180%);
        -webkit-backdrop-filter: blur(5px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transition: all 0.4s ease;
        /* ESTADO INICIAL PARA ANIMACIÓN */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.95); /* Empieza un poco arriba y más pequeño */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animación fluida */
        pointer-events: none; /* Evita clics cuando está oculto */
    }
    .nav-menu_1.active {
        display: flex !important;
        border-radius: 22px;
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(0, 0, 0, 0.06);
        opacity: 1;
        visibility: visible;
        transform: translateY(10px) scale(1); /* Baja suavemente a su posición original */
        pointer-events: auto;
    }

    /* Ajuste de los enlaces para que se vean bien en el panel estrecho */
    .nav-menu_1 a {
        text-align: center;
        padding: 12px 15px;
        border-bottom: 1px solid var(--color-naranja-intenso);
        font-size: 1rem;
        align-items: center;
    }

    /* Quitar el último borde para que se vea limpio */
    .nav-menu_1 a:last-child {border-bottom: none;}
    /* Forzamos el orden en la barra superior */
    .logo-area { order: 1; }
    #search-box {order: 2; margin-left: auto; margin-right: 15px;}
    #btn-menu-principal {order: 3;}
    /* Glass del texto */
    .fondo___hero {min-height: 29vh;}
    .ajuste___hero-glass {display: none;}
    .title___hero_index_hidden {display: block;}
    .titulo-overlap {width: 100%;font-size: 2.5rem;margin-bottom: 30px;left: 7%;}

    .button___primary{width: 250px;}

    .ico-empanada {width: 40px;}

    .style___bg_4 {min-height: auto;}
    .ajuste___movil{margin-top: 2rem}
    .espacio___footer {height: 2rem;}
    .buttons___social {text-align: left;}

    .box___style_reviews_1{width: 380px;}

    .swiper-button-prev { left: -10px !important; }
    .swiper-button-next { right: -10px !important; }

    .box___style_messager{margin-left: 0rem; border-radius: 12px !important;}
    .box___style_messager p{margin-left: 0 !important;}

    

    .menu___footer a{font-size: 18px !important;}

    /* CORPORATIVO */
    .fondo___img_1{background-position: left !important;}
    .ajuste___card_team{ position: relative !important;top: 2% !important;}
    .style___bg_1{padding: 2rem !important;}

    .contenedor-derecha_img{
        width: 5% !important;
        display: block; /* Necesario para que el margen funcione */
        margin-left: -2rem; /* Empuja desde la izquierda hasta el tope derecho */
        margin-right: 40rem;
    }

    .h-490, .h-600 {
        margin-bottom: 20px;
        border-radius: 30px;
    }
    .linea-decorativa-eventos {
        display: none;
    }

    .img___hero_gallery{display: none !important;}
    .parent-container_2 {height: 200px;}















    .fondo___img_2{background-size: 500px !important;
    height: 500px !important;}



    



}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1400px;
    }
}



/* PANTALLAS DE 13" */
@media (min-width: 1400px) { 

    /* Glass del texto */
    .hero-glass_1 {
        position: absolute;
        margin-top: -15%;
        left: -15%;
        z-index: 3;
        width: 90%;
    }
    .fit___img_dish_1 img{
        margin-left: -3.5rem;
    }
    .fit___img_dish_2 img{
        margin-right: -3.5rem;
    }
    .ico-empanada {width: 40px;}
        



    /* MIRAMOS AL FUTURO SIN PERDER LO NUESTRO */
    .fondo___img_1{
        height: 1000px !important;
    }

    .ajuste___card_2{
        padding: 2.5rem 0rem !important;
    }

    .ajuste___card_team{
        position: relative !important;
        top: 41% !important;
    }


    .contenedor-derecha_img{margin-right: 0;}

    .empanada_1{top: 7%; left: 2%;}
    .empanada_2{top: 17%;left: -10%;}
    .empanada_3{top: 0%;left: -20%;}
    .empanada_4{top: 18%;left: -35%;}
    .empanada_5{top: 4%;left: -50%;}
    .empanada_6{top: 2%; left: -56%;}










}




/* PANTALLAS MUY GRANDES */
@media (max-width: 2900px) and (min-width: 1513px){
    .img___visible_xl_1{display: none;}
    .img___visible_xxl_1{display: block;}
    .img___visible_xl_2{display: none;}
    .img___visible_xxl_2{display: block;}

}












/* =======================================================
   REFIX RESPONSIVE (PANTALLAS < 1200px)
   ======================================================= */

@media (max-width: 1250px) {
    /* 1. Bloqueo total de scroll lateral en el contenedor padre */
    .resenas-google {
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. El wrapper ahora debe tener padding para que las flechas no toquen el texto */
    .reviews-wrapper {
        padding: 0 60px !important; /* Creamos un pasillo para las flechas */
        overflow: hidden;
    }

    /* 3. Ajustamos el Swiper para que se mantenga dentro de ese pasillo */
    .resenas-slider {
        overflow: hidden !important; /* Cortamos el efecto pro aquí para evitar el scroll */
        max-width: 100%;
        margin: 0 auto;
    }

    /* 4. Reposicionamos las flechas dentro del pasillo de 60px */
    .custom-nav {
        width: 40px !important;
        height: 40px !important;
    }

    .swiper-button-prev { 
        left: 10px !important; 
    }
    
    .swiper-button-next { 
        right: 10px !important; 
    }

    /* 5. Ajuste de tarjetas para que el texto no se vea apretado */
    .card-resena {
        padding: 25px !important;
    }
}

/* AJUSTE PARA MÓVILES (< 768px) */
@media (max-width: 768px) {
    .reviews-wrapper {
        padding: 0 15px !important; /* Menos espacio lateral en móvil */
    }

    /* Ocultamos flechas en móvil para ganar espacio, el usuario usará el dedo */
    .custom-nav {
        display: none !important;
    }

    .resenas-slider {
        overflow: visible !important; /* En móvil sí podemos dejarlo visible porque el ancho es menor */
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .google-rating-cta {
        padding: 20px;
        text-align: center;
    }
    
    .google-rating-cta .d-flex {
        justify-content: center;
    }

    .rating-text {
        font-size: 1.2rem;
    }
    
    .btn-write-review {
        width: 100%;
    }
}



/* --- LIMPIEZA PARA MÓVIL --- */
@media (max-width: 1200px) {
    /* En pantallas pequeñas quitamos el zigzag para que no queden huecos blancos gigantes */
    .galeria-eventos-zigzag > div:nth-child(even) {
        margin-top: 0;
    }
}


/* En pantallas pequeñas, metemos las flechas un poco */
@media (max-width: 1400px) {
    .slider-galeria-wrap .swiper-button-next { right: 10px; }
    .slider-galeria-wrap .swiper-button-prev { left: 10px; }
}




/* --- Responsive galeria--- */
@media (max-width: 992px) { .masonry-grid { column-count: 2; } }
@media (max-width: 576px) { .masonry-grid { column-count: 1; } }