/* =====================================================================
   PROPUESTA — portada de categorías más liviana (/catalogo-propuesta)

   Página en paralelo: no cambia nada de la portada actual. Solo la carga
   CatalogoPropuestaController. Para revertir, borrar este archivo, la vista
   site/catalogo-propuesta.php, el controlador y su ruta.

   Usa los tokens y componentes de site.css (colores, encabezado y banda
   final); lo propio de la propuesta lleva el prefijo .pcat.
   ===================================================================== */

/* Fondo blanco y espacios compactos, igual que la portada actual. */
.pcat { background: #fff; padding: clamp(28px, 3vw, 48px) 0 clamp(36px, 4vw, 56px); }
.pcat__inner { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }

/* ---- Encabezado de la grilla ---- */
.pcat__head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 24px; margin-bottom: clamp(16px, 2vw, 24px);
}
.pcat__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.pcat__title { margin-top: 6px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.2; color: var(--shop-dark); }
.pcat__resumen { font-size: 15px; color: var(--ink-soft); }
.pcat__resumen strong { font-weight: 700; color: var(--shop-dark); }

/* ---- Grilla: 4 · 3 · 2 · 1 columnas ---- */
.pcat__grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

/* ---- Tarjeta ---- */
.pcat-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid #e3e9e5; border-radius: 14px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcat-card:hover { transform: translateY(-4px); border-color: #cfe0d5; box-shadow: 0 14px 32px rgba(8, 56, 32, .12); }
.pcat-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.pcat-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--page); }
.pcat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pcat-card:hover .pcat-card__media img { transform: scale(1.05); }
.pcat-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 44px; color: #c3cbc5; }

.pcat-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.pcat-card__name { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--shop-dark); }
.pcat-card__text { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

.pcat-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 16px;
}
.pcat-card__count {
  padding: 4px 10px; border-radius: 999px; background: #e9f7ef;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--accent-ink);
}
.pcat-card__count--vacia { background: #f1f3f2; color: var(--muted); }
.pcat-card__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--shop-dark); transition: color .2s ease; }
.pcat-card__arrow { width: 16px; height: 16px; transition: transform .2s ease; }
.pcat-card:hover .pcat-card__cta { color: var(--accent-ink); }
.pcat-card:hover .pcat-card__arrow { transform: translateX(3px); }

@media (max-width: 1100px) { .pcat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .pcat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Teléfono: fila compacta con la foto a la izquierda. */
@media (max-width: 560px) {
  /* `minmax(0, 1fr)` y no `1fr` a secas, igual que los otros breakpoints: el
     mínimo implícito de `1fr` es `auto` (= min-content), y acá la tarjeta pasa
     a fila —foto de 112px fija + cuerpo con el conteo y "Ver productos" en
     `nowrap`—, así que ese mínimo superaba el ancho de la pantalla y empujaba
     scroll horizontal en TODA la página (medido: 389px de contenido en una
     pantalla de 375px). */
  .pcat__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pcat-card { flex-direction: row; }
  .pcat-card:hover { transform: none; }
  .pcat-card__media { flex: 0 0 112px; aspect-ratio: auto; }
  /* `min-width: 0` para que el cuerpo pueda encogerse por debajo de su
     contenido (un ítem flex no lo hace por omisión), en vez de estirar la
     tarjeta si alguna categoría trae un nombre más largo. */
  .pcat-card__body { padding: 14px 16px; min-width: 0; }
  .pcat-card__name { font-size: 16px; }
  .pcat-card__text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px;
  }
  /* En fila, la columna de contenido queda en ~180px (foto de 112px fija +
     padding), y "16 productos" (el conteo más largo hoy) más "Ver
     productos" + flecha no entran uno junto al otro en `nowrap` — el
     sobrante quedaba cortado por el `overflow: hidden` de la tarjeta
     (visto en vivo: la pastilla y el link medían 209px pedidos contra 181px
     disponibles). Apilados, cada uno usa el ancho completo de la columna. */
  .pcat-card__foot { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; }
}

/* El buscador (partials/tienda-buscador.php) trae la franja de la tienda,
   cuyo contenedor es de 1320px; acá las tarjetas van a 1240px. Se le iguala
   para que el borde izquierdo de la caja coincida con el de la grilla. */
.pcat-search .shop__container { max-width: 1240px; }