/* ==========================================================================
   La Futura · «Periódico de barrio» · componentes.css
   Secciones 6 a 18 y 21 de docs/maquetas/periodico-de-barrio/lafutura.css
   (mancheta, cabecera móvil y carril, idioma, rótulo, temas, antetítulo, pieza,
   figura, bandas, distritos, Opinión, río, botones y paginación, colofón), con
   los mismos nombres y valores. Detrás, lo del tema que la maqueta no trae
   (enlace para saltar, foco, panel, buscador, aviso de cookies, contenido
   externo bloqueado). Va después de base.css y antes de plantillas.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   6. Mancheta de escritorio (5.3)
   -------------------------------------------------------------------------- */
.lf-mancheta{display:none}
@media (min-width:980px){
  .lf-mancheta{display:block;background:var(--b)}
  .lf-mancheta__marco{border-top:8px solid var(--n)}
  .lf-mancheta__servicio{display:flex;justify-content:space-between;align-items:center;min-height:44px}
  .lf-mancheta__fecha{margin:0;font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase}
  .lf-mancheta__acciones{display:flex;align-items:center;gap:var(--espacio-3);margin-right:-10px}
  .lf-mancheta__marca{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--espacio-7);padding-block:var(--espacio-5);border-bottom:var(--filete-negro)}
  .lf-mancheta__logo{display:block;flex:none}
  .lf-mancheta__logo img{height:64px;width:auto}
  .lf-mancheta__lema{margin:0;max-width:20ch;font:400 22px/1.15 var(--f-disp);font-synthesis:none;text-align:right}
  .lf-mancheta__nav{display:flex;align-items:stretch;gap:var(--espacio-7);min-height:48px;border-bottom:var(--regla)}
  .lf-mancheta__item{position:relative;display:inline-flex;align-items:center;min-height:48px;font:800 13px/1 var(--f-rot);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--n)}
  .lf-mancheta__item:hover{text-decoration:underline 2px var(--y);text-underline-offset:6px}
  /* bloque amarillo de 4 px que tapa la regla negra bajo la sección activa */
  .lf-mancheta__item[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:var(--y)}
  /* Interiores (noticia y sección): sin fila de marca; logo de 36 px en la fila de navegación */
  .lf-mancheta--reducida .lf-mancheta__marca{display:none}
  .lf-mancheta--reducida .lf-mancheta__servicio{border-bottom:var(--filete-negro)}
  .lf-mancheta--reducida .lf-mancheta__nav{min-height:56px;gap:var(--espacio-7)}
  .lf-mancheta__mini{display:none}
  .lf-mancheta--reducida .lf-mancheta__mini{display:flex;align-items:center;margin-right:var(--espacio-8)}
  .lf-mancheta--reducida .lf-mancheta__mini img{height:36px;width:auto}
}


/* --------------------------------------------------------------------------
   7. Cabecera móvil, por debajo de 980 px (5.4)
   -------------------------------------------------------------------------- */
.lf-movil-banda{height:8px;background:var(--n)}
.lf-fecha-movil{display:flex;justify-content:center;align-items:center;min-height:32px;margin:0;font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase}
.lf-barra{position:sticky;top:0;z-index:10;background:var(--b);border-bottom:var(--filete-negro)}
.lf-barra__fila{display:flex;justify-content:space-between;align-items:center;height:56px}
/* logo de 24 px con 10 arriba y 10 abajo: objetivo de 44 px dentro de la fila de 56 */
.lf-barra__logo{display:block;flex:none;padding-block:10px}
.lf-barra__logo img{height:24px;width:auto}
.lf-barra__acciones{display:flex;align-items:center;gap:var(--espacio-1);margin-right:-10px}
.lf-boton-icono{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--n)}
.lf-boton-icono svg{width:22px;height:22px}
.lf-boton-icono:hover{background:var(--y)}
.lf-carril{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;border-bottom:var(--regla)}
.lf-carril::-webkit-scrollbar{display:none}
.lf-carril a{flex:none;scroll-snap-align:start;display:flex;align-items:center;min-height:44px;padding-inline:var(--espacio-3);font:800 12px/1 var(--f-rot);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--n)}
.lf-carril a:first-child{padding-left:var(--margen-lateral)}
.lf-carril a:last-child{padding-right:var(--margen-lateral)}
.lf-carril a[aria-current]{background:var(--y)}
@media (min-width:980px){
  .lf-movil-banda,.lf-fecha-movil,.lf-barra,.lf-carril{display:none}
}


/* --------------------------------------------------------------------------
   8. Idioma: CAST · CAT (5.5)
   -------------------------------------------------------------------------- */
.lf-idioma{display:flex;align-items:center;font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase;color:var(--suau)}
.lf-idioma a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;color:var(--suau);text-decoration:none}
/* objetivo táctil de 44 px de ancho también en «CAT», sin mover las letras ni el punto */
.lf-idioma a::after{content:"";position:absolute;top:0;bottom:0;left:min(0px, (100% - 44px) / 2);right:min(0px, (100% - 44px) / 2)}
.lf-idioma a[aria-current="true"]{color:var(--n);text-decoration:underline 3px var(--y);text-underline-offset:5px}
.lf-idioma a:hover{text-decoration:underline 3px var(--y);text-underline-offset:5px}


/* --------------------------------------------------------------------------
   9. Rótulo de módulo (5.6)
   -------------------------------------------------------------------------- */
.lf-rotulo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--espacio-2) var(--espacio-4);border-top:var(--regla);border-bottom:1px solid currentColor;padding-block:var(--espacio-3);margin-bottom:var(--espacio-6)}
.lf-rotulo__titulo{grid-column:1;grid-row:1;justify-self:start;margin:0;font:800 var(--r-mod)/1 var(--f-rot);letter-spacing:.05em;text-transform:uppercase}
.lf-rotulo__mas{grid-column:2;grid-row:1;justify-self:end;display:inline-flex;align-items:center;min-height:44px;font:500 13px/1 var(--f-txt);color:inherit;text-decoration:underline 2px var(--y);text-underline-offset:4px;white-space:nowrap}
.lf-rotulo__dato{grid-column:1 / -1;grid-row:2;margin:0;font:500 13px/1.4 var(--f-txt);color:var(--suau);font-variant-numeric:tabular-nums}
@media (min-width:980px){
  .lf-rotulo{grid-template-columns:1fr auto 1fr;margin-bottom:var(--espacio-7)}
  .lf-rotulo__dato{grid-column:1;grid-row:1}
  .lf-rotulo__titulo{grid-column:2;justify-self:center}
  .lf-rotulo__mas{grid-column:3}
}
/* uno por página, solo en la portada */
.lf-rotulo--destacado .lf-rotulo__titulo{background:var(--y);color:var(--n);padding:6px 12px 4px}
.lf-banda--negra .lf-rotulo{color:var(--b);border-top-color:var(--b)}
.lf-banda--negra .lf-rotulo__dato{color:var(--linia)}
/* rótulo pequeño: «MÁS EN BARCELONA», «BARCELONA, DISTRITO A DISTRITO» */
.lf-rotulo.lf-rotulo--pequeno{grid-template-columns:1fr auto;border-bottom:0;padding-block:var(--espacio-3) 0;margin-bottom:var(--espacio-4)}
.lf-rotulo--pequeno .lf-rotulo__titulo{grid-column:1;justify-self:start;font-size:13px;letter-spacing:.06em}
.lf-rotulo--pequeno .lf-rotulo__mas{grid-column:2}


/* --------------------------------------------------------------------------
   10. Índice de temas (5.7)
   -------------------------------------------------------------------------- */
.lf-temas{display:flex;flex-wrap:wrap;gap:0 var(--espacio-5);margin:calc(var(--espacio-3) * -1) 0 var(--espacio-6);padding:0;list-style:none;font:500 13px/1.4 var(--f-txt)}
.lf-temas li{flex:none}
.lf-temas a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--n);text-decoration:none;white-space:nowrap}
.lf-temas a:hover{text-decoration:underline 2px var(--y);text-underline-offset:4px}
.lf-temas small{font-size:inherit;color:var(--suau);font-variant-numeric:tabular-nums}
@media (max-width:979px){
  .lf-temas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--margen-lateral) * -1);padding-inline:var(--margen-lateral)}
  .lf-temas::-webkit-scrollbar{display:none}
}
@media (min-width:980px){
  .lf-temas{margin-bottom:var(--espacio-7)}
}


/* --------------------------------------------------------------------------
   11. Antetítulo (5.8)
   -------------------------------------------------------------------------- */
.lf-antetitulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 var(--espacio-2);font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase;color:var(--n)}
.lf-antetitulo__seccion{box-shadow:inset 0 -3px 0 var(--y)}
.lf-antetitulo__sub,.lf-antetitulo__fecha{color:var(--suau)}
/* la subsección sola (en el bloque de su sección, sin la sección delante) es el dato: en negro, como el barrio */
.lf-antetitulo__sub:first-child{color:var(--n)}
.lf-antetitulo>*+*::before{content:"·";order:-2;margin-right:8px;color:var(--suau)}
/* barrio: cuadrado amarillo de 8 px delante del nombre (también detrás de un «·») */
.lf-antetitulo__barrio{display:inline-flex;align-items:baseline}
.lf-antetitulo__barrio::after{content:"";order:-1;flex:none;width:8px;height:8px;margin-right:6px;background:var(--y);position:relative;top:-1px}
/* solo en la apertura: la única etiqueta rellena de la página */
.lf-antetitulo--bloque .lf-antetitulo__seccion{background:var(--y);box-shadow:none;padding:4px 6px 3px}
.lf-banda--negra .lf-antetitulo{color:var(--b)}
.lf-banda--negra :is(.lf-antetitulo__sub,.lf-antetitulo__fecha){color:var(--linia)}
.lf-banda--negra .lf-antetitulo__sub:first-child{color:var(--b)}
.lf-banda--negra .lf-antetitulo>*+*::before{color:var(--linia)}


/* --------------------------------------------------------------------------
   12. Pieza (5.9)
   -------------------------------------------------------------------------- */
.lf-pieza{position:relative;display:flex;flex-direction:column}
.lf-pieza__figura{order:-1;margin:0 0 var(--espacio-3)}
.lf-pieza__img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--gc)}
.lf-pieza__titulo{margin:0;font:400 var(--t-4)/1.15 var(--f-disp);font-synthesis:none;text-wrap:balance;color:inherit}
.lf-pieza__titulo a{color:inherit;text-decoration:none}
.lf-pieza__titulo a::after{content:"";position:absolute;inset:0}
.lf-pieza:hover .lf-pieza__titulo a{text-decoration:underline 2px var(--y);text-underline-offset:4px}
.lf-pieza__extracto{margin:var(--espacio-3) 0 0;font:400 15px/1.5 var(--f-txt);color:var(--suau);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.lf-pieza__entradilla{margin:var(--espacio-4) 0 0;font:400 var(--t-entr)/1.3 var(--f-disp);font-synthesis:none;color:var(--suau);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.lf-pieza__fecha{margin:var(--espacio-3) 0 0;font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase;color:var(--suau)}
@media (min-width:980px){
  .lf-pieza__extracto{font-size:16px}
}

/* Variantes */
.lf-pieza--texto .lf-pieza__titulo{font-size:var(--t-3);line-height:1.12}
.lf-pieza--titulo-largo .lf-pieza__titulo{font-size:var(--t-4);line-height:1.15}
.lf-pieza--lista .lf-pieza__titulo{font-size:var(--t-5);line-height:1.2}
.lf-pieza--grande .lf-pieza__titulo{font-size:var(--t-2);line-height:1.08;letter-spacing:-.01em}
.lf-pieza--grande .lf-pieza__entradilla{-webkit-line-clamp:3}
@media (min-width:980px){
  .lf-pieza--grande .lf-pieza__titulo{line-height:1.06}
  /* centrada: solo en escritorio (en el móvil todo va a la izquierda, como la apertura) */
  .lf-pieza--centrada{text-align:center}
  .lf-pieza--centrada .lf-antetitulo{justify-content:center}
  .lf-pieza--centrada .lf-pieza__entradilla{max-width:46ch;margin-inline:auto}
  /* texto arriba, foto debajo */
  .lf-pieza--foto-abajo .lf-pieza__figura{order:2;margin:var(--espacio-6) 0 0}
  .lf-pieza--cuadrada .lf-pieza__img{aspect-ratio:1}
  .lf-pieza--4x3 .lf-pieza__img{aspect-ratio:4/3}
}

/* Fila: texto a la izquierda, miniatura 1:1 de 88 px a la derecha */
.lf-pieza--fila{display:grid;grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:repeat(3,auto) 1fr;column-gap:var(--espacio-4);align-items:start}
.lf-pieza--fila>:not(.lf-pieza__figura){grid-column:1}
.lf-pieza--fila .lf-pieza__figura{grid-column:2;grid-row:1 / span 4;margin:0}
.lf-pieza--fila .lf-pieza__img{aspect-ratio:1}
.lf-pieza--fila .lf-pieza__titulo{font-size:var(--t-5);line-height:1.2}
/* Fila solo en el móvil (en escritorio, foto arriba) */
@media (max-width:979px){
  .lf-pieza--fila-movil{display:grid;grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:repeat(3,auto) 1fr;column-gap:var(--espacio-4);align-items:start}
  .lf-pieza--fila-movil>:not(.lf-pieza__figura){grid-column:1}
  .lf-pieza--fila-movil .lf-pieza__figura{grid-column:2;grid-row:1 / span 4;margin:0}
  .lf-pieza--fila-movil .lf-pieza__img{aspect-ratio:1}
  .lf-pieza--fila-movil .lf-pieza__titulo{font-size:var(--t-5);line-height:1.2}
  .lf-pieza--fila-movil .lf-pieza__extracto{display:none}
}

/* Apertura partida de sección (6|6): foto en 1-6; titular, entradilla y fecha en 7-12,
   con la fecha abajo, a la altura del pie de la foto */
.lf-pieza--partida .lf-pieza__titulo{font-size:var(--t-2s);line-height:1.08;letter-spacing:-.01em}
.lf-pieza--partida .lf-pieza__entradilla{-webkit-line-clamp:5}
@media (min-width:980px){
  .lf-pieza--partida{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:var(--hueco);align-items:start}
  .lf-pieza--partida>*{grid-column:7 / -1}
  .lf-pieza--partida>.lf-pieza__figura{grid-column:1 / span 6;grid-row:1 / -1;margin:0}
  .lf-pieza--partida>.lf-pieza__fecha{grid-row:4;align-self:end;margin-top:var(--espacio-6)}
  .lf-pieza--partida::before{content:"";position:absolute;grid-column:7;grid-row:1 / -1;top:0;bottom:0;left:calc(var(--hueco) / -2);border-left:var(--filete)}
  .lf-pieza--partida .lf-pieza__titulo{line-height:1.05}
}

/* Sobre negro */
.lf-banda--negra .lf-pieza{color:var(--b)}
.lf-banda--negra :is(.lf-pieza__extracto,.lf-pieza__entradilla,.lf-pieza__fecha){color:var(--linia)}

/* Apertura de portada (.lf-pieza.lf-apertura) */
.lf-apertura .lf-pieza__titulo{font-size:var(--t-ap);line-height:1.06;letter-spacing:-.01em}
.lf-apertura .lf-pieza__figura{order:-1;margin:0 calc(var(--margen-lateral) * -1) var(--espacio-4)}
/* móvil: 1:1 a sangre (390×390). Conserva el 85 % del ancho de un original apaisado
   y deja el titular dentro de la primera pantalla; el 4:5 lo echaba abajo */
.lf-apertura .lf-pieza__img{aspect-ratio:1}
/* titular de más de 130 caracteres: 28 en el móvil, 40 en escritorio */
.lf-apertura--larga .lf-pieza__titulo{font-size:28px}
@media (min-width:980px){
  .lf-apertura{text-align:center}
  .lf-apertura .lf-antetitulo{justify-content:center}
  .lf-apertura .lf-pieza__titulo{line-height:1.04}
  .lf-apertura--larga .lf-pieza__titulo{font-size:40px}
  .lf-apertura .lf-pieza__entradilla{max-width:46ch;margin-inline:auto}
  .lf-apertura .lf-pieza__figura{order:2;margin:var(--espacio-6) 0 0}
  .lf-apertura .lf-pieza__img{aspect-ratio:3/2}
}


/* --------------------------------------------------------------------------
   13. Pie y crédito de imagen (5.10)
   -------------------------------------------------------------------------- */
.lf-figura__pie{display:flex;justify-content:space-between;align-items:baseline;gap:var(--espacio-4);margin-top:var(--espacio-2);font:400 13px/1.4 var(--f-txt);color:var(--suau)}
.lf-figura__credito{flex:none;margin-left:auto;font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase}


/* --------------------------------------------------------------------------
   14. Bandas (5.11)
   -------------------------------------------------------------------------- */
.lf-banda{margin-top:var(--aire-seccion);padding-block:var(--espacio-8)}
@media (min-width:980px){
  .lf-banda{padding-block:var(--espacio-9)}
}
.lf-banda--negra{background:var(--n);color:var(--b)}
.lf-banda--gris{background:var(--gc)}


/* --------------------------------------------------------------------------
   15. Distritos (5.12)
   Base = banda negra de la portada. Variantes: --claro (subnavegación de la
   sección en escritorio; en el móvil se comporta como --carril), --carril
   (móvil) y --compacto (cierre de la noticia, con puntos guía).
   -------------------------------------------------------------------------- */
.lf-distritos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--filete-oscuro)}
.lf-distritos>li{display:grid}
/* 8 px de lado en el móvil: el nombre cabe en 116 px y solo parte «Sarrià-Sant Gervasi»
   (escritorio, --claro, --carril y --compacto llevan su propio relleno) */
.lf-distritos__celda{display:grid;grid-template-columns:auto 1fr;column-gap:var(--espacio-3);align-content:start;min-height:72px;padding:var(--espacio-4) var(--espacio-2);border-bottom:var(--filete-oscuro);color:var(--b);text-decoration:none}
.lf-distritos :where(li:nth-child(even)) .lf-distritos__celda{border-left:var(--filete-oscuro)}
.lf-distritos__num{grid-row:span 2;font:800 var(--num-dist)/1 var(--f-rot);font-variant-numeric:tabular-nums;text-transform:uppercase;color:var(--y)}
.lf-distritos__nombre{font:800 12px/1.25 var(--f-rot);letter-spacing:.06em;text-transform:uppercase}
.lf-distritos__total{font:500 13px/1.4 var(--f-txt);font-variant-numeric:tabular-nums;color:var(--linia)}
.lf-distritos__celda:is(:hover,:focus-visible,[aria-current="page"],.lf-distritos__celda--activa){background:var(--y);color:var(--n)}
.lf-distritos__celda:is(:hover,:focus-visible,[aria-current="page"],.lf-distritos__celda--activa) :is(.lf-distritos__num,.lf-distritos__nombre,.lf-distritos__total){color:var(--n)}
@media (min-width:980px){
  .lf-distritos{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lf-distritos :where(li) .lf-distritos__celda{border-left:var(--filete-oscuro)}
  .lf-distritos :where(li:nth-child(5n+1)) .lf-distritos__celda{border-left:0}
  .lf-distritos__celda{grid-template-columns:1fr;min-height:136px;padding:var(--espacio-5) var(--espacio-6)}
  .lf-distritos__num{grid-row:auto;margin-bottom:var(--espacio-3)}
}

/* Variante clara: rejilla de 6×2 en escritorio, con «TODO» en dos celdas */
.lf-distritos--claro{border-top:var(--filete)}
.lf-distritos--claro .lf-distritos__celda{color:var(--n);border-color:var(--linia)}
.lf-distritos--claro .lf-distritos__num{color:var(--n)}
.lf-distritos--claro .lf-distritos__total{color:var(--suau)}
@media (min-width:980px){
  .lf-distritos--claro{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lf-distritos--claro .lf-distritos__todo{grid-column:span 2}
  .lf-distritos--claro .lf-distritos__celda{min-height:96px;padding:var(--espacio-4) var(--espacio-5)}
  .lf-distritos--claro .lf-distritos__num{font-size:28px}
  .lf-distritos--claro :where(li) .lf-distritos__celda{border-left:var(--filete)}
  .lf-distritos--claro :where(li:nth-child(1),li:nth-child(6)) .lf-distritos__celda{border-left:0}
}

/* Variante carril (móvil); la clara también se ve así por debajo de 980 px */
@media (max-width:979px){
  :is(.lf-distritos--carril,.lf-distritos--claro){display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;border:0;gap:0;margin-inline:calc(var(--margen-lateral) * -1);padding-inline:var(--margen-lateral);scroll-padding-inline:var(--margen-lateral)}
  :is(.lf-distritos--carril,.lf-distritos--claro)::-webkit-scrollbar{display:none}
  :is(.lf-distritos--carril,.lf-distritos--claro) li{flex:none;scroll-snap-align:start}
  :is(.lf-distritos--carril,.lf-distritos--claro) .lf-distritos__celda{grid-template-columns:1fr;width:120px;height:100%;min-height:64px;padding:var(--espacio-3);border:var(--filete);border-left-width:0;color:var(--n)}
  :is(.lf-distritos--carril,.lf-distritos--claro) :where(li:first-child) .lf-distritos__celda{border-left-width:1px}
  :is(.lf-distritos--carril,.lf-distritos--claro) .lf-distritos__num{grid-row:auto;margin-bottom:var(--espacio-2);font-size:20px;color:var(--n)}
  :is(.lf-distritos--carril,.lf-distritos--claro) .lf-distritos__nombre{font-size:11px}
  :is(.lf-distritos--carril,.lf-distritos--claro) .lf-distritos__total{color:var(--suau)}
  /* la celda amarilla, sin el filete gris alrededor */
  :is(.lf-distritos--carril,.lf-distritos--claro) .lf-distritos__celda:is(:hover,:focus-visible,[aria-current="page"],.lf-distritos__celda--activa){border-color:var(--y)}
}

/* Variante compacta: «01 Ciutat Vella ········ 23» */
.lf-distritos.lf-distritos--compacto{display:block;border:0}
.lf-distritos--compacto .lf-distritos__celda{display:flex;align-items:baseline;gap:var(--espacio-2);min-height:44px;padding:10px 0;border:0;border-bottom:var(--filete);color:var(--n)}
.lf-distritos--compacto .lf-distritos__num{grid-row:auto;margin:0;font:800 13px/1 var(--f-rot);color:var(--suau);min-width:2.2em}
.lf-distritos--compacto .lf-distritos__nombre{font:500 15px/1.25 var(--f-txt);letter-spacing:0;text-transform:none}
.lf-distritos--compacto .lf-distritos__guia{flex:1;align-self:flex-end;min-width:var(--espacio-4);margin-bottom:8px;border-bottom:2px dotted var(--suau)}
.lf-distritos--compacto .lf-distritos__total{font:500 14px/1 var(--f-txt);color:var(--suau)}


/* --------------------------------------------------------------------------
   16. Opinión: «La columna», placa de firma, comilla y filas con avatar (5.13)
   -------------------------------------------------------------------------- */
.lf-columna{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.lf-columna__rotulo{margin:0 0 var(--espacio-4);font:800 11px/1 var(--f-rot);letter-spacing:.08em;text-transform:uppercase}
.lf-columna__cabeza{display:flex;flex-direction:column;align-items:center}
.lf-columna__avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;filter:grayscale(1);background:var(--gc)}
/* aro de 1 px en todos los retratos: los recortes sobre blanco no flotan en la placa blanca */
.lf-columna__avatar,.lf-firma__avatar,.lf-ficha__autor img{border:1px solid var(--linia)}
.lf-columna__autor{margin:var(--espacio-3) 0 0;font:800 12px/1.25 var(--f-rot);letter-spacing:.06em;text-transform:uppercase}
.lf-columna__bio{margin:var(--espacio-1) 0 0;font:400 13px/1.4 var(--f-txt);color:var(--suau)}
/* comilla negra dentro de un cuadrado amarillo de 32 px */
.lf-comilla{display:block;flex:none;width:32px;height:32px;margin:var(--espacio-4) auto var(--espacio-3);overflow:hidden;background:var(--y);color:var(--n);font:400 32px/1 var(--f-disp);font-synthesis:none;text-align:center;padding-top:7px}
.lf-columna__titulo{margin:0;font:400 21px/1.15 var(--f-disp);font-synthesis:none;text-wrap:balance}
.lf-columna__titulo a{color:inherit;text-decoration:none}
.lf-columna__titulo a::after{content:"";position:absolute;inset:0}
.lf-columna:hover .lf-columna__titulo a{text-decoration:underline 2px var(--y);text-underline-offset:4px}
.lf-columna__extracto{margin:var(--espacio-2) 0 0;font:italic 400 15px/1.5 var(--f-txt);color:var(--suau);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.lf-columna__boton{position:relative;z-index:1;margin-top:var(--espacio-5)}
/* Caja de la primera plana: #eee a toda la altura de la columna, contenido arriba.
   En escritorio el hueco que sobra se reparte con márgenes automáticos: rótulo, retrato
   y nombre arriba; comilla, titular y extracto en el centro; el botón, abajo del todo */
.lf-columna--caja{background:var(--gc);padding:var(--espacio-6);height:100%;justify-content:flex-start}
.lf-columna--caja .lf-columna__titulo{font-size:24px;line-height:1.12}
@media (min-width:980px){
  .lf-columna--caja{padding:var(--espacio-7) var(--espacio-6)}
  .lf-columna--caja .lf-columna__avatar{width:128px;height:128px}
  /* los mínimos van en el elemento de antes, porque el margen automático puede quedar en 0 */
  .lf-columna--caja .lf-columna__cabeza{margin-bottom:var(--espacio-4)}
  .lf-columna--caja .lf-comilla{margin-top:auto}
  .lf-columna--caja .lf-columna__extracto{margin-bottom:var(--espacio-5);max-width:46ch}
  .lf-columna--caja .lf-columna__boton{margin-top:auto}
}
/* Placa blanca en la banda gris de Opinión */
.lf-columna--placa{background:var(--b);padding:var(--espacio-6);height:100%;justify-content:flex-start}
/* «Leer la columna →» al pie de la placa: los cuatro a la misma altura; el mínimo, en el extracto */
.lf-columna--placa .lf-columna__extracto{margin-bottom:var(--espacio-3)}
.lf-columna--placa>.lf-columna__boton{margin-top:auto}
@media (min-width:980px){
  /* las cuatro comillas a la misma altura aunque una firma lleve bio:
     96 de retrato + 12 + 15 del nombre + 4 + 18,2 de una línea de bio */
  .lf-columna--placa .lf-columna__cabeza{min-height:146px}
}
@media (max-width:979px){
  .lf-columna--caja{height:auto;align-items:flex-start;text-align:left;padding:var(--espacio-5)}
  .lf-columna--caja .lf-columna__cabeza{flex-direction:row;align-items:center;gap:var(--espacio-3)}
  .lf-columna--caja .lf-columna__cabeza .lf-columna__autor{margin-top:0}
  .lf-columna--caja .lf-columna__avatar{width:56px;height:56px}
  .lf-columna--caja .lf-comilla{margin-inline:0}
  .lf-columna--caja .lf-columna__boton{align-self:stretch}
  .lf-columna--placa{padding:var(--espacio-5)}
  .lf-columna--placa .lf-columna__avatar{width:72px;height:72px}
  .lf-columna--placa .lf-columna__extracto{-webkit-line-clamp:4}
}

/* Fila de firma (cierre de la noticia): avatar de 40 px, nombre en Cooper 11 y titular a 18 px */
.lf-firma{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--espacio-3);align-items:start}
.lf-firma>.lf-firma__avatar{grid-column:1;grid-row:1 / span 3}
.lf-firma>:not(.lf-firma__avatar){grid-column:2}
.lf-firma__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(1);background:var(--gc)}
.lf-firma__autor{margin:0 0 var(--espacio-1);font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase}
.lf-firma__titulo{margin:0;font:400 var(--t-5)/1.2 var(--f-disp);font-synthesis:none;text-wrap:balance}
.lf-firma__titulo a{color:inherit;text-decoration:none}
.lf-firma__titulo a::after{content:"";position:absolute;inset:0}
.lf-firma:hover .lf-firma__titulo a{text-decoration:underline 2px var(--y);text-underline-offset:4px}


/* --------------------------------------------------------------------------
   17. Río (5.14)
   -------------------------------------------------------------------------- */
.lf-rio{list-style:none;margin:0 auto;padding:0;width:min(100%,811px)}
.lf-rio__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:var(--espacio-4);align-items:start;padding-block:var(--espacio-5);border-top:var(--filete)}
.lf-rio__item:last-child{border-bottom:var(--filete)}
/* justo después de un rótulo: sin el filete gris que dobla la raya inferior del rótulo */
.lf-rotulo+.lf-rio>.lf-rio__item:first-child{border-top:0;padding-top:0}
/* seguido de paginación: la raya negra de la paginación cierra el río, sin filete doble */
.lf-rio:has(+.lf-paginacion)>.lf-rio__item:last-child{border-bottom:0}
/* sin centrar, dentro de una columna que no es el contenedor */
.lf-rio--izquierda{margin-inline:0}
.lf-rio__titulo{margin:0;font:400 var(--t-rio)/1.15 var(--f-disp);font-synthesis:none;text-wrap:balance}
.lf-rio__titulo a{color:inherit;text-decoration:none}
.lf-rio__titulo a::after{content:"";position:absolute;inset:0}
.lf-rio__item:hover .lf-rio__titulo a{text-decoration:underline 2px var(--y);text-underline-offset:4px}
.lf-rio__extracto{display:none}
.lf-rio__img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--gc)}
/* sin destacada: el texto ocupa toda la fila, sin la columna de la foto vacía (template-parts/rio.php) */
.lf-rio__item:not(:has(.lf-rio__img)){grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){
  .lf-rio__item{grid-template-columns:minmax(0,1fr) 264px;gap:var(--espacio-7);padding-block:var(--espacio-6)}
  .lf-rio__titulo{line-height:1.12}
  .lf-rio__extracto{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:var(--espacio-3) 0 0;font:400 16px/1.5 var(--f-txt);color:var(--suau)}
  .lf-rio__img{aspect-ratio:4/3}
}


/* --------------------------------------------------------------------------
   18. Botones, «Ver todo →» y paginación (5.15)
   -------------------------------------------------------------------------- */
.lf-boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--espacio-2);min-height:44px;padding-inline:var(--espacio-5);background:var(--n);color:var(--b);border:1px solid var(--n);font:800 12px/1 var(--f-rot);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.lf-boton:hover{background:var(--y);color:var(--n)}
.lf-boton svg{width:16px;height:16px}
.lf-boton--contorno{background:var(--b);color:var(--n)}
.lf-boton--contorno:hover{background:var(--y)}
.lf-centrado{display:flex;justify-content:center;margin-top:var(--espacio-7)}
@media (max-width:979px){
  .lf-centrado .lf-boton{width:100%}
}
.lf-mas,.lf-cierre__mas{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--espacio-3);font:500 13px/1 var(--f-txt);color:inherit;text-decoration:underline 2px var(--y);text-underline-offset:4px}
/* baseline: «← Anteriores», el estado y el botón sobre la misma línea base */
.lf-paginacion{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--espacio-4);width:min(100%,811px);margin:var(--espacio-8) auto 0;padding-top:var(--espacio-6);border-top:var(--filete-negro)}
/* en la página 1 está desactivado (aria-disabled="true") */
.lf-paginacion__anterior{display:inline-flex;align-items:center;min-height:44px;font:500 13px/1 var(--f-txt);color:var(--suau);text-decoration:none}
.lf-paginacion__anterior:not([aria-disabled="true"]){color:var(--n);text-decoration:underline 2px var(--y);text-underline-offset:4px}
.lf-paginacion__estado{font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.lf-rio+.lf-paginacion{margin-top:0}
.lf-paginacion--izquierda{margin-inline:0}
@media (max-width:979px){
  .lf-paginacion .lf-boton{width:100%}
}
@media (min-width:980px){
  /* el estado, centrado de verdad: no depende del ancho de sus vecinos */
  .lf-paginacion{display:grid;grid-template-columns:1fr auto 1fr}
  .lf-paginacion__anterior{justify-self:start}
  .lf-paginacion .lf-boton{justify-self:end}
}


/* --------------------------------------------------------------------------
   21. Colofón, el pie (5.18)
   -------------------------------------------------------------------------- */
.lf-colofon{margin-top:var(--aire-seccion);background:var(--n);color:var(--b);border-top:8px solid var(--y);padding-block:var(--espacio-8) var(--espacio-7)}
@media (min-width:980px){
  .lf-colofon{padding-block:var(--espacio-9) var(--espacio-7)}
}
.lf-colofon__cabeza{display:flex;flex-direction:column;align-items:flex-start;gap:var(--espacio-4) var(--espacio-6);padding-bottom:var(--espacio-7);border-bottom:var(--filete-oscuro)}
/* 8 px de más arriba y abajo: objetivo de 44 px sin mover la maqueta */
.lf-colofon__logo{display:block;padding-block:8px;margin-block:-8px}
/* negro → blanco */
.lf-colofon__logo img{height:28px;width:auto;filter:invert(1)}
.lf-colofon__lema{margin:0;font:400 20px/1.15 var(--f-disp);font-synthesis:none}
@media (min-width:980px){
  .lf-colofon__cabeza{flex-flow:row wrap;justify-content:space-between;align-items:flex-end}
  .lf-colofon__logo img{height:40px}
  .lf-colofon__lema{font-size:22px;text-align:right}
}
.lf-colofon__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--espacio-7);padding-block:var(--espacio-7)}
@media (min-width:980px){
  .lf-colofon__cols{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco)}
}
.lf-colofon__rotulo{display:inline-block;margin:0 0 var(--espacio-3);font:800 11px/1.3 var(--f-rot);letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 -3px 0 var(--y)}
.lf-colofon__lista{list-style:none;margin:0;padding:0}
/* el enlace llena el li: en dos subcolumnas, si un nombre parte en dos líneas, los
   filetes de la misma fila siguen a la par */
.lf-colofon__lista>li{display:grid}
/* dos subcolumnas de 5 + 5, por columnas */
.lf-colofon__lista--dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:var(--espacio-6)}
@media (max-width:979px){
  /* 16 px entre subcolumnas: «Sants-Montjuïc» no parte por el guion */
  .lf-colofon__lista--dos{column-gap:var(--espacio-4)}
  /* Secciones y La Futura también en dos subcolumnas: el colofón no pasa de pantalla y media */
  .lf-colofon__lista:not(.lf-colofon__lista--dos){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--espacio-4)}
}
.lf-colofon__lista a{display:flex;align-items:baseline;gap:var(--espacio-2);min-height:44px;padding-block:13px 12px;border-bottom:var(--filete-oscuro);font:400 14px/1.3 var(--f-txt);color:var(--b);text-decoration:none}
.lf-colofon__lista a:hover{text-decoration:underline 2px var(--y);text-underline-offset:4px}
.lf-colofon__lista small{margin-left:auto;padding-left:var(--espacio-2);font:500 13px/1 var(--f-txt);font-variant-numeric:tabular-nums;color:var(--linia)}
.lf-colofon__num{flex:none;font:800 12px/1 var(--f-rot);font-variant-numeric:tabular-nums;color:var(--y);min-width:2em}
.lf-colofon__redes{display:flex;gap:var(--espacio-2);margin-top:var(--espacio-5)}
.lf-colofon__redes a{display:grid;place-items:center;width:44px;height:44px;border:var(--filete-oscuro);color:var(--b)}
.lf-colofon__redes a:hover{background:var(--y);color:var(--n)}
.lf-colofon__redes svg{width:20px;height:20px}
.lf-colofon .lf-boton--contorno{background:var(--n);color:var(--b);border-color:var(--b);margin-top:var(--espacio-5)}
.lf-colofon .lf-boton--contorno:hover{background:var(--y);color:var(--n);border-color:var(--y)}
.lf-colofon__pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--espacio-4);padding-top:var(--espacio-6);border-top:var(--filete-oscuro);font:400 13px/1.4 var(--f-txt);color:var(--linia)}
.lf-colofon__pie p{margin:0}
/* idioma sobre negro: #dcdcdc y el activo en blanco subrayado en amarillo */
.lf-colofon .lf-idioma,.lf-colofon .lf-idioma a{color:var(--linia)}
.lf-colofon .lf-idioma a[aria-current="true"]{color:var(--b)}
/* CAT a ras del contenedor (el enlace lleva 6 px de relleno a cada lado) */
.lf-colofon__pie .lf-idioma{margin-right:-6px}
/* Con el aviso de cookies a la vista, el colofón crece por abajo lo que mide el aviso (--lf-aviso-alto, que fija
   js/consentimiento.js): su último renglón queda a la vista y el hueco es negro, no blanco. */
.lf-colofon{padding-bottom:calc(var(--espacio-7) + var(--lf-aviso-alto, 0px))}


/* ==========================================================================
   Del tema, fuera de la maqueta: enlace para saltar, foco, idioma de GTranslate,
   buscador, panel del móvil, aviso de cookies y contenido externo bloqueado.
   ========================================================================== */

.lf-saltar { position: absolute; left: 8px; top: -100px; z-index: 30; background: var(--y); color: var(--n); font: 800 13px/1 var(--f-rot); text-transform: uppercase; padding: 14px 16px; }
.lf-saltar:focus { top: 8px; }

.lf-sin-scroll { overflow: hidden; }

/* Aviso de cookies visible: el JS fija su alto en --lf-aviso-alto. El foco no queda tapado al hacer scroll
   ni al tabular, y el colofón se alarga por debajo con su propio fondo negro: sin franja blanca. */
html { scroll-padding-bottom: var(--lf-aviso-alto, 0px); }
/* La barra del móvil es fija (sticky): «Saltar al contenido» y los anclas no quedan debajo de ella. */
html { scroll-padding-top: var(--cabecera); }

/* Foco visible en lo que no es enlace ni botón (campos, carruseles): contorno negro de 2 px con halo amarillo.
   Los enlaces y botones llevan el de la maqueta (base.css). */
:focus-visible { outline: 2px solid var(--n); outline-offset: 2px; box-shadow: 0 0 0 6px var(--y); }

/* Idioma: GTranslate pinta sus enlaces en .lf-idioma__enlaces y el JS los deja como la maqueta (CAST · CAT, con
   aria-current en el activo). El hueco no cuenta en la maqueta: los enlaces y el punto son hijos de .lf-idioma. */
.lf-idioma__enlaces { display: contents; }

/* Lupa y menú abiertos */
.lf-boton-icono[aria-expanded="true"] { background: var(--gc); }

/* Logotipo sin imagen: el nombre del sitio en texto. */
.lf-logo-texto { font: 800 24px/1 var(--f-rot); text-transform: uppercase; text-decoration: none; color: inherit; white-space: nowrap; }

/* Buscador desplegable, bajo la cabecera. En el móvil se queda bajo la barra fija aunque se abra con scroll. */
.lf-buscador { position: sticky; top: calc(var(--cabecera) + 1px); z-index: 9; padding-block: var(--espacio-3) var(--espacio-4); border-bottom: var(--filete); background: var(--b); }
.lf-buscar { display: flex; gap: var(--espacio-2); }
.lf-buscar__campo { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; font: 400 16px var(--f-txt); border: 1px solid var(--n); border-radius: 0; background: var(--b); color: var(--n); }
.lf-buscar__enviar { min-height: 44px; padding: 0 16px; border: 0; background: var(--n); color: var(--b); font: 800 12px/1 var(--f-rot); text-transform: uppercase; cursor: pointer; }

/* Panel a pantalla completa (móvil), bajo la barra: el JS fija --lf-panel-arriba al abrirlo. */
.lf-panel { position: fixed; inset: var(--lf-panel-arriba, var(--cabecera)) 0 0 0; z-index: 19; overflow-y: auto; background: var(--b); padding: var(--espacio-2) var(--margen-lateral) var(--espacio-8); display: grid; gap: var(--espacio-6); align-content: start; }
.lf-panel[hidden] { display: none; }
.lf-panel__cerrar { justify-self: end; display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--n); border-radius: 22px; background: var(--b); color: var(--n); font: 800 12.5px/1 var(--f-rot); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.lf-panel__cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lf-panel__lista, .lf-panel__legal-lista { list-style: none; margin: 0; padding: 0; }
.lf-panel__enlace { display: flex; align-items: center; min-height: 52px; font: 800 20px/1 var(--f-rot); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--linia); }
/* Bajo «Barcelona», el carril de distritos (template-parts/distritos.php), a sangre dentro del panel. */
.lf-panel .lf-distritos--carril { margin-block: var(--espacio-3); }
.lf-panel__legal-lista a { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--suau); }
/* Redes del panel (las del colofón van con .lf-colofon__redes). */
.lf-redes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--espacio-1); }
.lf-redes__enlace { width: 44px; height: 44px; display: grid; place-items: center; color: inherit; }
.lf-redes__enlace svg { width: 22px; height: 22px; }
@media (min-width: 980px) {
	.lf-panel { display: none; }
	/* La mancheta no es fija: el buscador va en su sitio. Se abre bajo la lupa, a la derecha, con un ancho de campo razonable. */
	.lf-buscador { position: static; }
	.lf-buscador .lf-buscar { max-width: 560px; margin-left: auto; }
}

/* Enlace «Registrar redactor» de la cabecera (solo para quien puede dar de alta redactores):
   icono de 44 px en el móvil y texto desde 980 px. */
.lf-registro-enlace { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; color: var(--n); text-decoration: none; font: 800 12.5px/1 var(--f-rot); text-transform: uppercase; letter-spacing: .03em; }
.lf-registro-enlace svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lf-registro-enlace__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 980px) {
	.lf-registro-enlace { padding-inline: 8px; }
	.lf-registro-enlace__texto { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; }
}

/* Aviso de cookies: barra inferior, no modal. Aceptar y Rechazar son idénticos en tamaño y peso.
   La barra va a todo el ancho; su contenido, en el contenedor. Sin sombra: la separa la raya negra de arriba. */
.lf-cookies { position: fixed; inset: auto 0 0 0; z-index: 40; max-height: 88vh; overflow-y: auto; background: var(--b); color: var(--n); border-top: 3px solid var(--n); padding-block: var(--espacio-4); }
.lf-cookies[hidden] { display: none; }
.lf-cookies__interior { display: grid; gap: 14px; }
.lf-cookies__texto { margin: 0; font-size: 14.5px; line-height: 1.5; }
.lf-cookies__texto a { color: var(--n); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--y); text-decoration-thickness: 3px; }
.lf-cookies__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf-cookies__boton { min-height: 44px; padding: 0 18px; border: 2px solid var(--n); background: var(--n); color: var(--b); font: 800 12.5px/1 var(--f-rot); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.lf-cookies__boton--claro { grid-column: 1 / -1; background: var(--b); color: var(--n); }
.lf-cookies__boton--claro[aria-expanded="true"] { background: var(--gc); }
.lf-cookies__config[hidden] { display: none; }
.lf-cookies__config { display: grid; gap: 12px; border-top: 1px solid var(--linia); padding-top: 12px; }
.lf-cookies__config .lf-cookies__boton { justify-self: start; }
.lf-cookies__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lf-cookies__opcion { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 8px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.lf-cookies__opcion b { display: block; font-weight: 700; }
.lf-cookies__interruptor { flex: none; appearance: none; width: 46px; height: 26px; margin: 2px 0 0; border: 2px solid var(--n); border-radius: 13px; background: var(--b); position: relative; cursor: inherit; }
.lf-cookies__interruptor::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--n); }
.lf-cookies__interruptor:checked { background: var(--n); }
.lf-cookies__interruptor:checked::before { left: 23px; background: var(--y); }
/* Desactivado («Necesarias», siempre activas): en gris de la paleta, sin transparencias. */
.lf-cookies__interruptor:disabled { border-color: var(--suau); }
.lf-cookies__interruptor:disabled:checked { background: var(--suau); }
.lf-cookies__interruptor:disabled + span { color: var(--suau); }
@media (prefers-reduced-motion: no-preference) {
	.lf-cookies:not([hidden]) { animation: lf-cookies-entra .28s ease-out; }
	.lf-cookies__interruptor::before { transition: left .15s; }
}
@keyframes lf-cookies-entra { from { transform: translateY(100%); } }

/* «Preferencias de cookies»: el botón que reabre el aviso (js/consentimiento.js lo busca por esta clase, que va
   sola en el botón). En el colofón, con el aspecto del .lf-boton--contorno sobre negro de la maqueta. */
.lf-preferencias-cookies { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--espacio-5); padding: 0 var(--espacio-5); background: var(--n); color: var(--b); border: 1px solid var(--b); font: 800 12px/1 var(--f-rot); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.lf-preferencias-cookies:hover { background: var(--y); color: var(--n); border-color: var(--y); }

@media (min-width: 980px) {
	.lf-cookies { padding-block: var(--espacio-5); }
	.lf-cookies__interior { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--espacio-7); }
	.lf-cookies__botones { display: flex; }
	.lf-cookies__boton--claro { grid-column: auto; }
	.lf-cookies__config { grid-column: 1 / -1; }
}

/* Contenido de otro sitio bloqueado hasta el consentimiento (vídeos, mapas, reproductores…): marcador con la
   proporción del iframe o, si solo traía alto, con ese alto (--lf-alto). */
.lf-video-bloqueado { position: relative; aspect-ratio: var(--lf-ratio, 16/9); height: var(--lf-alto, auto); background: var(--n); color: var(--b); overflow: hidden; }
.lf-video-bloqueado iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lf-video-bloqueado__aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.lf-video-bloqueado__texto { margin: 0; font-size: 14px; line-height: 1.4; }
.lf-video-bloqueado__boton { min-height: 44px; padding: 0 20px; border: 0; background: var(--y); color: var(--n); font: 800 12.5px/1 var(--f-rot); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.lf-video-bloqueado__enlace { display: inline-flex; align-items: center; min-height: 44px; color: var(--b); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.lf-pagina .lf-video-bloqueado :focus-visible { outline-color: var(--y); box-shadow: none; }
.lf-video-bloqueado--activo .lf-video-bloqueado__aviso { display: none; }
/* Mientras está bloqueado, sitio para el texto, el botón y el enlace aunque el iframe fuera bajo. */
.lf-video-bloqueado:not(.lf-video-bloqueado--activo) { min-height: 180px; }
.wp-has-aspect-ratio .lf-video-bloqueado { position: absolute; inset: 0; aspect-ratio: auto; }