:root {
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reading-font: "EB Garamond", "Cormorant Garamond", Crimson Pro, Georgia, serif;
  --mono-font: ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-scale: 1;
  --header-h: 4.65rem;
  --sidebar-w: 17.5rem;
  --page-max: 90rem;
  --reading-max: 43rem;
  --wide-reading-max: 68rem;
  --radius-sm: .6rem;
  --radius: 1rem;
  --radius-lg: 1.6rem;
  --shadow: 0 18px 45px rgba(38, 28, 24, .10);
  --shadow-soft: 0 8px 24px rgba(38, 28, 24, .07);
  --bg: #f4f0e8;
  --surface: #fffdf8;
  --surface-2: #ece6db;
  --text: #26211f;
  --muted: #716864;
  --line: #d7cfc4;
  --accent: #7b2738;
  --accent-2: #b67a39;
  --accent-soft: #f2e1df;
  --link: #7b2738;
  --focus: #b67a39;
}
.theme-world {
  --bg: #eef3f7;
  --surface: #fbfdff;
  --surface-2: #e0e8ef;
  --text: #1f2932;
  --muted: #5f6e7a;
  --line: #c9d5df;
  --accent: #245b7d;
  --accent-2: #248078;
  --accent-soft: #dcebf0;
  --link: #185b7f;
  --focus: #248078;
}
html[data-theme="dark"] {
  --bg: #171514;
  --surface: #211f1d;
  --surface-2: #2c2926;
  --text: #f0ebe4;
  --muted: #b7aea6;
  --line: #423d38;
  --accent: #e49aaa;
  --accent-2: #e0b373;
  --accent-soft: #39272b;
  --link: #f0a7b6;
  --focus: #e0b373;
  --shadow: 0 18px 45px rgba(0,0,0,.32);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.24);
}
html[data-theme="dark"] .theme-world {
  --bg: #11191f;
  --surface: #18232b;
  --surface-2: #22313b;
  --text: #eaf1f5;
  --muted: #adbdc7;
  --line: #344854;
  --accent: #81c4e8;
  --accent-2: #78d3c6;
  --accent-soft: #213b48;
  --link: #8bd2f3;
  --focus: #78d3c6;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 18rem; background: var(--bg); color: var(--text); font-family: var(--ui-font); font-size: calc(1rem * var(--font-scale)); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body::before { content:""; position: fixed; inset: 0; pointer-events:none; opacity:.24; background-image: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34rem), radial-gradient(circle at 90% 30%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 28rem); z-index:-1; }
a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: .14em; }
button, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--surface); }
:focus-visible { outline: .18rem solid var(--focus); outline-offset: .18rem; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--text); color: var(--surface); padding: .7rem 1rem; border-radius: .5rem; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.reading-progress { position: fixed; inset: 0 0 auto; height: .22rem; z-index: 100; background: transparent; }
.reading-progress span { display:block; width:0; height:100%; background: linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 .6rem color-mix(in srgb,var(--accent) 55%,transparent); }
.site-header { position: sticky; top:0; z-index:50; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 clamp(1rem,3vw,2.4rem); background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom:1px solid color-mix(in srgb,var(--line) 75%, transparent); backdrop-filter: blur(18px) saturate(140%); }
.brand { display:flex; align-items:center; gap:.75rem; color:var(--text); text-decoration:none; min-width:max-content; }
.brand-mark { position:relative; display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:.75rem .75rem .45rem .45rem; background:var(--accent); color:var(--surface); box-shadow: inset 0 -5px 0 color-mix(in srgb,var(--accent) 72%,black); transform:rotate(-2deg); }
.brand-mark::after { content:""; position:absolute; bottom:.33rem; width:64%; height:.12rem; border-radius:99px; background:var(--accent-2); }
.brand-mark span { font-family:var(--reading-font); font-size:1.35rem; font-weight:700; line-height:1; }
.brand-text { font-family:var(--reading-font); font-size:1.27rem; letter-spacing:-.02em; }
.brand-text strong { font-weight:700; }
.brand-text em,.footer-brand em { color:var(--accent); font-style:normal; }
.header-actions { display:flex; align-items:center; gap:.5rem; }
.icon-button,.menu-button,.text-size-control button,.back-to-top,.dialog-close { border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-soft); cursor:pointer; }
.icon-button { width:2.65rem; height:2.65rem; display:grid; place-items:center; border-radius:50%; }
.icon-button svg,.back-to-top svg,.search-field svg { width:1.2rem; height:1.2rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.icon-button:hover,.text-size-control button:hover,.menu-button:hover { border-color:var(--accent); color:var(--accent); }
.moon-icon { display:none; }
html[data-theme="dark"] .sun-icon { display:none; }
html[data-theme="dark"] .moon-icon { display:block; }
.text-size-control { display:flex; overflow:hidden; border:1px solid var(--line); border-radius:99px; background:var(--surface); box-shadow:var(--shadow-soft); }
.text-size-control button { min-width:2.2rem; height:2.45rem; border:0; border-right:1px solid var(--line); box-shadow:none; font-size:.78rem; font-weight:800; background:transparent; }
.text-size-control button:last-child { border-right:0; }
.menu-button { display:none; align-items:center; gap:.25rem; height:2.65rem; padding:0 .8rem; border-radius:99px; }
.menu-button span { display:block; width:1rem; height:1px; background:currentColor; }
.menu-button span:nth-child(2),.menu-button span:nth-child(3) { position:absolute; opacity:0; }
.menu-button b { font-size:.8rem; }
.site-grid { max-width:var(--page-max); margin:0 auto; display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
.sidebar { position:sticky; top:var(--header-h); align-self:start; height:calc(100vh - var(--header-h)); overflow:auto; padding:2rem 1.25rem 1.25rem; border-right:1px solid var(--line); background: color-mix(in srgb,var(--bg) 82%,transparent); }
.sidebar-heading { margin:0 .7rem .8rem; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.sidebar nav { display:grid; gap:.2rem; }
.nav-link { display:flex; align-items:center; gap:.7rem; min-height:2.75rem; padding:.55rem .7rem; border-radius:.72rem; color:var(--text); text-decoration:none; font-size:.88rem; font-weight:650; }
.nav-link:hover { background:var(--surface); color:var(--accent); }
.nav-link.active { background:var(--accent-soft); color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.nav-icon { flex:0 0 auto; width:1.12rem; height:1.12rem; }
.sidebar-note { margin:1.5rem .7rem 0; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; display:flex; align-items:center; gap:.5rem; }
.theme-dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 .25rem var(--accent-soft); }
.page-main { min-width:0; padding:clamp(1rem,3vw,3rem) clamp(1rem,4vw,4.5rem) 2rem; }
.page-hero { position:relative; display:flex; align-items:end; justify-content:space-between; gap:2rem; max-width:var(--wide-reading-max); margin:0 auto clamp(2rem,5vw,4rem); padding:clamp(1.5rem,4vw,3.4rem); border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-soft) 34%,var(--surface))); box-shadow:var(--shadow); overflow:hidden; }
.page-hero::after { content:"L"; position:absolute; right:-.02em; bottom:-.33em; color:color-mix(in srgb,var(--accent) 7%,transparent); font-family:var(--reading-font); font-size:clamp(10rem,26vw,24rem); line-height:1; font-weight:700; pointer-events:none; }
.hero-copy { position:relative; z-index:1; max-width:48rem; }
.eyebrow { margin:0 0 .8rem; color:var(--accent); font-size:.74rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { font-family:var(--reading-font); text-wrap:balance; }
h1 { margin:0; max-width:15ch; font-size:clamp(2.5rem,7vw,5.3rem); line-height:.98; letter-spacing:-.052em; }
.subtitle { margin:1rem 0 0; max-width:42rem; color:var(--muted); font-family:var(--reading-font); font-size:clamp(1.04rem,2vw,1.35rem); }
.hero-rule { margin-top:1.5rem; width:5.5rem; height:.25rem; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.author-portrait { position:relative; z-index:2; flex:0 0 clamp(8rem,18vw,13rem); margin:0; }
.author-portrait img { display:block; aspect-ratio:4/5; width:100%; object-fit:cover; border-radius:5rem 5rem 1rem 1rem; filter:grayscale(.25) contrast(1.03); box-shadow:var(--shadow); border:.35rem solid color-mix(in srgb,var(--surface) 78%,transparent); background:var(--surface-2); }
.author-portrait figcaption { margin-top:.5rem; color:var(--muted); font-size:.7rem; text-align:center; }
.content-shell { max-width:var(--wide-reading-max); margin:0 auto; }
.content-shell h2 { margin:0 0 1.15rem; font-size:clamp(1.6rem,3vw,2.45rem); line-height:1.1; letter-spacing:-.025em; }
.content-shell p { overflow-wrap:anywhere; }
.content-shell a { font-weight:600; }
.intro-card,.catalog-section,.reference-card,.footnote { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-soft); }
.intro-card { max-width:var(--reading-max); margin:0 auto 2rem; padding:clamp(1.4rem,4vw,2.8rem); }
.lead { margin:0; font-family:var(--reading-font); font-size:clamp(1.1rem,2vw,1.33rem); line-height:1.8; }
.lead::first-letter { float:left; margin:.12em .1em 0 0; color:var(--accent); font-size:4.4em; line-height:.72; font-weight:700; }
.catalog-section { margin:0 auto 2rem; padding:clamp(1.35rem,4vw,3rem); }
.cool-section { background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent-soft) 28%,var(--surface))); }
.directory-columns,.directory-map,.bibliography { margin:0; font-family:var(--reading-font); line-height:1.82; }
.directory-columns { columns:2 18rem; column-gap:3.25rem; }
.directory-map { columns:2 24rem; column-gap:3.25rem; }
.directory-columns a,.directory-map a,.bibliography a { break-inside:avoid; }
.directory-columns br,.directory-map br { content:""; display:block; margin-bottom:.06rem; }
.directory-columns strong,.directory-map strong { color:var(--accent); }
.directory-note { margin:1.5rem 0 .7rem; padding:1rem; border-left:.25rem solid var(--accent-2); background:var(--surface-2); color:var(--muted); font-size:.9rem; }
.prose-reading { max-width:var(--reading-max); margin:0 auto; font-family:var(--reading-font); font-size:clamp(1.05rem,1.4vw,1.18rem); line-height:1.86; hyphens:auto; }
.prose-reading p { margin:0; text-align:left; }
.prose-reading p + p { text-indent:1.65em; }
.prose-reading p:first-child::first-letter { float:left; margin:.1em .09em 0 0; color:var(--accent); font-size:4.6em; line-height:.72; font-weight:700; }
.prose-reading .small-caps,.small-caps { font-variant:small-caps; letter-spacing:.04em; }
.biography-text { margin-bottom:2rem; }
.literary-work { padding:clamp(1.3rem,3vw,2rem) 0; }
.epigraph { max-width:30rem; margin:0 auto 2.5rem; padding:1.2rem 1.5rem; border:0; border-left:.28rem solid var(--accent-2); color:var(--muted); font-family:var(--reading-font); font-size:1.12rem; font-style:normal; text-align:right; background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; box-shadow:var(--shadow-soft); }
.epicenter { max-width:30rem; margin:0 auto 2.5rem; padding:1.2rem 1.5rem; border:0; border-left:.28rem solid var(--accent-2); color:var(--muted); font-family:var(--reading-font); font-size:0.96rem; font-style::normal; text-align:left; background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; box-shadow:var(--shadow-soft); }
.reference-card { margin:0 auto 2rem; padding:clamp(1.4rem,4vw,2.5rem); max-width:var(--reading-max); }
.reference-card h2 { color:var(--accent); font-size:1.65rem; }
.bibliography { line-height:1.75; }
.poetry-reading { max-width:47rem; margin:0 auto; padding:clamp(1rem,3vw,2.5rem); font-family:var(--reading-font); }
.poem-heading { margin:4rem 0 1.2rem; color:var(--accent); font-family:var(--ui-font); font-size:.84rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; text-align:left; }
.poem-heading:first-child { margin-top:0; }
.poem-body { margin:0 0 2.2rem; padding-left:clamp(0rem,4vw,2.6rem); font-size:clamp(1.05rem,1.7vw,1.22rem); line-height:1.72; white-space:normal; }
.poem-body br { display:block; content:""; }
.footnote { max-width:var(--reading-max); margin:2rem auto 0; padding:1rem 1.2rem; color:var(--muted); font-family:var(--reading-font); font-size:.88rem; }
.align-center { text-align:center; }
.align-right { text-align:right; }
.site-footer { max-width:var(--wide-reading-max); margin:5rem auto 0; padding:2rem 0 1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; display:grid; grid-template-columns:auto 1fr; gap:.8rem 2rem; align-items:center; }
.footer-brand { color:var(--text); font-family:var(--reading-font); font-size:1.1rem; text-decoration:none; }
.site-footer nav { justify-self:end; display:flex; flex-wrap:wrap; gap:1rem; }
.site-footer p { grid-column:1/-1; margin:0; }
.back-to-top { position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); width:3rem; height:3rem; display:grid; place-items:center; border-radius:50%; z-index:30; opacity:0; transform:translateY(1rem); pointer-events:none; transition:.2s; }
.back-to-top.visible { opacity:1; transform:none; pointer-events:auto; }
.search-dialog { width:min(46rem,calc(100% - 2rem)); max-height:min(42rem,calc(100% - 2rem)); padding:0; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); color:var(--text); box-shadow:0 30px 90px rgba(0,0,0,.28); }
.search-dialog::backdrop { background:rgba(10,10,10,.48); backdrop-filter:blur(5px); }
.search-panel { padding:clamp(1.2rem,4vw,2.2rem); }
.search-heading { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.search-heading h2 { margin:0 0 1rem; font-size:2rem; }
.dialog-close { width:2.4rem; height:2.4rem; border-radius:50%; font-size:1.65rem; line-height:1; }
.search-field { display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; border:1px solid var(--line); border-radius:99px; background:var(--bg); }
.search-field:focus-within { border-color:var(--focus); box-shadow:0 0 0 .18rem color-mix(in srgb,var(--focus) 18%,transparent); }
.search-field input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--text); font-size:1.05rem; }
kbd { padding:.15rem .4rem; border:1px solid var(--line); border-bottom-width:2px; border-radius:.3rem; color:var(--muted); background:var(--surface); font-family:var(--mono-font); font-size:.68rem; }
.search-status { margin:.8rem .2rem; color:var(--muted); font-size:.8rem; }
.search-results { display:grid; gap:.4rem; overflow:auto; max-height:25rem; }
.search-result { display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; padding:.8rem; border-radius:.75rem; color:var(--text); text-decoration:none; }
.search-result:hover,.search-result:focus { background:var(--accent-soft); }
.search-result-badge { grid-row:1/3; align-self:start; padding:.2rem .45rem; border-radius:99px; background:var(--surface-2); color:var(--accent); font-size:.65rem; font-weight:800; text-transform:uppercase; }
.search-result strong { font-family:var(--reading-font); font-size:1rem; }
.search-result span:last-child { color:var(--muted); font-size:.76rem; }
.search-empty { padding:2rem; text-align:center; color:var(--muted); }
.nav-scrim { display:none; }
.instructions { max-width:var(--reading-max); margin:0 auto; }
.instructions section { margin:0 0 1.3rem; padding:clamp(1.2rem,3vw,2rem); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.instructions h2 { color:var(--accent); font-size:1.5rem; }
.instructions h3 { margin-top:1.6rem; }
.instructions code { padding:.13rem .35rem; border-radius:.3rem; background:var(--surface-2); font-family:var(--mono-font); font-size:.86em; }
.instructions pre { overflow:auto; padding:1rem; border-radius:.65rem; background:#171717; color:#f2f2f2; font-size:.78rem; }
.instructions li + li { margin-top:.55rem; }
.template-section { position:relative; max-width:var(--reading-max); margin:0 auto 3rem; }
.template-section + .template-section { padding-top:3rem; border-top:1px solid var(--line); }
.template-label { display:inline-flex; padding:.25rem .55rem; border-radius:99px; background:var(--accent-soft); color:var(--accent); font-size:.67rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width: 60rem) {
  .site-grid { display:block; }
  .menu-button { display:flex; }
  .sidebar { position:fixed; inset:var(--header-h) auto 0 0; width:min(19rem,86vw); height:auto; z-index:45; transform:translateX(-102%); transition:transform .25s ease; background:var(--surface); box-shadow:var(--shadow); }
  body.nav-open .sidebar { transform:none; }
  .nav-scrim { position:fixed; inset:var(--header-h) 0 0; z-index:40; background:rgba(10,10,10,.38); }
  body.nav-open .nav-scrim { display:block; }
  .page-main { padding-top:1.5rem; }
}
@media (max-width: 42rem) {
  :root { --header-h:4.2rem; }
  .site-header { padding:0 .8rem; }
  .brand-text { display:none; }
  .text-size-control { display:none; }
  .page-main { padding-inline:.8rem; }
  .page-hero { align-items:start; padding:1.5rem; margin-bottom:1.5rem; }
  .author-portrait { flex-basis:6.5rem; }
  .author-portrait figcaption { display:none; }
  h1 { font-size:clamp(2.15rem,13vw,3.6rem); }
  .directory-columns,.directory-map { columns:1; }
  .catalog-section { padding:1.2rem; }
  .poetry-reading { padding-inline:.5rem; }
  .poem-body { padding-left:0; font-size:1rem; overflow-x:auto; }
  .site-footer { display:block; }
  .site-footer nav { margin:.8rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}
@media print {
  :root { --bg:#fff; --surface:#fff; --text:#000; --muted:#333; --line:#bbb; }
  .site-header,.sidebar,.reading-progress,.back-to-top,.search-dialog,.site-footer { display:none!important; }
  .site-grid { display:block; }
  .page-main { padding:0; }
  .page-hero { box-shadow:none; border:0; padding:0 0 1.5rem; }
  .content-shell { max-width:none; }
  .catalog-section,.intro-card,.reference-card { box-shadow:none; }
  a { color:#000; text-decoration:none; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.7em; overflow-wrap:anywhere; }
}


/* ------------------------------------------------------------------
   Añadir al final de /assets/css/styles.css

   Son las dos únicas clases nuevas que introduce el conversor.
   Sin esto las páginas se ven bien igual, pero el año del cuento y los
   números de sección quedan con el estilo por defecto.
   ------------------------------------------------------------------ */

/* El año del relato, junto al título del encabezado.
   Va dentro de un <small>, que ya trae "font-size: smaller" de fábrica:
   así el año nunca se ve del tamaño del titular aunque esta hoja no
   haya cargado o el navegador tenga en caché la versión anterior.
   Esta regla afina el resultado cuando sí carga. */
.page-hero h1 .work-year,
.page-hero h1 small.work-year {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.62;
  white-space: nowrap;
  vertical-align: 0.35em;
  margin-inline-start: 0.35em;
}

/* Los números romanos que separan las partes de los cuentos largos
   (Eréndira, Los funerales de la Mamá Grande, En este pueblo no hay
   ladrones). Antes eran un párrafo suelto centrado. */
.literary-work .work-section {
  margin: 2.6rem 0 1.6rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  border: 0;
}

.literary-work .work-section::before,
.literary-work .work-section::after {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  vertical-align: 0.35em;
  background: currentColor;
  opacity: 0.45;
}
.literary-work .work-section::before { margin-inline-end: 0.9rem; }
.literary-work .work-section::after  { margin-inline-start: 0.9rem; }

/* El primer párrafo tras un corte de sección también lleva versalitas;
   conviene que no quede pegado al número. */
.literary-work .work-section + p { margin-top: 0; }

/* ----- ESTILOS PERSONALES ----- */

.verso { margin:2em 0 2em 5em; font-style:italic; }
.lectura { margin:2em 0 2em 5em; }

.symbol { font-size:1.1em; text-align:left; font-family:"SYMBOL", SYMBOL; }