/* ==========================================
   PRODUCTOS HOME
========================================== */

.productos-home{
  padding:90px 20px;
  background:var(--color-blanco);
}

.productos-container{
  max-width:1200px;
  margin:auto;
  text-align:center;
}

.productos-container h2{
  font-size:32px;
  font-weight:600;
  margin-bottom:10px;
  color:#1f2937;
}

.productos-subtitle{
  font-size:15px;
  color:#6b7280;
  margin-bottom:50px;
}


/* ==========================================
   GRID
========================================== */

.productos-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}


/* ==========================================
   CARD
========================================== */

.producto-card{
  background:var(--color-light);
  border-radius:14px;

  padding:22px 18px;

  border:1px solid #f1f1f1;

  transition:all .3s ease;

  cursor:pointer;
}

.producto-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}


/* Imagen */

.producto-card img{
  width:100%;
  height:170px;

  object-fit:contain;

  margin-bottom:14px;

  transition:transform .35s ease;
}

.producto-card:hover img{
  transform:scale(1.05);
}


/* Texto */

.producto-card h3{
  font-size:16px;
  font-weight:500;
  color:#111827;
}


/* ==========================================
   BOTON CATALOGO
========================================== */

.btn-catalogo{
  display:inline-block;

  margin-top:50px;

  padding:12px 26px;

  border-radius:999px;

  background:var(--color-primario);
  color:#fff;

  text-decoration:none;
  font-weight:500;
  font-size:14px;

  transition:all .25s ease;
}

.btn-catalogo:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,0.15);
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1000px){

  .productos-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:600px){

  .productos-home{
    padding:70px 15px;
  }

  .productos-container h2{
    font-size:26px;
  }

  .productos-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  .producto-card{
    padding:18px 14px;
  }

  .producto-card img{
    height:130px;
  }

}