/* ============ CARRUSEL "También en Pastas Pariggi" ============
   Compartido por fetch()/link en 30 páginas — ver assets/carrusel.js
   para el comportamiento y assets/carrusel-partial.html para el markup.
   Antes vivía duplicado a mano en cada página; cualquier ajuste de
   tamaño/estilo se hacía 30 veces. Editar solo acá. */

.productos-title{
  font-family:'Veneer', sans-serif;
  font-weight:400;
  font-size:72px;
  letter-spacing:0.08em;
  color:#000;
  text-align:center;
  margin-bottom:40px;
  text-transform:uppercase;
}
.carrusel-wrap{
  position:relative;
  width:100%;
  padding: 0 60px;
}
.carrusel-viewport{
  overflow:hidden;
  position:relative;
  touch-action: pan-y;
}
.carrusel-viewport.dragging{ }
.carrusel-track{
  display:grid;
  grid-template-rows: 460px;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 96px) / 4);
  gap: 32px;
  padding: 8px 0;
  will-change: transform;
}

/* La card entera es un <a>: la foto, el nombre y el rectángulo navegan, no
   solo el "Ver más". El hover la levanta y la acerca un poco. */
.card{
  width:100%;
  height:460px;
  background:#fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  border-radius:0;
  display:flex;
  flex-direction:column;
  user-select:none;
  -webkit-user-drag:none;
  text-decoration:none;
  color:inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}
/* Mientras se arrastra el carrusel no tiene que haber hover: el puntero pasa
   por encima de card tras card y se ven todas saltando. */
.carrusel-viewport.dragging .card:hover{
  transform:none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
/* Foco de teclado: la card ahora es tabulable y tiene que verse. */
.card:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.card-img{
  width:100%;
  height:320px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:0;
}
.card-img img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  pointer-events:none;
}
/* Ya no hay reglas de encuadre por producto. Los 15 packagings están
   normalizados a un mismo lienzo 4:5 (1080x1350) con la caja recortada,
   llevada al mismo alto y centrada, así que entran parejos sin scale().
   Si se suma una foto nueva, normalizarla igual en vez de agregar un
   transform a medida acá. */

.card-placeholder{
  width:100%;
  height:320px;
  background:#F5F0E8;
  display:flex; align-items:center; justify-content:center;
}
.card-placeholder img{
  width:54%;
  height:auto;
  opacity:0.18;
  filter: grayscale(1);
  pointer-events:none;
}
.card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding: 22px 16px 22px;
  text-align:center;
}
.card-name{
  font-family:'Arca Heavy', 'Roboto', sans-serif;
  font-weight:900;
  font-size:15px;
  color:#000;
  line-height:1.25;
  text-wrap: balance;
  letter-spacing:0.01em;
}
.card-cta{
  display:inline-block;
  padding: 9px 18px;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--gold);
  font-family:'Roboto', sans-serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
/* "Ver más" ya no es un link propio (la card entera lo es): se pinta cuando
   el hover está sobre cualquier parte de la card. */
.card:hover .card-cta{ background:var(--gold); color:#fff; }

/* arrows */
.carrusel-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:54px; height:54px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  display:flex; align-items:center; justify-content:center;
  z-index:10;
  color:#000;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.carrusel-arrow:hover{ background:#000; color:#fff; }
.carrusel-arrow.left{ left:14px; }
.carrusel-arrow.right{ right:14px; }
.carrusel-arrow svg{ width:18px; height:18px; }

@media (max-width: 780px){
  .productos-title{ font-size:48px; }
  .carrusel-wrap{ padding: 0 16px; }
  .carrusel-arrow{ display:none; }
}