/* =========================================================
   TEJIENDO SUEÑOS CLAU - catalogo.css
   Imágenes uniformes, textos del producto y paginación
   (ahora enlazado en index.html)
   ========================================================= */

.producto-img{
  width:calc(100% + 4px);   /* cubre la tarjeta de borde a borde */
  margin:-2px;              /* compensa el borde de 2px de la tarjeta */
  aspect-ratio:1/1;
  object-fit:cover;         /* la foto LLENA todo el espacio de la tarjeta */
  background:#fff;
  padding:0;
  border-radius:0;          /* la tarjeta recorta las esquinas */
  transition:transform .4s ease;
}
.card:hover .producto-img{transform:scale(1.05)}

.card-body{padding:18px}
.nombre{font-size:clamp(1.15rem, 3.5vw, 1.3rem);margin-bottom:8px}
.descripcion{color:var(--muted);margin-bottom:12px}
.precio{font-size:clamp(1.25rem, 4vw, 1.5rem);color:var(--primario);font-weight:bold;margin-bottom:15px}
.acciones{display:flex;gap:10px;flex-wrap:wrap}
.btn.secundario{background:var(--whatsapp)}
.btn.secundario:hover{background:#1eb255}

/* ===== Paginación ===== */
#paginacion{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:40px 0;
  flex-wrap:wrap;
}
#paginacion button{
  padding:10px 16px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:#f2e5da;
  font-family:inherit;
  font-size:1rem;
  transition:.3s;
}
#paginacion button:hover{background:var(--primario);color:#fff}
#paginacion button.activo{background:var(--primario);color:#fff}
#paginacion button:focus-visible{outline:3px solid var(--primario);outline-offset:2px}

/* En móviles las tarjetas aprovechan más el ancho */
@media (max-width:600px){
  #productos{gap:12px}
  #catalogo{padding-left:10px;padding-right:10px}
}