/* ============================================================
   onamcorda.css — hoja unica de la web estatica
   Version 0.1 · 27 de agosto de 2026
   Copia el estilo de onamcorda.cat, medido en el navegador, traducido
   a nuestras claves. Sin JavaScript. Sin dependencias externas.

   ORDEN: 1 tokens · 2 base · 3 clases GENERALES · 4 clases ESPECIFICAS
   REGLA: tipografia y color viven SOLO en las generales.
   ============================================================ */

/* ---------- 0. FUENTES, autoalojadas (cambio C6) ----------
   Variable y recortada a latin: Inter, 102 KB.
   Nada sale hacia Google. */
@font-face{font-family:Inter;src:url(/font/inter-var.woff2) format("woff2");
           font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- 1. TOKENS ---------- */
:root{
  /* color, del theme.json real */
  --c-accent:#F69946;
  --c-btn:#ffd4d9;   /* fondo de los botones PROJECTE y CONTACTE, 28/08 */
  --c-ink:#000;
  --c-ink-soft:#141414;      /* medido en los parrafos */
  --c-bg:#fff;
  --c-bg-soft:#f5fafd;
  --c-bg-alt:#ebf3ff;
  --c-dark:#101010;          /* medido en el pie */
  --c-on-dark:#fff;
  --c-shadow:rgba(0,0,0,.13);

  /* letra */
  --f-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-body:clamp(18px,1.6vw,20px);   /* medido: 18px a 444, 20px a 1440 */
  --t-sm:16px;
  --t-h1:clamp(30px,2.8vw,40px);     /* medido: 30 / 40 */
  --t-h2:26px;
  --t-h3:1.17em;
  --lh:1.5;

  /* medidas */
  --w-max:1140px;                    /* medido: 80% de 1425 */
  --gap:24px;                        /* medido */
  --pad-sect:clamp(40px,6vw,80px);
  --r:5px;                           /* radio del boton, medido */
  --hero-h:700px;                    /* medido */
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}         /* el boton de subir, sin una linea de JS */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:var(--lh);
  color:var(--c-ink);
  background:var(--c-bg);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}

/* ---------- 3. GENERALES: aqui, y solo aqui, letra y color ---------- */
.TIT_H1{font-family:var(--f-body);font-size:var(--t-h1);font-weight:700;
        line-height:1.1;letter-spacing:.78px;color:var(--c-on-dark);margin:.25em 0 0}
.TIT_H2{font-family:var(--f-body);font-size:var(--t-h2);font-weight:800;
        line-height:1.5;color:var(--c-ink);margin:0}
.TIT_H3{font-family:var(--f-body);font-size:var(--t-h3);font-weight:700;
        line-height:1.35;color:var(--c-ink);margin:.75em 0 0}
.TIT_H4{font-family:var(--f-body);font-size:19px;font-weight:700;
        line-height:1.35;color:var(--c-ink);margin:.75em 0 0}

.TXT_BODY{font-size:var(--t-body);font-weight:400;color:var(--c-ink);margin:.5em 0 0}
.TXT_LEAD{font-size:var(--t-sm);font-weight:400;color:var(--c-ink-soft);margin:.6em 0 0}
.TXT_SM  {font-size:var(--t-sm);font-weight:400;color:var(--c-ink-soft);margin:.3em 0 0}

/* Los dos botones de la cabecera, PROJECTE y CONTACTE.
   Familia: sans-serif del sistema, pedida el 28/08. Es generica, asi que no
   hay ningun fichero que descargar ni que servir.
   Color, tamano y forma: propuesta del 28/08 —fondo #ffd4d9, tinta negra,
   esquinas de 2 px, 16x28 de aire, 22 px, peso 800, sin borde—.
   Efecto cristal pedido el 28/08: el rosa va al 65% con desenfoque de 12 px
   detras. El 65% no es un capricho: medido sobre la foto de la cabecera con su
   velo del 60%, el negro sobre ese cristal da 8,3:1 en la zona media, 11,7:1 en
   la mas clara y 6,6:1 si detras hubiera negro puro. Nunca baja de 4,5:1, que es
   el minimo. A opaco daria 15,67:1; el naranja de antes daba 7,93:1.
   El filo blanco de 1 px va por dentro con box-shadow, no con border, para no
   contradecir el 'border: none' de la propuesta ni mover el tamano de la caja. */
.BTN_MAIN{display:inline-block;padding:16px 28px;border-radius:2px;border:none;
          background:rgba(255,212,217,.65);color:#000;text-decoration:none;
          -webkit-backdrop-filter:blur(12px) saturate(1.6);
          backdrop-filter:blur(12px) saturate(1.6);
          box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 4px 18px rgba(0,0,0,.25);
          font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
          font-size:22px;font-weight:800;letter-spacing:0;text-transform:none;
          transition:background .2s ease, backdrop-filter .2s ease, box-shadow .2s ease}
/* Al pasar por encima el cristal se cierra: mas color y mas desenfoque detras. */
.BTN_MAIN:hover{background:rgba(255,212,217,.85);
          -webkit-backdrop-filter:blur(16px) saturate(1.8);
          backdrop-filter:blur(16px) saturate(1.8);
          box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 22px rgba(0,0,0,.3)}
/* Con el teclado no basta con un matiz: se invierte y ademas se dibuja el foco. */
.BTN_MAIN:focus-visible{background:var(--c-ink);color:var(--c-btn);
          -webkit-backdrop-filter:none;backdrop-filter:none;
          outline:3px solid var(--c-btn);outline-offset:3px}
/* Donde no haya backdrop-filter, el fondo sube a opaco y se lee igual. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .BTN_MAIN{background:var(--c-btn)}
  .BTN_MAIN:hover{background:var(--c-btn)}
}

.LNK_TXT{text-decoration:none}
.LNK_TXT:hover,.LNK_TXT:focus-visible{color:var(--c-accent)}
.LNK_BLOCK{display:block;text-decoration:none}
.LNK_ICO{display:inline-flex;padding:6px;color:inherit}
.LNK_ICO:hover,.LNK_ICO:focus-visible{color:var(--c-accent)}
.LNK_SKIP{position:absolute;left:-9999px}
.LNK_SKIP:focus{left:8px;top:8px;z-index:9;background:var(--c-bg);padding:12px 16px}

.IMG_SQ  {aspect-ratio:1/1;object-fit:cover;width:100%}
.IMG_WIDE{aspect-ratio:3/2;object-fit:cover;width:100%}
.ICO{width:24px;height:24px;fill:currentColor}

.LST_ROW{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0;
         justify-content:center}
.LST_COL{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}

.BOX_SECT{padding:var(--pad-sect) 24px}
.BOX_SECT > *{max-width:var(--w-max);margin-inline:auto}
.BOX_CARD{box-shadow:0 2px 6px var(--c-shadow);background:var(--c-bg);overflow:hidden}

/* ---------- 4. ESPECIFICAS: colocar. Ni letra ni color ---------- */

/* cabecera */
.HERO{min-height:var(--hero-h);display:grid;place-content:center;text-align:center;
      position:relative;padding:var(--pad-sect) 24px;
      background:#333 url(/img/ui/fondo-900.webp) center/cover no-repeat;
      background-attachment:fixed}

/* En movil y en cualquier pantalla tactil, el fondo NO va fijo.
   iOS y la mayoria de navegadores moviles calculan el tamano contra la ventana
   y con `cover` acaban por no ensenar nada. Medido el 28/08/2026: la imagen se
   servia bien (200, 24 KB) y aun asi no se veia. */
@media (max-width:1023px), (hover:none) {
  .HERO{background-attachment:scroll}
}
@media (min-width:900px){.HERO{background-image:url(/img/ui/fondo-1800.webp)}}
.HERO > *{position:relative;z-index:1}
.HERO::before{content:"";position:absolute;inset:0;background:#000;opacity:.6}
/* Sin panel: el propietario lo quiere fuera. El contraste lo sostiene el velo
   sobre la foto, medido sobre la imagen real (fondo-1800.webp) el 28/08:
   luminancia media 0,09 y maxima 0,66 en la zona del texto. Con velo del 60%
   el texto blanco queda en 12,2:1 de media y 3,4:1 en el pixel mas claro, que
   son cuatro motas. La sombra del texto cubre justo esas motas. */
.HERO_BOX{max-width:640px;margin-inline:auto;background:none;padding:0}
.HERO_LOGO{width:220px;max-width:60vw;margin-inline:auto}
.HERO_SUB{color:var(--c-on-dark);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.HERO .TIT_H1{text-shadow:0 2px 6px rgba(0,0,0,.7)}
.HERO_NAV{margin-top:24px;gap:16px}

/* rejilla comun a las dos secciones de carpeta */
.POST_GRID,.COLAB_GRID{
  display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:32px}

.POST_SECT_TIT,.COLAB_SECT_TIT{text-align:center}
.COLAB_SECT_SUB{text-align:center;max-width:70ch}

/* blog */
.POST_CARD{display:flex;flex-direction:column}
.POST_CARD > :not(.POST_LINK){padding-inline:16px}
.POST_CARD > :last-child{padding-bottom:16px}
.POST_META{display:flex;gap:12px;flex-wrap:wrap}

/* el projecte: fondo naranja, fotos a un lado y textos al otro */
.PROJ_SECT{background:var(--c-accent)}
.PROJ_WRAP{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:center}
.PROJ_FOTOS{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap) 36px;align-items:start}
.PROJ_COL{display:grid;gap:var(--gap);align-content:start}
.PROJ_FOTO{aspect-ratio:9/10;object-fit:cover;width:100%;border-radius:10px}
.PROJ_FOTO_W{aspect-ratio:4/3}
.PROJ_FOTO_IN{aspect-ratio:4/3;width:85%;margin-left:15%}
.PROJ_COL_BAJA{margin-top:9%}
.PROJ_SECT_TIT{text-align:left}
.PROJ_ITEM{box-shadow:none;background:none;text-align:left;padding:0}
.PROJ_TXT{max-width:62ch}
.PROJ_ICO{width:64px;height:64px;aspect-ratio:1/1}
.PROJ_SUB{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:24px}

/* colaboradors */
.COLAB_CARD{text-align:center;padding-bottom:16px}
.COLAB_NAME{margin-top:16px}
.COLAB_LINKS{margin-top:12px}

/* barra de las paginas interiores.
   PRUEBA del 28/08: en el naranja de EL PROJECTE en vez de en negro.
   Para deshacerlo: --c-accent -> --c-dark y --c-ink -> --c-on-dark. */
.BOX_BAR{background:var(--c-accent);color:var(--c-ink);padding:12px 24px}
.BOX_BAR .LNK_TXT{color:var(--c-ink)}
.BOX_BAR .LNK_TXT:hover,.BOX_BAR .LNK_TXT:focus-visible{text-decoration:underline}
.BAR_WRAP{max-width:var(--w-max);margin-inline:auto;
          display:flex;align-items:center;justify-content:space-between;gap:16px}

/* selector de idioma */
.LANGS{gap:4px;align-items:center}
.LANG_A{display:inline-block;padding:6px 10px;border-radius:var(--r);
        font-size:var(--t-sm);font-weight:600;letter-spacing:1px;
        color:inherit;text-decoration:none;opacity:.65}
.LANG_A:hover,.LANG_A:focus-visible{opacity:1}
.LANG_A[aria-current]{opacity:1;background:rgba(0,0,0,.12)}
.HERO .LANGS{position:absolute;top:16px;right:24px;z-index:2}
.HERO .LANG_A{color:var(--c-on-dark)}
.HERO .LANG_A[aria-current]{background:rgba(255,255,255,.22)}

/* pagina de una entrada */
.POST_HEAD{text-align:center}
.POST_TORNA{text-decoration:none}
.POST_LOGO{width:75px;height:auto}
.POST_LOGO_LINK{flex:0 0 auto}
.POST_H1{color:var(--c-ink)}
.POST_COS > *{max-width:900px}
.POST_ART{display:grid;gap:16px}
.POST_IMG_GRAN{width:100%;border-radius:10px;aspect-ratio:3/2;object-fit:cover}
.POST_PAR{margin:0;max-width:70ch}
.POST_PDF{margin:0}
.MEDIA_VIDEO{width:100%;max-width:900px;border-radius:10px;background:#000;aspect-ratio:9/16}

/* pie */
.FOOT{background:var(--c-dark);color:var(--c-on-dark);padding:48px 24px}
.FOOT .TIT_H3,.FOOT .TXT_BODY,.FOOT .TXT_SM{color:var(--c-on-dark)}
.FOOT_WRAP{max-width:var(--w-max);margin-inline:auto;
           display:grid;gap:32px;grid-template-columns:1fr}
.FOOT_ADDR{font-style:normal}
.FOOT_LINKS a,.FOOT_ADDR a{display:inline-block;padding:10px 0;min-height:24px}
.FOOT_LINKS{gap:0}
.FOOT_SOCIAL{justify-content:flex-start}

/* boton de subir */
/* El boton de subir: fondo al 40% y efecto cristal al pasar por encima.
   Y no aparece hasta que se hace scroll, con animacion ligada al desplazamiento
   —sin una linea de JavaScript—. Donde el navegador no la entienda, el boton se
   queda visible como hasta ahora: nadie se queda sin el. */
.BTN_TOP{position:fixed;right:20px;bottom:20px;z-index:8;
         display:inline-flex;padding:14px;border-radius:var(--r);
         background:rgba(255,212,217,.4);color:var(--c-ink);text-decoration:none;
         border:1px solid rgba(255,255,255,.25);
         box-shadow:0 2px 6px var(--c-shadow);
         -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
         transition:background .2s ease, box-shadow .2s ease, backdrop-filter .2s ease}
.BTN_TOP:hover,.BTN_TOP:focus-visible{
         background:rgba(255,255,255,.25);
         border-color:rgba(255,255,255,.55);
         -webkit-backdrop-filter:blur(12px) saturate(1.6);
         backdrop-filter:blur(12px) saturate(1.6);
         box-shadow:0 6px 22px rgba(0,0,0,.28)}

/* No aparece hasta que se hace scroll.
   Lo gobierna un guion de cuatro lineas que pone la clase JS en <html> y le
   anade AVALL cuando la pagina ha bajado 260 pixeles. Si no hay JavaScript la
   clase JS no llega a ponerse y el boton se queda visible siempre: nadie se
   queda sin el.
   Antes esto se hacia con animation-timeline: scroll(root), sin JavaScript, y
   yo lo di por roto. Me equivoque: lo medi en un panel de navegador oculto, y
   en una pestana oculta el navegador congela las animaciones —comprobado el
   29/08: document.hidden = true, requestAnimationFrame no dispara y los eventos
   de scroll tampoco—. Aquella medicion no valia.
   Aun asi se queda el guion, por un motivo distinto y este si comprobable:
   animation-timeline no existe en Safari ni en Firefox, o sea que por ese
   camino el boton no aparecia en medio mundo. (falta F10) */
html.JS .BTN_TOP{opacity:0;visibility:hidden;
         transition:opacity .25s ease, visibility .25s ease,
                    background .2s ease, box-shadow .2s ease,
                    backdrop-filter .2s ease}
html.JS.AVALL .BTN_TOP{opacity:1;visibility:visible}
@media (prefers-reduced-motion: reduce){ html.JS .BTN_TOP{transition:none} }

/* ---------- paginas legales ----------
   Texto largo y nada mas. Medida de lectura corta a proposito: 34rem son unos
   65 caracteres por linea, que es donde el ojo deja de perderse al bajar de
   renglon. Aqui no hay foto ni adorno que distraiga. */
.LEGAL_SECT{background:var(--c-bg);padding:var(--pad-sect) 24px}
.LEGAL_WRAP{max-width:34rem;margin-inline:auto}
.LEGAL_TIT{margin-bottom:8px}
.LEGAL_INTRO{color:var(--c-ink-soft);margin-bottom:32px}
.LEGAL_BLOC{margin-bottom:32px}
.LEGAL_H2{margin-bottom:8px}
.LEGAL_P{margin-bottom:12px}
.LEGAL_P:last-child{margin-bottom:0}
.LEGAL_TORNA{margin-top:40px}
.FOOT_LINKS a[aria-current]{font-weight:700;text-decoration:underline}

/* ---------- puntos de ruptura: dos, no veinte ---------- */
@media (min-width:600px){
  .POST_GRID,.COLAB_GRID{grid-template-columns:repeat(2,1fr)}
  .PROJ_SUB{grid-template-columns:1fr 1fr}
  .FOOT_WRAP{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .POST_GRID,.COLAB_GRID{grid-template-columns:repeat(3,1fr)}
  .PROJ_WRAP{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Si el visitante ya le ha dicho a su sistema que necesita mas
   contraste, la web le hace caso. Sin botones y sin JavaScript.
   ============================================================ */
@media (prefers-contrast: more){
  .HERO{background-image:none;background:#000}
  .HERO::before{opacity:0}
  .HERO_BOX{background:#000;border:2px solid #fff}
  .PROJ_SECT{background:#fff}
  .BOX_CARD{box-shadow:none;border:2px solid #000}
  .LANG_A{opacity:1;text-decoration:underline}
  .LANG_A[aria-current]{background:#000;color:#fff}
  .HERO .LANG_A[aria-current]{background:#fff;color:#000}
  .LNK_TXT{text-decoration:underline}
  .BTN_MAIN{background:#000;color:#fff;border:2px solid #fff;box-shadow:none;
            -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Impresion: fuera la foto, los botones y el selector. */
@media print{
  body{font-size:12pt;color:#000;background:#fff}
  .HERO{background:none;min-height:0;padding:0}
  .HERO::before{display:none}
  .HERO_BOX{background:none;border:0;padding:0}
  .TIT_H1,.HERO_SUB{color:#000}
  .LANGS,.BTN_TOP,.HERO_NAV,.POST_TORNA{display:none}
  .FOOT,.PROJ_SECT{background:none;color:#000}
  .FOOT .TIT_H3,.FOOT .TXT_BODY,.FOOT .TXT_SM{color:#000}
  .BOX_CARD{box-shadow:none;border:1px solid #999}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}