/* ==========================================================================
   MIRALOS — V8 Colección definitiva: "Plancha de contactos" (Opción 03)
   Trasplante de opciones-coleccion.html#opcion-03 a la sección #coleccion
   de v8.html, en reemplazo del lookbook (.clb-*) y del bloque "La suela"
   separado (su contenido pasa a la 6ª celda, WS-00 "Ficha general").
   Reutiliza los tokens ya presentes (styles.css + v8.css: crema/paper/
   línea, --f-head/--f-body = Inter Tight en v8). Prefijo colf- para no
   chocar con el .clb-* de coleccion-lookbook.css ni con css/v8.css.
   CAMBIO PEDIDO por Nestor: sin retícula/cuadrícula decorativa de fondo
   — fondo limpio (var(--paper)), las celdas solo conservan sus bordes
   finos de separación. Cero border-radius, cero emojis.
   ========================================================================== */

#coleccion.section--alt{ background: var(--paper); }

/* ---------- Hoja de contactos: 6 celdas iguales, sin retícula de fondo ---------- */
.colf-sheet{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}

.colf-cell{
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 1.3rem clamp(1.1rem, 2vw, 1.6rem) 1.5rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(320px, 30vw, 420px);
  transition: background .3s ease;
}
.colf-cell:hover{ background: var(--crema-2); }

.colf-cell__top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}
.colf-cell__code{
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.colf-cell__num{
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* recorte de zapatilla / foto de suela — misma proporción en las 6 celdas */
.colf-cell__img{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .8rem 0;
  overflow: hidden;
}
.colf-cell__img img{
  max-width: 92%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(23,21,17,.22));
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.colf-cell:hover .colf-cell__img img{ transform: scale(1.05); }

.colf-cell__foot{ border-top: 1px solid var(--line); padding-top: .8rem; }
.colf-cell__foot h3{
  font-family: var(--f-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  margin: 0 0 .3rem;
}
.colf-cell__foot p{
  font-family: var(--f-body);
  font-size: .8rem;
  color: var(--text-dim);
  margin: 0 0 .4rem;
}
.colf-cell__foot span{
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .9rem;
}

/* 6ª celda — ficha general (La suela / Origen / Precio), tono invertido */
.colf-cell--spec{ background: var(--negro); color: var(--text-inv); }
.colf-cell--spec:hover{ background: var(--negro-2); }
.colf-cell--spec .colf-cell__code,
.colf-cell--spec .colf-cell__num{ color: var(--text-inv-dim); }
.colf-cell--spec .colf-cell__img img{
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));
}
.colf-cell__spec{ margin: 0; display: flex; flex-direction: column; gap: .9rem; border-top: 1px solid var(--line-inv); padding-top: .8rem; }
.colf-cell__spec dt{
  font-family: var(--f-body);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-inv-dim);
  margin: 0 0 .3rem;
}
.colf-cell__spec dd{
  font-family: var(--f-body);
  font-size: .86rem;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 900px){
  .colf-sheet{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .colf-sheet{ grid-template-columns: 1fr; }
  .colf-cell{ min-height: 300px; }
}