/* ============================================================
   EL CÁRTEL DEL AGUA — editorial / data-journalism design system
   ============================================================ */

:root{
  /* paper + ink (light, default) */
  --paper:#f6f2e9;
  --paper-2:#efe9dc;
  --paper-3:#e7dfce;
  --card:#fbf9f3;
  --ink:#17130f;
  --ink-2:#403831;
  --ink-3:#6d6258;
  --ink-4:#9a8e80;
  --rule:#d9cfbb;
  --rule-2:#cabfa6;

  /* signal */
  --red:#bd2a1e;
  --red-deep:#8f1d14;
  --red-tint:#f0d9d4;
  --water:#1f6f7a;
  --water-2:#2f97a5;
  --water-tint:#d7e8ea;
  --gold:#b8862f;
  --accent:var(--red);

  /* type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --maxw:1180px;
  --readw:680px;
  --gutter:clamp(20px,5vw,72px);

  --shadow-1:0 1px 2px rgba(23,19,15,.06),0 8px 30px -18px rgba(23,19,15,.25);
  --shadow-2:0 2px 6px rgba(23,19,15,.08),0 26px 60px -28px rgba(23,19,15,.40);
}

[data-theme="dark"]{
  --paper:#100e0c;
  --paper-2:#16130f;
  --paper-3:#1d1813;
  --card:#181410;
  --ink:#f4ede0;
  --ink-2:#d7cdbd;
  --ink-3:#a99d8c;
  --ink-4:#73685b;
  --rule:#2c251d;
  --rule-2:#3a3025;
  --red:#e4554a;
  --red-deep:#c23a2e;
  --red-tint:#36211d;
  --water:#4fb6c2;
  --water-2:#6fcdd8;
  --water-tint:#16282b;
  --gold:#d9a84a;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 10px 34px -18px rgba(0,0,0,.7);
  --shadow-2:0 2px 8px rgba(0,0,0,.5),0 30px 70px -28px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  transition:background .5s ease,color .5s ease;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--red);color:#fff}

/* paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.5}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.read{max-width:var(--readw);margin-inline:auto}
section{position:relative}
.chapter{padding-block:clamp(72px,11vw,140px);border-top:1px solid var(--rule)}
.chapter:first-of-type{border-top:none}

/* ---------- type ---------- */
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:.7em;
}
.kicker .num{
  color:var(--paper);background:var(--accent);font-weight:600;
  padding:.25em .55em;border-radius:3px;letter-spacing:.08em;
}
.kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--rule-2)}

h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.04;letter-spacing:-.012em;margin:0}
h2.title{font-size:clamp(34px,5.4vw,68px);font-weight:520;line-height:1.02;margin:.5em 0 .6em;text-wrap:balance}
h2.title em,h1 em{font-style:italic;color:var(--accent);font-weight:500}
h3{font-size:clamp(22px,2.6vw,30px);font-weight:560;letter-spacing:-.01em}
.dek{font-size:clamp(19px,2vw,23px);line-height:1.5;color:var(--ink-2);max-width:42ch;text-wrap:pretty}

.read p{margin:0 0 1.15em;color:var(--ink-2);text-wrap:pretty}
.read p strong{color:var(--ink);font-weight:680}
.read p.lead{font-size:1.18em;color:var(--ink);line-height:1.55}
.read p.lead::first-letter{}

.label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.src{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink-4);letter-spacing:.01em;
  border-top:1px solid var(--rule);padding-top:14px;margin-top:26px;max-width:62ch}
.src b{color:var(--ink-3);font-weight:600}

.pull{font-family:var(--serif);font-size:clamp(26px,3.6vw,42px);line-height:1.18;font-weight:480;
  letter-spacing:-.01em;color:var(--ink);text-wrap:balance;margin:0}
.pull em{font-style:italic;color:var(--accent)}

mark{background:linear-gradient(180deg,transparent 58%,var(--red-tint) 58%);color:inherit;padding:0 .04em}

/* ---------- buttons / chips ---------- */
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  padding:.85em 1.25em;border-radius:999px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);text-decoration:none;
  transition:transform .15s ease,background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:.5em .85em;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink-2);
  background:transparent;cursor:pointer;transition:all .18s;user-select:none;white-space:nowrap}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip .sw{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:.5em;vertical-align:middle}

.card{background:var(--card);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-1)}

/* ---------- reveal on scroll ---------- */
.rise{opacity:0;transform:translateY(22px)}
.rise.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.rise{opacity:1!important;transform:none!important}}

/* utility */
.eyebrow-rule{height:1px;background:var(--rule);margin:0}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.center{text-align:center}
.spacer{height:clamp(40px,7vw,90px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}
.flex{display:flex}
.wrapchips{display:flex;flex-wrap:wrap;gap:10px;align-items:center}