* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Corta lo que se salga a los lados */
    position: relative;
}

@font-face {
    font-family: 'ZuumeRough';
    src: url('../fonts/Zuume-Rough-Bold.ttf') format('truetype'); 
    font-weight: bold;
    font-style: normal;
}

:root {
  --red: #F70D0D;
  --yellow: #F3BE01;
  --black: #000;
  --white: #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--black);
  color: white;
}
.texto-especial-banner {
    font-family: 'ZuumeRough', sans-serif;
    font-size: 50px; /
}

/* ================================================================
   HEADER: DESKTOP (MANTIENE TU ESTILO ORIGINAL)
   ================================================================ */

.header {
    background: url("imagenes/header-desktop.jpg") center / cover no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    background-color: #000 !important; 
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 52px 36px;
    margin-left: 250px; 
}

.logo {
    position: absolute;
    top: 0px; /* Pegado arriba */
    left: 64px;
    z-index: 10;
}

.logo img {
    height: 120px;
    width: auto;
    display: block;
}

.nav {
    display: flex;
    align-items: center;
    gap: 32px; 
}

.nav a {
    color: white;               
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin: 0 25px;
}

.nav a:hover {
    color: #e30613 !important; /* El rojo de tu marca */
    transition: color 0.3s ease; /* Para que el cambio de color sea suave y no brusco */
}

.header-hero {
    padding: 140px 64px 120px;
    max-width: 900px;
    text-align: left;
}

.header-hero h1 {
    font-size: 58px;
    letter-spacing: 0.5px;
    line-height: 1;
    color: white;
}

.badge {
    display: inline-block;
    background-color: #F70D0D;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    padding: 6px 14px;
    margin-bottom: 36px;
    text-transform: uppercase;
}

.btn-primary {
    display: inline-block;
    background-color: #F70D0D;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    padding: 14px 32px;
    border-radius: 60px;
    margin-top: 48px;
    text-decoration: none;
}

/* ================================================================
   HEADER: SÓLO MOBILE (AQUÍ VAN TUS CAMBIOS)
   ================================================================ */
@media (max-width: 768px) {
    .header {
        background: url("imagenes/header-mobile.jpg") center / cover no-repeat !important;
        min-height: 75vh !important; 
    }

    .header-inner {
        margin-left: 0 !important; 
        padding: 0 15px !important; /* Logo pegado arriba */
        justify-content: space-between !important;
    }

    .logo {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
    }

    .logo img {
        height: 80px !important;
    }

    .header-hero {
        /* Aumentamos padding superior para separar el Badge del Logo */
        padding: 120px 25px 40px !important; 
        text-align: left !important;
    }

    .header-hero h1 {
        /* AJUSTES SOLICITADOS SÓLO PARA MOBILE */
        font-size: 34px !important;      /* Tamaño ajustado */
        font-weight: 900 !important;     /* Más gruesa */
        letter-spacing: -1.5px !important; /* Letras más pegadas */
        line-height: 0.95 !important;    /* Interlineado más cerrado */
        margin-top: 15px ;
        
        /* FORZAR 5 LÍNEAS: Ajusta este ancho según tu texto */
        max-width: 250px !important;     
        display: block !important;
    }

    .badge {
        margin-bottom: 25px !important; /* Espacio entre badge y el nuevo H1 */
        font-size: 13px !important;
    }
    
    .nav {
    display: flex !important;
    gap: 5px !important; /* <--- REDUCE ESTE VALOR (estaba en 8px o 10px) */
    flex-grow: 1;
    justify-content: flex-end;
}

   .nav a {
    /* Cambia el segundo valor (el de los lados) a 2px o incluso 0 */
    margin: 0 2px !important; /* <--- LÍNEA CLAVE PARA QUE NO SE CORTE */
    
    font-size: 11px !important; /* Puedes bajarlo a 10px si son muchas palabras */
    white-space: nowrap; /* Esto evita que una palabra se parta, pero si el menú es muy ancho, lo saca de pantalla */
           }
}

.banner-express-fix {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; /* Elimina espacios fantasmas debajo de la imagen */
    display: block;
    background-color: #ffffff;
}

.banner-express-fix img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Asegura que la imagen no se deforme */
}

/* Ajuste para que en móviles no se vea minúscula */
@media (max-width: 768px) {
    .banner-express-fix img {
        min-height: 200px;
        object-fit: cover; /* En celular se recorta un poco a los lados pero se lee mejor */
    }
}

.banner-express-final {
    width: 100%;
    background-color: #ffffff; 
    line-height: 0;
    margin: 0;
    padding: 0;
    display: block;
}

.banner-express-final img {
    width: 100%;
    height: auto;
    display: block;
}


/* ================= SECCIÓN 2: HERO FINAL CORREGIDO ================= */
.hero-impacto {
    background-color: #F70d0d !important;
    padding: 60px 2% 110px 2% !important; /* Espacio arriba, lados y mucho abajo */
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.hero2-contenedor {
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important; /* DISTRIBUCIÓN UNIFORME */
    align-items: flex-start !important;
    flex-wrap: nowrap !important; /* Evita que se amontonen */
}

.hero2-item {
    flex: 1 !important; /* Hace que todos midan lo mismo */
    text-align: center !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.hero2-icono-wrapper {
    width: 120px !important; /* Tamaño grande de icono */
    height: 120px !important;
    margin-bottom: 15px !important;
}

.hero2-icono-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Mantiene la forma del icono */
}

.hero2-item h3 {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    margin: 10px 0 !important;
    text-transform: uppercase !important;
    min-height: 2.4em !important; /* Alinea los títulos de 2 líneas */
}

.hero2-item p {
    color: #ffcc00 !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: 180px !important; /* Evita que el texto se estire mucho a los lados */
}

/* --- AJUSTE PARA CELULARES --- */
@media screen and (max-width: 900px) {
    .hero2-contenedor {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }
}

/* 1. SECCIÓN: Forzamos el fondo y quitamos el aire superior */
.seccion-hamburguesas {
    background-color: white !important;
    padding: 0 0 40px 0 !important; /* 0 arriba para pegar el título */
    width: 100%;
}

/* 2. TÍTULO: Lo hacemos "flaco" para que no ocupe espacio extra */
.seccion-hamburguesas h2 {
    font-size: 2.5rem !important;
    color: var(--red);
    margin: 0 !important;
    padding-top: 15px !important;
    line-height: 1;
    text-align: center;
    letter-spacing: -2px !important;
}

/* 3. CONTENEDOR: Alineación perfecta de flechas y fotos */
.carousel-container {
    display: flex;
    align-items: center; /* Centra las flechas verticalmente con las fotos */
    justify-content: center;
    gap: 30px;
    max-width: 1100px;
    margin: 10px auto 0 auto; /* 10px de separación con el título */
}

/* 4. EL ÁREA DE SCROLL */
.carousel-content {
    display: flex;
    overflow-x: hidden;
    scroll-behavior: smooth;
    gap: 20px;
    width: 90%; 
}

/* 5. CADA RECUADRO: Aquí definimos que sean 3 exactos */
.item-hamburguesa {
    /* 33.33% es un tercio, restamos el espacio entre fotos (gap) */
    flex: 0 0 calc(33.33% - 14px); 
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 6. LA FOTO: Aquí evitamos que se estire */
.item-hamburguesa img {
    width: 100%;       /* Ocupa todo el ancho de su recuadro */
    height: 250px;     /* Altura fija para que todas sean iguales */
    object-fit: cover; 
    background-color: #f9f9f9; /* Fondo suave por si la foto no llena el cuadro */
}

/* 7. TEXTO ROJO DEBAJO */
.item-hamburguesa h3 {
    color: var(--red);
    font-size: 1.1rem;
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

/* 7. FLECHAS */
.flecha {
    background: none;
    border: none;
    font-size: 3rem;
    color: var(--red);
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
    padding: 10px;
}

/* ========================BANNER FRASE=========================== */
.banner-frase {
  background-color: black;
  color: red;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Quitamos padding para que el texto ajuste al borde */
  padding: 0; 
  height: auto; 
}

.marquee {
  display: flex;
  white-space: nowrap;
  animation: scroll 30s linear infinite; 
}

.marquee span {
  font-family: 'Zuume Rough', sans-serif; 
  font-weight: bold;
  font-size: 5rem; 
  
  /* Ajustes solicitados */
  letter-spacing: -2px; 
  line-height: 1.2;       
  text-transform: uppercase;
  
  padding-right: 60px; /* Espacio entre el fin de una frase y el inicio de la otra */
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.menu-destacado {
    background-color: var(--white); /* Fondo blanco usando tu variable */
    color: var(--red);           /* Texto negro para que resalte */
    padding: 40px 20px;
    text-align: center;            /* Centra todos los textos y el botón */
}

/* 1. Estilo para el cuadro rojo superior */
.menu-destacado .badge {
    display: inline-block;
    background-color: var(--red);
    color: var(--white);
    font-size: 16px;
    padding: 5px 15px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px; /* Quitamos espacio abajo del cuadro */
}

/* 2. Estilo para el título grande */
.menu-destacado h2 {
    font-size: 3rem; /* Los 58px que querías */
    color: var(--red);
    margin-top: -5px;    /* Valor negativo para "subir" el texto y pegarlo al badge */
    margin-bottom: 15px;  /* Espacio pequeño con el texto amarillo */
    line-height: 1;      /* Ajusta la altura de línea para que no ocupe espacio extra */
}

/* 3. Estilo para el subtexto amarillo */
.menu-destacado .subtext {
    font-size: 1rem;
    color: var(--yellow);
    margin-top: 0px;
    font-weight: bold;
}

/* Contenedor general de la cuadrícula */
.grid-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 40px 20px; /* 40px de espacio entre filas, 20px entre columnas */
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}

/* Caja individual de cada plato */
.item-menu {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente imagen y textos */
    text-align: center;
}

/* Imagen limpia sin bordes ni sombras */
.item-menu img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border: none;
    box-shadow: none;
    margin-bottom: 15px; /* Espacio antes del título */
}

/* Títulos de los platos (Negro y Bold) */
.item-menu h3 {
    color: #000000;
    font-weight: bold;
    font-size: 1.25rem;
    margin: 5px 0;
    text-transform: uppercase;
}

/* Subtexto de los platos (Negro normal) */
.item-menu p {
    color: #000000;
    font-weight: normal;
    font-size: 1rem;
    margin: 0;
}

/* Botón Rojo Centrado */
.btn-ver-mas {
    background-color: var(--red);
    color: var(--white);
    padding: 15px 40px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    display: block; /* Necesario para centrarlo con margin auto */
    margin: 80px auto;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-ver-mas:hover {
    transform: scale(1.05); /* Efecto pequeño al pasar el mouse */
}

/* ================= SECCIÓN 7: GALERÍA CUADRADA COMPACTA ================= */
.seccion-galeria {
    padding: 0 !important;
    background-color: #000 !important;
    width: 100% !important;
}

.galeria-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.galeria-item {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    text-decoration: none !important;
    border: none !important;
}

.galeria-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* EFECTO BLANCO Y NEGRO INICIAL */
    filter: grayscale(100%) !important; 
    transition: transform 0.5s ease, filter 0.5s ease !important;
}

.galeria-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    
    /* CENTRADO VERTICAL ABSOLUTO */
    align-items: center !important; 
    
    /* ALINEADO A LA IZQUIERDA */
    justify-content: flex-start !important; 
    
    padding: 40px !important; 
    box-sizing: border-box !important;
    transition: background 0.3s ease !important;
}

/* EFECTO HOVER: ESCALA Y COLOR */
.galeria-item:hover img {
    transform: scale(1.05) !important;
    filter: grayscale(0%) !important; /* Vuelve a color al pasar el mouse */
}

.galeria-item:hover .galeria-overlay {
    background: rgba(0, 0, 0, 0.2) !important; /* Aclaramos un poco el fondo para que el color resalte */
}

.galeria-texto {
    text-align: left !important;
    max-width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
}

.galeria-texto h3 {
    color: #ffffff !important;
    font-size: 5rem !important; 
    font-weight: 700 !important; 
    text-transform: uppercase !important;
    margin: 0 !important; 
    line-height: 0.85 !important; 
    letter-spacing: -2px !important;
    display: block !important;
}

.galeria-texto p {
    color: #ffcc00 !important;
    font-size: 2.5rem !important; 
    font-weight: 200 !important; 
    letter-spacing: -2px !important;
    line-height: 0.8 !important;
    margin: 10px 0 0 0 !important; 
}

/* RESPONSIVE: Ajuste de tamaños para que no se desborde en móvil */
@media screen and (max-width: 768px) {
    .galeria-grid {
        grid-template-columns: 1fr !important;
    }
    .galeria-texto h3 {
        font-size: 3rem !important;
    }
    .galeria-texto p {
        font-size: 1.5rem !important;
    }
}

/* ================= SECCIÓN PROMO ESTILOS LIMPIOS (CÓDIGO COMPLETO) ================= */

.seccion-promo {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    margin: 0 !important; 
    padding: 0 !important;
    background-color: #000 !important;
    line-height: normal !important;
}

.promo-slider {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important; 
}

.promo-slide {
    display: none; 
    width: 100% !important;
    position: relative !important;
    text-decoration: none !important;
}

.promo-slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    border: none !important;
    margin: 0 !important;
}

/* BOTÓN PROMO - ESTILO UNIFICADO CON FORMULARIO */

.btn-promo {
    position: absolute !important;
    top: 90% !important;        /* <--- CAMBIAMOS bottom POR top */
    bottom: auto !important;     /* Anulamos cualquier instrucción de bottom */
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Centrado perfecto */
    z-index: 20 !important;

    /* Estética del botón */
    background-color: #F70D0D !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0px !important;
    border-radius: 60px !important;

    /* BLOQUE DE CORRECCIÓN DE DESPROPORCIÓN */
    display: inline-flex !important;   /* Cambiamos a inline-flex para centrar texto interno */
    align-items: center !important;    /* Centra el texto verticalmente */
    justify-content: center !important;/* Centra el texto horizontalmente */
    
    padding: 0 22px !important;        /* Solo ponemos padding a los lados */
    height: 36px !important;           /* FIJAMOS una altura física (estándar de botón) */
    width: auto !important;            /* El ancho lo define el texto */
    
    line-height: 1 !important;         /* Evita que el texto crezca hacia arriba */
    box-sizing: border-box !important; /* Asegura que el padding no sume al height */
    /* ------------------------------------ */

    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Hover */
.btn-promo:hover {
    opacity: 0.9 !important;
}

@media (max-width: 768px) {
    .btn-promo {
        /* 1. POSICIÓN: Si se ve muy abajo o muy arriba, cambia este % */
        top: 85% !important; 
        
        /* 2. TAMAÑO TOTAL: Reducimos la altura fija para que no se vea gigante */
        height: 28px !important; 
        
        /* 3. TEXTO: Reducimos la letra y el espacio entre ellas */
        font-size: 9px !important;
        letter-spacing: 0px !important; 
        
        /* 4. ANCHO: Reducimos el colchón a los lados */
        padding: 0 15px !important;
        
        /* Mantenemos el peso de la fuente para que combine con el formulario */
        font-weight: 700 !important;
    }
}

/*======================= PARCHE =======================*/
.parche {
  background: black;
  padding: 40px 16px;
}

.reels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.reel {
  background: #222;
  height: 320px;
}

/========================* UBICACIÓN *========================/
.ubicacion {
  display: flex;
  flex-wrap: wrap;
  background: black;
}

.info, .map {
  flex: 1;
  padding: 40px;
}

.map {
  background: #111;
}

/* ================= SECCIÓN 11: FOOTER ================= */

.footer-sitio {
    background-color: #000 !important;
    padding: 0px 5% 20px 5% !important; /* Quitamos padding superior para que la línea pegue arriba */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* LÍNEA ROJA SUPERIOR */
.linea-roja-footer {
    border: 0 !important;
    border-top: 1px solid #e30613 !important; /* Rojo de la marca */
    width: 100% !important;
    margin: 10px 0 30px 0 !important; /* 30px de espacio hacia abajo */
    opacity: 1 !important;
}

.footer-contenedor {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.footer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.footer-links a {
    color: #e30613 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-transform: uppercase; /* Opcional, para darle un toque más formal */
    letter-spacing: 0.5px;
}

/* DIVISOR INTERNO (GRIS) */
.footer-divisor {
    border: 0 !important;
    border-top: 1px solid #1a1a1a !important;
    margin: 20px 0 !important;
}

.footer-legal {
    text-align: center !important;
}

.footer-legal p {
    color: #666 !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    .footer-links {
        align-items: center !important;
        text-align: center !important;
    }
}
/* ================= SECCIÓN WHATSAPP ================= */
.btn-whatsapp-flotante {
    position: fixed !important;
    width: 60px !important;
    height: 60px !important;
    bottom: 20px !important;
    right: 20px !important;
    background-color: #25d366 !important;
    color: #FFF !important;
    border-radius: 50px !important;
    text-align: center !important;
    font-size: 30px !important;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5) !important;
    z-index: 999999 !important; /* Valor altísimo para que no lo tape el mapa ni el footer */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
}

.btn-whatsapp-flotante:hover {
    transform: scale(1.1) !important;
}

.btn-whatsapp-flotante img {
    width: 35px !important;
    height: 35px !important;
}

/* En móviles lo subimos un poco para que no estorbe */
@media screen and (max-width: 768px) {
    .btn-whatsapp-flotante {
        width: 50px !important;
        height: 50px !important;
        bottom: 15px !important;
        right: 15px !important;
    }
}

/* ============ hero icons ===================*/
.hero-icons {
  background-color: #F70D0D;
  padding: 64px 32px;

  display: flex;
  justify-content: space-between;
  gap: 32px;

  text-align: center;
}

.hero-item {
  flex: 1;
}

.hero-item .icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.hero2-item h3 {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-top: 10px !important;
    margin-bottom: -5px !important; 
    line-height: 1 !important; 
}

.hero2-item p {
    color: #ffcc00 !important;
    font-size: 0.9rem !important;
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
    line-height: 1.1 !important; 
}

#hero-rojo-fijo {
    background-color: #F70d0d !important;
    background: #F70d0d !important;
    display: block !important;
    width: 100% !important;
    
    /* CORRECCIÓN DE TAMAÑO: 20px arriba, 0 lados, 30px abajo */
    padding: 15px 0 15px 0 !important; 
    
    margin: 0 !important;
}

/* ================= SECCIÓN EL PARCHE - BLOQUE COMPLETO DESKTOP ================= */

/* Forzamos que el contenedor sea FLEX y no se convierta en columna */
section.seccion-parche .parche-contenedor {
    display: flex !important;
    flex-direction: row !important; /* Título al lado */
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* Forzamos el título vertical */
section.seccion-parche .parche-titulo-vertical {
    display: block !important;
    writing-mode: vertical-lr !important;
    transform: rotate(180deg) !important;
    color: #ff0000 !important;
    font-size: 5.5rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    flex-shrink: 0 !important; /* Evita que el título se achique */
    margin-top: 60px !important;
}

/* Forzamos las 4 columnas */
section.seccion-parche .reels-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 COLUMNAS SIEMPRE EN DESKTOP */
    gap: 15px !important;
    flex-grow: 1 !important;
    margin-top: 60px !important;
}

/* Items de la grilla */
section.seccion-parche .reel-item {
    aspect-ratio: 9 / 16 !important;
    width: 100% !important;
    background: #1a1a1a !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    position: relative !important; /* Necesario para que el video se ancle bien */
}

/* AJUSTE DE VIDEO E INSTAGRAM EMBED (PROPORCIÓN REAL) */
section.seccion-parche .reel-item video,
section.seccion-parche .reel-item iframe,
section.seccion-parche .reel-item .instagram-media,
section.seccion-parche .video-reel {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Llena el contenedor sin deformar */
    border: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* ============================================================
   SOLO PARA MÓVIL: GRID 2x2 (CORREGIDO)
   ============================================================ */
@media screen and (max-width: 768px) {
    section.seccion-parche .parche-contenedor {
        flex-direction: column !important; 
        align-items: center !important;
        padding: 0 10px !important; /* Un poco menos de espacio lateral */
        margin-top: 40px !important;
    }

    /* Título horizontal arriba */
    section.seccion-parche .parche-titulo-vertical {
        writing-mode: horizontal-tb !important; 
        transform: none !important;
        font-size: 2.8rem !important; /* Un poco más pequeño para que quepa bien */
        margin-top: 0 !important; 
        margin-bottom: 5px !important;
        text-align: center !important;
        
    }

    /* GRID DE 2 COLUMNAS X 2 FILAS */
    section.seccion-parche .reels-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* <--- AQUÍ ESTÁ EL CAMBIO A 2 COLUMNAS */
        gap: 10px !important; /* Espacio más pequeño entre videos para que quepan */
        width: 100% !important;
        max-width: 100% !important; /* Que use todo el ancho disponible */
        margin-top: 5px !important;
    }

    /* Mantener la proporción de Reel 9:16 */
    section.seccion-parche .reel-item {
        aspect-ratio: 9 / 16 !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important; /* Bordes un poco más finos para móvil */
    }
}

/* ============================================================
   BLOQUE EXTRA: OCULTAR ICONOS DE "MEJORAR" Y MENÚS EN VIDEOS
   ============================================================ */
video::-webkit-media-controls {
    display:none !important;
}
/* Esto ayuda a evitar menús contextuales molestos en algunos navegadores */
section.seccion-parche .video-reel {
    pointer-events: none !important; /* El video se ve pero no reacciona al cursor */
}
/* ================= SECCIÓN 10: UBICACION Y CONTACTO ================= */

.seccion-contacto {
    background-color: #000 !important;
    width: 100% !important;
}

.contacto-contenedor {
    display: flex !important;
    flex-wrap: wrap !important;
    min-height: 500px !important;
    /* ESTO ES LO QUE ALINEA EL MAPA CON EL TEXTO AL CENTRO */
    align-items: center !important; 
}

.contacto-info {
    flex: 1 1 50% !important;
    background-color: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 50px 5% !important;
}

.contacto-wrapper {
    width: 100% !important;
    max-width: 480px !important;
}

/* BADGE ROJO SEGURO */
.badge-llamamos {
    background-color: #e30613 !important;
    color: #fff !important;
    padding: 6px 14px !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
    box-shadow: 0 0 15px rgba(227, 6, 19, 0.6) !important;
}

/* NÚMERO SIN RAYA */
.link-numero-limpio {
    text-decoration: none !important;
}

.numero-contacto {
    color: #fff !important;
    font-size: clamp(2.5rem, 5vw, 3.8rem) !important;
    font-weight: 900 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* IMAGEN LOCATIONS */
.contenedor-svg-locations {
    width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
}

.img-locations {
    width: 100% !important;
    max-width: 420px !important;
    display: block !important;
}

/* INSTAGRAM GRANDE */
.instagram-follow {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    text-decoration: none !important;
}

.icon-insta {
    width: 45px !important;
    height: 45px !important;
}

.insta-text {
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
}

/* MAPA NEGRO BACANO (ESTILO MARCA) */
.contacto-mapa {
    flex: 1 1 50% !important;
    min-width: 320px !important;
    height: 500px !important;
    /* Este es el filtro que da el look oscuro */
    filter: grayscale(1) invert(0.92) contrast(1.2) !important;
    background-color: #1a1a1a !important;
}

.contacto-mapa iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

@media screen and (max-width: 768px) {
    /* 1. CENTRAR IMAGEN DE DIRECCIONES Y HORARIOS */
    /* Asumiendo que .info es el contenedor del texto/imagen */
    .info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centra horizontalmente */
        justify-content: center !important;
        text-align: center !important; /* Centra el texto */
        padding: 30px 20px !important;
    }

    .info img {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important; /* Asegura el centrado de la imagen */
        align-items: center !important; /* Centra horizontalmente */
    }

    /* 2. MAPA CON EFECTO NEGRO (IGUAL A DESKTOP) */
    .contacto-mapa { 
        height: 350px !important; 
        flex: 1 1 100% !important;
        /* Aplicamos el filtro de escala de grises y bajamos el brillo */
        filter: grayscale(100%) invert(90%) contrast(150%) !important;
        /* Si solo quieres que sea gris oscuro sin invertir: 
           filter: grayscale(100%) brightness(0.6) !important; */
    }
}

/* ================= BANNER REGISTRO SLIM - ANNOUNCEMENT BAR ================= */

/* Definición de la animación de parpadeo */
@keyframes parpadeoTexto {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.banner-registro-slim {
    background: linear-gradient(90deg, #e30613 0%, #ff6a00 100%) !important;
    width: 100% !important;
    height: 60px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.banner-slim-contenedor {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.banner-slim-texto {
    color: #fff !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    font-family: 'Inter', 'Impact', sans-serif !important; 
    font-size: 2rem !important; 
    letter-spacing: 0px !important; 
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;

    /* SE AGREGA EL PARPADEO AQUÍ */
    animation: parpadeoTexto 1.5s infinite ease-in-out !important;
}

.banner-slim-tag {
    display: inline-block !important;
    flex-shrink: 0 !important;
    background-color: #000 !important;
    color: #fff !important;
    padding: 4px 12px !important;
    margin-right: 15px !important;
    border-radius: 6px !important;
    
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    font-family: sans-serif !important;
    font-weight: 700 !important;
    
    /* El tag se queda fijo para que sea legible siempre */
    animation: none !important; 
}

.banner-slim-boton {
    display: inline-block !important;
    flex-shrink: 0 !important;
    margin-left: 15px !important;
    background-color: #000 !important;
    color: #fff !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    text-decoration: none !important;

    font-family: 'inter', sans-serif !important; 
    font-size: 0.9rem !important;                
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    
    /* El botón se queda fijo para no dificultar el clic */
    animation: none !important;
}

/* MODIFICACIÓN: HOVER ROJO PARA EL BOTÓN */
.banner-slim-boton:hover {
    background-color: #ff0000 !important; /* Rojo puro al pasar el mouse */
    color: #ffffff !important;
    transform: scale(1.05) !important; /* Ligero aumento de tamaño */
}

/* ================= AJUSTE MOBILE CORREGIDO Y CENTRADO ================= */
@media screen and (max-width: 768px) {
    .banner-registro-slim {
        height: 50px !important;
        display: flex !important;
        justify-content: center !important; /* CENTRADO HORIZONTAL REAL */
        align-items: center !important;     /* CENTRADO VERTICAL REAL */
        padding: 0 10px !important;         /* Pequeño respiro a los lados */
    }

    .banner-slim-contenedor {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .banner-slim-texto {
        /* ELIMINAMOS TUS MÁRGENES ANTERIORES QUE DAÑABAN EL CENTRADO */
        margin: 0 !important; 
        padding: 0 !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important; /* Para que no se estire a los lados */
        
        /* CORRECCIÓN DE TEXTO */
        font-size: 1rem !important;      /* Tamaño óptimo para móvil */
        letter-spacing: 0px !important;    /* Limpiamos el -5px que amontonaba las letras */
        gap: 8px !important;               /* Espacio perfecto entre texto y botón */
        text-align: center !important;
    }

    .banner-slim-tag {
        display: none !important; /* Mantenemos oculto el tag para ganar espacio */
    }

    .banner-slim-boton {
        /* AJUSTE DE BOTÓN SIN MÁRGENES MANUALES */
        margin: 0 !important; 
        font-size: 0.6rem !important;
        padding: 4px 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important; /* Evita que el botón se deforme */
    }
}

/* ================= NUEVO ESTILO INDEPENDIENTE PARA EL BOTÓN ================= */
.banner-slim-boton {
    display: inline-block !important;
    margin-left: 20px !important;
    background-color: #000 !important; /* Fondo negro para que resalte */
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    vertical-align: middle !important;

    /* AQUÍ AJUSTAS EL ESTILO DEL BOTÓN SIN AFECTAR EL BANNER */
    font-family: 'inter', sans-serif !important; /* Fuente diferente */
    font-size: 0.9rem !important;                /* Tamaño diferente */
    letter-spacing: 0px !important;               /* Espacio caracteres diferente */
    font-weight: 700 !important;
    
    transition: all 0.2s ease !important;
}

.banner-slim-boton:hover {
    background-color: #fff !important;
    color: #000 !important;
    transform: scale(1.05) !important;
}

/* AJUSTE PARA MOBILE (40px) */
@media screen and (max-width: 768px) {
    .banner-registro-slim {
        height: 40px !important; 
    }

    .banner-slim-texto {
        font-size: 0.75rem !important; 
        letter-spacing: 0.5px !important;
    }

    .banner-slim-boton {
        /* Ajuste de botón para móvil */
        font-size: 0.6rem !important;
        padding: 3px 8px !important;
        margin-left: 8px !important;
        letter-spacing: 0px !important;
    }

    .banner-slim-tag {
        display: none !important; 
    }
}
/* ============================================================
    REPARACIÓN DE CARRUSELES (HAMBURGUESAS Y PERROS) MOBILE
   ============================================================ */
@media screen and (max-width: 768px) {

    .carousel-container, 
    .seccion-hamburguesas, 
    .seccion-perros {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 20px 0 !important; /* Espacio para que respire la sección */
    }

    /* Ajuste de los Sliders para centrado total */
    #hamburguesas-slider, 
    #perros-slider {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: scroll !important; /* Permite deslizar con el dedo */
        scroll-snap-type: x mandatory !important; /* Fuerza a que la imagen se detenga en el centro */
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important; /* Oculta barra en Firefox */
        -webkit-overflow-scrolling: touch;
    }

    #hamburguesas-slider::-webkit-scrollbar, 
    #perros-slider::-webkit-scrollbar {
        display: none !important; /* Oculta barra en Chrome/Safari */
    }

    /* Cada item ocupa el 100% real para centrar la imagen */
    .item-hamburguesa, .item-perro {
        flex: 0 0 100% !important;
        width: 100% !important;
        scroll-snap-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .item-hamburguesa img, .item-perro img {
        width: 75% !important; /* Ajuste para que se vea la sombra y bordes */
        max-width: 300px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        border-radius: 15px;
    }

}

/* ======================3. EL PARCHE (CUADRÍCULA 2X2) --- */
    .parche-contenedor {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 0 !important;
    }

    .parche-titulo-vertical {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        position: static !important;
        margin-bottom: 20px !important;
        font-size: 2rem !important;
    }

    .reels-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 Columnas */
        gap: 10px !important;
        width: 90% !important;
    }

    .reel-item {
        width: 100% !important;
        aspect-ratio: 9 / 16 !important;
        background: #111 !important;
        border: 1px solid #333 !important;
        border-radius: 10px !important;
    }
}

/* ============================================================
   HEADER MOBILE Y MAPA - AJUSTE FINAL PRECISIÓN
   ============================================================ */
@media screen and (max-width: 768px) {
    
    .header {
        background: url("imagenes/header-mobile.jpg") center center / cover no-repeat !important;
        min-height: 60vh !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 0 !important; /* Pegado al techo */
    }

    /* BARRA SUPERIOR: Logo y Nav en la misma fila */
    .header-inner {
        margin-left: 0 !important; 
        padding: 0px 10px 20px 40px !important; /* Pegado arriba (10px) y 40px izquierda */
        display: flex !important;
        flex-direction: row !important; /* Misma línea */
        align-items: center !important; 
        justify-content: flex-start !important;
        gap: 25px !important; /* Espacio entre logo y menú */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* LOGO IZQUIERDA COMPACTO */
    .logo {
        position: static !important;
        margin: 0 !important;
        flex-shrink: 0 !important; /* Evita que el logo se achique */
    }

    .logo img {
        height: 85px !important; /* Tamaño reducido para caber en una línea */
        width: auto !important;
    }

    /* MENÚ EN UNA SOLA LÍNEA SIN SCROLL */
    .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important; /* Prohibido scroll lateral */
        justify-content: flex-start !important;
        gap: 8px !important; /* Espacio mínimo */
    }

    .nav a {
        margin: 0 !important; 
        font-size: 10px !important; /* Letra pequeña para que quepa todo el ancho */
        white-space: nowrap !important;
        letter-spacing: 0 !important;
        padding: 0 !important;
    }

    /* TEXTO HERO A LA IZQUIERDA */
    .header-hero {
        padding: 20px 0 60px 40px !important; 
        text-align: left !important;
        max-width: 100% !important;
        margin-top: 20px !important;
    }

    .header-hero h1 {
        font-size: 34px !important; 
        line-height: 1.1 !important;
        max-width: 260px !important; /* Fuerza las 3 líneas */
        margin-left: 0 !important; 
        margin-right: auto !important;
    }

    .badge {
        margin-left: 0 !important;
        margin-bottom: 25px !important;
        font-size: 13px !important;
    }

    .btn-primary {
        margin-left: 0 !important;
        margin-top: 35px !important;
        font-size: 15px !important;
        padding: 12px 28px !important;
    }

    /* --- MAPA UBICACIONES MODO OSCURO --- */
    /* Ajusta el selector según la clase que uses para tu iframe */
    iframe[src*="google.com/maps"] {
        filter: grayscale(100%) invert(90%) contrast(100%) !important;
        border-radius: 15px !important;
        margin-top: 20px !important;
    }
}

/* --- ESTILOS PÁGINA NOSOTROS --- */
.seccion-nosotros-pagina {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    color: #fff; /* Suponiendo que tu fondo es oscuro */
}

.nosotros-hero {
    text-align: center;
    margin-bottom: 50px;
}

.nosotros-hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    margin-top: 20px;
}

.nosotros-grid {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nosotros-texto { flex: 1; }
.nosotros-texto h2 { font-size: 2rem; color: #e30613; margin-bottom: 20px; }
.nosotros-texto p { line-height: 1.6; font-size: 1.1rem; margin-bottom: 15px; }

.nosotros-imagen { flex: 1; }
.nosotros-imagen img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(227, 6, 19, 0.3);
}

/* Ajuste para que la página sea responsive */
@media (max-width: 768px) {
    .nosotros-grid { flex-direction: column; text-align: center; }
    .nosotros-hero h1 { font-size: 2.2rem; }
}

/* Esto solo afectará a la página que tenga la clase pagina-blanca */
body.pagina-blanca {
    background-color: #ffffff !important;
    color: #000000 !important; /* Cambiamos el texto a negro para que se lea sobre el blanco */
}

/* Si tienes textos en blanco que ahora no se ven, asegúrate de darles color oscuro aquí */
body.pagina-blanca .seccion-nosotros-pagina h1,
body.pagina-blanca .seccion-nosotros-pagina p {
    color: #000000 !important;
}

/* ============================================================
   AJUSTES EXCLUSIVOS PÁGINA NOSOTROS (FONDO BLANCO)
   ============================================================ */

/* BODY — fondo blanco SIN flex (clave para no romper footer/banner) */
body.pagina-blanca {
    background-color: #ffffff !important;
    margin: 0;
}

/* ================= HEADER ================= */

/* Header blanco */
body.pagina-blanca .header-nosotros {
    background-color: #ffffff !important;
    padding: 15px 0;
    border-bottom: none !important;
}

/* Contenedor del header */
body.pagina-blanca .header-inner {
    background: transparent !important;
}

/* Menú en rojo */
body.pagina-blanca .nav a {
    color: #e30613 !important;
    font-weight: 600;
}

/* Logo secciones blancas */
body.pagina-blanca .logo-secciones {
    width: 180px;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

body.pagina-blanca .logo {
    padding: 5px 0;
}

/* ================= NOSOTROS ================= */

.nosotros-visual {
    width: 100%;
    background: #ffffff;
    padding: 100px 5%;
    box-sizing: border-box;
}

.nosotros-contenedor {
    max-width: 1400px;
    margin: 0 auto;
    display: flex !important; /* Fuerza el modo fila */
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 60px;
}

.nosotros-texto {
    flex: 0 0 45% !important; /* Ocupa el 45% del ancho */
    text-align: left;
}

.nosotros-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 6rem !important;
    font-weight: 800;
    color: #e30613 !important; /* Rojo marca */
    margin: 0 0 30px 0;
    line-height: 0.85;
}

.titulo-rojo-4rem {
    color: #e30613 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800;
    font-size: 4rem !important;
    margin: 60px 0 20px 0;
    line-height: 0.9;
    text-transform: uppercase;
}

.nosotros-descripcion {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #000000;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Galería Tipo Pinterest */
.nosotros-galeria {
    flex: 0 0 50% !important; /* Ocupa el 50% del ancho */
    column-count: 3 !important; /* 3 columnas de fotos */
    column-gap: 15px;
    display: block !important;
}

.nosotros-galeria img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 15px;
    border-radius: 8px;
    display: block;
}

.boton-volver-menu {
    display: inline-block !important;
    margin-top: 40px !important;
    text-decoration: none !important;
    
    /* Color Rojo de la marca */
    color: #e30613 !important; 
    
    /* Características de fuente del menú */
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important; 
    font-weight: 500 !important; /* Peso normal inicial */
    letter-spacing: -0.4px !important;
    
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.boton-volver-menu:hover {
    /* Al pasar el cursor se pone BOLD */
    font-weight: 800 !important; 
    /* Opcional: un pequeño subrayado para que se note más la acción */
    text-decoration: underline !important; 
}

/* Responsive para que en celular sí se pongan uno abajo del otro */
@media (max-width: 1024px) {
    .nosotros-contenedor {
        flex-direction: column !important;
    }
    .nosotros-texto, .nosotros-galeria {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .nosotros-titulo { font-size: 4rem !important; }
    .titulo-rojo-4rem { font-size: 3rem !important; }
}

/* ================= FOOTER ================= */

/* Quitar línea roja solo en páginas blancas */
body.pagina-blanca .linea-roja-footer {
    display: none !important;
}

.footer-sitio {
    background-color: #000 !important;
    width: 100%;
    /* Eliminamos el margin-top para quitar el hueco blanco */
    margin-top: 0 !important; 
    
    /* Aumentamos el padding-top para crear el espacio interno */
    /* El primer número (80px) es el espacio arriba del texto */
    padding: 40px 0 30px !important; 
    
    border: none !important;
    display: block !important;
    clear: both !important;
}

/* Aire para los links */
.footer-links {
    margin-top: 20px !important;
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* Opcional: Si el texto sigue pareciendo pegado, 
   asegúrate de que los enlaces tengan color rojo o blanco para que se vean bien */
.footer-links a {
    color: #F70D0D; /* O #fff si los quieres blancos */
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}

/* ================= BOTÓN PROMO ================= */

.btn-promo {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 32px;
    background-color: #F70D0D;
    color: #ffffff;

    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -1.5px;

    border: none;
    border-radius: 32px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

    /* Header mobile */
    body.pagina-blanca .header-inner {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 5px 8px !important;
    }

    body.pagina-blanca .logo-secciones {
        height: 80px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    body.pagina-blanca .nav {
        display: flex !important;
        gap: 6px !important;
    }

    body.pagina-blanca .nav a {
        font-size: 10.5px !important;
        white-space: nowrap !important;
        letter-spacing: -0.4px;
    }

    /* Nosotros mobile */
    .nosotros-contenedor {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .nosotros-titulo {
        font-size: 3rem;
    }

    .nosotros-galeria {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Botón promo mobile */
    .btn-promo {
        top: 50px;
        padding: 10px 18px;
        font-size: 0.85rem;
        letter-spacing: -0.5px;
        border-radius: 22px;
    }
}

/* ================= FIX ESPACIO NEGRO PROMO MOBILE ================= */

@media (max-width: 768px) {

    .seccion-promo,
    .promo-slider {
        height: auto !important;
        min-height: 0 !important;
    }

    .promo-dots {
        display: none !important;
    }

    .promo-slide {
        margin: 0 !important;
    }
}
/* ================= SEDES (AJUSTE DE VIDEO Y FOTO ÚNICA) ================= */
.nosotros-contenedor {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Alinea verticalmente el texto con el video */
    justify-content: space-between !important;
    gap: 40px !important;
    margin-bottom: 100px !important;
}

.sede-galeria-unica {
    flex: 0 0 50% !important; /* Mantiene el video al 50% del ancho */
    display: block !important;
    height: 550px !important; /* Altura fija para que los 3 sean iguales */
    overflow: hidden !important;
    border-radius: 12px !important;
    background-color: #000; /* Fondo negro mientras carga el video */
}

/* Aplicamos el mismo estilo a imágenes (por si dejas alguna) y a los videos */
.sede-galeria-unica img, 
.video-sede {
    width: 100% !important;
    height: 100% !important; /* Llena el contenedor de 550px */
    object-fit: cover !important; /* Corta el video para que encaje perfecto sin estirarse */
    border-radius: 12px !important;
    display: block !important;
}

/* Ajustes para Tablet y Mobile */
@media (max-width: 1024px) {
    .nosotros-contenedor {
        flex-direction: column !important; /* Texto arriba, video abajo */
        gap: 30px !important;
    }

    .sede-galeria-unica {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 350px !important; /* Altura reducida en tablets/móvil */
    }
}

@media (max-width: 480px) {
    .sede-galeria-unica {
        height: 250px !important; /* Altura más compacta para celulares pequeños */
    }
}

/* ================= PÁGINA CONTACTO (ESTILO FINAL COMPLETO) ================= */

.contacto-principal {
    padding: 100px 5% 40px !important;
    background-color: #000;
}

/* 1. PARALELISMO SUPERIOR (Título y Formulario) */
.contacto-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 40px;
}

.contacto-col-titulo {
    flex: 0 0 45%;
}

.contacto-titulo-rojo {
    color: #e30613;
    font-family: 'Inter', sans-serif;
    font-size: 5rem;
    font-weight: 800;
    line-height: 0.8;
    /* Ajuste de posición solicitado */
    margin-top: 40px !important; 
    text-align: left;
    text-transform: uppercase;
}

.contacto-formulario {
    flex: 0 0 50%; 
    max-width: 600px;
}

.campo-grupo label {
    display: block;
    color: #e30613;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.campo-grupo input, 
.campo-grupo textarea {
    width: 100%;
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #000;
    margin-bottom: 25px;
    outline: none;
    box-sizing: border-box;
}

/* 2. BOTÓN DE ENVÍO (Misma estética que Registro) */
.contenedor-envio button, 
.contenedor-envio input[type="submit"] {
    background-color: #FF0000 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important; /* Ajustado */
    border: none !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    display: inline-block !important; /* Ajustado al texto */
    width: auto !important;
    transition: 0.3s ease !important;
    border-radius: 60px !important;
    letter-spacing: 0px !important;
}

.contenedor-envio button:hover {
    background-color: #CC0000 !important;
}

/* 3. LÍNEAS ROJAS Y SECCIONES */
.linea-roja-divisor,
.linea-roja-footer {
    width: 100% !important;
    height: 1px !important;
    background-color: #e30613 !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
}

.seccion-contacto {
    background-color: #000 !important;
    padding: 60px 5% 40px !important;
    width: 100%;
}

.contacto-contenedor-inferior {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1400px;
    margin: 0 auto;
    gap: 50px;
}

.contacto-contenedor-inferior .contacto-info {
    flex: 0 0 45% !important;
    max-width: 45% !important;
}

/* 4. MAPA */
.contacto-contenedor-inferior .contacto-mapa {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

/* MAPA NEGRO TOTAL (FORZADO) */
.contacto-contenedor-inferior .contacto-mapa iframe {
    width: 100% !important;
    height: 480px !important;
    border: none !important;
    filter: grayscale(100%) invert(92%) contrast(150%) brightness(80%) hue-rotate(180deg) !important;
    display: block;
    background-color: #000 !important; /* Fondo negro por si tarda en cargar */
}

/* 5. FOOTER */
.footer-sitio {
    background-color: #000;
    padding: 0 5% 40px !important; /* Quitamos padding top para pegar raya */
    margin-top: 0 !important;
}

/* ================= CORRECCIÓN VERSIÓN MOBILE (BLINDADO) ================= */

@media (max-width: 1024px) {
    .contacto-principal {
        padding: 80px 5% 40px !important;
    }

    .contacto-flex {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .contacto-col-titulo {
        flex: 0 0 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    .contacto-titulo-rojo {
        font-size: 3rem !important;
        line-height: 0.9 !important;
        text-align: center !important;
        margin-top: 0 !important; /* En móvil no necesita tanto espacio top */
        margin-bottom: 30px !important;
    }

    .contacto-formulario {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .contacto-contenedor-inferior {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .contacto-contenedor-inferior .contacto-info,
    .contacto-contenedor-inferior .contacto-mapa {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    .contacto-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .numero-contacto {
        font-size: 2.2rem !important;
    }

    .img-locations {
        max-width: 280px !important;
        height: auto;
    }

    .contacto-contenedor-inferior .contacto-mapa iframe {
        height: 300px !important;
    }
}

/* ================= SECCIÓN PARTNERS (ESTILO FONDO BLANCO - ACTUALIZADO) ================= */

/* 1. CORRECCIÓN HEADER - ESTRICTO POR PÁGINA */

/* Regla para todas las páginas (Fondo Negro Limpio) */
.header-nosotros {
    background-color: #000000 !important;
    border-bottom: none !important;
}

.header-nosotros .nav a {
    color: #ffffff !important;
}

/* Regla SOLO para la página de Partners (Fondo Blanco) */
body.pagina-partners .header-nosotros {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eee !important;
}

body.pagina-partners .header-nosotros .nav a {
    color: #000000 !important;
}

/* CONTROL EXCLUSIVO DEL LOGO PARA LA PÁGINA PARTNERS */
.pagina-partners .logo-secciones {
    width: 180px; 
    height: auto;
    display: block;
    filter: none !important;
    position: relative;
    top: -5px;
}

.pagina-partners .logo {
    display: flex;
    align-items: center;
}

/* 2. HERO PARTNERS */
.partners-hero {
    padding: 120px 5% 80px;
    background-color: #ffffff;
    text-align: left;
}

.titulo-gigante-rojo {
    color: #e30613;
    font-family: 'Inter', sans-serif;
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 0.85;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.subtitulo-partners {
    color: #000000;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.9;
}

/* 3. ESTILOS GENERALES DE SECCIÓN */
.seccion-partners {
    padding: 80px 5%;
    background-color: #ffffff;
}

.titulo-seccion {
    color: #e30613;
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.copy-corto {
    color: #333333;
    font-size: 1.1rem;
    margin-top: -30px;
    margin-bottom: 40px;
}

/* 4. CORRECCIÓN EVENTOS (DONDE EL BARRIO SE PRENDE) */
.carrusel-eventos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.foto-evento {
    position: relative;
    width: 100%;
    height: 350px; 
    overflow: hidden;
}

.foto-evento img,
.video-parche {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.stamp-evento {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #e30613;
    color: #fff;
    font-weight: 800;
    padding: 5px 15px;
    transform: rotate(-5deg);
    z-index: 2;
}

/* 5. GRID DE ALIADOS (TARJETAS) */
.tarjeta-aliado {
    background-color: #ffffff; /* Fondo blanco para limpieza */
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee; /* Un borde sutil */
    transition: all 0.3s ease;
}

.tarjeta-aliado:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-color: #e30613; /* Resalta con el rojo al pasar el mouse */
}

.aliado-foto img {
    width: 100%;
    height: 300px; /* Subimos de 250px a 300px para que luzca más en Desktop */
    
    /* LA SOLUCIÓN: Centra la imagen tanto vertical como horizontalmente */
    object-fit: cover;
    object-position: center !important; 
    
    filter: none !important;
    margin-bottom: 20px;
    border-radius: 8px;
    display: block;
}

.tarjeta-aliado h3 {
    color: #000;
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.tarjeta-aliado p {
    color: #444;
    font-size: 1rem;
    line-height: 1.4;
    font-style: normal; /* Ya no es un quote, es una descripción de valor */
}

/* 6. LOGOS MONOCROMO (MARCAS QUE CONFIARON) */
.marcas-confianza {
    padding-bottom: 20px !important; /* Reducimos el espacio inferior para acercar la siguiente sección */
}

.grid-logos-monocromo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 40px; 
    padding: 40px 0;
    filter: grayscale(100%) contrast(120%);
    opacity: 0.9; 
}

.grid-logos-monocromo img {
    height: 250px; /* Logos imponentes y grandes */
    width: auto;
    max-width: 350px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.grid-logos-monocromo img:hover {
    transform: scale(1.05);
}

/* 7. CREADORES (GENTE DEL BARRIO QUE RECOMIENDA) */
.creadores-barrio {
    padding-top: 20px !important; /* Reducimos el espacio superior para pegar esta sección a los logos */
}

/* 7. INFLUENCERS FEED (NUEVO DISEÑO) */
.creadores-barrio {
    padding-top: 40px !important;
}

.contenedor-influencers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 4 columnas que se ajustan */
    gap: 20px;
    padding: 20px 0;
}

.card-influencer {
    position: relative;
    height: 450px; /* Altura uniforme tipo Story */
    border-radius: 20px;
    overflow: hidden;
    background-color: #000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.video-influencer {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Capa de degradado para que el texto resalte */
.info-influencer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    text-align: left;
}

.nombre-real {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.instagram-user {
    background-color: #e30613; /* Fondo rojo perritos */
    color: #ffffff !important; /* Letra blanca obligatoria */
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px 10px; /* Espacio interno para crear el recuadro */
    display: inline-block; /* Permite que el fondo se vea correctamente */
    margin-top: 10px;
    transition: 0.3s;
    pointer-events: auto; /* Para que el link sea clickeable sobre el video */
}

.instagram-user:hover {
    background-color: #ffffff;
    color: #e30613 !important;
}
}

.instagram-user:hover {
    color: #ffffff;
}

/* Ajuste para que en móviles no queden gigantes */
@media screen and (max-width: 768px) {
    .contenedor-influencers {
        grid-template-columns: repeat(2, 1fr); /* 2 por fila en móvil */
    }
    .card-influencer {
        height: 350px;
    }
}

/* 8. CTA FINAL CON FOTO */
.cta-partners {
    padding: 80px 5%;
    background-color: #ffffff;
}

.caja-cta-roja {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('imagenes/background-cta.jpg') no-repeat center center;
    background-size: cover !important;
    padding: 100px 5% !important;
    text-align: center;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.caja-cta-roja h2 {
    color: #ffffff !important;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.boton-negro-partners {
    display: inline-block;
    background-color: #e30613; 
    color: #fff;
    padding: 10px 25px;
    font-size: 0.9rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    transition: 0.3s;
    border: none;
    cursor: pointer;
    margin-top: 25px; 
}

.boton-negro-partners:hover {
    background-color: #ffffff;
    color: #000000;
}

/* AJUSTE PARA MOBILE */
@media screen and (max-width: 768px) {
    .pagina-partners .logo-secciones {
        width: 110px !important; 
    }

    .grid-logos-monocromo img {
        height: 120px; /* Tamaño móvil ajustado para que no rompa el diseño */
    }

    .marcas-confianza, .creadores-barrio {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

.card-influencer {
    cursor: pointer; /* Indica que se puede interactuar */
}

/* Opcional: un efecto de "Play" visual cuando el video está pausado */
.card-influencer:after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    opacity: 0.5;
    pointer-events: none;
    transition: 0.3s;
}

/* Ocultar el icono de play cuando el video está corriendo */
.card-influencer.playing:after {
    opacity: 0;
}

/* ================= SECCIÓN TRABAJA CON NOSOTROS ================= */

.pagina-talento {
    background-color: #000000;
    color: #ffffff;
}

.seccion-trabaja {
    /* Aumentado a 180px para separar del header */
    padding: 180px 5% 80px;
}

.contenedor-dos-columnas {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.columna-titulo {
    flex: 1;
    min-width: 300px;
}

.titulo-talento {
    font-size: 6rem;
    font-weight: 800;
    line-height: 0.85; 
    color: #e30613;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.subtitulo-rojo-talento {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 40px;
    text-transform: none;
    line-height: 1;
    letter-spacing: -1px;
}

.columna-formulario {
    flex: 1;
    min-width: 350px;
    background-color: #111;
    padding: 40px;
    border-radius: 4px;
}

/* Estilo Formulario */
.formulario-talento input, 
.formulario-talento select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #333;
    padding: 15px 0;
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.fila-form {
    display: flex;
    gap: 20px;
}

.fila-form label {
    font-size: 0.8rem;
    color: #e30613;
    display: block;
    margin-top: 15px;
}

.adjuntar-cv {
    margin: 20px 0;
    padding: 20px;
    border: 2px dashed #333;
    text-align: center;
}

.adjuntar-cv label {
    cursor: pointer;
    font-weight: 700;
    color: #e30613;
}

.formulario-talento .boton-negro-partners {
    font-weight: 400 !important;
    letter-spacing: -1px;          
    margin-top: 25px;   
    cursor: pointer;
    display: inline-block;
}

/* 3 VACANTES GRID */
.vacantes-grid {
    padding: 80px 5%;
    background-color: #0a0a0a;
}

.titulo-seccion-negra {
    color: #e30613;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 40px;
    text-align: center;
}

.contenedor-vacantes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.imagen-vacante {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.imagen-vacante img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.overlay-vacante {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(227, 6, 19, 0.9));
    padding: 20px;
}

.overlay-vacante h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.tarjeta-vacante p {
    margin-top: 15px;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.4;
}

.tarjeta-vacante:hover img {
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
    .seccion-trabaja { padding-top: 150px !important; }
    .titulo-talento { font-size: 3.5rem; }
    .subtitulo-rojo-talento { font-size: 1.4rem; }
    .fila-form { flex-direction: column; gap: 0; }
}

@media (max-width: 1024px) {
    .titulo-gigante-rojo { font-size: 3.5rem; }
    .caja-cta-roja h2 { font-size: 2.2rem; }
}

select option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.formulario-talento select {
    color: #ffffff !important;
}

/* =================--- AJUSTES SOLO PARA PÁGINA REGISTRO ===========--- */

/* 1. Eliminamos el colchón superior de la sección */
.pagina-registro .seccion-trabaja {
    padding-top: 40px !important; 
    margin-top: 80px !important;
}

/* 2. Eliminamos el margen del título que empuja hacia abajo */
.pagina-registro .titulo-talento {
    font-size: 4rem; 
    margin-top: 0px !important; /* Cambiado de 40px a 0px */
    padding-top: 0px !important;
    display: block;                
}

/* 3. Ajustamos el formulario para que también suba */
.pagina-registro .columna-formulario {
    margin-top: 0px !important; /* Cambiado de 40px a 0px */
}

.pagina-registro .subtitulo-rojo-talento {
    font-size: 1.2rem; 
    text-transform: none;      
}

.pagina-registro .titulo-seccion-negra {
    font-size: 3.5rem;            
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    line-height: 0.8; 
    letter-spacing: -2px; 
    background: linear-gradient(90deg, #e30613 0%, #ff8000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block; 
}

.contenedor-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 20px;
      text-align: left;
    }

    .contenedor-checkbox input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      margin-top: 3px;
      accent-color: #e30613; /* El rojo de tu marca */
    }

    .contenedor-checkbox label {
      font-size: 0.75rem;
      color: #ffffff;
      line-height: 1.4;
      cursor: pointer;
    }

    .contenedor-checkbox a {
      color: #e30613;
      text-decoration: underline;
      font-weight: bold;
    }

/* 4. Ajustes de Promos y Tarjetas (NUEVO) */
.contenedor-vacantes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.tarjeta-vacante {
    background: #111; /* Fondo oscuro para que resalte el texto */
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #333;
    transition: 0.3s;
}

.tarjeta-vacante:hover {
    transform: translateY(-10px);
    border-color: #e30613;
}

.imagen-vacante {
    position: relative;
    width: 100%;
    height: 250px; /* Altura controlada */
    overflow: hidden;
}

.imagen-vacante img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto evita que las fotos se estiren feo */
}

.tarjeta-vacante p {
    padding: 20px;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}

/* ================= AJUSTES SOLO PARA MÓVIL (PÁGINA REGISTRO) ================= */

@media (max-width: 768px) {
    /* 1. Quitamos el espacio de abajo de la sección del formulario */
    .pagina-registro .seccion-trabaja {
        padding-top: 0px !important;
        padding-bottom: 20px !important; /* Reducimos el espacio de salida */
    }

    /* 2. Quitamos el espacio de arriba de la sección de vacantes */
    .pagina-registro .vacantes-grid {
        padding-top: 20px !important; /* Une la sección negra con la de arriba */
    }

    /* 3. Ajustamos el título negro para que no tenga margen superior */
    .pagina-registro .titulo-seccion-negra {
        margin-top: 0px !important;
        font-size: 2.2rem !important;
        line-height: 0.95 !important;
    }

    .pagina-registro .titulo-talento {
        font-size: 2.8rem !important;  
        line-height: 1 !important;
        text-align: center !important;
        letter-spacing: -1px !important;
        margin-top: 10px !important; 
    }

    .pagina-registro .subtitulo-rojo-talento {
        font-size: 1rem !important;
        text-align: center !important;
        display: block;
        margin-top: 25px !important;
        margin-bottom: 60px !important;
    }

    .pagina-registro .columna-formulario {
        margin-top: 0px !important;
        width: 100%;
    }

    .pagina-registro .contenedor-dos-columnas {
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Espacio entre el texto de arriba y el formulario */
    }
    
    .contenedor-vacantes {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
}
/* ================================================= */
/* 1. CONFIGURACIÓN GLOBAL Y HEADER                  */
/* ================================================= */

.body-menu-exclusivo {
    background-color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0;
    padding: 0;
    color: #333;
}

.body-menu-exclusivo .header-nosotros {
    background-color: #ffffff !important;
    padding: 20px 0 !important; 
    border: none !important;
    position: relative;
}

.body-menu-exclusivo .header-inner {
    /* CAMBIO CLAVE: Quitamos el límite de 1200px para que el logo toque el borde de la pantalla */
    max-width: 100% !important; 
    width: 100%;
    margin: 0; 
    padding: 0; 
    
    position: relative;
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    height: 100px;
    overflow: hidden;
}

/* EL LOGO: Con su pared protectora mejorada */
.body-menu-exclusivo .logo {
    position: relative;
    z-index: 100; 
    background-color: #ffffff; 
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px; /* Un poco menos en móvil para ganar espacio */
    padding-right: 30px; 
    margin: 0;
}

/* LA PARED: Ahora con 100vw para asegurar que cubra todo el lateral en cualquier pantalla */
.body-menu-exclusivo .logo::before {
    content: "";
    position: absolute;
    top: 0;
    /* Cambiamos el anclaje para que sea más agresivo */
    right: 95%; 
    width: 200vw; /* Aumentamos a 200 veces el ancho de pantalla */
    height: 100%;
    background-color: #ffffff; 
    z-index: 101;
}

.body-menu-exclusivo .logo-secciones {
    height: 120px;
    width: auto;
}

/* FRASE DESLIZANTE (DESKTOP) */
.frase-deslizante-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.frase-deslizante {
    white-space: nowrap;
    color: #e30613;
    font-size: 3rem;
    font-weight: 700;
    position: absolute;
    animation: deslizarIzquierda 15s linear infinite;
    line-height: 1;
}

@keyframes deslizarIzquierda {
    0% { transform: translateX(100vw); } 
    100% { transform: translateX(-100%); }
}

/* ================================================= */
/* 2. NAVEGACIÓN Y CATEGORÍAS                        */
/* ================================================= */

.body-menu-exclusivo .categorias-menu {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1000;
    margin-top: 30px; 
    border-top: 1px solid #e30613 !important;   
    border-bottom: 1px solid #e30613 !important; 
    display: block !important; 
    overflow: hidden;
}

.body-menu-exclusivo .categorias-contenedor {
    max-width: 1200px;
    margin: 0 auto;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    overflow-x: auto; 
    padding: 0 10px;
}

.body-menu-exclusivo .categorias-contenedor::-webkit-scrollbar { display: none; }

.body-menu-exclusivo .cat-item {
    text-decoration: none;
    color: #000000;
    font-weight: 700;
    font-size: 11px;
    padding: 18px 15px;
    white-space: nowrap; 
    text-transform: uppercase;
    transition: 0.3s;
    display: inline-block !important;
    cursor: pointer;
}

.body-menu-exclusivo .cat-item.active, 
.body-menu-exclusivo .cat-item:hover {
    color: #e30613;
}

.body-menu-exclusivo .seccion-menu {
    display: none !important;
}

.body-menu-exclusivo .seccion-menu.active {
    display: block !important;
}

/* ================================================= */
/* 3. GRID DE PRODUCTOS Y TARJETAS                   */
/* ================================================= */

.body-menu-exclusivo .titulo-categoria {
    font-size: 28px !important;
    font-weight: 900;
    margin: 60px 0 30px 0;
    color: #000;
    text-transform: uppercase;
}

.body-menu-exclusivo .contenido-menu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.body-menu-exclusivo .grid-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.body-menu-exclusivo .tarjeta-producto {
    background: #ffffff;
    border: 1px solid #f2f2f2;
    border-radius: 15px;
    height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease;
}

.body-menu-exclusivo .tarjeta-producto:hover {
    transform: translateY(-5px);
    border-color: #e30613;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.body-menu-exclusivo .producto-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

.body-menu-exclusivo .producto-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.body-menu-exclusivo .producto-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.body-menu-exclusivo .producto-info h3 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}

.body-menu-exclusivo .precio {
    color: #e30613;
    font-weight: 800;
    font-size: 18px;
}

/* ================================================= */
/* 4. DISEÑO DE MODAL (POP-UP) - VERSIÓN FINAL       */
/* ================================================= */

.body-menu-exclusivo .modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0; top: 0; 
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.body-menu-exclusivo .modal-contenido {
    background: #ffffff;
    width: 95%;
    max-width: 1100px;
    height: 600px; /* Altura fija para mantener tu diseño original */
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row; /* Mantiene las dos columnas que te gustan */
}

/* Reducimos un poco la imagen (45%) para darle más pista al texto (55%) */
.body-menu-exclusivo .modal-img-container {
    flex: 0 0 45%; 
    height: 100%;
    background-color: #f9f9f9;
}

.body-menu-exclusivo .modal-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.body-menu-exclusivo .modal-detalle {
    flex: 0 0 55%; /* Más espacio para que HAMBURGUESA quepa entera */
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto; /* Si la descripción es larga, sale scroll solo aquí */
}

.body-menu-exclusivo #modalNombre {
    color: #e30613;
    /* Mantenemos el tamaño impactante con un ajuste de seguridad */
    font-size: clamp(3rem, 4.5vw, 4.5rem); 
    font-weight: 900;
    line-height: 0.85;
    margin-bottom: 20px;
    text-transform: uppercase;
    
    /* SEGURIDAD PARA LA ÚLTIMA LETRA */
    display: block;
    width: 100%;
    padding-right: 15px;      /* Crea un espacio de aire al final para la letra */
    overflow: visible;        /* Si la letra se asoma un poco, que se vea */
    word-break: keep-all;     /* No rompe palabras */
    white-space: normal;      /* Permite bajar a la siguiente línea por palabra */
    letter-spacing: -1.5px;   /* Un pelín más de aire que antes para que no se pisen */
    box-sizing: border-box;   /* Asegura que el padding no estire la caja */
}

.body-menu-exclusivo #modalDesc {
    color: #000;
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.body-menu-exclusivo #modalPrecio {
    font-size: 2.5rem;
    color: #e30613;
    font-weight: 900;
    margin-bottom: 30px;
}

.body-menu-exclusivo .btn-pedir {
    background-color: #e30613;
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0; /* Que el botón no se deforme nunca */
}

.body-menu-exclusivo .cerrar-modal {
    position: absolute;
    top: 25px; right: 30px;
    color: #000;
    font-size: 35px;
    cursor: pointer;
    z-index: 10;
}

/* ================================================= */
/* 5. FOOTER                                         */
/* ================================================= */

.body-menu-exclusivo .footer-sitio {
    background-color: #111111 !important; 
    padding: 30px 0 10px 0 !important;
    margin-top: 100px !important;
    width: 100% !important;
}

/* ================================================= */
/* 6. RESPONSIVE (MÓVIL)                             */
/* ================================================= */

@media (max-width: 900px) {
    .frase-deslizante-container { display: none; }
    
    .body-menu-exclusivo .header-inner { height: auto; padding: 20px; }
    .body-menu-exclusivo .logo-secciones { height: 80px; }

    .body-menu-exclusivo .modal-contenido {
        flex-direction: column !important;
        height: auto !important;
        max-height: 95vh !important;
        display: block !important;
    }

    .body-menu-exclusivo .modal-img-container {
        width: 100% !important;
        height: 250px !important;
    }

    .body-menu-exclusivo .modal-detalle {
        width: 100% !important;
        padding: 20px !important;
    }

    .body-menu-exclusivo #modalNombre { font-size: 2.2rem !important; }
    .body-menu-exclusivo #modalPrecio { font-size: 1.8rem !important; }
}

@media (max-width: 900px) {
    /* 1. ACTIVAR Y AJUSTAR LA FRASE EN MÓVIL */
    .frase-deslizante-container { 
        display: flex !important; 
        height: 100%;
        top: 0;
        z-index: 5; /* Aseguramos que esté por debajo del logo */
    }

    .frase-deslizante {
        font-size: 1.5rem !important; 
        font-weight: 800;
        animation: deslizarIzquierda 10s linear infinite !important; 
    }

    /* 2. AJUSTAR EL HEADER Y SUBIR EL BLOQUE DE ABAJO */
    .body-menu-exclusivo .header-nosotros {
        padding: 5px 0 !important; /* Reducimos el espacio del header para subir todo */
    }

    .body-menu-exclusivo .header-inner { 
        height: 70px !important; /* Un poco más bajito para ganar espacio */
        padding: 0 5px !important; 
    }

    .body-menu-exclusivo .logo-secciones { 
        height: 55px !important; 
    }

    .body-menu-exclusivo .logo {
        padding-right: 15px !important;
        padding-left: 5px !important;
    }

    /* ESTO SUBE LAS CATEGORÍAS (LA LÍNEA ROJA) HACIA EL LOGO */
    .body-menu-exclusivo .categorias-menu {
        margin-top: 0px !important; /* Eliminamos el espacio de 30px */
    }

    /* 3. MODAL (POP-UP) */
    .body-menu-exclusivo .modal-contenido {
        flex-direction: column !important;
        height: auto !important;
        max-height: 95vh !important;
        display: block !important;
    }

    .body-menu-exclusivo .modal-img-container {
        width: 100% !important;
        height: 220px !important;
    }

    .body-menu-exclusivo .modal-detalle {
        width: 100% !important;
        padding: 20px !important;
    }

    .body-menu-exclusivo #modalNombre { font-size: 1.8rem !important; }
    .body-menu-exclusivo #modalPrecio { font-size: 1.5rem !important; }
}
/* FUERZA EL FONDO BLANCO EN EL CONTENEDOR DEL MENÚ */
    .body-menu-exclusivo, 
    .body-menu-exclusivo .contenido-menu, 
    .body-menu-exclusivo .seccion-menu {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    /* ASEGURA QUE LAS TARJETAS DE PRODUCTO NO SE VEAN MAL */
    .body-menu-exclusivo .tarjeta-producto {
        background-color: #ffffff !important;
        border: 1px solid #f2f2f2 !important;
    }

    /* SI LOS TÍTULOS DE LAS CATEGORÍAS SE PERDIERON, LOS PARAMOS EN NEGRO */
    .body-menu-exclusivo .titulo-categoria {
        color: #000000 !important;
    }

    /* AJUSTE DEL TEXTO DE LAS CATEGORÍAS (EL SCROLL HORIZONTAL) */
    .body-menu-exclusivo .categorias-menu {
        background-color: #ffffff !important;
    }
}

.boton-texto-simple {
    /* Quitamos cualquier rastro de botón */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;

    /* Estilo de texto */
    color: #e30613 !important; /* Tu rojo */
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem; /* Un poco más grande para que resalte */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    
    /* Centrado y espacio */
    display: block;
    width: 100%;
    margin: 20px auto;
    padding: 10px;
    transition: all 0.2s ease;
}

/* El efecto al poner el mouse */
.boton-texto-simple:hover {
    font-weight: 800 !important;
    background: transparent !important; /* Aseguramos que no salga fondo */
}

/* Para evitar que en móviles salga un recuadro gris al tocarlo */
.boton-texto-simple:active {
    background: transparent !important;
}

/* ================================================================
   SOLUCIÓN DEFINITIVA PARA DESKTOP Y MOBILE (TEXTO ALINEADO)
   ================================================================ */

/* 1. ESTO AFECTA A DESKTOP (PC) */

/* Alineación de tarjetas */
.menu-destacado .grid-menu .item-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Alineación de títulos para que los párrafos empiecen igual */
.menu-destacado .grid-menu .item-menu h3 {
    text-align: center !important;
    margin-bottom: 5px !important;
    min-height: 2.2em !important; /* Reserva espacio para 2 líneas de título */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.menu-destacado .grid-menu .item-menu p {
    width: 70% !important;           /* Tu medida original */
    max-width: 60% !important;        /* Tu medida original */
    margin: 15px auto !important;    
    display: block !important;
    
    /* Alineación y Estética */
    text-align: center !important;
    text-align-last: center !important;
    font-size: 1rem !important;
    line-height: 0.9 !important;     /* Tu interlineado pegadito */
    color: #000000 !important;       /* Tu color negro */
}

/* 2. ESTO AFECTA A MÓVIL (Celulares) */
@media (max-width: 768px) {
    .menu-destacado {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .menu-destacado h2 {
        margin-bottom: 10px !important;
    }

    .menu-destacado .subtext {
        margin-bottom: 0px !important; 
        line-height: 1 !important;
    }

    /* Grid de 2 columnas */
    .menu-destacado .grid-menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 0px !important;
        padding-top: 0px !important;
    }

    /* REDUCCIÓN DE ESPACIO ENTRE IMAGEN Y TEXTO */
    .menu-destacado .grid-menu .item-menu img {
        margin-bottom: 5px !important; /* Reduce el espacio debajo de la foto */
    }

    .menu-destacado .grid-menu .item-menu h3 {
        min-height: 2.8em !important; /* Ajustado ligeramente */
        font-size: 0.95rem !important;
        margin-top: 0px !important;    /* QUITAMOS el margen superior del título */
        margin-bottom: 0px !important; /* Quitamos margen inferior para que el <p> suba */
        line-height: 1.1 !important;
    }

    .menu-destacado .grid-menu .item-menu p {
        width: 90% !important;
        max-width: 90% !important;
        font-size: 0.85rem !important;
        line-height: 1.1 !important;
        margin: 5px auto !important; /* Pegamos el párrafo más al título */
    }
}

/* --- ESTILOS PARA LA PÁGINA DE TÉRMINOS --- */

/* Contenedor principal para centrar el texto */
/* RAYA ROJA SUPERIOR */
.raya-separadora-roja {
    width: 100%;
    height: 1px;
    background-color: #FF0000 !important;
    display: block !important;
    margin: 10px;
    padding: 0;
}

.seccion-terminos {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: sans-serif; /* Subtextos en Sans Serif */
    color: #000000; /* Letra negra */
    line-height: 1.6;
}

/* Títulos en ROJO e INTER BOLD */
.seccion-terminos h1, 
.seccion-terminos h2 {
    color: #FF0000 !important; /* Forzamos el color rojo */
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

.seccion-terminos h1 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.seccion-terminos h2 {
    font-size: 1.2rem;
    margin-top: 35px;
    margin-bottom: 15px;
}

/* Estilos de párrafos y listas */
.seccion-terminos p {
    margin-bottom: 15px;
}

.seccion-terminos ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.seccion-terminos .negrita {
    font-weight: bold;
}

.seccion-terminos .actualizacion {
    font-style: italic;
    color: #555;
}

/* --- ESTILO DEL ITEM VOLVER --- */
.btn-volver-container {
    margin-top: 60px;
    text-align: left;
    padding-bottom: 40px;
}

.volver-link {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: #FF0000;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2rem;
    display: inline-block;
}

.volver-link:hover {
    opacity: 0.7;
}

/* --- RESPONSIVE / MOBILE --- */

@media (max-width: 768px) {
    /* Ajuste del Título H1 en Mobile */
    .seccion-terminos h1 {
        line-height: 1 !important; /* Reduce el espacio entre líneas */
        font-size: 2.5rem !important; /* Tamaño un poco más pequeño para celulares */
        margin-top: 30px !important;
        margin-bottom: 15px !important;
    }
    
    .seccion-terminos h2 {
        line-height: 1 !important;      /* Reduce el espacio entre líneas */
        letter-spacing: -0.5px !important; /* Reduce el espacio entre caracteres (valor negativo junta las letras) */
        font-size: 1.3rem !important;      /* Tamaño ajustado para pantallas pequeñas */
        margin-top: 25px !important;       /* Espacio superior del título */
        margin-bottom: 10px !important;    /* Espacio inferior antes del párrafo */
    }

    /* Ajuste de la Línea Roja en Mobile */
    .raya-separadora-roja {
        margin-top: 0px !important;    /* Reduce espacio con el header */
        margin-bottom: 10px !important; /* Reduce espacio con el contenido */
    }

    /* Ajuste de márgenes generales en mobile para que no se vea apretado */
    .seccion-terminos {
        margin-top: 10px !important;
        padding: 0 15px !important;
    }

    /* Reducir espacio del botón volver con el footer en mobile */
    .btn-volver-container {
        margin-top: 25px !important;
        margin-bottom: 5px !important;
    }
}

/* ================= PÁGINA CATERING ================= */

.catering {
    background-color: #000;
    color: #fff;
    font-family: 'Inter', sans-serif;
    padding-top: 120px; /* Espacio para el header fijo */
}

/* Estilos Generales de Secciones */
.catering section {
    padding: 80px 10%;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.catering h2 {
    color: #e30613;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1;
}

.catering p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #ccc;
}

/* Botones con el estilo de la marca */
.btn-principal, .btn-secundario {
    display: inline-block;
    padding: 15px 35px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 60px;
    transition: 0.3s ease;
    font-size: 0.9rem;
    margin: 10px;
}

.btn-principal {
    background-color: #e30613;
    color: #fff !important;
}

.btn-principal:hover {
    background-color: #fff;
    color: #e30613 !important;
}

.btn-secundario {
    background-color: transparent;
    color: #fff !important;
    border: 2px solid #fff;
}

.btn-secundario:hover {
    background-color: #fff;
    color: #000 !important;
}

/* 1. HERO */
.catering-hero {
    /* 1. Quitamos el centrado vertical automático que causa el choque */
    justify-content: flex-start !important; 
    
    /* 2. Empujamos TODO el contenido hacia abajo */
    /* Si el logo mide 100px, necesitamos al menos 150px para que se vea bien */
    padding-top: 160px !important; 
    
    /* 3. Aseguramos que la imagen de fondo empiece desde arriba pero el texto no */
    background-origin: border-box;
    
    /* 4. Mantenemos una altura mínima para que no se vea aplastado */
    min-height: 80vh !important;
    height: auto !important;
}

.catering-hero h1 {
    font-size: 5rem;
    font-weight: 800;
    color: #fff;
    line-height: 0.9;
    margin-top: 20px !important;
}

.catering-subtitle {
    font-size: 1.5rem !important;
    color: #e30613 !important;
    font-weight: 600;
}

/* 2. BENEFICIOS (LISTA) */
.catering-beneficios, .catering-menu-lista {
    list-style: none;
    padding: 0;
    margin: 40px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    text-align: left;
}

.catering-beneficios li, .catering-menu-lista li {
    font-size: 1.3rem;
    font-weight: 600;
    padding: 15px;
    background: #111;
    border-left: 5px solid #e30613;
}

/* 3. EVENTOS GRID */
.eventos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.eventos-grid span {
    background: #e30613;
    padding: 10px 20px;
    font-weight: 700;
    border-radius: 5px;
    font-size: 1rem;
}

/* 4. PASOS CÓMO FUNCIONA */
.pasos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.paso {
    background: #111;
    padding: 40px 20px;
    border-radius: 15px;
}

.paso strong {
    font-size: 4rem;
    color: #e30613;
    display: block;
    margin-bottom: 10px;
}

/* ESTILO PARA LOS SUBTEXTOS DE PASOS */

.paso p {
    margin-bottom: 5px !important; /* Pega un poco más el título al subtexto */
    font-weight: bold;
    line-height: 1;
}

.subtexto-paso {
    display: block;          /* Para que siempre baje a una línea nueva */
    font-size: 0.9rem;       /* Un poco más pequeño que el texto normal */
    color: rgba(255, 255, 255, 0.7); /* Blanco un poco transparente para dar jerarquía */
    line-height: 1;        /* Espacio entre líneas para que sea fácil de leer */
    margin-top: 5px;
    max-width: 250px;        /* Evita que el texto sea demasiado ancho y se vea mal */
    margin-left: auto;       /* Centra el subtexto si el contenedor es ancho */
    margin-right: auto;
}

/* Ajuste opcional para el paso 3 que es más largo */
.paso:last-child .subtexto-paso {
    max-width: 300px; 
}

/* 5. TESTIMONIOS (ACTUALIZADO) */
.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.testimonios-grid p {
    background: #1a1a1a;
    padding: 30px 25px; /* Un poco más de aire interno */
    border-radius: 15px;
    font-style: normal; /* Quitamos la itálica general para controlar cada parte */
    text-align: left; /* Se lee mejor si los testimonios están a la izquierda */
    border-bottom: 3px solid #e30613; /* Un detalle de marca abajo */
    display: flex;
    flex-direction: column;
}

.testimonio-cita {
    display: block;
    color: #fff; /* Blanco puro para resaltar */
    font-size: 1.3rem; /* Tamaño tipo título */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    font-style: italic; /* La frase sí conserva la itálica */
}

.testimonio-detalle {
    display: block;
    color: #ccc; /* Gris para el subtexto */
    font-size: 0.95rem; /* Más pequeño para jerarquía */
    line-height: 1.5;
    font-weight: 400;
}

/* 6. CTA FINAL */
.catering-cta-final {
    background-color: #111;
    border-top: 2px solid #e30613;
}

/* ================= VERSIÓN MOBILE (BLINDADA) ================= */

@media (max-width: 1024px) {
    .catering section {
        padding: 60px 5%;
    }

    .catering-hero h1 {
        font-size: 3rem;
    }

    .catering h2 {
        font-size: 2.2rem;
    }

    .catering-beneficios, .catering-menu-lista {
        grid-template-columns: 1fr; /* Lista en una sola columna */
    }

    .pasos-grid, .testimonios-grid {
        grid-template-columns: 1fr; /* Pasos uno debajo del otro */
    }

    .paso {
        padding: 25px;
    }

    .catering-hero {
        height: auto;
        padding: 120px 5% 80px;
    }

    .btn-principal, .btn-secundario {
        width: 100%; /* Botones ancho completo en móvil */
        margin: 10px 0;
        box-sizing: border-box;
    }
}

/* ================= PÁGINA RESPONSABILIDAD SOCIAL ================= */

.rs-principal {
    background-color: #000;
    color: #ffffff;
    padding-top: 120px !important; /* Espacio para el header */
}

.rs-principal section {
    padding: 80px 10%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

/* 1. HERO */
.titulo-gigante-rojo {
    color: #e30613;
    font-family: 'Inter', sans-serif;
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 0.85;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.rs-subtexto {
    font-size: 1.5rem;
    font-weight: 400;
    color: #ffffff;
    max-width: 700px;
    margin: 0 auto;
    line-height: 0.85;
}

/* 2. QUÉ SIGNIFICA */
.rs-contenedor-corto {
    max-width: 800px;
    margin: 0 auto;
}

.subtitulo-rojo {
    color: #e30613;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.rs-contenedor-corto p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #cccccc;
}

/* 3. PILARES DE IMPACTO (CARDS) */
.rs-grid-pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.pilar-card {
    background: #111;
    padding: 50px 30px;
    border-radius: 20px;
    transition: transform 0.3s ease;
    border: 1px solid #222;
}

.pilar-card:hover {
    transform: translateY(-10px);
    border-color: #e30613;
}

.pilar-icono {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.pilar-card h3 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.pilar-card p {
    font-size: 1rem;
    color: #999;
    line-height: 1.5;
}

/* 4. ACCIONES CONCRETAS */
.acciones-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
    text-align: left;
}

.accion-item {
    background: #111;
    padding: 25px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.accion-item span {
    color: #e30613;
    font-size: 1.5rem;
    font-weight: 800;
}

/* 5. MENSAJE DE MARCA */
.frase-impacto {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.frase-impacto span {
    color: #e30613;
}

/* 6. CTA FINAL */
.rs-botones-flex {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.btn-rs-principal, .btn-rs-secundario {
    padding: 15px 35px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 60px;
    transition: 0.3s;
    font-size: 0.9rem;
}

.btn-rs-principal {
    background-color: #e30613;
    color: #fff !important;
}

.btn-rs-secundario {
    border: 2px solid #fff;
    color: #fff !important;
}

.btn-rs-principal:hover, .btn-rs-secundario:hover {
    background-color: #fff;
    color: #000 !important;
}

/* ================= VERSIÓN MOBILE (RESPONSIVE) ================= */

@media (max-width: 1024px) {
    .rs-principal {
        padding-top: 100px !important;
    }

    .titulo-gigante-rojo {
        font-size: 3rem !important;
    }

    .rs-grid-pilares, .acciones-lista {
        grid-template-columns: 1fr;
    }

    .frase-impacto {
        font-size: 2.2rem;
    }

    .rs-botones-flex {
        flex-direction: column;
    }

    .btn-rs-principal, .btn-rs-secundario {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ================= PÁGINA MOMENTOS DEL BARRIO (MURAL WOW) ================= */

/* EL CONTENEDOR PADRE: Debe permitir que el hijo flote */
.momentos-layout {
    display: flex;
    background-color: #000;
    position: relative;
    padding-top: 90px;
    align-items: flex-start; /* CRUCIAL: evita que el sidebar crezca con el grid */
}

/* EL ASIDE (SIDEBAR): Ahora es una columna fija al lado del grid */
.sidebar-titulo {
    width: 140px;
    position: -webkit-sticky;
    position: sticky;
    top: 90px; /* Se pega al header */
    height: calc(100vh - 90px); /* Altura de la ventana */
    display: flex;
    align-items: center; /* Centra el título verticalmente en la pantalla */
    justify-content: center;
    background-color: #000;
    z-index: 10;
    flex-shrink: 0; /* Evita que el grid lo aplaste */
}

/* EL TÍTULO: Sin márgenes que lo muevan */
.titulo-vertical-solido {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Inter', sans-serif;
    font-size: 6.5vh;
    font-weight: 900;
    color: #e30613;
    white-space: nowrap;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 !important; /* Forzamos que no tenga margen */
}

/* EL GRID DE FOTOS: El que sí debe hacer scroll */
.mural-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 12px;
    padding: 20px 40px 80px 20px;
}

.foto-item {
    position: relative;
    overflow: hidden;
    background-color: #111;
    border-radius: 4px;
}

.foto-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.7);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. CLASES DE TAMAÑO */
.foto-item.grande {
    grid-column: span 2;
    grid-row: span 2;
}

.foto-item.vertical {
    grid-row: span 2;
}

.foto-item.horizontal {
    grid-column: span 2;
}

/* 4. EFECTO HOVER */
.foto-item:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.08);
}

.foto-item:hover::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(227, 6, 19, 0.4), transparent);
    pointer-events: none;
}

/* ================= VERSIÓN MOBILE (DISEÑO LIMPIO Y ORDENADO) ================= */

@media (max-width: 1024px) {
    /* 1. Cambiamos de filas a columnas: Título arriba, Mural abajo */
    .momentos-layout {
        flex-direction: column !important;
        padding-top: 70px !important; /* Ajuste para header de móvil */
        display: block !important;    /* Quitamos el flex para evitar estiramientos */
    }

    /* 2. El título ahora es un encabezado normal arriba */
    .sidebar-titulo {
        width: 100% !important;
        height: auto !important;
        position: relative !important; /* Deja de ser sticky en móvil */
        top: 0 !important;
        padding: 30px 20px !important;
        background-color: #000;
    }

    .titulo-vertical-solido {
        writing-mode: horizontal-tb !important; /* Texto horizontal */
        transform: rotate(0) !important;
        font-size: 2.2rem !important; /* Tamaño legible en celular */
        white-space: normal !important;
        text-align: center !important;
        display: block !important;
    }

    /* 3. El Mural: 2 columnas fijas que no se deforman */
    .mural-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Dos columnas iguales */
        grid-auto-rows: 150px !important; /* Altura base de cada celda */
        gap: 8px !important;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 4. Ajuste de las fotos especiales para que no rompan el grid */
    .foto-item.grande {
        grid-column: span 2 !important; /* Ocupa todo el ancho */
        grid-row: span 2 !important;    /* Y el doble de alto */
    }

    .foto-item.vertical {
        grid-row: span 2 !important;    /* Doble de alto */
        grid-column: span 1 !important;
    }

    .foto-item.horizontal {
        grid-column: span 2 !important; /* Ocupa todo el ancho */
        grid-row: span 1 !important;
    }
}

/* ================= SELLADO QUIRÚRGICO DE BLOQUES ================= */

/* 1. Evitamos que los márgenes de los textos internos "empujen" el banner */
.catering, 
.banner-registro-slim, 
.footer-sitio {
    display: flow-root !important; /* Mantiene los márgenes adentro, sin inflar la caja */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Controlamos el párrafo interno para que no cree ese efecto "Enter" */
.banner-slim-texto {
    margin: 0 !important; /* Quitamos el margen que causa el 'Enter' */
    padding: 20px 0;      /* Ajusta este número para darle el alto que tú quieras al banner */
}

/* 3. Ajuste fino para el Footer */
.footer-sitio {
    padding-top: 0 !important;
}

.linea-roja-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
}

/* 4. Si el banner sigue teniendo un aire extraño, esto lo quita */
.banner-slim-contenedor {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ================= CENTRADO PERFECTO DEL BANNER ================= */

.banner-registro-slim {
    /* Forzamos a que el banner sea un contenedor flexible centrado */
    display: flex !important;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    align-items: center;     /* Centra horizontalmente */
    min-height: 60px;        /* Ajusta esta altura a la que desees para tu banner */
    padding: 0 !important;   /* Quitamos paddings que puedan estar empujando */
}

.banner-slim-contenedor {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-slim-texto {
    /* Reset total de márgenes y espacios */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2; /* Ajusta el espacio entre líneas si es necesario */
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre el tag, el texto y el botón */
    flex-wrap: wrap;
    justify-content: center;
}

/* Si el botón o el tag tienen márgenes que lo desplazan, los neutralizamos */
.banner-slim-tag, 
.banner-slim-boton {
    margin: 0 !important;
    display: inline-block;
    vertical-align: middle;
}

/* ================= FONDO TOTAL PAGINA CATERING ================= */

main.catering {
    /* 1. La Imagen de fondo con una capa oscura para que todo el texto sea legible */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('imagenes/catering_fondo.jpeg');

    /* 2. Ajustes para que cubra todo y no se repita */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 3. Efecto Parallax (opcional): La foto se queda fija mientras bajas */
    background-attachment: fixed; 

    /* 4. Importante: eliminamos cualquier color de fondo de las secciones internas */
    width: 100%;
}

/* Paso 3: Forzamos a que todas las secciones de Catering sean transparentes */
/* Si no hacemos esto, las secciones blancas taparán la foto */
.catering section {
    background-color: transparent !important;
    color: white; /* Cambiamos el texto a blanco para que se vea sobre el fondo oscuro */
}

/* Ajuste para que los títulos se vean bien sobre la foto */
.catering h1, .catering h2, .catering p, .catering li {
    color: #ffffff !important;
}

/* ================= QUITAR FONDO NEGRO DEL TEXTO HERO CATERING ================= */

/* 1. Quitamos fondo al contenedor del título y subtítulo */
.catering-hero, 
.catering-hero h1, 
.catering-subtitle {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. Si el texto se pierde un poco con la foto, le damos fuerza con sombra */
.catering-hero h1 {
    color: #ffffff !important;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8); /* Esto hace que resalte sin necesidad de fondo negro */
}

.catering-subtitle {
    color: #ffffff !important;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
}

/* SEPARACIÓN FÍSICA DE BLOQUES */

.catering {
    /* Esto crea un hueco real arriba de toda la página */
    margin-top: 100px !important; 
}

.catering-hero {
    /* Forzamos a que la sección NO se suba al techo */
    position: relative !important;
    top: 0 !important;
    
    /* Si el logo sigue encima, bajamos el contenido interno */
    padding-top: 80px !important; 
}

/* Ajuste del Header para que no "vuele" de forma descontrolada */
.header-nosotros {
    height: 100px; /* Asegúrate de que coincida con el margin-top de arriba */
}

/* ================================================= */
/* AVISO DE COOKIES - INDEPENDIENTE                  */
/* ================================================= */

/* El contenedor que flota sobre todo */
.lpdb-aviso-cookies {
    display: none; /* Se activa solo con el JS */
    position: fixed;
    bottom: 25px;
    left: 5%;
    right: 5%;
    width: 90%;
    max-width: 500px;
    background-color: #111111; /* Negro para que resalte */
    color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    z-index: 99999; /* Asegura que esté por encima de todo */
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    font-family: 'Inter', sans-serif;
    border: 1px solid #333333;
    margin: 0 auto;
}

/* El texto dentro del aviso */
.lpdb-aviso-texto {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
    text-align: center;
}

.lpdb-aviso-texto a {
    color: #e30613; /* Tu rojo */
    text-decoration: underline;
    font-weight: 600;
}

/* El botón de aceptar */
.lpdb-boton-cookies {
    display: block;
    width: 100%;
    background-color: #e30613; /* Tu rojo */
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
}

.lpdb-boton-cookies:hover {
    background-color: #b3050f; /* Un rojo más oscuro al pasar el mouse */
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 600px) {
    .lpdb-aviso-cookies {
        bottom: 15px;
        padding: 15px;
    }
    .lpdb-aviso-texto {
        font-size: 0.85rem;
    }
}

/* ================================================================
   SISTEMA EDITORIAL MASTER - LOS PERRITOS DEL BARRIO
   Versión Limpia y Optimizada (Desktop + Mobile Unificado)
================================================================ 
*/

/* 1. CONFIGURACIÓN BASE Y CONTENEDOR */
.franquicias-container {
    max-width: 1250px; /* Un poco más de aire para Desktop */
    margin: 0 auto;
    padding: 80px 20px;
    background-color: #fff;
    color: #000;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0px;
    overflow-x: hidden;
    overflow-y: visible;
}

.txt-rojo { color: #e30613; }

/* 2. TIPOGRAFÍAS Y BLOQUES EDITORIALES */
.section-editorial {
    padding: 140px 0;
    text-align: center;
    position: relative;
}

.hero-franquicias h1 {
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 700;
    margin-bottom: 60px;
    line-height: 1;
}

.subtexto-editorial {
    font-size: 22px;
    max-width: 520px;
    margin: 0 auto;
    color: #444;
    line-height: 1.2;
}

.num-grande {
    display: block;
    font-size: clamp(64px, 8vw, 100px);
    font-weight: 800;
    color: #e30613;
    line-height: 1;
    margin-bottom: 20px;
}

/* 3. GRIDS DE DATOS (DISTRIBUCIÓN UNIFORME DESKTOP) */
.grid-editorial {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 40px;
    width: 100%;
    margin: 0 auto;
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 60px;
    width: 100%;
    margin: 120px auto 0 auto;
}

.bloque-data { padding: 20px; text-align: left; }
.bloque-data h3 { font-size: 28px; font-weight: 600; margin-bottom: 10px; }
.bloque-data p { font-size: 18px; line-height: 1.2; color: #666; }

.bloque-year {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
}

.year-label {
    font-size: clamp(64px, 6vw, 90px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 20px;
}

.lista-data {
    list-style: none;
    padding: 0;
    margin: 0 auto 15px;
    font-size: 20px;
    max-width: 260px;
}

.lista-data li { margin-bottom: 10px; }
.nota-editorial { margin-top: auto; font-size: 14px; color: #999; }

.secondary-data { opacity: 0.7; }
.third-data { opacity: 0.5; }

/* 4. SECCIONES ESPECIALES (TICKET Y TEXTOS) */
.ticket-section {
    padding: 180px 20px 60px !important;
    position: relative;
}

.ticket-section h3 { font-size: 26px; font-weight: 600; }
.ticket-section p { font-size: 20px; line-height: 1.1; color: #666; margin-top: 20px; }

.statement-italic { font-style: italic; font-size: 28px; color: #333; margin-top: 20px; }

/* 5. ARREGLO FINAL: CIERRE Y MANIFIESTO (ADIÓS AL APEÑUZQUE) */
.cierre-box {
    margin-bottom: 120px !important; /* Espacio masivo entre bloques */
}

.cierre-box p {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.manifiesto-box {
    padding-top: 100px;
    border-top: 1px solid #eee; /* División sutil */
}

.manifiesto-box p:not(.texto-modalidades) {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.editorial-box h2, .manifiesto-box h2, .footer-franquicias h2 {
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.1;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* BOTONES Y MODALIDADES */
.texto-modalidades {
    font-size: 16px;
    color: #666;
    margin: 60px auto 30px auto;
    max-width: 700px;
    line-height: 1.4;
}

.contenedor-botones {
    display: flex;
    gap: 30px; /* Más espacio entre botones */
    justify-content: center;
    margin: 40px 0 60px;
    flex-wrap: wrap;
}

.btn-editorial {
    background-color: #e30613;
    color: #fff !important;
    padding: 14px 35px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-editorial:hover { background-color: #b3050f; transform: translateY(-3px); }

.frase-final {
    font-weight: 800;
    font-size: 26px;
    color: #e30613;
    margin-top: 40px;
    text-transform: uppercase;
}

.ultima-linea {
    margin-top: 40px;
    font-weight: 700;
    border-top: 2px solid #e30613;
    padding-top: 40px;
    color: #e30613;
    font-size: 34px;
}

/* 6. ILUSTRACIONES (CONTROL MAESTRO) */
.ilustracion {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.ilu-hero { top: 60%; right: 75%; width: 200px; transform: rotate(-5deg); }

.ilu-data {
    position: absolute !important;
    /* 1. ALTURA: Aumentamos de 100px a 250px para que baje */
    top: 1100px !important;  

    /* 2. POSICIÓN: Quitamos la derecha y la anclamos a la IZQUIERDA */
    left: 120px !important; 
    right: auto !important; 

    /* 3. ESTILO Y TAMAÑO */
    width: 280px !important; 
    transform: rotate(-5deg) !important; /* Inclinación hacia el otro lado */
    z-index: 2 !important;
    opacity: 0.8;
}

.ilu-operacion { top: 30%; right: 2%; width: 250px; transform: rotate(-5deg); }
.ilu-ticket-izq { top: 10%; left: -5%; width: 350px; }
.ilu-ticket-der { bottom: 0; right: -5%; width: 220px; transform: rotate(15deg); }


.ilu-cierre {
    position: absolute !important;
    /* PASO 2: La anclamos a la izquierda */
    left: -50px !important;  /* Separación pequeña del borde izquierdo */
    right: auto !important; /* Anulamos cualquier orden de ir a la derecha */
    top: 150px !important;   /* Ajusta esto para subirla o bajarla */
    width: 400px !important; 
    z-index: 10 !important;
    display: block !important;
}

.footer-franquicias {
    padding-bottom: 40px !important; /* Estaba en 140px, lo bajamos drásticamente */
}

/* 7. BLOQUE UNIFICADO MOBILE (MAX-WIDTH: 768px) */
@media (max-width: 768px) {
    .franquicias-container { padding: 40px 15px; }
    
    .section-editorial, .ticket-section, .footer-franquicias {
        padding: 60px 10px !important;
    }

    .ilustracion, .ilu-cierre { display: none !important; }

    p, h1, h2, h3, span {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .hero-franquicias h1, .footer-franquicias h2, .manifiesto-box h2 {
        font-size: 1.8rem !important;
        line-height: 1.1 !important;
    }

    .num-grande { font-size: 2.5rem !important; }

    .grid-editorial, .data-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    .bloque-data, .bloque-year {
        width: 100% !important;
        text-align: center !important;
    }

    .btn-editorial { width: 100%; max-width: 300px; }
    .ultima-linea { font-size: 1.2rem !important; margin-top: 50px; }
}

.footer-sitio { padding-top: 10px; }


/*=================== FRANQUICIAS DOS ======================*/ 

/* ESTILO EDITORIAL LPDB - FRANQUICIAS
   Optimizado para: Compactación, Impacto y Limpieza
*/

/* 1. RESET Y ESTRUCTURA */
.f2-body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: #fff;
    color: #000;
}

/* 2. CONTROL DE SECCIONES (ADIÓS HUECOS GIGANTES) */
.f2-section {
    padding: 40px 8%; 
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Ajuste específico para el Hero */
.f2-hero {
    padding-top: 100px !important;
    padding-bottom: 20px !important;
    position: relative;
    overflow: visible; 
}

/* LA IMAGEN ALINEADA AL MARGEN DERECHO */
.f2-hero-side-img {
    position: absolute;
    right: 18%;           
    top: 105%;           
    transform: translateY(-50%); 
    width: 26%;         
    z-index: 1;        
    text-align: right;
}

.f2-hero-side-img img {
    max-width: 100%;
    height: auto;
    border-radius: 12px; 
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.1)); 
}

/* 3. TIPOGRAFÍA DE IMPACTO */
.f2-display-huge {
    font-size: clamp(3.5rem, 12vw, 9rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.8;
    letter-spacing: -5px;
    margin: 0;
}

.f2-brand-tag {
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e62315; 
    margin: 10px 0 0 0;
    font-weight: 700;
}

.f2-headline {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1;
    margin: 60px 0 15px 0 !important; 
    letter-spacing: -1px;
}

.f2-subheadline {
    font-size: 1.25rem;          
    line-height: 1.2;            
    color: #444;                 
    max-width: 600px;            
    margin-bottom: 35px;         
    font-weight: 400;            
    letter-spacing: -0.2px;      
}

/* TÍTULOS MEDIANOS EN ROJO */
.f2-title-med {
    color: #e62315 !important;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 20px;
    margin-top: 0;
}

/* CONTENEDOR DE LA LISTA */
.f2-benefits-list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px; 
}

/* CADA ITEM DE LA LISTA */
.f2-benefit-item {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a1a;
    display: grid;
    grid-template-columns: 25px 1fr; 
    align-items: start;             
    padding: 12px 15px;             
    background-color: #f9f9f9;      
    border-radius: 8px;             
    line-height: 1.4;
    transition: all 0.3s ease;
}

/* LA VIÑETA ROJA */
.f2-benefit-item::before {
    content: ""; 
    width: 8px;
    height: 8px;
    background-color: #e62315; 
    margin-top: 6px;           
    border-radius: 2px;
    transform: rotate(45deg);  
}

/* EFECTO AL PASAR EL MOUSE */
.f2-benefit-item:hover {
    background-color: #fff1f0; 
    transform: translateX(5px); 
}

/* =============== CONTROL DE LA FRASE EDITORIAL (QUOTE) */
.f2-editorial-quote {
    font-size: 1.8rem;           
    font-weight: 700;            
    color: #1a1a1a;              
    text-align: center;          
    margin: 50px auto;           
    max-width: 900px;            
    line-height: 1.2;
    letter-spacing: -0.5px;
    position: relative;
    padding: 0 20px;
}

.f2-editorial-quote::before {
    content: '"';                
    color: #e62315;              
    font-size: 5rem;
    position: absolute;
    left: -20px;
    top: -20px;
    opacity: 0.3;                
}

/* 4. EL BOTÓN "ESTÉTICO" */
.f2-btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 10px; 
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.f2-btn:hover {
    background-color: #e62315 !important; 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(230, 35, 21, 0.3);
}

/* 5. GRIDS Y CONTENIDO COMPACTO */
.f2-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; 
    margin-top: 20px;
}

.f2-txt-p {
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 20px;
    max-width: 600px;  
}

.f2-txt-body {
    font-size: 1.15rem;
    line-height: 1.4;           
    color: #333333;             
    letter-spacing: -0.01em;    
    margin-bottom: 40px;        
    font-weight: 400;           
}

.f2-title-small {
    font-size: 1.5rem;          
    font-weight: 700;            
    letter-spacing: -1px;         
    text-transform: uppercase;   
    color: #e62315;              
    margin-bottom: 25px;         
    display: block;              
}

/* CONTROL DE LA BARRA DE DESTAQUE */
.f2-highlight-bar {
    border-left: 4px solid #e62315; 
    background-color: #f9f9f9;      
    padding: 20px 30px;             
    margin: 40px 0;                 
    display: inline-block;          
    width: 100%;                    
    box-sizing: border-box;
}

.f2-highlight-bar p {
    font-size: 1.4rem;              
    font-weight: 700;               
    color: #000;                    
    margin: 0;                      
    line-height: 1.2;
    letter-spacing: -0.5px;         
}

/* 6. TABLA DE COBROS ESTILO "REPORT" */
.f2-table {
    border-top: 3px solid #000;
    margin-top: 10px;
}

.f2-row {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.f2-label {
    font-weight: 800;
    font-size: 1.3rem;
}

.f2-value {
    color: #666;
    font-style: italic;
}

/* 7. BLOQUES DE COLOR SUAVE */
.f2-bg-soft {
    background-color: #f9f9f9;
}

.f2-footer-note {
    font-size: 0.95rem;          
    color: #777777;              
    font-style: italic;          
    margin-top: 25px;            
    line-height: 1.4;            
    font-weight: 400;            
    display: block;              
    letter-spacing: 0.2px;       
}

/* 1. EL CONTENEDOR DIVIDIDO (SPLIT) */
.f2-grid-split {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 60px;                      
    align-items: start;
}

/* 2. CADA BLOQUE DE CONTENIDO */
.f2-split-content {
    display: flex;
    flex-direction: column;
    gap: 15px;                      
}

/* 3. TÍTULOS DE NIVEL 3 */
.f2-h3 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #c41d11;
    text-transform: none;           
    margin: 0;
    letter-spacing: -0.5px;
}

/* 4. LA ETIQUETA ROJA DE CIERRE */
.f2-tag-red {
    display: inline-block;
    color: #e62315;                 
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    position: relative;
    padding-left: 15px;
}

.f2-tag-red::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e62315;
}

/* BLOQUE DE INCLUSIÓN */
.f2-include-box {
    background-color: #ffffff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 20px 0;
}

.f2-include-list {
    display: flex;
    flex-direction: column;
    gap: 5px; 
}

.f2-include-item {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    padding: 12px 0;
    border-bottom: 1px solid #f2f2f2;
    line-height: 1.4;
    display: flex;
    gap: 15px;
    transition: all 0.3s ease;
}

.f2-include-item span {
    color: #c41d11; 
    font-weight: 900;
    flex-shrink: 0;
}

.f2-include-item:last-child {
    border-bottom: none;
}

.f2-include-item:hover {
    padding-left: 10px;
    color: #c41d11;
    background-color: #fafafa;
}

/* BLOQUE DE CIERRE (FOOTER CTA) */
.f2-footer-cta {
    padding: 100px 8% !important; 
    text-align: center;            
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;           
    gap: 30px;                     
}

/* TÍTULO DE CIERRE MASIVO */
.f2-display-large {
    font-size: clamp(2.5rem, 6vw, 4.5rem); 
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -3px;
    text-transform: uppercase;
    color: #000;
    margin: 0;
}

/* CORRECCIÓN: CERRAMOS LA LLAVE FALTANTE AQUÍ */
.f2-display-large span {
    color: #c41d11; 
    display: block; 
}

.f2-footer-cta .f2-txt-p {
    font-size: 1.5rem;
    color: #333;
    max-width: 700px;              
    margin: 0 auto;
    line-height: 1.3;
}

.f2-footer-cta .f2-btn {
    padding: 22px 45px;            
    font-size: 1.2rem;
    background-color: #000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.f2-footer-cta .f2-btn:hover {
    background-color: #c41d11 !important; 
    transform: scale(1.05);               
}

/* 8. AJUSTES MÓVIL - VERSIÓN CORREGIDA FINAL */
@media only screen and (max-width: 768px) {

    /* LA IMAGEN SE OCULTA USANDO EL SELECTOR DEL HERO PARA MÁXIMA PRIORIDAD */
    .f2-hero .f2-hero-side-img, 
    .f2-hero-side-img,
    .f2-hero-side-img img {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        position: absolute !important;
    }

    .f2-section.f2-hero {
        padding: 60px 24px 40px !important;
        display: block !important;
    }

    /* REPARACIÓN DE LAS SECCIONES SPLIT PARA QUE NO SE VEAN FEAS */
    .f2-grid-split, 
    .f2-grid-2, 
    .f2-include-box .f2-grid-split { 
        display: block !important;
        width: 100% !important;
    }

    .f2-split-content {
        display: block !important;
        width: 100% !important;
        margin-bottom: 50px !important; 
    }

    .f2-display-huge { 
        font-size: 3rem !important; 
        line-height: 0.9 !important;
    }

    .f2-h3 {
        font-size: 1.8rem !important;
        margin-bottom: 12px !important;
        color: #c41d11 !important;
    }

    .f2-txt-body {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }

    .f2-include-box { padding: 40px 20px !important; }
    .f2-include-item { font-size: 1rem !important; }

    .f2-footer-cta .f2-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   ARCHIVO: licencia.css - PROTEGIDO (Clases Únicas)
   ============================================================ */

.lic-body {
    margin: 0; padding: 0; font-family: 'Inter', sans-serif;
    background-color: #fff; color: #000; overflow-x: hidden;
}

.lic-section {
    padding: 80px 8%; position: relative; width: 100%; box-sizing: border-box;
}

.lic-bg-soft { background-color: #f9f9f9; }

.lic-hero {
    padding-top: 150px !important; padding-bottom: 80px !important;
    display: flex; align-items: center; min-height: 80vh;
}

.lic-hero-lead { width: 60%; position: relative; z-index: 2; }

.lic-hero-side-img {
    position: absolute; right: 10%; top: 50%;
    transform: translateY(-50%); width: 40%; z-index: 1;
}

.lic-hero-side-img img {
    width: 100%; height: auto; border-radius: 15px;
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.15));
}

.lic-display-huge {
    font-size: clamp(3.5rem, 8vw, 7.5rem); font-weight: 900;
    line-height: 0.95; letter-spacing: -4px; text-transform: uppercase; margin: 0 0 20px 0;
}

.lic-brand-tag {
    font-size: 1.1rem; font-weight: 700; color: #e62315;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 25px;
}

.lic-subheadline {
    font-size: 1.3rem; line-height: 1.4; color: #444; max-width: 550px; margin-bottom: 40px;
}

.lic-title-med {
    font-size: 3rem; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 40px; color: #e62315;
}

.lic-title-small {
    font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px;
    font-weight: 700; color: #666; margin-bottom: 30px;
}

.lic-grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }

.lic-h3 { font-size: 2.2rem; font-weight: 800; color: #c41d11; margin-bottom: 15px; }

.lic-txt-body { font-size: 1.15rem; line-height: 1.6; color: #333; margin-bottom: 20px; }

.lic-tag-red {
    display: inline-block; color: #e62315; font-weight: 700;
    text-transform: uppercase; font-size: 0.9rem;
    border-left: 2px solid #e62315; padding-left: 10px;
}

.lic-benefits-list { display: flex; flex-direction: column; gap: 15px; }

.lic-note {
    font-size: 0.95rem; color: #888; margin-top: 30px;
    font-style: italic; line-height: 1.4; max-width: 900px; display: block;
}

.lic-benefit-item {
    background: #f9f9f9; padding: 20px 25px; border-radius: 10px;
    font-weight: 600; font-size: 1.1rem; border-left: 4px solid #e62315;
}

.lic-editorial-quote {
    background-color: #000;      /* Fondo Negro */
    color: #e62315;             /* Rojo LPDB */
    font-size: 5rem;
    font-weight: 800;
    text-align: center;
    max-width: 100%;            /* Para que el fondo cubra todo el ancho si lo deseas */
    margin: 0;                  /* Eliminamos margen para que el fondo sea continuo */
    padding: 60px 8%;           /* Espacio interno para que el texto no toque los bordes */
    line-height: 1.1;
    font-style: normal;
    text-transform: uppercase;
}

.lic-table { border-top: 2px solid #000; }

.lic-row {
    display: flex; justify-content: space-between; padding: 25px 0;
    border-bottom: 1px solid #eee;
}

.lic-label { font-weight: 800; font-size: 1.2rem; }
.lic-value { color: #666; font-weight: 500; }

.lic-btn {
    display: inline-block; background: #000; color: #fff; padding: 18px 40px;
    text-decoration: none; font-weight: 700; border-radius: 8px; transition: 0.3s;
}

.lic-btn:hover { background: #e62315; transform: translateY(-3px); }

.lic-footer-cta { text-align: center; padding: 120px 8%; }

.lic-display-large {
    font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900;
    line-height: 0.85; margin-bottom: 20px;
}

.lic-display-large span { color: #c41d11; }
.lic-txt-p { font-size: 1.4rem; color: #444; margin-bottom: 40px; }

@media screen and (max-width: 768px) {
    .lic-section { padding: 60px 24px !important; }
    .lic-hero { padding-top: 100px !important; flex-direction: column !important; text-align: left; min-height: auto; }
    .lic-hero-lead { width: 100% !important; margin-bottom: 40px; }
    .lic-hero-side-img { position: relative !important; top: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; display: block !important; }
    .lic-hero-side-img img { width: 100% !important; max-width: 350px; margin: 0 auto; display: block; }
    .lic-grid-split { display: block !important; }
    .lic-split-content { margin-bottom: 40px; }
    .lic-row { flex-direction: column; gap: 5px; }
    .lic-display-huge { font-size: 3.5rem !important; }
    .lic-title-med { font-size: 2.2rem !important; }
    .lic-editorial-quote { font-size: 1.5rem !important; }
    .lic-display-large { font-size: 2.5rem !important; }
    .lic-btn { width: 100%; text-align: center; box-sizing: border-box; }
}

/*================00 CLASES ÚNICAS PARA COMUNIDAD - PREFIJO com- */

body.com-body-fix .header-nosotros {
    background: #000000 !important;
    background-color: #000000 !important;
}

[class*="com-body-fix"] .nav a,
body.com-body-fix .nav a {
    color: #ffffff !important;
}

[class*="com-body-fix"] .nav a:hover,
body.com-body-fix .nav a:hover {
    color: #e62315 !important; /* El Rojo LPDB */
    transition: 0.3s; /* Para que el cambio de color sea suave y no brusco */
}

[class*="com-body-fix"] .logo-secciones,
body.com-body-fix .logo-secciones {
  margin-top: 0 !important;
  width: 150px; /* <--- CAMBIA ESTE NÚMERO para el tamaño (ej: 200px o 150px) */
    height: auto; /* Mantiene la proporción para que no se deforme */
    padding-top: 0 !important;
    vertical-align: top !important;
    position: relative;
    top: -10px; /* Ajusta este valor (ej: -15px o -20px) si quieres que suba aún más */
}
    
[class*="com-body-fix"] .logo,
body.com-body-fix .logo {
    display: flex;
    align-items: flex-start; /* Alinea el contenido al tope */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

[class*="com-body-fix"] .header-inner,
body.com-body-fix .header-inner {
    padding-top: 40px !important; /* Ajusta este padding si el header es muy alto o bajo */
    align-items: center !important; 
    display: flex;
    justify-content: space-between;
}


/* Ajuste para que el main sea negro sin afectar el body global */
.com-main-negro {
    background-color: #000 !important;
    color: #fff !important;
    padding: 120px 8% !important;
    min-height: 100vh;
}

/* Hero del Cartel */
.com-hero-header {
    text-align: center;
    margin-bottom: 60px;
}

.com-tag-badge {
    background: #e62315;
    color: #fff;
    padding: 4px 12px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.com-cartel-title {
    font-size: clamp(3.5rem, 8vw, 7rem) !important;
    font-weight: 900 !important;
    line-height: 0.85 !important;
    color: #e62315 !important;
    margin: 30px 0 !important;
    text-transform: uppercase;
}

.com-hero-sub {
    font-size: 1.5rem;
    color: #ccc;
    max-width: 700px;
    margin: 0 auto;
    line-height: 0.85 !important;
    letter-spacing: -1px;
}

/* Grid de Carteles */
.com-grid-cartel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

/* La Tarjeta de Evento */
.com-card {
    background: #111;
    border: 1px solid #222;
    padding: 15px;
    transition: 0.3s ease-in-out;
}

.com-card:hover {
    border-color: #e62315;
    transform: translateY(-5px);
}

.com-card-tag {
    background: #e62315;
    color: #fff;
    font-weight: 900;
    text-align: center;
    padding: 8px;
    margin-bottom: 15px;
    font-size: 0.85rem;
}

.com-tag-gris { background: #444; }
.com-tag-blanco { background: #fff; color: #000; }

.com-card-img-wrapper {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #222;
}

.com-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: 0.5s;
}

.com-card:hover .com-card-img-wrapper img {
    filter: grayscale(0%);
}

.com-card-body h3 {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    margin: 20px 0 10px 0;
}

.com-card-body p {
    color: #bbb;
    line-height: 1.5;
    font-size: 1rem;
    margin-bottom: 20px;
}

.com-card-meta {
    font-weight: 800;
    color: #e62315;
    font-size: 0.9rem;
}

.com-card-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .com-main-negro { padding: 60px 20px !important; }
    .com-cartel-title { font-size: 3rem !important; }
}

/*================= 1. RESET TOTAL DEL FONDO (Esto mata cualquier rojo filtrado)==================== */
html, body {
    background-color: #000000 !important;
}

/* 2. ASEGURAR QUE EL BANNER EXPRESS NO TENGA AIRE ROJO */
.banner-express-final {
    width: 100%;
    max-width: 100vw; /* Ancho de la vista del dispositivo */
    overflow: hidden;
    margin: 0 !important;
}

.banner-express-final img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* 3. CLAVAR EL NEGRO EN LAS SECCIONES QUE MENCIONASTE */
.seccion-parche, 
.seccion-contacto, 
.footer-sitio {
    background-color: #000000 !important;
    background-image: none !important;
    margin: 0 !important; /* Quita el espacio que deja ver el fondo rojo de atrás */
}

/* 4. AJUSTE QUIRÚRGICO PARA MOBILE (SIN TOCAR DISEÑO) */
@media (max-width: 768px) {
    .seccion-parche, .seccion-contacto {
        background-color: #000000 !important;
        display: block !important; /* Mantiene tu estructura original */
    }
}

/* ================================================================
   FIX DE MOVIMIENTO Y CENTRADO SOLO PARA MÓVILES
   ================================================================ */
@media (max-width: 768px) {
    /* Bloqueamos el scroll lateral sin romper el layout */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    /* Forzamos a que el banner y las secciones ocupen el ancho real */
    .banner-express-final, 
    .hero-impacto, 
    .seccion-parche, 
    .seccion-contacto, 
    .footer-sitio {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Centramos la imagen del banner express por si queda aire */
    .banner-express-final img {
        width: 100% !important;
        display: block;
    }

    /* Si el hero se ve corrido en mobile, lo centramos AQUÍ adentro */
    .header-hero {
        margin-left: 0 !important;
        width: 100% !important;
        text-align: center !important; /* Solo en mobile */
        padding-left: 20px !important;
        padding-right: 20px !important;
    
        

/* AJUSTE FINAL DE ALINEACIÓN IZQUIERDA - LOS PERRITOS DEL BARRIO */
@media (max-width: 768px) {
    /* 1. Aseguramos el contenedor */
    .header-hero {
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* 2. BADGE: Forzamos que no sea un bloque completo y se pegue al inicio */
    .badge {
        display: table !important; /* Esto hace que el fondo rojo solo ocupe lo que mide el texto */
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: left !important;
    }

   .header-hero h1 {
        display: block !important;
        text-align: left !important; /* Alinea el texto adentro */
        margin-left: 0 !important;   /* Pega la caja a la izquierda */
        margin-right: auto !important;
        
        /* Mantenemos tu diseño de 5 líneas */
        max-width: 250px !important; 
        width: 250px !important; 
        
        /* Tus estilos visuales */
        font-size: 34px !important;
        line-height: 0.95 !important;
        letter-spacing: -1.5px !important;
        font-weight: 900 !important;
    }

    /* 4. El botón "Nuestro Menú" también al borde izquierdo */
    .btn-primary {
        margin-left: 0 !important;
        margin-right: auto !important;
        display: table !important; /* Para que no ocupe todo el ancho */
    }
}