/*
 * La grilla de piezas de las landings de compra.
 *
 * Extiende el lenguaje que ya tiene el sitio —tarjeta blanca de 10px de radio,
 * caja de texto beige, Playfair para los nombres— en vez de proponer otro. Lo
 * que agrega es el bloque de la cuenta: el contenido de oro de la pieza y lo que
 * la casa paga por él.
 *
 * Ese bloque es la decisión de diseño de todo esto. Una casa que compra oro
 * ofrece un número que sale de una multiplicación, y el visitante puede
 * rehacerla. Imprimir el peso arriba de la cifra convierte la oferta en algo
 * verificable; imprimir sólo la cifra la deja en un «confiá en mí».
 *
 * La cifra va en Playfair y no en la tipografía de texto. Un número en serif con
 * cifras de ancho fijo se lee como una tasación —que es lo que es— y no como el
 * precio de una góndola. El ancho fijo además alinea las cifras entre tarjetas,
 * así una fila de tres se lee como una tabla y no como tres avisos sueltos.
 *
 * Los tokens salen de Bricks con un valor de reserva, igual que en relojes.css:
 * si el tema cambia su paleta esto la sigue, y si el CSS llega antes que el tema
 * no se cae.
 */

.pz-grilla {
  /* Colores medidos sobre el sitio, no elegidos de nuevo. */
  --pz-card: #fff;
  --pz-caja: #f0eee0;
  --pz-ink: var(--color-base, #212121);
  --pz-muted: #5f5f5f;
  --pz-night: #16130e;
  --pz-gold: var(--landing-primary, #b59c67);
  --pz-wa: #26d366;

  --pz-radio: 10px;
  --pz-sombra: 0 0 15px rgb(33 33 33 / .12);

  --pz-gap: clamp(1.6rem, 1.6vw + 1.1rem, 3rem);
  --pz-pad: clamp(1.8rem, 1.2vw + 1.4rem, 2.6rem);

  /*
   * Las mismas dos escalas que las piezas del encabezado.
   *
   * Estaban en 19 y 22 contra 23 y 28 de arriba: la misma pieza, con el mismo
   * nombre y el mismo precio, se leía más chica cuatro secciones abajo en la
   * misma página. Los dos pares arrancan ahora del mismo lugar y terminan en el
   * mismo.
   *
   * El techo no se movió —24 y 30— porque en escritorio nunca fue el problema:
   * lo que quedaba corto era el arranque, que es lo que rige en un teléfono.
   */
  --pz-titulo: clamp(2.3rem, .3vw + 2.19rem, 2.4rem);
  --pz-cifra: clamp(2.8rem, .4vw + 2.66rem, 3rem);
  --pz-menor: clamp(1.4rem, .3vw + 1.3rem, 1.6rem);

  display: grid;
  gap: var(--pz-gap);
  margin: 0;
  padding: 0;
  list-style: none;

  /* Lo más angosto que puede quedar una tarjeta antes de que la foto deje de
     distinguir una moneda de otra. */
  --pz-col: 28rem;

  /*
   * Las columnas las cuenta el navegador según el lugar que hay, sin
   * breakpoints.
   *
   * Con medidas de pantalla esto miraba el monitor, que no es el ancho que la
   * grilla tiene: metida en un contenedor angosto seguía pidiendo tres columnas.
   * Medido antes del cambio, achicando el contenedor con el monitor en 1920:
   *
   *     contenedor 390 → 110px 110px 110px
   *     contenedor 768 → 236px 236px 236px
   *
   * Las tres partes hacen falta, y cada una tapa un agujero:
   *
   *   (100% - gap*2) / 3   un tercio exacto del espacio real. Pedido como
   *                        mínimo, una cuarta columna nunca entra: el tope de
   *                        tres queda puesto sin escribir el número tres.
   *   max(--pz-col, …)     y sin bajar de ese ancho, así en lugar apretado
   *                        prefiere menos columnas antes que tarjetas ilegibles.
   *   min(100%, …)         nunca más que el contenedor. Sin esto, en un ancho
   *                        menor a --pz-col la columna se pasaría del borde.
   */
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(var(--pz-col), (100% - var(--pz-gap) * 2) / 3)), 1fr)
  );
}

/*
 * El contenedor de Bricks necesita un ancho, y sin esto no lo tiene.
 *
 * Sus divs son items flex sin ancho declarado, así que se dimensionan por lo
 * que llevan adentro. Con `grid-template-columns: 1fr` eso no se notaba: la
 * grilla no pide ningún ancho propio y el item se estira solo. Pero `auto-fit`
 * sí pide uno —el de una columna— y entonces la cadena entera se encoge a esa
 * medida: medido, 352px dentro de un contenedor de 1600.
 *
 * Es la misma trampa que hizo fracasar el intento con consultas de contenedor:
 * `container-type: inline-size` también corta el ancho del contenido, y ahí el
 * colapso fue a cero.
 *
 * `:has()` es la única forma de alcanzar ese div desde acá; la plantilla vive
 * en la base de Bricks y no en este repo. Sin soporte, la grilla queda en una
 * columna: se lee bien y no se rompe nada.
 */
.brxe-div:has(.pz-grilla),
.brxe-shortcode:has(.pz-grilla) {
  width: 100%;
}

/* Bloque: la tarjeta. */

.pz-pieza {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--pz-card);
  border-radius: var(--pz-radio);
  box-shadow: var(--pz-sombra);
  /* Ancla del área clickeable, que se estira desde el botón. */
  position: relative;
  transition: box-shadow .2s ease;
}

/*
 * La banda del descuento, cruzada en la esquina de arriba a la derecha.
 *
 * Una tira recta rotada 45 grados y dejada asomar por los dos bordes: el
 * `overflow: hidden` de la tarjeta le corta las puntas contra el borde
 * redondeado, y de ahí sale sola la forma de banda cosida al vértice. Sin ese
 * recorte habría que dibujar los dos triángulos del dobladillo a mano.
 *
 * El ancho es el de la diagonal que tiene que cruzar más el sobrante de las dos
 * puntas; `right` la corre hasta que el centro de la tira cae sobre el vértice.
 * Los dos números van juntos: tocar uno solo la descentra.
 *
 * El mismo oro de la cinta del hero, y eso es lo que la ata al resto: arriba una
 * cinta acredita el rubro, acá una banda marca el precio. Misma casa, mismo
 * gesto, distinto trabajo.
 */
.pz-pieza__banda {
  position: absolute;
  inset-block-start: 2.2rem;
  inset-inline-end: -4.6rem;
  z-index: 2;

  inline-size: 16rem;
  margin: 0;
  padding-block: .55rem;
  rotate: 45deg;

  background-image: linear-gradient(158deg, #e2cd9e 0%, #c9b17e 45%, #b09a6c 100%);
  /* La tinta de la casa sobre el oro: 11,9:1 contra la parada más clara de la
     banda y 6,8:1 contra la más oscura, medido igual que en la cinta. */
  color: #16130e;

  font-family: Montserrat, system-ui, sans-serif;
  font-size: 1.4rem;
  /* 700 porque la tira es angosta y la palabra corta: acá el peso hace lo que en
     un título haría el cuerpo. El sitio sirve esta face, no es un peso pedido al
     aire. */
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;

  /* Apoyada sobre la tarjeta y no pegada: una banda cosida proyecta algo. */
  box-shadow: 0 1px 6px rgb(33 33 33 / .22);
}

/*
 * Toda la tarjeta abre el chat, y el link es uno solo: el del encabezado.
 *
 * Es el patrón de tarjeta con enlace estirado, y el enlace va en el título
 * porque es el texto que nombra la pieza. Ver la nota del PHP para por qué el
 * botón de abajo dejó de ser un enlace.
 */
/*
 * Sin raya bajo el nombre, en ningún estado.
 *
 * Acá el enlace es el nombre de la pieza, y una raya debajo lo convierte en un
 * link de texto justo cuando lo que se señala es la tarjeta entera.
 *
 * `border-bottom` además de `text-decoration`, y esto costó un diagnóstico
 * equivocado: el tema no subraya con `text-decoration` sino con un borde de
 * 1px. Son dos propiedades distintas que se ven igual, así que `text-decoration:
 * none` no sacaba nada y `getComputedStyle(...).textDecorationLine` contestaba
 * «none» con la raya en pantalla. Si vuelve a aparecer, mirar `borderBottom`
 * antes que `textDecoration`.
 */
.pz-pieza__link:is(:link, :visited, :hover, :focus, :active) {
  color: inherit;
  text-decoration: none;
  border: 0;
}

.pz-pieza__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--pz-radio);
}

/* El foco del teclado rodea la tarjeta entera, que es lo que se activa. */
.pz-pieza:has(.pz-pieza__link:focus-visible) {
  outline: 2px solid var(--pz-night);
  outline-offset: 3px;
}

/*
 * La vitrina, la misma que la landing de relojes.
 *
 * No es decoración: es lo que empareja la grilla. Las fotos vienen de la tienda
 * con la cantidad de fondo que quiso cada una, así que un lingote de un gramo
 * salía diminuto al lado de otro que llenaba su lienzo. El recorte de la foto
 * saca ese margen, y este cuadro fijo hace el resto.
 *
 * La luz viene de arriba y las esquinas caen, como adentro de una caja. No se
 * dibuja ninguna repisa: las piezas están fotografiadas flotando, y una repisa
 * les pasaría por el medio.
 */
.pz-pieza__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--pz-radio) var(--pz-radio) 0 0;
  background:
    /* las esquinas cayendo en sombra */
    radial-gradient(115% 95% at 50% 32%,
      rgb(255 255 255 / .9) 0%, rgb(255 255 255 / 0) 58%, rgb(120 104 74 / .16) 100%),
    /* luz cálida: el metal iluminado nunca es neutro */
    linear-gradient(#fffdf8 0%, #fbf6ea 52%, #f0e7d3 100%);
  box-shadow: inset 0 0 0 1px rgb(181 156 103 / .28);
  overflow: clip;
  transition: box-shadow var(--transicion-hover, .3s ease-in-out);
}

/* El vidrio de adelante: una banda diagonal que se lee como reflejo, y un
   tinte dorado sobre toda la abertura. El calor es de la vitrina y no de la
   pieza — por eso va acá arriba y no sobre la foto. */
.pz-pieza__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(146deg,
      rgb(255 255 255 / .62) 0%,
      rgb(255 255 255 / .18) 26%,
      rgb(255 255 255 / 0) 42%),
    linear-gradient(160deg,
      rgb(214 183 118 / .10) 0%,
      rgb(181 156 103 / .04) 45%,
      rgb(140 116 66 / .10) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/*
 * La pieza, fuera de flujo, y ahí está todo el truco.
 *
 * En flujo, cada foto se dimensionaba sola: un alto en porcentaje contra un
 * padre cuyo alto dependía de ese contenido es circular, así que el navegador
 * caía en el tamaño natural del archivo y cada cuadro salía de un alto
 * distinto. Sacándola del flujo, el `aspect-ratio` decide el cuadro, el
 * porcentaje se resuelve contra un número real, y todas las piezas se dibujan
 * exactamente del mismo tamaño.
 *
 * `multiply` deja el blanco que sobrevivió al recorte caer dentro de la
 * vitrina, en vez de apilar un segundo rectángulo blanco encima.
 */
.pz-pieza__img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78%;
  height: 72%;
  object-fit: contain;
  mix-blend-mode: multiply;
  /*
   * El recorte deja el borde de abajo de la imagen en el pie de la pieza, así
   * que el reflejo cae pegado y no a un margen de distancia. La máscara corre
   * después del espejado: transparente primero, visible al final. Chrome y
   * Safari nada más; en el resto la pieza simplemente queda parada en la luz.
   *
   * Los dos números bajan y hacen cosas distintas. El 74 —era 62— acorta la cola
   * de poco más de un tercio del espejo a un cuarto; el .26 —era .4— la apaga.
   * Bastaba con uno solo para que se notara menos, pero apagar sin acortar deja
   * una mancha larga y tenue debajo de cada pieza, que se lee como suciedad de
   * la foto y no como un reflejo. Corto y suave es lo que parece vidrio.
   *
   * Sigue siendo más presente que el del encabezado, y eso es a propósito: allá
   * la pieza flota sobre el papel de la sección y acá se apoya dentro de una
   * tarjeta, donde el reflejo es lo que la separa del fondo.
   */
  -webkit-box-reflect: below .2rem linear-gradient(transparent 74%, rgb(255 255 255 / .26));
}

/* Una foto que no se pudo recortar no está sobre fondo plano, y `multiply` le
   convertiría el fondo en barro. Conserva el tamaño y el cuadro, y renuncia a
   la mezcla y al reflejo: los dos suponen blanco detrás del vidrio. */
.pz-pieza__img--entera {
  mix-blend-mode: normal;
  border-radius: var(--pz-radio);
  -webkit-box-reflect: none;
}

/*
 * La vitrina se enciende por dentro y nunca proyecta.
 *
 * Con una sombra propia hacia afuera se despegaba: quedaba flotando sobre el
 * beige y la tarjeta se leía como dos objetos apilados, una foto encima de una
 * ficha. La única sombra que sale es la de la tarjeta, y vive en `.pz-pieza`.
 */
.pz-pieza:hover .pz-pieza__media,
.pz-pieza:has(.pz-pieza__link:focus-visible) .pz-pieza__media {
  box-shadow: inset 0 0 0 1px rgb(181 156 103 / .45);
}

.pz-pieza__cuerpo {
  display: grid;
  /* La cuenta empuja al botón contra el piso, así los botones de una fila
     quedan a la misma altura aunque los nombres ocupen renglones distintos. */
  grid-template-rows: auto 1fr auto;
  gap: var(--pz-pad);
  padding: var(--pz-pad);
  background: var(--pz-caja);
}

.pz-pieza__titulo {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--pz-titulo);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pz-ink);
  text-wrap: balance;
}

/* La cuenta: de dónde sale el número. */

.pz-pieza__cuenta {
  align-self: end;
}

.pz-pieza__peso {
  margin: 0 0 .8rem;
  font-size: var(--pz-menor);
  color: var(--pz-muted);
  font-variant-numeric: tabular-nums;
}

.pz-pieza__precio {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgb(33 33 33 / .16);
}

.pz-pieza__cifra {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--pz-cifra);
  font-weight: 700;
  line-height: 1.1;
  color: var(--pz-ink);
  font-variant-numeric: tabular-nums;
}

/* El botón. */

.pz-pieza__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  /* A todo el ancho: el botón es la acción de la tarjeta y no una opción más,
     y en una columna angosta un botón centrado deja dos huecos que no hacen
     nada. */
  width: 100%;
  padding: 1.4rem 2rem;
  border-radius: 999px;
  background: var(--pz-night);
  color: #fff;
  /*
   * Su propio cuerpo y no `--pz-menor`, que es el de los datos chicos —el peso
   * de la pieza, la letra al pie—. Estaba tomado de ahí y quedaba en 16px: el
   * llamado a la acción de la tarjeta, más chico que su propio precio y que el
   * mismo botón del encabezado.
   *
   * La misma escala que aquél, por lo mismo que el nombre y el precio: es el
   * mismo botón dos secciones más abajo.
   */
  font-size: clamp(2rem, .25vw + 1.91rem, 2.1rem);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease;
}

/*
 * Llegar a cualquier parte de la tarjeta enciende el botón, y lo enciende en
 * verde: es el color con el que la gente reconoce WhatsApp, y decir a dónde
 * lleva el click es más útil que oscurecer un poco el negro.
 *
 * La etiqueta pasa a tinta, no a blanco. Ese verde con texto blanco da 2,3:1 y
 * no llega ni a la mitad de lo que pide la norma; oscurecerlo hasta que sí
 * llegue deja de parecer WhatsApp. Con la etiqueta oscura son 9,3:1 y sigue
 * siendo el mismo botón. Es la misma salida que ya usa `.rl-btn--wa`.
 */
.pz-pieza:hover .pz-pieza__cta,
.pz-pieza:has(.pz-pieza__link:focus-visible) .pz-pieza__cta {
  background: var(--pz-wa);
  color: var(--pz-ink);
}

/*
 * El dorado rodea la tarjeta entera, no sólo la foto.
 *
 * Un hilo de oro alrededor de la vitrina y nada alrededor de la ficha parte la
 * tarjeta en dos: la mitad de arriba se enciende y la de abajo se queda quieta,
 * aunque las dos respondan al mismo cursor. El realce es de la tarjeta, así que
 * el borde es de la tarjeta.
 */
.pz-pieza:hover,
.pz-pieza:has(.pz-pieza__link:focus-visible) {
  box-shadow:
    inset 0 0 0 1px rgb(181 156 103 / .45),
    0 1.4rem 3.4rem rgb(33 33 33 / .16);
}

.pz-pieza__icono {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
}

/* Sólo para lectores de pantalla. */

.pz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pz-pieza,
  .pz-pieza__cta { transition: none; }
}

/*
 * Reserva para un navegador sin `:has()`.
 *
 * Safari lo tiene desde 15.4 y Firefox desde la 121, así que hoy alcanza a casi
 * todos — pero un foco que no se ve deja la grilla inutilizable con teclado, y
 * eso no es algo para dejar librado a la versión del navegador. Si `:has()` no
 * resuelve, el contorno vuelve al botón: rodea menos de lo que se activa, y aun
 * así se ve.
 */
@supports not selector(:has(*)) {
  .pz-pieza__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }
}