/* ==========================================================================
   MIRALOS — V8 · Shop definitivo
   Opción 02 "Ficha de pre-lanzamiento" (decisión de Nestor, ver captura).
   Placa técnica: STATUS · COLECCIÓN · PRECIO · ORIGEN + sello cuadrado
   "MIRALOS — EN PREPARACIÓN". Sin retícula de fondo (fondo limpio); la
   tabla y el sello conservan sus propios bordes. Sin compra: cero botones
   de carrito, tallas o stock. Tokens de css/styles.css. Prefijo shf-*.
   ========================================================================== */

#shop.shop{
  text-align: left;
  background: var(--paper);
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.shf-head{ max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.shf-kicker{
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tierra-deep);
  margin-bottom: .5rem;
}
#shop.shop h2{ font-size: clamp(1.9rem, 4vw, 2.7rem); margin-top: 0; }
.shf-line{ color: var(--text-dim); margin-top: .8rem; font-size: 1rem; }

.shf-body{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(2rem, 5vw, 3.4rem);
}

/* placa técnica — tabla con sus propios bordes, sin retícula de fondo */
.shf-spec{
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 420px;
  margin: 0;
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}
.shf-spec__row{
  flex: 1 1 50%;
  min-width: 170px;
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  text-align: left;
}
.shf-spec__row dt{
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .4rem;
}
.shf-spec__row dd{ margin: 0; font-size: 1.02rem; font-weight: 600; }
.shf-spec__row--status dd{ color: var(--tierra-deep); }
.shf-tabular{ font-variant-numeric: tabular-nums; }

/* sello cuadrado — bordes propios, sin retícula */
.shf-stamp{
  flex: 0 0 auto;
  width: clamp(128px, 15vw, 172px);
  height: clamp(128px, 15vw, 172px);
  border: 2px solid var(--negro);
  border-radius: 0;
  position: relative;
  transform: rotate(-7deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shf-stamp::before{
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--line-2);
}
.shf-stamp__text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  text-align: center;
  padding: 0 .6rem;
}
.shf-stamp__text em{ font-style: normal; font-weight: 800; font-size: .86rem; letter-spacing: .06em; }
.shf-stamp__text b{ font-weight: 700; font-size: .56rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 899px){
  .shf-body{ align-items: flex-start; }
}

@media (max-width: 680px){
  .shf-body{ flex-direction: column; }
  /* .shf-spec trae "flex:1 1 420px" pensado para el layout de escritorio
     (flex-basis = ancho mínimo en una fila). Al pasar shf-body a columna,
     ese mismo flex-basis se interpreta como ALTO (420px), inflando la
     placa técnica a una altura fija con muchísimo aire muerto debajo de
     cada dato. Se anula aquí para que la altura vuelva a salir del
     contenido real. */
  .shf-spec{ flex: 1 1 auto; }
  .shf-stamp{ align-self: flex-start; }
}