/* ============================================================
   CATÁLOGO DE PRODUCTOS — /products

   Depende de las primitivas de product-sections.css (.pr-section,
   .pr-eyebrow, .pr-h1, .pr-lead, .pr-check), que se carga antes.
   ============================================================ */

.pr-index__header {
  max-width: 46rem;
  margin-bottom: 4rem;
}

/* `auto-fit` con un mínimo: con un solo producto la tarjeta ocupa una
   columna y no se estira a lo ancho hasta dejar de parecer una ficha.
   Al añadir el segundo se colocan solas, sin tocar esto. */
.pr-index__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.pr-index__card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 2rem;
  transition: border-color var(--transition);
}

.pr-index__card:hover { border-color: rgba(var(--teal-300-rgb), 0.35); }

/* ── Cabecera de la tarjeta ──────────────────────────────────
   Márgenes negativos para que la imagen llegue a los bordes: dentro
   del padding quedaría una tarjeta con una foto pegada, no una ficha
   con cabecera. Los valores tienen que seguir al padding de la
   tarjeta (2rem); si lo cambias, cambia esto. */

.pr-index__media {
  margin: -2rem -2rem 1.75rem;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  /* Separa la foto del contenido sin dibujar una línea encima de ella. */
  border-bottom: 1px solid var(--border-subtle);
}

.pr-index__media img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  /* ⚠️ La imagen lleva el logotipo y la línea de producto GRABADOS en su
     tercio izquierdo, así que el encuadre no es estético: si te lo comes,
     la tarjeta pierde el texto.

     Cada eje manda en un tamaño distinto, y conviene saberlo antes de
     tocar estos números:
      · Banda ANCHA (escritorio, ratio > 1,9): no sobra ancho, así que el
        eje horizontal no hace nada y encuadra el vertical. Va al 42% y no
        centrado, porque centrado corta el filete cian que corona el
        logotipo y este queda pegado al borde superior.
      · Tarjeta ESTRECHA (móvil, ratio < 1,9): al revés, sobra ancho. El
        12% mantiene el texto dentro; con el 68% que había —pensado para
        cuando la imagen no llevaba letras— el recorte empezaba a 58px y
        se comía el logotipo. */
  object-position: 12% 44%;
}

/* 300px y no 240: el bloque de texto grabado (filete + logotipo + línea de
   producto) mide unos 203px una vez escalado, así que en una banda de 240 no
   cabe con aire por los dos lados — o se corta el filete por arriba o la
   línea de producto queda pegada al borde de abajo. Con 300 sobran unos 48px
   por lado y el 44% lo deja centrado. */
@media (min-width: 640px) {
  .pr-index__media img { height: 300px; }
}

.pr-index__eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.pr-index__name {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--neutral-100);
}

.pr-index__summary {
  margin-top: 1rem;
  line-height: 1.7;
  color: var(--neutral-400);
  text-wrap: pretty;
}

.pr-index__highlights {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.pr-index__highlights li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--neutral-200);
}

.pr-index__highlights .pr-check { margin-top: 0; }

/* `margin-top:auto` para que el enlace quede abajo en todas las
   tarjetas aunque los resúmenes midan distinto. */
.pr-index__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--teal-300);
  transition: color var(--transition);
}

.pr-index__link:hover { color: var(--neutral-100); }

.pr-index__link:hover .btn-arrow { transform: translateX(4px); }

.pr-index__link:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 3px;
}