/* ============================================================================
   catalogo.css — «ELIGE TU CURSO» (portada) y EL CATÁLOGO (cursos.php). 1.10.42, vitrina nueva.
   Tal cual las referencias del dueño: inicio-01 / inicio-02 (la portada y sus dos botones) y catalogo-05.
   Medidas de la referencia a 1440 px: márgenes de 40 px, lateral de 279 px a 25 px de la rejilla, rejilla de tres
   columnas (~337 px) con 22-24 px entre tarjetas; títulos de 28 px; la tarjeta «CATEGORÍAS» con filas de 44 px.
   Todo con prefijo vb- (store.css y sections.css no se tocan). La tarjeta va en tarjeta-curso.css.
   Teléfono y tableta: las categorías y los filtros van detrás del botón «Filtrar» (un panel lateral), la rejilla
   a una columna en el teléfono y a dos en la tableta.
   ========================================================================== */

.vb-elige, .vb-cat {
  --vb-tinta: #0F172A;
  --vb-gris: #64748B;
  --vb-gris-2: #94A3B8;
  --vb-gris-3: #475569;
  --vb-linea: #E6EAF0;
  --vb-verde: #16A34A;
  --vb-verde-osc: #166534;
  --vb-verde-fondo: #EAF7EF;
  --vb-navy: #1D3A6B;
  --vb-fondo: #F6F8FA;
  background: var(--vb-fondo);
  color: var(--vb-tinta);
  font-family: var(--font-display);
}
/* 1.10.42 · Los márgenes laterales son los de toda la vitrina (assets/css/vitrina-ancho.css, del coordinador:
   `.contenedor` a casi todo el ancho, ~4,5 % por lado en cualquier monitor). Aquí no se fija un ancho propio. */
.vb-wrap { min-width: 0; }
.vb-elige { padding: 36px 0 48px; scroll-margin-top: 90px; }
.vb-cat { padding: 22px 0 64px; }

/* ------------------------------------------------------------------ la cabecera */
.vb-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
.vb-cab__t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
/* 29,5 px a 800: es lo que mide en la referencia (alto de letra 28 px de la «C» a la «g»). «Elige tu curso» va más
   apretado, como allí. */
.vb-h { margin: 0; font-family: var(--font-display); font-size: 29.5px; font-weight: 800; line-height: 1.15; letter-spacing: -.005em; color: var(--vb-tinta); }
.vb-elige .vb-h { letter-spacing: -.045em; }
.vb-sub { margin: 0; font-size: 13.75px; font-weight: 500; line-height: 1.4; color: var(--vb-gris); }
.vb-sub b { font-weight: 700; color: var(--vb-tinta); }
.vb-cab__ctl { display: flex; align-items: center; gap: 10px; flex: none; }

/* «Ordenar: Más vendidos ▾».
   1.10.42 (pedido del dueño, ajuste-17): la lista nativa del <select> salía con un hueco grande a la izquierda, porque
   heredaba el relleno que dejaba sitio a «Ordenar:». Ahora, con JavaScript, es un desplegable PROPIO (store.js): un botón
   y una lista alineada con él, sin hueco, del ancho del botón o del texto más largo. Sin JavaScript queda el <select> de
   siempre, pero con «Ordenar:» FUERA de él (en la misma caja), así su lista nativa tampoco arrastra el hueco. */
.vb-orden {
  position: relative; display: inline-flex; align-items: center; flex: none; gap: 5px; margin: 0;
  width: 198px; height: 42px; padding: 0 0 0 15px;
  border: 1px solid #E3E8EE; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  cursor: pointer;
}
.vb-orden[hidden] { display: none !important; }
.vb-orden:hover { border-color: #CBD5E1; }
.vb-orden:has(select:focus-visible) { outline: 3px solid var(--vb-verde); outline-offset: 2px; }
.vb-orden > span { flex: none; font-size: 12.5px; font-weight: 500; color: var(--vb-gris); white-space: nowrap; }
.vb-orden select {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0 28px 0 0;
  border: 0; background: transparent; box-shadow: none;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--vb-tinta);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.vb-orden select:focus { outline: none; }
.vb-orden__fl { position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; color: var(--vb-tinta); pointer-events: none; transition: transform .15s ease; }

/* El desplegable propio (lo arma store.js): la caja pasa al botón. */
.vb-orden--propio { padding: 0; border: 0; background: none; box-shadow: none; cursor: auto; }
.vb-orden--propio:hover { border-color: transparent; }
.vb-orden__btn {
  display: flex; align-items: center; gap: 5px; width: 100%; height: 42px; margin: 0; padding: 0 30px 0 15px;
  border: 1px solid #E3E8EE; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  font-family: var(--font-display); color: var(--vb-tinta); text-align: left; cursor: pointer;
  transition: border-color .15s ease;
}
.vb-orden__btn:hover { border-color: #CBD5E1; }
.vb-orden__btn:focus-visible { outline: 3px solid var(--vb-verde); outline-offset: 2px; }
.vb-orden__k { flex: none; font-size: 12.5px; font-weight: 500; color: var(--vb-gris); white-space: nowrap; }
.vb-orden__v { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-orden__btn[aria-expanded="true"] { border-color: #CBD5E1; }
.vb-orden__btn[aria-expanded="true"] .vb-orden__fl { transform: rotate(180deg); }
.vb-orden__lista {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 100%; width: max-content; max-width: min(320px, calc(100vw - 32px));
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #E3E8EE; border-radius: 12px;
  box-shadow: 0 18px 40px -14px rgba(15, 23, 42, .3), 0 2px 6px rgba(15, 23, 42, .06);
}
.vb-orden__lista[hidden] { display: none; }
.vb-orden__lista:focus { outline: none; }
.vb-orden__op {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 38px; padding: 0 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; line-height: 1.2; color: var(--vb-tinta); white-space: nowrap;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.vb-orden__op.is-activa { background: #F1F5F9; }
.vb-orden__lista:focus-visible .vb-orden__op.is-activa { outline: 2px solid var(--vb-verde); outline-offset: -2px; }
.vb-orden__op[aria-selected="true"] { font-weight: 700; }
.vb-orden__op svg { flex: none; width: 15px; height: 15px; color: var(--vb-verde); visibility: hidden; }
.vb-orden__op[aria-selected="true"] svg { visibility: visible; }

/* El botón «Filtrar» (solo teléfono y tableta). */
.vb-filtrar {
  display: none; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 16px; border: 1px solid #E3E8EE; border-radius: 10px; background: #fff;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--vb-tinta); cursor: pointer;
}
.vb-filtrar svg { width: 17px; height: 17px; }
.vb-filtrar__n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--vb-verde); color: #fff; font-size: 11.5px; font-weight: 800;
}
.vb-filtrar__n[hidden] { display: none; }
.vb-filtrar:focus-visible { outline: 3px solid var(--vb-verde); outline-offset: 2px; }

/* ------------------------------------------------------------------ el cuerpo: lateral + rejilla */
.vb-cuerpo { display: grid; grid-template-columns: 279px minmax(0, 1fr); gap: 25px; align-items: start; }
.vb-lado { min-width: 0; }
.vb-lado__cuerpo { display: flex; flex-direction: column; gap: 26px; }
.vb-lado__cab, .vb-lado__pie { display: none; }
.vb-res { min-width: 0; }

/* «CATEGORÍAS» */
.vb-cats {
  background: #fff; border: 1px solid #E9EDF2; border-radius: 12px; padding: 14px 11px 7px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.vb-cats__t {
  margin: 0 12px 10px; font-family: var(--font-display); font-size: 11.5px; font-weight: 700; line-height: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vb-gris);
}
.vb-cats__l, .vb-cats__subs { list-style: none; margin: 0; padding: 0; }
.vb-cats__l > li + li { margin-top: 1px; }
.vb-cats__i, .vb-cats__s {
  display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.vb-cats__i { min-height: 45px; padding: 8px 12px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--vb-tinta); }
.vb-cats__n { flex: 1 1 auto; min-width: 0; }
.vb-cats__c { flex: none; font-size: 13px; font-weight: 500; color: var(--vb-gris-2); font-variant-numeric: tabular-nums; }
.vb-cats__fl, .vb-cats__hueco { flex: none; width: 10px; height: 10px; color: #1E293B; transition: transform .18s ease; }
.vb-cats__g.is-abierta > .vb-cats__i .vb-cats__fl { transform: rotate(90deg); }
.vb-cats__i:hover, .vb-cats__s:hover { background: #F3F5F8; }
.vb-cats__i.is-on, .vb-cats__i.is-on:hover { background: var(--vb-verde-fondo); color: var(--vb-verde-osc); }
.vb-cats__i.is-on .vb-cats__c, .vb-cats__i.is-on .vb-cats__fl { color: var(--vb-verde-osc); }
.vb-cats__i.is-dentro { color: var(--vb-verde-osc); }
.vb-cats__i:focus-visible, .vb-cats__s:focus-visible { outline: 3px solid var(--vb-verde); outline-offset: -1px; }
.vb-cats__subs { margin: 2px 0 6px; }
.vb-cats__subs[hidden] { display: none; }
.vb-cats__s { min-height: 36px; padding: 7px 12px 7px 38px; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--vb-gris-3); }
.vb-cats__s.is-on, .vb-cats__s.is-on:hover { background: var(--vb-verde-fondo); color: var(--vb-verde-osc); font-weight: 600; }
.vb-cats__s.is-on .vb-cats__c { color: var(--vb-verde-osc); }
.vb-cats__i.is-cero, .vb-cats__s.is-cero { opacity: .5; }

/* «Filtrar» (solo en el catálogo) */
.vb-filtros {
  background: #fff; border: 1px solid #E9EDF2; border-radius: 12px; padding: 16px 20px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.vb-filtros__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vb-filtros__cab h2 { margin: 0; font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--vb-tinta); letter-spacing: -.005em; }
.vb-filtros__quitar { font-size: 13.5px; font-weight: 700; color: var(--vb-verde); text-decoration: none; white-space: nowrap; margin-right: -3px; }
.vb-filtros__quitar:hover { color: var(--vb-verde-osc); text-decoration: underline; text-underline-offset: 3px; }
.vb-grupo { margin: 0; padding: 14px 0 10px; border: 0; min-width: 0; }
.vb-grupo + .vb-grupo { border-top: 1px solid #EEF1F5; }
.vb-grupo legend {
  float: left; width: 100%; margin: 0 0 6px; padding: 0;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--vb-tinta);
}
.vb-grupo legend + * { clear: left; }
.vb-op {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 30px; margin: 0;
  font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--vb-tinta); cursor: pointer;
}
.vb-op input { position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
.vb-op__caja {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-left: -2px;
  border: 1.5px solid #D5DCE5; border-radius: 5px; background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.vb-op--radio .vb-op__caja { border-radius: 50%; }
.vb-op input:checked + .vb-op__caja {
  background: var(--vb-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--vb-verde);
}
.vb-op:hover .vb-op__caja { border-color: #A9B6C6; }
.vb-op input:focus-visible + .vb-op__caja { outline: 3px solid var(--vb-verde); outline-offset: 2px; }
.vb-op__t { flex: 1 1 auto; min-width: 0; }
.vb-op__n { flex: none; font-size: 13px; font-weight: 500; color: var(--vb-gris-2); font-variant-numeric: tabular-nums; }
.vb-op.is-cero { color: var(--vb-gris-2); }
.vb-aplicar {
  width: 100%; height: 40px; margin-top: 8px; border: 0; border-radius: 10px; background: var(--vb-navy); color: #fff;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700; cursor: pointer;
}

/* ------------------------------------------------------------------ la rejilla */
.vb-grid.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 22px; }
.js .vb-grid .reveal { opacity: 1; transform: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vb-grid > [hidden] { display: none !important; }

/* Sin resultados */
.vb-vacio {
  display: grid; justify-items: center; gap: 10px; padding: 44px 20px; text-align: center;
  background: #fff; border: 1px solid #E9EDF2; border-radius: 14px; color: var(--vb-gris);
}
.vb-vacio[hidden] { display: none; }
.vb-vacio p { margin: 0; font-size: 15px; font-weight: 600; color: var(--vb-tinta); }
.vb-vacio__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--vb-verde-fondo); color: var(--vb-verde); }
.vb-vacio__ic svg { width: 24px; height: 24px; }
.vb-vacio__b {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 10px;
  background: var(--vb-navy); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.vb-vacio__b:hover { background: var(--vb-verde); color: #fff; }

/* La paginación «‹ 1 2 3 ›», centrada debajo de las últimas tarjetas (pedido del dueño, 05/10). Reusa .pager de
   store.css; aquí el aire y los colores de la tienda: la página actual en azul marino (el de «Ver curso»). */
.vb-pager { margin-top: 32px; gap: 8px; }
.vb-pager[hidden] { display: none; }
.vb-pager .pager__btn {
  min-width: 42px; height: 42px; border: 1px solid #DCE2EA; border-radius: 10px; background: #fff;
  color: var(--vb-tinta); font-family: var(--font-display); font-size: 14px; font-weight: 700; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.vb-pager .pager__btn:hover { border-color: var(--vb-navy); background: #F3F6FA; color: var(--vb-navy); }
.vb-pager .pager__btn.is-active, .vb-pager .pager__btn.is-active:hover { background: var(--vb-navy); border-color: var(--vb-navy); color: #fff; }
.vb-pager .pager__btn:focus-visible { outline: 3px solid var(--vb-verde); outline-offset: 2px; }
.vb-pager .pager__btn--fl svg { width: 16px; height: 16px; }
.vb-pager .pager__btn.is-off { opacity: .35; pointer-events: none; }
.vb-pager .pager__dots { color: var(--vb-gris-2); padding: 0 2px; }

/* ------------------------------------------------------------------ portada: los dos botones de abajo (inicio-02) */
.vb-mas { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vb-btn-todos {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 54px; padding: 0 36px; border-radius: 12px;
  background: var(--vb-verde); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: -.005em;
  box-shadow: 0 10px 22px -10px rgba(22, 163, 74, .65);
  transition: background .15s ease, box-shadow .15s ease;
}
.vb-btn-todos:hover { background: var(--verde-700, #0F7A34); color: #fff; box-shadow: 0 12px 24px -10px rgba(22, 163, 74, .75); }
.vb-btn-pres {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 0 23px; border: 1.5px solid var(--vb-navy); border-radius: 12px;
  background: #fff; color: var(--vb-navy); text-decoration: none; text-align: left;
  transition: background .15s ease;
}
.vb-btn-pres svg { flex: none; width: 18px; height: 18px; }
.vb-btn-pres span { display: flex; flex-direction: column; gap: 2px; }
.vb-btn-pres b { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.vb-btn-pres small { font-size: 11.5px; font-weight: 500; line-height: 1.2; color: var(--vb-gris); }
.vb-btn-pres:hover { background: #F2F5FA; color: var(--vb-navy); }
.vb-btn-todos:focus-visible, .vb-btn-pres:focus-visible { outline: 3px solid var(--vb-verde); outline-offset: 3px; }

/* ------------------------------------------------------------------ catálogo: migas, título y controles (catalogo-05) */
.vb-migas ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0 0 16px; padding: 0; font-size: 12.5px; font-weight: 500; color: var(--vb-gris); }
.vb-migas li { display: inline-flex; align-items: center; gap: 3px; }
.vb-migas li + li::before { content: "›"; color: var(--vb-gris-2); }
.vb-migas a { color: var(--vb-gris); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #B6C0CE; }
.vb-migas a:hover { color: var(--vb-tinta); }
.vb-migas [aria-current] { color: var(--vb-tinta); font-weight: 600; }

.vb-cab--cat { align-items: flex-end; margin-bottom: 22px; }
.vb-cab--cat .vb-cab__t { display: block; padding-bottom: 0; margin-bottom: -4px; }
.vb-cab--cat .vb-sub { margin-top: 6px; }
.vb-cab--cat .vb-cab__ctl {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sw sw" "q or";
  gap: 11px 10px; width: 486px;
}
.vb-cab__fila { display: contents; }
.vb-switch { grid-area: sw; }
.vb-buscar { grid-area: q; }
.vb-cab--cat .vb-orden { grid-area: or; }
.vb-cab--cat .vb-filtrar { grid-area: fi; }

/* «En línea, a tu ritmo (9) | Presenciales y en vivo (1)» */
.vb-switch { display: flex; gap: 0; padding: 4px; border-radius: 13px; background: #E3E8EF; }
.vb-switch__b {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: 10px; text-decoration: none;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.15; color: var(--vb-gris-3);
  transition: background .15s ease, color .15s ease;
}
.vb-switch__b svg { flex: none; width: 16px; height: 16px; }
.vb-switch__b b {
  display: inline-grid; place-items: center; min-width: 24px; height: 23px; padding: 0 7px; border-radius: 999px;
  background: #D5DCE6; color: var(--vb-gris-3); font-size: 12px; font-weight: 800;
}
.vb-switch__b:hover { color: var(--vb-tinta); background: rgba(255, 255, 255, .5); }
.vb-switch__b.is-on { background: #fff; color: var(--vb-tinta); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.vb-switch__b.is-on b { background: var(--vb-verde); color: #fff; }
.vb-switch__b:focus-visible { outline: 3px solid var(--vb-verde); outline-offset: 1px; }

/* «Busca un curso...» */
.vb-buscar { position: relative; display: block; margin: 0; min-width: 0; }
.vb-buscar svg { position: absolute; left: 16px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--vb-gris-2); pointer-events: none; }
.vb-buscar input {
  width: 100%; height: 42px; margin: 0; padding: 0 12px 0 38px;
  border: 1px solid #E3E8EE; border-radius: 10px; background: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--vb-tinta);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.vb-buscar input::placeholder { color: var(--vb-gris-2); opacity: 1; }
.vb-buscar input:hover { border-color: #CBD5E1; }
.vb-buscar input:focus { outline: none; border-color: var(--vb-verde); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.vb-form { display: none; }

/* Presenciales y en vivo: la lista de fechas de siempre, con la cabecera nueva. */
.vb-cat--pres .vb-cab--cat { margin-bottom: 24px; }
.vb-cat--pres .vb-cab--cat .vb-cab__ctl { grid-template-areas: "sw sw"; }

/* ------------------------------------------------------------------ el panel «Filtrar» (teléfono y tableta) */
.vb-velo { position: fixed; inset: 0; z-index: 9550; background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .22s ease; }
.vb-velo.is-on { opacity: 1; }
.vb-velo[hidden] { display: none; }

/* ------------------------------------------------------------------ anchos */
/* Por debajo de 1440 px la rejilla se acerca un poco; sigue a tres mientras la tarjeta mida 270 px o más (el lateral
   no se estrecha: los nombres de las categorías tienen que caber en una línea). */
@media (max-width: 1439px) {
  .vb-grid.course-grid { gap: 22px 18px; }
}
@media (max-width: 1269px) {
  .vb-grid.course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Monitores anchos (1920, 2560…): con los márgenes de la vitrina la rejilla pasa de 1 400 px y a tres por fila las
   tarjetas quedarían de casi 470. A cuatro por fila vuelven a medir lo de la referencia (~340). La portada enseña
   entonces dos filas de cuatro (store.js cuenta las columnas). */
@media (min-width: 1680px) {
  .vb-grid.course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Tableta y teléfono: el lateral se va al panel de «Filtrar». */
@media (max-width: 959px) {
  .vb-elige { padding: 32px 0 40px; }
  .vb-cat { padding: 18px 0 48px; }
  .vb-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .vb-filtrar { display: inline-flex; }

  .vb-lado {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 9551;
    width: min(400px, 100vw); display: flex; flex-direction: column;
    background: var(--vb-fondo); box-shadow: -24px 0 60px rgba(2, 8, 20, .22);
    transform: translateX(100%); visibility: hidden;
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .26s;
  }
  .vb-lado.is-abierto { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.22, .61, .36, 1); }
  .vb-lado__cab {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    height: 60px; padding: 0 12px 0 20px; background: #fff; border-bottom: 1px solid #E9EDF2;
    font-size: 17px; color: var(--vb-tinta);
  }
  .vb-lado__x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--vb-gris-3); cursor: pointer; }
  .vb-lado__x:hover { background: #F1F5F9; color: var(--vb-tinta); }
  .vb-lado__x svg { width: 20px; height: 20px; }
  .vb-lado__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; gap: 16px; }
  .vb-lado__pie { display: block; flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #E9EDF2; }
  .vb-lado__ver {
    width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--vb-verde); color: #fff;
    font-family: var(--font-display); font-size: 15px; font-weight: 800; cursor: pointer;
  }
  .vb-lado__ver:hover { background: var(--verde-700, #0F7A34); }

  /* Cabecera del catálogo apilada: título; el selector a lo ancho; la búsqueda; «Filtrar» y «Ordenar». */
  .vb-cab--cat { flex-direction: column; align-items: stretch; }
  /* «Filtrar» toma lo justo y «Ordenar: Más vendidos» el resto: así cabe el rótulo entero también en el teléfono. */
  .vb-cab--cat .vb-cab__ctl { width: 100%; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sw sw" "q q" "fi or"; }
  .vb-cab--cat .vb-orden, .vb-cab--cat .vb-filtrar { width: 100%; }
  .vb-cat--pres .vb-cab--cat .vb-cab__ctl { grid-template-areas: "sw sw"; }

  /* Portada: título y, debajo, «Filtrar» y «Ordenar» a medias. */
  .vb-elige .vb-cab { flex-direction: column; align-items: stretch; margin-bottom: 18px; }
  .vb-elige .vb-cab__ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .vb-elige .vb-orden { width: 100%; }
}
/* Tableta (600-959 px): «Filtrar», la búsqueda y «Ordenar» en una sola fila; en la portada, a su ancho. */
@media (min-width: 600px) and (max-width: 959px) {
  .vb-cab--cat .vb-cab__ctl { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sw sw sw" "fi q or"; }
  .vb-cab--cat .vb-orden { width: 198px; }
  .vb-elige .vb-cab__ctl { display: flex; }
  .vb-elige .vb-orden { width: 198px; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .vb-lado, .vb-lado.is-abierto, .vb-velo { transition: none; }
}
@media (max-width: 599px) {
  .vb-h { font-size: 24px; }
  .vb-grid.course-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vb-switch__b { padding: 0 10px; font-size: 13px; gap: 6px; text-align: center; }
  .vb-switch__b svg { display: none; }
  .vb-switch__b b { min-width: 21px; height: 21px; font-size: 11.5px; padding: 0 6px; }
  .vb-orden { padding-left: 12px; }
  .vb-orden select { padding-right: 24px; font-size: 12.5px; }
  .vb-orden--propio { padding-left: 0; }
  .vb-orden__btn { padding: 0 26px 0 12px; }
  .vb-orden__v { font-size: 12.5px; }
  .vb-orden__fl { right: 11px; }
  .vb-mas { flex-direction: column; align-items: stretch; margin-top: 22px; }
  .vb-btn-todos, .vb-btn-pres { width: 100%; justify-content: center; }
  .vb-btn-pres { justify-content: flex-start; }
}