/* ============================================================
   lectura.css — la versión de lectura de onamcorda.cat
   28 de agosto de 2026

   Mismo contenido y mismas clases que la web normal; lo único que
   cambia es cómo se ve. Está pensada para leerse, no para lucir:

     · negro sobre blanco, sin fotos de fondo detrás del texto
     · cuerpo de 20 px y títulos grandes, ninguna letra fina
     · una sola columna, líneas de 66 caracteres como mucho
     · enlaces siempre subrayados y objetivos grandes
     · sin animaciones, sin parallax, sin JavaScript

   Las imágenes se siguen viendo: quitarlas sería empobrecer la
   página, no hacerla accesible.
   ============================================================ */

@font-face{font-family:Inter;src:url(/font/inter-var.woff2) format("woff2");
           font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --c-ink:#000; --c-bg:#fff; --c-link:#0b3d91; --c-visit:#5b2a86;
  --c-line:#000; --c-soft:#f2f2f2;
  --f:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --w:33rem;            /* unos 66 caracteres con la base de 20 px */
}

*,*::before,*::after{box-sizing:border-box}
/* La base va en el html, no en el body: si no, los tamanos en rem se calculan
   sobre los 16 px del navegador y el cuerpo del texto sale mas pequeno de lo
   que se pretendia. Medido el 28/08: .TXT_BODY salia a 16 px en vez de 20. */
html{font-size:20px;scroll-behavior:auto}
body{margin:0;background:var(--c-bg);color:var(--c-ink);
     font-family:var(--f);font-size:1rem;line-height:1.7;font-weight:400}
img{max-width:100%;height:auto;display:block}

/* el foco, bien visible y siempre */
:focus-visible{outline:4px solid #000;outline-offset:3px}

/* ---------- generales ---------- */
.TIT_H1{font-size:2rem;font-weight:700;line-height:1.25;margin:0 0 .5em}
.TIT_H2{font-size:1.6rem;font-weight:700;line-height:1.3;margin:2em 0 .4em;
        border-bottom:3px solid var(--c-line);padding-bottom:.2em}
.TIT_H3,.TIT_H4{font-size:1.25rem;font-weight:700;line-height:1.35;margin:1.2em 0 .2em}
.TXT_BODY,.TXT_LEAD,.TXT_SM{font-size:1rem;font-weight:400;margin:.6em 0}
.TXT_SM{color:#333}

.LNK_TXT,.LNK_BLOCK,.LNK_ICO{color:var(--c-link);text-decoration:underline;
        text-underline-offset:3px}
.LNK_TXT:visited{color:var(--c-visit)}
.LNK_TXT:hover,.LNK_TXT:focus-visible{background:#ff0;color:#000}
a{min-height:24px}

.BTN_MAIN{display:inline-block;padding:14px 22px;margin:6px 6px 6px 0;
          background:#000;color:#fff;text-decoration:underline;
          font-size:1rem;font-weight:700;border-radius:6px}
.BTN_MAIN:hover,.BTN_MAIN:focus-visible{background:#fff;color:#000;outline:3px solid #000}

.LNK_SKIP{position:absolute;left:-9999px}
.LNK_SKIP:focus{left:8px;top:8px;z-index:9;background:#ff0;color:#000;padding:14px 18px}

.LST_ROW,.LST_COL{list-style:none;margin:0;padding:0}
.LST_ROW{display:flex;flex-wrap:wrap;gap:8px}
.LST_COL{display:flex;flex-direction:column;gap:4px}
.ICO{width:28px;height:28px;fill:currentColor}

.BOX_SECT{padding:1.5rem 1.25rem;max-width:var(--w);margin-inline:auto}
.BOX_CARD{border:2px solid var(--c-line);border-radius:6px;padding:1rem;margin:1.5rem 0}
.BOX_BAR{background:#000;color:#fff;padding:12px 16px}
.BOX_BAR .LNK_TXT{color:#fff}
.BAR_WRAP{max-width:var(--w);margin-inline:auto;display:flex;
          align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- el selector de idioma ---------- */
.LANGS{gap:6px}
.LANG_A{display:inline-block;padding:10px 14px;border:2px solid currentColor;
        border-radius:6px;text-decoration:none;font-weight:700}
.LANG_A[aria-current]{background:#000;color:#fff}
.BOX_BAR .LANG_A[aria-current]{background:#fff;color:#000}

/* ---------- la cabecera: sin foto detrás del texto ---------- */
.HERO{background:#000;color:#fff;padding:1.5rem 1.25rem;min-height:0}
.HERO::before{display:none}
.HERO_BOX{max-width:var(--w);margin-inline:auto;background:none;padding:0}
.HERO_LOGO{width:120px;margin:0 0 1rem}
.HERO .TIT_H1,.HERO_SUB{color:#fff}
.HERO .LANGS{position:static;margin-bottom:1rem}
.HERO .LANG_A{color:#fff}

/* ---------- las secciones ---------- */
.POST_GRID,.COLAB_GRID,.PROJ_GRID,.PROJ_SUB,.PROJ_WRAP,.FOOT_WRAP{
  display:block}
.PROJ_SECT{background:#fff}
.PROJ_FOTOS{display:flex;gap:10px;flex-wrap:wrap;margin:1rem 0}
.PROJ_FOTO{width:150px;border-radius:4px;margin:0}
.PROJ_FOTO_IN{width:150px;margin:0}
.PROJ_ICO{width:56px;height:56px}
.PROJ_SECT .PROJ_ICO{filter:invert(1)}   /* los iconos son blancos: sobre blanco no se verían */

.POST_IMG,.COLAB_IMG,.POST_IMG_GRAN{width:100%;max-width:320px;border-radius:4px;margin-bottom:.5rem}
.MEDIA_VIDEO{width:100%;max-width:var(--w);background:#000}

/* ---------- el pie ---------- */
.FOOT{background:#000;color:#fff;padding:2rem 1.25rem;margin-top:3rem}
.FOOT_WRAP{max-width:var(--w);margin-inline:auto}
.FOOT .TIT_H3{color:#fff;margin-top:1.5em}
.FOOT .TXT_BODY,.FOOT .TXT_SM,.FOOT_ADDR{color:#fff}
.FOOT .LNK_TXT{color:#9ecbff}
.FOOT .LNK_TXT:visited{color:#d8b4fe}
.FOOT_ADDR{font-style:normal}
.FOOT_LINKS a,.FOOT_ADDR a{display:inline-block;padding:10px 0}

.BTN_TOP{display:inline-block;margin:2rem 0;padding:14px 20px;
         background:#000;color:#fff;text-decoration:underline;border-radius:6px}

@media print{
  .HERO,.FOOT,.BOX_BAR{background:none;color:#000}
  .HERO .TIT_H1,.HERO_SUB,.FOOT .TIT_H3,.FOOT_ADDR{color:#000}
  .LANGS,.BTN_TOP{display:none}
}

/* paginas legales en modo lectura: la misma medida que el resto */
.LEGAL_WRAP{max-width:var(--w);margin-inline:auto}
.LEGAL_BLOC{margin-bottom:2rem}