/* ====================================================================
   CENFIC · CATÁLOGO · estilos propios del módulo
   --------------------------------------------------------------------
   Cubre dos pantallas:
     index.html  → la lista con filtros      (3.2.1)
     curso.html  → la ficha de un producto   (3.2.2 y 3.2.3)

   Se carga después de base.css y premium.css, así que aquí solo va lo
   que es propio del catálogo. Los colores, radios y tipografías salen
   de las variables definidas en modules/inicio/css/base.css
==================================================================== */


/* ====================================================================
   01. ENCABEZADO DE PÁGINA (común a las dos pantallas)
==================================================================== */

.page-hero {
  padding-block: clamp(16px, 2.5vw, 32px) clamp(28px, 4vw, 44px);
}

.page-hero h1 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.page-hero p {
  max-width: 62ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}


/* ====================================================================
   02. BARRA DE CONTROLES  (3.2.1)
   Buscador, filtros por tipo, nivel, modalidad y orden.
==================================================================== */

.catalogo-barra {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

/* --- Buscador --- */
.catalogo-buscador {
  position: relative;
  max-width: 520px;
}

.catalogo-buscador__icono {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}

.catalogo-buscador input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  font-size: 14px;
  color: var(--text-strong);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.catalogo-buscador input::placeholder {
  color: var(--text-dim);
}

.catalogo-buscador input:focus {
  outline: none;
  background: var(--glass-2);
  border-color: rgba(196, 164, 124, 0.45);
}

/* La X nativa del type="search" es gris sobre fondo oscuro: casi
   invisible. La aclaramos en vez de esconderla. */
.catalogo-buscador input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.5);
  cursor: pointer;
}

/* --- Filtros por tipo --- */
.catalogo-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filtro-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.filtro-btn:hover {
  color: var(--text-strong);
  border-color: rgba(196, 164, 124, 0.34);
}

.filtro-btn.is-active {
  color: var(--cenfic-navy);
  background: var(--cenfic-gold);
  border-color: var(--cenfic-gold);
}

/* Contador de cuántos productos hay en cada tipo. */
.filtro-btn__n {
  min-width: 20px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-pill);
}

.filtro-btn.is-active .filtro-btn__n {
  color: var(--cenfic-navy);
  background: rgba(7, 20, 38, 0.16);
}

/* --- Desplegables --- */
.catalogo-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.catalogo-select {
  padding: 10px 38px 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-base);
  background-color: var(--glass);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239DAEC4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  appearance: none;
  transition: border-color 0.2s ease;
}

.catalogo-select:hover {
  border-color: rgba(196, 164, 124, 0.34);
}

.catalogo-select:focus {
  outline: none;
  border-color: rgba(196, 164, 124, 0.55);
}

/* El menú desplegable lo pinta el sistema operativo: sobre fondo navy
   heredaría texto blanco sobre blanco. Forzamos colores legibles. */
.catalogo-select option {
  color: #10233C;
  background: #FFFFFF;
}

/* --- Conteo y botón de limpiar --- */
.catalogo-estado {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.catalogo-conteo {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}

.catalogo-limpiar {
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cenfic-gold);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(196, 164, 124, 0.4);
  cursor: pointer;
}

.catalogo-limpiar:hover {
  color: var(--cenfic-gold-soft);
}

.catalogo-limpiar[hidden] {
  display: none;
}


/* ====================================================================
   03. REJILLA Y TARJETA DE PRODUCTO
==================================================================== */

.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.producto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  background: var(--glass);
  transition: border-color 0.26s ease, transform 0.26s ease;
}

.producto-card:hover {
  border-color: rgba(196, 164, 124, 0.34);
  transform: translateY(-4px);
}

.producto-card--destacada {
  border-color: rgba(196, 164, 124, 0.42);
}

.producto-card__cinta {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cenfic-navy);
  background: var(--cenfic-gold);
  border-radius: var(--radius-pill);
}

/* Nivel y tipo en una sola fila: antes el tipo iba en posición
   absoluta y se encimaba con los títulos largos. */
.producto-card__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.producto-card__nivel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.producto-card__tipo {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cenfic-gold);
}

.producto-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* Todo el título es enlace: un objetivo grande es más fácil de acertar
   que el botón del pie, sobre todo en el celular. */
.producto-card h3 a:hover {
  color: var(--cenfic-gold);
}

.producto-card__resumen {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--text-dim);
}

/* --- Los cinco datos del 3.2.3 --- */
.producto-card__datos {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.producto-card__datos li {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  line-height: 1.55;
}

.producto-card__datos li > span:first-child {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 1px;
}

.producto-card__aviso {
  margin: 0 0 16px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cenfic-gold-soft);
  background: rgba(196, 164, 124, 0.10);
  border-radius: var(--radius-sm);
}

/* --- Pie de la ficha --- */
.producto-card__foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--glass-line);
  display: grid;
  gap: 14px;
}

.producto-card__precio {
  position: relative;
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--text-dim);
}

.producto-card__precio b {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cenfic-gold);
}

.producto-card__precio s {
  margin-left: 8px;
  font-size: 14px;
  opacity: 0.6;
}

.producto-card__dcto {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 9px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: #0B2A16;
  background: #7BD8A4;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

.producto-card__cuotas {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-dim);
}


/* ====================================================================
   04. ESTADO VACÍO
   Un catálogo sin resultados no es un error: es una invitación a
   probar otra cosa. Por eso lleva su propia acción.
==================================================================== */

.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--glass-line);
  border-radius: var(--radius-lg);
  color: var(--text-dim);
}

.empty-state--alto {
  padding-block: clamp(80px, 12vw, 140px);
}

.empty-state p {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.7;
}

.empty-state__titulo {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-strong);
}

.empty-state .btn {
  margin-top: 12px;
}


/* ====================================================================
   05. FICHA DE DETALLE · migas y cabecera  (3.2.2)
==================================================================== */

.migas {
  padding-top: clamp(90px, 11vw, 132px);
  font-size: 12.5px;
  color: var(--text-dim);
}

.migas .container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.migas a:hover {
  color: var(--cenfic-gold);
}

.migas span[aria-hidden] {
  opacity: 0.4;
}

#migas-actual {
  color: var(--text-muted);
}

.curso-hero {
  padding-block: 22px clamp(28px, 4vw, 40px);
}

.curso-hero__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.marca {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
}

.marca--tipo {
  color: var(--cenfic-navy);
  background: var(--cenfic-gold);
  border-color: var(--cenfic-gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
}

.marca--codigo {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.02em;
}

.marca--destacado {
  color: var(--cenfic-gold-soft);
  border-color: rgba(196, 164, 124, 0.40);
  background: rgba(196, 164, 124, 0.10);
}

.curso-hero h1 {
  margin: 0 0 14px;
  max-width: 22ch;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.curso-hero__resumen {
  max-width: 60ch;
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* Datos rápidos: lo que se consulta antes de bajar a leer. */
.curso-hero__rapido {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid var(--glass-line);
}

.curso-hero__rapido li {
  display: grid;
  gap: 3px;
}

.curso-hero__rapido span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.curso-hero__rapido strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-base);
}


/* ====================================================================
   06. FICHA DE DETALLE · maqueta de dos columnas
==================================================================== */

.curso-cuerpo {
  padding-top: 0;
}

.curso-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.curso-bloque {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--glass-line);
}

.curso-bloque:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.curso-bloque h2 {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.curso-parrafo {
  max-width: 66ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.82;
  color: var(--text-muted);
}


/* ====================================================================
   07. FICHA TÉCNICA  (los cinco datos del 3.2.3, juntos)
==================================================================== */

.ficha-tecnica {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ficha-tecnica > div {
  padding: 15px 18px;
  background: var(--cenfic-navy);
}

/* Si el número de datos es impar, el último ocuparía media fila y
   dejaría un hueco gris al lado. Que se estire a lo ancho. */
.ficha-tecnica > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.ficha-tecnica dt {
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ficha-tecnica dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-base);
}


/* ====================================================================
   08. LISTAS DE CONTENIDO
==================================================================== */

.lista-check,
.lista-punto {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.lista-check li,
.lista-punto li {
  position: relative;
  padding-left: 26px;
}

/* El check se dibuja con dos bordes girados: sin imagen ni fuente de
   iconos, y escala con el texto. */
.lista-check li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--cenfic-gold);
  border-bottom: 2px solid var(--cenfic-gold);
  transform: rotate(45deg);
}

.lista-punto li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 6px;
  height: 6px;
  background: var(--cenfic-gold);
  border-radius: 50%;
  opacity: 0.7;
}


/* ====================================================================
   09. TEMARIO POR MÓDULOS
==================================================================== */

.temario {
  display: grid;
  gap: 14px;
}

.temario__modulo {
  padding: 20px 22px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  background: var(--glass);
}

.temario__modulo h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* El número es real: el temario se lleva en ese orden. */
.temario__n {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cenfic-gold);
  background: rgba(196, 164, 124, 0.13);
  border-radius: 50%;
}


/* ====================================================================
   10. DOCENTES  (3.2.3.4)
==================================================================== */

.docentes {
  display: grid;
  gap: 12px;
}

.docente {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  background: var(--glass);
}

.docente__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--cenfic-navy);
  background: linear-gradient(135deg, var(--cenfic-gold) 0%, var(--cenfic-gold-2) 100%);
  border-radius: 50%;
}

.docente__texto h3 {
  margin: 0 0 3px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.docente__cargo {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cenfic-gold);
}

.docente__perfil {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
}


/* ====================================================================
   11. CONTENIDO DE UN PAQUETE
==================================================================== */

.paquete-items {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.paquete-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  background: var(--glass);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.paquete-item:hover {
  border-color: rgba(196, 164, 124, 0.34);
  background: var(--glass-2);
}

.paquete-item__tipo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cenfic-gold);
}

.paquete-item__titulo {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-base);
}

.paquete-item__precio {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--text-dim);
}

.paquete-ahorro {
  margin: 0;
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cenfic-gold-soft);
  background: rgba(196, 164, 124, 0.10);
  border-radius: var(--radius-sm);
}


/* ====================================================================
   12. TARJETA LATERAL DE COMPRA
   Se queda pegada al hacer scroll: el precio y el botón siempre a la
   vista mientras se lee el temario.
==================================================================== */

.curso-lateral {
  position: sticky;
  top: calc(var(--header-real, var(--header-h)) + 20px);
}

.curso-compra {
  display: grid;
  gap: 12px;
  padding: 26px 24px;
  border: 1px solid rgba(196, 164, 124, 0.30);
  border-radius: var(--radius-lg);
  background: var(--glass-2);
  box-shadow: var(--shadow-md);
}

.compra__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.compra__precio strong {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--cenfic-gold);
}

.compra__precio s {
  font-size: 16px;
  color: var(--text-dim);
}

/* Es hija directa de .curso-compra, que es una rejilla: con
   `justify-self: start` la pastilla mide lo que mide su texto. */
.compra__dcto {
  justify-self: start;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0B2A16;
  background: #7BD8A4;
  border-radius: var(--radius-pill);
}

.compra__cuotas {
  margin: -6px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-base);
}

.compra__nota {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}

.compra__datos {
  display: grid;
  gap: 9px;
  margin: 6px 0;
  padding: 16px 0;
  list-style: none;
  border-block: 1px solid var(--glass-line);
  font-size: 13px;
}

.compra__datos li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.compra__datos li > span:first-child {
  color: var(--text-dim);
}

.compra__datos li > span:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--text-base);
}

.compra__aviso,
.compra__cupos {
  margin: 0;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.compra__aviso {
  color: var(--cenfic-gold-soft);
  background: rgba(196, 164, 124, 0.12);
}

.compra__cupos {
  color: var(--text-muted);
  background: var(--glass);
}

.compra__cta {
  margin-top: 4px;
}

.compra__consulta {
  justify-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--glass-line);
}

.compra__consulta:hover {
  color: var(--cenfic-gold);
  border-color: rgba(196, 164, 124, 0.4);
}


/* ====================================================================
   13. PROGRAMAS RELACIONADOS
==================================================================== */

.curso-relacionados {
  padding-top: 0;
}


/* ====================================================================
   14. FOCO VISIBLE
   Quien navega con teclado tiene que ver dónde está parado.
==================================================================== */

.filtro-btn:focus-visible,
.catalogo-select:focus-visible,
.catalogo-limpiar:focus-visible,
.producto-card h3 a:focus-visible,
.paquete-item:focus-visible,
.migas a:focus-visible,
.compra__consulta:focus-visible {
  outline: 2px solid var(--cenfic-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.catalogo-buscador input:focus-visible {
  outline: 2px solid var(--cenfic-gold);
  outline-offset: 2px;
}


/* ====================================================================
   15. RESPONSIVE
==================================================================== */

@media (max-width: 1180px) {
  .curso-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En una sola columna, dejar la tarjeta pegada estorbaría: pasa a
     ser un bloque normal, arriba del contenido. */
  .curso-lateral {
    position: static;
    order: -1;
  }

  .curso-compra {
    max-width: 520px;
  }
}

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

@media (max-width: 720px) {
  .ficha-tecnica {
    grid-template-columns: minmax(0, 1fr);
  }

  .paquete-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .paquete-item__tipo {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .catalogo-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalogo-buscador {
    max-width: none;
  }

  .catalogo-select {
    flex: 1 1 auto;
  }

  .curso-hero__rapido {
    gap: 14px 24px;
  }

  .docente {
    flex-direction: column;
    gap: 12px;
  }
}


/* ====================================================================
   16. MOVIMIENTO REDUCIDO
   Si el sistema pide menos animación, se la damos.
==================================================================== */

@media (prefers-reduced-motion: reduce) {
  .producto-card,
  .paquete-item,
  .filtro-btn,
  .catalogo-select,
  .catalogo-buscador input {
    transition: none;
  }

  .producto-card:hover {
    transform: none;
  }
}