@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body{
    background-color: #5e2129;
    font-family: 'Poppins', sans-serif;
}

.container{
max-width: 1200px;
    margin: 0 auto;
}

.swiper-button-prev::after{
    font-size: 25px;
}
.swiper-button-next::after{
    font-size: 25px;
}

.swiper-button-next{
    color: #ffffff;
}

.swiper-button-prev{
    color: #ffffff;
}

.swiper-pagination-bullet {
    background-color: #d3d2d2;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #db1818;
}

.menu{
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 1000;
}

.navbar{
    display: flex;
}

.menu-1{
    margin-right: -100px;
}

.menu-2{
    margin-left: 180px;
    display: flex;
    align-items: center;

}

.logo-1{
    width: 0;
}


.logo-2{
    width: 150px;
}

.socials{
    display: flex;
}

.social{
    margin: 0 10px;
    height: 40px;
    width: 40px;
    border: 1px solid #4218db;
    border-radius: 50%;
}

.social:hover{
    background-color: #db2418;
}

.social img{
    margin: 8px 0 0 10px;
}

.menu .navbar ul li{
    position: relative;
    float: left;
}

.menu .navbar ul li a {
    font-size: 18px;
    padding: 20px;
    color: #ffffff;
    display: block;
}
.menu .navbar ul li a:hover {
    color: #ffffff;
}
#menu{
    display: none;
}

.menu-icono{
width: 25px;
}

.menu label{
    cursor: pointer;
    display: none;
}

.header-content{
margin-top: 200px;
padding-bottom: 50px;
}

.slider {
    display: flex;
    align-items: center;
}

.slider-txt {
    margin-left: 85px;
    width: 50%;
}

.slider-txt h1{
    font-size: 70px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 800;
}

.slider-txt p{
    font-size: 18px;
    color: #a7a7a7;
}

.botones{
    margin-top: 50px;
}

.btn-1 {
    display: inline-block;
    padding: 15px 35px;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-right: 20px;
    border-radius: 50px;
}

.btn-1:hover{
    background-color: #ff1100;
}

.slider-img{
    width: 50%;
}

.slider-img img{
    margin-right: 225px;
    width: 550px;
}

.products {
    background-color: #0d0d0d;
}

.tabs{
    display: flex;
    flex-wrap: wrap;
    padding: 100px 0px;
}

.tabs label{
    width: 15%;
    order: 1;
    display: block;
    padding: 20px 0;
    text-align: center;
    cursor: pointer;
    color: #a7a7a7;
    font-weight: 700;
    transition: background ease 0.2s;
}

.tabs .tab{
    order: 99;
    flex-grow: 1;
    width: 100%;
    display: none;
    padding-top: 25px;
}

.tabs input[type="radio"]{
    display: none;
}

.tabs input[type="radio"]:checked + label {
    border-bottom: 2px solid #fc0202;
    color: #ffffff;
}

.tabs input[type="radio"]:checked + label + .tab{
    display: block;
}

.product {
    display: flex;
    align-items: center;
    padding: 25px;
    margin: 0 10px;
}

.product-img{
    width: 50%;
    text-align: left;
}

.product-img h4{
    display: inline-block;
    padding: 5px 7px;
    line-height: 15px;
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 800;
    border: 2px solid #555555;
    border-radius: 10px;
    margin-bottom: 50px;
} 

.product-img img{
    width: 150px;
    height: 120px;
}

.product-txt{
    width: 50%;
    margin-left: 10px;
    text-align: left;
}

.product-txt h4{
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 5px;
}

.product-txt p{
    color: #a7a7a7;
    font-size: 16px;
    margin-bottom: 15px;
}

.product-txt span{
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.info{
    padding: 100px 0px;
    display: flex;
    align-items: center;
    position: relative;
    top: 75px;
}
.info-img{
    width: 50%;
}

.info-img img{
    width: 500px;
    height: 250px;
}

.info-txt{
    width: 50%;
}

.info-txt h2{
    font-size: 75px;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.info-txt p{
    font-size: 19px;
    color: #a7a7a7;
    margin-bottom: 50px;
}

.btn-3{
    display: inline-block;
    padding: 15px 35px;
    background-color: #db2418;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 50px;
}

.btn-3:hover{
    background-color: #ab1c15;
}

.horario{
    padding: 100px 0px;
    background-color: #0d0d0d;
}

.horario-info h2{
    font-size: 75px;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.horario-txt{
    display: flex;
    justify-content: space-between;
}
.txt{
    color: #ffffff;
}

.txt h4{
    font-size: 18px;
    color: #a7a7a7;
    margin-bottom: 30px;
}

.txt p{
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}

.map1{
position: relative;
height: 200px;
top: 150px;

}
.map2{
position: relative;
left: 745px;
bottom: 95px;
height: 205px ;
}
.map3{
position: relative;
height: 205px;
top: 5px;


}
.ecatepec{
    color: #ffffff;
    position: relative;
    left: 50px;
    top: 120px;
}
.chicoloapan{
    color: #ffffff;
    position: relative;
    left: 800px;
    bottom: 120px;
}
.ixtapaluca{
    color: #ffffff;
    position: relative;
    left: 50px;
    bottom: 50px;
}

.footer{
    padding: 100px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    bottom: 100px;
    width: 20000px;
}

.links h4{
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.link ul li a{
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 5px;
    display: inline-block;
}

.eca{
    position: relative;
    bottom: 15px;
}

.ecat{
    position: relative;
    bottom: 30px;
}

.hor{
    position: relative;
    right: 30px;
}

.tel{
    position: relative;
    right: 30px
}

.face{
    position: relative;
    bottom: 13px;
    right: 15px;
}
.ins{
    position: relative;
    bottom: 13px;
    right: 15px;
}

.gma{
    position: relative;
    bottom: 13px;
    right: 15px;
}

.pro{
    width: 750x;
    height: 750px;
    position: relative;
    left: 200px;
    top: 50px;
}

.ali{
    color: #ffffff;
}

@media(max-width: 991px){
    .menu{
        padding: 20px;
        justify-content: space-between;
    }

.menu-2{
    display: none;
}

.logo-1{

    width: 100px;
}

.logo-2{
    width: 0;
}

.menu label{
    display: initial;
}

.menu .navbar{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #181818;
    display: none;
}

.menu .navbar ul li{
    width: 100%;
}

#menu:checked ~ .navbar{
    display: initial;
}

    .header-content{
        padding: 30px;
        margin-top: 100px;
    }

    .slider{

        flex-direction: column;
    }

    .slider-txt{
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-bottom: 50px;
    }

    .slider-txt h1{

        font-size: 50px;
    }


        .slider-txt p{
            font-size: 16px;
        }

    
        .btn-1{
            padding: 10px 25px;
            font-size: 14px;
        }

        .slider-img{
            width: 100%;
            text-align: center;
        }

        .slider-img img{
            margin-right: 0px;
            width: 300px;
        }

        .swiper-horizontal > .swiper-pagination-bullet,
        .swiper-pagination-bullet, .swiper-pagination-horizontal,
        .swiper-pagination-custom,
        .swiper-pagination-fraction{
            bottom: -7px;
        }

        .tabs{
            padding: 50px 30px;
        }

        .tabs label{

            width: 33%;
        }

        .info{
            padding: 30px;
            flex-direction: column;
        }

        .info-img{
            width: 100%;
            text-align: center;
        }

        .info-img img{
            width: 400px;
            height: 200px;
            margin-bottom: 25px;
        }

        .info-txt{
            width: 100%;
            text-align: center;
        }

        .info-txt h2{
            font-size: 50px;
        }

        .info-txt p{
            font-size: 16px;
        }


        .btn-1{
            font-size: 16px;
        }

        .horario{
            padding: 30px;
            text-align: center;
        }

        .horario-info h2{
            font-size: 50px;
            margin-bottom: 15px;
        }

        .horario-txt{
            flex-direction: column;
        }

        .socials{
            justify-content: center;
        }

        .social img{
            margin: 8px 0 0 0;
        }

        .footer{
            padding: 30px;
            flex-direction: column;
            text-align: center;
        }

        .links h4{
            margin: 25px 0px 10px 0px;
        }

}

.info1{
    position: relative;
    bottom: 40px;
}

.pie{
    color: #ffffff;
}

.chico{
    position: relative;
    bottom: 16px;
}


.chicolo{
    position: relative;
    bottom: 28px;
}

.ixta{
    position: relative;
    bottom: 16px;
}


.ixtapa{
    position: relative;
    bottom: 28px;
}

.luca{
    position: relative;
    bottom: 28px;
}

.semi{
    position: relative;
    left: 20px;
    bottom: 10px;
    color: #ffffff;
}

.form-content{
    background: linear-gradient(
      50deg,
      rgba(40,42,55,1) 50%,
      rgba(40,42,55,0.7)
    ),
    url(imagenes/semillas.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    width: 500px;
    border-radius: 25px;
 position: relative;
 top: 50px;
  }
  
  .form-content h2{
    color: #ffffff;
    font-size: 40px;
    margin-bottom: 25px;
  }
  
  form{
  
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  
  label{
  
    font-size: 17px;
    color: gray;
    margin-bottom: 10px;
  }
  
  
  input , textarea{
    padding: 17px 14px;
    background-color: #333646;
    border: 0;
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  
  :focus{
    outline: 1px solid #1E92E9;
  
  }
  
  .btn4{
    background-color: #1E92E9;
    width: 150px;
    align-self: flex-end;
    cursor: pointer;  
  }
  
  .btn4:hover{
    background-color: #219BF9;
  }
  
  @media(max-width: 991px) {
    body{
      padding: 30px;
    }
  
    .form-content{
      width: 100%;
    }
  
    form{
      width: 100%;
    }

    #logo-info{
        display: none;
    }
    
  }

  .product-img {
    position: relative;
    overflow: hidden; /* Para ocultar el desbordamiento */
}

.product-image {
    width: 100%; /* Asegúrate de que la imagen se ajuste al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    transition: transform 0.4s ease; /* Transición suave */
}

.product-image:hover {
    transform: scale(1.1); /* Aumenta el tamaño al pasar el cursor */
}

.video-2
{
    width: 95%;
    height: 95%;
    position: relative;
    bottom: 70px;
}
.logo-info{
    position: relative;
    left: 50%;
    bottom: 165px;
    width: 50%;
}

.imagen-uniforme {
    width: 300px; /* Ancho fijo */
    height: 500px; /* Alto fijo */
    object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
}

.hor1{
    position: relative;
    top: 85px;
    right: 30px;
  }

  .hor2{
    position: relative;
    top: 210px;
    right: 30px;
  }

  .tel1{
    position: relative;
    top: 85px;
    right: 30px;
  }

  .tel2{
    position: relative;
    top: 210px;
    right: 30px;
  }

  .social1{
    position: relative;
    top: 85px;
    left: 25px;
  }
  .gma1{
    position: relative;

    left: 5px;
  }
  .ins1{
    position: relative;

    right: 5px;
  }

  .face1{
    position: relative;

    right: 19px
  }

  .social2{
    position: relative;
    top: 200px;
    left: 25px;
  }

  .gma2{
    position: relative;

    left: 5px;
  }
  .ins2{
    position: relative;

    right: 5px;
  }

  .face2{
    position: relative;

    right: 19px
  }
  /* --- ESTILOS PARA MÓVILES (Agrega esto al final) --- */

@media (max-width: 991px) {
    /* 1. Resetear el ancho del footer para evitar scroll horizontal infinito */
    .footer {
        width: 100% !important;
        position: static;
        flex-direction: column;
        text-align: center;
        padding: 50px 20px;
    }

    /* 2. Quitar empujes laterales (left/right) y posiciones fijas */
    .map1, .map2, .map3 .ecatepec, .chicoloapan, .pro, .menu-1, .menu-2, .eca, .ecat, .hor, .tel, .face, .ins, .gma {
        position: static !important;
        margin: 10px auto;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    /* 3. Ajustar el Slider y textos gigantes */
    .slider {
        flex-direction: column;
        text-align: center;
    }
    
    .slider-txt {
        width: 100%;
        margin-left: 0;
    }

    .slider-txt h1, .info-txt h2, .horario-info h2 {
        font-size: 35px; /* Tamaño legible en celular */
    }

    .slider-img img, .info-img img {
        width: 100% !important;
        max-width: 400px;
        margin-right: 0;
    }

    /* 4. Ajustar pestañas (Tabs) y productos */
    .tabs label {
        width: 50%; /* Dos pestañas por fila */
    }

    .product {
        flex-direction: column;
        text-align: center;
    }

    .product-img, .product-txt {
        width: 100%;
        margin-left: 0;
    }

    .horario-txt {
        flex-direction: column;
        gap: 20px;
    }
}

/* Evita que cualquier elemento se salga de la pantalla por accidente */
body {
    overflow-x: hidden;
    width: 100%;
}


/* --- SUPER FIX PARA MÓVIL (Pégalo hasta abajo) --- */

@media (max-width: 991px) {
    /* 1. Forzamos a que las secciones no se encimen */
    .info, .horario, .horario-info, .horario-txt {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        position: static !important;
        padding: 20px !important;
        text-align: center !important;
    }

    /* 2. LIMPIEZA TOTAL de posiciones manuales (top, left, bottom) */
    .eca, .ecat, .hor, .tel, .face, .ins, .gma, 
    .map1, .map2, .map3, .ecatepec, .chicoloapan, .chico, .chicolo,
    .social, .social1, .face1, .ins1, .gma1 {
        position: static !important; /* Esto anula tus movimientos manuales */
        margin: 10px auto !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: auto !important;
    }

    /* 3. Ajuste de imágenes y video */
    .info-img, .info-txt, .txt {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }

    .video-2, .logo-info {
    margin-top: 70px !important; /* Ajusta este número (50px, 60px) hasta que quede donde quieras */
        display: block;
        width: 100% !important;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
            /* También daremos espacio al texto que está debajo del video */
    .info-txt {
        margin-top: 300px !important;
    }
    }

    /* 4. Arreglar el amontonamiento de las columnas de texto */
    .horario-txt {
        gap: 40px; /* Separa los bloques de Dirección, Horario y Teléfono */
    }

    .socials {
        justify-content: center !important;
        display: flex !important;
        gap: 15px;
    }

    /* 5. Títulos más pequeños para que no se corten */
    .info-txt h2, .horario-info h2 {
        font-size: 30px !important;
        margin-bottom: 15px !important;
    }
}

@media (max-width: 991px) {
    .logo-info {
        display: none !important;
    }
}
@media (max-width: 991px) {
    .social1 { 
        display: none !important; /* Esto oculta el segundo bloque repetido en celulares */
    }
     .social2 { 
        display: none !important; /* Esto oculta el segundo bloque repetido en celulares */
    }
    .hor2 { 
        display: none !important; /* Esto oculta el segundo bloque repetido en celulares */
    }
    .tel2 { 
        display: none !important; /* Esto oculta el segundo bloque repetido en celulares */
    }

    
}

@media (max-width: 991px) {
    /* 1. Limpiamos Horario y Teléfono (como hicimos con las redes sociales) */
    .hor, .hor1, .tel, .tel1 {
        position: static !important; /* Quita el right: 30px y otros movimientos */
        margin: 0 auto 10px auto !important; /* Centra y da espacio abajo */
        display: block !important;
        text-align: center !important;
        border: none !important; /* Quita cualquier borde si lo hubiera */
        background: none !important; /* Quita fondos */
    }

    /* 2. Quitamos los datos repetidos para que solo quede uno de cada uno */
    p.hor1, p.tel1 {
        display: none !important;
    }

    /* 3. Aseguramos que los contenedores no se encimen */
    .txt {
        width: 100% !important;
        margin-bottom: 30px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 4. Estilo para los títulos (h4) para que se vean uniformes */
    .txt h4 {
        color: #ffffff;
        text-transform: uppercase;
        font-size: 18px;
        margin-bottom: 15px !important;
    }
}

/* Esto se aplicará solo en pantallas de celular (menos de 768px) */
@media screen and (max-width: 768px) {
    
    /* Forzamos el título de Ecatepec */
    h2.ecatepec {
   display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    
    /* CAMBIA ESTO: */
    text-align: left !important;    /* Lo alinea a la izquierda */
    width: auto !important;         /* Deja que el ancho sea natural */
    margin-left: 0px !important;   /* Un pequeño margen para que no pegue al borde del vidrio */
    
    /* MANTÉN ESTO: */
    margin-top: 50px !important;
    position: relative !important;
    z-index: 999 !important;
    }

    /* Ajustamos el mapa para que no "tape" al título */
    .map1 .map2 .map3 {
        width: 100% !important;
        height: 300px !important;
        display: block !important;
        margin: 0 auto !important;
    }

h2.ixtapaluca {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    
    /* CAMBIA ESTO: */
    text-align: left !important;    /* Lo alinea a la izquierda */
    width: auto !important;         /* Deja que el ancho sea natural */
    margin-left: -50px !important;   /* Un pequeño margen para que no pegue al borde del vidrio */
    
    /* MANTÉN ESTO: */
    margin-top: 50px !important;
    position: relative !important;
    z-index: 999 !important;
}


    }

    .map3 {

         margin-top: -35px !important;
    }
     
    .carousel {
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.carousel-container {
    display: flex;
    transition: transform 0.6s ease-in-out;
}

.promo-item {
    display: flex; /* Pone imagen y texto uno al lado del otro */
    min-width: 100%; /* Cada slide ocupa todo el ancho del carrusel */
    align-items: center;
    background-color: #fff;
}

.promo-item img {
    width: 50%; /* La imagen ocupa la mitad izquierda */
    height: 300px; /* Puedes ajustar esta altura */
    object-fit: contain; /* Para que la imagen no se corte */
}

.promo-info {
    width: 50%; /* El texto ocupa la mitad derecha */
    padding: 20px;
    font-family: sans-serif;
}
.logo-info {
    /* 1. Control de tamaño amplio */
    width: 400%;             /* Se expande al ancho de su contenedor */
    max-width: 600px;        /* Pero no pasará de este tamaño para no pixelarse */
    height: auto;            /* OBLIGATORIO: Mantiene la proporción original */

    /* 2. Truco para nitidez extrema */
    image-rendering: -webkit-optimize-contrast; /* Para Chrome y Safari */
    image-rendering: crisp-edges;               /* Para Firefox */
    
    /* 3. Asegura que no se deforme si está en un Flexbox */
    object-fit: contain;     
    flex-shrink: 0;
}

/* --- AJUSTES PARA CELULARES --- */
@media (max-width: 768px) {
    .slider {
        flex-direction: column; /* Pone la imagen arriba y el texto abajo */
        text-align: center;
        padding: 20px;
        min-height: auto;
    }

    .slider-txt, .slider-img {
        width: 100%; /* Ambos ocupan todo el ancho disponible */
    }

    .slider-txt h1 {
        font-size: 1.8rem; /* Texto un poco más pequeño para que quepa bien */
        margin-bottom: 10px;
    }

    .slider-txt p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .imagen-uniforme {
        max-width: 100%; /* Que use todo el ancho del celular */
        height: 250px;   /* Altura reducida para que no tape toda la pantalla */
        margin-top: 20px;
    }
}