La Tarjeta de categoría: la vitrina que vende

/* MÓVIL · STACK A ANCHO COMPLETO (lo que ya da el grid default)
   El componente no impone grid; lo aporta el padre. Cuando el
   padre declara una columna, cada tarjeta ocupa el 100 % del
   ancho disponible. La card en sí ya es flex column con
   height: 100 %, así que el CTA queda anclado al fondo. */

.showcase {
  display: grid;
  grid-template-columns: 1fr;       /* una columna por defecto */
  gap: var(--sp-5);
}

/* A partir de 640 px crece a 2 columnas, y a 1024 px a 4. Es la
   regla mobile-first: el caso base (el teléfono) es el más simple. */
@media (min-width: 640px)  { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .showcase { grid-template-columns: repeat(4, 1fr); } }

/* MÓVIL · GRID 1 → 2 → 3 (vitrinas más cortas)
   Cuando la vitrina tiene 3 o 6 elementos (servicios, cobertura),
   la rejilla de 4 columnas deja huecos. Bajarla a 3 columnas en
   escritorio mantiene el ritmo cuadrado sin tarjetas sueltas.
   Es la misma estructura, cambiando solo el segundo breakpoint. */

.grid {
  display: grid;
  grid-template-columns: 1fr;       /* móvil */
  gap: var(--sp-5);
}

@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* No es una extensión del componente: es una regla del padre.
   La tarjeta se acomoda a la columna que reciba —100 px o 320 px—,
   manteniendo el aspect-ratio 16:10 de la imagen. */

/* MÓVIL · SCROLL HORIZONTAL CON SNAP (extensión opcional)
   En vitrinas largas (8–12 tarjetas) apilarlas todas hace la
   pantalla muy alta. Esta extensión convierte la rejilla en una
   sola fila scrollable —tipo carrusel iOS— solo en móvil. Snap
   para que cada tarjeta se alinee al soltar el dedo. */

@media (max-width: 640px) {
  .showcase {
    display: flex;
    overflow-x: auto;
    gap: var(--sp-4);
    padding-inline: var(--container-px);
    margin-inline: calc(var(--container-px) * -1);  /* sangra el contenedor */

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;              /* inercia iOS */
    scrollbar-width: none;                          /* Firefox */
  }
  .showcase::-webkit-scrollbar { display: none; }

  /* Cada tarjeta ≈ 78 % del ancho: la siguiente asoma para invitar
     a deslizar (affordance visual). */
  .showcase > .ccard {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* MÓVIL · CARRUSEL CON DOTS (extensión opcional)
   Variante del scroll-snap que añade indicadores debajo: «1 de 4».
   Se generan con un IntersectionObserver mínimo (5 líneas de JS)
   que marca el dot activo según la tarjeta visible en el viewport.
   En esta plantilla NO se usa: se documenta como gancho para
   landings donde el carrusel rinde más que el scroll mudo. */

@media (max-width: 640px) {
  .showcase { /* (mismo scroll-snap del patrón anterior) */ }

  .showcase__dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: var(--sp-3);
  }
  .showcase__dots b {
    width: 8px; height: 8px; border-radius: 99px;
    background: var(--c-border);
    transition: background var(--transition), width var(--transition);
  }
  .showcase__dots b[aria-current="true"] {
    background: var(--c-primary); width: 20px;
  }
}

/* JS mínimo (en el <script> de la página, no del componente):
   const cards = document.querySelectorAll('.showcase > .ccard');
   const dots  = document.querySelectorAll('.showcase__dots > b');
   const io = new IntersectionObserver((entries) => {
     entries.forEach((e) => {
       if (!e.isIntersecting) return;
       const i = [...cards].indexOf(e.target);
       dots.forEach((d, j) => d.setAttribute('aria-current', j === i));
     });
   }, { threshold: 0.6 });
   cards.forEach((c) => io.observe(c)); */