/* Tarjetas de sección de Noticias, filtros de Producciones y botón «Ver más».
   Paridad con `CardOption` y con los `group-radio` del sitio React. */

/* ---- Las cinco tarjetas de Noticias (CardOption del original) ---- */
.dl-ncards{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:0 0 40px}
.dl-ncard-opt{display:block;background:#fff;padding:24px 22px;
  box-shadow:0 3px 16px rgba(33,43,56,.10);transition:.15s;color:inherit;text-decoration:none}
.dl-ncard-opt:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(33,43,56,.16)}
.dl-ncard-opt .dl-dash{margin:0 0 16px}
.dl-ncard-opt h3{font-size:1rem;font-weight:500;color:var(--slate,#212B38);margin:0 0 10px;line-height:1.3}
.dl-ncard-opt p{font-size:.82rem;font-weight:300;color:var(--muted,#748D9E);margin:0;line-height:1.5}
.dl-ncard-opt.on{background:var(--slate,#212B38)}
.dl-ncard-opt.on h3{color:#fff}
.dl-ncard-opt.on p{color:#c2ccd4}
.dl-ncard-opt:focus-visible{outline:2px solid var(--teal,#54AACB);outline-offset:3px}

@media(max-width:1100px){ .dl-ncards{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){ .dl-ncards{grid-template-columns:1fr;gap:14px} }

/* ---- Filtros de Producciones (los tres botones del original) ---- */
.dl-mvfilters{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px}
.dl-mvfilters .dl-filter{display:inline-block;padding:10px 24px;border-radius:24px;background:#fff;
  color:var(--slate,#212B38);font-size:.86rem;font-weight:500;border:1px solid rgba(33,43,56,.14);
  text-decoration:none;transition:.15s}
.dl-mvfilters .dl-filter:hover{border-color:var(--teal,#54AACB)}
.dl-mvfilters .dl-filter.on{background:var(--slate,#212B38);color:#fff;border-color:var(--slate,#212B38)}
.dl-mvfilters .dl-filter:focus-visible{outline:2px solid var(--teal,#54AACB);outline-offset:3px}

/* ---- Encabezado secundario (el nombre del filtro activo) ---- */
.dl-head--sub{margin:0 0 26px}
.dl-head--sub h2,.dl-head--sub h3{font-size:1.5rem;font-weight:500;color:var(--slate,#212B38);margin:0 0 10px}
.dl-intro{max-width:66ch;margin:16px auto 0;color:var(--slate,#212B38);font-weight:300}

/* ---- «Ver más» / scroll infinito ---- */
.dl-masbox{text-align:center;margin:34px 0 0}
.dl-mas{display:inline-block}