/* ===================================
   GENERAL SYSTEM
=================================== */
body {
    padding-top: 80px;
    color: var(--color-gris-oscuro);
    font: var(--type-body);
}
.container {
    padding: 0 !important;
}
.container-main {
    padding-left: 30px !important;
    padding-right: 30px !important;
}
.separator {
    height: 10rem;
}
.separator_2 {
    height: 7rem;
}
.separator_3 {
    height: 15rem;
}


/* ===================================
   TYPOGRAPHY SYSTEM
=================================== */
h1 {
    font: var(--type-h1);
}
h2 {
    font: var(--type-h2);
}
h3 {
    font: var(--type-h3);
}
h4 {
    font: var(--type-h4);
}

.font-subtitles {
    font: var(--type-subtitle);
}
.font-subtitles-bold {
    font: var(--type-subtitle-bold);
}
.font-body {
    font: var(--type-body);
}
.font-body-bold {
    font: var(--type-body-bold);
}
.font-small-1 {
    font: var(--type-body-small-1);
}
.font-small-1-bold {
    font: var(--type-body-small-1-bold);
}
.font-small-2 {
    font: var(--type-body-small-2);
}
.font-small-2-bold {
    font: var(--type-body-small-2-bold);
}





/* ===================================
  INDEX
=================================== */

/* ===================================
   NAV MENU BAR
=================================== */
.container-grid_1 {
    width: min(100%, 1340px);
    margin: 0 auto;
}

/* Estado inicial */
.main-header_1 {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    /* Glass Light */
    background: rgba(255, 255, 255, 0.55);
    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;
}

/* Wrapper */
.nav-wrapper_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 85px;
    padding: 0 20px;
}

/* Scroll activo */
.main-header_1.scrolled {
    top: 5px;
    width: calc(100% - 80px);
    max-width: 1400px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Menú */
.nav-menu_1 {
    display: flex;
    gap: 20px;
}
.nav-menu_1 a {
    position: relative;
    color: var(--color-gris-oscuro);
    font: var(--type-menu);
    font-weight: 500;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.3s ease;
}

/* Hover */
.nav-menu_1 a:hover {
    color: var(--color-naranja-intenso);
}
.nav-menu_1 a::after {
    left: 50%;
    transform: translateX(-50%);
}
.nav-menu_1 a:hover::after,
.nav-menu_1 a.active::after {
    width: 100%;
}

/* Texto visual en peso normal */
.nav-menu_1 a span {
    font-weight: 400;
    transition: 0.3s ease;
}

/* Cuando está activo */
.nav-menu_1 a.active span {
    font-weight: 700;
}

/* Search */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}
.search-input {
    width: 0;
    padding: 1px 0;
    border: none;
    border-radius: 30px;
    outline: none;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    transition: width 0.4s ease, padding 0.3s ease;
    opacity: 0;
}
.search-container.active .search-input {
    width: 160px;
    padding: 10px 10px;
    opacity: 1;
    font: var(--type-menu)
}
.search-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: 0.3s ease;
}
.search-toggle:hover {
    background: var(--color-naranja-intenso);
    i {
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(104%) contrast(104%);
    }
}


/* Ocultar botón en PC (pantallas grandes) */
.menu-toggle {
    display: none;
    font-size: 30px;
    background: var(--color-naranja-intenso, #f39c12);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1100;
}
.menu-toggle i {
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}
.menu-toggle i.bi-x-lg {
    transform: rotate(90deg);
}


/* ===================================
   HERO BASE
=================================== */
.fondo___hero {
    position: relative;
    width: 100%;
    max-height: 100% !important;
    min-height: 73vh; /* ocupa casi toda la pantalla */
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url('../img/banners/hero_home.webp');
    background-size: 100%;
    background-repeat: no-repeat;
}
/* Contenido */
.hero-content_1 {
    position: relative;
    z-index: 2;
}
/* Glass del texto */
.hero-glass_1 {
    position: absolute;
    margin-top: -20%;
    left: -10%;
    z-index: 3;
    width: 90%;
    padding: 0.5rem 2rem 0.5rem 14rem;

    background: rgba(217, 217, 217, 0.20);
    box-shadow: 0 15px 20px 2px rgba(0, 0, 0, 0.35);

    border-radius: 150px;
    border: 1px solid rgba(255,255,255,0.3);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Título */
.hero-glass_1 h1 {
    color: var(--color-amarillo-crema);
    margin: 0;
}
/* Subtítulo */
.hero-glass_1 p {
    font: var(--type-subtitle);
    color: var(--color-amarillo-crema);
    margin: 0;
}
.style__r{
    font-size: 64px;
    font-family: var(--font-primary);
}
.litles_hidden{
    display: none;
}

.title___hero_index_hidden {display: none;}

/* ===================================
   SECTION ABOUT
=================================== */
.box___style_about{
    background-color: var(--color-azul-pastel);
    width: 100%;
    border-radius: 20px;
}
/* Button primary */
.button___primary{
    background-color: var(--color-Azul-oscuro);
    width: 219px;
    height: 54px;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    color: #fff;
    text-decoration: none;
    font: var(--type-buttom);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
}
.button___primary::before{
    content: "";
    position: absolute;
    top: 0;
    left: -105%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.2);
    transform: skewX(-25deg);
    transition: .6s;
}
.button___primary:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,.30);
    
}
.button___primary:hover::before{
    left: 120%;
}
.button___primary:active{
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
}
.fit___button_primary{
    width: 70%;
}
/* Button secondary */
.button___secondary{
    background-color: var(--color-naranja-vivo);
    width: 350px;
    height: 54px;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    color: #fff;
    text-decoration: none;
    font: var(--type-buttom);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
}
.button___secondary::before{
    content: "";
    position: absolute;
    top: 0;
    left: -105%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.2);
    transform: skewX(-25deg);
    transition: .6s;
}
.button___secondary:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,.30);
}
.button___secondary:hover::before{
    left: 120%;
}
.button___secondary:active{
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
}


/* ===================================
   SECTION SERVICE
=================================== */
/* RESTAUTANTE */
.fit___img_dish_1 img{
    width: 739px !important;
    height: auto;
    object-fit: cover;
    margin-left: -1.9rem;
}
.img-shadow {
    transition: transform .6s cubic-bezier(0.22,1,0.36,1),
                filter .6s cubic-bezier(0.22,1,0.36,1);
}
.img___visible_xxl_1 {
    display: none;
}

/* EMPANADAS */
.fit___img_dish_2 img{
    width: 739px !important;
    height: auto;
    object-fit: cover;
    margin-right: -1.9rem;
}
.ajustes___movil_linea {
    display: flex !important;
    flex-wrap: nowrap; /* Evita que se bajen a la siguiente línea en móvil */
    justify-content: space-around; /* Reparte el espacio de forma equitativa */
}
.box___style_empanadas {
    display: flex;
    flex-direction: row; /* Icono al lado del texto */
    align-items: center;
    justify-content: center; /* Centra el conjunto icono+texto dentro de su columna */
    gap: 8px; /* Espacio exacto entre icono y texto */
    padding: 5px;
}
.ico-empanada {
    width: 25px; /* Tamaño fijo para que no bailen */
    height: auto;
    flex-shrink: 0; /* Evita que el icono se aplaste si el texto es largo */
}
.img___visible_xxl_2 {
    display: none;
}

/* EVENTOS */
.fit___img_dish_3 img{
    width: 739px !important;
    height: auto;
    object-fit: cover;
}

/* ===================================
   SECTION REVIEWS
=================================== */
/* Contenedor del CTA */
.google-rating-cta {
    background-color: #f1f3f4; /* Un gris muy claro/blanco azulado */
    padding: 2rem !important;
    border-radius: 30px; /* Consistencia con tus tarjetas */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0,0,0,0.05);
}
.rating-text {
    font-size: 1.5rem;
    color: #5f6368;
    font-weight: 500;
}
.rating-score {
    font-size: 1.1rem;
    color: #202124;
}
.stars-gold {
    color: #fbbc05; /* El color exacto de las estrellas de Google */
    font-size: 1rem;
}
.review-count {
    font-size: 0.85rem;
    color: #70757a;
}

/* Contenedor Principal */
.resenas-google {
    background-color: var(--color-naranja-durazno);
    padding: 6rem 0rem 0rem 0rem !important;
    width: 100%;
    position: relative;
    /* Bloqueo estricto */
    overflow: hidden !important; 
    overflow-x: hidden !important;
}
/* La tarjeta propiamente dicha */
.card-resena {
    background: #ffffff;
    padding: 35px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}
/* Info de Usuario e Iconos de Bootstrap */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
/* --- ESTILO AVATAR GOOGLE --- */
.avatar-google {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.stars {
    color: #ffc107; /* Amarillo Warning de Bootstrap */
    font-size: 0.9rem;
}
/* Contenedor del texto para que mantenga el ritmo visual */
.resena-text {
    flex-grow: 1; /* Hace que el espacio del texto crezca si es necesario */
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 20px;
}
.posted-resena {
    flex-grow: 1; /* Hace que el espacio del texto crezca si es necesario */
    font: var(--type-body-bold);
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 20px;
}
/* Ajuste de los iconos para que no se muevan */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.google-ico {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 1.3rem;
    color: #4285F4;
    opacity: 0.3;
}
/* Asegura que el slider permita que las tarjetas crezcan */
.resenas-slider .swiper-wrapper {
    display: flex; /* Crucial para que funcionen las alturas */
}
.reviews-wrapper {
    position: relative; /* Obligatorio para que las flechas se peguen aquí y no al borde de la web */
    width: 100%;
    margin: 0 auto;
    padding: 0 10px; /* Pequeño respiro lateral */
}
.resenas-slider .swiper-slide {
    height: auto; /* Permite que el slide se adapte a la altura del padre */
    display: flex; /* Para que la tarjeta interna pueda usar height: 100% */
}
.resenas-slider {
    overflow: visible !important; /* Permite que las tarjetas se vean al salir del área */
    padding: 20px 0 60px 0;
    max-width: 1100px; /* O el ancho de tu container de Bootstrap */
    margin: 0 auto;    /* Lo centramos */
    width: 100%;
}
/* Posicionamos los botones para que las tarjetas pasen "por debajo" */
.slider-wrapper .swiper-button-next, 
.slider-wrapper .swiper-button-prev {
    top: 50%;
    width: 50px;
    height: 50px;
    background: var(--color-naranja-intenso); /* Tu naranja */
    color: white !important;
    border-radius: 50%;
    z-index: 100; /* Asegura que estén por encima de las tarjetas */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transform: translateY(-50%);
}
/* Ajuste de las flechas (iconos de Bootstrap no necesarios aquí, Swiper usa los suyos) */
.slider-wrapper .swiper-button-next::after, 
.slider-wrapper .swiper-button-prev::after {
    font-size: 1.2rem;
}

/* Flechas fuera del área de contenido del container */
.swiper-button-prev { left: 30px !important; }
.swiper-button-next { right: 30px !important; }

/* Efecto de opacidad para las tarjetas que no están activas (opcional, se ve muy pro) */
.swiper-slide {
    transition: opacity 0.3s ease;
    opacity: 0.4; /* Las que están a los lados se ven más claras */
}

.swiper-slide-active,
.swiper-slide-next,
.swiper-slide-next + .swiper-slide {
    opacity: 1; /* Las visibles en el centro se ven normales */
}

.box___style_reviews_1{
    background-color: var(--color-naranja-vivo);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 458px;
    height: auto;
    padding: 1.5rem;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}
.box___style_reviews_1 h4{
    color: var(--color-naranja-durazno);
}


/* Forzamos que los slides sean 100% sólidos antes de aplicar la máscara */
.resenas-slider .swiper-slide {
    opacity: 1 !important; 
    filter: none !important;
    transition: transform 0.3s ease;
}

/* Eliminamos cualquier degradado previo que pueda estar en el contenedor padre */
.reviews-wrapper::before,
.reviews-wrapper::after {
    display: none !important;
}

.resenas-slider {
    overflow: visible !important;
    
    /* Máscara equilibrada: 
       - Empieza transparente
       - En el 15% ya es sólido (puedes bajarlo a 5% si quieres que se vea más tarjeta)
       - Se mantiene sólido hasta el 85%
       - Termina transparente
    */
    -webkit-mask-image: linear-gradient(
        to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,1) 15%, 
        rgba(0,0,0,1) 85%, 
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,1) 15%, 
        rgba(0,0,0,1) 85%, 
        rgba(0,0,0,0) 100%
    );
}

/* ===================================
   SECTION MAPS
=================================== */
.box___style_messager{
    background-color: var(--Fondo-de-texto-o-tarjetas-1);
    padding: 1rem 1rem 1rem 1rem;
    position: relative;
    margin-left: -7rem;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.box___style_messager p{
    margin-left: 18rem;
}
.color___h2{
    color: var(--Fondo-o-titulo-1);
}

/* ===================================
   FOOTER
=================================== */
.box___style_footer{
    background-color: var(--color-azul-pastel);
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -10px 30px 0 rgba(0, 0, 0, 0.20);
    padding: 6rem 2.5rem 8rem 2.5rem !important;
}
.box___style_footer img{
    width: 11.75rem;
    height: 4.6875rem;
    aspect-ratio: 188/75;
    margin: 0 auto;
}
/* COLOR TEXT FOOTER */
.color___titles{
    color: var(--color-azul-marino-verdoso);
}
/* MENU FOOTER */
.menu___footer a{
    display: block;
    color: var(--color-azul-marino-verdoso);
    text-decoration: none;
    font: var(--type-body-small-1);
}
.menu___footer a:hover{
    color: var(--color-naranja-intenso);
}
/* NEWSLETTER */
.newsletter___fit {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.newsletter {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.newsletter__group {
    display: flex;
    flex-direction: column;
}
/* INPUT */
.newsletter__input {
    width: 260px;
    height: 40px;
    padding: 0 10px;
    font-size: 28px;
    border: 2px solid var(--color-naranja-intenso) !important;
    border-radius: 0.375rem;
    color: var(--color-azul-marino-verdoso);;
    outline: none;
    transition: all .3s ease;
    font: var(--type-body-small-2);
    background-color: var(--color-azul-pastel);
}
/* Placeholder */
.newsletter__input::placeholder {
    color: var(--color-azul-marino-verdoso);
    opacity: .7;
}
/* Focus */
.newsletter__input:focus {
    box-shadow: 0 0 0 6px rgba(226, 87, 37, 0.2);
}
/* Estados */
.newsletter__input.error {
    color: var(--color-naranja-intenso);
}
.newsletter__input.success {
    color: var(--color-azul-marino-verdoso) !important; 
}
/* Mensaje error */
.newsletter__error {
    margin-top: 8px;
    font-size: 14px;
    color: var(--color-naranja-intenso);
    min-height: 18px;
}
/* BOTÓN */
.newsletter__btn {
    height: 40px;
    padding: 0 30px;
    font: var(--type-menu);
    border-radius: 0.375rem;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--color-naranja-intenso) !important;
    color: white;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
}
/* Hover */
.newsletter__btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 35px rgba(0,0,0,.2);
}
/* ESPACIO */
.espacio___footer {
    height: 8rem;
}
/* LINEA SEPARADORA */
.linea___separadora{
    border: 1px solid var(--color-naranja-intenso);
}
/* WEB DESIGN */
.delgaraje{
    color: var(--color-azul-marino-verdoso);
    text-decoration: none;
}
.delgaraje:hover{
    color: var(--color-naranja-intenso) !important;
}
/* LOGIN ADMIN */
.bi-person{
    color: var(--color-azul-marino-verdoso);
}
.bi-person:hover{
    color: var(--color-naranja-intenso) !important;
}
/* ICONOS SOCIALES */
.buttons___social {
    text-align: right;
}
.buttons___social i{
    width: 2.5rem !important;
    margin: 0;
    padding: 0.1rem;
    text-align: right;
    color: var(--color-azul-marino-verdoso);
}
.buttons___social i:hover{
    color: var(--color-naranja-intenso) !important;
}


/* ===================================
   BOTON WHATSAPP
=================================== */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
    opacity: 0.8; 
    /* cubic-bezier da ese efecto de "rebote" elástico */
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
    animation: expansionAutomatica 10s infinite;
}

/* El efecto de ondas detrás del botón */
.pulso-ondas {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #25d366;
    border-radius: 50%;
    z-index: -1;
    animation: ondasSonar 3s infinite;
}

/* Icono siempre centrado */
.whatsapp-btn i {
    font-size: 32px;
    position: absolute;
    right: 14px; /* Lo anclamos a la derecha para que no se mueva al estirar */
}

.cta-whatsapp {
    font-size: 15px;
    font-weight: 700;
    margin-right: 45px; /* Deja espacio para el icono */
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s ease;
}

/* --- ANIMACIONES PRO --- */

@keyframes expansionAutomatica {
    0%, 80%, 100% { width: 60px; opacity: 0.8; }
    85%, 95% { 
        width: 180px; 
        opacity: 1; 
        border-radius: 50px;
    }
}

@keyframes ondasSonar {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Control del texto durante la animación automática */
.whatsapp-btn {
    animation: expansionAutomatica 10s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Mostramos el texto cuando el botón se estira solo */
@keyframes aparecerTexto {
    0%, 80%, 100% { opacity: 0; transform: translateX(20px); }
    85%, 95% { opacity: 1; transform: translateX(0); }
}

.cta-whatsapp {
    animation: aparecerTexto 10s infinite;
}

/* Hover: Se queda fijo y sólido */
.whatsapp-btn:hover {
    width: 180px;
    opacity: 1;
    border-radius: 50px;
    animation-play-state: paused; /* Congela la animación al tocarlo */
    background-color: #20ba5a;
    transform: scale(1.1); /* Crece un poquito sin molestar */
    color: #fff;
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3); /* Brillo verde sutil */
}

.whatsapp-btn:hover .cta-whatsapp {
    opacity: 1;
    transform: translateX(0);
    animation-play-state: paused;
    max-width: 150px; /* El texto se desliza hacia afuera */
}




/* ===================================
  CORPORATIVO
=================================== */

/* ===================================
  HERO
=================================== */
.color___titles_h1{
    color: var(--fondo-o-titulo-2);
}
/* Posiciones individuales usando porcentajes */
.img___style_1 {
    position: absolute;
    top: 40%;
    right: 5%;
    z-index: 3;
    animation: floatPro 5s ease-in-out infinite alternate;
}
.img___style_2 {
    position: absolute;
    top: 60%;
    right: 24%;
    z-index: 2;
    animation: softDrift 8s ease-in-out infinite;
    animation-delay: 1s;
}
.img___style_3 {
    position: absolute;
    top: 70%;
    right: 8%;
    z-index: 1;
    animation: floatPro 6s ease-in-out infinite alternate-reverse;
    animation-delay: 0.5s;
}
/* 1. El Movimiento "Glass-Floating" (Efecto Parallax sutil) */
@keyframes floatPro {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0px);
    filter: blur(0) drop-shadow(0 15px 20px rgba(0,0,0,.25));
  }
  100% {
    transform: translateY(-25px) scale(1.02);
    filter: brightness(1.05) blur(0.5px);
    filter: blur(0) drop-shadow(0 25px 40px rgba(0,0,0,.25));
  }
}
/* 2. "Soft Drift" (Deriva Suave) */
@keyframes softDrift {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(10px, -15px) rotate(1deg); }
  66% { transform: translate(-5px, -20px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* 3. "Magnetic Pulse" (Pulso Magnético) */
@keyframes magneticPulse {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.03) translate(-10px, -10px); }
}

/* =====================================
    COCINAMOS PARA REUNIR
======================================== */
.style___bg_1{
    width: 100%;
    padding: 10rem 0 !important;
    border-radius: 1.25rem;
    border: none;
    /* Creamos el borde personalizado */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23EE5007' stroke-width='6' stroke-dasharray='30%2c 15' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 20px; /* Asegúrate que coincida con rx y ry del SVG */
}

.style___bg_services{
    background-color: var(--Fondo-de-texto-o-tarjetas-1);
    padding: 0.5rem !important;
}
.style___bg_services p{
    color: var(--fondo-o-titulo-2);
}

/* =====================================
    MAS QUE COMIDAD IDENTIDAD
======================================== */
.style___bg_2{
    background-color: var(--color-gris-oscuro);
    padding: 10rem 40px !important;
    position: relative;
    /* Bloqueo estricto */
    overflow: hidden !important; 
    overflow-x: hidden !important;
}
.color___yellow{
    color: var(--Detalles---iconos---resaltados-1);
}
.color___titles_h1_1{
    color: var(--Detalles---iconos---resaltados-1);
}
.color___white{
    color: var(--bg-title-all);
}
.style___bg_3{
    background-color: var(--Fondo-de-texto-o-tarjetas-2);
    padding: 1rem 1.5rem !important;
    text-align: center;
    border-radius: 6px;
}
.style___bg_3 p{
    color: var(--Fondo-o-titulo-1);
    font: var(--type-body-bold);
}

/* =====================================
    MIRAMOS AL FUTURO SIN PERDER LO NUESTRO
======================================== */
.fondo___img_1{
    background-image: url(../img/content/fondo_vision.png) !important;
    background-size: 1212px;
    background-position: center;
    background-repeat: no-repeat;
    height: 990px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================
    LO QUE NOS DEFINE
======================================== */
.card_2{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 10px !important;
  background-color: var(--color-rosa-calido);
  border: none;
}
.card-img-top_2{
  width: 150px;
}
.card-body_2{
  padding: 2rem 1.5rem;
  color: var(--color-gris-oscuro);
}
.card-body_2 h3{
  color: var(--color-gris-oscuro);
}
.card-body_2 p{
  font: var(--type-body);
}

/* =====================================
    PERSONAS QUE CREEN EN LO QUE HACEN
======================================== */
.style___bg_4{
    background-color: var(--color-amarillo-calido);
    padding: 5rem 0!important;
    min-height: 80vh;
    z-index: 1;
}
/* ESTILO DEL H1 QUE SE SALE */
.titulo-overlap {
    position: relative;
    z-index: 10;
    width: 180%; /* Esto hace que el texto se estire hacia la derecha fuera del div */
    left: 20%;
}
/* TARJETAS CON EL CÍRCULO SALIDO */
.team-card {
    background-color: var(--color-amarillo-pastel);
    border-radius: 15px;
    padding: 2.5rem 1.5rem 1rem 1.5rem;
    position: relative;
    margin-bottom: 1rem; /* Espacio para el círculo */
    margin-inline: 0rem;
}
.ajuste___card_team{
    position: relative;
    top: 41%;
}
.avatar-circle {
    width: 100px;
    height: 100px;
    background-color: #D9D9D9;
    border-radius: 50%;
    position: absolute;
    top: -30px; /* Mitad afuera */
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid white;
}

/* =====================================
    CONFIAMOS EN LO LOCAL 
======================================== */
.color___titles_h1_2{
    color: var(--Fondo-o-titulo-1);
}
/* Contenedor del Slider */
.logos-slider-section {
    background-color: var(--bg-title-all); /* O el color de fondo de tu diseño */
}
/* Estilo de los Logos */
.logo-img {
    max-width: 220px;
    height: auto;
    filter: grayscale(100%); /* Opcional: logos en gris */
    opacity: 0.6;
    transition: all 0.3s ease;
}
.logo-img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.myLogosSlider .swiper-wrapper {
    /* Esto quita el efecto de "frenado" de Swiper y lo hace constante */
    transition-timing-function: linear !important;
}
.myLogosSlider {
    /* efecto pro */
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* =====================================
    CONVERSEMOS 
======================================== */
.style___bg_5{
    border-top: 2px solid var(--color-naranja-intenso);
    border-bottom: 2px solid var(--color-naranja-intenso);
    padding: 10rem 0 !important;
}
.color___titles_h1_3{
    color: var(--color-naranja-intenso);
}





/* ===================================
  EMPANADAS
=================================== */

/* ===================================
  HERO
=================================== */
.fondo___img_2{
    background-image: url(../img/content/ellipse_hero_empanadas.svg) !important;
    background-size: 450px;
    height: 910px;
    background-repeat: no-repeat;
    padding: 2rem !important;
}
.contenedor-derecha_img{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-top: -7% !important;
}
.linea___separadora_1{
    border-radius: 30px;
    width: 90%;
    border: 10px solid var(--color-azul-cielo-apagado);
    position: relative;
    z-index: 3 !important;
    top: -2% !important;
    left: 7.4%;
    filter: blur(0px) drop-shadow(0 -5px 3px rgba(0,0,0,.25)) !important;
}
.empanada_1{
    position: relative;
    top: 7%;
    left: 2%;
    z-index: 1;
}
.empanada_2{
    position: relative;
    top: 17%;
    left: -20%;
    z-index: 2;
    filter: blur(0px) drop-shadow(0 -20px 20px rgba(0,0,0,.25)) !important;
}
.empanada_3{
    position: relative;
    top: 0%;
    left: -30%;
    z-index: 1;
}
.empanada_4{
    position: relative;
    top: 18%;
    left: -49%;
    z-index: 2;
    filter: blur(0px) drop-shadow(0 -15px 20px rgba(0,0,0,.30)) !important;
}
.empanada_5{
    position: relative;
    top: 4%;
    left: -60%;
    z-index: 1;
}
.empanada_6{
    position: relative;
    top: 2%;
    left: -75%;
    z-index: 2;
    filter: blur(0px) drop-shadow(0 -20px 20px rgba(0,0,0,.25)) !important;
}

.contenedor-derecha_text{
    display: block; /* Necesario para que el margen funcione */
    margin-left: auto; /* Empuja desde la izquierda hasta el tope derecho */
    margin-right: 0;
}












/* Contenedor que rompe los límites */
.parent-container_empanadas {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.parent-container_empanadas img {
    width: 450px !important;
    height: 910px !important;
}

/* El Overlay ahora posiciona el texto abajo */
.img-overlay_empanadas {
    position: absolute;
    /* Esto estira el overlay a los 4 bordes exactos */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}












/* ===================================
   NO ES SOLO UNA EMPANADA
=================================== */
.card{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 20px !important;
  background-color: var(--Fondo-de-texto-o-tarjetas-1);
  border: none !important;
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
.card-img-top{
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}
.card-body{
  padding: 3rem 2.5rem 4rem 2.5rem !important;
  color: var(--color-gris-oscuro) !important;
}
.card-body h3{
  color: var(--fondo-o-titulo-2) !important;
}

/* ===================================
   SABORES DE EMPANADAS
=================================== */
/* EMPANADA DE CARNE */
.style___bg_empanada_carne {
    position: relative; /* Necesario para el fondo absoluto */
    overflow: hidden;    /* Corta el zoom de la imagen */
    height: 350px;
    padding: 3rem !important;
    margin-bottom: 2rem !important;
    display: flex;
    align-items: center;
    background-color: #000; /* Fondo base negro por si falla la imagen */
}
/* LA IMAGEN DE FONDO (Separada para el Zoom) */
.style___bg_empanada_carne::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/content/sabores_empanada_carne.png');
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); /* Zoom ultra suave */
    z-index: 1;
}
/* EL DEGRADADO PROTECTOR (Para que el texto se lea perfecto) */
.style___bg_empanada_carne::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado de negro a transparente de izquierda a derecha */
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 2;
}
/* EL CONTENIDO (Encima de todo) */
.content-wrapper {
    position: relative;
    z-index: 3; /* Por encima de la imagen y el degradado */
}
/* EFECTO HOVER */
.style___bg_empanada_carne:hover::before {
    transform: scale(1.1); /* Zoom elegante */
}
/* Sombra de texto para mayor nitidez */
.style___bg_empanada_carne h2 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}


/* EMPANADA DE POLLO */
.style___bg_empanada_pollo {
    position: relative; /* Necesario para el fondo absoluto */
    overflow: hidden;    /* Corta el zoom de la imagen */
    height: 350px;
    padding: 3rem !important;
    margin-bottom: 2rem !important;
    display: flex;
    align-items: center;
    background-color: #000; /* Fondo base negro por si falla la imagen */
}
/* LA IMAGEN DE FONDO */
.style___bg_empanada_pollo::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/content/sabores_empanada_pollo.png');
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); /* Zoom ultra suave */
    z-index: 1;
}
/* EL DEGRADADO PROTECTOR (Para que el texto se lea perfecto) */
.style___bg_empanada_pollo::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado de negro a transparente de izquierda a derecha */
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 2;
}
/* EFECTO HOVER */
.style___bg_empanada_pollo:hover::before {
    transform: scale(1.1); /* Zoom elegante */
}
/* Sombra de texto para mayor nitidez */
.style___bg_empanada_pollo h2 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}



/* EMPANADA DE CERDO PARRILLA */
.style___bg_empanada_cerdo {
    position: relative; /* Necesario para el fondo absoluto */
    overflow: hidden;    /* Corta el zoom de la imagen */
    height: 350px;
    padding: 3rem !important;
    margin-bottom: 2rem !important;
    display: flex;
    align-items: center;
    background-color: #000; /* Fondo base negro por si falla la imagen */
}
/* LA IMAGEN DE FONDO (Separada para el Zoom) */
.style___bg_empanada_cerdo::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/content/sabores_empanada_cerdo.png');
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); /* Zoom ultra suave */
    z-index: 1;
}
/* EL DEGRADADO PROTECTOR (Para que el texto se lea perfecto) */
.style___bg_empanada_cerdo::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado de negro a transparente de izquierda a derecha */
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 2;
}
/* EFECTO HOVER */
.style___bg_empanada_cerdo:hover::before {
    transform: scale(1.1); /* Zoom elegante */
}
/* Sombra de texto para mayor nitidez */
.style___bg_empanada_cerdo h2 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}


/* EMPANADA DE EMPANADOTA */
.style___bg_empanada_empanadota {
    position: relative; /* Necesario para el fondo absoluto */
    overflow: hidden;    /* Corta el zoom de la imagen */
    height: 350px;
    padding: 3rem !important;
    margin-bottom: 2rem !important;
    display: flex;
    align-items: center;
    background-color: #000; /* Fondo base negro por si falla la imagen */
}
/* LA IMAGEN DE FONDO (Separada para el Zoom) */
.style___bg_empanada_empanadota::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/content/sabores_empanada_empanadota.png');
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); /* Zoom ultra suave */
    z-index: 1;
}
/* EL DEGRADADO PROTECTOR (Para que el texto se lea perfecto) */
.style___bg_empanada_empanadota::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado de negro a transparente de izquierda a derecha */
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 2;
}
/* EFECTO HOVER */
.style___bg_empanada_empanadota:hover::before {
    transform: scale(1.1); /* Zoom elegante */
}
/* Sombra de texto para mayor nitidez */
.style___bg_empanada_lechona h2 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}
.subtitles-empanadota{font: var(--type-body)}



/* EMPANADA DE LECHONA */
.style___bg_empanada_lechona {
    position: relative; /* Necesario para el fondo absoluto */
    overflow: hidden;    /* Corta el zoom de la imagen */
    height: 350px;
    padding: 3rem !important;
    margin-bottom: 2rem !important;
    display: flex;
    align-items: center;
    background-color: #000; /* Fondo base negro por si falla la imagen */
}
/* LA IMAGEN DE FONDO (Separada para el Zoom) */
.style___bg_empanada_lechona::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/content/sabores_empanada_lechona.png');
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); /* Zoom ultra suave */
    z-index: 1;
}
/* EL DEGRADADO PROTECTOR (Para que el texto se lea perfecto) */
.style___bg_empanada_lechona::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado de negro a transparente de izquierda a derecha */
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 2;
}
/* EFECTO HOVER */
.style___bg_empanada_lechona:hover::before {
    transform: scale(1.1); /* Zoom elegante */
}
/* Sombra de texto para mayor nitidez */
.style___bg_empanada_lechona h2 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}


/* EMPANADA DE JUAN VALERIO */
.style___bg_empanada_juanvalerio {
    position: relative; /* Necesario para el fondo absoluto */
    overflow: hidden;    /* Corta el zoom de la imagen */
    height: 350px;
    padding: 3rem !important;
    margin-bottom: 2rem !important;
    display: flex;
    align-items: center;
    background-color: #000; /* Fondo base negro por si falla la imagen */
}
/* LA IMAGEN DE FONDO (Separada para el Zoom) */
.style___bg_empanada_juanvalerio::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/content/sabores_empanada_juanvalerio.png');
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); /* Zoom ultra suave */
    z-index: 1;
}
/* EL DEGRADADO PROTECTOR (Para que el texto se lea perfecto) */
.style___bg_empanada_juanvalerio::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado de negro a transparente de izquierda a derecha */
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 2;
}
/* EFECTO HOVER */
.style___bg_empanada_juanvalerio:hover::before {
    transform: scale(1.1); /* Zoom elegante */
}
/* Sombra de texto para mayor nitidez */
.style___bg_empanada_juanvalerio h2 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}


/* ===================================
   ACCION CLARA
=================================== */
.style___bg_6{
    background-color: var(--Fondo-de-texto-o-tarjetas-1);
    padding: 3rem;
    box-shadow: 0 10px 30px 3px rgba(0, 0, 0, 0.25);
}






/* ===================================
  EVENTOS
=================================== */

/* ===================================
  HERO
=================================== */
/* Contenedor de la tarjeta */
.card-evento {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* Empuja el contenido al fondo */
    transition: transform 0.3s ease;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.card-evento:hover {
    transform: translateY(-15px) scale(1.02);
    filter: brightness(1.05) blur(0.5px);
    filter: blur(0) drop-shadow(0 -1px 3px 0 rgba(0,0,0,.25));
}
/* La línea naranja gruesa */
.linea-decorativa-eventos {
    width: 100%;
    height: 8px; /* Grosor de la línea */
    background-color: var(--color-naranja-intenso);
    /* MAGIA PARA ROMPER EL CONTENEDOR */
    width: 100vw; /* 100% del ancho de la ventana */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
/* Imagen que cubre toda la tarjeta */
.img-evento {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
/* El bloque de texto */
.info-evento {
    position: relative;
    z-index: 2;
    color: var(--bg-title-all);
}
/* Ajuste específico para el texto */
.top-aligned {
    position: relative;
    z-index: 2;
    padding: 0px 25px;
    width: 100%;
    
    /* ESTA ES LA CLAVE: */
    /* Ajusta este valor según el texto más largo que tengas */
    min-height: 140px; 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinea el contenido interno (H4) arriba de este bloque */
}
.info-evento p {
    font: var(--type-body-small-2);
}
/* Alturas personalizadas para el efecto zigzag */
.h-490 { height: 490px; }
.h-600 { height: 600px; }

/* ===================================
  UN EQUIPO QUE SABE ATENDER
=================================== */
/* Solo afecta a los hijos directos de nuestra clase nueva */
.galeria-eventos-zigzag > div:nth-child(even) {
    /* Empujamos las fotos 2 y 4 hacia abajo */
    margin-top: 100px; 
}

/* Opcional: Empujamos las fotos 1 y 3 un poco hacia arriba si queremos más drama */
.galeria-eventos-zigzag > div:nth-child(odd) {
    margin-top: 0px;
}
/* Estilizamos las imágenes dentro de este contenedor específico */
.galeria-eventos-zigzag img {
    border-radius: 35px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
    display: block;
}
.galeria-eventos-zigzag img:hover {
    transform: scale(1.05) translateY(-5px);
}

/* ===================================
  EVENTOS REALES RESULTADOS REALES
=================================== */
.slider-galeria-wrap {
    position: relative;
    padding: 20px 0 60px;
}
.mySwiperGaleria .swiper-slide {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    /* Las fotos que no están activas se ven un poco más pequeñas y opacas */
    transform: scale(0.85);
    opacity: 0.5;
}
.mySwiperGaleria .swiper-slide-active {
    /* La foto central se ve al 100% */
    transform: scale(1);
    opacity: 1;
}
.mySwiperGaleria img {
    width: 100%;
    max-width: 800px; /* Tamaño máximo de la foto central */
    height: 500px;    /* Altura fija para que todas se vean iguales */
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
/* Flechas Naranjas (como tu captura) */
.slider-galeria-wrap .swiper-button-next,
.slider-galeria-wrap .swiper-button-prev {
    color: #EE5007; 
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.slider-galeria-wrap .swiper-button-next::after,
.slider-galeria-wrap .swiper-button-prev::after {
    font-size: 20px;
}
/* Dots / Rayitas de navegación */
.mySwiperGaleria .swiper-pagination-bullet {
    background: #EE5007;
    width: 15px;
    height: 4px;
    border-radius: 2px;
    opacity: 0.3;
}
.mySwiperGaleria .swiper-pagination-bullet-active {
    width: 35px; /* La activa es más larga */
    opacity: 1;
}
/* Las fotos de los lados se ven un poco borrosas para resaltar la central */
.mySwiperGaleria .swiper-slide:not(.swiper-slide-active) img {
    filter: blur(2px) grayscale(30%);
    transition: filter 0.5s ease;
}
.mySwiperGaleria .swiper-slide-active img {
    filter: blur(0) grayscale(0);
}
/* El Box para las rayitas */
.controls-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(238, 80, 7, 0.05); /* Un naranja muy tenue de fondo */
    padding: 10px 30px;
    border-radius: 50px;
    border: 1px solid rgba(238, 80, 7, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
/* Estilo de las rayitas (Pagination) */
.custom-pagination.swiper-pagination-bullets {
    position: static !important; /* Quita el posicionamiento absoluto de Swiper */
    display: flex;
    gap: 8px;
}
.custom-pagination .swiper-pagination-bullet {
    background: #EE5007 !important;
    width: 20px;
    height: 6px;
    border-radius: 4px;
    opacity: 0.2;
    margin: 0 !important;
    transition: all 0.3s ease;
}
.custom-pagination .swiper-pagination-bullet-active {
    width: 50px; /* Rayita activa mucho más larga */
    opacity: 1;
    box-shadow: 0 0 10px rgba(238, 80, 7, 0.4);
}

/* Ajuste de las flechas para que no tapen las fotos */
.slider-galeria-wrap .swiper-button-next { right: -60px; }
.slider-galeria-wrap .swiper-button-prev { left: -60px; }

/* ===================================
  LOS QUE DICEN NUESTROS CLIENTES
=================================== */
.style___bg_7{
    padding: 4rem 2rem !important;
    border: none;
    /* Creamos el borde personalizado */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23EE5007' stroke-width='6' stroke-dasharray='30%2c 15' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 20px; /* Asegúrate que coincida con rx y ry del SVG */
}







/* ===================================
  RESTAURANTE
=================================== */

/* ===================================
  HERO
=================================== */
.video-container {
    position: relative;
    width: 100%;
    height: 550px; /* O el alto que prefieras */
    overflow: hidden;
    background-color: #000; /* Fondo negro mientras carga */
}

.video-backend {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto hace que el video cubra todo el espacio sin estirarse */
    pointer-events: none; /* Evita que el usuario lo pause accidentalmente */
}

/* Capa para oscurecer el video y que resalte el texto */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    display: flex;
    justify-content: center;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 50px; 
    z-index: 2;
}

.video-overlay h2 {
    color: white;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
}

.video-backend {
    filter: grayscale(100%);
    transition: filter 0.8s ease;
}
.video-container:hover .video-backend {
    filter: grayscale(0%);
}


/* Glass del texto */
.hero-glass_2 {
    left: 0;
    z-index: 3;
    width: 100%;
    padding: 2rem 3rem; 

    background: rgba(217, 217, 217, 0.20);
    box-shadow: 0 15px 20px 2px rgba(0, 0, 0, 0.35);

    border-radius: 150px;
    border: 1px solid rgba(255,255,255,0.3);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Título */
.hero-glass_2 h1 {
    color: var(--text-light);
}
/* Subtítulo */
.hero-glass_2 p {
    color: var(--text-light);
}
.hero-content_2 {
    animation: fadeInUp 1.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===================================
  SABORES QUE NOS REPRESENTAN
=================================== */
.ajuste___fotos img{
    width: 100%;
    display: block;
}


/* ===================================
  PLATOS IMPERDIBLES
=================================== */
.card-plato-imperdible {
    /* Espaciado interno */
    padding: 1rem 1rem 2rem 1rem !important;
    height: 100%;
    
    /* Tu borde punteado personalizado */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='25' ry='25' stroke='%23EE5007' stroke-width='4' stroke-dasharray='15%2c 15' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
    border-radius: 25px;
    
    /* Animación suave */
    transition: transform 0.3s ease, background-color 0.3s ease;

    /* --- TRUCO PARA ALTURAS IGUALES --- */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el texto hacia abajo y mantiene el orden */
    height: 100%; /* Obliga a la tarjeta a llenar toda la columna de Bootstrap */
}

/* Efecto al pasar el mouse */
.card-plato-imperdible:hover {
    transform: translateY(-10px);
    background-color: rgba(238, 80, 7, 0.03); /* Un toque naranja muy sutil de fondo */
}

.card-plato-imperdible img {
    width: 100%; /* Se adapta al ancho de la columna */
    max-width: 280px; /* Evita que crezca demasiado */
    object-fit: cover; /* Recorta la imagen para que todas midan igual */
}

.card-plato-imperdible h4 {
    margin-top: auto; /* Empuja el título hacia abajo si hay poco texto arriba */
    min-height: 3em; /* Reserva espacio para 2 líneas de texto aprox. */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ===================================
  UN LUGAR PARA QUEDARSE
=================================== */
/* Contenedor que rompe los límites */
.parent-container {
    position: relative;
    width: 100%;
    height: 600px; /* Ajusta la altura a tu gusto */
    overflow: hidden;
}

.parent-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la foto se estire */
}

/* El Overlay ahora posiciona el texto abajo */
.img-overlay {
    position: absolute;
    /* Esto estira el overlay a los 4 bordes exactos */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    /* Degradado sutil para que el texto resalte */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 40%);
    padding: 60px; /* Espacio desde los bordes */
    z-index: 2;
}

.text-shadow-pro {
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.ajuste___parrafo{padding: 0rem 2rem !important}

/* ===================================
  UBICACION
=================================== */
.style___bg_8 {
    background-color: var(--Fondo-de-texto-o-tarjetas-3);
    padding: 2rem 2rem !important;
}
.style___bg_9 {
    background-color: var(--Fondo-de-texto-o-tarjetas-1);
    padding: 2rem 2rem !important;
}






/* ===================================
  GALERÍA
=================================== */

/* ===================================
  HERO
=================================== */
/* Contenedor que rompe los límites */
.parent-container_2 {
    position: relative;
    width: 100%;
    height: 600px; /* Ajusta la altura a tu gusto */
    overflow: hidden;
}

.parent-container_2 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la foto se estire */
}

/* El Overlay ahora posiciona el texto abajo */
.img-overlay_2 {
    position: absolute;
    /* Esto estira el overlay a los 4 bordes exactos */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px; /* Espacio desde los bordes */
    z-index: 2;
}




/* ===================================
  CUERPO DE LA GALERÍA
=================================== */
.masonry-grid {
    column-count: 3; /* 3 columnas en PC */
    column-gap: 20px;
    width: 100%;
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.masonry-item:hover {
    transform: scale(1.03);
}

.img-galeria {
    width: 100%;
    height: auto; /* Importante para Masonry */
    display: block;
    border-radius: 15px;
}

/* Estilo del botón "Pro" */
.btn-ver-mas {
    background-color: transparent;
    border: 2px solid #EE5007;
    color: #EE5007;
    padding: 14px 40px;
    border-radius: 12px;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.btn-ver-mas:hover {
    background-color: #EE5007;
    color: white;
    box-shadow: 0 10px 20px rgba(238, 80, 7, 0.3);
    transform: translateY(-3px);
}

.btn-ver-mas:active {
    transform: translateY(-1px);
}

/* Animación para las fotos nuevas */
.reveal-foto {
    animation: fadeInUp 0.6s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Estilo del Modal --- */
.galeria-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    /* --- AQUÍ ESTÁ EL TRUCO --- */
    width: auto;             /* No fuerza el ancho */
    height: auto;            /* No fuerza el alto */
    max-width: 95%;         /* No deja que se salga de los lados */
    max-height: 100vh;        /* No deja que se salga por arriba/abajo */
    
    object-fit: contain;     /* Mantiene la proporción original SIEMPRE */
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
    
    /* Animación suave */
    animation: zoom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: fadeInUp 0.6s forwards;
}

@keyframes zoom {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.cerrar-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s;
}

.cerrar-modal:hover {
    color: #EE5007;
}


/* ===================================
  VIDEO DE INSTA EN LA WEB
=================================== */
#seccion-videos .video-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    /* Aspect ratio 9/16 es el de los Reels/TikToks, queda muy pro */
    aspect-ratio: 9 / 16; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
}

#seccion-videos .video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Un poco más oscuro para resaltar el play */
    transition: 0.4s;
}

#seccion-videos .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

#seccion-videos .play-overlay i {
    font-size: 2.2rem;
    color: white;
    background: #EE5007; /* Tu naranja */
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding-left: 4px;
    box-shadow: 0 0 20px rgba(238, 80, 7, 0.5);
    transition: 0.3s;
}

/* Efectos al pasar el mouse */
#seccion-videos .video-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(238, 80, 7, 0.2);
}

#seccion-videos .video-card:hover .video-thumb {
    opacity: 1;
    transform: scale(1.05);
}

#seccion-videos .video-card:hover .play-overlay i {
    transform: scale(1.15);
    background: #ff5e13;
}







/* ===================================
  CONTACTO
=================================== */
/* =====================================
    HORARIOS
======================================== */
.fondo___img_3{
    background-image: url(../img/content/horario___contacto.png) !important;
    background-size: 784px !important;
    background-position: left;
    background-repeat: no-repeat;
    height: 784px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================
    REDES SOCIALES
======================================== */
.style___bg_redes {
    background-color: var(--Fondo-de-texto-o-tarjetas-2);
    padding: 2.5rem 1.5rem;
    border-radius: 25px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borde sutil casi invisible */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.style___bg_redes i {
    font-size: 4rem; /* Un poco más balanceado */
    color: var(--Fondo-o-titulo-1);
    transition: all 0.3s ease;
}

.style___bg_redes p {
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    color: var(--Fondo-o-titulo-1);
    transition: all 0.3s ease;
}

/* --- ESTADO HOVER (EL TOQUE PRO) --- */
.style___bg_redes:hover {
    background-color: var(--Fondo-de-texto-o-tarjetas-1);
    transform: translateY(-10px); /* La tarjeta sube */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Sombra de profundidad */
}

/* El icono y el texto cambian al tiempo al pasar sobre la tarjeta */
.style___bg_redes:hover i {
    color: var(--color-naranja-intenso);
    transform: scale(1.1); /* El icono crece un poco */
}

.style___bg_redes:hover p {
    color: var(--color-naranja-intenso);
}










/* Esto hace que el salto al ID sea suave */
html {
    scroll-behavior: smooth;
}

.legal-section {
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

/* Resaltar la sección cuando el usuario llega por el ID */
.legal-section:target {
    border: 2px solid var(--color-naranja-intenso);
    background-color: #fffaf8; /* Un tono naranja muy suave */
}

.border-orange {
    border-top-color: var(--color-naranja-intenso) !important;
}

.legal-section h2 {
    color: var(--Fondo-o-titulo-1);
}

.privacy-body p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    text-align: justify;
}

.privacy-body ul, .privacy-body ol {
    margin-bottom: 1.5rem;
}

.privacy-body li {
    margin-bottom: 0.5rem;
    color: #555;
}

.icon-circle {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}
.border-orange {
    border-top-color: var(--color-naranja-intenso) !important;
}

.terms-body h4 {
    font-size: 1.2rem;
    color: var(--Fondo-o-titulo-1);
    margin-bottom: 0.8rem;
}

.terms-body p, .terms-body li {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}
.cookies-body .table {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1rem;
}

.cookies-body thead th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-bottom: 2px solid #eee;
}

.cookies-body tbody td {
    vertical-align: middle;
    font-size: 0.95rem;
    padding: 1rem;
}


.cookie-wrapper {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(150%); /* Empieza escondido abajo */
    width: 90%;
    max-width: 900px;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px); /* Efecto cristalina */
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border-radius: 20px;
    z-index: 10000;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0,0,0,0.05);
}

/* Clase para mostrarlo */
/* Para probar si se ve sin animación */


.cookie-text {
    font-size: 0.95rem;
    color: #444;
}

.text-orange {
    color: var(--color-naranja-intenso);
}

.btn-orange-pro {
    background-color: var(--color-naranja-intenso);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-orange-pro:hover {
    background-color: #ff5e13;
    color: white;
    transform: scale(1.05);
}
.cookie-wrapper {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(200px); /* Escondido */
    z-index: 999999 !important; /* Muy arriba */
    transition: transform 0.5s ease-in-out;
    opacity: 0; /* Asegurar que no se vea antes de tiempo */
    visibility: hidden;
}

.cookie-wrapper.show {
    transform: translateX(-50%) translateY(0); /* Visible */
    opacity: 1;
    visibility: visible;
}














/* =====================================
    ANIMACIONES BASE 
==================================== */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    filter: blur(8px);
    transition: opacity 1s ease,
                transform 1s ease,
                filter 1s ease;
}
/* Estado visible */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
/* ===== DIRECCIONES ===== */
.reveal-up {
    transform: translateY(60px);
    filter: blur(6px);
}
.reveal-down {
    transform: translateY(-60px);
    filter: blur(6px);
}
.reveal-left {
    transform: translateX(-60px);
    filter: blur(6px);
}
.reveal-right {
    transform: translateX(60px);
    filter: blur(6px);
}
.reveal-in {
    transform: scale(.9);
    opacity: 0;
    filter: blur(4px);
}
/* ===== ESTADO VISIBLE ===== */
.reveal.is-visible {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
}
.reveal-in.is-visible {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
}
/* Delay elegante */
.delay-1 { transition-delay: .2s; }
.delay-2 { transition-delay: .4s; }
.delay-3 { transition-delay: .6s; }
.delay-4 { transition-delay: .8s; }
.reveal-float {
    opacity: 0;
    transform: translateY(60px) scale(.95);
    filter: blur(6px) drop-shadow(0 25px 40px rgba(0,0,0,.25));
    transition: all .8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-float.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 25px 40px rgba(0,0,0,.25));
}