/* ============================================================
   VantaCard — Catálogo de soluciones NFC
   Page-specific styles only. Everything shared (nav, footer, btn,
   accent-italic, tone, reveal-up, brand-mark, wa-fab, social-link)
   comes from styles.css.

   Una sola pieza propia: la ficha de producto. Todo el catálogo es
   esa ficha repetida en una retícula, para que agregar un producto
   sea copiar un bloque y no inventar una maqueta nueva.
   ============================================================ */

/* ---------- Apertura ---------- */
.catalog-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: calc(var(--space-6) + 2.5rem) var(--space-4) var(--space-6);
  text-align: center;
}

.catalog-hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 var(--space-4);
}

.catalog-hero__lede {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 58ch;
  margin: 0 auto;
}

/* ---------- Retícula ----------
   Tres por fila en escritorio, dos en tableta, una en teléfono. auto-fit
   con minmax haría el salto solo, pero con tres productos dejaría una
   fila de dos y una de uno en anchos intermedios; los cortes explícitos
   mantienen las filas parejas. */
.catalog {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
}

/* Enlace dentro de la frase. inline-block con padding y margen negativo
   para que el área tocable llegue a 44px sin mover el renglón, y el
   subrayado va como fondo en lugar de border-bottom: un borde se
   despegaría del texto al crecer el padding. */
.catalog-hero__lede a {
  display: inline-block;
  padding: 0.72rem 0.2rem;
  margin: -0.72rem 0;
  color: var(--text-primary);
  background-image: linear-gradient(var(--border-strong), var(--border-strong));
  background-size: calc(100% - 0.4rem) 1px;
  background-position: 0.2rem calc(100% - 0.72rem);
  background-repeat: no-repeat;
  transition: background-image 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .catalog-hero__lede a:hover {
    color: var(--accent);
    background-image: linear-gradient(var(--accent), var(--accent));
  }
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}

@media (max-width: 1000px) {
  .catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .catalog__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ---------- Grupos ----------
   El catálogo se divide en tarjetas y placas. Cada grupo tiene su
   encabezado y su propia retícula, así que agregar un tercer grupo es
   copiar el bloque entero. */
.catalog__group + .catalog__group {
  margin-top: var(--space-6);
}

.catalog__group-head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.catalog__group-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
}

.catalog__group-head p {
  margin-top: 0.4rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Ficha de producto ----------
   La ficha es una columna: imagen, nombre, descripción, lista y botón.
   El botón se alinea al fondo con margin-top:auto para que, en una fila
   donde una descripción es más larga que otra, los botones sigan
   quedando a la misma altura. */
.product {
  display: flex;
  flex-direction: column;
}

/* 4:5 y no 4:3: las fotos de producto vienen verticales —922x1152, que
   es exactamente 4:5— así que en apaisado había que recortarles la
   mitad de la tarjeta. En vertical entran enteras, y además es la
   proporción que ocupa mejor una pantalla de teléfono. */
.product__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .product:hover .product__media img {
    transform: scale(1.03);
  }
}

/* ---------- Galería de la ficha ----------
   Una tira de miniaturas bajo la foto: tocar una la pone arriba. Sin
   modal, sin librería y sin carrusel automático — el que mira decide
   cuándo cambia, y cada miniatura es un botón que el teclado alcanza.
   Las miniaturas pesan 200px; la foto grande se descarga solo cuando
   la piden, así que una ficha con cuatro fotos no cobra las cuatro
   por adelantado. */
.product__foto {
  transition: opacity 0.18s ease;
}

.product__thumbs {
  display: flex;
  gap: 8px;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.product__thumb {
  display: block;
  width: 52px;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product__thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .product__thumb:hover {
    opacity: 1;
  }
}

.product__name {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.product__desc {
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Lista de características. Hairlines en vez de viñetas: mismo
   vocabulario que las filas de "Cómo funciona" y del catálogo de
   compromisos, y no mete un glifo más a una página que ya tiene
   imágenes. */
.product__specs {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  border-top: 1px solid var(--border);
}

/* Mono, como las demás etiquetas del sitio, pero sin el tracking
   ancho que llevan esas: estas son frases, no rótulos de dos palabras
   en mayúsculas, y a 0.06em se leen a tirones. */
.product__specs li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

/* margin-top:auto empuja el botón al fondo de la ficha: cada ficha es
   una columna flex, así que en una fila donde una descripción es más
   larga que otra los botones siguen quedando a la misma altura. El
   espacio de arriba lo pone el elemento anterior, no el botón, para
   que con o sin lista de características la separación sea la misma. */
.product__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product__cta:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
    color: var(--accent);
  }
}

/* ---------- Cierre ---------- */
.catalog-close {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
  text-align: center;
}

.catalog-close h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.catalog-close > p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 auto var(--space-5);
}

/* ---- Escala de teléfono ---- */
@media (max-width: 720px) {
  .catalog-hero h1 {
    font-size: 2rem;
    line-height: 1.1;
  }

  .catalog-hero__lede {
    font-size: 1rem;
  }

  .catalog__group-head h2 {
    font-size: 1.4rem;
  }

  .catalog-close h2 {
    font-size: 1.6rem;
  }
}