/* La tarjeta de producto. Archivo único: lo linkean la home estática y las páginas
   server-rendered, para que no se dupliquen estilos.

   Compuesto contra BRANDBOOK-BND.pdf v2.0, que es prescriptivo:
   · Un azul y su familia, nada más. Cero colores de acento — la jerarquía la resuelven
     el VALOR (qué tan claro es) y el FILETE. Antes esto tenía naranja, que no existe en
     la marca y que el manual prohíbe explícitamente.
   · "Blanco puro como fondo de pieza de marca" está en las combinaciones prohibidas:
     el fondo de las fotos es Papel, no #FFF.
   · Radio de esquina 0, filetes de 1 px, sin sombras.
   · Nada centrado. Precios alineados a la derecha, con tnum.
   · Escala de espacios: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Sin valores intermedios. */

/* Densidad alta a propósito: el activo de una distribuidora es la profundidad de catálogo
   y tiene que verse. Antes entraban 4 productos en pantalla; ahora entran 5 por fila y la
   foto dejó de comerse la tarjeta. */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:0}

/* DOS COLUMNAS EN EL CELULAR, SIEMPRE. Con `minmax(184px,1fr)` un teléfono de 375 px
   —339 px de contenido— no entra dos veces 184, así que caía a UNA columna: cada producto
   ocupaba 600 px de alto y ver diez era scrollear seis pantallas. Es el motivo por el que
   el catálogo "no se termina nunca" en el teléfono, que es de donde entra casi todo el
   tráfico. Dos columnas es lo que hacen todos los catálogos móviles que funcionan: se ven
   cuatro productos por pantalla en vez de uno y medio, y comparar precios deja de ser un
   ejercicio de memoria.
   `repeat(2, minmax(0,1fr))` y no auto-fill: acá el número de columnas no se negocia. */
@media(max-width:560px){
  .grilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tarjeta{padding:10px}
  .t-foto{margin-bottom:8px}
  .t-nom{font-size:12.5px}
  .t-und{margin-bottom:8px}
  .t-precio{font-size:18px}
  /* 44 px de alto real para el +/−: el dedo no falla y no hay que agrandar la tarjeta. */
  .t-pasos button{width:38px;height:40px}
  .t-agregar{padding:11px 8px}
}

/* El filete va en la tarjeta, no en la grilla. Antes la grilla tenía fondo Azul Filete y
   gap:1px, así que cuando la última fila quedaba incompleta las celdas vacías se pintaban
   como huecos. Con el borde en cada tarjeta y márgenes negativos para no duplicarlo, una
   fila incompleta simplemente termina. */
.tarjeta{background:var(--azul);padding:12px;display:flex;flex-direction:column;
  position:relative;transition:background-color .15s ease,color .15s ease;
  border:1px solid var(--filete);margin:0 -1px -1px 0}
/* Al pasar el mouse la tarjeta invierte fondo y texto: un gesto seco, sin sombras ni
   desplazamientos, coherente con el sistema monocromo. */
.tarjeta:hover{background:var(--papel);color:var(--azul)}
.t-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}

/* La foto va sobre Papel y ocupa 4:5, no un cuadrado: las botellas son verticales y el
   cuadrado dejaba dos franjas muertas a los costados en cada tarjeta. */
.t-foto{aspect-ratio:4/5;background:var(--papel);display:flex;align-items:center;
  justify-content:center;overflow:hidden;margin-bottom:12px}
.t-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.t-foto.sin::after{content:attr(data-ini);font-family:var(--cond);font-weight:700;
  font-size:48px;color:var(--azul);opacity:.2}

.t-etq{position:absolute;top:12px;left:12px;background:var(--azul);color:var(--papel);
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;
  border:1px solid var(--filete)}
/* "Últimas N" invierte a papel pleno: en un sistema de un solo color, el máximo énfasis
   es el máximo contraste, no otro color. */
.t-etq-urgente{background:var(--papel);color:var(--azul);border-color:var(--papel)}
.tarjeta:hover .t-etq{background:var(--papel);color:var(--azul)}
.tarjeta:hover .t-etq-urgente{background:var(--azul);color:var(--papel);border-color:var(--azul)}

.t-cat{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bruma);margin-bottom:4px}
.tarjeta:hover .t-cat{color:var(--azul);opacity:.6}
.t-nom{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em}
.t-und{font-size:11px;color:var(--bruma);margin-bottom:12px}
.tarjeta:hover .t-und{color:var(--azul);opacity:.7}

/* El bloque de cifras, separado por un filete y alineado a la derecha — regla dura del
   manual: "Precios alineados a la derecha. Nunca centrar una columna de datos." */
.t-cifras{margin-top:auto;border-top:1px solid var(--filete);padding-top:8px;text-align:right}
.tarjeta:hover .t-cifras{border-color:rgba(9,20,40,.25)}
.t-precio{font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.1}
.t-litro{display:block;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  margin-top:4px}
.t-unit{display:block;font-size:10.5px;color:var(--bruma);font-variant-numeric:tabular-nums}
.tarjeta:hover .t-unit{color:var(--azul);opacity:.65}
/* El precio de volumen, separado por su propio filete: es un segundo precio, no una
   aclaración del primero. */
.t-vol{margin-top:6px;padding-top:6px;border-top:1px solid var(--filete)}
.tarjeta:hover .t-vol{border-color:rgba(9,20,40,.22)}
.t-vol-p{display:block;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;
  line-height:1.1}
.t-vol-k{display:block;font-size:10px;color:var(--bruma);letter-spacing:.02em;margin-top:1px}
.tarjeta:hover .t-vol-k{color:var(--azul);opacity:.65}
.t-consultar{margin-top:auto;border-top:1px solid var(--filete);padding-top:8px;
  text-align:right;font-size:13px;font-weight:600;color:var(--bruma)}

.t-acc{margin-top:12px}
/* `[hidden]` GANA SIEMPRE. Sin esta línea el `display:flex` de abajo le pisa el
   `display:none` que trae el atributo desde la hoja del navegador (una regla de autor le
   gana a la del UA), así que el paso −N+ se veía SIEMPRE, al lado del botón Agregar, en
   todos los productos. Y como `carrito.js` no crea una fila desde el +/− —a propósito, es
   lo que evitaba el carrito fantasma del 31/08—, tocar ese + en un producto que todavía no
   estaba en el carrito no hacía absolutamente nada. Reportado por Fer el 09/09/2026. */
.t-pasos[hidden]{display:none}
.t-pasos{display:flex;align-items:stretch;border:1px solid var(--filete)}
.t-pasos button{flex:none;width:34px;background:transparent;border:0;color:inherit;
  font:inherit;font-size:17px;line-height:1;cursor:pointer;
  transition:background-color .12s ease,color .12s ease}
.t-pasos button:hover{background:var(--papel);color:var(--azul)}
.tarjeta:hover .t-pasos{border-color:var(--azul)}
.tarjeta:hover .t-pasos button:hover{background:var(--azul);color:var(--papel)}
.t-pasos span{flex:1;text-align:center;align-self:center;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums}
.t-agregar{margin-top:0;width:100%;padding:8px;border:1px solid var(--filete);background:transparent;
  color:inherit;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.t-agregar:hover{background:var(--papel);border-color:var(--papel);color:var(--azul)}
.tarjeta:hover .t-agregar{border-color:var(--azul)}
.tarjeta:hover .t-agregar:hover{background:var(--azul);color:var(--papel)}
.t-agregar.agregado{background:var(--papel);border-color:var(--papel);color:var(--azul)}
.tarjeta:hover .t-agregar.agregado{background:var(--azul);color:var(--papel);border-color:var(--azul)}
.t-agotado{margin-top:12px;padding:8px;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bruma);border:1px solid transparent}
.tarjeta:hover .t-agotado{color:var(--azul);opacity:.55}

/* ── LA PROMO ─────────────────────────────────────────────────────────────────
   EL NARANJA NO ESTÁ EN EL BRANDBOOK y el manual lo prohíbe. Entra por pedido
   expreso de Fer (31/08/2026) y sólo acá: marcar que un precio bajó es el único
   trabajo del sitio que el valor y el filete no hacen bien solos.
   Dos tonos porque la tarjeta invierte al pasar el mouse: el mismo naranja que
   funciona sobre el azul se vuelve ilegible sobre Papel. */
.t-cifras{--naranja:#FF7A2F}
.tarjeta:hover .t-cifras{--naranja:#B8460E}
.t-antes{font-size:11.5px;color:var(--bruma);text-decoration:line-through;
  font-variant-numeric:tabular-nums;margin-bottom:1px}
.tarjeta:hover .t-antes{color:var(--azul);opacity:.55}
.t-precio.promo{color:var(--naranja)}