/* /cursos — rejillas de la página (en el prototipo iban inline) y responsive.
   Las clases base (.cseg, .ctab, .crow, .spec-r…) están en main.css. */

.cz-hero-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,96px);align-items:center}
.cz-lms{border-radius:48px;padding:clamp(48px,6vw,110px)}
.cz-lms-g{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,96px);align-items:start}
.cz-med-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,96px);align-items:center}
.cz-cat .crow[hidden]{display:none}
.cz-cat .ctab:focus-visible,.cz-cat .crow:focus-visible{outline:3px solid var(--g);outline-offset:2px}

@media (max-width:900px){
  /* Hero: el círculo con «46 cursos disponibles» pasa debajo del texto, más pequeño y centrado */
  .cz-hero-g,.cz-lms-g,.cz-med-g{grid-template-columns:minmax(0,1fr)}
  .cz-hero-g{gap:56px}
  .cz-art{width:min(100%,420px);justify-self:center}
  .cz-num{font-size:clamp(72px,22vw,120px)!important}
  .cz-num-l{font-size:16px!important}

  /* Pestañas: una fila con scroll horizontal propio dentro de la píldora (la página no se desplaza) */
  .cz-cat .cseg{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cz-cat .cseg::-webkit-scrollbar{display:none}
  .cz-cat .ctab{flex:none;min-height:46px;padding:0 16px;font-size:15px;gap:8px}
  .cz-cat .ctab:focus-visible{outline-offset:-3px}

  /* Filas: forma + título + flecha (etiqueta y horas se ocultan en main.css) */
  .cz-cat .crow{grid-template-columns:32px minmax(0,1fr) 44px;gap:14px;padding:18px 14px;border-radius:22px}
  .cz-cat .crow:hover{padding-left:20px}
  .cz-cat .crow .ci{width:32px;height:32px}
  .cz-cat .crow .go{width:44px;height:44px}
  .cz-cat .crow .ct{font-size:18px}

  /* Bloque LMS */
  .cz-lms{border-radius:32px;padding:44px 24px}
  .cz-lms .spec-r{grid-template-columns:56px minmax(0,1fr);gap:12px 20px;padding:28px 0}
  .cz-lms .spec-r .sv{width:56px;height:56px;grid-row:span 2;align-self:start}
  .cz-lms .spec-r h3{align-self:center}
}

@media (prefers-reduced-motion: reduce){
  .cz-cat .crow,.cz-cat .crow .ci,.cz-cat .crow .go svg,.spec-r .sv{transition:none}
  .cz-cat .crow:hover .ci,.spec-r:hover .sv{transform:none}
}