/* =========================================================================
   catalogo.css — página comercial del estudio (Catálogo de proyectos).
   NO cambia la identidad: usa la marca principal (rosa) heredada de styles.css.
   Solo añade el componente que styles.css no tiene: los pasos del proceso.
   Cargar después de styles.css.
   ========================================================================= */

/* ---- Cómo trabajo: los 5 pasos ------------------------------------------ */
.steps { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.step { display: grid; gap: 0.5rem; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2rem); border-top: 1px solid var(--hairline); }
.step:first-child { border-top: 0; }
.step__n { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--accent); }
.step__t { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500; color: var(--paper); }
.step__d { font-size: 1.05rem; line-height: 1.55; color: color-mix(in srgb, var(--paper) 72%, transparent); max-width: 44rem; }

/* Etiqueta "demo en vivo" con punto latente en las tarjetas del catálogo. */
.live { display: inline-flex; align-items: center; gap: 0.5rem; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) { .live::before { animation: pulse 2s ease-in-out infinite; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (min-width: 741px) {
  .step { grid-template-columns: 110px 1fr; column-gap: 2.5rem; align-items: start; }
  .step__n { grid-row: 1 / 3; }
  .step__t { grid-column: 2; }
  .step__d { grid-column: 2; }
}