/* =====================================================================
   RV25 Relojería · TARJETA DE RELOJ Y REJILLA
   ---------------------------------------------------------------------
   Inspirada en Vacheron Constantin: cada reloj en una "vitrina" de un
   tono más claro que el fondo, con aire alrededor de la foto y texto
   centrado. Foto y texto llevan a la página del reloj. Sobre la foto, la
   disponibilidad (insignia de css/componentes/estado.css). Al pie, dos
   botones: COMPRAR (el principal, lleno) y Detalles.

   Las tarjetas se pintan desde js/componentes/tarjeta.js.

   Relojes GRANDES, para que se aprecien:
     1 columna en celular (cada reloj ocupa todo el ancho)
     2 columnas desde 560px · 3 desde 1040px
   ===================================================================== */

.rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* La vitrina: fondo marfil, la foto con un marco de aire alrededor.
   Adentro: el enlace a la ficha (foto + texto) y, abajo, WhatsApp. */
.tarjeta {
  --tarjeta-margen: 14px;          /* aire alrededor de la foto (cambia con el ancho) */
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--tarjeta-margen) var(--tarjeta-margen) 12px;
  background: var(--marfil);
  border-radius: var(--radio);
  transition: background-color .3s ease;
}
.tarjeta:hover { background: #FFFDF9; }

.tarjeta-enlace {
  display: flex; flex-direction: column; flex: 1;
  color: inherit; text-decoration: none;
}

/* Botones al pie: COMPRAR (lleno, el principal) y Detalles (contorno) */
.tarjeta-botones { display: flex; gap: 8px; margin-top: 16px; }
.tarjeta-botones .boton { min-height: 50px; padding: 0 14px; font-size: 15px; }
.tarjeta-botones .boton-comprar { flex: 1.4 1 0; }
.tarjeta-botones .boton-contorno-oscuro { flex: 1 1 0; }
.tarjeta-botones .boton .icono { width: 18px; height: 18px; }

/* --- Foto (formato vertical 3:4) --- */
.tarjeta-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4;
  background: var(--arena);
  border-radius: 2px;
  overflow: hidden;
}
.tarjeta-img svg { height: 86%; width: auto; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tarjeta-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.tarjeta-enlace:hover .tarjeta-img svg,
.tarjeta-enlace:hover .tarjeta-img img { transform: scale(1.04); }
.tarjeta-enlace:hover .tarjeta-nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Segunda foto: aparece suavemente al pasar el mouse (solo en computador) */
.tarjeta-img-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
@media (hover: hover) {
  .tarjeta-enlace:hover .tarjeta-img-alt { opacity: 1; }
}

/* Disponibilidad (css/componentes/estado.css): arriba a la izquierda de la foto */
.tarjeta-estado { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* ♡ Favoritos (css/componentes/favorito.css): arriba a la derecha de la foto.
   Va fuera del enlace de la tarjeta, así tocarlo no abre el reloj. */
.tarjeta-favorito {
  position: absolute; z-index: 3;
  top: calc(var(--tarjeta-margen) + 8px); right: calc(var(--tarjeta-margen) + 8px);
}

/* "Última unidad": pequeña, discreta, abajo a la izquierda de la foto */
.etiqueta {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  padding: 6px 9px;
  border-radius: var(--radio-pildora);
  background: var(--marfil); color: var(--tinta);
  font: 600 11px/1 var(--letra); letter-spacing: .06em; text-transform: uppercase;
}

/* --- Texto centrado --- */
.tarjeta-texto {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 4px 0;
  text-align: center;
}

/* Marca en mayúsculas pequeñas, como "OVERSEAS" en Vacheron */
.tarjeta-marca {
  font: 600 11px/1 var(--letra); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.tarjeta-nombre  { margin-top: 8px; font: 400 18px/1.25 var(--titulo); letter-spacing: -0.01em; }
.tarjeta-detalle {
  margin-top: 6px;
  font: 500 11px/1.3 var(--letra); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.tarjeta-precio { margin-top: 12px; font: 500 16px/1.3 var(--letra); }
.tarjeta-precio s { margin: 0 2px 0 4px; font-size: 13px; }

/* Mensaje cuando un filtro no tiene relojes */
.vacio { grid-column: 1 / -1; padding: 24px; background: var(--arena); }

/* Celular (1 columna): textos un poco más grandes, acordes al tamaño del reloj */
@media (max-width: 559px) {
  .tarjeta-texto  { padding-top: 22px; }
  .tarjeta-marca  { font-size: 12px; }
  .tarjeta-nombre { font-size: 26px; }
  .tarjeta-detalle { font-size: 12px; }
  .tarjeta-precio { font-size: 18px; }
}

@media (min-width: 560px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tarjeta { --tarjeta-margen: 18px; padding-bottom: 14px; }
  .tarjeta-texto { padding-top: 24px; }
  .tarjeta-nombre { font-size: 22px; }
  .tarjeta-precio { font-size: 17px; }
}

@media (min-width: 1040px) {
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tarjeta { --tarjeta-margen: 28px; padding-bottom: 22px; }
  .tarjeta-botones { margin-top: 20px; }
  .tarjeta-nombre { font-size: 24px; }
}