/* ============================================================
   AgencyDomains — sistema de diseño · prensa técnica editorial
   Paper · ink · oxblood. Fraunces / Spectral / IBM Plex Mono.
   ============================================================ */
:root{
  --paper:#FBFAF4;      --paper-2:#F3EFE4;     --paper-3:#ECE6D6;
  --ink:#1C1A16;        --ink-soft:#48443B;    --faint:#8C867A;
  --rule:#D9D3C3;       --rule-soft:#E7E2D5;
  --accent:#8A3220;     --accent-deep:#5E2014; --accent-tint:#F0E2DA;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Spectral',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --measure:39rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background-color:var(--paper);
  font-family:var(--body);font-size:19px;line-height:1.68;font-weight:380;
  /* grano de papel, muy sutil */
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
::selection{background:var(--accent-tint);color:var(--accent-deep)}
a{color:var(--accent);text-decoration:none;text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);transition:text-decoration-color .18s}
a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
h1,h2,h3,h4{font-family:var(--display);font-weight:560;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule-accent{height:2px;width:54px;background:var(--accent);border:0;margin:0}

/* ---------- LANDING (compacto · above the fold) ---------- */
.hero{min-height:100svh;max-width:74rem;margin:0 auto;padding:clamp(1.5rem,4vh,3rem) clamp(1.25rem,5vw,3rem);
  display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vh,2.4rem);align-content:space-between}
@media(min-width:54rem){.hero{grid-template-columns:1.04fr 1fr;gap:4.5rem;align-content:center}}
.hl{display:flex;flex-direction:column;justify-content:center}
.hl .eyebrow{margin:0 0 1.1rem}
.hl h1{font-family:var(--display);font-size:clamp(3.2rem,8vw,5.4rem);font-weight:600;letter-spacing:-.03em;
  line-height:.96;margin:0;color:var(--ink);font-optical-sizing:auto}
.hl .deck{font-family:var(--display);font-style:italic;font-weight:340;color:var(--ink-soft);
  font-size:clamp(1.4rem,3vw,1.95rem);letter-spacing:-.01em;margin:.5rem 0 0}
.hl .essence{font-size:1.06rem;line-height:1.55;color:var(--ink-soft);margin:1.6rem 0 0;max-width:30rem}
.hl .essence strong{color:var(--ink);font-weight:560}
.hl .essence em{font-style:italic;color:var(--accent-deep)}
.hl .byline{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--faint);
  margin:1.8rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule)}
.hr{display:flex;flex-direction:column;justify-content:center;min-width:0}
@media(min-width:54rem){.hr{border-left:1px solid var(--rule);padding-left:4.5rem;margin-left:-.5rem}}
.rlabel{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1.2rem}
.canon{list-style:none;margin:0;padding:0}
.canon li{display:grid;grid-template-columns:1.7rem 1fr;gap:0 1rem;padding:.7rem 0;border-top:1px solid var(--rule-soft)}
.canon li:first-child{border-top:0;padding-top:0}
.canon .n{font-family:var(--display);font-size:1.15rem;color:var(--accent);font-weight:500;line-height:1.3}
.canon b{font-family:var(--display);font-weight:560;font-size:1.12rem;color:var(--ink)}
.canon .vol{color:var(--faint);font-weight:400}
.canon i{display:block;font-style:italic;color:var(--ink-soft);font-size:.92rem;margin-top:.05rem}
.canon .v{font-family:var(--mono);font-size:.66rem;color:var(--accent);letter-spacing:.08em;vertical-align:.2em;margin-left:.2rem}
.canon li.soon{opacity:.58}
.links{margin-top:.45rem;font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--faint)}
.links a{color:var(--ink-soft)}.links a:hover{color:var(--accent)}
@media(min-width:54rem){.links{white-space:nowrap}}
.hfoot{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--rule);display:flex;flex-direction:column;
  gap:.5rem;font-family:var(--mono);font-size:.78rem}
.hfoot a{color:var(--ink-soft)} .hfoot a:hover{color:var(--accent)} .hfoot .k{color:var(--faint)}

/* ---------- LIBRO (multipágina · barra lateral + capítulo) ---------- */
.book-topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--rule);display:flex;
  justify-content:space-between;align-items:center;gap:1rem;padding:.7rem clamp(1rem,4vw,2rem);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em}
.book-topbar .home{color:var(--accent);text-transform:uppercase}
.book-topbar .crumb{color:var(--faint);text-transform:uppercase;text-align:right}

.book-shell{max-width:78rem;margin:0 auto;display:grid;grid-template-columns:1fr;
  padding:0 clamp(1rem,4vw,2rem)}
@media(min-width:62rem){.book-shell{grid-template-columns:17.5rem minmax(0,1fr);gap:4rem}}

/* barra lateral */
.book-nav{font-size:.9rem}
@media(min-width:62rem){.book-nav{position:sticky;top:3.4rem;align-self:start;
  max-height:calc(100vh - 4.4rem);overflow-y:auto;padding:2.4rem 0 2rem;
  border-right:1px solid var(--rule-soft);margin-right:-1.2rem}}
@media(max-width:62rem){.book-nav{border-bottom:1px solid var(--rule);padding:1rem 0;margin-bottom:.5rem}}
.book-nav .nav-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1rem}
.book-nav ol{list-style:none;margin:0;padding:0}
.book-nav > ol > li{margin:0}
.book-nav > ol > li > a{display:block;padding:.32rem 0;color:var(--ink-soft);line-height:1.3;
  font-family:var(--display);font-weight:480;border-left:2px solid transparent;padding-left:.9rem;margin-left:-.9rem}
.book-nav > ol > li > a:hover{color:var(--accent);text-decoration:none}
.book-nav > ol > li > a.active{color:var(--accent-deep);border-left-color:var(--accent);font-weight:560}
.book-nav .subtoc{list-style:none;margin:.1rem 0 .6rem;padding:0 0 0 .9rem}
.book-nav .subtoc a{display:block;padding:.13rem 0;color:var(--faint);font-size:.82rem;line-height:1.32;
  font-family:var(--body)}
.book-nav .subtoc a:hover{color:var(--accent);text-decoration:none}

/* columna de contenido */
.book-main{min-width:0;padding:2.6rem 0 5rem}
article.book{max-width:43rem;font-size:1.18rem}
article.book>h1:first-child{margin-top:0;padding-top:0;border-top:0}

/* portada (página índice) */
.book-cover{padding:0}
article.book .book-cover h1{font-size:clamp(2.7rem,7vw,4rem);font-weight:600;letter-spacing:-.032em;
  line-height:1.02;margin:0 0 .15rem;border:0;padding:0;font-optical-sizing:auto}
article.book .book-cover h1 + h3{font-family:var(--display);font-weight:340;font-style:italic;
  font-size:clamp(1.3rem,3.6vw,1.7rem);color:var(--ink-soft);margin:0 0 1.8rem;letter-spacing:-.01em}
.book-cover>p{margin:.15rem 0;color:var(--ink-soft)} .book-cover>p strong{color:var(--ink)}
article.book .book-cover h2{font-size:1.2rem;margin:2.4rem 0 .7rem;border:0;padding:0}
.book-cover blockquote{font-family:var(--body);font-style:normal;font-size:.95rem;line-height:1.55;
  color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--rule-soft);
  border-left:2px solid var(--accent);border-radius:0 6px 6px 0;padding:.9rem 1.1rem;margin:1.8rem 0}

/* tipografía de capítulo */
article.book h1{font-size:clamp(2rem,4.5vw,2.6rem);margin:0 0 1.4rem;font-weight:600;letter-spacing:-.02em;
  line-height:1.06}
article.book h2{font-size:1.5rem;margin:2.8rem 0 .9rem;font-weight:560}
article.book h3{font-size:1.18rem;margin:2rem 0 .6rem;font-weight:560;color:var(--ink-soft)}
article.book h4{font-size:1rem;margin:1.6rem 0 .5rem;font-family:var(--mono);font-weight:500;
  letter-spacing:.04em;color:var(--accent-deep)}
article.book p{margin:0 0 1.15rem;hyphens:auto}
article.book strong{font-weight:600;color:var(--ink)} article.book em{font-style:italic}
article.book blockquote{margin:2rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--accent);
  font-family:var(--display);font-style:italic;font-size:1.28rem;line-height:1.45;color:var(--accent-deep)}
article.book blockquote p{margin:0} article.book blockquote strong{color:var(--accent-deep)}
article.book figure{margin:2.4rem 0;text-align:center}
article.book img{max-width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;background:#fff;
  box-shadow:0 1px 0 var(--rule-soft),0 18px 40px -28px rgba(40,30,20,.5)}
article.book figcaption{font-family:var(--mono);font-size:.74rem;color:var(--faint);margin-top:.8rem;
  letter-spacing:.02em;line-height:1.5}
article.book table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.92rem;display:block;overflow-x:auto}
article.book th,article.book td{text-align:left;padding:.6rem .85rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
article.book thead th{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-deep);border-bottom:1.5px solid var(--rule)}
article.book tbody tr:hover{background:color-mix(in srgb,var(--paper-2) 60%,transparent)}
article.book code{font-family:var(--mono);font-size:.84em;background:var(--paper-2);
  border:1px solid var(--rule-soft);border-radius:4px;padding:.08em .38em}
article.book pre{background:var(--ink);color:#F3EFE4;border-radius:8px;padding:1.1rem 1.25rem;overflow-x:auto;
  font-size:.84rem;line-height:1.6;margin:1.6rem 0;box-shadow:0 18px 40px -28px rgba(40,30,20,.6)}
article.book pre code{background:none;border:0;padding:0;color:inherit;font-size:1em}
article.book hr{border:0;height:1px;background:var(--rule);margin:2.6rem auto;width:40%}
article.book .footnotes{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:.92rem;color:var(--ink-soft)}
article.book .footnotes hr{display:none}
article.book .footnotes::before{content:"Notas";display:block;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
sup a{font-family:var(--mono);font-size:.7em;text-decoration:none}

/* prev / next */
.prevnext{display:flex;justify-content:space-between;gap:1.5rem;margin-top:4.5rem;padding-top:1.8rem;
  border-top:1px solid var(--rule)}
.prevnext a{display:block;max-width:46%;font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);line-height:1.4}
.prevnext a:hover{color:var(--accent);text-decoration:none}
.prevnext .dir{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.25rem}
.prevnext .nx{margin-left:auto;text-align:right}

/* ---------- toggle de idioma ---------- */
.hero{position:relative}
.langtoggle{position:absolute;top:clamp(1.1rem,3vh,1.9rem);right:clamp(1.25rem,5vw,2.4rem);
  display:flex;gap:.45rem;align-items:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;z-index:5}
.langtoggle a{color:var(--faint)} .langtoggle a:hover{color:var(--accent);text-decoration:none}
.langtoggle a.on{color:var(--ink);font-weight:500}
.langtoggle .sep{color:var(--rule)}