/* SPDX-License-Identifier: AGPL-3.0-or-later
   Maqueta de diario: mancheta centrada, filete doble y una portada que se compone
   según las piezas que haya: la principal a todo el ancho y el resto en filas. */

.cabecera, .portada, .pie, .articulo, .eleccion { width: min(76rem, 100% - 2rem); margin-inline: auto; }

/* Cabecera */
.cabecera { padding-top: 0.9rem; text-align: center; }
.cabecera-fila {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  font-size: 0.95rem; color: var(--tinta-2);
}
.cabecera-fila .cuando { justify-self: start; text-align: left; }
.cabecera-fila .controles { justify-self: end; }
/* «Año I · Núm. 1»: el año de la cabecera clásica y, rodeado, el número */
.edicion-num { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 1.05rem; }
.numero { position: relative; padding: 0.3rem 0.9rem; white-space: nowrap; font-size: 1.05rem; }
.numero b { font-weight: 600; color: var(--tinta); }
/* Lo nuevo del día, rodeado a mano con el bolígrafo rojo */
.numero::after {
  content: ""; position: absolute; inset: -0.45rem -0.4rem;
  background: var(--rojo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50' preserveAspectRatio='none'%3E%3Cpath d='M70 6C40 3 8 10 6 25s30 21 58 20 52-6 51-21S88 3 52 8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50' preserveAspectRatio='none'%3E%3Cpath d='M70 6C40 3 8 10 6 25s30 21 58 20 52-6 51-21S88 3 52 8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.mancheta {
  margin: 0.6rem 0 0.1rem;
  font-size: clamp(2.6rem, 9vw, 6.2rem);
  font-weight: 800; font-variation-settings: "opsz" 72;
  letter-spacing: -0.025em; line-height: 0.95;
}
.mancheta a { color: inherit; text-decoration: none; }
.lema { margin: 0.4rem auto 0; font-style: italic; color: var(--tinta-2); font-size: 1.05rem; max-width: 40rem; }
/* Barra de secciones bajo la mancheta, entre el filete doble y uno sencillo */
.secciones {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.6rem; flex-wrap: wrap;
  margin-top: 0.8rem; padding: 0.45rem 0;
  border-top: 3px solid var(--tinta); box-shadow: 0 -6px 0 -4px var(--papel), 0 -7px 0 -4px var(--tinta);
  border-bottom: 1px solid var(--tinta);
  font-size: 1rem;
}
.secciones-lista { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.secciones a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.secciones a:hover { text-decoration: underline; }
.secciones a[aria-current] { color: var(--sec, var(--azul)); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.secciones .quees { font-weight: 400; font-style: italic; color: var(--tinta-2); }
/* Navegación entre días, debajo de la barra, solo donde hace falta */
.navegacion { display: flex; gap: 1.4rem; padding: 0.4rem 0; border-bottom: 1px solid var(--filete); font-size: 0.95rem; }
.navegacion .sig { margin-left: auto; }

/* Rótulos de las piezas */
.seccion a { color: inherit; text-decoration: none; }
.seccion a:hover { text-decoration: underline; }
.seccion { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.2rem; color: var(--azul); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; }
.fecha-pieza { color: var(--tinta-2); font-weight: 400; font-style: italic; white-space: nowrap; }
.antetitulo { margin: 0; font-style: italic; color: var(--tinta-2); }
.titular { margin: 0.15rem 0 0.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; hyphens: manual; }
.titular a { color: var(--tinta); text-decoration: none; }
.titular a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.entradilla { margin: 0; color: var(--tinta); }

/* Portada */
.portada { padding-top: 1.6rem; }
.principal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.6rem; align-items: center; }
.principal .texto { grid-column: 1; grid-row: 1; }
.principal .ilu { grid-column: 2; grid-row: 1; margin: 0; background: var(--papel-2); padding: 1rem; }
.principal:not(:has(.ilu)) .texto { grid-column: 1 / -1; max-width: 48rem; }
.principal .titular { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-variation-settings: "opsz" 60; }
.principal .entradilla { font-size: 1.22rem; line-height: 1.5; }

.fila {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 1.8rem 2.4rem;
  margin-top: 1.8rem; padding-top: 1.3rem; border-top: 3px solid var(--tinta);
}
.fila-menores { border-top-width: 1px; }
.destacada .ilu { margin: 0 0 0.9rem; background: var(--papel-2); padding: 0.6rem; }
/* Una destacada sola (un día de archivo con dos piezas) se compone como la apertura, no a todo el ancho */
.fila.sola .destacada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.6rem; align-items: center; }
.fila.sola .destacada .ilu { order: 2; margin: 0; }
.destacada .titular { font-size: 1.45rem; }
.menor .titular { font-size: 1.2rem; }
.menor .entradilla { font-size: 1rem; color: var(--tinta-2); }
.breves h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.breves ul { margin: 0; padding: 0; list-style: none; font-size: 0.98rem; }
.breves li { padding: 0.5rem 0; border-top: 1px solid var(--filete); }
.breves li:first-child { border-top: 0; padding-top: 0; }
.breves .fecha-pieza { display: block; font-size: 0.88rem; }

/* Artículo */
.articulo { max-width: 44rem; padding-top: 2rem; }
.articulo .titular { font-size: clamp(2rem, 5vw, 2.9rem); font-variation-settings: "opsz" 60; margin-top: 0.3rem; }
.articulo .entradilla { font-size: 1.3rem; line-height: 1.45; margin-bottom: 1.4rem; color: var(--tinta-2); }
.articulo .ilu { margin: 0 0 1.6rem; background: var(--papel-2); padding: 1rem; }
.cuerpo p { margin: 0 0 1rem; line-height: 1.7; }
.cuerpo p.capitular::first-letter {
  float: left; font-size: 3.7em; line-height: 0.82; font-weight: 700;
  padding: 0.08em 0.1em 0 0; font-variation-settings: "opsz" 72;
}
.origen { margin-top: 1.4rem; font-style: italic; }
.volver { margin: 2rem 0 0; }
/* Compartir: el menú del dispositivo o, si no lo hay, el enlace copiado */
.acciones { margin: 1.2rem 0 0; }
.compartir {
  appearance: none; display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--tinta); border-radius: 999px; background: transparent; color: var(--tinta);
  padding: 0.4rem 1rem; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.compartir:hover { background: var(--papel-2); }
.compartir .ico { width: 1.1em; height: 1.1em; }
/* En un breve, solo el icono, al final de sus enlaces; al copiar, el aviso aparece a su lado */
.compartir.solo-icono {
  border: 0; padding: 0.15rem 0.25rem; margin-left: 0.15rem; border-radius: 4px;
  color: var(--tinta-2); font-weight: 400; font-size: 0.88rem; vertical-align: -0.1em; gap: 0.3rem;
}
.compartir.solo-icono:hover { color: var(--tinta); background: var(--papel-2); }
.compartir.solo-icono .ico { width: 1em; height: 1em; }
.compartir.solo-icono span:empty { display: none; }
.compartir.solo-icono.hecho { color: var(--tinta); }
@media (pointer: coarse) { .compartir.solo-icono { padding: 0.4rem 0.5rem; margin: -0.25rem 0 -0.25rem 0; } }  /* que el dedo lo acierte */
/* La página de un breve */
.breve-pagina .breve-texto { font-size: 1.35rem; line-height: 1.5; margin: 0.4rem 0 0.8rem; }
.breve-pagina .breve-enlaces { margin: 0; }
/* «Más en esta sección», al pie del artículo */
.mas { margin-top: 2.4rem; padding-top: 1rem; border-top: 3px solid var(--sec, var(--tinta)); }
.mas h2 { margin: 0 0 0.6rem; font-size: 1.2rem; color: var(--sec, var(--tinta)); }
.mas ul { margin: 0; padding: 0; list-style: none; }
.mas li { padding: 0.45rem 0; border-top: 1px solid var(--filete); }
.mas li:first-child { border-top: 0; padding-top: 0; }
.mas .fecha-pieza { display: block; font-size: 0.88rem; }
.mas a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.mas a:hover { text-decoration: underline; }

/* Hemeroteca: todos los números, por meses */
.hemeroteca { max-width: 44rem; }
.hemeroteca h2 { margin: 1.8rem 0 0.4rem; font-size: 1.3rem; }
.hemeroteca ul { margin: 0; padding: 0; list-style: none; }
.hemeroteca li { padding: 0.55rem 0; border-top: 1px solid var(--filete); }
.hemeroteca li a { font-weight: 600; color: var(--tinta); text-decoration: none; }
.hemeroteca li a:hover { text-decoration: underline; }
.hemeroteca .num { color: var(--tinta-2); font-style: italic; }
.hemeroteca .abre { display: block; color: var(--tinta-2); font-size: 0.98rem; }
.pie-hemeroteca { margin-top: 0.5rem; }

/* Página no encontrada */
.no-existe { max-width: 40rem; padding: 3rem 0; text-align: center; }
.no-existe .titular { font-size: clamp(2rem, 5vw, 2.9rem); }
.no-existe p { line-height: 1.6; }
.no-existe .ca { font-style: italic; color: var(--tinta-2); }

/* Pie */
.pie {
  display: grid; grid-template-columns: 1.3fr 0.9fr 1.3fr; gap: 1.5rem 2.2rem;
  margin-top: 3rem; padding: 1.4rem 0 2.5rem;
  border-top: 3px solid var(--tinta);
  font-size: 0.95rem; color: var(--tinta-2);
}
.pie h2 { margin: 0 0 0.4rem; font-size: 1.1rem; color: var(--tinta); }
.pie p { margin: 0 0 0.6rem; }
.pie ul { margin: 0; padding-left: 1.1rem; }
.pie [aria-current] { font-weight: 600; text-decoration: none; color: var(--tinta); }

/* Página de elección de maqueta */
.eleccion { max-width: 40rem; padding: 3rem 0; text-align: center; }
.eleccion ul { text-align: left; line-height: 1.7; }

@media (max-width: 60rem) {
  .fila { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  /* En una columna, el dibujo va antes del titular, como en el papel */
  .principal { grid-template-columns: 1fr; }
  .principal .texto, .principal .ilu { grid-column: 1; }
  .principal .ilu { grid-row: 1; }
  .principal .texto { grid-row: 2; }
  .fila.sola .destacada { grid-template-columns: 1fr; }
  .fila.sola .destacada .ilu { order: 0; margin-bottom: 0.9rem; }
  .pie { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .fila { grid-template-columns: 1fr; row-gap: 0; }
  .fila > * + * { padding-top: 1.2rem; border-top: 1px solid var(--filete); }
}
@media (max-width: 34rem) {
  .cabecera-fila { grid-template-columns: 1fr auto; }
  .cabecera-fila .cuando { grid-column: 1 / -1; grid-row: 2; text-align: center; justify-self: center; }
  .cabecera-fila .edicion-num { justify-self: start; }
  .principal .ilu, .articulo .ilu { padding: 0.5rem; }
}

/* Página «Qué es» */
.que-es h2 { font-size: 1.5rem; margin: 2rem 0 0.5rem; }
.que-es h2:first-child { margin-top: 0; }
.que-es p { line-height: 1.7; }

/* La viñeta, a todo el ancho entre las destacadas y el resto */
.vineta { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 3px solid var(--tinta); }
.vineta-titulo { display: flex; justify-content: space-between; margin: 0 0 0.8rem; font-size: 1.25rem; font-style: italic; font-weight: 600; }
.vineta-origen { margin: 0.6rem 0 0; font-size: 0.95rem; color: var(--tinta-2); font-style: italic; }

/* Páginas de sección */
.titulo-seccion { margin: 0 0 0.4rem; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; font-variation-settings: "opsz" 72; letter-spacing: -0.02em; }
.titulo-seccion .ico { width: 0.8em; height: 0.8em; color: var(--sec, var(--azul)); }
.fila-seccion { margin-top: 0.8rem; }
.vacio { color: var(--tinta-2); font-style: italic; }
.pag-seccion .vineta:first-of-type { margin-top: 0.8rem; }
@media (max-width: 40rem) {
  /* En el móvil, la cabecera deja ver la primera noticia: sin lema, las secciones en una fila
     que se desliza y «La redacción» solo en el pie */
  .lema { display: none; }
  .secciones { padding-bottom: 0; }
  .secciones .quees { display: none; }
  .secciones-lista {
    position: relative; flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; gap: 1.3rem;
    overflow-x: auto; padding: 0.1rem 0 0.55rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .secciones-lista::-webkit-scrollbar { display: none; }
  .secciones-lista a { flex: 0 0 auto; }
}

/* Portada por bloques de sección: el título a la izquierda, en su color, sobre un filete de su color */
.bloque {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem 2.4rem;
  margin-top: 1.8rem; padding-top: 1rem; border-top: 3px solid var(--sec, var(--tinta));
}
.bloque-titulo { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.bloque-titulo a { color: var(--sec, var(--tinta)); text-decoration: none; }
.bloque-titulo a:hover { text-decoration: underline; }
.bloque-titulo .ico { width: 0.9em; height: 0.9em; }
.bloque-piezas { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1.6rem 2.2rem; }
/* Una pieza sola no se estira a todo el ancho: líneas de lectura como las de una columna */
.bloque-piezas > * { max-width: 38rem; }
.bloque .breve { font-size: 0.98rem; }
.bloque .breve .fecha-pieza { display: block; font-size: 0.88rem; }
/* La viñeta, con el amarillo del subrayador */
.vineta { border-top-color: var(--sec, var(--tinta)); }
.vineta-titulo { color: var(--sec, var(--tinta)); }
/* El rótulo de sección, en su color; la apertura y las destacadas, con un filete fino de su color */
.principal .texto { border-top: 4px solid var(--sec, transparent); padding-top: 0.8rem; }
@media (max-width: 52rem) {
  .bloque { grid-template-columns: 1fr; gap: 0.8rem; }
  .bloque-piezas { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .bloque-piezas { grid-template-columns: 1fr; gap: 0; }
  .bloque-piezas > * + * { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--filete); }
}

/* Subtítulo de la viñeta */
.vineta-sub { display: block; margin-top: 0.15rem; font-size: 0.95rem; font-weight: 400; color: var(--tinta-2); }
.vineta-sub-pagina { margin: 0 0 0.6rem; font-style: italic; color: var(--tinta-2); font-size: 1.1rem; }

/* «Desde la redacción»: la presentación del número 1, en una franja a todo el ancho */
.editorial {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.6rem; align-items: center;
  margin-bottom: 1.8rem; padding: 1.4rem 1.6rem; background: var(--papel-2); border-left: 5px solid var(--rojo);
}
.editorial .antetitulo { color: var(--rojo); font-style: italic; }
.editorial .titular { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0.2rem 0 0.5rem; }
.editorial .entradilla { font-size: 1.1rem; line-height: 1.5; }
.editorial .leer { margin: 0.8rem 0 0; font-weight: 600; }
.editorial .ilu { margin: 0; }
.presentacion { margin-top: 2rem; font-weight: 600; }
@media (max-width: 52rem) { .editorial { grid-template-columns: 1fr; padding: 1.1rem; } }

/* «La redacción» */
.redaccion > .titular { font-size: clamp(2.2rem, 5vw, 3rem); font-variation-settings: "opsz" 72; margin: 0 0 0.5rem; }
.redaccion > .ilu { margin: 1.2rem 0 1.6rem; background: var(--papel-2); padding: 1rem; }
.equipo { padding-left: 1.2rem; line-height: 1.6; }
.equipo li { margin: 0.35rem 0; }