/* ============================================================
   PAU KIN BALDELLOU · Web v4 — sistema compartido
   Monocromo radical · una grotesca · folio editorial vivo
   ============================================================ */
:root{
  --bg:#0A0A0A;
  --fg:#FFFFFF;
  --text:#E6E6E6;
  --muted:#B8B8B8;
  --meta:#8A8A8A;
  --faint:#6E6E6E;
  --rule:#2A2A2A;
  --ph-bg:#141414;
  --ph-stripe:#1C1C1C;
  --ph-border:#262626;

  --font:"Helvetica Neue","neue-haas-grotesk-display",Helvetica,Inter,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --pad:clamp(22px,5vw,84px);
  --den:1;            /* densidad (Tweaks) */
  --mo:1;             /* intensidad motion 0–2 (Tweaks) */
}
picture{display:contents}

/* PC · Android · Linux: Neue Haas (Adobe Fonts). Mac/iOS mantienen Helvetica. Titulares ≥32px sin desplazar peso; resto +100 */
html.haas{--font:"Helvetica Neue","neue-haas-grotesk-display",Helvetica,Inter,sans-serif;--display:"Helvetica Neue","neue-haas-grotesk-display",Helvetica,Inter,sans-serif;--m-font:"Helvetica Neue","neue-haas-grotesk-display",Helvetica,Inter,sans-serif;--w2:300;--w3:400;--w4:500;--w5:600}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-weight:var(--w3,300);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;letter-spacing:-0.005em;
}
::selection{background:var(--fg);color:var(--bg)}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- capítulos ---------- */
.ch{position:relative;padding-left:var(--pad);padding-right:var(--pad)}
/* capítulo claro: sólo activo con data-chapters="alt" (Tweaks) */
html[data-chapters="alt"] .ch--light{
  background:#ECEBE8;color:#141414;
  --fg:#0A0A0A;--text:#1A1A1A;--muted:#5C5C5C;--meta:#8A8A8A;--faint:#ABABAB;--rule:#D2D1CD;
  --ph-bg:#E2E1DD;--ph-stripe:#D8D7D2;--ph-border:#C9C8C3;
}

/* ---------- chrome ---------- */
.chrome{
  position:fixed;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--pad);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.chrome a{pointer-events:auto;text-decoration:none;transition:opacity .3s}
.chrome a:hover{opacity:.45}
.chrome--top{top:0}
.chrome--top.hide{transform:translateY(-130%)}
.chrome--top nav{display:flex;gap:30px;align-items:baseline}
.chrome--top .nav-cta{border-bottom:1px solid currentColor;padding-bottom:2px}
.chrome--bottom{bottom:0}
@media (max-width:680px){.chrome--top nav a:not(.nav-cta){display:none}}

/* folio editorial vivo */
.folio{display:flex;gap:14px;align-items:baseline}
.folio .n{display:inline-block;min-width:2.4em;overflow:hidden;height:1.25em;position:relative}
.folio .n span{display:block;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.folio .sep{color:rgba(255,255,255,.45)}
#folio-sec{transition:opacity .35s}
#folio-sec.swap{opacity:0}

.progress{position:fixed;top:0;left:0;height:1px;background:#fff;width:0%;z-index:70;mix-blend-mode:difference}

/* ---------- tipografía ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--meta);display:block;margin-bottom:calc(34px * var(--den));
}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.mono-s{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

h1,h2,h3,h4{font-weight:300;color:var(--fg)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(calc(28px * var(--mo)));transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- imagen / placeholder ---------- */
.ph{
  position:relative;overflow:hidden;
  background:var(--ph-bg);border:1px solid var(--ph-border);
}
.ph--stripes{
  background:repeating-linear-gradient(135deg,var(--ph-bg) 0 14px,var(--ph-stripe) 14px 29px);
}
.ph--stripes::after{
  content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-weight:200;font-size:48px;color:#2E2E2E;
}
.ph .tag{
  position:absolute;left:14px;bottom:12px;z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9A9A9A;
  text-shadow:0 0 12px rgba(0,0,0,.5);
}
.ph .tag--r{left:auto;right:14px}
.ph img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;
}
.ph[data-px] img{inset:-7% 0;height:114%}

/* ---------- CTA editorial (sin píldoras) ---------- */
.cta{
  display:inline-flex;align-items:baseline;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);text-decoration:none;padding-bottom:8px;position:relative;
}
.cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fg);
  transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.cta:hover::after{transform:scaleX(.4)}
.cta .arr{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cta:hover .arr{transform:translateX(8px)}
.cta--muted{color:var(--muted)}
.cta--muted::after{background:var(--rule)}
.cta--muted:hover{color:var(--fg)}
.cta--muted:hover::after{background:var(--fg);transform:scaleX(1)}

/* ---------- footer ---------- */
footer{
  padding:calc(46px * var(--den)) var(--pad) calc(88px * var(--den));
  border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--muted)}

/* ---------- foco accesible ---------- */
a:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}