:root {
  --white: #ffffff;
  --marfil: #eceee7;
  --arcilla: #888075;
  --grisoscuro: #383734;
  --black: #0f0e0e;
  --amarillo: #f6ac01;
  
  --gradient2: linear-gradient(
    45deg,
    rgba(5, 5, 5, 1) 0%,
    rgba(5, 5, 5, 1) 14%,
    rgba(10, 7, 6, 1) 29%,
    rgba(61, 44, 42, 1) 47%,
    rgba(66, 51, 49, 1) 54%,
    rgba(69, 48, 45, 1) 63%,
    rgba(77, 53, 50, 1) 74%,
    rgba(77, 62, 60, 1) 80%,
    rgba(145, 134, 132, 1) 100%
  );
  --font-Hind: "Hind", sans-serif;
  --font-Montserrat: "Montserrat", sans-serif;
  --font-Roboto: "Roboto", sans-serif;
}
main{
  max-width: 1300px;
  margin: 0 auto;
  padding-top: 0;
}
.bloque_producto {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 100px;
}
.primera_parte_producto {
  display: flex;
  align-items: center; 
  gap: 20px; 
  padding-left: 20px;
  /* margin-bottom: 20px;
  padding-left: 60px; */
}

.foto_circular {
  height: 90px; 
  border-radius: 50%;
}

.palabras_producto {
  font-weight: 600;
  font-size: 20px;
  margin: 0; 
}
.segunda_parte{
  padding-top: 20px;
}
.contenedor_img {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas por defecto (mobile) */
    gap: 10px;
    padding: 10px;
    width: 90%;
    max-width: 1200px;
  }
  
  .contenedor_img img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    padding: 0;
  }
  #contacto_Whatsapp{
    z-index: 1;
  }
  .popup {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 999;
    padding-top: 80px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(99, 88, 87,0.9); /* fondo oscuro */
    padding-top: 60px;
  text-align: center;
  }
  
  .popup img {
    margin-top: 40px;
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    border-radius: 10px;
  }
  
  #closePopup {
    position: absolute;
    top: -20px;
    right: 20px;
    color: #fff;

    background-color: rgba(0, 0, 0, 0.5);
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;

    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
  }
  .popup-content {
    position: relative;
    display: inline-block;
    max-width: 90vw;
  }
  
  .popup-content img {
    margin-top: 40px;
    max-width: 100%;
    max-height: 80vh;
    border-radius: 10px;
  }

  .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s ease;
    user-select: none;
  }
  
  .nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  #closePopup:hover{
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  #prev {
    left: 10px;
  }
  
  #next {
    right: 10px;
  }
  /* Nosotros */

  .nosotros, .nuestra_propuesta {
    max-width: 800px;
    margin: 0 auto; /* centra horizontalmente */
    padding: 40px 40px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.6;
    font-family: var(--font-Roboto);
  }
  
  .nuestra_propuesta ul>li{
    line-height: 2;
  }
  .segunda p{
    font-family: var(--font-Roboto);
    font-size: 14px;
    line-height: 1.3;
  }
    
  .foto_inferior_nosotros {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    object-fit: cover;
    display: block;
  }

  .parent2, .parent, .parent3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en todos los tamaños */
    gap: 8px;
    margin: 25px 0;
  }
  .parent img, 
  .parent2 img,
  .parent3 img 
  {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
  }  
  .div2,
  .div6,
  .div7,
  .div8 {
    grid-column: span 2; /* Ocupan las dos columnas (pantalla completa) */
  }
  .div1,
  .div01,
  .div3,
  .div4 {
    grid-column: span 1; /* Ocupan una columna cada una → en la misma fila */
  }


  .div3 img,
  .div4 img {
    width: 100%;
    aspect-ratio: 4 / 3; /* o ajustá según el formato real de tus imágenes */
    object-fit: cover;
    border-radius: 6px;
  }
  
  .div1 img, .div01 img{
    margin-bottom: 8px;
  }
  
  /* PROVEEDORES */

  .proveedores{
    max-width: 800px;
    margin: 0 auto; /* centra horizontalmente */
    padding: 40px 40px;
  }
  .logos{display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* Esto centra los logos horizontalmente */
    gap: 16px; /* opcional: espacio entre los logos */
    padding: 20px 0; /* opcional: espacio arriba y abajo */

  }
  .logos a:nth-child(1) img, 
  .logos a:nth-child(2) img{
    height: 70px;
    margin: 10px;
    border-radius: 15px;
  }
  .logos a:nth-child(3) img, 
  .logos a:nth-child(4) img{
    height: 50px;
    margin: 10px;
    border-radius: 15px;
  }
  
  .tercera_parte_nuestra_propuesta{
    margin-top: 0;
  }
  
  @media only screen and (min-width: 768px) {
    
    
    .foto_circular{
      height: 132px;
      
    }
    .primera_parte_producto{
      margin-bottom: 20px;
      padding-left: 60px;
    }
    .segunda_parte {
      display: grid;
      grid-template-columns: none;
      gap: 30px;
      max-width: 1000px;
      padding-top: 0;
      padding-bottom: 0;
      

    }
    .nosotros, .nuestra_propuesta {
      font-size: 1.1rem;
    }
    .parent2, .parent{
      margin: 50px 0;
    }
    .parent3 {
      margin-top: 50px;
    }

    .foto_inferior_nosotros {
      position: static;
      max-width: 800px;
      margin: 0 auto; /* centra horizontalmente */
      padding: 40px 40px;
   
  }
  


    .tercera_parte {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 40px 20px;
      max-width: 600px;
      margin: 0 auto;
    }
    .tercera_parte_nuestra_propuesta{
      padding-top: 0;
    }
    
    .tercera_parte .logo_arcilla {
      max-width: 180px;
      margin-bottom: 20px;
    }
    
    .tercera_parte .redes_sociales {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top: 20px;
    }
    
    .tercera_parte .redes_sociales img {
      width: 30px;
      height: 30px;
    }
    
    .contenedor_img {        
      grid-template-columns: repeat(4, 1fr); /* 4 columnas en pantallas grandes */
      gap: 15px;
    }
    .segunda {
      max-width: 800px; 
      margin: 0 auto;
      text-align: left;
      padding: 20px;
    }
    
    
    .segunda p{
      font-size: 16px;
      line-height: 1.6;
      
    }
    .foto_inferior_nosotros {
      height: 500px;
    }
  }