/* Añadir al principio del archivo, antes de cualquier otra regla */

/* Solución para espacio en blanco en dispositivos con notch */
html {
    background-color: #FCF4CD !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
}

body {
    background-color: #FCF4CD !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    padding-top: var(--safe-area-top) !important;
    padding-bottom: var(--safe-area-bottom) !important;
    padding-left: var(--safe-area-left) !important;
    padding-right: var(--safe-area-right) !important;
}

/* Asegurarse de que el navbar también tenga el color de fondo correcto */
.navbar {
    background-color: rgba(252, 244, 205, 0.95) !important;
}

/* Para iOS específicamente, aplicar color de fondo también a :root */
@supports (-webkit-touch-callout: none) {
    :root {
        background-color: #FCF4CD !important;
    }
    
    html::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: env(safe-area-inset-top, 0px);
        background-color: #FCF4CD !important;
        z-index: 1500;
    }
}

/* Añade esto al principio del archivo, fuera de los media queries */

/* Solución para dispositivos con notch, esquinas redondeadas o áreas seguras */
/* Ajuste de borde superior y áreas seguras para todos los dispositivos */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Ajuste universal del body para cualquier dispositivo con notch */
body {
    padding-top: var(--safe-area-top) !important;
    padding-bottom: var(--safe-area-bottom) !important;
    padding-left: var(--safe-area-left) !important;
    padding-right: var(--safe-area-right) !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
    width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* Ajuste específico para el navbar para que respete el área segura */
.navbar {
    padding-top: var(--safe-area-top) !important;
    height: calc(90px + var(--safe-area-top)) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

/* Ajuste para la sección hero que debe estar debajo del navbar */


/* Especificación para iOS */
@supports (-webkit-touch-callout: none) {
    .navbar {
        padding-top: var(--safe-area-top) !important;
        height: calc(90px + var(--safe-area-top)) !important;
    }
    
    .navbar-container {
        height: 90px !important; /* Altura fija del contenido del navbar */
        padding-top: 0 !important;
        align-items: center !important;
    }
    
    .hero {
        padding-top: calc(90px + var(--safe-area-top)) !important;
    }
    
    body {
        min-height: -webkit-fill-available !important;
    }
}

/* Ajuste específico para dispositivos móviles */
@media screen and (max-width: 799px) {
    .hero-featured-image {
        width: 85% !important;
        max-width: 500px !important;
        aspect-ratio: 4/3 !important; /* Mantener proporción constante */
        margin: 15px auto 85px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important; /* Necesario para posicionar las imágenes */
    }
    
    /* Hacer que TODAS las imágenes ocupen el mismo espacio */
    .hero-featured-image img,
    #featured-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Mantener proporción sin recortar */
        transition: opacity 0.3s ease !important;
    }
    
    /* Asegurar que el contenedor de miniaturas no cambie */
    .hero-gallery {
        position: absolute !important;
        bottom: 40px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .navbar {
        height: calc(70px + var(--safe-area-top)) !important;
    }
    
    .navbar-container {
        height: 70px !important;
    }
    
    .hero {
        padding-top: calc(70px + var(--safe-area-top)) !important;
    }
    
    /* Ajuste del botón de menú para dispositivos con notch */
    .menu-toggle {
        top: calc(22px + var(--safe-area-top)) !important;
    }

    /* Corregir posicionamiento del footer para móviles */
    .footer {
        display: flex !important;
        flex-direction: column !important;
        padding: 40px 20px !important;
        gap: 30px !important;
    }
    
    /* 1. Nuestro establecimiento primero */
    .footer > div:nth-child(1) {
        order: 1 !important;
        margin-bottom: 40px !important;
    }
    
    /* 2. Dudas o sugerencias en el medio */
    .footer > div:nth-child(2) {
        order: 2 !important;
        margin-bottom: 40px !important;
    }
    
    /* 3. Nuestras redes */
    .footer > div:nth-child(3) {
        order: 3 !important;
        margin-bottom: 20px !important;
    }
    
    /* 4. Línea divisoria de copyright */
    .copyright-divider {
        order: 4 !important;
        width: 100% !important;
        margin: 20px 0 !important;
    }
    
    /* 5. Texto de copyright */
    .copyright-section {
        order: 5 !important;
    }

    /* 2. IMAGEN GRANDE SEGUNDA - Ajuste de espaciado */
    .hero-featured-image {
        order: 2;
        width: 85%;
        max-width: 500px;
        margin: 15px auto 85px !important; /* Reducido arriba a 15px (desde 30px) y aumentado abajo a 85px (desde 70px) */
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* 3. THUMBNAILS AL FONDO - Ajustar posición */
    .hero-gallery {
        position: absolute;
        bottom: 40px; /* Mantiene el mismo valor */
        left: 0;
        width: 100%;
        z-index: 5;
    }
    
    /* Fix para galería en dispositivos móviles */
    @media (max-width: 799px) {
        /* Mejorar área táctil */
        .gallery-thumbnails img {
            min-width: 70px !important;
            min-height: 50px !important;
            padding: 3px !important;
            border: 2px solid transparent !important;
            margin: 0 5px !important;
            -webkit-tap-highlight-color: rgba(212, 96, 74, 0.3) !important;
        }
        
        /* Destacar imagen activa */
        .gallery-thumbnails img.active {
            border-color: var(--red-accent) !important;
            transform: scale(1.1) !important;
        }
        
        /* Garantizar que la imagen principal siempre sea visible */
        .hero-featured-image img,
        #featured-image {
            opacity: 1 !important;
            visibility: visible !important;
        }
    }
}

/* Corregir espacio en blanco en iPhone */
@supports (-webkit-touch-callout: none) {
    /* Solo aplica a iOS */
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }
    
    /* Ajustar el primer elemento para que no quede debajo del navbar */
    .hero {
        padding-top: 90px !important;
    }
}

/* Estilos responsivos generales */

/* MANTENER DISEÑO ESTABLE PARA PANTALLAS GRANDES (más de 1400px) */
@media screen and (min-width: 1401px) {
    /* Limitar el ancho máximo del contenido principal */
    .container,
    main,
    .hero,
    #quienes-somos,
    #que-hacemos,
    #marcas,
    #nuestras-marcas,
    #preguntas-frecuentes,
    .contact-section,
    .footer {
        max-width: none !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    
    /* Preservar el layout de Quienes Somos y Que Hacemos */
    #quienes-somos,
    #que-hacemos {
        font-size: 24px;
        display: flex !important;
        flex-direction: row !important;
        
        align-items: center !important;
    }
    
    /* Mantener dimensiones de contenido e imágenes */
    #quienes-somos .about-content,
    #que-hacemos .what-we-do-content {
        width: 50% !important;
        max-width: none !important;
        
        padding-right: 60px !important;
    }
    
    #quienes-somos .about-image-container,
    #que-hacemos .about-image-container {
        width: 50% !important;
        max-width: none !important;
        height: auto !important;
    }
    
    /* Evitar que las marcas crezcan indefinidamente */
    .brands-container,
    #marcas .brands-container,
    #nuestras-marcas .brands-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    /* Estilos para el copyright */
    .copyright-divider {
        width: 100% !important; /* Cambiar de 200% a 100% */
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 30px 0 20px 0;
        grid-column: 1 / -1; /
    }

    .copyright-section {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: var(--text-gray);
        padding: 10px 0;
        grid-column: 1 / -1; /* Para que ocupe todo el ancho en el grid */
    }
}

@media screen and (min-width: 1150px) and (max-width: 1400px) {
    /* Preservar el layout de Quienes Somos y Que Hacemos */
    #quienes-somos,
    #que-hacemos {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 70px 50px !important;
        gap: 30px !important;
    }
    
    /* Ajustar los títulos a 50px */
    #quienes-somos .section-title,
    #que-hacemos .section-title {
        font-size: 50px !important;
        margin-bottom: 25px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
    
    /* Evitar desborde del texto */
    #quienes-somos .about-content,
    #que-hacemos .what-we-do-content {
        width: 45% !important;
        max-width: 45% !important;
        text-align: left !important;
        padding-right: 20px !important;
    }
    
    /* Ajustar tamaño del texto */
    #quienes-somos .section-text,
    #que-hacemos .section-text {
        font-size: 24px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }
    
    #quienes-somos .about-image-container,
    #que-hacemos .about-image-container {
        width: 50% !important;
        max-width: 550px !important;
        height: auto !important;
    }
    
    /* Corregir posición del menú principal */
    .navbar-container {
        padding: 10px 40px !important;
        justify-content: space-between !important;
    }
    
    .main-nav {
        margin-left: auto !important;
        margin-right: 20px !important; /* Añadir margen a la derecha */
    }
    
    .main-nav ul {
        gap: 40px !important; /* Ajustar espaciado entre elementos del menú */
    }
    
    /* Asegurar que las imágenes mantengan proporciones correctas */
    .image-wrapper {
        height: 420px !important; /* Altura ligeramente menor */
    }
    
    /* Ajustar disposición de las marcas */
    .brands-container {
        gap: 80px !important; /* Reducir espacio entre logos */
    }
    
    .brand-logo {
        max-width: 250px !important;
    }
    
    /* Optimizar el footer */
    .footer {
        padding: 40px 5% !important;
        gap: 30px !important;
    }
    .copyright-divider {
        width: 100% !important; /* Cambiar de 200% a 100% */
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 30px 0 20px 0;
        grid-column: 1 / -1; /
    }

    .copyright-section {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: var(--text-gray);
        padding: 10px 0;
        grid-column: 1 / -1; /* Para que ocupe todo el ancho en el grid */
    }
}

@media screen and (min-width: 800px) and (max-width: 1149px) {
    /* Ajuste para el navbar */
    .navbar-container {
        padding: 10px 30px !important;
    }
    
    .main-nav {
        margin-left: auto !important;
        margin-right: 10px !important;
    }
    
    .main-nav ul {
        gap: 20px !important; /* Espacio más reducido entre elementos del menú */
    }
    
    .main-nav a {
        font-size: 20px !important; /* Texto de navegación ligeramente más pequeño */
    }
    
    /* Preservar layout de Quienes Somos y Que Hacemos en filas */
    #quienes-somos,
    #que-hacemos {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 60px 40px !important;
        gap: 25px !important;
    }
    
    /* Ajuste de títulos a 45px (intermedio entre mobile y desktop) */
    #quienes-somos .section-title,
    #que-hacemos .section-title {
        font-size: 45px !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
    
    /* Dimensiones de contenido e imágenes */
    #quienes-somos .about-content,
    #que-hacemos .what-we-do-content {
        width: 48% !important;
        max-width: 48% !important;
        text-align: left !important;
        padding-right: 15px !important;
    }
    
    /* Tamaño del texto del contenido */
    #quienes-somos .section-text,
    #que-hacemos .section-text {
        font-size: 24px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }
    
    /* Contenedores de imágenes */
    #quienes-somos .about-image-container,
    #que-hacemos .about-image-container {
        width: 48% !important;
        max-width: 450px !important;
        height: auto !important;
    }
    
    .image-wrapper {
        height: 380px !important;
    }
    
    /* Sección hero */
    .hero-title span,
    .hero-title .line-1,
    .hero-title .line-2,
    .hero-title .line-3,
    .hero-title .line-4,
    .hero-title .accent {
        font-size: 55px !important;
        line-height: 1.1 !important;
    }
    
    .hero {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
    
    .hero-featured-image {
        width: 550px !important;
    }
    
    /* Sección de marcas */
    .brands-container {
        gap: 60px !important;
    }
    
    .brand-logo {
        max-width: 220px !important;
    }
    
    .oficial-logo {
        max-width: 240px !important;
    }
    
    /* Sección de preguntas frecuentes */
    .faq-container {
        width: 90% !important;
    }
    
    /* Footer ajustado */
    .footer {
        padding: 40px 4% !important;
        gap: 25px !important;
        grid-template-columns: 1fr 1.5fr 1fr !important;
    }
    
    .footer h3 {
        font-size: 30px !important;
        margin-bottom: 40px !important;
    }
    
    /* Corrección de la línea divisoria del copyright */
    .copyright-divider {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        margin: 30px 0 20px 0 !important;
        grid-column: 1 / -1 !important;
    }
}

/* Breakpoint para 710px */
@media screen and (max-width: 710px) {
    /* Ajuste adicional para la imagen principal en este breakpoint */
    .hero-featured-image {
        margin: 10px auto 90px !important; /* Aún más cerca del título (10px) y más separado de thumbnails (90px) */
    }
}

/* Tablets pequeñas (768px y menos) */
@media screen and (max-width: 799px) {
    /* Prevenir desbordamiento y espacios en blanco */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Asegurar que el contenido comience correctamente */
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Corregir posicionamiento del navbar */
    .navbar {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
    }

    /* Hero reorganizado como estructura de columna */
    .hero {
        display: flex;
        flex-direction: column;
        padding: 90px 20px 30px;
        min-height: auto;
        /* Espacio para las miniaturas */
        padding-bottom: 100px; /* Aumentado para más espacio al fondo */
        position: relative;
        align-items: center; /* Centrar horizontalmente todo */
    }
    
    /* 1. TÍTULO PRIMERO - Mejorar centrado y espaciado */
    .hero-content {
        order: 1;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 40px !important; /* Más espacio después del título */
        /* Eliminamos position relative para evitar conflictos */
        position: static;
    }
    
    /* Asegurar que el título está centrado */
    .hero-title {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .hero-title span {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Reorganizar el título en 5 líneas específicas sin cambiar HTML */
    /* Contenedor general del título */
    .hero-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Hacer que cada span ocupe su propia línea */
    .hero-title span {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Línea 1: "La mejor opción" - Ya está correcta */
    .hero-title .line-1 {
        font-size: 60px !important;
        color: var(--text-dark) !important;
    }
    
    /* Línea 2: "para tu" - Ocultar "restaurante" */
    .hero-title .line-2 .accent {
        font-size: 70px !important;
        display: none !important;
    }
    
    /* Línea 3: "Restaurante &" */
    .hero-title .line-3 {
        font-size: 70px !important;
        position: relative !important;
    }
    
    .hero-title .line-3::before {
        content: "Restaurante " !important;
        color: var(--red-accent) !important; /* Cambiado a rojo */
        font-weight: 700 !important; /* Negrita para consistencia con otros elementos accent */
    }
    
    /* Línea 3: Mostrar solo "&" */
    .hero-title .line-3 .accent {
        position: relative !important;
        color: var(--red-accent) !important; /* Asegurar que sea rojo */
        font-weight: 700 !important;
    }
    
    .hero-title .line-3 .accent::after {
        content: "" !important;
    }
    
    /* Corregir la duplicación de "Comedor" */
    .hero-title .line-3::after {
        content: "" !important; /* Eliminar el contenido duplicado */
    }

    /* En su lugar, mostrar correctamente la línea 4 para "Comedor" */
    .hero-title .line-4 {
        display: block !important;
        font-size: 60px !important;
    }

    /* Asegurar que "Industrial" aparezca correctamente */
    .hero-title .line-4 .accent {
        color: var(--red-accent) !important;
        display: inline !important;
    }
    
    /* HERO SECTION - Título más grande (50px) */
    .hero-title span,
    .hero-title .line-1,
    .hero-title .line-2,
    .hero-title .line-3,
    .hero-title .line-4,
    .hero-title .accent {
        font-size: 50px !important; /* Cambiado de 60px a 50px como solicitaste */
        color: var(--text-dark) !important;
        font-weight: 600 !important;
        display: block !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    /* Mantener color de acento */
    .hero-title .accent {
        color: var(--red-accent) !important;
        display: inline !important;
    }

    /* Remove or reduce text shadow for mobile devices */
    .hero-title,
    .hero-title span,
    .hero-title .line-1,
    .hero-title .line-2,
    .hero-title .line-3,
    .hero-title .line-4,
    .hero-title .accent {
        text-shadow: none !important; /* Remove shadow completely */
        /* Or use a more subtle shadow if you want: */
        /* text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) !important; */
    }

    /* 2. IMAGEN GRANDE SEGUNDA - Ajuste de espaciado */
    .hero-featured-image {
        order: 2;
        width: 85%;
        max-width: 500px;
        margin: 15px auto 85px !important; /* Reducido arriba a 15px (desde 30px) y aumentado abajo a 85px (desde 70px) */
        border-radius: 8px;
        overflow: hidden;
    }

    /* 3. THUMBNAILS AL FONDO - Ajustar posición */
    .hero-gallery {
        position: absolute;
        bottom: 40px; /* Mantiene el mismo valor */
        left: 0;
        width: 100%;
        z-index: 5;
    }
    
    /* Ajustes generales de secciones */
    .section-title {
        font-size: 40px;
        text-align: center;
    }
    
    .about-section {
        flex-direction: column;
        padding: 40px 20px;
    }
        /* Asegúrate de que esta definición se mantenga (líneas ~143-153) */
    
    /* Miniaturas con el mismo estilo que en escritorio */
    .gallery-thumbnails img {
        width: 140px;
        height: 100px;
        object-fit: contain; /* ESTO ES CORRECTO - muestra la imagen completa */
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 3px;
        position: relative !important; /* Crucial para que ::after funcione */
        display: inline-block !important;
        margin-bottom: 10px !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .about-image-container {
        width: 100%;
        max-width: 400px; /* Limitar el ancho */
        margin: 0 auto 30px; /* Centrar horizontalmente */
        height: 300px; /* Altura fija */
        overflow: hidden; /* Para asegurar que las imágenes no desborden */
    }

    /* Asegurar que las imágenes sean visibles en secciones */
    .about-image-container .about-image {
        display: none; /* Ocultar todas por defecto */
    }

    .about-image-container .about-image.active {
        display: block !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important; /* Asegurar que ocupe toda la altura */
        object-fit: cover !important; /* CAMBIADO de contain a cover */
        max-height: none !important; /* Quitar restricción de altura máxima */
    }

    /* Asegurar la visibilidad de los puntos de navegación */
    .image-dots, .slider-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important; /* Cambiado a 10px como en styles.css */
        margin-top: 15px !important; /* Usar margin-top como en styles.css en lugar de position absolute */
        position: relative !important; /* Cambiado de absolute a relative */
        bottom: auto !important; /* Remover posicionamiento absolute */
        left: auto !important; /* Remover posicionamiento absolute */
        right: auto !important; /* Remover posicionamiento absolute */
        z-index: 5 !important; /* Reducido de 500 a 5 como en styles.css */
        width: 100% !important;
    }

    .image-dot, .slider-dot {
        width: 10px !important; /* Cambiado de 14px a 10px */
        height: 10px !important; /* Cambiado de 14px a 10px */
        background-color: #ccc !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important; /* Añadida la transición como en styles.css */
        margin: 0 !important; /* Quitado el margen horizontal de 4px */
        padding: 0 !important;
        display: block !important;
        box-shadow: none !important; /* Quitada la sombra para coincidir con styles.css */
        opacity: 1 !important;
        border: none !important;
    }

    .image-dot.active, .slider-dot.active {
        background-color: #D4604A !important;
        transform: scale(1.3) !important; /* Ligeramente más grande */
        box-shadow: 0 2px 6px rgba(212,96,74,0.5) !important; /* Sombra de color */
    }
    
    .about-content, .what-we-do-content {
        width: 100%;
        padding: 0;
        text-align: center;
        margin-bottom: 10px !important; /* Reducido de 20px a 10px */
    }
    
    /* Ajustar el tamaño de texto */
    .about-content p, .what-we-do-content p {
        font-size: 20px;
        line-height: 1.5;
        ;
    }
    
    /* Alinear botones al centro */
    .cta-button {
        margin: 20px auto;
        display: block;
        width: fit-content;
    }
    
    /* Marcas */
    .brands-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    /* MARCAS - DISPOSICIÓN HORIZONTAL ADAPTATIVA */
    .brands-container,
    #marcas .brands-container,
    #nuestras-marcas .brands-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* Crucial para evitar desbordamiento */
        justify-content: center !important;
        align-items: center !important;
        gap: 25px !important; /* Espacio uniforme entre elementos */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    /* Ajustar tamaño de las marcas para disposición horizontal */
    .brand-item,
    #marcas .brand-item,
    #nuestras-marcas .brand-item {
        width: calc(33.33% - 20px) !important; /* 3 por fila con espacio entre ellas */
        max-width: 160px !important; /* Ligeramente más pequeño */
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Ajustar tamaño de las marcas para disposición horizontal */
    .brand-item,
    #marcas .brand-item,
    #nuestras-marcas .brand-item {
        width: calc(33.33% - 30px) !important; /* 3 por fila */
        max-width: 180px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Asegurar que las imágenes de marcas se vean bien */
    .brand-item img,
    #marcas .brand-item img,
    #nuestras-marcas .brand-item img {
        width: 100% !important;
        height: auto !important;
        max-height: 120px !important;
        object-fit: contain !important;
    }

    /* Textos de marca centrados y ajustados */
    .brand-item h3,
    .brand-item p {
        text-align: center !important;
        width: 100% !important;
        margin-top: 10px !important;
    }
    
    /* Reorganización completa de la sección de contacto */
    .contact-section {
        display: flex;
        flex-direction: column;
        padding: 40px 20px;
    }
    
    /* 1. Nuestro establecimiento primero */
    .map-container {
        order: 1;
        width: 100%;
        height: 300px;
        margin-bottom: 40px;
    }
    
    /* 2. Dudas o sugerencias en el medio */
    .contact-form-container {
        order: 2;
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* 3. Nuestras redes al final */
    .contact-info {
        order: 3;
        width: 100%;
    }
    
    /* Ajustes de estilo para mejor apariencia en móvil */
    .form-field {
        margin-bottom: 15px;
    }
    
    .section-title {
        font-size: 32px;
        text-align: center;
        margin-bottom: 30px;
    }
    
    .contact-form-container h3,
    .contact-info h3 {
        text-align: center;
        margin-bottom: 20px;
        font-size: 24px;
    }
    
    /* Centrar el botón del formulario */
    .form-submit {
        text-align: center;
    }
    
    /* Centrar información de contacto */
    .contact-details {
        align-items: center;
    }
    
    .contact-item {
        justify-content: center;
    }
    
    /* Social media icons centrados */
    .social-links {
        justify-content: center;
    }
    
    /* Override grid layout with flex for mobile */
    .footer {
        display: flex !important; /* Override grid display */
        flex-direction: column !important;
        padding: 40px 20px !important;
        gap: 30px !important;
    }
    
    /* Override grid columns with full width */
    .footer > div {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important; /* Reset any grid column settings */
    }
    
    /* 1. Nuestro establecimiento primero */
    .footer > div:nth-child(1) {
        order: 1 !important;
        margin-bottom: 40px !important;
    }
    
    /* 2. Dudas o sugerencias en el medio */
    .footer > div:nth-child(2) {
        order: 2 !important;
        margin-bottom: 40px !important;
    }
    
    /* 3. Nuestras redes al final */
    .footer > div:nth-child(3) {
        order: 3 !important;
        margin-bottom: 20px !important;
    }
    
    /* 4. Línea divisoria de copyright */
    .copyright-divider {
        order: 4 !important;
        width: 100% !important;
        margin: 20px 0 !important;
    }
    
    /* 5. Texto de copyright */
    .copyright-section {
        order: 5 !important;
    }
    
    /* Make all titles centered */
    .footer h3 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 30px !important;
        font-size: 26px !important;
    }
    
    /* Centrar específicamente el título "Nuestras redes" */
    .footer > div:nth-child(3) h3 {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Si el título está dentro de algún otro elemento contenedor */
    .social-section h3,
    .brand-social h3 {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Center all contact info */
    .contact-details, .social-links, .contact-form {
        align-items: center !important;
    }
    
    .contact-item, .social-link {
        justify-content: center !important;
    }
    
    /* Map container adjustment */
    .map-container {
        height: 300px !important;
        width: 100% !important;
    }
    
    /* Form adjustments */
    .submit-button {
        align-self: flex-end !important;
    }
    
    /* Fix brand social sections */
    .brand-social {
        text-align: center !important;
        width: 100% !important;
    }
    
    .brand-social h4 {
        text-align: center !important;
    }
    
    /* SECCIÓN QUIÉNES SOMOS - Reorganizada CORRECTAMENTE */
    #quienes-somos {
        display: flex;
        flex-direction: column;
        padding: 40px 20px;
        position: relative !important;
    }
    
    /* 1. Título primero */
    #quienes-somos h2.section-title {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        display: block !important;
        font-size: 38px !important;
    }
    
    /* 2. TEXTO EN SEGUNDO LUGAR - CAMBIADO */
    #quienes-somos .about-content {
        order: 2 !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important; /* Reducido de 20px a 10px */
    }
    
    /* 3. IMÁGENES AL FINAL - CAMBIADO */
    #quienes-somos .about-image-container {
        order: 3 !important;
        width: 100% !important;
        max-width: 500px !important; /* Aumentado de 400px a 500px */
        margin: 0 auto !important;
        padding-bottom: 0 !important; /* ELIMINADO completamente */
        overflow: hidden !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important; /* Eliminar altura mínima */
        border-radius: 15px !important; /* Contenedor con borde redondeado */
        margin-top: 10px !important; /* Acercar al texto */
        margin-bottom: 40px !important; /* Aumentar para que los dots sean visibles */
    }

    #quienes-somos .about-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* CAMBIADO de contain a cover */
        border-radius: 15px !important; /* Border radius más pronunciado */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Añadir sombra sutil */
        margin-bottom: 0 !important; /* ELIMINADO margen inferior */
        display: block !important;
    }

    

    #quienes-somos .about-content p {
        font-size: 20px !important; /* Texto de contenido más grande */
        line-height: 1.6 !important; /* Mejor espaciado entre líneas */
        margin-bottom: 20px !important; /* Más espacio entre párrafos */
    }

    /* También aplicar a elementos de lista si existen */
    #quienes-somos .about-content ul li,
    #quienes-somos .about-content ol li {
        font-size: 30px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }

   

    /* "QUIENES SOMOS" Y "QUE HACEMOS" - Títulos a 32px */
    #quienes-somos .section-title,
    #que-hacemos .section-title {
        
        text-align: center !important;
        margin-bottom: 25px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    /* SECCIÓN QUÉ HACEMOS - Reorganizada */
    #que-hacemos {
        display: flex;
        flex-direction: column;
        padding: 40px 20px;
    }
    
    /* 1. Título primero */
    #que-hacemos h2.section-title {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 30px !important;
        font-size: 38px !important;
    }
    
    /* 2. Texto en segundo lugar */
    #que-hacemos .what-we-do-content {
        order: 2 !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important; /* Reducido de 20px a 10px */
    }
    
    /* 3. Imágenes al final */
    #que-hacemos .about-image-container {
        order: 3 !important;
        width: 100% !important;
        max-width: 500px !important; /* Aumentado de 400px a 500px */
        margin: 0 auto !important;
        padding-bottom: 0 !important; /* ELIMINADO completamente */
        overflow: hidden !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important; /* Eliminar altura mínima */
        border-radius: 15px !important; /* Contenedor con borde redondeado */
        margin-top: 10px !important; /* Acercar al texto */
        margin-bottom: 40px !important; /* Aumentar para que los dots sean visibles */
    }

    #que-hacemos .about-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* CAMBIADO de contain a cover */
        border-radius: 15px !important; /* Border radius más pronunciado */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 0 !important; /* ELIMINADO margen inferior */
        display: block !important;
    }

    /* Corregir el problema de imágenes cortadas y dots invisibles */
    #quienes-somos .about-image-container,
    #que-hacemos .about-image-container {
        width: 100% !important;
        min-width: 450px !important; /* Aumentado de 400px a 450px */
        max-width: 500px !important;
        margin: 0 auto !important;
        padding-bottom: 0 !important; /* ELIMINADO completamente */
        overflow: hidden !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important; /* Eliminar altura mínima */
        border-radius: 15px !important; /* Contenedor con borde redondeado */
        margin-top: 10px !important; /* Acercar al texto */
        margin-bottom: 40px !important; /* Aumentar para que los dots sean visibles */
    }

    /* Asegurar que las imágenes no se corten */
    #quienes-somos .about-image,
    #que-hacemos .about-image {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important; /* Eliminar restricción de altura */
        object-fit: cover !important; /* CAMBIADO de contain a cover */
        border-radius: 15px !important; /* Border radius más pronunciado */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 0 !important; /* ELIMINADO margen inferior */
        display: block !important;
    }

    /* Hacer los dots visibles y posicionarlos correctamente */
    .image-dots, 
    .slider-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        position: absolute !important;
        bottom: -25px !important; /* Alejados del borde inferior para visibilidad */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 200 !important; /* Z-index muy alto para asegurar visibilidad */
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important; /* Asegurar que sean visibles */
    }

    /* Hacer los dots más grandes y visibles */
    .image-dot, 
    .slider-dot {
        width: 14px !important; /* Más grandes */
        height: 14px !important;
        background-color: #ccc !important;
        border-radius: 50% !important;
        margin: 0 6px !important;
        border: none !important;
        display: inline-block !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; /* Sombra para destacar */
        opacity: 1 !important;
    }

    /* Punto activo más visible */
    .image-dot.active, 
    .slider-dot.active {
        background-color: #D4604A !important;
        transform: scale(1.3) !important; /* Ligeramente más grande */
        box-shadow: 0 2px 6px rgba(212,96,74,0.5) !important; /* Sombra de color */
    }

    /* Container general con algo de margen inferior */
    #quienes-somos .about-image-container + *,
    #que-hacemos .about-image-container + * {
        margin-top: 20px !important; /* Añadir margen después del contenedor completo */
    }

    

  

    /* Texto del formulario más grande */
    .form-field label {
        font-size: 18px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    .form-field input,
    .form-field textarea,
    .form-field select {
        font-size: 18px !important;
        padding: 15px 16px !important;
        border-radius: 10px !important;
    }

    /* Botón del formulario más grande */
    .form-submit button {
        font-size: 18px !important;
        padding: 14px 30px !important;
    }

    /* Información de contacto más grande */
    .contact-item {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }

    .contact-item i {
        font-size: 22px !important;
        margin-right: 12px !important;
    }

    /* Enlaces de redes sociales más grandes */
    .social-links a {
        font-size: 18px !important;
    }

    .social-links i {
        font-size: 24px !important;
        margin-right: 10px !important;
    }

   
    /* Dentro del media query para 768px - Añadir espacio entre título y marcas */

    /* Aumentar espacio entre el título y las marcas */
    #nuestras-marcas .section-title,
    #marcas .section-title {
        margin-bottom: 40px !important; /* Aumentado de 25px/30px a 40px */
    }
    
    /* Asegurar que el contenedor de marcas no tenga margen superior que contrarreste */
    .brands-container,
    #marcas .brands-container,
    #nuestras-marcas .brands-container {
        margin-top: 0 !important;
        padding-top: 10px !important; /* Pequeño padding adicional */
    }
    
    /* 2. MOSTRAR LOS DOTS ORIGINALES */
    #quienes-somos .image-dots,
    #que-hacemos .image-dots,
    #quienes-somos .slider-dots,
    #que-hacemos .slider-dots {
        display: flex !important; /* FORZAR visualización */
        justify-content: center !important;
        gap: 12px !important;
        position: absolute !important;
        bottom: -25px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 500 !important; /* Z-index muy alto para asegurar visibilidad */
        opacity: 1 !important;
    }
    
    /* 3. ELIMINAR LOS PSEUDO-ELEMENTOS */
    #quienes-somos .about-image-container::after,
    #que-hacemos .about-image-container::after {
        content: none !important; /* Eliminar los dots de texto */
        display: none !important;
    }
    
    /* 4. HACER LOS DOTS MÁS VISIBLES */
    .image-dot, 
    .slider-dot {
        width: 14px !important;
        height: 14px !important;
        background-color: #ccc !important;
        border-radius: 50% !important;
        margin: 0 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        display: block !important; /* Forzar visualización */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        opacity: 1 !important;
        border: none !important;
    }
    
    /* 5. DOT ACTIVO MÁS DESTACADO */
    .image-dot.active, 
    .slider-dot.active {
        background-color: #D4604A !important;
        transform: scale(1.3) !important;
        box-shadow: 0 2px 6px rgba(212,96,74,0.5) !important;
    }

    /* Dentro del media query para 768px - Solución para dots visibles */

    /* SOLUCIÓN PARA DOTS VISIBLES - arreglar los dots existentes */
    #quienes-somos .image-dots,
    #que-hacemos .image-dots,
    #quienes-somos .image-wrapper + .image-dots,
    #que-hacemos .image-wrapper + .image-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important;
        margin-top: 15px !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        z-index: 5 !important;
    }

    /* Tamaño correcto para cada dot */
    #quienes-somos .image-dot,
    #que-hacemos .image-dot,
    #quienes-somos .image-dots .image-dot,
    #que-hacemos .image-dots .image-dot {
        width: 12px !important;
        height: 12px !important;
        display: block !important;
        background-color: #ccc !important;
        border-radius: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        border: none !important;
        transition: background-color 0.2s ease !important;
    }

    /* Estilo para el dot activo */
    #quienes-somos .image-dot.active,
    #que-hacemos .image-dot.active {
        background-color: #D4604A !important;
        transform: scale(1.2) !important;
    }

    /* Espaciado correcto para el contenedor de imágenes */
    #quienes-somos .about-image-container,
    #que-hacemos .about-image-container {
        margin-bottom: 30px !important; /* Espacio suficiente para los dots */
        overflow: visible !important; /* Crucial para que los dots se vean */
    }

    /* AJUSTE EXACTO DE TODOS LOS SUBTÍTULOS A 34px */
    /* Subtítulos de secciones principales */
    #marcas h2.section-title,
    html body #marcas h2,
    #nuestras-marcas h2.section-title,
    #preguntas-frecuentes h2.section-title,
    html body #preguntas-frecuentes h2,
    #faq h2.section-title,
    
    /* Subtítulos del footer */
    .footer h3,
    .footer > div h3,
    .footer > div:nth-child(1) h3, /* Nuestro establecimiento */
    .footer > div:nth-child(2) h3, /* Dudas o sugerencias */
    .footer > div:nth-child(3) h3, /* Nuestras redes */
    .map-container h3,
    .contact-form-container h3,
    .contact-info h3 {
        font-size: 38px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    .contact-form form {
        gap: 10px !important; /* Espacio entre campos del formulario */
    }

    /* Estilos para el copyright */
    .copyright-divider {
        width: 100%;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 30px 0 20px 0;
        grid-column: 1 / -1; /* Para que ocupe todo el ancho en el grid */
    }

    .copyright-section {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: var(--text-gray);
        padding: 10px 0;
        grid-column: 1 / -1; /* Para que ocupe todo el ancho en el grid */
    }
    .gallery-thumbnails {
        gap: 10px;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }
}

/* Breakpoint intermedio para ajustar gradualmente */
@media screen and (max-width: 710px) {
    /* Ajustar tamaño de los contenedores de marca */
    .brand-item,
    #marcas .brand-item,
    #nuestras-marcas .brand-item {
        width: calc(50% - 20px) !important; /* 2 por fila */
        max-width: 100px !important; /* Reducido de 120px a 100px */
    }
    
    /* Reducir el tamaño de las imágenes específicamente */
    .brand-logo,
    #marcas .brand-logo,
    #nuestras-marcas .brand-logo {
        max-width: 200px !important; /* Tamaño más pequeño para las imágenes */
        height: auto !important;
    }
    
    /* Ajuste específico para el logo oficial que es más grande */
    .oficial-logo {
        max-width: 90px !important;
        height: auto !important;
    }

    #nuestras-marcas .section-title,
    #marcas .section-title {
        margin-bottom: 50px !important; /* Ligeramente menor en móviles */
    }
    /* Asegurar que el primer elemento tenga espacio adicional desde arriba */
    .brands-container,
    #marcas .brands-container,
    #nuestras-marcas .brands-container {
        padding-top: 50px !important; /* Añadir padding adicional */
    }
    
    /* Reducir el gap entre las imágenes para mejor ajuste */
    .brands-container,
    #marcas .brands-container,
    #nuestras-marcas .brands-container {
        gap: 20px !important; /* Reducido de 25px a 20px */
    }
}

/* Móviles (480px y menos) */
@media screen and (max-width: 480px) {
    .gallery-thumbnails {
        gap: 10px;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }
    
    /* Asegurar que el indicador también esté centrado */
    .thumbnail-indicator {
        position: absolute !important;
        bottom: 0 !important;
        height: 4px !important;
        background-color: #D4604A !important;
        border-radius: 2px !important;
        transition: left 0.3s ease, width 0.3s ease !important;
        z-index: 10 !important;
    }

    #quienes-somos .image-dots,
    #quienes-somos .slider-dots,
    #que-hacemos .image-dots,
    #que-hacemos .slider-dots {
        margin-top: -15px !important; /* Ligeramente menor en pantallas pequeñas */
    }
    .hero {
        padding-bottom: 90px;
    }
    
    .hero-content {
        margin-bottom: 15px !important; /* Reducido para acercar más la imagen al título */
    }
    
    .hero-featured-image {
        margin: 5px auto 75px !important; /* Muy cerca del título (5px) y bien separado de thumbnails */
        max-width: 280px; /* Ajustado el tamaño para móviles pequeños */
    }
    
    .gallery-thumbnails {
        gap: 10px;
    }
    
    .gallery-thumbnails img {
        width: 90px;
        height: 80px;
    }
    
    .hero-title {
        font-size: 80px;
    }
    
    .hero-title .accent {
        font-size: 42px;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .faq-question {
        padding: 15px;
    }
    
    .faq-question span {
        font-size: 18px;
    }
    
    .about-image-container {
        max-width: 300px;
        height: 250px;
    }

    .hero-featured-image {
        width: 85%;
        max-width: 300px;
        margin: 20px auto;
    }
    
    /* Footer */
    .footer {
        flex-direction: column;
        padding: 40px 20px;
    }
    
    .footer > div {
        width: 100%;
        margin-bottom: 30px;
        text-align: center;
    }

    .map-container {
        height: 250px;
        margin-bottom: 30px;
    }
    
    .contact-form-container h3,
    .contact-info h3,
    .map-container h3 {
        font-size: 26px !important;
    }

    #quienes-somos .section-title {
        font-size: 38px !important;
    }
    
    

    /* Reducir ligeramente tamaños en móviles muy pequeños */
    .hero-title span,
    .hero-title .line-1,
    .hero-title .line-2,
    .hero-title .line-3,
    .hero-title .line-4,
    .hero-title .accent {
        font-size: 48px !important; /* Reducido un poco para pantallas muy pequeñas */
    }
    
    /* Mantener 32px en secciones específicas */
    #quienes-somos .section-title,
    #que-hacemos .section-title {
        font-size: 32px !important; /* Mantenerlo igual en móviles pequeños */
    }

    /* Dimensiones proporcionales para pantallas pequeñas */
    #quienes-somos .image-wrapper,
    #que-hacemos .image-wrapper,
    #quienes-somos .about-image-container,
    #que-hacemos .about-image-container {
        max-width: 300px !important;
        height: 240px !important; /* Proporción mantenida */
        min-height: 240px !important;
        max-height: 240px !important;
        margin: 0 auto 50px !important; /* Añadir margen inferior para espacio para los dots */
        width: 100% !important;
        min-width: 0 !important; /* Anular el min-width de 450px que se aplica en otros breakpoints */
        position: relative !important; /* Importante para el posicionamiento absoluto de los dots */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important; /* Para que los dots sean visibles fuera del contenedor */
    }
    
    /* Asegurar que las imágenes dentro estén centradas */
    #quienes-somos .about-image,
    #que-hacemos .about-image {
        object-position: center !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
    }
    
    /* Centrar los puntos indicadores */
    #quienes-somos .image-dots,
    #que-hacemos .image-dots,
    #quienes-somos .slider-dots,
    #que-hacemos .slider-dots {
        position: absolute !important;
        bottom: -30px !important; /* Posicionar debajo de la imagen */
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important; /* Centrar horizontalmente */
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important;
        z-index: 20 !important;
        padding: 0 !important;
        margin-top: 0 !important; /* Eliminar cualquier margin-top negativo */
    }

    .brand-item,
    #marcas .brand-item,
    #nuestras-marcas .brand-item {
        width: calc(50% - 15px) !important; /* 2 por fila más compactos */
        max-width: 120px !important; /* Más pequeños en móviles */
    }
    
    .brands-container,
    #marcas .brands-container,
    #nuestras-marcas .brands-container {
        gap: 20px !important; /* Reducir espacio entre elementos */
    }

    #nuestras-marcas .section-title,
    #marcas .section-title {
        margin-bottom: 35px !important; /* Ligeramente menor en móviles */
    }
    /* Update footer/contact section titles to exactly 30px */
    .footer h3,
    .footer > div h3,
    .footer > div:nth-child(1) h3, /* Nuestro establecimiento */
    .footer > div:nth-child(2) h3, /* Dudas o sugerencias */
    .footer > div:nth-child(3) h3, /* Nuestras redes */
    .map-container h3,
    .contact-form-container h3,
    .contact-info h3,
    .establecimiento-section h3,
    .social-media h3,
    .brand-social h3 {
        font-size: 30px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
    
    /* Override any other specific title rules that might conflict */
    .contact-form-container h3,
    .contact-info h3,
    .map-container h3 {
        font-size: 30px !important; /* Override previous 26px rule */
    }

    /* Hacer los dots más pequeños en pantallas móviles */
    #quienes-somos .image-dot,
    #que-hacemos .image-dot,
    #quienes-somos .image-dots .image-dot,
    #que-hacemos .image-dots .image-dot,
    #quienes-somos .slider-dot,
    #que-hacemos .slider-dot {
        width: 10px !important; /* Reducido de 12px/14px */
        height: 10px !important; /* Reducido de 12px/14px */
    }
    
    /* Ajustar separación entre dots */
    #quienes-somos .image-dots,
    #que-hacemos .image-dots,
    #quienes-somos .slider-dots,
    #que-hacemos .slider-dots {
        gap: 10px !important; /* Reducir el espacio entre dots */
    }
    
    /* Mantener proporción del dot activo */
    #quienes-somos .image-dot.active,
    #que-hacemos .image-dot.active,
    #quienes-somos .slider-dot.active,
    #que-hacemos .slider-dot.active {
        transform: scale(1.2) !important; /* Mantener proporción adecuada */
    }
}

/* Añade al final de tu archivo responsive.css */
@media screen and (max-width: 768px) {
    /* Mejorar visualización de miniaturas en móviles */
    .gallery-thumbnails img {
        border: 2px solid transparent;
        transition: border-color 0.3s ease, transform 0.3s ease;
        transform-origin: center;
    }
    
    .gallery-thumbnails img.active {
        border-color: #D4604A !important;
        transform: scale(1.1);
    }
    
    /* Asegurar que la imagen principal se actualice correctamente */
    .hero-featured-image picture,
    .hero-featured-image img,
    #featured-image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}