/* Public Mesh Press — dirección visual "Manifiesto" (la misma de publicmesh.org)
   Tipos: Bricolage Grotesque (display) · Space Grotesk (texto) · Space Mono (etiquetas)
   Cada sección es un "panel" que define sus propios colores locales. */

:root {
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --accent-brand: #FF3D11;
  --accent-on: #0E0E0C;
  --ink: #0E0E0C;
  --paper: #E9E5D7;
  --rdur: .6s;
  --rease: cubic-bezier(.16,1,.3,1);
  --rdist: 40px;
  --nav-pad: 22px;
  --gutter: clamp(24px,5vw,72px);
}

/* ---------- Paneles (paleta original) ---------- */
.pane--base   { --bg:#E9E5D7; --fg:#0E0E0C; --sub:#56524A; --line:#0E0E0C; --accent:#FF3D11; --tint:rgba(255,61,17,.08); }
.pane--deep   { --bg:#0E0E0C; --fg:#E9E5D7; --sub:#918E84; --line:#E9E5D7; --accent:#FF3D11; --tint:rgba(255,255,255,.05); }
.pane--warm   { --bg:#FF3D11; --fg:#0E0E0C; --sub:#3A0F05; --line:#0E0E0C; --accent:#0E0E0C; --tint:rgba(20,17,12,.07); --accent-on:#E9E5D7; }
.pane--nature { --bg:#14241A; --fg:#E9E5D7; --sub:#8FA792; --line:#E9E5D7; --accent:#C8FF3D; --tint:rgba(200,255,61,.06); }
.pane--night  { --bg:#0E0E0C; --fg:#E9E5D7; --sub:#8A867C; --line:#2A271F; --accent:#FF3D11; --tint:rgba(255,61,17,.06); }

.pane { position:relative; z-index:1; background:var(--bg); color:var(--fg); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(255,61,17,.26); }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
h1, h2, h3, h4, p, dl, dd { margin:0; }

@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }

.wrap { max-width:1240px; margin:0 auto; padding:0 var(--gutter); }
.hl { font-style:italic; color:var(--accent); }

/* ---------- Progreso, cursor, raíl ---------- */
.progress {
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--accent-brand); z-index:9500; transition:transform .12s linear;
}
.cursor-ring {
  position:fixed; top:0; left:0; z-index:9000; width:36px; height:36px; margin:-18px 0 0 -18px;
  border:1.5px solid var(--accent-brand); border-radius:50%; pointer-events:none; opacity:0;
  mix-blend-mode:difference; will-change:transform;
  transition:opacity .3s, width .25s, height .25s, margin .25s, background-color .25s;
}
.cursor-dot {
  position:fixed; top:0; left:0; z-index:9001; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:var(--accent-brand); pointer-events:none; opacity:0; will-change:transform;
  transition:opacity .3s;
}
[data-magnetic] { will-change:transform; }

.rail {
  position:fixed; left:clamp(16px,2.2vw,30px); top:50%; transform:translateY(-50%);
  z-index:180; display:flex; flex-direction:column; gap:1px;
}
.rail a { display:flex; align-items:center; gap:11px; text-decoration:none; padding:6px 0; }
.rail__tick { width:16px; height:1px; background:var(--ink); opacity:.35; flex:none; transition:width .4s ease, opacity .4s, background-color .5s; }
.rail__num { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--ink); opacity:.5; flex:none; transition:opacity .4s, color .5s; }
.rail__label { font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--ink); opacity:0; transform:translateX(-6px); white-space:nowrap; transition:opacity .4s, transform .4s, color .5s; }
.rail a:hover .rail__label { opacity:1 !important; transform:none !important; }
.rail a:hover .rail__tick { opacity:.85 !important; width:26px !important; }
@media (max-width:1340px) { .rail { display:none; } }

/* ---------- Navegación ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--nav-pad) var(--gutter);
  border-bottom:1px solid transparent;
  transition:padding .4s ease, background-color .5s, backdrop-filter .5s, border-color .5s;
}
.nav__brand {
  display:flex; align-items:baseline; gap:10px; padding-block:10px; margin-block:-10px; text-decoration:none; color:var(--ink); white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.01em;
}
.nav__brand .dot { color:var(--accent-brand); }
.nav__press { font-family:var(--font-mono); font-weight:400; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.75; }
.nav__links { display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav__link {
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink);
  text-decoration:none; opacity:.7; padding:6px 2px; transition:opacity .3s, color .5s;
}
.nav__ext {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink); text-decoration:none; white-space:nowrap;
  border:1px solid rgba(14,14,12,.3); padding:7px 12px; transition:color .5s, border-color .5s;
}
.lang { display:inline-flex; border:1px solid rgba(14,14,12,.3); transition:border-color .5s; }
.lang button {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:inherit; background:transparent;
  border:0; padding:7px 9px; cursor:pointer; opacity:.45; transition:opacity .3s;
}
.lang button[aria-pressed="true"] { opacity:1; text-decoration:underline; text-underline-offset:3px; }
.nav__toggle-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; }
.nav__burger { display:none; }

@media (max-width:980px) {
  /* backdrop-filter convertiría la barra en el contenedor del panel fijo y lo recortaría */
  .nav { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .nav__links {
    position:fixed; inset:0; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
    padding:0 clamp(28px,8vw,48px); background:var(--paper);
    transform:translateX(100%); transition:transform .55s var(--rease); z-index:250;
  }
  .nav__toggle-input:checked ~ .nav__links { transform:none; }
  .nav__links .nav__link {
    display:block; font-family:var(--font-display); font-size:30px; line-height:1.25; padding:10px 0;
    opacity:1 !important; color:var(--ink) !important; letter-spacing:-.01em;
  }
  .nav__links .nav__ext { margin-top:30px; color:var(--ink) !important; border-color:var(--ink) !important; }
  .nav__links .lang { margin-top:14px; color:var(--ink) !important; border-color:var(--ink) !important; }
  .nav__burger {
    display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:5px;
    width:44px; height:44px; cursor:pointer; position:relative; z-index:300;
  }
  .nav__burger span { display:block; height:2px; width:26px; background:var(--ink); transition:transform .4s var(--rease), opacity .25s, background-color .5s; }
  .nav__toggle-input:checked ~ .nav__burger span { background:var(--ink) !important; }
  .nav__toggle-input:checked ~ .nav__burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav__toggle-input:checked ~ .nav__burger span:nth-child(2) { opacity:0; }
  .nav__toggle-input:checked ~ .nav__burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- Botones, etiquetas, estados ---------- */
.btn {
  display:inline-block; font-family:var(--font-mono); font-size:13.5px; letter-spacing:.04em;
  text-decoration:none; padding:17px 30px; border:1px solid var(--line);
  transition:transform .3s, background-color .3s, color .3s, border-color .3s;
}
.btn--accent { background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.btn--ghost { background:transparent; color:var(--fg); }
.btn--sm { font-size:13px; padding:15px 26px; }
.btn:hover { transform:translateY(-2px); }
.pane--deep .btn--ghost:hover, .pane--night .btn--ghost:hover, .pane--nature .btn--ghost:hover { background-color:rgba(255,255,255,.06); }
.row-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vh,40px); }

.tag {
  display:inline-block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em;
  color:var(--fg); border:1px solid var(--line); padding:7px 12px; opacity:.85;
}
.tags { display:flex; flex-wrap:wrap; gap:8px; }

.live-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; animation:pulseDot 2s infinite; flex:none; }
.live-dot[hidden] { display:none; }

.badge {
  display:inline-flex; align-items:center; gap:7px; width:fit-content;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border:1px solid var(--line); color:var(--fg);
}
.badge--production { background:var(--accent-brand); border-color:var(--accent-brand); color:var(--ink); }
.badge--editing { background:var(--fg); border-color:var(--fg); color:var(--bg); }
.badge--live { border-color:var(--accent); }
.badge--galley { border-style:dashed; }
.badge--archived { border-style:dotted; }

/* ---------- Cabecera de capítulo ---------- */
.chap { padding:clamp(80px,12vh,150px) 0; }
.chap-head { display:flex; align-items:flex-end; gap:clamp(16px,2vw,28px); margin-bottom:clamp(34px,5vh,56px); }
.chap-num { font-family:var(--font-display); font-weight:300; font-size:clamp(40px,7vw,104px); line-height:.78; color:var(--accent); flex:none; }
.chap-rule {
  flex:1; border-bottom:1px solid var(--line); padding-bottom:12px;
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}
.chap-label { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.chap-meta { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--sub); display:inline-flex; align-items:center; gap:8px; text-align:right; }

.title { font-family:var(--font-display); font-weight:600; font-size:clamp(34px,5.2vw,68px); line-height:1.0; letter-spacing:-.018em; }
.lede { font-size:clamp(16px,1.2vw,19px); line-height:1.6; color:var(--sub); }
.split { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,5vw,72px); align-items:end; margin-bottom:clamp(40px,6vh,64px); }
.mini-label { font-family:var(--font-mono); font-weight:400; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }

/* ---------- Hero ---------- */
.hero { min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:148px 0 64px; overflow:hidden; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero .wrap { position:relative; z-index:1; width:100%; }
.hero__kicker {
  display:flex; align-items:center; gap:16px; font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-bottom:clamp(26px,4.5vh,52px);
}
.hero__kicker::before { content:""; width:34px; height:1px; background:var(--accent); display:inline-block; }
.hero h1 {
  font-family:var(--font-display); font-weight:600; font-size:clamp(50px,9vw,138px);
  line-height:.94; letter-spacing:-.02em; max-width:15ch; text-wrap:balance;
}
.rotator { display:inline-block; font-style:italic; color:var(--accent); will-change:transform,opacity; }
.hero__sub { margin-top:clamp(30px,4.5vh,48px); max-width:52ch; font-size:clamp(17px,1.35vw,21px); line-height:1.58; color:var(--sub); }
.hero__ctas { display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(34px,5vh,56px); }
.hero__meta {
  position:absolute; bottom:32px; right:var(--gutter); z-index:1; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.18em; color:var(--sub); text-transform:uppercase; text-align:right; line-height:1.6;
}
@media (max-width:600px) {
  .hero { padding-top:104px; padding-bottom:48px; }
  .hero h1 { font-size:clamp(38px,11vw,68px); }
  .hero__meta { display:none; }
}

/* ---------- Cubiertas tipográficas ---------- */
.book { position:relative; width:100%; aspect-ratio:2/3; container-type:inline-size; } /* las cubiertas se escalan con cqi */
.book::before { /* bloque de páginas */
  content:""; position:absolute; inset:0; transform:translate(10px,10px);
  border:1px solid var(--line); background:var(--bg);
}
.book--lg { width:min(100%,380px); margin:0 auto; }
.book--card::before { transform:translate(7px,7px); }

.cover {
  position:absolute; inset:0; overflow:hidden;
  border:1px solid var(--line); padding:9cqi 8cqi 8cqi;
  display:flex; flex-direction:column;
}
.cover::before { /* lomo */
  content:""; position:absolute; top:0; bottom:0; left:4cqi; width:1px; background:var(--fg); opacity:.18;
}
.cover__top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-family:var(--font-mono); font-size:clamp(9px,3.4cqi,11px); letter-spacing:.1em; text-transform:uppercase; }
.cover__brand { font-family:var(--font-display); font-weight:700; text-transform:none; letter-spacing:-.02em; font-size:clamp(11px,5.4cqi,18px); }
.cover__brand .dot { color:var(--accent); }
.cover__kind { display:inline-flex; align-items:center; gap:.5em; color:var(--sub); }
.cover__kind .live-dot { width:.75em; height:.75em; }
.cover__mesh { flex:1; min-height:0; width:100%; margin:5cqi 0; }
.cover__lines { fill:none; stroke:var(--fg); stroke-opacity:.34; stroke-width:.8; }
.cover__node { fill:var(--sub); }
.cover__hot { fill:var(--accent); }
.cover__title { font-family:var(--font-display); font-weight:600; font-size:clamp(17px,13cqi,58px); line-height:.92; letter-spacing:-.02em; }
.cover__title--long { font-size:clamp(14px,9.6cqi,42px); line-height:.95; }
.cover__foot {
  display:flex; justify-content:space-between; gap:8px; margin-top:5cqi; padding-top:3.5cqi; border-top:1px solid var(--fg);
  font-family:var(--font-display); font-style:italic; font-size:clamp(10.5px,4.4cqi,16px);
}

.cover__bar { fill:var(--fg); opacity:.5; }
.cover__cell { fill:var(--fg); opacity:.14; }
.cover__cell--on { opacity:.55; }
.book--square { aspect-ratio:1/1; width:min(100%,440px); }

/* ---------- Tres puertas: leer · escuchar · aprender ---------- */
.doors { padding:0 0 clamp(70px,10vh,120px); }
.doors__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.door {
  display:flex; flex-direction:column; gap:14px; min-height:270px; padding:clamp(24px,2.6vw,40px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; transition:background-color .4s;
}
.door:hover { background-color:var(--tint); }
.door__verb { font-family:var(--font-display); font-weight:600; font-size:clamp(36px,4vw,60px); line-height:.92; letter-spacing:-.025em; }
.lockup.lockup--door { font-size:19px; }
.lockup.lockup--door .lockup__sub { font-size:10.5px; }
.door--here { background-color:var(--tint); }
.lockup.lockup--xl { font-size:clamp(40px,6vw,92px); line-height:.92; letter-spacing:-.025em; gap:16px; }
.lockup.lockup--xl .lockup__sub { font-size:clamp(13px,1.3vw,18px); color:var(--accent); opacity:1; }
/* Public Mesh Media: Journal y, debajo, pódcast y agregadores */
.media-block + .media-block { margin-top:clamp(56px,9vh,96px); padding-top:clamp(36px,5vh,56px); border-top:1px solid var(--line); }
.media-block__head { margin-bottom:clamp(24px,4vh,36px); }
.media-block__head .mini-label { margin-bottom:12px; }
.media-block__head .lede { max-width:60ch; }
.learn__claim { font-family:var(--font-display); font-weight:500; font-size:clamp(24px,2.6vw,38px); line-height:1.08; letter-spacing:-.012em; margin-top:20px; max-width:20ch; }
.door__verb .dot { color:var(--accent); }
.door p { font-size:15.5px; line-height:1.55; color:var(--sub); max-width:34ch; }
.door__link { margin-top:auto; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; color:var(--accent); }

/* ---------- 03 · Pódcast ---------- */
.show { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(36px,6vw,96px); align-items:center; }
.show__imprint { display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.show__title { font-family:var(--font-display); font-weight:700; font-size:clamp(46px,6.4vw,96px); line-height:.9; letter-spacing:-.03em; }
.show__sub { font-family:var(--font-display); font-style:italic; font-size:clamp(19px,1.8vw,25px); line-height:1.3; margin:16px 0 26px; max-width:30ch; }
.platforms { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:24px; }
.platforms[hidden] { display:none; }
.platforms__label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); margin-right:6px; }
.chipl {
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--fg); text-decoration:none;
  border:1px solid var(--line); padding:7px 12px; transition:background-color .3s;
}
.chipl:hover { background-color:var(--tint); }
.episodes {
  list-style:none; margin:clamp(40px,6vh,64px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(6,auto); grid-auto-flow:column;
  column-gap:clamp(24px,4vw,64px); border-top:1px solid var(--line);
}
.episodes li { display:flex; gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); font-size:15.5px; line-height:1.4; }
.episodes li::before { content:attr(data-n); font-family:var(--font-display); font-weight:300; font-size:24px; line-height:1; color:var(--accent); min-width:32px; }
.episodes a, .pieces a { color:inherit; text-decoration:none; }
.episodes a:hover { text-decoration:underline; text-underline-offset:3px; }
.shows { display:grid; gap:clamp(80px,12vh,140px); }
.show-block--rev .show { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
.show-block--rev .show__cover { order:2; }
.show__imprint { display:flex !important; flex-wrap:wrap; align-items:center; gap:12px; }
.show__more { display:inline-block; margin-top:18px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; color:var(--accent); text-decoration:none; }
.show__more:hover { text-decoration:underline; text-underline-offset:3px; }
.badge--onair { border-color:var(--accent); }
.pieces__text { flex:1; }
.pieces__meta { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sub); white-space:nowrap; padding-left:12px; }
.subhead { margin:clamp(70px,10vh,110px) 0 clamp(26px,4vh,40px); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 40px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.subhead h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.012em; }
.subhead p { font-size:15px; color:var(--sub); max-width:52ch; }

/* ---------- 01 · Título destacado ---------- */
.feature { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,96px); align-items:center; }
.feature__title { font-size:clamp(30px,4.4vw,56px); line-height:1.02; max-width:18ch; margin-bottom:16px; }
.feature__author { font-family:var(--font-display); font-style:italic; font-size:clamp(18px,1.6vw,22px); margin-bottom:22px; }
.feature__desc { font-size:clamp(16px,1.2vw,19px); line-height:1.6; max-width:54ch; margin-bottom:26px; }
.specs.specs--inline { display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:0; padding-top:18px; border-top:1px solid var(--line); border-bottom:0; }
.specs--inline .specs__row { display:flex; flex-direction:column; gap:4px; padding:0; border-top:0; }
.specs--inline dt { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); }
.specs--inline dd { font-size:15px; }

/* ---------- 02 · Catálogo ---------- */
.filters { display:grid; gap:12px; margin-bottom:clamp(36px,5vh,56px); }
.filters__row { display:flex; flex-wrap:wrap; gap:8px; }
.chipf {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--fg);
  background:transparent; border:1px solid var(--line); padding:9px 14px; transition:background-color .3s, color .3s;
}
.chipf:hover { background:var(--tint); }
.chipf[aria-pressed="true"] { background:var(--fg); color:var(--bg); }
.chipf--quiet { font-size:11px; padding:7px 12px; border-color:rgba(14,14,12,.35); }
.swatch { width:11px; height:11px; border:1px solid var(--ink); display:inline-block; flex:none; }

.catalogue { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,36px); }
.catalogue__empty { grid-column:1 / -1; font-family:var(--font-mono); font-size:13px; color:var(--sub); padding:30px 0; }
.tcard { display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; }
.tcard .book { margin-bottom:14px; transition:transform .4s var(--rease); }
.tcard:hover .book { transform:translateY(-4px); }
.tcard__title { font-family:var(--font-display); font-weight:600; font-size:clamp(19px,1.6vw,23px); line-height:1.08; letter-spacing:-.01em; }
.tcard:hover .tcard__title { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.tcard__sub { font-size:14px; line-height:1.45; color:var(--sub); }
.tcard .badge { margin-top:4px; }

/* ---------- 03 · Colecciones ---------- */
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.tile { padding:clamp(22px,2.2vw,34px); border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); display:flex; flex-direction:column; gap:14px; min-height:320px; }
.tile__head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.tile__count { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--sub); }
.tile h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(26px,2.5vw,36px); line-height:.98; letter-spacing:-.018em; }
.tile p { font-size:15px; line-height:1.55; color:var(--sub); }
.tile__link { margin-top:auto; display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-decoration:none; color:var(--fg); }
.tile__link:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- 04 · Journal y 05 · Conversaciones ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.5vw,24px); }
.card {
  border:1px solid var(--line); padding:clamp(22px,2vw,32px); display:flex; flex-direction:column; min-height:240px;
  text-decoration:none; color:inherit; transition:background-color .4s, transform .4s;
}
a.card:hover, article.card:hover { background-color:rgba(255,255,255,.05); transform:translateY(-3px); }
.card__kicker { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.card h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(19px,1.6vw,23px); line-height:1.12; margin-bottom:14px; letter-spacing:-.01em; }
.card p { font-size:14.5px; line-height:1.5; color:var(--sub); }
.card__date { margin-top:auto; padding-top:22px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; color:var(--sub); opacity:.7; }
.cards--audio .card { min-height:200px; }

/* ---------- 04 · Cursos ---------- */
.course { display:grid; grid-template-columns:minmax(150px,.55fr) 1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; border:1px solid var(--line); padding:clamp(28px,3vw,48px); }
.course__kicker { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.course__kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.course__links { display:flex; flex-wrap:wrap; gap:14px 32px; margin-top:26px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; }
.course__links a { display:inline-flex; align-items:center; min-height:44px; color:var(--fg); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:5px; }
.course__links a:hover { color:var(--accent); text-decoration-color:var(--accent); }
.course h3 { font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3vw,40px); line-height:1.0; letter-spacing:-.015em; margin-bottom:16px; }
.course p { font-size:clamp(16px,1.2vw,18px); line-height:1.6; color:var(--sub); margin-bottom:22px; max-width:46ch; }
.outcomes { list-style:none; margin:0; padding:0; }
.outcomes li { display:flex; gap:14px; align-items:baseline; padding:14px 0; border-top:1px solid var(--line); font-size:15.5px; line-height:1.5; }
.outcomes li:last-child { border-bottom:1px solid var(--line); }
.outcomes li::before { content:"→"; color:var(--accent); font-family:var(--font-mono); }
.outcomes li.is-no::before { content:"×"; }

/* Aviso de salida: formulario corto que despliega «Avisarme cuando salga» */
.notify { margin-top:22px; max-width:460px; }
.notify[hidden] { display:none; }
.notify label { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); margin-bottom:9px; }
.notify__row { display:flex; }
.notify input {
  flex:1; min-width:0; background:transparent; border:1px solid var(--line); border-right:none; border-radius:0; color:var(--fg);
  font-family:var(--font-mono); font-size:16px; padding:14px;
}
.notify input::placeholder { color:var(--sub); opacity:.8; }
.notify input:focus { outline:1px solid var(--accent); outline-offset:0; }
.notify button {
  flex:none; cursor:pointer; font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-on); border:1px solid var(--accent); padding:0 22px; min-height:50px;
}
.notify button:disabled { opacity:.6; cursor:wait; }

/* ---------- Línea editorial ---------- */
.line-title { font-family:var(--font-display); font-weight:600; font-size:clamp(40px,6.2vw,92px); line-height:.96; letter-spacing:-.02em; max-width:17ch; text-wrap:balance; }
.line-sub { font-size:clamp(17px,1.5vw,22px); line-height:1.5; color:var(--sub); margin-top:clamp(22px,3.5vh,34px); max-width:46ch; }
.questions { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(28px,5vw,72px); }
.questions li { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; row-gap:10px; padding:clamp(22px,3vh,30px) 0; border-top:1px solid var(--line); }
.questions__n { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; color:var(--accent); padding-top:7px; }
.questions h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(20px,1.9vw,26px); line-height:1.15; letter-spacing:-.01em; }
.questions p { grid-column:2; color:var(--sub); font-size:15.5px; line-height:1.55; }


/* ---------- 07 · Newsletter ---------- */
#newsletter { padding:clamp(90px,14vh,170px) 0; }
.subscribe-title { font-family:var(--font-display); font-weight:600; font-size:clamp(38px,5.6vw,78px); line-height:.98; letter-spacing:-.022em; margin-bottom:26px; max-width:14ch; }
.form { border:1px solid var(--line); padding:clamp(28px,3vw,40px); background:rgba(255,255,255,.03); }
.form label { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); margin-bottom:9px; }
.form input {
  width:100%; background:transparent; border:1px solid var(--line); color:var(--fg);
  font-family:var(--font-mono); font-size:16px; padding:14px; margin-bottom:18px;
}
.form input:focus { outline:1px solid var(--accent); outline-offset:0; }
.form select, .form textarea {
  display:block; width:100%; background:transparent; border:1px solid var(--line); border-radius:0; color:var(--fg);
  font-family:var(--font-mono); font-size:16px; padding:14px; margin-bottom:18px;
}
.form select {
  appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat;
}
.form select option { color:#0E0E0C; background:#E9E5D7; }
.form textarea { min-height:150px; resize:vertical; line-height:1.5; }
.form select:focus, .form textarea:focus { outline:1px solid var(--accent); outline-offset:0; }
.form .form__check {
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  font-family:var(--font-body); font-size:14px; line-height:1.5; letter-spacing:0; text-transform:none; color:var(--sub); margin:4px 0 20px;
}
.form .form__check input { width:20px; height:20px; padding:0; margin:1px 0 0; flex:none; accent-color:var(--accent); }
.form__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form button:disabled { opacity:.6; cursor:wait; transform:none; }
.form__status { margin-top:14px; font-family:var(--font-mono); font-size:13px; line-height:1.5; color:var(--fg); }
.form__status:empty { display:none; }
.form button {
  width:100%; cursor:pointer; font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-on); border:none; padding:16px; margin-top:4px; transition:transform .3s;
}
.form button:hover { transform:translateY(-2px); }
.form__intro { font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.15; margin-bottom:8px; }
.form__hint { font-size:14px; line-height:1.5; color:var(--sub); margin-bottom:24px; }
.form__foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:18px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sub); }
.journal-box { border-top:1px solid var(--line); margin-top:34px; padding-top:26px; max-width:46ch; }
.journal-box p { color:var(--sub); line-height:1.55; margin-bottom:18px; }

/* ---------- Ficha de título ---------- */
.book-head { padding:clamp(120px,16vh,170px) 0 clamp(60px,9vh,110px); }
.crumbs { display:flex; flex-wrap:wrap; gap:10px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--sub); margin-bottom:clamp(30px,5vh,56px); }
.crumbs a { text-decoration:none; padding-block:14px; margin-block:-14px; } /* área táctil mayor sin mover la línea */
.crumbs a:hover { color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.book-head__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,96px); align-items:start; }
.book-head__kicker { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; }
.book-head__title { font-family:var(--font-display); font-weight:600; font-size:clamp(40px,5.6vw,80px); line-height:.96; letter-spacing:-.02em; max-width:14ch; }
.book-head__subtitle { font-size:clamp(17px,1.4vw,21px); line-height:1.45; color:var(--sub); margin-top:16px; max-width:40ch; }
.book-head__author { font-family:var(--font-display); font-style:italic; font-size:clamp(18px,1.6vw,22px); margin-top:20px; }
.book-head .row-ctas { margin-top:30px; }
.specs { margin-top:clamp(30px,4vh,44px); border-bottom:1px solid var(--line); }
.specs__row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--line); align-items:baseline; }
.specs dt { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); }
.specs dd { font-size:15px; line-height:1.5; }
.specs dd a { display:inline-block; padding-block:13px; margin-block:-13px; text-underline-offset:3px; }

.book-body { padding:0 0 clamp(80px,12vh,140px); }
.book-body__grid { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(36px,6vw,96px); align-items:start; border-top:1px solid var(--line); padding-top:clamp(40px,6vh,64px); }
.book-body__desc p { font-family:var(--font-display); font-weight:400; font-size:clamp(19px,1.8vw,26px); line-height:1.38; letter-spacing:-.005em; max-width:34ch; }
.book-body__author { margin-top:clamp(40px,6vh,64px); max-width:52ch; }
.book-body__author p { font-size:15.5px; line-height:1.6; color:var(--sub); }

.pieces { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.pieces li { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15.5px; line-height:1.4; }
.pieces li::before { content:attr(data-n); font-family:var(--font-mono); font-size:11px; color:var(--sub); padding-top:3px; flex:none; min-width:18px; }
.pieces a { display:block; padding-block:12px; margin-block:-12px; text-decoration:none; }
.pieces a:hover { text-decoration:underline; text-underline-offset:3px; }
.pieces .next { color:var(--sub); font-style:italic; }
.pieces .next::before { content:"→"; color:var(--accent); font-style:normal; }

.catalogue--related { grid-template-columns:repeat(4,minmax(0,1fr)); }

/* ---------- Pie ---------- */
.footer { padding:clamp(56px,8vh,90px) 0 clamp(28px,4vh,40px); border-top:1px solid var(--line); color:var(--sub); }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(28px,5vw,72px); padding-bottom:clamp(40px,6vh,64px); }
.lockup { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.015em; line-height:1; color:var(--fg); }
.lockup .dot { color:var(--accent); }
.lockup__sub { font-family:var(--font-mono); font-weight:400; font-size:clamp(11px,.9vw,13px); letter-spacing:.24em; text-transform:uppercase; opacity:.8; }
.lockup--sm { font-size:24px; margin-bottom:20px; }
.footer__about p { font-size:15px; line-height:1.6; max-width:48ch; }
.footer__col h4 { font-family:var(--font-mono); font-weight:400; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.footer__col ul { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.footer__col a { display:inline-flex; align-items:center; min-height:40px; color:var(--fg); text-decoration:none; font-size:15px; }
.footer__col a:hover { text-decoration:underline; text-underline-offset:3px; }
.footer__col li[hidden] { display:none; }
.footer__bottom {
  display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); padding-top:22px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
}

/* ---------- Responsive ---------- */
@media (max-width:1080px) {
  .catalogue, .catalogue--related { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course { grid-template-columns:180px minmax(0,1fr); }
  .course > :last-child { grid-column:1 / -1; }
}
@media (max-width:820px) {
  .split, .cards, .course, .feature, .show, .doors__grid, .book-head__grid, .book-body__grid, .footer__grid { grid-template-columns:minmax(0,1fr); }
  .episodes { grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; }
  .door { min-height:0; }
  .course__cover .book { width:min(60%,220px); }
  .show .book--square { width:min(calc(100% - 12px),360px); }
  .show-block--rev .show { grid-template-columns:minmax(0,1fr); }
  .show-block--rev .show__cover { order:0; }
  .episodes { grid-template-rows:none !important; }
  .split { align-items:start; }
  .catalogue, .catalogue--related { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature .book { width:min(100%,320px); }
  .book-head__grid .book--lg { width:min(78%,320px); margin:0; }
  .specs__row { grid-template-columns:120px minmax(0,1fr); }
}
@media (max-width:520px) {
  .tiles { grid-template-columns:1fr; }
  .tile { min-height:0; }
}

/* ---------- Móvil y pantallas táctiles ---------- */
@media (max-width:820px), (pointer:coarse) {
  .chipf { min-height:44px; }
  .chipl { display:inline-flex; align-items:center; min-height:44px; }
  .footer__col a { min-height:44px; }
}
@media (max-width:820px) {
  /* Filtros: una fila deslizable por grupo en lugar de seis filas apiladas */
  .filters__row {
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .filters__row::-webkit-scrollbar { display:none; }
  .chipf { flex:none; }
  .feature .book { width:min(72%,280px); margin:0 auto 0 0; }
  .feature { gap:44px; }
  .lockup.lockup--xl { font-size:clamp(30px,9vw,92px); }
  /* Índices: el dato (duración, fecha) bajo el título para no estrecharlo */
  .pieces li, .episodes li { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:4px; }
  .pieces__meta { grid-column:2; padding-left:0; white-space:normal; }
  .nav__links .lang button { min-width:48px; min-height:44px; padding:12px 14px; font-size:13px; }
  .nav__links .nav__ext { padding:14px 20px; font-size:12.5px; }
  .questions { grid-template-columns:minmax(0,1fr); }
}
/* Tableta en vertical: tres columnas de catálogo y las tres ramas en fila */
@media (min-width:601px) and (max-width:820px) {
  .catalogue, .catalogue--related { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:700px) and (max-width:820px) {
  .doors__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .door__verb { font-size:34px; }
}
@media (max-width:600px) {
  .hero__kicker { font-size:11.5px; letter-spacing:.14em; gap:12px; }
  .hero__kicker::before { width:22px; }
  .chap-rule { flex-wrap:wrap; row-gap:6px; }
  .chap-label { letter-spacing:.16em; }
  .chap-meta { white-space:nowrap; }
  .tile { padding:24px; }
  /* Aviso de salida: correo y botón apilados, ambos a todo el ancho */
  .notify__row { flex-direction:column; }
  .notify input { border-right:1px solid var(--line); border-bottom:none; }
}

@media print {
  .nav, .rail, .progress, .cursor-ring, .cursor-dot, .hero canvas { display:none !important; }
  [data-reveal], [data-reveal-item] { opacity:1 !important; transform:none !important; }
}

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