/* ==========================================================================
   La Futura · «Periódico de barrio» · plantillas.css
   Secciones 4, 5, 19 y 20 de docs/maquetas/periodico-de-barrio/lafutura.css
   (retícula de 12 columnas y medianiles, pila, portadilla de sección y noticia),
   con los mismos nombres y valores, y lo que el tema añade para los archivos
   sin maqueta. Antes de la noticia, el rescate del contenido guardado en
   .lf-cuerpo. Es la última hoja: va después de componentes.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   4. Retícula y medianiles (5.1)
   -------------------------------------------------------------------------- */
.lf-reticula{display:grid;grid-template-columns:minmax(0,1fr)}
@media (max-width:979px){
  /* móvil: columnas apiladas con filete */
  .lf-reticula:not(.lf-reticula--carrusel)>*+*{border-top:var(--filete);margin-top:var(--espacio-6);padding-top:var(--espacio-6)}
  .lf-banda--negra .lf-reticula:not(.lf-reticula--carrusel)>*+*{border-top:var(--filete-oscuro)}
  .lf-reticula:not(.lf-reticula--carrusel)>.lf-columna--caja{border-top:0;padding-top:var(--espacio-5)}
  /* carrusel (Internacional y Opinión): tarjetas de 279 px a 390 */
  .lf-reticula.lf-reticula--carrusel{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:var(--espacio-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margen-lateral);scrollbar-width:none;margin-inline:calc(var(--margen-lateral) * -1);padding-inline:var(--margen-lateral)}
  .lf-reticula.lf-reticula--carrusel::-webkit-scrollbar{display:none}
  .lf-reticula.lf-reticula--carrusel>*{scroll-snap-align:start}
  .lf-reticula--carrusel .lf-pieza__extracto{-webkit-line-clamp:2}
}
@media (min-width:980px){
  .lf-reticula{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);row-gap:var(--espacio-8);align-items:stretch}
  .lf-c3{grid-column:span 3}
  .lf-c4{grid-column:span 4}
  .lf-c6{grid-column:span 6}
  .lf-c8{grid-column:span 8}
  .lf-c12{grid-column:1 / -1}
  /* posiciones explícitas cuando el orden del DOM (el del móvil) no coincide con el de escritorio */
  .lf-col-1-3{grid-column:1 / span 3;grid-row:1}
  .lf-col-4-6{grid-column:4 / span 3;grid-row:1}
  .lf-col-7-9{grid-column:7 / span 3;grid-row:1}
  .lf-col-10-12{grid-column:10 / span 3;grid-row:1}
  .lf-col-1-4{grid-column:1 / span 4;grid-row:1}
  .lf-col-5-8{grid-column:5 / span 4;grid-row:1}
  .lf-col-9-12{grid-column:9 / span 4;grid-row:1}
  .lf-col-1-6{grid-column:1 / span 6;grid-row:1}
  .lf-col-7-12{grid-column:7 / span 6;grid-row:1}
  .lf-col-1-8{grid-column:1 / span 8;grid-row:1}
  .lf-medianil{position:relative}
  .lf-medianil::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--hueco) / -2);border-left:var(--filete)}
  :is(.lf-banda--negra,.lf-colofon) .lf-medianil::before{border-left:var(--filete-oscuro)}
}
/* Entre 980 y 1199: 3|3|3|3 pasa a 6|6 en dos filas; 6|3|3 pasa a 8|4 con la tercera zona debajo */
@media (min-width:980px) and (max-width:1199px){
  .lf-c3:not([class*="lf-col-"]){grid-column:span 6}
  .lf-c6:not([class*="lf-col-"]){grid-column:span 8}
  .lf-c6+.lf-c3:not([class*="lf-col-"]){grid-column:span 4}
  .lf-c6+.lf-c3+.lf-c3:not([class*="lf-col-"]){grid-column:1 / -1}
  .lf-medianil.lf-c3:nth-child(odd)::before{display:none}
}
/* Filas: dos pilas vecinas (de dos piezas) junto a una pieza grande. La primera pieza
   de cada pila ocupa la fila 1 y la segunda la fila 2, así que los filetes de las
   pilas caen a la misma altura. Desde 1200 px, cuando las zonas van en una sola fila. */
@media (min-width:1200px){
  .lf-reticula--filas{grid-template-rows:auto 1fr;row-gap:0}
  .lf-reticula--filas>*{grid-row:1 / span 2}
  .lf-reticula--filas>.lf-pila{display:grid;grid-template-rows:subgrid;row-gap:0}
}


/* --------------------------------------------------------------------------
   5. Pila: piezas apiladas en una columna (5.2)
   -------------------------------------------------------------------------- */
.lf-pila{display:flex;flex-direction:column}
.lf-pila>*+*{border-top:var(--filete);margin-top:var(--espacio-6);padding-top:var(--espacio-6)}
.lf-banda--negra .lf-pila>*+*{border-top:var(--filete-oscuro)}
@media (min-width:980px){
  /* hueco fijo, 32 encima y 32 debajo del filete; el pie de la columna queda libre
     (los medianiles a toda altura ya cierran la retícula) */
  .lf-pila>*+*{margin-top:var(--espacio-7);padding-top:var(--espacio-7)}
  /* Pila que reparte: SOLO para una pila sola junto a la apertura (columna 2 de la
     primera plana), que tiene que llegar al pie de la foto. El filete queda centrado
     en el hueco que sobra en cada pieza, nunca pegado a la de abajo; si no sobra
     nada, 32 y 32 como las demás. Las hijas tienen que ser flex en columna
     (.lf-pieza ya lo es). El doble .lf-pila gana a .lf-banda--negra .lf-pila>*+*. */
  .lf-pila.lf-pila--reparte>*+*{border-top:0;margin-top:0;padding-top:var(--espacio-7)}
  .lf-pila.lf-pila--reparte>:not(:last-child){flex-grow:1}
  .lf-pila.lf-pila--reparte>:not(:last-child)::after{content:"";order:99;margin-block:auto;padding-top:var(--espacio-7);border-bottom:var(--filete)}
  .lf-banda--negra .lf-pila.lf-pila--reparte>:not(:last-child)::after{border-bottom:var(--filete-oscuro)}
}


/* --------------------------------------------------------------------------
   19. Portadilla de sección (5.16)
   -------------------------------------------------------------------------- */
.lf-portadilla__rejilla{padding-block:var(--espacio-8) var(--espacio-7);border-bottom:var(--filete-negro)}
.lf-portadilla__ante{display:block;margin-bottom:var(--espacio-3);font:800 11px/1 var(--f-rot);letter-spacing:.08em;text-transform:uppercase;color:var(--suau)}
.lf-portadilla__titulo{margin:0;font:800 var(--r-port)/.95 var(--f-rot);letter-spacing:-.01em;text-transform:uppercase}
.lf-portadilla__dato{margin:var(--espacio-3) 0 0;font:500 15px/1.4 var(--f-txt);color:var(--suau);text-wrap:balance}
@media (min-width:980px){
  /* last baseline: el dato cae sobre la línea base del H1 (end alineaba las cajas) */
  .lf-portadilla__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);align-items:last baseline}
  .lf-portadilla__ante{grid-column:1 / -1}
  .lf-portadilla__titulo{grid-column:1 / span 8}
  /* a la derecha: acaba en el borde del contenedor, como el lema de la mancheta y del colofón */
  .lf-portadilla__dato{grid-column:9 / span 4;margin:0;font:400 20px/1.3 var(--f-disp);font-synthesis:none;color:var(--n);text-align:right}
  /* con la subnavegación de distritos debajo, una sola raya negra: el techo de la rejilla */
  .lf-portadilla:has(+nav .lf-distritos--claro) .lf-portadilla__rejilla{border-bottom:0}
  .lf-portadilla+nav .lf-distritos--claro{border-top:var(--filete-negro)}
}


/* --------------------------------------------------------------------------
   Archivos sin maqueta (barrio y tema, Opinión, autor, búsqueda, página y 404),
   con las piezas de la portadilla, el río, las placas y el cuerpo de la noticia
   -------------------------------------------------------------------------- */
/* «← Barcelona · Distrito 06»: la vuelta a la sección, como la miga de la noticia;
   objetivo táctil de 44 px sin mover el texto */
a.lf-portadilla__ante{position:relative;justify-self:start;width:fit-content;text-decoration:none}
a.lf-portadilla__ante:hover{color:var(--n);text-decoration:underline 2px var(--y);text-underline-offset:4px}
a.lf-portadilla__ante::after{content:"";position:absolute;inset:-17px -8px}
/* los acentos de las mayúsculas del H1 (GRÀCIA, SANT MARTÍ) suben por encima de su
   línea de .95: con 12 px, en escritorio la tilde toca la línea de encima */
.lf-portadilla__ante{margin-bottom:var(--espacio-4)}
/* el tema que se ve, en el índice de su sección */
.lf-temas a[aria-current="page"]{font-weight:700;text-decoration:underline 3px var(--y);text-underline-offset:5px}
/* autor: retrato encima del H1, biografía debajo y, en la búsqueda, el formulario */
.lf-portadilla__avatar{width:72px;height:72px;margin-bottom:var(--espacio-4);border-radius:50%;object-fit:cover;filter:grayscale(1);background:var(--gc);border:1px solid var(--linia)}
.lf-portadilla__bio{margin:var(--espacio-4) 0 0;max-width:var(--medida);font:400 16px/1.5 var(--f-txt);color:var(--suau)}
.lf-portadilla__rejilla>.lf-buscar{max-width:560px;margin-top:var(--espacio-6)}
@media (min-width:980px){
  .lf-portadilla__ante{margin-bottom:var(--espacio-6)}
  .lf-portadilla__avatar{grid-column:1 / -1;width:96px;height:96px}
  .lf-portadilla__bio{grid-column:1 / span 8;font-size:17px}
  .lf-portadilla__rejilla>.lf-buscar{grid-column:1 / span 8}
}
/* Opinión: las columnas en placas, en rejilla sobre la banda gris (4 por fila en 1240, 1 en el móvil) */
.lf-placas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr));gap:var(--hueco)}
/* archivo sin noticias o búsqueda sin resultados, al ancho del río */
.lf-vacio{max-width:811px;margin-top:var(--espacio-8)}
.lf-vacio__titulo{margin:0 0 var(--espacio-2);font:400 var(--t-3)/1.15 var(--f-disp);font-synthesis:none}
.lf-vacio p{margin:0;color:var(--suau)}
/* Página estática y 404: título en Bagnard, como el de la noticia, y el cuerpo en una columna de 65ch */
.lf-documento{padding-top:var(--espacio-8)}
.lf-documento__columna{max-width:var(--medida);margin-inline:auto}
.lf-documento__titulo{margin:0 0 var(--espacio-6);font:400 var(--t-h1)/1.05 var(--f-disp);letter-spacing:-.01em;font-synthesis:none;text-wrap:balance}
.lf-documento .lf-buscar,.lf-documento__acciones{margin-top:var(--espacio-6)}
@media (min-width:980px){
  .lf-documento{padding-top:var(--espacio-9)}
  .lf-documento__titulo{line-height:1.03}
}


/* ==========================================================================
   Cuerpo de la noticia: rescate del contenido guardado
   Lo que llega del editor dentro de .lf-cuerpo (encabezados, listas, citas,
   tablas, incrustados, vídeo propio, alineaciones y bloques de Spectra, cuyo
   plugin se retiró el 11-11-2026 y cuyo HTML guardado llega sin su CSS).
   Va antes de la sección 20 para que, en un empate, gane la maqueta, y las
   reglas sobre etiquetas sueltas no tocan lo que ya lleva una clase lf-
   (ladillo, cita destacada, pie y crédito de foto).
   ========================================================================== */
.lf-cuerpo { overflow-wrap: break-word; }
.lf-cuerpo p:empty { display: none; }
/* Encabezados del editor (los párrafos de un solo <strong> pasan a .lf-ladillo): a la medida del texto. */
.lf-cuerpo > :is(h2, h3, h4):not([class*="lf-"]) { max-width: var(--medida); margin: 1.7em 0 var(--espacio-4); line-height: 1.15; text-wrap: balance; }
.lf-cuerpo > h2:not([class*="lf-"]) { font-size: 26px; }
.lf-cuerpo > h3:not([class*="lf-"]) { font-size: 22px; }
.lf-cuerpo > h4:not([class*="lf-"]) { font-size: 19px; }
/* Listas: la base de la maqueta deja sin viñetas ni márgenes las listas con class (el bloque Lista la lleva). */
.lf-cuerpo :is(ul, ol):not([class*="lf-"]) { padding-left: 1.3em; list-style: revert; }
.lf-cuerpo > :is(ul, ol):not([class*="lf-"]) { max-width: var(--medida); margin: 0 0 1em; }
.lf-cuerpo :is(ul, ol):not([class*="lf-"]) > li + li { margin-top: .4em; }
/* SVG del contenido: nunca más anchos que la columna. (Las citas del editor van con la cita destacada, en la sección 20.) */
:where(.lf-cuerpo) svg { max-width: 100%; height: auto; }
/* Vídeo propio (p. ej. vertical de móvil): sin cuadro previo se vería un hueco blanco; fondo negro y altura acotada. */
.lf-cuerpo .wp-block-video video { display: block; width: 100%; max-height: 80vh; background: var(--n); }
.lf-cuerpo :is(figcaption, .wp-element-caption):not([class*="lf-"]) { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--suau); }
.lf-cuerpo :is(.alignleft, .alignright, .aligncenter, .alignwide, .alignfull) { float: none; width: auto; max-width: 100%; margin-inline: 0; }
.lf-cuerpo iframe { width: 100%; max-width: 100%; border: 0; }
/* Iframes sin alto (ni atributo ni estilo): 16:9 en vez de los 150 px por defecto. Los que traen height lo conservan. */
.lf-cuerpo iframe:not([height]):not([style*="height"]) { aspect-ratio: 16 / 9; height: auto; }
/* Vídeos incrustados (bloque Incrustar de tipo vídeo): 16:9 al ancho de la columna. */
.lf-cuerpo .wp-block-embed.is-type-video :is(iframe, video) { aspect-ratio: 16 / 9; height: auto; }
.lf-cuerpo .wp-block-table, .lf-cuerpo table { display: block; max-width: 100%; overflow-x: auto; }
/* Tablas: al ancho de la columna (no salen a sangre como las fotos) y con el aire de un párrafo. */
.lf-cuerpo > :is(.wp-block-table, table) { margin: 0 0 1em; }
.lf-cuerpo table { border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.lf-cuerpo :is(th, td) { padding: 8px 10px; border: 1px solid var(--linia); text-align: left; vertical-align: top; }
.lf-cuerpo th { background: var(--gc); font-weight: 600; }
.lf-cuerpo :is(pre, code) { font-size: 14px; }
.lf-cuerpo pre { overflow-x: auto; padding: 12px; background: var(--gc); }
.lf-cuerpo hr { border: 0; border-top: 1px solid var(--linia); }
/* Spectra: contenedores e imágenes vacíos no dejan hueco. No se toca el contenido. */
.lf-cuerpo .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap:empty), .lf-cuerpo .wp-block-uagb-image:has(> figure:empty) { display: none; }
.lf-cuerpo .wp-block-uagb-container .uagb-container-inner-blocks-wrap { display: grid; gap: var(--espacio-4); }
/* Títulos avanzados: como los encabezados del cuerpo (el h va dentro de un div, así que > h2 no los alcanza). */
.lf-cuerpo > .wp-block-uagb-advanced-heading { margin-top: 1.7em; }
.lf-cuerpo .uagb-heading-text { margin: 0; font-family: var(--f-disp); font-weight: 400; line-height: 1.15; color: var(--n); text-wrap: balance; }
.lf-cuerpo h2.uagb-heading-text { font-size: 26px; }
.lf-cuerpo h3.uagb-heading-text { font-size: 22px; }
.lf-cuerpo :is(h4, h5, h6).uagb-heading-text { font-size: 19px; }
.lf-cuerpo .uagb-desc-text { margin: .5em 0 0; color: var(--suau); }
/* Imágenes: a su tamaño y proporción, sin pasar del ancho de la columna (no el 3:2 a todo el ancho de la foto
   de la noticia). El HTML guardado trae a veces el ancho y alto de otro recorte (una vertical marcada 1024×768):
   «contain» la encaja entera en vez de aplastarla. La proporción se queda en la del navegador («auto» y la de
   width y height): con «aspect-ratio: auto» a secas, el srcset que guardó Spectra (anchos y densidades
   mezclados, sizes de 150px) deja la imagen de 811 px de ancho a 1.500 de alto, con bandas grises. */
.lf-cuerpo .wp-block-uagb-image__figure { margin: 0; }
.lf-cuerpo .wp-block-uagb-image img { display: block; width: auto; height: auto; object-fit: contain; }
.lf-cuerpo .wp-block-uagb-image--align-center img { margin-inline: auto; }
.lf-cuerpo .wp-block-uagb-image--align-right img { margin-left: auto; }
.lf-cuerpo .wp-block-uagb-image :is(figcaption, .uagb-image-caption):not([class*="lf-"]) { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--suau); }
@media (min-width: 600px) {
	.lf-cuerpo :is(.alignleft, .alignright) { max-width: 50%; margin-block: 4px 12px; }
	.lf-cuerpo .alignleft { float: left; margin-right: 20px; }
	.lf-cuerpo .alignright { float: right; margin-left: 20px; }
	.lf-cuerpo .aligncenter { margin-inline: auto; }
}
@media (min-width: 980px) {
	.lf-cuerpo > :is(h2, h3, h4, .wp-block-uagb-advanced-heading) { clear: both; }
}

/* «Copiar enlace»: el aviso que escribe el JS junto al botón (también en la ficha nueva). */
.lf-compartir__aviso { font: 600 13px/1.3 var(--f-txt); color: var(--n); }


/* --------------------------------------------------------------------------
   20. Noticia (5.17)
   -------------------------------------------------------------------------- */
/* Banda gris y corte de la foto */
.lf-noticia__banda{background:var(--gc);padding-top:var(--espacio-6)}
.lf-noticia__corte{--corte:var(--espacio-6);position:relative;isolation:isolate;display:flow-root}
/* la banda llega a media foto: bloque macizo, nada de degradados */
.lf-noticia__corte::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(50% + var(--corte) / 2);background:var(--gc);z-index:-1}
.lf-noticia__cabecera{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--espacio-5)}
.lf-noticia__foto{margin:var(--corte) calc(var(--margen-lateral) * -1) 0}
.lf-noticia__foto img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--gc)}
.lf-noticia__piefoto{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--espacio-2) var(--espacio-4)}
.lf-noticia__piefoto .lf-figura__pie{margin-top:var(--espacio-2)}
.lf-noticia__piefoto .lf-compartir{margin-top:var(--espacio-2)}
.lf-figura__credito a{color:inherit}
/* sin foto: la banda cierra con su aire y la ficha, que es la única, lleva compartir también en el móvil */
.lf-noticia__banda--sin-foto{padding-bottom:var(--espacio-6)}
@media (min-width:980px){
  .lf-noticia__banda{padding-top:var(--espacio-8)}
  .lf-noticia__corte{--corte:var(--espacio-7)}
  .lf-noticia__cabecera,.lf-noticia__fotorejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco)}
  .lf-noticia__texto{grid-column:1 / span 8}
  .lf-ficha{grid-column:9 / span 4;align-self:end}
  .lf-noticia__foto{grid-column:1 / span 8;margin:var(--corte) 0 0}
  .lf-noticia__piefoto{grid-column:1 / span 8}
  .lf-noticia__piefoto .lf-compartir{display:none}
  .lf-noticia__banda--sin-foto{padding-bottom:var(--espacio-8)}
}

/* Miga, titular y entradilla */
.lf-miga{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 var(--espacio-4);font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase}
.lf-miga a{position:relative;color:var(--n);text-decoration:none;box-shadow:inset 0 -3px 0 var(--y)}
/* objetivo táctil de 44 px de alto sin mover el subrayado ni la maqueta */
.lf-miga a::after{content:"";position:absolute;inset:-15px -8px}
.lf-miga__sep{color:var(--suau)}
.lf-miga__barrio::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--y);vertical-align:1px}
.lf-noticia__titulo{margin:0;font:400 var(--t-h1)/1.05 var(--f-disp);letter-spacing:-.01em;font-synthesis:none;text-wrap:balance}
.lf-noticia__titulo--largo{font-size:var(--t-h1-l);line-height:1.06}
.lf-noticia__titulo--muy-largo{font-size:var(--t-h1-ml);line-height:1.08}
.lf-noticia__entradilla{margin:var(--espacio-5) 0 0;max-width:56ch;font:300 20px/1.4 var(--f-txt);color:var(--n)}
@media (min-width:980px){
  .lf-noticia__titulo{line-height:1.03}
  .lf-noticia__titulo--largo{line-height:1.04}
  .lf-noticia__titulo--muy-largo{line-height:1.06}
  .lf-noticia__entradilla{font-size:22px}
}

/* Ficha */
.lf-ficha{display:flex;flex-direction:column;font:500 13px/1.4 var(--f-txt);color:var(--suau);border-top:var(--filete-negro);padding-top:var(--espacio-3);font-variant-numeric:tabular-nums}
.lf-ficha>*+*{margin-top:var(--espacio-3);padding-top:var(--espacio-3);border-top:var(--filete)}
.lf-ficha__autor{display:flex;align-items:center;gap:var(--espacio-3);margin:0;font:800 12px/1.25 var(--f-rot);letter-spacing:.06em;text-transform:uppercase;color:var(--n)}
.lf-ficha__autor img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(1);background:var(--gc)}
.lf-ficha__por{color:var(--suau);margin-right:4px}
.lf-ficha__dato{margin:0}
@media (max-width:979px){
  /* en una línea entre filetes negros: autor arriba; fecha · minutos debajo */
  .lf-ficha{flex-flow:row wrap;align-items:baseline;padding-bottom:var(--espacio-3);border-bottom:var(--filete-negro)}
  .lf-ficha>.lf-ficha__autor{flex-basis:100%}
  .lf-ficha>*+*{border-top:0;margin-top:var(--espacio-2);padding-top:0}
  .lf-ficha__dato+.lf-ficha__dato::before{content:"·";margin-inline:6px;color:var(--suau)}
  .lf-ficha__autor img{width:32px;height:32px}
  .lf-ficha .lf-compartir{display:none}
  .lf-noticia__banda--sin-foto .lf-ficha .lf-compartir{display:flex;flex-basis:100%;margin-top:var(--espacio-3)}
}
@media (min-width:980px){
  /* placa blanca sobre la banda gris */
  .lf-ficha{background:var(--b);padding:var(--espacio-5);border-top:0}
  /* la copia de escritorio va junto a la foto: enrasada con su borde de arriba y dentro del gris */
  .lf-noticia__fotorejilla>.lf-ficha{grid-row:1;align-self:start;margin-top:var(--corte)}
}

/* Compartir: 4 cuadros de 44 px */
.lf-compartir{display:flex;flex-wrap:wrap;align-items:center;gap:var(--espacio-2)}
.lf-compartir__boton{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--n);background:var(--b);color:var(--n);cursor:pointer}
.lf-compartir__boton:hover{background:var(--y)}
.lf-compartir__boton svg{width:20px;height:20px}

/* Cuerpo */
.lf-noticia__cuerporejilla{margin-top:var(--espacio-8)}
@media (min-width:980px){
  .lf-noticia__cuerporejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);align-items:start}
  .lf-cuerpo{grid-column:1 / span 8}
  /* el lateral llega al pie del cuerpo: el medianil acompaña todo el texto y sus módulos
     se reparten (el primero arriba, el último a ras del final del texto). Estirado, un
     sticky no haría nada: en producción, si se quiere, va en la primera section */
  .lf-lateral{grid-column:9 / span 4;position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
  .lf-lateral>section+section{margin-top:0;padding-top:var(--espacio-8)}
  .lf-lateral::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--hueco) / -2);border-left:var(--filete)}
}
.lf-cuerpo{font:400 17px/1.62 var(--f-txt);color:var(--n);text-wrap:pretty}
.lf-cuerpo>:is(p,h2){max-width:var(--medida)}
.lf-cuerpo p{margin:0 0 1em}
.lf-pagina .lf-sumario{margin:0 0 var(--espacio-6);font:600 18px/1.45 var(--f-txt)}
@media (min-width:980px){
  .lf-pagina .lf-sumario{font-size:19px}
}
.lf-capitular::first-letter{float:left;margin:9px 10px 0 0;font:400 84px/.82 var(--f-disp);font-synthesis:none;color:var(--n)}
.lf-ladillo{margin:var(--espacio-8) 0 var(--espacio-4);font:400 var(--t-ladillo)/1.12 var(--f-disp);font-synthesis:none;text-wrap:balance}
/* móvil: a sangre; escritorio: las 8 columnas. La imagen de Spectra (un div con su figura dentro) va igual.
   Las fotos del cuerpo no se recortan: con su proporción (también las verticales), sin pasar de la columna;
   el 3:2 fijo es solo para la foto de la noticia */
.lf-cuerpo figure,.lf-cuerpo>.wp-block-uagb-image{margin:var(--espacio-7) calc(var(--margen-lateral) * -1)}
.lf-cuerpo figure img{background:var(--gc)}
/* el crédito que sale del párrafo «Foto: …» (inc/cuerpo.php), a la derecha y dentro del margen */
.lf-cuerpo figcaption.lf-figura__credito{display:block;margin-top:var(--espacio-2);text-align:right;color:var(--suau)}
.lf-cuerpo figure :is(.lf-figura__pie,figcaption.lf-figura__credito){padding-inline:var(--margen-lateral)}
@media (min-width:980px){
  .lf-cuerpo figure,.lf-cuerpo>.wp-block-uagb-image{margin:var(--espacio-7) 0}
  .lf-cuerpo figure :is(.lf-figura__pie,figcaption.lf-figura__credito){padding-inline:0}
}
/* cita destacada, y toda cita del cuerpo: filete amarillo ARRIBA, nunca a la izquierda */
.lf-cita,.lf-cuerpo blockquote{margin:var(--espacio-8) 0;padding:0}
.lf-cita::before,.lf-cuerpo blockquote::before{content:"";display:block;width:48px;height:4px;margin-bottom:var(--espacio-4);background:var(--y)}
.lf-cita p,.lf-cuerpo blockquote p{margin:0;max-width:none;font:400 var(--t-cita)/1.2 var(--f-disp);font-synthesis:none;text-wrap:balance}
.lf-cuerpo blockquote p+p{margin-top:var(--espacio-3)}
.lf-cita cite,.lf-cuerpo blockquote cite{display:block;margin-top:var(--espacio-3);font:800 11px/1.3 var(--f-rot);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--suau)}
/* cuadrado de fin de artículo */
.lf-fin{display:inline-block;width:.55em;height:.55em;margin-left:6px;background:var(--y);border:1px solid var(--n);vertical-align:baseline}
.lf-cuerpo a{text-decoration:underline 2px var(--y);text-underline-offset:.15em}

/* Temas (etiquetas), lateral y cierre */
/* baseline: «TEMAS» (Cooper 11) sobre la misma línea base que los temas */
.lf-etiquetas{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--espacio-3);max-width:var(--medida);margin-top:var(--espacio-8);padding-top:var(--espacio-4);border-top:var(--filete)}
.lf-etiquetas__rotulo{margin-right:var(--espacio-2);font:800 11px/1 var(--f-rot);letter-spacing:.08em;text-transform:uppercase;color:var(--suau)}
.lf-cuerpo .lf-etiquetas a,.lf-etiquetas a{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1.3 var(--f-txt);color:var(--n);text-decoration:underline 1px var(--linia);text-underline-offset:4px}
.lf-cuerpo .lf-etiquetas a:hover,.lf-etiquetas a:hover{text-decoration-color:var(--y);text-decoration-thickness:2px}
.lf-etiquetas__sep{color:var(--suau)}
/* compartir al pie del cuerpo: sin temas, separado del último párrafo; con temas, debajo de ellos */
.lf-cuerpo>.lf-compartir{margin-top:var(--espacio-6)}
.lf-etiquetas+.lf-compartir{margin-top:var(--espacio-4)}
@media (max-width:979px){
  /* en el móvil, «TEMAS» en su línea y los temas sin puntos: al saltar de línea
     no queda un «·» colgado y todos empiezan en el mismo margen */
  .lf-etiquetas{column-gap:var(--espacio-4)}
  .lf-etiquetas__sep{display:none}
  .lf-etiquetas__rotulo{flex-basis:100%}
  .lf-lateral{margin-top:var(--aire-seccion)}
}
@media (min-width:980px){
  .lf-lateral .lf-pieza--fila{grid-template-columns:minmax(0,1fr) 96px}
  .lf-lateral .lf-pieza--fila .lf-pieza__img{aspect-ratio:4/3}
}
/* el cierre ya lleva la regla de 4 px y los 32 px de debajo */
.lf-cierre{margin-top:var(--aire-seccion);padding-top:var(--espacio-7);border-top:var(--regla)}
.lf-cierre__titulo{margin:0 0 var(--espacio-4);font:400 22px/1.15 var(--f-disp);font-synthesis:none;text-wrap:balance}
@media (min-width:980px){
  .lf-cierre__titulo{font-size:26px}
}