/* Sitio público de Pulso Py. Reglas de docs/10-DISENO.md:
   lienzo crema, serif para todo lo editorial, sans solo para el chrome,
   radio 0 (8px solo en fotos), SIN sombras, reglas de 1px y un único acento.
   Solo tokens de tokens.css: ningún color en crudo. Primero el celular. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.saltar {
  position: absolute;
  left: var(--spacing-16);
  top: -100px;
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-text);
  color: var(--color-surface);
  font-family: var(--font-ui);
}

.saltar:focus {
  top: var(--spacing-8);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Cabecera ---------- */

/* Márgenes laterales: 16px, o más si el iPhone tiene notch en esa orilla
   (viewport-fit=cover en la meta viewport). */
.cabecera,
.pagina,
.pie {
  padding-left: max(var(--spacing-16), env(safe-area-inset-left, 0px));
  padding-right: max(var(--spacing-16), env(safe-area-inset-right, 0px));
}

.cabecera {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
}

.cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8) var(--spacing-24);
  padding: var(--spacing-16) 0 var(--spacing-12);
  border-bottom: 1px solid var(--color-text);
}

/* En el celular, más chica: la primera pantalla es para las noticias. */
.marca {
  font-family: var(--font-editorial);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading-lg);
  text-decoration: none;
}

.cabecera-izq {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-width: 0;
}

/* Botón ☰: 44px para tocarlo bien con el dedo; borde de 1px, radio 0, sin sombra. */
.boton-menu {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-buttons);
  color: var(--color-text);
  background: transparent;
}

.boton-menu svg {
  width: 18px;
  height: 18px;
}

.boton-menu:hover {
  background: var(--color-surface-warm);
}

/* En el celular, la fecha corta ("Lun 19 oct") para que entre en la misma línea que el ☰
   y la marca. La larga queda para los lectores de pantalla. */
.fecha-larga {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cabecera-fecha {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--color-text-2);
}

/* Menú de secciones: en el celular se desliza de costado, no se apila. */
.secciones {
  display: flex;
  gap: var(--spacing-24);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-rule);
}

.secciones::-webkit-scrollbar {
  display: none;
}

.secciones a {
  flex: none;
  padding: var(--spacing-12) 0;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.secciones a:hover,
.secciones a[aria-current='page'] {
  border-bottom-color: var(--color-text);
}

/* ---------- Menú lateral ----------
   Entra desde la izquierda: 82% del ancho en el celular, 360px en pantallas grandes.
   Fondo crema, borde derecho de 1px negro, sin sombra; el velo crema aclara el resto. */

.menu[hidden],
.velo[hidden] {
  display: none;
}

.velo {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-canvas) 82%, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 21;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  width: min(82vw, 360px);
  padding: max(var(--spacing-16), env(safe-area-inset-top, 0px)) var(--spacing-20)
    max(var(--spacing-24), env(safe-area-inset-bottom, 0px)) max(var(--spacing-20), env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-canvas);
  border-right: 1px solid var(--color-text);
  transform: translateX(-101%);
  transition: transform 0.25s ease;
}

.menu-abierto .menu {
  transform: none;
}

.menu-abierto .velo {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .velo {
    transition: none;
  }
}

.menu-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding-bottom: var(--spacing-12);
  border-bottom: 1px solid var(--color-text);
}

.menu-cabecera .marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-heading-lg);
}

.menu-cerrar {
  min-height: 44px;
  padding: 0 var(--spacing-12);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-buttons);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  cursor: pointer;
}

.menu-grupo + .menu-grupo {
  margin-top: var(--spacing-20);
}

.menu-grupo-titulo {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-2);
}

.menu-lista,
.menu-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-lista > li {
  border-bottom: 1px solid var(--color-rule);
}

.menu-lista a,
.menu-lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: var(--spacing-8) 0;
  font-family: var(--font-editorial);
  font-size: var(--text-body);
  text-decoration: none;
  cursor: pointer;
}

.menu-lista a:hover,
.menu-lista summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.menu-lista summary {
  list-style: none;
}

.menu-lista summary::-webkit-details-marker {
  display: none;
}

.menu-lista summary::after {
  content: '›';
  font-family: var(--font-ui);
  transition: transform 0.2s ease;
}

.menu-lista details[open] > summary::after {
  transform: rotate(90deg);
}

.menu-sub {
  padding: 0 0 var(--spacing-8) var(--spacing-12);
}

.menu-sub li + li {
  border-top: 1px solid var(--color-rule);
}

.menu-sub a {
  font-size: var(--text-body);
}

/* /menu: la misma lista como página, para cuando no carga el JS. */
.menu-pagina {
  max-width: 480px;
}

/* ---------- Página ---------- */

.pagina {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-80);
}

/* ---------- Tipografía editorial ---------- */

.eyebrow {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-editorial);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.eyebrow a {
  text-decoration: none;
}

.eyebrow a:hover {
  text-decoration: underline;
}

/* Eyebrow con regla corta en el acento: el único lugar fijo del acento en el sitio. */
.eyebrow-regla {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-text);
  margin-bottom: var(--spacing-24);
}

.eyebrow-regla::before {
  content: '';
  width: 32px;
  height: 4px;
  background: var(--color-accent);
}

.titular-xl,
.titular-md,
.titular-sm {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-editorial);
  font-weight: 400;
  text-align: left;
}

.titular-xl {
  font-size: var(--text-heading-xl);
  line-height: var(--leading-heading-xl);
  letter-spacing: var(--tracking-heading-xl);
}

.titular-md {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.titular-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

.titular-xl a,
.titular-md a,
.titular-sm a {
  text-decoration: none;
}

.titular-xl a:hover,
.titular-md a:hover,
.titular-sm a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bajada {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
}

/* Metadatos en --color-text-2 (nunca text-3: no pasa contraste, ver 10-DISENO 5.1). */
.meta {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--color-text-2);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--spacing-24);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-buttons);
  background: var(--color-text);
  color: var(--color-surface);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  text-decoration: none;
}

.boton-secundario {
  background: transparent;
  color: var(--color-text);
}

/* ---------- Fotos (radio de 8px: la única excepción al radio 0) ---------- */

figure {
  margin: 0;
}

figure img {
  width: 100%;
  border-radius: var(--radius-cards);
}

figcaption {
  margin-top: var(--spacing-8);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--color-text-2);
}

/* ---------- Filas de diario (portada, secciones, relacionadas) ----------
   Texto a la izquierda y miniatura 3:2 a la derecha, solo si la nota tiene foto.
   El link del titular cubre toda la fila: se toca en cualquier parte (44px mínimo). */

.fila {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-12);
  min-height: 44px;
  padding: var(--spacing-12) 0;
  border-bottom: 1px solid var(--color-rule);
}

.fila-texto {
  flex: 1;
  min-width: 0;
}

.fila-eyebrow {
  margin-bottom: var(--spacing-4);
}

.fila-titular {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-editorial);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-heading-sm);
}

.fila-titular a {
  text-decoration: none;
}

.fila-titular a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.fila-titular a:focus-visible {
  outline: none;
}

.fila-titular a:focus-visible::after {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.fila:hover .fila-titular a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.fila .meta {
  margin-top: var(--spacing-4);
}

.fila-foto {
  flex: none;
  width: 84px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-cards);
}

/* Imagen generada con IA: la etiqueta «GENERADO CON IA» está abajo a la izquierda de la
   imagen; el recorte se ancla ahí para que nunca quede afuera. */
.fila-foto.foto-ia,
.franja-foto.foto-ia {
  object-position: left bottom;
}

/* Rayita en el acento delante del eyebrow: solo en las destacadas. */
.eyebrow-acento {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.eyebrow-acento::before {
  content: '';
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--color-accent);
}

/* ---------- Portada: franja de destacados ----------
   En el celular, los 3 entran en la primera pantalla (375 × 812 y 360 de ancho):
   la principal con foto 16:9 arriba y las otras dos como filas con miniatura. */

.franja {
  display: grid;
  margin-bottom: var(--spacing-24);
  border-bottom: 1px solid var(--color-text);
}

.franja-principal {
  position: relative;
  display: grid;
  gap: var(--spacing-8);
  align-items: start;
  padding-bottom: var(--spacing-12);
  border-bottom: 1px solid var(--color-rule);
}

.franja-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-cards);
}

.franja-texto .eyebrow {
  margin-bottom: var(--spacing-8);
}

.franja-titular {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-heading);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.franja-titular a {
  text-decoration: none;
}

.franja-titular a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.franja-titular a:focus-visible {
  outline: none;
}

.franja-titular a:focus-visible::after {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.franja-principal:hover .franja-titular a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* La bajada y la fecha de la principal no entran en la primera pantalla del celular. */
.franja-bajada,
.franja-texto .meta {
  display: none;
}

.franja-lado .fila:last-child {
  border-bottom: 0;
}

/* ---------- Portada: lista y barra lateral ---------- */

.portada-cuerpo {
  display: grid;
  gap: var(--spacing-40);
}

.lista .eyebrow-regla {
  margin-bottom: 0;
}

/* En la portada la franja ya cierra con la regla negra: la lista no repite otra. */
.portada-cuerpo .lista .eyebrow-regla {
  padding-top: 0;
  border-top: 0;
}

.lateral {
  display: none;
  gap: var(--spacing-24);
  align-content: start;
}

.lateral-bloque {
  padding: var(--spacing-16);
  border: 1px solid var(--color-rule);
  background: var(--color-surface-warm);
}

.lateral-bloque p:not(.eyebrow) {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-body);
}

.lateral-bloque p:last-child {
  margin-bottom: 0;
}

.lateral-secciones ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-rule);
}

.lateral-secciones li {
  border-bottom: 1px solid var(--color-rule);
}

.lateral-secciones a {
  display: block;
  padding: var(--spacing-12) 0;
  text-decoration: none;
}

.lateral-secciones a:hover {
  text-decoration: underline;
}

/* Con pocas notas (todas en la franja) no hay lista: la barra lateral va a lo ancho, en
   columnas, sin dejar una columna vacía al lado. */
.portada-sin-lista .lateral {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---------- Publicidad ----------
   Medida fija (la página no salta al cargar), siempre con la etiqueta, nunca pegada a la
   pantalla ni tapando nada. Un espacio sin aviso no se dibuja. */

.aviso {
  display: grid;
  justify-items: center;
  gap: var(--spacing-4);
  margin: var(--spacing-24) 0;
}

.aviso-etiqueta {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-2);
}

.aviso a {
  display: block;
  max-width: 100%;
}

.aviso img {
  max-width: 100%;
  height: auto;
}

.aviso-banner-arriba img,
.aviso-banner-lista img {
  width: 728px;
  aspect-ratio: 728 / 90;
}

.aviso-lateral img,
.aviso-celular img {
  width: 300px;
  aspect-ratio: 300 / 250;
}

.lista .aviso {
  margin: 0;
  padding: var(--spacing-16) 0;
  border-bottom: 1px solid var(--color-rule);
}

/* ---------- Recuadro "Pulso Py para candidatos" ----------
   Vende el servicio, nunca a un candidato (regla 6). Fondo cálido y regla de 3px en el
   acento; botón negro. */

.casa {
  display: grid;
  justify-items: start;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background: var(--color-surface-warm);
  border-top: 3px solid var(--color-accent);
}

.casa-eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-2);
}

.casa-titular {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

.casa-texto {
  margin: 0;
}

.casa-boton {
  margin-top: var(--spacing-4);
}

.lista .casa {
  margin: var(--spacing-16) 0;
}

.menu-casa {
  margin-top: var(--spacing-24);
}

.candidatos-contacto {
  margin: var(--spacing-32) 0 0;
}

/* ---------- Tableta: la barra lateral como franja después de la 5.ª nota ---------- */

.franja-lateral {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-24);
  align-items: start;
  padding: var(--spacing-24) 0;
  border-bottom: 1px solid var(--color-rule);
}

.franja-lateral .aviso {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---------- Qué se ve en cada tamaño ---------- */

@media (max-width: 767px) {
  .desde-tableta,
  .solo-tableta {
    display: none;
  }
}

@media (min-width: 768px) {
  .solo-celular {
    display: none;
  }
}

@media (min-width: 1025px) {
  .solo-tableta {
    display: none;
  }

  .lateral {
    display: grid;
  }
}

.relacionadas {
  max-width: 680px;
  margin-top: var(--section-gap);
}

.relacionadas .eyebrow-regla {
  margin-bottom: 0;
}

/* ---------- Nota ---------- */

.nota {
  max-width: 680px;
}

.nota-cabecera .titular-xl {
  margin-bottom: var(--spacing-16);
}

.nota-cabecera .bajada {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.nota-cabecera {
  padding-bottom: var(--spacing-16);
  margin-bottom: var(--spacing-24);
  border-bottom: 1px solid var(--color-rule);
}

.nota-foto {
  margin-bottom: var(--spacing-24);
}

/* La tarjeta es crema como el lienzo: la regla de 1px la separa del fondo. */
.nota-tarjeta img {
  border: 1px solid var(--color-rule);
}

/* Cuerpo a 18px, no 16px: el público lee en el celular (10-DISENO 5.1). */
.nota-cuerpo {
  font-size: var(--text-subheading);
  line-height: 1.55;
}

.nota-cuerpo p,
.nota-cuerpo ul,
.nota-cuerpo ol {
  margin: 0 0 var(--spacing-20);
}

.nota-cuerpo h2 {
  margin: var(--spacing-32) 0 var(--spacing-12);
  font-size: var(--text-heading-sm);
  font-weight: 400;
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

.nota-cuerpo a {
  text-underline-offset: 3px;
}

.nota-fuentes {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-text);
}

.nota-fuentes ul {
  margin: 0;
  padding-left: var(--spacing-20);
}

.nota-fuentes li {
  margin-bottom: var(--spacing-8);
  overflow-wrap: anywhere;
}

.compartir {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-32);
}

.nota-aviso {
  margin: var(--spacing-32) 0 0;
  padding: var(--spacing-16);
  border: 1px solid var(--color-rule);
  background: var(--color-surface-warm);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

/* ---------- Preguntas frecuentes ----------
   Desplegables sin JS (<details>): la pregunta en serif, un "+" que pasa a "−" al abrirse,
   reglas de 1px, 44px mínimo para tocar. */

.faq-grupo {
  margin-top: var(--spacing-32);
}

/* El primer grupo ya abre con la regla negra: sin la gris de la cabecera encima. */
.preguntas .nota-cabecera {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.faq-grupo .eyebrow-regla {
  margin-bottom: 0;
}

.faq {
  border-bottom: 1px solid var(--color-rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-height: 44px;
  padding: var(--spacing-12) 0;
  font-family: var(--font-editorial);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--text-heading-sm);
  line-height: 1;
}

.faq[open] > summary::after {
  content: '−';
}

.faq summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.faq-respuesta {
  padding-bottom: var(--spacing-16);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.faq-respuesta p {
  margin: 0 0 var(--spacing-12);
}

.faq-respuesta p:last-child {
  margin-bottom: 0;
}

.faq-aviso {
  margin: var(--spacing-32) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--color-text-2);
}

/* ---------- Sección ---------- */

.seccion-cabecera {
  padding-bottom: var(--spacing-16);
  margin-bottom: var(--spacing-8);
  border-bottom: 1px solid var(--color-text);
}

.lista-seccion {
  max-width: 760px;
}

/* ---------- Pie ---------- */

/* Mismo ancho que la cabecera: la regla negra va dentro del margen de 16px. */
.pie {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-bottom: max(var(--spacing-40), env(safe-area-inset-bottom, 0px));
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  color: var(--color-text-2);
}

.pie-interior {
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-text);
}

.pie p {
  margin: 0 0 var(--spacing-8);
}

.pie-marca {
  font-family: var(--font-editorial);
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
}

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin: var(--spacing-12) 0;
}

.pie-enlaces a {
  color: var(--color-text);
}

/* ---------- Pantallas más anchas ---------- */

@media (min-width: 640px) {
  .titular-xl {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
  }
}

/* Tableta (768 a 1024): la franja en dos columnas (principal | las otras dos), con la
   foto al lado del titular; la lista a lo ancho. */
@media (min-width: 768px) {
  .fecha-larga {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .fecha-corta {
    display: none;
  }

  .marca {
    font-size: var(--text-display);
    letter-spacing: var(--tracking-display);
  }

  .cabecera-fila {
    padding: var(--spacing-20) 0 var(--spacing-16);
  }

  .pagina {
    padding-top: var(--spacing-24);
  }

  .franja {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    padding-bottom: var(--spacing-16);
  }

  .franja-principal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-16);
    padding: 0 var(--spacing-20) 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--color-rule);
  }

  .franja-sin-foto {
    grid-template-columns: minmax(0, 1fr);
  }

  .franja-titular {
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
  }

  .franja-bajada,
  .franja-texto .meta {
    display: block;
  }

  .franja-bajada {
    margin: var(--spacing-8) 0;
    color: var(--color-text-2);
  }

  .franja-lado {
    padding-left: var(--spacing-20);
  }

  .franja-lado .fila:first-child {
    padding-top: 0;
  }

  .fila-titular {
    font-size: var(--text-subheading);
  }

  .lista .fila-foto-lista,
  .lista-seccion .fila-foto-lista,
  .relacionadas .fila-foto-lista {
    width: 112px;
    height: 75px;
  }
}

/* Escritorio (desde 1025, también la tableta acostada): la principal con la foto de
   320px al lado del texto; abajo la lista y la barra lateral, separadas por una regla. */
@media (min-width: 1025px) {
  .pagina {
    padding-top: var(--spacing-32);
  }

  .franja {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  .franja-principal {
    grid-template-columns: 320px minmax(0, 1fr);
    padding-right: var(--spacing-24);
  }

  .franja-sin-foto {
    grid-template-columns: minmax(0, 1fr);
  }

  .franja-titular {
    font-size: var(--text-heading-lg);
    line-height: var(--leading-heading-lg);
    letter-spacing: var(--tracking-heading-lg);
  }

  .franja-lado {
    padding-left: var(--spacing-24);
  }

  .portada-cuerpo {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0;
  }

  .portada-cuerpo .lista {
    padding-right: var(--spacing-24);
  }

  .portada-sin-lista {
    grid-template-columns: minmax(0, 1fr);
  }

  .portada-sin-lista .lateral {
    padding-left: 0;
    border-left: 0;
  }

  .lateral {
    padding-left: var(--spacing-24);
    border-left: 1px solid var(--color-rule);
  }

  .lista .fila-titular {
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
  }
}