/* ==========================================================================
   La Futura · «Periódico de barrio» · base.css
   Tokens, base y utilidades de docs/maquetas/periodico-de-barrio/lafutura.css
   (secciones 2, 3 y 22). Móvil primero; escritorio desde 980 px; ajuste de
   medianil a 1200 px. Clases lf- en BEM.

   Paleta única, solo por tokens: #000 #fff #fec601 #5b5f69 #dcdcdc #eee.
   Bagnard siempre a 400 y sin síntesis (font-synthesis:none en toda la página).

   La hoja de la maqueta va repartida en tres ficheros, que se cargan en este
   orden: base.css → componentes.css → plantillas.css. La base cuelga de
   .lf-pagina, que en el tema es el <body> (filtro body_class de inc/setup.php).
   Las fuentes (los cuatro ficheros de siempre) las declara theme.json: aquí no
   hay @font-face.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tokens (spec 2)
   -------------------------------------------------------------------------- */
:root{
  --n:#000; --b:#fff; --y:#fec601; --suau:#5b5f69; --linia:#dcdcdc; --gc:#eee;
  /* las mismas familias que theme.json */
  --f-disp: Bagnard, Georgia, serif;
  --f-rot: "Cooper Hewitt", "Work Sans", sans-serif;
  --f-txt: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* medida del texto en px (65ch de Work Sans a 17 px): sumario, párrafos, ladillos y
     etiquetas comparten el mismo borde derecho; en ch cada uno la medía con su fuente */
  --medida: 687px; --cabecera: 56px;
  --contenedor: 1240px;
  /* 16 px en el móvil, 48 px a 1440 */
  --margen-lateral: clamp(16px, 4vw, 48px);
  --espacio-1:4px; --espacio-2:8px; --espacio-3:12px; --espacio-4:16px; --espacio-5:20px;
  --espacio-6:24px; --espacio-7:32px; --espacio-8:48px; --espacio-9:64px;

  /* Ritmo */
  --hueco:16px;
  --aire-seccion:48px;
  /* Estructura */
  --regla:4px solid var(--n);
  --filete-negro:1px solid var(--n);
  --filete:1px solid var(--linia);
  --filete-oscuro:1px solid var(--suau);
  /* Titulares (Bagnard) */
  --t-ap:31px;
  --t-h1:34px; --t-h1-l:30px; --t-h1-ml:28px;
  --t-2:26px;
  --t-2s:26px;
  --t-3:21px;
  --t-4:19px;
  --t-5:18px;
  --t-rio:19px; --t-entr:18px; --t-ladillo:24px; --t-cita:22px;
  /* Cooper */
  --r-mod:18px;
  --r-port:40px;
  --num-dist:28px;
}
@media (min-width:980px){
  :root{
    --hueco:32px; --aire-seccion:96px;
    --t-ap:44px; --t-h1:52px; --t-h1-l:44px; --t-h1-ml:40px;
    --t-2:36px; --t-2s:40px; --t-3:24px; --t-4:20px; --t-rio:24px; --t-entr:20px;
    --t-ladillo:28px; --t-cita:26px;
    --r-mod:24px; --r-port:72px; --num-dist:44px;
  }
}
@media (min-width:1200px){
  :root{ --hueco:48px; }
}


/* --------------------------------------------------------------------------
   Base (spec 2.4)
   Las reglas genéricas van con :where() para no pisar a las de componente.
   -------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{margin:0}
.lf-pagina{background:var(--b);color:var(--n);font:400 17px/1.62 var(--f-txt);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
/* también la raíz: con relleno en .lf-pagina, la página no se desborda */
.lf-pagina,.lf-pagina *,.lf-pagina *::before,.lf-pagina *::after{box-sizing:border-box}
:where(.lf-pagina) :where(p,figure,blockquote,h1,h2,h3,h4,h5,h6,dl,dd){margin:0}
:where(.lf-pagina) :where(ol[class],ul[class]){margin:0;padding:0;list-style:none}
:where(.lf-pagina) img{max-width:100%;height:auto;display:block}
:where(.lf-pagina) :where(h1,h2,h3,h4){font-family:var(--f-disp);font-weight:400;font-synthesis:none}
:where(.lf-pagina) a{color:inherit;text-decoration-color:var(--y);text-underline-offset:.15em}
:where(.lf-pagina) button{font:inherit;color:inherit;cursor:pointer}
:where(.lf-pagina) svg{flex:none;display:block}
/* vídeos e incrustados del contenido: nunca más anchos que su caja. Un iframe no tiene
   proporción propia: con height:auto se quedaría en 150 px, así que conserva su atributo height */
video{max-width:100%;height:auto}
iframe{max-width:100%}
.lf-pagina :is(a,button):focus-visible{outline:2px solid var(--n);outline-offset:2px;box-shadow:0 0 0 5px var(--y)}
:is(.lf-banda--negra,.lf-colofon) :is(a,button):focus-visible{outline-color:var(--b)}
/* Solo para lectores de pantalla: encabezados que ordenan la jerarquía sin verse, etiquetas y avisos.
   Es la única clase para esto. */
.lf-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lf-contenedor{width:min(100% - 2 * var(--margen-lateral), var(--contenedor));margin-inline:auto}
.lf-seccion{margin-top:var(--aire-seccion)}
.lf-primera{margin-top:var(--espacio-4)}
@media (min-width:980px){
  .lf-primera{margin-top:var(--espacio-7)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}


/* --------------------------------------------------------------------------
   Utilidades
   En la maqueta van al final de la hoja para ganar a los componentes en los
   empates. Aquí van en base.css, que se carga primero: el «html » de delante
   les suma un elemento de especificidad y así ganan los mismos empates que en
   la maqueta (con las reglas de componentes y plantillas de su misma
   especificidad) y pierden con las que les ganaban (las de una más).
   -------------------------------------------------------------------------- */
html .lf-mt-4{margin-top:var(--espacio-4)}
html .lf-mt-5{margin-top:var(--espacio-5)}
html .lf-mt-6{margin-top:var(--espacio-6)}
html .lf-mt-7{margin-top:var(--espacio-7)}
html .lf-mt-8{margin-top:var(--espacio-8)}
html .lf-mt-9{margin-top:var(--espacio-9)}
html .lf-nobr{white-space:nowrap}
html .lf-pagina .lf-lineas-2,html .lf-pagina .lf-lineas-3,html .lf-pagina .lf-lineas-4,html .lf-pagina .lf-lineas-5{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
html .lf-pagina .lf-lineas-2{-webkit-line-clamp:2}
html .lf-pagina .lf-lineas-3{-webkit-line-clamp:3}
html .lf-pagina .lf-lineas-4{-webkit-line-clamp:4}
html .lf-pagina .lf-lineas-5{-webkit-line-clamp:5}
@media (max-width:979px){
  .lf-solo-escritorio{display:none !important}
}
@media (min-width:980px){
  .lf-solo-movil{display:none !important}
}