/* El ESCAPARATE: cómo se pinta un artículo de la tienda.
 *
 * Para las DOS caras. Lo usa la tienda pública (/t) y la sección de
 * merchandising del comité, que existe justo para ver cómo queda aquello: si
 * cada una lo maquetara por su cuenta —que es como estaba— dejarían de
 * parecerse a la primera que se tocara una, y entonces mirarlo desde dentro no
 * respondería a nada.
 *
 * Aquí está lo que ES un artículo: la tarjeta, la foto, el precio, el lote
 * destacado y los avisos. Lo que rodea a la tienda —el rótulo de la portada,
 * el "¿dónde se compra?", la lupa— se queda en la hoja de cada cara, porque
 * eso sí es de cada una.
 *
 * Los colores salen de las variables de la cara, que ya son las mismas.
 */

.titulo-seccion {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tinta-suave, #6a7196);
}

/* El marco donde se apoya el producto: superficie clara y una luz cenital. */
.cosa-foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #eef1fa 55%, #dfe6f7 100%);
  cursor: zoom-in;
}

/* -------------------------------------------------------- la vitrina común */
.cosa-foto img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  /* Sombra pegada a la silueta y no a la caja: las fotos no tienen fondo, así
     que una sombra rectangular delataría el recorte. */
  filter: drop-shadow(0 8px 14px rgba(11, 22, 96, .22));
  transition: transform 260ms cubic-bezier(.23, 1, .32, 1);
}

/* El suelo de la vitrina: una sombra elíptica bajo el producto. */
.cosa-foto::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 55%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 22, 96, .16), transparent);
  pointer-events: none;
}

.cosa-foto.sin-foto::before {
  content: '';
  width: 64px;
  height: 64px;
  background: url('/icons/sota-chica.png') no-repeat center / contain;
  opacity: .25;
}

/* ------------------------------------------------------- el objeto especial
   El aspecto dorado. Antes estaba atado a SER el lote y vivía en una sección
   propia, FUERA de la rejilla; eso hacía dos cosas mal a la vez: "cuánto ocupa"
   no le llegaba nunca —esas reglas son de rejilla— y ninguna otra cosa podía
   llevar ese aspecto aunque se quisiera.

   Ahora es una clase de la tarjeta de siempre. Son dos decisiones separadas:
   `especial` es CÓMO SE VE y la disposición es CUÁNTO OCUPA, y las dos valen
   para cualquier artículo. */
.cosa.especial {
  border-color: var(--oro-borde);
  background: var(--oro-tenue);
  box-shadow: 0 6px 22px rgba(18, 39, 156, .1);
}

.cosa.especial .cosa-foto {
  background: radial-gradient(120% 80% at 50% -10%, var(--oro-tenue) 0%, #fdf6e3 55%, #f7e8c3 100%);
}

/* Uno especial y ancho respira más: es lo que se viene a mirar. */
@media (min-width: 621px) {
  .cosa.especial[data-escritorio="ancho"] .cosa-pie,
  .cosa.especial[data-escritorio="tres"] .cosa-pie,
  .cosa.especial[data-escritorio="todo"] .cosa-pie { padding: 22px 24px; }
  .cosa.especial[data-escritorio="todo"] .cosa-foto { min-height: 230px; }
  .cosa.especial[data-escritorio="ancho"] .cosa-nombre,
  .cosa.especial[data-escritorio="tres"] .cosa-nombre,
  .cosa.especial[data-escritorio="todo"] .cosa-nombre { font-size: clamp(19px, 3vw, 27px); }
  .cosa.especial[data-escritorio="ancho"] .precio-num,
  .cosa.especial[data-escritorio="tres"] .precio-num,
  .cosa.especial[data-escritorio="todo"] .precio-num { font-size: clamp(17px, 2.2vw, 24px); }
}

/* --titulo y no --azul-noche: el segundo es una SUPERFICIE azul marino y sigue
   siendo azul marino en el tema oscuro, así que sobre el dorado oscuro de una
   tarjeta especial el nombre se quedaba casi invisible. --titulo es tinta: se
   aclara con el tema. */
.cosa.especial .cosa-nombre { color: var(--titulo, #0b1660); }

/* El rótulo de encima del nombre ("El lote"). Sólo lo lleva el lote: dicho de
   un artículo suelto sería mentira. */
.cosa-eti {
  display: block;
  margin-bottom: 1px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  /* Por variable y no en oro fijo: #a67c07 sobre el dorado del tema oscuro se
     quedaba en 4,38:1, por debajo de AA. --oro-tinta se aclara con el tema. */
  color: var(--oro-tinta, #7a5b06);
}

/* Lo que se ahorra es la razón de que el lote exista: se dice con el oro de la
   casa, que aquí es "esto te interesa".

   --oro-fondo y --oro-tinta, que se dan la vuelta con el tema. Antes el fondo
   era --oro-suave, que SÓLO está declarado en el tema claro: en el oscuro
   quedaba crema claro con la tinta clara encima y no se leía. */
.cosa-ahorro {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--oro-fondo, #f7e8c3);
  border: 1px solid var(--oro-borde, rgba(217, 165, 32, .6));
  color: var(--oro-tinta, #7a5b06);
  font-size: 14px;
  font-weight: 700;
}

/* ------------------------------------------------------------ los sueltos */
.cosas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 16px;
}

.cosa {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borde, #dde2f2);
  border-radius: 18px;
  background: var(--tarjeta);
  box-shadow: 0 2px 10px rgba(18, 39, 156, .08);
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms ease;
}

.cosa .cosa-foto { height: 215px; }

/* El pie puede llevar hasta cuatro piezas: qué es, cuánto cuesta, lo que se
   ahorra y —sólo desde el merchandising— lo de dentro. Con wrap, lo que no
   cabe en la línea baja a la siguiente en vez de apretar a los demás.

   align-content: flex-start para que las filas que bajan se apilen desde
   arriba. Sin eso se reparten por el alto de la caja y quedan flotando. */
.cosa-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  padding: 13px 15px 15px;
  min-width: 0;
}

/* El nombre y su nota, juntos: son "qué es esto", frente al precio, que es
   "cuánto cuesta". min-width: 0 para que una nota larga se recorte en vez de
   empujar la etiqueta del precio fuera de la tarjeta. */
/* Tres cosas a la vez, y las tres hacen falta:
 *
 *   flex-basis: 60%   Con basis 0 —que es lo que quiere decir "flex: 1"— este
 *                     trozo nunca provoca un salto de línea: cabe siempre,
 *                     porque parte de cero. Resultado: el precio y "Ahorras" se
 *                     quedaban en la misma línea y el nombre se estrujaba hasta
 *                     partirse por palabras ("EL / LOTE", "Pack / (las / tres)").
 *                     Con una base de verdad, lo que no quepa BAJA, que es lo
 *                     que uno espera de un pie que envuelve.
 *   min-width: 8em    y por debajo de eso no se encoge más.
 *   align-self        cuando el pie va en columna —en el móvil y en las anchas—
 *                     lleva align-items: flex-start, y ahí cada hijo se queda
 *                     con el ancho de SU CONTENIDO: una nota larga sacaba la
 *                     tarjeta fuera de la pantalla.
 */
.cosa-que { flex: 1 1 60%; min-width: min(8em, 100%); align-self: stretch; }
/* --titulo y NO --azul-noche. El segundo es una SUPERFICIE azul marino y sigue
   siendo azul marino en el tema oscuro: el nombre de cada artículo salía en
   #0a1130 sobre la tarjeta #141c36, o sea 1,10:1 — no se leía ninguno. --titulo
   es tinta y se aclara con el tema. */
.cosa-nombre { margin: 0; font-size: 16px; color: var(--titulo, #0b1660); }
.cosa-nota {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--tinta-suave, #6a7196);
}

/* La etiqueta del precio: la de colgar, con su agujerito y su muesca. */
.precio {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px 6px 18px;
  border-radius: 6px 999px 999px 6px;
  background: linear-gradient(135deg, var(--sup-media, #0e1d7a), var(--sup-alta, #172cae));
  color: #fff;
  box-shadow: 0 3px 10px rgba(29, 63, 232, .3);
}

.precio::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
}

.precio-num {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

/* ------------------------------------------------------------------ esperas */
.brillo {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #e7ebf7 25%, #f2f5fd 50%, #e7ebf7 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s linear infinite;
}

.brillo.linea { height: 14px; width: 60%; }

.brillo.linea.corta { width: 32%; margin-top: 8px; }

.cosa.esperando .cosa-foto { padding: 0; cursor: default; }

.cosa.esperando .cosa-foto::after { display: none; }

.cosa.esperando .cosa-pie { display: block; }

/* La foto de lo agotado, en gris y a media luz: se sigue viendo lo que era
   —la gente pregunta igual— pero de un vistazo se sabe que ya no queda. */
.cosa-foto.agotado img {
  filter: grayscale(1);
  opacity: .55;
}

/* Y no se abre en grande: no hay nada que mirar de cerca. */
.cosa-foto.agotado { cursor: default; }

/* ==========================================================================
   AGOTADO
   Un aviso en una esquina se pierde entre las fotos. Lo que se lee de un
   vistazo es que la tarjeta ENTERA está apagada y con un sello encima, como
   los carteles de los que se cuelga el "no quedan": la foto se va a gris y
   pierde fuerza, y el sello cruza en diagonal.
   ========================================================================== */

.cosa.agotada { position: relative; }

/* La foto, apagada y descolorida. No se esconde: la gente pregunta por lo que
   ha visto, así que se sigue enseñando qué era. */
.cosa.agotada .cosa-foto img {
  filter: grayscale(1) contrast(.9);
  opacity: .42;
}

/* Y el nombre y el precio, a media tinta: lo que ya no se puede comprar no
   compite con lo que sí. */
.cosa.agotada .cosa-eti,
.cosa.agotada .cosa-nombre,
.cosa.agotada .cosa-nota,
.cosa.agotada .cosa-ahorro,
.cosa.agotada .precio { opacity: .5; }

/* El sello. En diagonal y con el borde grueso, como los de tinta. Encima de la
   foto y sin poder tocarse: no es un botón, es un hecho. */
.sello {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-11deg);
  padding: 7px 18px;
  border: 3px solid currentColor;
  border-radius: 8px;
  color: #a2264a;
  background: rgba(255, 255, 255, .82);
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(15px, 3.4vw, 21px);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 12px rgba(11, 22, 96, .18);
}
:root[data-tema="oscuro"] .sello,
:root[data-tema="sistema"] .sello { background: rgba(12, 18, 38, .78); color: #ff8fa6; }
@media (prefers-color-scheme: light) {
  :root[data-tema="sistema"] .sello { background: rgba(255, 255, 255, .82); color: #a2264a; }
}

/* La pastilla de "quedan pocas" sigue en su esquina: eso no es un hecho
   consumado, es un aviso, y con un sello parecería lo otro. */
.aviso {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11, 22, 96, .25);
}
.aviso-pocas { background: var(--oro, #d9a520); color: #3a2b05; }

/* Lo agotado no se abre en grande: no hay nada que mirar de cerca. */
.cosa.agotada .cosa-foto { cursor: default; }

/* El fondo de la foto está pensado para el tema claro: en oscuro, un bloque
   casi blanco detrás de cada producto deslumbra. */
:root[data-tema="oscuro"] .cosa-foto { background: linear-gradient(160deg, #1b2444, #0e1630); }
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] .cosa-foto { background: linear-gradient(160deg, #1b2444, #0e1630); }
}

/* ==========================================================================
   EN UN MÓVIL
   Dos columnas en vez de tres o cuatro, y todo un punto más pequeño. Va AQUÍ y
   no en la hoja de cada cara: se quedó allí al partir el fichero, y por eso a
   partir de 620px la sección del comité volvía a verse distinta de la tienda,
   que es justo lo que se estaba arreglando.
   ========================================================================== */
@media (max-width: 620px) {
  .cosas { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
  .cosa .cosa-foto { height: 150px; padding: 12px; }
  .cosa-pie { flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px 12px 13px; }
  /* En columna, crecer es crecer A LO ALTO: dejaba un vacío entre el nombre y
     el precio. Cada pieza ocupa lo suyo. */
  .cosa-que { flex: none; }
  .cosa-nombre { font-size: 14.5px; }
  .precio-num { font-size: 15.5px; }
}

/* Sólo con ratón: en una pantalla táctil el "hover" se dispara al tocar y se
   queda encendido después, que es lo contrario de lo que dice. */
@media (hover: hover) and (pointer: fine) {
  .cosa:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18, 39, 156, .18); }
  /* El producto se acerca un poco al cristal. */
  .cosa:hover .cosa-foto img { transform: scale(1.05); }
}

/* ==========================================================================
   LA DISPOSICIÓN
   Cuánto ocupa cada artículo, y por tamaño de pantalla. Lo decide el comité
   desde su sección; aquí sólo se obedece.

   La rejilla pasa de "las columnas que quepan" a un número FIJO por tamaño, y
   no por gusto: con repeat(auto-fill, …) el número de columnas depende del
   ancho, así que "ocupa dos" o "ocupa la fila entera" no se puede decir —no se
   sabe cuántas hay—. Con un número fijo por tramo, span 2 son dos de verdad y
   "toda la fila" es toda la fila.
   ========================================================================== */
.cosas {
  --columnas: 4;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
}
@media (max-width: 620px)  { .cosas { --columnas: 2; } }
@media (min-width: 621px) and (max-width: 900px) { .cosas { --columnas: 3; } }
@media (min-width: 1200px) { .cosas { --columnas: 4; } }

/* Lo que ocupa cada uno. Dos juegos de reglas, uno por tramo, porque "ancho"
   no quiere decir lo mismo en un móvil de dos columnas que en un monitor de
   cuatro: lo que allí llena la fila, aquí es media. */
@media (max-width: 620px) {
  /* En un móvil son dos columnas: "ancho", "tres" y "todo" son lo mismo, y por
     eso ahí no se ofrece elegir entre ellos. */
  .cosa[data-movil="ancho"],
  .cosa[data-movil="tres"],
  .cosa[data-movil="todo"] { grid-column: 1 / -1; }
}
@media (min-width: 621px) {
  .cosa[data-escritorio="ancho"] { grid-column: span 2; }
  .cosa[data-escritorio="tres"]  { grid-column: span 3; }
  .cosa[data-escritorio="todo"]  { grid-column: 1 / -1; }
}
/* Con tres columnas en total, "tres" ya es la fila entera. */
@media (min-width: 621px) and (max-width: 900px) {
  .cosa[data-escritorio="tres"] { grid-column: 1 / -1; }
}

/* Lo que ocupa más de una casilla se pone en horizontal: la foto a un lado y
   el texto al otro, como el lote. Una tarjeta el doble de ancha con la foto
   encima y el nombre debajo deja un hueco enorme en medio. */
@media (min-width: 621px) {
  .cosa[data-escritorio="ancho"],
  .cosa[data-escritorio="tres"],
  .cosa[data-escritorio="todo"] {
    display: grid;
    grid-template-columns: minmax(0, 280px) 1fr;
    align-items: stretch;
  }
  .cosa[data-escritorio="ancho"] .cosa-foto,
  .cosa[data-escritorio="tres"] .cosa-foto,
  .cosa[data-escritorio="todo"] .cosa-foto { height: 100%; min-height: 190px; }
  .cosa[data-escritorio="ancho"] .cosa-pie,
  .cosa[data-escritorio="tres"] .cosa-pie,
  .cosa[data-escritorio="todo"] .cosa-pie {
    flex-direction: column;
    align-items: flex-start;
    /* flex-start y no center: centrado, un pie con más cosas que alto tiene la
       caja reparte el sobrante por ARRIBA Y POR ABAJO, y como la tarjeta
       recorta lo que se sale (overflow: hidden, que es lo que redondea la
       foto), lo primero y lo último se cortaban. Así crece hacia abajo y la
       tarjeta crece con él. */
    justify-content: flex-start;
    gap: 10px;
  }
  /* flex: 1 sirve en la FILA —el nombre se lleva el hueco y el precio se va al
     final— pero en columna eso es crecer a lo alto, y abría un vacío entre el
     nombre y el precio. En columna cada pieza ocupa lo suyo. */
  .cosa[data-escritorio="ancho"] .cosa-que,
  .cosa[data-escritorio="tres"] .cosa-que,
  .cosa[data-escritorio="todo"] .cosa-que { flex: none; }
}
@media (max-width: 620px) {
  .cosa[data-movil="ancho"],
  .cosa[data-movil="tres"],
  .cosa[data-movil="todo"] {
    display: grid;
    grid-template-columns: minmax(0, 40%) 1fr;
    align-items: stretch;
  }
  .cosa[data-movil="ancho"] .cosa-foto,
  .cosa[data-movil="tres"] .cosa-foto,
  .cosa[data-movil="todo"] .cosa-foto { height: 100%; min-height: 130px; }
}