/* PIEZA: la portada, en cuatro formas
 * ---------------------------------------------------------------------------
 * DOS REGLAS QUE VIENEN DE HABERSE EQUIVOCADO ANTES (2026-09-04)
 *
 * 1. NI UN COLOR NUEVO. Todo sale de `tokens.css`, que son los valores
 *    medidos sobre la web viva. Hubo una propuesta con paleta propia y el
 *    usuario la paro en seco: «el azul ese de dudaslegislativas es
 *    caracteristico». Si aqui aparece un hex suelto, esta mal.
 * 2. NI UNA SERIF, NI UN FILETE DE PERIODICO. Las propuestas anteriores
 *    tiraban a gaceta: titulares en serif, sumarios, columnas. La respuesta
 *    fue «lo has hecho demasiado periodico». La tipografia es la del sitio,
 *    la del sistema, y el registro es el de una herramienta.
 *
 * Lo que queda para diferenciar las cuatro es la FORMA. Nada de bandas a
 * sangre completa aqui dentro: el contenido vive en el contenedor de 1000px
 * que necesitan los anuncios, y sacarlo de ahi obliga a `100vw`, que se lleva
 * por delante el ancho de la barra de scroll.
 * --------------------------------------------------------------------------- */

.dl-pt {
  color: var(--dl-tinta);
  /* El sitio justifica el texto dentro de `.entry-content`. En titulares de
     tres palabras dentro de una rejilla eso son rios blancos. */
  text-align: left;
}
.dl-pt p, .dl-pt li, .dl-pt h1, .dl-pt h2, .dl-pt h3 { text-align: left; }
.dl-pt a { text-decoration: none; color: inherit; }
.dl-pt ul, .dl-pt ol { margin: 0; padding: 0; list-style: none; }
.dl-pt :focus-visible { outline: 2px solid var(--dl-foco); outline-offset: 2px; }

/* --- Trozos compartidos ---------------------------------------------------- */

.dl-pt-intro { margin-bottom: var(--dl-esp-xl); }
.dl-pt-intro h1 {
  margin: 0 0 0.6rem;
  padding-bottom: 20px;
  border-bottom: var(--dl-filete) solid var(--dl-azul-700);
  font-size: 33px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dl-tinta);
  overflow-wrap: anywhere;
  min-width: 0;
}
.dl-pt-intro p {
  margin: 0;
  max-width: 46rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--dl-tinta-suave);
}

.dl-pt-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dl-esp-md);
  flex-wrap: wrap;
  margin-bottom: var(--dl-esp-lg);
  border-bottom: 1px solid var(--dl-linea);
}
.dl-pt-titulo {
  margin: 0 0 -1px;
  padding-bottom: var(--dl-esp-sm);
  border-bottom: var(--dl-filete) solid var(--dl-azul-700);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dl-tinta);
  overflow-wrap: anywhere;
  min-width: 0;
}
.dl-pt-mas {
  padding-bottom: var(--dl-esp-sm);
  font-size: 0.875rem;
  color: var(--dl-azul-500);
  white-space: nowrap;
}
.dl-pt-mas:hover { text-decoration: underline; }

.dl-pt-bloque { margin-bottom: var(--dl-esp-2xl); }

.dl-pt-etiqueta {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dl-azul-700);
}

.dl-pt-tarjeta { display: block; }
.dl-pt-tarjeta img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 187;
  object-fit: cover;
  border-radius: var(--dl-radio);
  background: var(--dl-azul-100);
}
.dl-pt-tarjeta__texto { display: block; margin-top: var(--dl-esp-sm); }
.dl-pt-tarjeta__titulo {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dl-pt-tarjeta:hover .dl-pt-tarjeta__titulo { color: var(--dl-azul-500); }

.dl-pt-rejilla-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dl-esp-lg);
}

/* Buscador. Sin JavaScript: la busqueda del sitio ya funciona. */
.dl-pt-buscador__etiqueta {
  display: block;
  margin-bottom: var(--dl-esp-sm);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dl-azul-700);
}
.dl-pt-buscador__caja {
  display: flex;
  gap: var(--dl-esp-sm);
  background: var(--dl-superficie);
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  padding: 0.35rem 0.35rem 0.35rem 0.9rem;
}
.dl-pt-buscador__caja:focus-within { border-color: var(--dl-azul-700); }
.dl-pt-buscador input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0.55rem 0;
  font-size: 1rem;
  font-family: inherit;
  color: var(--dl-tinta);
}
.dl-pt-buscador input[type="search"]:focus { outline: none; }
.dl-pt-buscador button {
  flex: none;
  border: 0;
  border-radius: var(--dl-radio);
  background: var(--dl-azul-700);
  color: #fff;
  padding: 0.55rem 1.15rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dl-dur) var(--dl-ease);
}
.dl-pt-buscador button:hover { background: var(--dl-azul-900); }
.dl-pt-buscador button:active { transform: translateY(1px); }

.dl-pt-pastillas { display: flex; flex-wrap: wrap; gap: var(--dl-esp-sm); }
.dl-pt-pastillas a {
  display: inline-block;
  padding: 0.4em 0.8em;
  border: 1px solid var(--dl-linea);
  border-radius: 2px;
  background: var(--dl-superficie);
  font-size: 0.88rem;
  transition: border-color var(--dl-dur) var(--dl-ease), color var(--dl-dur) var(--dl-ease);
}
.dl-pt-pastillas a:hover { border-color: var(--dl-azul-700); color: var(--dl-azul-700); }
.dl-pt-pastillas em {
  font-style: normal;
  color: var(--dl-tinta-suave);
  font-variant-numeric: tabular-nums;
}

.dl-pt-lista-fechas li { border-bottom: 1px solid var(--dl-linea); }
.dl-pt-lista-fechas a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dl-esp-lg);
  padding: 0.68rem 0;
  font-size: 1rem;
  line-height: 1.35;
}
.dl-pt-lista-fechas a:hover { color: var(--dl-azul-500); }
.dl-pt-lista-fechas time {
  flex: none;
  font-size: 0.8rem;
  color: var(--dl-tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* La franja de modelos, en el azul oscuro de la marca. */
.dl-pt-modelos {
  margin-bottom: var(--dl-esp-xl);
  padding: var(--dl-esp-lg);
  border-radius: var(--dl-radio);
  background: var(--dl-azul-900);
  color: #fff;
}
.dl-pt-modelos__cab { margin-bottom: var(--dl-esp-lg); }
.dl-pt-modelos h2 {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
.dl-pt-modelos p { margin: 0; max-width: 56ch; font-size: 0.95rem; color: #C3D5E6; }
.dl-pt-modelos ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dl-esp-md) var(--dl-esp-lg);
}
.dl-pt-modelos a {
  display: block;
  padding-top: var(--dl-esp-sm);
  border-top: 1px solid #2E5F8B;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.4;
}
.dl-pt-modelos a:hover { color: #A9C3DA; }
.dl-pt-modelos :focus-visible { outline-color: #fff; }

/* ═══ 1 · Consultorio ═══════════════════════════════════════════════════════ */

.dl-pt-consulta {
  margin-bottom: var(--dl-esp-2xl);
  padding: var(--dl-esp-lg);
  border-radius: var(--dl-radio);
  background: var(--dl-azul-100);
}
.dl-pt-consulta .dl-pt-intro { margin-bottom: var(--dl-esp-lg); }
.dl-pt-consulta .dl-pt-intro h1 { border-bottom-color: var(--dl-azul-700); }
.dl-pt-buscador--grande .dl-pt-buscador__caja { padding-left: 1.1rem; }
.dl-pt-buscador--grande input[type="search"] { padding-block: 0.75rem; font-size: 1.05rem; }
.dl-pt-buscador--grande button { padding-inline: 1.5rem; }

.dl-pt-atajo-rotulo {
  margin: var(--dl-esp-lg) 0 var(--dl-esp-sm);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--dl-tinta-suave);
}

.dl-pt-materias {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--dl-linea);
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  overflow: hidden;
}
.dl-pt-materias a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--dl-esp-md);
  background: var(--dl-superficie);
  transition: background var(--dl-dur) var(--dl-ease);
}
.dl-pt-materias a:hover { background: var(--dl-azul-100); }
.dl-pt-materias__nombre { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.dl-pt-materias__cuenta {
  font-size: 0.78rem;
  color: var(--dl-tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* ═══ 2 · Mosaico ═══════════════════════════════════════════════════════════ */

.dl-pt-mosaico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--dl-esp-lg);
  margin-bottom: var(--dl-esp-xl);
}

.dl-pt-teja {
  border-radius: var(--dl-radio);
  background: var(--dl-superficie);
  border: 1px solid var(--dl-linea);
  overflow: hidden;
}
.dl-pt-teja h2 {
  margin: 0 0 var(--dl-esp-md);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dl-azul-700);
}

.dl-pt-teja--lider { grid-column: span 7; display: block; }
.dl-pt-teja--lider img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--dl-azul-100);
}
.dl-pt-teja__texto { display: block; padding: var(--dl-esp-lg); }
.dl-pt-teja__titulo {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.dl-pt-teja--lider:hover .dl-pt-teja__titulo { color: var(--dl-azul-500); }
.dl-pt-teja__fecha {
  display: block;
  margin-top: var(--dl-esp-sm);
  font-size: 0.82rem;
  color: var(--dl-tinta-suave);
}

.dl-pt-teja--ranking { grid-column: span 5; padding: var(--dl-esp-lg); }
.dl-pt-teja--ranking ol { counter-reset: dl-rank; }
.dl-pt-teja--ranking li { border-top: 1px solid var(--dl-linea); }
.dl-pt-teja--ranking li:first-child { border-top: 0; }
.dl-pt-teja--ranking a {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.52rem 0;
  font-size: 0.95rem;
  line-height: 1.3;
}
.dl-pt-teja--ranking a::before {
  counter-increment: dl-rank;
  content: counter(dl-rank, decimal-leading-zero);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--dl-azul-700);
  font-variant-numeric: tabular-nums;
}
.dl-pt-teja--ranking a:hover { color: var(--dl-azul-500); }

.dl-pt-teja--recientes { grid-column: span 8; padding: var(--dl-esp-lg); }
.dl-pt-teja--recientes li { border-top: 1px solid var(--dl-linea); }
.dl-pt-teja--recientes li:first-child { border-top: 0; }
.dl-pt-teja--recientes a { display: block; padding: 0.7rem 0; font-size: 1rem; line-height: 1.35; }
.dl-pt-teja--recientes a:hover { color: var(--dl-azul-500); }

/* El selector lleva `a` a propósito: el bloque ES un enlace, y `.dl-pt a
   { color: inherit }` de arriba tiene más peso que una sola clase. Sin esto,
   el texto sale en tinta oscura sobre el azul oscuro y no se lee. */
.dl-pt a.dl-pt-teja--modelos {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: var(--dl-esp-lg);
  background: var(--dl-azul-900);
  border-color: var(--dl-azul-900);
  color: #fff;
}
.dl-pt-teja__cuenta { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dl-pt-teja--modelos .dl-pt-teja__titulo { font-size: 1.05rem; font-weight: 500; }
.dl-pt-teja__pie { display: block; margin-top: var(--dl-esp-md); font-size: 0.85rem; color: #A9C3DA; }
.dl-pt-teja--modelos:hover .dl-pt-teja__pie { color: #fff; }
.dl-pt-teja--modelos :focus-visible { outline-color: #fff; }

.dl-pt-teja--materias { grid-column: span 12; padding: var(--dl-esp-lg); }
.dl-pt-teja--materias nav { display: flex; flex-wrap: wrap; gap: var(--dl-esp-sm); }
.dl-pt-teja--materias a {
  padding: 0.4em 0.8em;
  border: 1px solid var(--dl-linea);
  border-radius: 2px;
  font-size: 0.9rem;
}
.dl-pt-teja--materias a:hover { border-color: var(--dl-azul-700); color: var(--dl-azul-700); }
.dl-pt-teja--materias em { font-style: normal; color: var(--dl-tinta-suave); font-variant-numeric: tabular-nums; }

/* ═══ 3 · Con barra lateral ═════════════════════════════════════════════════ */

.dl-pt-dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: var(--dl-esp-xl);
  align-items: start;
}

/* Sin margen abajo: el separador lo pone la firma, que va justo despues.
   Con los dos, la firma se iba 32px por debajo del titular y parecia que no
   era de ese articulo. */
.dl-pt-destacado { display: block; }
.dl-pt-destacado img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--dl-radio);
  margin-bottom: var(--dl-esp-md);
  background: var(--dl-azul-100);
}
.dl-pt-destacado__titulo {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.dl-pt-destacado:hover .dl-pt-destacado__titulo { color: var(--dl-azul-500); }
.dl-pt-destacado__fecha {
  display: block;
  margin-top: var(--dl-esp-sm);
  font-size: 0.82rem;
  color: var(--dl-tinta-suave);
}

/* La fila es la rejilla, no el enlace: así la firma se alinea sola con el
   titular y sigue fuera del enlace, que es como se pidió. */
.dl-pt-lista-mini li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--dl-esp-md);
  align-items: start;
  padding: var(--dl-esp-md) 0;
  border-top: 1px solid var(--dl-linea);
}
.dl-pt-lista-mini img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 187;
  object-fit: cover;
  border-radius: var(--dl-radio);
  background: var(--dl-azul-100);
}
.dl-pt-lista-mini__titulo {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dl-pt-lista-mini__titulo:hover { color: var(--dl-azul-500); }

.dl-pt-barra__pegada { position: sticky; top: 5rem; display: grid; gap: var(--dl-esp-lg); }

/* Los bloques laterales: cabecera con icono sobre fondo azul claro y filas
   que se encienden al pasar por encima. El icono es de Lucide, con el mismo
   trazo de 2px que los de la cabecera, para que no parezcan de dos juegos
   distintos. */
.dl-pt-caja {
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  background: var(--dl-superficie);
  overflow: hidden;
}
.dl-pt-caja h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.6rem var(--dl-esp-md);
  background: var(--dl-azul-100);
  border-bottom: 1px solid var(--dl-linea);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dl-azul-900);
}
.dl-pt-icono { flex: none; color: var(--dl-azul-700); }

.dl-pt-lista-simple li + li { border-top: 1px solid var(--dl-linea); }
.dl-pt-lista-simple a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dl-esp-sm);
  padding: 0.55rem var(--dl-esp-md);
  font-size: 0.9rem;
  line-height: 1.35;
  transition: background var(--dl-dur) var(--dl-ease);
}
.dl-pt-lista-simple a:hover { background: #F4F7FA; color: var(--dl-azul-500); }
.dl-pt-lista-simple em {
  flex: none;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--dl-tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* El ranking va numerado porque es un orden real (por visitas), no un adorno. */
.dl-pt-ranking { counter-reset: dl-top; }
.dl-pt-ranking li + li { border-top: 1px solid var(--dl-linea); }
.dl-pt-ranking a {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.55rem var(--dl-esp-md);
  font-size: 0.9rem;
  line-height: 1.35;
  transition: background var(--dl-dur) var(--dl-ease);
}
.dl-pt-ranking a::before {
  counter-increment: dl-top;
  content: counter(dl-top);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dl-azul-700);
  font-variant-numeric: tabular-nums;
}
.dl-pt-ranking a:hover { background: #F4F7FA; color: var(--dl-azul-500); }

/* El H1 sigue estando, pero no se ve.
   Se quito el titular de la portada para entrar directo a los articulos. Sin
   esto la portada se quedaria SIN NINGUN encabezado de primer nivel, que es
   justo el fallo que arreglo la pieza `portada-h1` (medido el 2026-09-02
   sobre el HTML servido: `grep -c "<h1"` daba 0). Asi que el H1 se queda
   para lectores de pantalla y buscadores, y no se pinta.
   `clip-path` ademas de `clip` porque `clip` esta obsoleto y Safari lo
   ignora en algunos casos. */
.dl-pt-h1-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Autoría y fecha. Texto, no enlace: es contexto, no un sitio al que ir.
   Va pegada al titular, no como un tercer bloque de metadatos: el usuario
   quitó la etiqueta de sección justo para que esto respirara. */
.dl-pt-firma {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--dl-tinta-suave);
}
/* La sección, con el azul de marca: es el dato que ubica el artículo, pero
   sigue siendo texto. */
.dl-pt-firma__seccion { color: var(--dl-azul-700); font-weight: 600; }
/* La fecha corta solo sale en móvil. Las dos van en el HTML porque la página
   se sirve cacheada e igual para todos: no hay forma de decidirlo en el
   servidor. */
.dl-pt-fecha-corta { display: none; }
.dl-pt-firma--destacado { margin-top: 0.45rem; margin-bottom: var(--dl-esp-xl); font-size: 0.85rem; }

/* ═══ 4 · Temas ═════════════════════════════════════════════════════════════ */

/* Las DIEZ materias, todas en bloque. Cinco por fila en escritorio: con seis
   grandes y cuatro en pastilla quedaban dos clases de sección, que es lo que
   el usuario corrigió. */
.dl-pt-bloque--temas { margin-top: var(--dl-esp-2xl); }
.dl-pt-temas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--dl-esp-md);
  margin-bottom: var(--dl-esp-2xl);
}
.dl-pt-tema {
  position: relative;
  display: block;
  border-radius: var(--dl-radio);
  overflow: hidden;
  background: var(--dl-azul-900);
  min-height: 150px;
}
.dl-pt-tema__foto { display: block; }
.dl-pt-tema img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* El azul de marca manda tambien encima de la foto: se apaga la imagen y se
     la tinta, para que seis fotos distintas no rompan la paleta. */
  filter: grayscale(0.35) brightness(0.55);
  transition: filter var(--dl-dur) var(--dl-ease);
}
.dl-pt-tema:hover img { filter: grayscale(0.15) brightness(0.65); }
/* La materia sin foto: en vez de un rectángulo azul vacío, un icono grande
   arriba. «Modelos y Plantillas» no tiene imagen destacada en ninguno de sus
   31 artículos, así que esta tarjeta es siempre así y tiene que parecer una
   decisión. */
.dl-pt-tema--sin-foto .dl-pt-tema__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  color: #4B7BA8;
}
.dl-pt-tema--sin-foto .dl-pt-icono { width: 34px; height: 34px; }
.dl-pt-tema--sin-foto .dl-pt-tema__texto { background: none; }

.dl-pt-tema__texto {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: var(--dl-esp-md);
  background: linear-gradient(to top, rgba(14, 58, 97, 0.92), rgba(14, 58, 97, 0));
  color: #fff;
}
.dl-pt-tema__nombre {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.dl-pt-tema__cuenta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: #C3D5E6;
  font-variant-numeric: tabular-nums;
}
.dl-pt-tema:focus-visible { outline: 2px solid var(--dl-foco); outline-offset: 3px; }

/* --- Móvil ----------------------------------------------------------------- */

@media (max-width: 980px) {
  .dl-pt-dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .dl-pt-barra__pegada { position: static; }
}

@media (max-width: 900px) {
  .dl-pt-materias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl-pt-teja--lider,
  .dl-pt-teja--ranking,
  .dl-pt-teja--recientes,
  .dl-pt-teja--modelos { grid-column: span 12; }
}

@media (max-width: 1080px) {
  .dl-pt-temas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .dl-pt-rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-pt-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl-pt-modelos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Móvil de verdad ------------------------------------------------------
   Medido con la página servida dentro de un iframe a 375 y a 320 px, no con
   una captura: Chrome sin ventana miente por debajo de ~485 px (renderiza a
   485 y recorta), así que las medias por debajo de eso no llegan a dispararse
   y se diagnostica un problema que no existe. */
@media (max-width: 600px) {
  /* A 320 px, «21 de febrero de 2025» mandaba la firma a tres líneas. */
  .dl-pt-fecha-larga { display: none; }
  .dl-pt-fecha-corta { display: inline; }

  /* El título y su fecha dejan de pelearse por el ancho: la fecha baja. */
  .dl-pt-lista-simple a { flex-wrap: wrap; gap: 0.15rem; }
  .dl-pt-lista-simple em { width: 100%; }

  /* Blancos de toque más generosos: son filas de un dedo, no de un ratón. */
  .dl-pt-lista-simple a,
  .dl-pt-ranking a { padding-block: 0.7rem; }
}

@media (max-width: 560px) {
  .dl-pt-intro h1 { font-size: 26px; padding-bottom: 14px; }
  .dl-pt-rejilla-3,
  .dl-pt-modelos ul { grid-template-columns: minmax(0, 1fr); }
  .dl-pt-temas,
  .dl-pt-materias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-pt-consulta,
  .dl-pt-modelos { padding: var(--dl-esp-md); }
  .dl-pt-buscador__caja { flex-wrap: wrap; padding: var(--dl-esp-sm); }
  .dl-pt-buscador input[type="search"] { flex-basis: 100%; padding-inline: 0.4rem; }
  .dl-pt-buscador button { width: 100%; }
  .dl-pt-lista-mini li { grid-template-columns: 92px minmax(0, 1fr); }
  .dl-pt-teja__titulo { font-size: 1.25rem; }
  .dl-pt-destacado__titulo { font-size: 1.3rem; }
  .dl-pt-lista-fechas a { flex-wrap: wrap; gap: 0.15rem; }
  .dl-pt-lista-fechas time { width: 100%; }
}