/*   ************************************************************************************************************************  Media Queries para responsividad */

/* Dispositivos extra pequeños (teléfonos, 480px y menores) */
@media (max-width: 480px) {
    /* Comprometidos */
    .title-comp, .text2 {
        font-size: 2em; /* Títulos más compactos en teléfonos pequeños */
    }

    /* Mision-Vision */
    .left-section-misvis, .right-section-misvis {
        padding: 50px 15px;
        /* En teléfonos muy pequeños, a veces es mejor ocultar el fondo 
           o hacerlo muy sutil para que no choque con el texto */
        background-size: 25%; 
    }

    .title-misvis {
        font-size: 2.5em;
    }

    .p-misvis {
        font-size: 1.2em;
    }

    /* Marcas */
    .brands-title {
        font-size: 2.2em;
    }

    .brands-deco {
        width: 45%; /* Línea más visible en móviles */
    }

    .marca-item-slick img {
        max-width: 110px; /* Logos más compactos en celulares */
    }

    .slider-marcas .slick-slide {
        padding: 0 10px; /* Espacio entre logos en móvil */
    }
}

/* Pantalla máximo 600 px de ancho ---------------------------------------------------------------------------------------------         máximo 600 px */
@media (max-width: 600px) {
    .left-section,
    .right-section {
        padding: 20px;
    }

    .title {
        font-size: 2em;
    }

    .text {
        font-size: 1em;
    }

    /*   **********************************************                   Formulario */
    /* Apilamos los campos que estaban lado a lado */
    .contact-form .form-row {
        flex-direction: column;
        gap: 0; 
    }
    
    .contact-form .form-row .col-half {
        width: 100%;
        /* Restaurar margen inferior para separar campos apilados */
        margin-bottom: 20px; 
    }
    
    /* Eliminar el margen inferior del último campo en la fila (para que no se duplique) */
    .contact-form .form-row .col-half:last-child {
        margin-bottom: 0;
    }

        /* **********************************************************          Productos */
    /* Ajustes del Título */
    .products-title {
        font-size: 2.2em; /* Reduce el tamaño del título */
    }




    /*  **************************************************************************  Nosotros */
    .about-section {
    background-color: var(--color-monaca-green);
    background-image: none; 
    height: auto;
    overflow: hidden;
    }

    .about-content {
        grid-template-columns: none;
    }

    .section-title {
        font-size: 2.5em;
    
    }
    .about-p {    
        font-size: 1em; 
        margin-left: 60px;
        margin-right: 60px;   
    }
}

/* pantalla máximo 768 px de ancho  ---------------------------------------------------------------------------------------------        máximo 768 px */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
    }

    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 10px;
    }

    .title-hero {
        font-size: 2.5em;
    }

    .about-image {
        grid-column: 1 / 2;
    }

    .mission-vision-container {
        flex-direction: column;
    }

    .product-grid, .recipes-grid {
        flex-direction: column;
    }

    .contact-form {
        grid-template-areas:
            "nombre nombre"
            "telefono telefono"
            "correo correo"
            "mensaje mensaje"
            "boton boton";
    }

    .contact-form .btn-primary {
        width: 100%;
        justify-self: center;
    }

    /* **********************************************************         Carrusel */

    /* Si se usa flechas de navegación, a veces son muy grandes en móvil se ajustan aqui */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 25px;
        height: 25px;
    }

    /*  **********************************************************          Cintillo 60años */
    .cintillo-section {
        padding: 40px 20px;
    }

    .cintillo-item img {
        max-width: 220px; /* Siguen siendo grandes en móvil, pero ajustados */
    }

    .cintillo-grid {
        flex-direction: column; /* Apilados para que luzcan mejor */
        gap: 50px;
    }

    /* **********************************************************          Marcas */
    .slider-marcas .slick-slide {
            height: 80px;
            padding: 0 10px;
    }
    .slider-marcas img {
            max-height: 50px;
    }
    

    /* **********************************************************          Productos */
    
    /* Ajuste del Contenedor del Carrusel */
    .products-carousel-wrapper {
        padding: 0; /* Elimina el padding lateral para ganar más espacio en el ancho */
    }

    /* Cambio de la Estructura de 3 Tarjetas a Vertical */
    .product-group {        
        gap: 30px;
        padding: 0 20px; /* Añade un padding lateral interno para que el contenido no toque los bordes */
    }
    
    /* Ajuste de las Tarjetas para Ancho Completo */
    .product-card {
        width: 100%; /* Ocupa el ancho completo disponible */
        min-height: 350px; /* Asegura una altura mínima decente */
        padding: 30px 0;
    }
    
    /*  Ajuste de Imágenes dentro de la Tarjeta */
    .card-inner img {
        max-height: 220px; /* Reduce un poco la altura máxima de la imagen para ahorrar espacio */
    }

    /* Ajuste de los Botones de Navegación */
    .product-nav-btn {
        width: 30px; /* Reduce el tamaño de las flechas */
        height: 30px;
    }

    .products-title {
        font-size: 2.2em; /* Reduce el tamaño del título */
    }

    /*  **********************************************************          Noticias */
    /* --- Layout Alternado --- */
    /* Apila las tarjetas verticalmente */
    .news-row {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Todas las tarjetas ocupan el 100% del ancho */
    .news-card.news-large,
    .news-card.news-small {
        flex: 1 1 100%; 
    }
    
    .news-large img,
    .news-small img {
        height: 250px; /* Reducimos un poco la altura de la imagen grande */
    } 
   
    .news-large h3 {
        font-size: 1.5em; /* Ajustamos el tamaño del título */
    }


    /*  **************************************************************************  Nosotros */
    #nosotros {
        padding: 40px 15px;
        text-align: center; /* Suele verse mejor en móvil si el diseño es simple */
    }
    
    /* Si tienes una imagen y texto juntos, esto los apilará */
    .about-container { 
        display: flex;
        flex-direction: column;
        gap: 20px;
    } 
    
    .about-section {
        background-color: var(--color-monaca-green);
        overflow: hidden;
    }    
  
    .about-bg-img {
        display: none; /* Ocultamos la imagen pesada en móviles */
    }

    /*  **************************************************************************  Recetas */
    .recipes-title {
        font-size: 2.2em;
    }
    
    .recipes-carousel-wrapper {
        padding: 0;
    }

    /* Las tarjetas se apilan verticalmente en móviles */
    .recipe-group {
        flex-direction: column; 
        gap: 30px;
        padding: 0 20px;
    }
    
    .recipe-card {
        width: 100%;
    }

    .recipe-image-wrapper {
        height: 250px; /* Reduce la altura de la imagen en móvil */
    }
}


/* pantalla máximo 900 px de ancho  ---------------------------------------------------------------------------------------------        máximo 900 px */
@media (max-width: 900px) {

     /*  **************************************** ****************  COMPROMETIDOS */
    .container-comp {
        flex-direction: column;
        padding: 0;
    }

    .left-section,
    .right-section {
        padding: 30px;
        min-width: unset; /* Eliminar el ancho mínimo para pantallas pequeñas */
    }

    .title {
        font-size: 2.5em;
    }

    .right-section {
        flex-direction: column; /* Apila las imágenes verticalmente en pantallas pequeñas */
        gap: 20px;
    }

   
    .comprometidos-container {
        flex-direction: column; /* Apilamos las secciones */
        gap: 0;
    }

    .left-section {
        padding: 40px 20px;
        min-width: 100%;
        text-align: center; /* Centramos el texto para mejor lectura en móvil */
    }

    .right-section {
        padding: 20px;
        min-width: 100%;
        order: -1; /* Mueve la imagen arriba del texto en móvil */
    }

    .title-comp, .text2 {
        font-size: 2.5em; /* Ajuste de título para móviles */
    }

    .p-comp {
        font-size: 1.2em; /* Bajamos de 1.7em para que no ocupe toda la pantalla */
        text-align: center;
    }

    .text2-title {
        margin: 0 auto; /* Centramos la línea decorativa */
        width: 60%; 
    }

    /* *************************************************************************** Menú  */

    .navbar-collapse {
        background-color: var(--color-monaca-green);
        padding: 20px;
        border-radius: 0 0 10px 10px;
        text-align: center;
    }
    
    .nav-item {
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav-container {
        padding: 0 20px;
    }

    .main-nav ul li a {
    text-decoration: none;
    color: white;
    }

    /*  **************************************************************************  Nosotros */
    
    .about-bg-img {
        display: none; /* Ocultamos la imagen pesada en móviles */
    }
    .about-content-overlay {
        position: relative; /* Ya no flota, ahora ocupa su propio espacio */
        padding: 60px 20px;
    }
    /*  **************************************************************************  Formulario */
    .contact-layout {
        flex-direction: column; /* Apila las columnas */
    }

    .contact-info {
        flex: 1 1 100%; /* Ocupa el ancho completo */
    }
    
    .contact-info {
        order: 2; /* Mueve la info debajo del formulario en móvil */
        margin-top: 30px;
        padding: 0;
    }
    
    .contact-form-container {
    order: 1; /* Mantiene el formulario arriba */
        flex: 1; /* Ocupa 50% del espacio disponible */
    max-width: 50%; /* Límite para pantallas muy grandes */
    padding: 30px; 
    background-color: #f8f8f8; 
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /*  **************************************** ****************  MISION-VISION */
    .misvis-container {
        flex-direction: column; /* Apila Misión sobre Visión */
    }

    .left-section-misvis, .right-section-misvis {
        padding: 60px 20px;
        min-width: 100%;
        background-size: 20%; /* Ajustamos el tamaño de los recursos decorativos */
    }

    .title-misvis {
        font-size: 3em;
        margin-bottom: 20px;
    }

    .p-misvis {
        font-size: 1.4em; /* Bajamos de 1.7em */
        text-align: center; /* Centramos el texto para mejor estética en móvil */
        max-width: 100%;
        margin: 0 auto;
    }

    .deco-misvis {
        width: 40%; /* Línea un poco más ancha en móviles */
    }

    /*  *********************************************************  Marcas */
    .brands-section {
        padding: 40px 0 0 0;
    } 

    .brands-title { font-size: 2.5em; }

    .brands-deco {
        width: 30%; /* Línea un poco más ancha en pantallas medianas */
    }

    .slider-marcas {
        padding: 10px 0 40px 0;
    }

    .marca-item-slick img {
        max-width: 140px; /* Limitamos el ancho en tablets */
    }
    /*  *********************************************************  Empleos */
    .empl-formu-container {
        flex-direction: column; /* Imagen arriba o abajo del form */
    }
    .right-section-empl {
        height: 400px; /* Altura fija para la imagen en móvil */
    }
    .empl-column-wrapper {
        flex-direction: column; /* Formulario en una sola columna */
        gap: 0;
    }
    .left-section-empl {
        padding: 60px 30px;
    }

    /*  *********************************************************  Footer */
    /* En tablets y móviles, apilamos los bloques verticalmente */
    .footer-content {
        flex-direction: column;
        gap: 30px; /* Espacio entre los bloques apilados */
        text-align: center;
        min-height: auto;
    }
    
    .footer-social-block, 
    .footer-logo-block, 
    .footer-copyright-block {
        flex: auto; /* Ancho automático */
        justify-content: center; /* Centra todo */
        width: 100%;
    }
    
    .social-icons-footer {
        justify-content: center; /* Centra los iconos */
    }
    
    .copyright-lines {
        text-align: center; /* Centra el copyright */
    }

    .social-icons-wrapper {
        justify-content: center; /* Centramos los iconos en móviles */
        margin-top: 15px;
    }
    
    .social-circle-item {
        width: 40px; /* Un poco más pequeños en celular */
        height: 40px;
    }
    
    .social-circle-item i {
        font-size: 1.3rem;
    }
}

/* pantalla máximo 1024 px de ancho  ---------------------------------------------------------------------------------------------        máximo 1024 px */
@media (max-width: 1024px) {
    /* Cintillo 60 años */
    .cintillo-item img {
        max-width: 280px; /* Tamaño intermedio para tablets */
    }
    .cintillo-grid {
        gap: 40px;
    }

    /* Comprometidos */
    .left-section {
        padding: 60px 40px; /* Reducimos el padding superior gigante de 140px */
    }
    
    .title-comp, .text2 {
        font-size: 3em; /* Bajamos de 4.5em a 3em para tablets */
    }

    /* MISION-VISION */
    .left-section-misvis, .right-section-misvis {
        padding: 80px 40px; /* Reducimos el padding de 120px */
    }
    .title-misvis {
        font-size: 3.5em; /* Bajamos de 4.5em */
    }

    /* Marcas */
    .brands-title {
        font-size: 3.5em; /* Bajamos de 4.5em */
    }

    /* Empleos */
    .empl-title { font-size: 3.5em; }
    .left-section-empl { padding: 80px 40px; }
}