/* Evita el scroll lateral en móviles, tablets y monitores más pequeños */

@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
}

/* Ajustes específicos para mobile */
@media (max-width: 768px) {
    .navbar-brand {
        position: relative;
        z-index: 1100;
    }

    /* #redesNav {
        position: absolute;
        top: 10px; 
        right: 10px; 
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        z-index: 1000;
    } */

    /* Mostrar el botón tienda junto con las redes sociales */
    #tienda-btn {
        display: flex !important;
        align-items: center;
        margin: 0;
        padding: 5px;
    }

    #tienda-btn button {
        padding: 5px 10px;
        font-size: 12px;
    }




    /* Tamaño de iconos reducido para mobile */
    .icons-nav img {
        width: 20px;
        height: auto;
    }

    /* Reducción de tamaño del logo */
    .logo-nav {
        width: 70px;
    }
}









/* NEWS-STYLE.CSS */

/* Pantallas grandes (desktop) */
@media (min-width: 1025px) {
    .history-01, .history-02 {
        max-width: 40%;
    }

    .boton {
        margin-top: 15%;
        margin-left: 70%;
    }

    .logo-nav {
        width: 25%;
    }

  

    .redes-nav {
        gap: 30px;
        margin-left: -50px;
    }

    .whatsapp, .email, .gps {
        width: 500px;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    /* .history-01 {
        max-width: 50%;
    }

    .history-02 {
        max-width: 60%;
        margin-bottom: 50px;
    } */

    #mobile-h {
        position:absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #h-01, #h-02 {
        position: relative;
    }
/* Mobile */
}   
@media (max-width: 800px) {
    /* Estilos aplicados solo en pantallas menores a 880px */
    #h-02 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important; /* Control extra */
        pointer-events: none !important; /* Evita interacción */
    }


    /* Mostrar solo la primera imagen bien centrada */
    #h-01 {
        max-width: 80%;
        height: auto;
        display: block;
        margin-top: 20px;
        margin-right: 20%;
    }


    #redesNav{
        position: absolute;
        top: 40%; 
        right: 140px; 
        transform: translateY(-50%); 
        display: flex;
        flex-direction: row; 
        gap: 10px;
        align-items: start;
        z-index: 2000; 
       
    }

        

    .boton {
        margin-top: 10%;
        margin-left: 60%;
    }

    .logo-nav {
        width: 35%;
    }

    /* .redes-nav {
        gap: 15px;
        margin-left: -25px;
        display: flex;
        justify-content:start;

    } */

    .whatsapp, .email, .gps {
        width: 350px;
    }
}

/* Móviles */
@media (max-width: 667px) {
    .history-01, .history-02 {
        max-width: 90%;
    }

    .boton {
        margin-top: 5%;
        margin-left: 0;
        width: 100%;
    }

    .logo-nav {
        width: 50%;
    }

    /* .redes-nav {
        gap: 10px;        
        margin-left: 0; 
        display: flex;
        justify-content:start;
    } */

    .whatsapp, .email, .gps {
        width: 100%;
    }

    .titulo-ideas {
        flex-direction: column;
        margin-top: 50px;
        gap: 10px;
    }

    /* .contact-items {
        flex-direction: column;
        gap: 20px;
        padding: 5px;
    } */

    .contact-items {
        width: 70%;
        height: auto;
        display: block;
        margin: auto;
        flex-direction: column;
        align-items: center;
        /* justify-content: center;  */
        gap: 20px;
        margin-left: 2%;
    }


    
    .img-producto {
        max-width: 100%;
        height: auto;
    }
}


/* NEWS.CSS */

/* Pantallas grandes (desktop) */
@media (min-width: 1025px) {
    .logoSC {
        margin-left: -100px;
        width: 250px;
        height: 250px;
    }

    .redes-icons {
        margin-left: 300%;
        margin-top: 10%;
    }

    .redes-logos {
        width: 60px;
        height: 60px;
    }

    #btn-wsp {
        font-size: 18px;
        padding: 10px 20px;
    }
    .img-producto {
        max-width: 100%;
        height: auto;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .logoSC {
        margin-left: -50px;
        width: 150px;
        height: 150px;
    }

    .redes-icons {
        margin-left: 150%;
        margin-top: 5%;
    }

    .redes-logos {
        width: 45px;
        height: 45px;
    }

    #btn-wsp {
        font-size: 16px;
        padding: 8px 15px;
    }
    .img-producto {
        max-width: 100%;
        height: auto;
    }
}

/* Móviles */
@media (max-width: 767px) {
    .logoSC {
        margin-left: 0;
        width: 100px;
        height: 100px;
    }

    .redes-icons {
        flex-direction: column;
        margin-left: 0;
        margin-top: 5%;
        align-items: center;
    }

    .redes-logos {
        width: 40px;
        height: 40px;
        margin: 5px;
    }

    #btn-wsp {
        font-size: 14px;
        padding: 5px 10px;
        text-align: center;
        width: 100%;
    }
    .img-producto {
        max-width: 100%;
        height: auto;
    }
}


/* PRODUCTOS.CSS */

/* Productos CSS Responsive */

/* Desktop 22" o más */
@media (min-width: 1600px) {
    .productos-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .img-producto {
        max-width: 100%;
        height: auto;
    }
}

/* Media Query para pantallas pequeñas (menos de 1000px) */
@media screen and (max-width: 1000px) {
    .content-producto {
        width: 45%;
    }
    .img-producto {
        max-width: 100%;
        height: auto;
    }
}

/* Media Query para móviles (menos de 700px) */
@media screen and (max-width: 700px) {
    #img-original {
        width: 100%;
    }
    #img-fina {
        width: 100%;
    }
    #img-ahumada {
        width: 100%;
    }
    #img-pimientas {
        width: 100%;
    }
    #img-suave {
        width: 100%;
    }
    #img-especial {
        width: 100%;
    }

    #contenedor-original {
        width: 60%;
    }
    #contenedor-fina {
        width: 60%;
    }
    #contenedor-ahumada {
        width: 60%;
    }
    #contenedor-pimientas {
        width: 60%;
    }
    #contenedor-suave {
        width: 60%;
    }
    #contenedor-especial {
        width: 60%;
    }

    .img-producto {
        max-width: 100%;
        height: auto;
    }

     
}



/* recetas */


/* Mobile: Uno debajo del otro */
@media (max-width: 768px) {
    .container-recetas {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        max-width: 95% !important; /* Hace que ocupe más ancho */
        margin: auto !important;
    }

    .col-md-4,
    .recetas-details {
        flex: 1 1 100% !important;
        max-width: 95% !important; /* Aumenta el ancho para que no quede tan apretado */
    }

    .ingrediente {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 95% !important; /* Más ancho */
    }

    .recetas-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 10px !important;
        max-width: 95% !important; /* Más espacio para el texto */
    }

    .recetas-container img {
        max-width: 100% !important; /* Imagen más grande */
        height: auto !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }

    .recetas-container .receta-texto {
        width: 100% !important;
        text-align: left !important; /* Alinea a la izquierda como en la referencia */
        font-size: 13px !important; /* Fuente más pequeña */
        line-height: 1.6 !important; /* Más espaciado entre líneas para mejor lectura */
        padding: 0 20px !important; /* Más margen lateral */
    }

    .content-recetas h2, 
    .content-recetas h4, 
    .content-recetas ul, 
    .content-recetas ol {
        width: 100%;
        /* margin: 0 auto; */
        text-align: left !important; /* Para que los ingredientes no queden demasiado centrados */
        font-size: 14px !important; /* Un tamaño más chico para el contenido */
        line-height: 1.6 !important;
    }

    .img-responsive{
        width: 90%;
        display: block;
        margin: auto;
        /* margin-left: 8%; */
    }
}

  

  
/* SECCION HISTORIA, MENU TOGGLE Y TN REDES MAS CENTRADOS */
/* Ajustes para pantallas móviles */
@media (max-width: 768px) {
    /* Imágenes historia */
    .mobile-device {
      display: flex;
      flex-direction: row;
      justify-content: center; /* Centra ambas imágenes horizontalmente */
      align-items: center; /* Alinea verticalmente las imágenes */
      gap: 10px; /* Espacio entre las imágenes */
    }
  
    .mobile-device img {
      float: none; /* Elimina el float */
      position: relative; /* Mantiene la posición relativa */
      max-width: 40%; /* Ajusta el tamaño de las imágenes */
      height: auto;
    }

    .history-p{
        padding: 0 30px !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
  
    /* Menú toggle */
    .navbar-toggle {
      margin-right: 55px; /* Mueve el toggle más hacia adentro */
    }

    /* Estilo para móviles */

  
    /* Redes sociales */
    
    /* .redes-nav {
      display: flex;
      justify-content: start; 
      align-items: center; 
      gap: 15px; 
      margin-right: 80%; 
      margin-top: 20px; 
    } */
  
    .redes-nav .icons-nav img {
      width: 25px; /* Reduce el tamaño de los íconos para móviles */
      height: 25px;
    }
  }

  /* Botón tienda suspendido momentáneamente*/
  /* @media screen and (max-width: 768px) {
    #tienda-btn button {
        background-color: rgb(248, 3, 3);
        border-color: rgb(199, 98, 3);
        box-shadow: 2px 2px 5px rgb(36, 115, 219);
    }

    #tienda-btn {
       
        position: fixed;        
        right: 40px;  
        top: 95px;
        display: flex;
        padding: 5px 10px;
        font-size: 14px;
        z-index: 1000; 
    }
    

    .navbar-nav .tienda {
        display: none; 

    
} */






@media (max-width: 1024px) { /* Tablets y móviles */
    #home-carousel .carousel-inner .item {
        /* background-image: url('img/slider/bg1q.jpg'); */
        background-size: cover; /* Para que la imagen se ajuste dentro del contenedor */
        background-position: center center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
    }

    .carousel-caption > div {
        padding: 50px 25px; /* Reduce el padding para mejor adaptación */
        top: 20%; /* Ajusta la posición vertical */
        width: 90%; /* Reduce el ancho del texto */
    }

    #home-carousel .carousel-inner h2 {
        font-size: 20px; /* Reduce el tamaño del texto */
        line-height: 30px;
    }

   
}

@media (max-width: 768px) { /* Para móviles y tablets */
    .container-recetas {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }

    .image img {
        width: 100%;
        max-width: 400px; /* Mantiene proporción */
        margin-bottom: 10px;
    }

    .content-recetas {
        width: 100%;
        max-width: 450px; /* Más ancho para que no se vea tan apretado */
        text-align: center;
    }

    .content-recetas h2, 
    .content-recetas h4, 
    .content-recetas ul, 
    .content-recetas ol {
        max-width: 100%;
        margin: 0 auto;
        text-align: left; /* Evita que los ingredientes queden demasiado centrados */
    }

    .detalles-items {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 450px; /* Mismo ancho que el texto */
    }

    .recetas-details {
        width: 100%;
        max-width: 400px;
        margin-bottom: 10px;
    }

    

   
}