/* Tintero — hoja de estilos.
   Tinta ferrogálica sobre papel frío. Un solo elemento audaz: el lacre que sella
   lo que el lector aún no ha leído. Todo lo demás, sobrio. */

/* ------------------------------------------------------------------ tokens */

:root {
  --ink: #1c2233;          /* tinta ferrogálica: texto y superficies oscuras */
  --paper: #edf0f4;        /* papel frío, nada de crema */
  --sheet: #ffffff;        /* pliego: superficies elevadas */
  --quill: #5c6377;        /* gris pluma: texto secundario */
  --wax: #9a1b30;          /* lacre: sellos y acción principal */
  --wax-ink: #f7e3e6;      /* relieve del sello */
  --wax-soft: #f7e6e9;
  --verdigris: #2e6a66;    /* verdete: descubrimiento */
  --verdigris-soft: #e1eeec;
  --rule: #d9dee6;
  --focus: #9a1b30;
  --night: #121828;        /* bandas de tinta (cabeceras y pie) */
  --night-2: #222c4a;
  --on-night: #eef1f6;
  --on-night-muted: #aeb6cb;
  --shadow-1: 0 1px 2px rgb(16 22 40 / 0.05), 0 6px 18px -6px rgb(16 22 40 / 0.1);
  --shadow-2: 0 2px 4px rgb(16 22 40 / 0.06), 0 16px 34px -10px rgb(16 22 40 / 0.2);

  --font-display: "IM Fell DW Pica", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-text: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala clásica (Bringhurst): 12 14 16 18 21 24 36 48 60 */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.5rem;
  --step-3: 2.25rem;
  --step-4: 3rem;
  --step-5: 3.75rem;

  --measure: 66ch;
  --page: 72rem;
  --radius: 10px;
  color-scheme: light;
}

  :root[data-dark] {
    --ink: #e6e9f0;
    --paper: #0f121b;
    --sheet: #171c29;
    --quill: #9ba3b7;
    --wax: #c23a4e;
    --wax-ink: #fbe6e9;
    --wax-soft: #3a1720;
    --verdigris: #6fb3ad;
    --verdigris-soft: #142e2c;
    --rule: #262c3c;
    --focus: #e06b7d;
    --night: #090c14;
    --night-2: #18203a;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 22px -8px rgb(0 0 0 / 0.5);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 36px -10px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }


/* -------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
  outline: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1em; }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-color: var(--wax); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}
.skip-link:focus { top: 1rem; }

/* ----------------------------------------------------------- cabecera/pie */

.site-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 0.85rem max(1.5rem, calc((100vw - var(--page)) / 2 + 1.5rem));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.site-nav a { text-decoration: none; color: var(--quill); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--wax); text-underline-offset: 0.4em; }

.site-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.icon-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--quill);
}
.icon-link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.icon-link .count, .tab-bar .count { position: absolute; top: 0.1rem; right: -0.1rem; }

.count {
  display: inline-block;
  min-width: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
  font-variant-numeric: lining-nums;
}

.account-menu, .more-menu { position: relative; }
.account-menu > summary, .more-menu > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.account-menu > summary::-webkit-details-marker, .more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--quill);
}
.more-menu > summary:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.more-items {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 12;
  display: grid;
  min-width: 13rem;
  padding: 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sheet);
  box-shadow: 0 14px 40px rgb(10 12 20 / 0.18);
}
.more-items a, .more-items button {
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.more-items a:hover, .more-items button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }

.site-footer {
  max-width: var(--page);
  width: 100%;
  margin: 4rem auto 0;
  padding: 2rem 1.5rem 3rem;
  color: var(--quill);
  font-size: var(--step--1);
}

.offline-banner {
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--1);
  text-align: center;
}

/* Barra inferior: sólo en pantallas estrechas. */
.tab-bar { display: none; }

body.is-immersive .site-header,
body.is-immersive .site-footer,
body.is-immersive .tab-bar { display: none; }

/* --------------------------------------------------------------- páginas */

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
}

.page.narrow { max-width: 36rem; }

.lede { color: var(--quill); font-size: var(--step-1); line-height: 1.45; }
.hint, .empty-note, .join-note { color: var(--quill); }
.crumbs { display: flex; gap: 1rem; color: var(--quill); font-size: var(--step--1); }
.crumbs a + a::before { content: "/"; margin-right: 1rem; color: var(--rule); }

.empty { padding: 4rem 0; }
.loading { max-width: var(--page); margin: 4rem auto; padding: 0 1.5rem; color: var(--quill); font-style: italic; }
/* La página que trae escrita el servidor (app/web_pages.py) es para Google y las vistas previas,
   que leen el HTML. Mientras arranca la web no se enseña (se veía 2 s una versión sin estilo);
   sólo si la primera carga falla, y entonces app.js le pone .is-fallback. */
#app > .prerender:not(.is-fallback) { display: none; }
#app:has(> .prerender:not(.is-fallback))::before {
  content: "Cargando…";
  display: block;
  max-width: var(--page);
  margin: 4rem auto;
  padding: 0 1.5rem;
  color: var(--quill);
  font-style: italic;
}

/* ------------------------------------------------------------- controles */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.button:disabled { opacity: 0.55; cursor: progress; }
.button-primary { background: var(--wax); border-color: var(--wax); color: var(--wax-ink); }
.button-primary:hover { background: color-mix(in srgb, var(--wax) 88%, black); }
.button-quiet { border-color: var(--rule); color: var(--quill); }
.button-danger { border-color: var(--wax); color: var(--wax); }
.button-small { min-height: 2.25rem; padding: 0.35rem 0.9rem; }

.link-button {
  border: 0;
  padding: 0.25rem 0;
  background: none;
  color: var(--quill);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.18em;
}
.link-button:hover { color: var(--ink); }
.link-button.danger { color: var(--wax); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.stack { display: grid; gap: 1.25rem; }

.field { display: grid; gap: 0.35rem; }
.field > span { font-size: var(--step--1); font-weight: 600; }
.field small { color: var(--quill); font-size: var(--step--1); }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

input,
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--focus); }
[aria-invalid="true"] { border-color: var(--wax); }

.form-error {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--wax);
  background: color-mix(in srgb, var(--wax) 8%, transparent);
  color: var(--wax);
}

/* ---------------------------------------------------------------- portada */

/* La portada es el elemento visual dominante: proporción de libro (2:3). */
.cover {
  --hue: 220;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  flex: none;
  aspect-ratio: 2 / 3;
  padding: 12% 10% 10% 14%;
  border-radius: 3px 8px 8px 3px;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.28) 0 3.5%, rgb(255 255 255 / 0.07) 4.5%, transparent 9%),
    radial-gradient(120% 80% at 80% 0%, hsl(var(--hue) 34% 34%), transparent 70%),
    hsl(var(--hue) 34% 22%);
  color: hsl(var(--hue) 40% 90%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 10px 24px -12px rgb(10 12 20 / 0.55);
  overflow: hidden;
  isolation: isolate;
}
.cover.has-image { padding: 0; background: var(--rule); }
.cover.has-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.25) 0 3%, rgb(255 255 255 / 0.08) 4%, transparent 8%);
}
.cover-initial {
  position: absolute;
  right: -6%;
  bottom: -14%;
  z-index: -1;
  font-family: var(--font-display);
  line-height: 1;
  opacity: 0.16;
  font-size: 15em;
}
.cover-title {
  align-self: start;
  font-family: var(--font-display);
  min-width: 0; /* deja que la celda encoja: así sólo se parte una palabra que no cabe entera */
  max-width: 100%;
  line-height: 1.05;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}
.cover-author {
  padding-top: 0.6em;
  border-top: 1px solid hsl(var(--hue) 40% 90% / 0.35);
  font-size: 0.72em;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.cover-sm { width: 3.6rem; padding: 0; place-items: center; grid-template-rows: 1fr; }
.cover-sm .cover-initial { position: static; z-index: 0; opacity: 1; font-size: 2.2rem; transform: translateY(-4%); }
.cover-md { width: 100%; font-size: clamp(0.9rem, 1.6vw, 1.05rem); }
.cover-md .cover-title { font-size: 1.45em; }
.cover-md.is-long .cover-title { font-size: 1.15em; }
.cover-md .cover-initial { font-size: 9em; }
.cover-lg { width: min(17rem, 42vw); font-size: clamp(1rem, 2.2vw, 1.25rem); }
.cover-lg .cover-title { font-size: 2em; }
.cover-lg.is-long .cover-title { font-size: 1.5em; }

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  align-items: center;
  margin: 0 0 1rem;
  color: var(--quill);
  font-size: var(--step--1);
}
.byline strong { color: var(--ink); font-weight: 600; }

.synopsis { max-width: var(--measure); }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tags li {
  padding: 0.1rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--quill);
  font-size: var(--step--1);
}
.tags a { color: inherit; text-decoration: none; }
.tags a:hover { color: var(--ink); }

/* -------------------------------------------------------- inicio y carruseles */

.home { padding-top: 0.5rem; }


.stats-strip { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 2rem 0; padding: 1.25rem 0; border-block: 1px solid var(--rule); }
.stats-strip div { display: grid; }
.stats-strip dt { order: 2; color: var(--quill); font-size: var(--step--1); }
.stats-strip dd { margin: 0; font-family: var(--font-text); font-weight: 300; font-size: var(--step-3); line-height: 1; font-variant-numeric: lining-nums; }

.greeting { padding: 1.5rem 0 0.5rem; }
.greeting h1 { font-size: clamp(var(--step-3), 5vw, var(--step-4)); margin-bottom: 0.2rem; }

.shelf-row { padding: 1.75rem 0 0.5rem; }
.row-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.row-head h2 { margin: 0; font-size: var(--step-2); }
.row-lede { margin: 0.2rem 0 0; color: var(--quill); font-size: var(--step--1); }
.row-tools { display: flex; align-items: center; gap: 0.4rem; }
.row-more { margin-right: 0.5rem; color: var(--quill); font-size: var(--step--1); }
.row-arrow {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--sheet);
  color: var(--ink);
  cursor: pointer;
}
.row-arrow:hover { border-color: var(--ink); }

.row-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(8.5rem, 21vw, 11.5rem);
  gap: 1.25rem;
  margin: 0;
  padding: 0.25rem 0.25rem 1rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem;
  scrollbar-width: thin;
}
.row-track > li { scroll-snap-align: start; }

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(8.5rem, 22vw, 11rem), 1fr));
  gap: 1.75rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.book-link {
  position: relative;
  display: grid;
  gap: 0.2rem;
  text-decoration: none;
}
.book-link .cover { margin-bottom: 0.45rem; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.book-link:hover .cover { transform: translateY(-3px); box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 16px 30px -12px rgb(10 12 20 / 0.6); }
.book-link:focus-visible { outline-offset: 6px; }
.book-title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-meta { color: var(--quill); font-size: 0.8rem; line-height: 1.35; }
.book-meta .icon { vertical-align: -0.1em; }
.book-note { color: var(--verdigris); font-size: 0.8rem; font-style: italic; }
.book-position {
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--paper);
  font-variant-numeric: lining-nums;
}

.progress { display: block; height: 4px; margin: -0.2rem 0 0.35rem; border-radius: 999px; background: var(--rule); overflow: hidden; }
.progress span { display: block; width: var(--level); height: 100%; background: var(--ink); }

.is-discovery .cover { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--verdigris); }
.is-discovery .row-head h2 { color: var(--verdigris); }

.invite {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem 1.5rem;
  align-items: center;
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
}
.invite h2 { margin: 0 0 0.25rem; font-size: var(--step-1); }
.invite p { margin: 0; color: var(--quill); }
.invite.is-sparse { border-style: dashed; }
.empty-home { padding: 2rem 0; }
.home-filter { margin-top: 1.5rem; color: var(--quill); font-size: var(--step--1); }

/* Índice (búsqueda, listas): portada pequeña + texto. */
.index { padding: 2rem 0; border-top: 1px solid var(--rule); }
.index-list { margin: 0; padding: 0; list-style: none; }
.index-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.index-cover { text-decoration: none; }
.index-cover .cover-sm { width: 4.5rem; }
.index-entry h3 { font-size: var(--step-2); margin-bottom: 0.25rem; }
.index-entry h3 a { text-decoration: none; }
.index-body .synopsis { margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.index-entry.is-discovery .cover { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--verdigris); }

.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.rank-badge:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.rank-badge.is-rising { border-color: var(--verdigris); color: var(--verdigris); }
.badges-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* -------------------------------------------------------------- historia */

.story-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: 1.5rem 0 2.5rem;
}
.story-hero h1 { font-size: clamp(var(--step-4), 6vw, var(--step-5)); }
.published { color: var(--quill); font-size: var(--step--1); margin-top: 1.5rem; }

.story-head { display: flex; gap: 1rem; align-items: center; padding: 1rem 0; }
.story-head-title { font-family: var(--font-display); font-size: var(--step-2); margin: 0; line-height: 1.1; }
.story-head-title a { text-decoration: none; }
.story-head .byline { margin: 0; }

.tabs, .filters {
  display: flex;
  gap: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.tabs a, .filters a {
  padding: 0.6rem 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--quill);
  text-decoration: none;
}
.tabs a[aria-current="page"], .filters a[aria-current="page"] { border-bottom-color: var(--wax); color: var(--ink); }
.filters { gap: 1.25rem; border-bottom: 0; margin-bottom: 1rem; font-size: var(--step--1); }

.chapter-list, .chapter-desk { margin: 0; padding: 0; list-style: none; max-width: 48rem; }
.chapter-list a {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.chapter-list a:hover .chapter-title { text-decoration: underline; text-decoration-color: var(--wax); }
.chapter-numeral { font-family: var(--font-display); font-size: var(--step-1); color: var(--quill); }
.chapter-meta { color: var(--quill); font-size: var(--step--1); }
.chapter-list li.is-read .chapter-title { color: var(--quill); }

/* ------------------------------------------------------------------ sello */

.seal { flex: none; overflow: visible; }
.seal-wax { fill: var(--wax); filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35)); }
.seal-ring { fill: none; stroke: color-mix(in srgb, var(--wax-ink) 35%, transparent); stroke-width: 1.5; }
.seal-numeral, .seal-shadow { font-family: var(--font-display); }
.seal-numeral { fill: var(--wax-ink); }
.seal-shadow { fill: rgb(0 0 0 / 0.35); }

.sealed-note {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  max-width: var(--measure);
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px dashed var(--rule);
  border-radius: 6px;
}
.sealed-note p { margin: 0 0 0.35rem; }

.sealed-page { display: grid; justify-items: center; text-align: center; gap: 0.5rem; padding: 3rem 0; }
.sealed-page h1 { font-size: var(--step-3); max-width: 24ch; }
.sealed-page p { max-width: 46ch; color: var(--quill); }

/* ----------------------------------------------------------------- códice */

.codex { max-width: var(--measure); }
.codex-group { margin-top: 2.5rem; }
.codex-group > h2 { color: var(--quill); font-size: var(--step-1); }
.codex-entry { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.codex-entry h3 { font-size: var(--step-2); margin-bottom: 0.35rem; }
.codex-summary { font-style: italic; color: var(--quill); }
.codex-facts { margin: 0; padding-left: 1.1rem; }
.codex-facts li { margin-bottom: 0.4rem; }
.codex-facts li::marker { color: var(--wax); }

/* ----------------------------------------------------------------- taberna */

.tavern { max-width: 48rem; }
.threads { margin: 0; padding: 0; list-style: none; }
.thread {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.thread-title { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.thread-title a { text-decoration: none; }
.thread-meta { margin: 0; color: var(--quill); font-size: var(--step--1); }
.thread.is-diary .thread-title::before { content: "Diario"; display: block; margin-bottom: 0.15rem; font-family: var(--font-text); font-size: 0.75rem; font-style: italic; color: var(--wax); }
.thread.is-sealed .thread-title { color: var(--quill); font-style: italic; }
.author-badge { padding: 0 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--wax) 14%, transparent); color: var(--wax); font-size: 0.75rem; }
.spoiler-mark { display: inline-block; margin-left: 0.5rem; padding-left: 0.5rem; border-left: 1px solid var(--rule); font-style: italic; }

.thread-page { max-width: var(--measure); padding-bottom: 1.5rem; }
.thread-page h1 { font-size: var(--step-3); margin-top: 0.5rem; }
.replies { max-width: var(--measure); border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.replies > h2 { font-size: var(--step-1); color: var(--quill); }
.replies ol { margin: 0; padding: 0; list-style: none; }
.reply { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.reply.is-sealed { display: flex; gap: 0.75rem; align-items: center; color: var(--quill); font-style: italic; }
.reply.is-sealed p { margin: 0; }

.compose {
  display: grid;
  gap: 1rem;
  max-width: var(--measure);
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--sheet);
  border-radius: 6px;
}
.compose h2 { font-size: var(--step-1); margin: 0; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; }

/* ------------------------------------------------------------------ lector */

.reader {
  --reader-size: 1.25rem;
  --reader-font: var(--font-text);
  position: relative;
  min-height: 100vh;
  padding: 0 1.5rem 6rem;
  background: var(--paper);
  color: var(--ink);
}
.reader[data-size="s"] { --reader-size: 1.08rem; }
.reader[data-size="l"] { --reader-size: 1.4rem; }
.reader[data-size="xl"] { --reader-size: 1.6rem; }
.reader[data-size="xxl"] { --reader-size: 1.85rem; }
.reader[data-font="sans"] { --reader-font: var(--font-sans); }

/* Fondos: cada uno redefine las tintas para que el contraste se mantenga. */
.reader[data-theme="white"] { --paper: #ffffff; --sheet: #f4f5f7; --ink: #15181f; --quill: #5d6373; --rule: #dde0e6; }
.reader[data-theme="sepia"] { --paper: #f3ead7; --sheet: #ece1c9; --ink: #3a2e1f; --quill: #6e5e47; --rule: #dccfb3; --wax: #8e2433; }
.reader[data-theme="night"] {
  --paper: #121419; --sheet: #1b1f27; --ink: #d4d7de; --quill: #8f96a6; --rule: #2a2f3a;
  --wax: #c9485b; --wax-ink: #fbe6e9; --focus: #e06b7d; color-scheme: dark;
}
body.is-immersive:has(.reader[data-theme="white"]) { background: #ffffff; }
body.is-immersive:has(.reader[data-theme="sepia"]) { background: #f3ead7; }
body.is-immersive:has(.reader[data-theme="night"]) { background: #121419; }

.reader-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 7; background: transparent; }
.reader-progress span {
  --ratio: 0;
  display: block;
  height: 100%;
  background: var(--wax);
  transform: scaleX(var(--ratio));
  transform-origin: left;
}

/* Menús ocultables: aparecen al tocar el centro, al pasar el foco o al empezar. */
.reader-bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem max(1rem, calc((100vw - 44rem) / 2));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  font-size: var(--step--1);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.reader-top { top: 0; border-bottom: 1px solid var(--rule); }
.reader-bottom { bottom: 0; border-top: 1px solid var(--rule); padding-bottom: max(0.6rem, env(safe-area-inset-bottom)); }
.reader:not(.show-ui) .reader-top:not(:focus-within) { transform: translateY(-110%); opacity: 0; }
.reader:not(.show-ui) .reader-bottom:not(:focus-within) { transform: translateY(110%); opacity: 0; }
.reader-back { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; color: var(--quill); text-decoration: none; }
.reader-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-where { color: var(--quill); font-style: italic; white-space: nowrap; }

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.icon-button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.icon-button.is-disabled { opacity: 0.3; cursor: default; }
.icon-button[aria-pressed="true"] { color: var(--wax); }
.icon-button[aria-pressed="true"] .icon-heart path { fill: currentColor; }

.reader-settings {
  position: fixed;
  top: 3.6rem;
  right: max(1rem, calc((100vw - 44rem) / 2));
  z-index: 7;
  display: grid;
  gap: 0.9rem;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
  box-shadow: 0 18px 50px rgb(10 12 20 / 0.25);
  font-size: var(--step--1);
  /* En pantallas bajas el panel entero tiene que caber: si no, "Restablecer" queda fuera. */
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.reader-settings[hidden] { display: none; }
.setting { display: grid; gap: 0.4rem; }
.setting > span { font-weight: 600; }
.size-steps { display: flex; gap: 0.5rem; }
.segmented { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; }
.segmented span {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}
.segmented input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.reader-stage { position: relative; }
.reader-text {
  max-width: 34em;
  margin: 0 auto;
  padding-top: 5rem;
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: 1.75;
  hyphens: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.reader-text header { margin-bottom: 2.5em; text-align: center; }
.reader-numeral { margin: 0 0 0.5rem; color: var(--quill); font-size: var(--step--1); font-style: italic; }
.reader-text h1 { font-size: clamp(var(--step-3), 6vw, var(--step-4)); }
.dedication { margin: 0.75rem 0 0; color: var(--quill); font-size: var(--step--1); font-style: italic; }
.reader-text .prose { max-width: none; }

/* Texto enriquecido (lector y editor). */
.rich .block { position: relative; margin: 0; }
.reader-text .rich p.block { text-align: justify; }
.reader-text .rich p.block + p.block { text-indent: 1.5em; }
.reader-text .rich p.block:first-child:not(.no-initial)::first-letter {
  float: left;
  margin: 0.06em 0.08em 0 0;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.8;
  color: var(--wax);
}
.rich .align-center { text-align: center !important; text-indent: 0 !important; }
.rich .align-right { text-align: right !important; text-indent: 0 !important; }
.rich .scene-break { margin: 1.4em 0 !important; text-align: center !important; text-indent: 0 !important; color: var(--quill); letter-spacing: 0.5em; }
.rich .block-image { margin: 1.5em 0; text-align: center; }
.rich .block-image img { max-width: 100%; height: auto; border-radius: 4px; }
.rich figcaption { margin-top: 0.4em; color: var(--quill); font-size: 0.8em; font-style: italic; }

/* Burbuja de comentarios en línea: discreta hasta que hay conversación. */
.p-bubble {
  position: absolute;
  top: 0.2em;
  right: -2.6em;
  display: inline-grid;
  place-items: center;
  min-width: 1.8em;
  height: 1.8em;
  padding: 0 0.35em;
  border: 1px solid var(--rule);
  border-radius: 999px 999px 999px 4px;
  background: var(--paper);
  color: var(--quill);
  font-family: var(--font-text);
  font-size: 0.62em;
  line-height: 1;
  text-indent: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.rich .block:hover > .p-bubble, .p-bubble:focus-visible, .p-bubble.has-comments, .reader.show-ui .p-bubble { opacity: 1; }
.p-bubble.has-comments { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.scene-break .p-bubble { display: none; }

/* Modo páginas: columnas del ancho de la pantalla y se pasa de página en horizontal. */
.reader[data-mode="paged"] { padding-inline: 0; }
.reader[data-mode="paged"] .reader-stage { height: calc(100vh - 2.5rem); overflow: hidden; }
.reader[data-mode="paged"] .reader-text {
  max-width: none;
  height: 100%;
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  column-width: 100vw;
  column-gap: 0;
  column-fill: auto;
  transition: transform 0.3s ease;
}
.reader[data-mode="paged"] .reader-text > * { padding-inline: max(1.5rem, calc((100vw - 34em) / 2)); }
/* Flechas para pasar página con ratón (con el dedo se toca el lateral o se desliza). */
.page-turn { display: none; }
@media (hover: hover) and (pointer: fine) {
  .reader[data-mode="paged"] .page-turn {
    position: fixed;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sheet) 92%, transparent);
    color: var(--ink);
    cursor: pointer;
    opacity: 0.45;
    transform: translateY(-50%);
    transition: opacity 0.15s ease;
  }
  .reader[data-mode="paged"] .page-turn:hover, .reader[data-mode="paged"] .page-turn:focus-visible { opacity: 1; }
  .page-prev { left: 0.75rem; }
  .page-next { right: 0.75rem; }
}
/* En páginas y en el móvil no hay margen para la burbuja: va en línea tras la última palabra,
   así nunca tapa texto. */
.reader[data-mode="paged"] .p-bubble { position: static; margin-left: 0.4em; vertical-align: 0.15em; }

.drawer-quote {
  margin: 0 0 1rem;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--rule);
  color: var(--quill);
  font-family: var(--font-read);
  font-style: italic;
  font-size: var(--step--1);
}
.drawer-quote[hidden] { display: none; }

.margin-note {
  margin-top: 3em;
  padding: 1.25em 1.5em;
  border-left: 2px solid var(--rule);
  background: var(--sheet);
  font-size: 0.85em;
  line-height: 1.65;
}
.margin-note-label { margin: 0 0 0.5em; color: var(--quill); font-size: var(--step--1); font-style: italic; }
.reader-text .margin-note .prose p { text-align: left; text-indent: 0; margin-bottom: 0.75em; }

.reader-end { max-width: 34em; margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid var(--rule); }
.chapter-vote { display: grid; justify-items: center; gap: 0.5rem; margin-bottom: 2.5rem; text-align: center; }
.chapter-vote .hint { max-width: 30rem; font-size: var(--step--1); }
.vote-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.vote-button:hover { border-color: var(--wax); }
.vote-button[aria-pressed="true"] { border-color: var(--wax); color: var(--wax); }
.vote-button[aria-pressed="true"] .icon path { fill: currentColor; }
.vote-count { padding-left: 0.6rem; border-left: 1px solid var(--rule); color: var(--quill); font-variant-numeric: lining-nums; }

.next-chapter {
  display: grid;
  gap: 0.25rem;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-decoration: none;
}
.next-chapter:hover { border-color: var(--ink); }
.next-chapter span { color: var(--quill); font-size: var(--step--1); }
.next-chapter strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); }
.reader-caught-up { font-style: italic; color: var(--quill); }
.reader-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; font-size: var(--step--1); }
.reader-note { margin-top: 1.5rem; color: var(--quill); font-size: var(--step--1); }

.comments { max-width: 34em; margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid var(--rule); }
.comments > h2 { font-size: var(--step-1); }
.comment-list, .replies-list { margin: 0; padding: 0; list-style: none; }
.comment { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.replies-list { margin: 0.5rem 0 0 1.5rem; padding-left: 1rem; border-left: 2px solid var(--rule); }
.replies-list .comment:last-child { border-bottom: 0; }
.comment-head { display: flex; align-items: center; gap: 0.6rem; color: var(--quill); font-size: var(--step--1); }
.comment-head > span:not(.monogram) { flex: 1; }
.comment-head .more-menu > summary { width: 2rem; height: 2rem; }
.comment .prose { margin-top: 0.4rem; }
.comment .prose p { margin-bottom: 0.5em; }
.comment-actions { display: flex; gap: 1rem; margin: 0; font-size: var(--step--1); }
.comment.is-sealed { display: flex; gap: 0.75rem; align-items: center; color: var(--quill); font-style: italic; }
.comment.is-sealed p { margin: 0; }
.comments .compose { margin-top: 1.5rem; }
.replying-to { margin: 0; color: var(--quill); font-size: var(--step--1); }

.comments-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  width: min(26rem, 100vw);
  padding: 1rem 1.25rem 2rem;
  border-left: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: -20px 0 50px rgb(10 12 20 / 0.18);
  overflow-y: auto;
}
.comments-drawer[hidden] { display: none; }
.comments-drawer header { display: flex; align-items: center; justify-content: space-between; }
.comments-drawer h2 { margin: 0; font-size: var(--step-1); }

/* ------------------------------------------------------------------ estudio */

.studio-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.5rem; }
.studio-head h1 { margin: 0; }
.studio-head .lede { flex-basis: 100%; margin: 0; }

.desk { margin: 0; padding: 0; list-style: none; }
.desk-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; margin: 0; color: var(--quill); font-size: var(--step--1); }

.status { padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.status-draft { background: color-mix(in srgb, var(--quill) 18%, transparent); color: var(--quill); }
.status-published { background: color-mix(in srgb, var(--verdigris) 16%, transparent); color: var(--verdigris); }
.status-archived { background: var(--rule); color: var(--quill); }

.panel { margin: 1.5rem 0; padding: 1.5rem; background: var(--sheet); border-radius: 6px; }
.panel > h2 { font-size: var(--step-1); }
.danger-zone { background: transparent; border: 1px solid color-mix(in srgb, var(--wax) 35%, var(--rule)); }

.chapter-desk li {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto auto auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.row-actions { display: flex; gap: 0.75rem; }

.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: end; margin-top: 1.5rem; }
.inline-form .form-error { grid-column: 1 / -1; }

.editor { max-width: 48rem; }
.editor-form { display: grid; gap: 1rem; }
.editor-title {
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.1;
}
.editor-body {
  min-height: 60vh;
  padding: 1.5rem;
  border-color: transparent;
  background: var(--sheet);
  font-size: 1.2rem;
  line-height: 1.75;
}
.editor-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
/* Una sola línea siempre: si el texto de estado cambiara de alto, los botones se moverían
   justo cuando vas a pulsarlos. */
.editor-status { flex: 1 1 12rem; min-width: 0; overflow: hidden; color: var(--quill); font-size: var(--step--1); white-space: nowrap; text-overflow: ellipsis; }
.editor-bar .actions { flex: 0 0 auto; margin-left: auto; }
.editor-bar .form-error { flex-basis: 100%; order: 3; }
.editor-body { padding-bottom: 4rem; }
html:has(.editor-bar) { scroll-padding-bottom: 6rem; }

.codex-edit { display: grid; gap: 1rem; }
.fact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.fact-form { display: grid; grid-template-columns: 1fr minmax(12rem, 16rem) auto auto; gap: 0.75rem; align-items: start; }
.fact-form .form-error { grid-column: 1 / -1; }
.fact-new { padding-top: 1rem; border-top: 1px dashed var(--rule); grid-template-columns: 1fr minmax(12rem, 16rem) auto; }

.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.ledger div { padding: 1rem 0; border-top: 2px solid var(--ink); }
.ledger dt { color: var(--quill); font-size: var(--step--1); }
.ledger dd { margin: 0; font-family: var(--font-text); font-weight: 300; font-size: var(--step-3); font-variant-numeric: lining-nums; }

/* ----------------------------------------------------------- auth y diálogos */

.auth { padding-top: 3rem; }
.auth-switch { margin-top: 1.5rem; color: var(--quill); }

.dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 2rem;
  border: 0;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 64px rgb(10 12 20 / 0.35);
}
.dialog::backdrop { background: rgb(18 21 31 / 0.55); }
.dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  color: var(--quill);
  font-size: 1.6rem;
  cursor: pointer;
}
.dialog-message { font-size: var(--step-1); margin-right: 2rem; }

.amounts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.amounts legend { margin-bottom: 0.5rem; font-size: var(--step--1); font-weight: 600; }
.amount input { position: absolute; opacity: 0; }
.amount span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}
.amount input:checked + span { border-color: var(--wax); background: var(--wax); color: var(--wax-ink); }
.amount input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.payment-element { padding: 1rem; background: var(--sheet); border-radius: 6px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 20;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  transform: translate(-50%, 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast-error { background: var(--wax); color: var(--wax-ink); }

.noscript { padding: 2rem; text-align: center; }

/* ------------------------------------------------------------ capa social */

.badges { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.badge {
  padding: 0 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--quill);
  font-size: 0.75rem;
  line-height: 1.6;
}
.badge-complete { border-color: color-mix(in srgb, var(--verdigris) 45%, var(--rule)); color: var(--verdigris); }
.badge-mature { border-style: dashed; }
.mature-note {
  max-width: var(--measure);
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--quill);
  background: color-mix(in srgb, var(--quill) 8%, transparent);
  color: var(--ink);
  font-size: var(--step--1);
}

.mod-crime {
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--wax);
  background: color-mix(in srgb, var(--wax) 6%, transparent);
  font-size: var(--step--1);
}
.mod-crime p, .mod-crime ol { margin: 0 0 0.4rem; }
.mod-crime ol { padding-left: 1.2rem; }
.mature-gate { margin: 0.5rem 0 1rem; }
.mature-gate p { margin: 0 0 0.6rem; }
.mature-gate p:last-child { margin-bottom: 0; }
.age-question { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.age-question legend { font-weight: 600; margin-bottom: 0.35rem; }
.age-question small { color: var(--quill); }

/* Ficha de historia */
.story-hero { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.story-cover { position: sticky; top: 5rem; }
.story-hero .actions .button .icon { flex: none; }
.story-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: 0.75rem 2.25rem;
  margin: 1.75rem 0 0;
  padding: 1rem 0;
  border-block: 1px solid var(--rule);
}
.story-facts div { display: grid; }
.story-facts dt { order: 2; color: var(--quill); font-size: 0.8rem; }
.story-facts dd { margin: 0; font-family: var(--font-text); font-weight: 300; font-size: var(--step-2); line-height: 1.1; font-variant-numeric: lining-nums; }
.story-facts .wide { grid-column: 1 / -1; }
.story-facts .wide dd { font-family: var(--font-text); font-size: var(--step--1); }

/* Personas */
.monogram {
  --hue: 220;
  display: inline-grid;
  place-items: center;
  flex: none;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsl(var(--hue) 18% 30%);
  color: hsl(var(--hue) 30% 90%);
  font-family: var(--font-display);
  line-height: 1;
  overflow: hidden;
}
.monogram.has-image { background: var(--rule); }
.monogram.has-image img { width: 100%; height: 100%; object-fit: cover; }
.monogram-sm { width: 2rem; font-size: 1rem; }
.monogram-md { width: 3rem; font-size: 1.5rem; }
.monogram-lg { width: clamp(6rem, 18vw, 9rem); font-size: clamp(3rem, 9vw, 4.5rem); }
.account-menu .monogram-sm { width: 2.25rem; }

.handle { margin: 0; color: var(--quill); font-size: var(--step--1); }
.person-name { margin: 0; font-weight: 600; }
.person-name a, .person-link { text-decoration: none; }
.person-name a:hover, .person-link:hover { text-decoration: underline; text-decoration-color: var(--wax); }
.person-bio { margin: 0.15rem 0 0; color: var(--quill); font-size: var(--step--1); }
.people { margin: 0 0 2rem; padding: 0; list-style: none; }
.person-card { display: flex; gap: 1rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.person-card > div { flex: 1; min-width: 0; }

.author-card {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  max-width: 26rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.author-card > div { flex: 1; }

/* Perfil con banner */
.profile { padding-top: 0; }
.profile-banner {
  --hue: 220;
  height: clamp(9rem, 22vw, 15rem);
  margin: 0 calc(-1 * max(1.5rem, (100vw - var(--page)) / 2 + 1.5rem)) 0;
  background:
    linear-gradient(120deg, hsl(var(--hue) 30% 26%), hsl(calc(var(--hue) + 30) 28% 36%) 60%, hsl(var(--hue) 24% 20%));
  overflow: hidden;
}
.profile-banner.has-image img { width: 100%; height: 100%; object-fit: cover; }
.profile-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: end;
  padding: 1rem 0 1.5rem;
}
/* Sólo la foto se monta sobre el banner: el nombre siempre queda sobre el papel, legible. */
.profile-avatar { margin-top: calc(-1 * clamp(4rem, 11vw, 5.5rem)); }
.profile-avatar .monogram { box-shadow: 0 0 0 5px var(--paper); }
.profile-body h1 { margin-bottom: 0.15rem; font-size: clamp(var(--step-3), 5vw, var(--step-4)); }
.profile-bio { max-width: var(--measure); margin-bottom: 1.5rem; }
.profile-counts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0.9rem 0; color: var(--quill); }
.profile-counts a { color: var(--quill); text-decoration: none; }
.profile-counts a:hover { color: var(--ink); }
.profile-counts strong { color: var(--ink); font-variant-numeric: lining-nums; }
.profile-tab { padding-bottom: 2rem; }
.profile-preview { position: relative; margin-bottom: 4rem; }
.profile-preview .profile-banner { margin: 0; height: 8rem; border-radius: 8px; }
.profile-preview .profile-avatar { position: absolute; left: 1.25rem; bottom: -3rem; }
.profile-preview .monogram-lg { width: 6rem; font-size: 3rem; }

.board { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.board-post { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.board-post .comment-head { margin-bottom: 0.5rem; }
.board-quote { margin: 0.5rem 0; padding-left: 1rem; border-left: 2px solid var(--rule); color: var(--ink); }

/* Listas */
.list-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.list-card {
  display: grid;
  gap: 0.35rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sheet);
  text-decoration: none;
}
.list-card:hover { border-color: var(--ink); }
.list-card strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); line-height: 1.2; }
.list-card span { color: var(--quill); font-size: var(--step--1); }
.list-card .list-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.list-picker { display: grid; gap: 0.5rem; margin: 1rem 0; padding: 0; list-style: none; }
.check { display: flex; gap: 0.65rem; align-items: baseline; cursor: pointer; }
.check input { width: auto; flex: none; accent-color: var(--ink); }
.check small { display: block; color: var(--quill); font-size: var(--step--1); }
.checks { display: grid; gap: 0.75rem; margin: 0; padding: 0; border: 0; }
.checks legend { margin-bottom: 0.5rem; font-size: var(--step--1); font-weight: 600; }
.checks legend small { font-weight: 400; color: var(--quill); }
.chip-checks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--quill);
  font-size: var(--step--1);
  cursor: pointer;
}
.chip-check input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.chip-check input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.chip {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--quill);
  font-size: var(--step--1);
  text-decoration: none;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.genres { padding: 2rem 0; border-top: 1px solid var(--rule); }

.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 11rem) minmax(10rem, 15rem) auto;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.search-mature { grid-column: 1 / -1; color: var(--quill); font-size: var(--step--1); }

/* Rankings */
.ranking-block { padding: 1.5rem 0 1rem; border-top: 1px solid var(--rule); }
.ranking-block h2 { display: flex; align-items: center; gap: 0.5rem; }
.ranked .book-card { padding-top: 0.5rem; }

/* Novedades, avisos y mensajes */
.update-list { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.update { display: flex; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.update-text { margin: 0 0 0.2rem; }
.update-text a { text-decoration-color: var(--rule); }
.update.is-unread .update-text { font-weight: 600; }
.new-mark { color: var(--verdigris); font-style: italic; }
.tabs .count { margin-left: 0.25rem; }

.conversations { margin: 1rem 0 0; padding: 0; list-style: none; }
.conversations a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.conversations a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.conversation-body { display: grid; min-width: 0; }
.conversation-last { overflow: hidden; color: var(--quill); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }
.conversations .is-unread .conversation-last { color: var(--ink); font-weight: 600; }
.conversation-meta { display: grid; justify-items: end; gap: 0.25rem; color: var(--quill); font-size: 0.8rem; }

.thread-head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.thread-head > div { flex: 1; }
.thread-head h1 { margin: 0; font-size: var(--step-2); }
.thread-head h1 a { text-decoration: none; }
.bubbles { display: grid; gap: 0.6rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.bubble { max-width: min(80%, 32rem); padding: 0.7rem 1rem; border-radius: 16px; background: var(--sheet); }
.bubble .prose p { margin: 0 0 0.4em; }
.bubble .prose p:last-child { margin: 0; }
.bubble.from-me { justify-self: end; border-bottom-right-radius: 4px; background: var(--ink); color: var(--paper); }
.bubble.from-them { justify-self: start; border-bottom-left-radius: 4px; border: 1px solid var(--rule); }
.bubble-meta { margin: 0.25rem 0 0; font-size: 0.72rem; opacity: 0.7; }
.bubble.from-me .link-button { color: inherit; }
.message-compose { position: sticky; bottom: 0; grid-template-columns: 1fr auto; align-items: end; }
.message-compose .form-error { grid-column: 1 / -1; }

/* Estudio: escritorio, ficha en dos columnas, editor y estadísticas */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.work-card {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
}
.work-cover { text-decoration: none; }
.work-body h2 { margin: 0 0 0.4rem; font-size: var(--step-1); }
.work-body h2 a { text-decoration: none; }
.work-body .desk-meta { margin-bottom: 0.25rem; }
.work-links { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.75rem 0 0; font-size: var(--step--1); }

.desk-split { display: grid; grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.desk-work, .desk-chapters { padding: 1.5rem; border-radius: 10px; background: var(--sheet); }
.desk-work > h2, .desk-chapters > h2 { font-size: var(--step-1); }
.desk-chapters { position: sticky; top: 5rem; }
.cover-editor { display: grid; justify-items: start; gap: 0.75rem; margin-bottom: 1.5rem; }
.cover-editor .cover-lg { width: min(13rem, 60vw); }
.desk-work .danger-zone { margin-bottom: 0; }
.status-scheduled { background: color-mix(in srgb, var(--verdigris) 12%, transparent); color: var(--verdigris); }
.status .icon { vertical-align: -0.15em; }

.editor-toolbar {
  position: sticky;
  top: 4.4rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.35rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}
.editor-body {
  min-height: 60vh;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--sheet);
  font-size: 1.2rem;
  line-height: 1.75;
  outline: none;
  overflow-wrap: anywhere;
}
.editor-body:focus { border-color: var(--rule); }
.editor-body p { margin: 0 0 1em; }
.editor-body hr { width: 4rem; margin: 1.5em auto; border: 0; border-top: 2px dotted var(--quill); }
.editor-body figure { margin: 1.5em 0; text-align: center; }
.editor-body figure img { max-width: 100%; border-radius: 4px; }
.editor-body figcaption { color: var(--quill); font-size: 0.85em; font-style: italic; }
.editor-extra > summary { cursor: pointer; font-weight: 600; }
.editor-extra[open] > summary { margin-bottom: 1rem; }
.editor-extra { display: grid; gap: 1rem; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.stat-tiles div { padding: 1rem 1.1rem; border-radius: 10px; background: var(--sheet); }
.stat-tiles dt { color: var(--quill); font-size: var(--step--1); }
.stat-tiles dd { margin: 0.2rem 0; font-family: var(--font-text); font-weight: 300; font-size: var(--step-3); line-height: 1; font-variant-numeric: lining-nums; }
.stat-tiles p { margin: 0; color: var(--quill); font-size: 0.8rem; }

/* Gráfica: una serie, marcas finas, extremo redondeado anclado a la base. */
.chart { --chart: #008c80; display: block; width: 100%; height: 10rem; overflow: visible; }
.chart .baseline { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .bar .hit { fill: transparent; }
.chart .bar .mark { fill: var(--chart); }
.chart .bar:hover .mark, .chart .bar:focus .mark { fill: color-mix(in srgb, var(--chart) 70%, var(--ink)); }
.chart .bar:focus { outline: none; }
.chart .bar:focus .hit { stroke: var(--focus); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-axis { display: flex; justify-content: space-between; margin: 0.35rem 0 0; color: var(--quill); font-size: 0.8rem; }
.table-view { margin-top: 1rem; font-size: var(--step--1); }
.table-view summary { cursor: pointer; color: var(--quill); }
.table-view table { margin-top: 0.75rem; }
.table-scroll { overflow-x: auto; }
.chapter-stats, .table-view table { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: lining-nums; }
.chapter-stats th, .chapter-stats td, .table-view th, .table-view td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--rule); text-align: left; }
.chapter-stats thead th, .table-view thead th { color: var(--quill); font-weight: 600; }
.chapter-stats tbody th { font-weight: 400; }
.meter { display: inline-block; width: 4rem; height: 6px; margin-right: 0.4rem; border-radius: 999px; background: var(--rule); vertical-align: middle; overflow: hidden; }
.meter span { display: block; width: var(--level); height: 100%; border-radius: 999px; background: var(--chart, #008c80); }
.stats { --chart: #008c80; }
.insight { display: flex; gap: 0.6rem; align-items: start; padding: 0.8rem 1rem; border-radius: 8px; background: color-mix(in srgb, var(--chart) 9%, transparent); }
.insight .icon { flex: none; margin-top: 0.15rem; color: var(--chart); }

/* ------------------------------------------------- tema: color y profundidad */
/* Misma identidad (tinta, papel frío, lacre), con más vida: bandas de tinta arriba y
   abajo, superficies blancas con sombra suave y encuadernaciones de colores de libro. */

body { overflow-x: clip; }

/* Logo: el lacre con la T, el mismo sello que el favicon. */
.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wax) 75%, white), var(--wax) 60%);
  color: var(--wax-ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 0.25), 0 1px 2px rgb(0 0 0 / 0.2);
}
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; }

.site-header {
  background: color-mix(in srgb, var(--sheet) 90%, transparent);
  border-bottom-color: transparent;
  box-shadow: var(--shadow-1);
}

/* Superficies: blancas, con sombra suave en vez de líneas grises. */
.panel, .desk-work, .desk-chapters, .work-card, .stat-tiles div, .list-card, .compose, .comments-drawer, .reader-settings, .more-items {
  background: var(--sheet);
  border-color: transparent;
  border-radius: 14px;
  box-shadow: var(--shadow-1);
}
.list-card:hover, .work-card:hover { box-shadow: var(--shadow-2); }
.panel.danger-zone { box-shadow: none; border: 1px solid color-mix(in srgb, var(--wax) 30%, var(--rule)); }

input, select, textarea { background: var(--sheet); border-radius: 10px; }
.button { background: var(--sheet); }
.button-quiet { background: transparent; }
.button-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--wax) 88%, white), var(--wax));
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--wax) 80%, black);
}
.button-primary:hover { background: color-mix(in srgb, var(--wax) 88%, black); }
.chip { background: var(--sheet); }
.chip:hover { box-shadow: var(--shadow-1); }

/* ---------------------------------------------------------- encuadernaciones */
.tone-0 { --c1: #1f2a57; --c2: #3c4f9a; }
.tone-1 { --c1: #0c464b; --c2: #1d7f86; }
.tone-2 { --c1: #173f30; --c2: #2f7556; }
.tone-3 { --c1: #3b2152; --c2: #6c4390; }
.tone-4 { --c1: #263446; --c2: #4b6283; }
.tone-5 { --c1: #5a3c14; --c2: #a07432; }
.tone-6 { --c1: #0f2443; --c2: #27508b; }
.tone-7 { --c1: #3d4419; --c2: #6f7c36; }
.tone-8 { --c1: #123b49; --c2: #2a7290; }
.tone-9 { --c1: #321a35; --c2: #613a67; }
.tone-10 { --c1: #5b2f1a; --c2: #9a5a36; }
.tone-11 { --c1: #1a2442; --c2: #3a4f86; }

.cover:not(.has-image) {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.3) 0 3.5%, rgb(255 255 255 / 0.1) 4.5%, transparent 9%),
    radial-gradient(130% 90% at 85% 0%, color-mix(in srgb, var(--c2, #3c4f9a) 100%, white 12%), transparent 65%),
    linear-gradient(165deg, var(--c2, #3c4f9a), var(--c1, #1f2a57));
  color: #f6efdf;
}
/* Filete dorado del lomo y marco interior, como una tapa de tela. */
.cover:not(.has-image):not(.cover-sm)::before {
  content: "";
  position: absolute;
  inset: 5% 6% 5% 9%;
  z-index: -1;
  border: 1px solid rgb(246 239 223 / 0.28);
  border-radius: 2px;
}
.cover-author { border-top-color: rgb(246 239 223 / 0.35); }
.cover-initial { opacity: 0.13; }

/* ------------------------------------------------------- bandas de tinta */
.hero-band {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.5rem, calc((100vw - var(--page)) / 2 + 1.5rem));
  background:
    radial-gradient(60% 90% at 85% 10%, rgb(154 27 48 / 0.28), transparent 70%),
    radial-gradient(70% 100% at 0% 100%, rgb(46 106 102 / 0.28), transparent 70%),
    linear-gradient(135deg, var(--night), var(--night-2));
  color: var(--on-night);
  --ink: var(--on-night);
  --quill: var(--on-night-muted);
  --rule: rgb(255 255 255 / 0.14);
  --sheet: rgb(255 255 255 / 0.06);
  --paper: var(--night);
}
.hero-band .lede { color: var(--on-night-muted); }
.hero-band .button { color: var(--on-night); border-color: rgb(255 255 255 / 0.45); background: transparent; }
.hero-band .button:hover { background: rgb(255 255 255 / 0.08); }
.hero-band .button-primary { color: var(--wax-ink); border-color: var(--wax); background: var(--wax); }
.hero-band .stats-strip { border-color: rgb(255 255 255 / 0.14); }
.hero-band .book-link .cover { box-shadow: 0 18px 30px -14px rgb(0 0 0 / 0.8); }
.hero-band .progress { background: rgb(255 255 255 / 0.15); }
.hero-band .progress span { background: #f6efdf; }

.greeting.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: 1.5rem 3rem;
  align-items: start;
  padding-block: 2.25rem 1.75rem;
  margin-bottom: 1rem;
}
.greeting-empty { color: var(--on-night-muted); }
.greeting-empty a { color: var(--on-night); }
.shortcuts { display: grid; gap: 0.6rem; padding-top: 0.5rem; }
.shortcuts a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.05);
  color: var(--on-night);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.shortcuts a:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.22); }
.shortcuts strong { display: block; font-weight: 600; }
.shortcuts small { display: block; color: var(--on-night-muted); font-size: 0.8rem; }
.site-account .button-small { white-space: nowrap; }
.greeting.hero-band h1 { color: #fbf7ee; }
.greeting.hero-band .shelf-row { padding-top: 1rem; }
.greeting.hero-band .row-head h2 { font-size: var(--step-1); color: var(--on-night-muted); }
.home > .hero-band:first-child { margin-top: -0.5rem; }

/* Filas de la portada: títulos con más presencia. */
.row-head h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.shelf-row { padding-top: 2.25rem; }
.book-title { font-weight: 400; }
.book-link:hover .book-title { text-decoration: underline; text-decoration-color: var(--wax); text-underline-offset: 0.2em; }
.book-position { background: var(--wax); color: var(--wax-ink); }

.invite {
  background: linear-gradient(120deg, var(--verdigris-soft), var(--sheet) 70%);
  border: 0;
  box-shadow: var(--shadow-1);
}
.invite.is-sparse { border: 0; }
.invite > .icon {
  box-sizing: content-box;
  padding: 0.7rem;
  border-radius: 50%;
  background: var(--verdigris);
  color: #fff;
}
.stats-strip:not(.hero-band *) { border: 0; padding: 1.25rem 1.5rem; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-1); }

/* Ficha: el color de la portada tiñe el fondo de la cabecera. */
.story { position: relative; }
.story-backdrop {
  position: absolute;
  top: -1rem;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 34rem;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(165deg, var(--c2), var(--c1));
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.story-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.4); transform: scale(1.2); }
.story-backdrop:has(img) { opacity: 0.35; }
.story-facts { border: 0; padding: 1rem 1.25rem; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-1); }
.author-card { padding: 1rem 1.25rem; border: 0; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-1); }
.chapter-list { padding: 0.5rem 1.25rem; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-1); }
.chapter-list li:last-child a { border-bottom: 0; }
.chapter-list a:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }

/* Pie: banda de tinta. */
.site-footer {
  max-width: none;
  margin-top: 4rem;
  padding: 2.5rem max(1.5rem, calc((100vw - var(--page)) / 2 + 1.5rem));
  background: var(--night);
  color: var(--on-night-muted);
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.footer-brand { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.5rem; color: var(--on-night); font-family: var(--font-display); font-size: var(--step-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: start; }
.footer-links a { color: var(--on-night); text-decoration-color: rgb(255 255 255 / 0.3); }
.site-footer p { margin: 0; }

  :root[data-dark] .site-footer { background: #070910; border-top: 1px solid var(--rule); }

@media (max-width: 960px) {
  .greeting.hero-band { grid-template-columns: 1fr; }
  .shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .search-link { display: none; }
  .site-account > a[href="#/entrar"] { font-size: var(--step--1); }
  .logo-mark { width: 1.6rem; height: 1.6rem; font-size: 1rem; }
  .wordmark { font-size: var(--step-2); }
  .shortcuts a { padding: 0.6rem 0.75rem; }
  .shortcuts small { display: none; }
}
.tab-bar { background: color-mix(in srgb, var(--sheet) 94%, transparent) !important; box-shadow: 0 -4px 18px rgb(16 22 40 / 0.08); }
.tab-bar a[aria-current="page"] { color: var(--wax) !important; }

/* ---------------------------------------------------------------- colorido */
/* Cada género tiene su color y lo lleva a todas partes: portadas, etiquetas, chips y
   filas. Los iconos de cada sección tienen el suyo. El lacre sigue reservado a la acción
   principal y a los sellos. */

:root {
  --g-fantasy: #7a4fd0;
  --g-science_fiction: #1d7fd6;
  --g-romance: #d9467a;
  --g-horror: #8a3352;
  --g-mystery: #0f8a7e;
  --g-thriller: #e0562b;
  --g-historical: #a8732a;
  --g-literary: #3f4fb0;
  --g-young_adult: #d9900f;
  --g-other: #5f7486;
  --k-gold: #c9921a;
  --k-orange: #e0562b;
  --k-rose: #d9467a;
  --k-teal: #0f8a7e;
  --k-blue: #1d7fd6;
  --k-green: #2e8b57;
}

:root { --g: var(--g-other); }
.g-fantasy { --g: var(--g-fantasy); }
.g-science_fiction { --g: var(--g-science_fiction); }
.g-romance { --g: var(--g-romance); }
.g-horror { --g: var(--g-horror); }
.g-mystery { --g: var(--g-mystery); }
.g-thriller { --g: var(--g-thriller); }
.g-historical { --g: var(--g-historical); }
.g-literary { --g: var(--g-literary); }
.g-young_adult { --g: var(--g-young_adult); }
.g-other { --g: var(--g-other); }

/* Portadas del color de su género, con tres variaciones por historia. */
.cover:not(.has-image) {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.32) 0 3.5%, rgb(255 255 255 / 0.12) 4.5%, transparent 9%),
    radial-gradient(120% 75% at 95% 100%, color-mix(in oklab, var(--g) 85%, white 30%), transparent 62%),
    linear-gradient(172deg, color-mix(in oklab, var(--g) 52%, black), color-mix(in oklab, var(--g) 88%, black 4%));
  color: #fbf5e6;
}
.cover.v-1:not(.has-image) {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.32) 0 3.5%, rgb(255 255 255 / 0.12) 4.5%, transparent 9%),
    radial-gradient(90% 60% at 10% 100%, color-mix(in oklab, var(--g) 70%, white 35%), transparent 60%),
    linear-gradient(160deg, color-mix(in oklab, var(--g) 45%, black), color-mix(in oklab, var(--g) 75%, black 12%));
}
.cover.v-2:not(.has-image) {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.32) 0 3.5%, rgb(255 255 255 / 0.12) 4.5%, transparent 9%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 14px),
    linear-gradient(185deg, color-mix(in oklab, var(--g) 50%, black), color-mix(in oklab, var(--g) 92%, white 4%));
}
.cover-title { text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }

/* Etiqueta de género: en la firma y encima del título de cada tarjeta. */
.genre-pill, .book-genre {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g) 14%, transparent);
  color: color-mix(in oklab, var(--g) 80%, var(--ink));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.genre-pill::before, .book-genre::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--g);
}
.book-genre { margin-bottom: 0.15rem; font-size: 0.7rem; }
.hero-band .book-genre { background: rgb(255 255 255 / 0.12); color: #fff; }

.genre-chip { display: inline-flex; align-items: center; gap: 0.45rem; border-color: color-mix(in srgb, var(--g) 35%, var(--rule)); color: var(--ink); }
.genre-chip .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--g); }
.genre-chip:hover { border-color: var(--g); background: color-mix(in srgb, var(--g) 10%, var(--sheet)); color: var(--ink); }
.genre-chip[aria-current="page"] { border-color: var(--g); background: var(--g); color: #fff; }
.genre-chip[aria-current="page"] .dot { background: #fff; }

/* Iconos de sección en círculos de color. */
.row-icon {
  --k: var(--k-blue);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--k) 85%, white 25%), var(--k));
  color: #fff;
  box-shadow: 0 8px 18px -10px var(--k);
}
.k-gold { --k: var(--k-gold); }
.k-orange { --k: var(--k-orange); }
.k-rose { --k: var(--k-rose); }
.k-teal { --k: var(--k-teal); }
.k-blue { --k: var(--k-blue); }
.k-green { --k: var(--k-green); }
.k-genre { --k: var(--g); }
.row-head { justify-content: flex-start; align-items: center; gap: 0.9rem; }
.row-head .row-title { flex: 1; min-width: 0; }
.row-head .row-tools { margin-left: auto; }

.shortcuts a { grid-template-columns: auto 1fr; }
.shortcuts .row-icon { width: 2.4rem; height: 2.4rem; }

/* Medallas de los tres primeros puestos. */
.book-position.medal-1 { background: linear-gradient(145deg, #f2c94c, #c9921a); color: #3a2a05; }
.book-position.medal-2 { background: linear-gradient(145deg, #e6e9ef, #a7b0bf); color: #262b36; }
.book-position.medal-3 { background: linear-gradient(145deg, #e3a36b, #a8642c); color: #2e1a08; }
.ranking-block:first-of-type h2 .icon { color: var(--k-orange); }
.ranking-block:last-of-type h2 .icon { color: var(--k-gold); }
.rank-badge { border-color: var(--k-gold); color: color-mix(in oklab, var(--k-gold) 70%, var(--ink)); background: color-mix(in srgb, var(--k-gold) 10%, var(--sheet)); }
.rank-badge.is-rising { border-color: var(--k-orange); color: color-mix(in oklab, var(--k-orange) 75%, var(--ink)); background: color-mix(in srgb, var(--k-orange) 8%, var(--sheet)); }

/* Banda de bienvenida más viva: tinta, violeta y lacre. */
.hero-band {
  background:
    radial-gradient(55% 80% at 88% 8%, rgb(217 70 122 / 0.45), transparent 70%),
    radial-gradient(50% 90% at 50% 120%, rgb(29 127 214 / 0.35), transparent 70%),
    radial-gradient(60% 100% at 0% 100%, rgb(15 138 126 / 0.4), transparent 70%),
    linear-gradient(130deg, #161a3d, #2f2160 55%, #4a1835);
}

/* Fondo de la ficha y avatares con color. */
.story-backdrop { background: linear-gradient(165deg, var(--g), color-mix(in oklab, var(--g) 50%, black)); opacity: 0.22; }
.monogram:not(.has-image) { background: linear-gradient(145deg, hsl(var(--hue) 55% 48%), hsl(calc(var(--hue) + 25) 50% 32%)); color: #fff; }
.count { background: var(--wax); color: var(--wax-ink); }
.site-nav a[aria-current="page"] { color: var(--wax); }
.stats-strip:not(.hero-band *) dd { color: var(--wax); }
.stat-tiles div:nth-child(6n + 1) dd { color: var(--k-blue); }
.stat-tiles div:nth-child(6n + 2) dd { color: var(--k-orange); }
.stat-tiles div:nth-child(6n + 3) dd { color: var(--k-rose); }
.stat-tiles div:nth-child(6n + 4) dd { color: var(--k-teal); }
.stat-tiles div:nth-child(6n + 5) dd { color: color-mix(in oklab, var(--k-gold) 62%, var(--ink)); }
.stat-tiles div:nth-child(6n + 6) dd { color: var(--k-green); }

  :root[data-dark] .genre-pill,
:root[data-dark] .book-genre { color: color-mix(in oklab, var(--g) 55%, white); background: color-mix(in srgb, var(--g) 22%, transparent); }
  :root[data-dark] .rank-badge { color: #f2c94c; background: transparent; }
  :root[data-dark] .rank-badge.is-rising { color: #ff8a5c; }


/* ------------------------------------------------- baldosas y pantallas de acceso */

.genre-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
.genre-tile {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-height: 7.5rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(100% 90% at 100% 0%, color-mix(in oklab, var(--g) 70%, white 35%), transparent 60%),
    linear-gradient(150deg, var(--g), color-mix(in oklab, var(--g) 55%, black));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 26px -16px var(--g);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.genre-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -14px var(--g); }
.genre-tile strong { align-self: end; font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.1; }
.genre-tile > span:not(.tile-initial) { color: rgb(255 255 255 / 0.85); font-size: 0.82rem; line-height: 1.35; }
.genre-tile[aria-current="page"] { outline: 3px solid var(--ink); outline-offset: 3px; }
.tile-initial {
  position: absolute;
  right: -0.2rem;
  bottom: -2.2rem;
  z-index: -1;
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
  opacity: 0.18;
}
.genres .genre-tiles { margin-top: 0.75rem; }
.empty-note h2 { margin-top: 1.5rem; font-size: var(--step-1); color: var(--ink); }

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: calc(100vh - 4rem);
}
.auth-art {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.5rem;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 90% 10%, rgb(217 70 122 / 0.45), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, rgb(15 138 126 / 0.45), transparent 70%),
    linear-gradient(140deg, #161a3d, #2f2160 60%, #4a1835);
  color: #eef1f6;
}
.auth-brand { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-family: var(--font-display); font-size: var(--step-2); }
.auth-art h2 { max-width: 16ch; margin: 0; color: #fbf7ee; font-size: clamp(2rem, 4vw, 3.1rem); }
.auth-points { display: grid; gap: 0.9rem; max-width: 28rem; margin: 0; padding: 0; list-style: none; }
.auth-points li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: center; color: #d6dbe8; }
.auth-points .row-icon { width: 2.2rem; height: 2.2rem; border-radius: 10px; }
.auth-shelf {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 9rem;
  margin-top: auto;
  padding-bottom: 0.3rem;
  border-bottom: 3px solid rgb(255 255 255 / 0.25);
}
.spine-deco {
  width: clamp(1.6rem, 3vw, 2.4rem);
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.25), transparent 30%, rgb(255 255 255 / 0.12) 55%, transparent 70%),
    linear-gradient(var(--g), color-mix(in oklab, var(--g) 60%, black));
  box-shadow: inset 0 6px 0 -3px rgb(255 255 255 / 0.25), inset 0 -10px 0 -7px rgb(255 255 255 / 0.25);
}
.spine-deco:nth-child(3n) { transform: rotate(-4deg); transform-origin: bottom left; margin-left: 0.4rem; }
.auth-split .auth {
  align-self: center;
  width: min(30rem, 100%);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
}
.auth h1 { font-size: clamp(var(--step-3), 5vw, var(--step-4)); }
body:has(.auth-split) .site-footer { margin-top: 0; }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-art { padding: 1.5rem 1.25rem; gap: 1rem; }
  .auth-art h2 { font-size: var(--step-3); }
  .auth-points { display: none; }
  .auth-shelf { height: 4rem; }
  .auth-split .auth { padding-top: 1.5rem; }
}

/* ------------------------------------------------ bienvenida y movimiento */
/* La portada para quien llega sin cuenta. Se compone como una página de libro: columnas de
   anchos distintos, notas al margen, un índice con puntos guía. Nada de tres tarjetas iguales. */

.kicker {
  margin: 0 0 0.75rem;
  color: var(--verdigris);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
}
.hero-band .kicker { color: #f0c3ca; }
.button-large { min-height: 3.1rem; padding: 0.8rem 1.5rem; font-size: var(--step-0); }

/* Enlace con flecha: la acción secundaria no es otro botón, es una frase que se puede pulsar. */
.link-arrow {
  display: inline-flex;
  gap: 0.45rem;
  align-items: baseline;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.link-arrow::after { content: "→"; transition: translate 0.2s ease; }
.link-arrow:hover::after { translate: 0.25rem 0; }

.landing { display: grid; padding-top: 0; }
.landing h2 { text-wrap: balance; }

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem;
  align-items: end;
  min-height: min(37rem, 80vh);
  margin-top: -0.5rem;
  padding-block: 4.5rem 0;
  overflow: hidden;
}
.landing-copy { padding-bottom: 3.5rem; }
.landing-copy h1 {
  max-width: 15ch;
  margin: 0 0 1.25rem;
  color: #fbf7ee;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  text-wrap: balance;
}
.landing-copy .lede { max-width: 34rem; font-size: var(--step-1); line-height: 1.55; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; margin: 2rem 0 1rem; }
.landing-peek { margin: 0; color: var(--on-night-muted); }
.landing-peek a { color: #fbf7ee; }
.landing-count { max-width: 30rem; margin: 2.25rem 0 0; color: var(--on-night-muted); font-size: var(--step--1); }
.landing-count strong { color: #fbf7ee; font-family: var(--font-text); font-size: 1.15em; font-variant-numeric: lining-nums; }

/* Estantería: lomos de colores de altura y grosor distintos, uno caído. Sale por el borde. */
/* Tejuelos: la banda clara a media altura de algunos lomos, como en una biblioteca. */

.landing-section { padding-block: 4rem 1rem; }

/* Para qué sirve: título en el margen, lectura ancha, escritura como nota desplazada. */
.landing-uses {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
}
.use-reader h3 { margin: 0 0 1.25rem; font-size: clamp(var(--step-2), 3.6vw, var(--step-3)); line-height: 1.1; }
.use-writer {
  margin-top: 4.5rem;
  padding: 1.5rem 1.6rem 1.6rem;
  border-left: 3px solid var(--verdigris);
  border-radius: 0 12px 12px 0;
  background: var(--verdigris-soft);
}
.use-writer h3 { margin: 0 0 1rem; font-size: var(--step-2); }
.use-list { display: grid; gap: 0.7rem; margin: 0 0 1.5rem; padding: 0; list-style: none; line-height: 1.55; }
.use-list li { position: relative; padding-left: 1.4rem; }
.use-list li::before { content: "–"; position: absolute; left: 0; color: var(--wax); font-weight: 700; }
.use-writer .use-list li::before { color: var(--verdigris); }
.use-reader .use-list li:first-child { font-size: var(--step-1); }
.landing-uses .link-arrow { color: var(--ink); }

/* Cómo se empieza: un índice de libro con puntos guía. */
.landing-contents { display: grid; grid-template-columns: 8rem minmax(0, 46rem); gap: 0 3rem; }
.landing-contents h2 { grid-column: 2; margin: 0 0 1.25rem; font-size: clamp(var(--step-2), 3.6vw, var(--step-3)); }
.contents { grid-column: 2; display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.contents li { display: grid; grid-template-columns: 2.6rem minmax(0, max-content) minmax(2rem, 1fr) auto; gap: 0.6rem; align-items: baseline; }
.contents-numeral { color: var(--wax); font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.contents-title { font-size: var(--step-1); }
.contents-leader { align-self: end; margin-bottom: 0.4em; border-bottom: 2px dotted color-mix(in srgb, var(--quill) 60%, transparent); }
.contents-time { color: var(--quill); font-style: italic; }

/* Lo que la hace distinta: una frase grande y una nota al margen con el sello de verdad. */
.landing-different {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.5rem 3.5rem;
  align-items: start;
}
.diff-main h2 { max-width: 20ch; margin: 0 0 1rem; font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.08; }
.diff-main p { max-width: 36rem; margin: 0; color: var(--quill); font-size: var(--step-1); line-height: 1.55; }
.diff-foot {
  grid-column: 2;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  color: var(--quill);
  font-size: var(--step--1);
  font-style: italic;
}

/* Géneros: baldosas de tamaños distintos, como una librería y no como una rejilla. */
.landing-genres h2 { margin: 0 0 0.5rem; font-size: clamp(var(--step-2), 3.6vw, var(--step-3)); }
.landing-genres .genre-tiles { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); grid-auto-flow: dense; }
.landing-genres .genre-tiles li { display: grid; }
.landing-genres .genre-tiles li:first-child { grid-column: span 2; grid-row: span 2; }
.landing-genres .genre-tiles li:first-child strong { font-size: var(--step-3); }
.landing-genres .genre-tiles li:first-child .tile-initial { font-size: 14rem; bottom: -4rem; }
.landing-genres .genre-tiles li:nth-child(4),
.landing-genres .genre-tiles li:nth-child(7) { grid-column: span 2; }

/* Preguntas: título fijo a un lado, respuestas a línea, sin tarjetas. */
.landing-faq { display: grid; grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.6fr); gap: 1.5rem 3.5rem; align-items: start; }
.faq-head { position: sticky; top: 6rem; }
.faq-head h2 { margin: 0 0 0.75rem; font-size: clamp(var(--step-2), 3.6vw, var(--step-3)); line-height: 1.1; }
.faq-head p { margin: 0; color: var(--quill); }
.faq { border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 0.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.35rem;
  border-right: 2px solid var(--wax);
  border-bottom: 2px solid var(--wax);
  rotate: 45deg;
  translate: 0 -0.15em;
  transition: rotate 0.2s ease, translate 0.2s ease;
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 0.1em; }
.faq summary:hover { color: var(--wax); }
.faq details p { max-width: 40rem; margin: 0; padding: 0 0.25rem 1.25rem; color: var(--quill); line-height: 1.6; }

/* Cierre: sin banda centrada. Una frase grande a la izquierda y la acción a la derecha. */
.landing-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0.5rem 3rem;
  align-items: end;
  margin-top: 4rem;
  padding: 2.5rem 0 1rem;
  border-top: 2px solid var(--ink);
}
.landing-cta h2 { grid-row: span 2; margin: 0; font-size: clamp(2.2rem, 5vw, var(--step-5)); line-height: 1; }
.landing-cta p { margin: 0; color: var(--quill); font-size: var(--step-1); }
.landing-cta .landing-actions { margin: 1rem 0 0; }
.landing-cta .link-arrow { color: var(--ink); }

/* Entradas: las secciones aparecen al llegar a ellas; la página, con un fundido corto. */
.route-in { animation: route-in 0.35s ease-out both; }
@keyframes route-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
.will-reveal { transition: opacity 0.6s ease, translate 0.6s ease; }
.will-reveal:not(.is-visible) { opacity: 0; translate: 0 18px; }

/* Botones y tarjetas con respuesta al tacto. */
.button { transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.button:active { transform: translateY(1px) scale(0.99); }
.book-link .cover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.book-link:hover .cover, .book-link:focus-visible .cover { transform: translateY(-4px) rotate(-0.6deg); }

/* Pestañas de la historia con su explicación debajo. */
.story-tabs a { display: grid; gap: 0.05rem; }
.tab-hint { color: var(--quill); font-size: 0.75rem; font-weight: 400; }

/* Lector: interlineado y ancho de línea a elegir. */
.reader { --reader-line: 1.75; --reader-measure: 34em; }
.reader[data-line="tight"] { --reader-line: 1.55; }
.reader[data-line="airy"] { --reader-line: 2; }
.reader[data-width="narrow"] { --reader-measure: 28em; }
.reader[data-width="wide"] { --reader-measure: 42em; }
.reader-text { max-width: var(--reader-measure); line-height: var(--reader-line); }
.reader[data-mode="paged"] .reader-text > * { padding-inline: max(1.5rem, calc((100vw - var(--reader-measure)) / 2)); }

/* Editor: escribir a gusto. */
.editor-body {
  max-width: 40rem;
  margin-inline: auto;
  width: 100%;
  font-family: var(--font-text);
  font-size: 1.2rem;
  line-height: 1.8;
  caret-color: var(--wax);
}
.editor-body:empty::before,
.editor-body:has(> p:only-child > br:only-child)::before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--quill);
  font-style: italic;
  pointer-events: none;
}
.editor-body { position: relative; }
.toolbar-spacer { flex: 1; }
.editor-toolbar [data-action] { display: inline-flex; gap: 0.35rem; align-items: center; width: auto; padding-inline: 0.6rem; }
.toolbar-label { font-size: var(--step--1); }
.editor-toolbar [aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.shortcuts-hint { margin: 0; color: var(--quill); font-size: var(--step--1); }
kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--sheet);
  font-family: var(--font-text);
  font-size: 0.85em;
}

/* Modo concentración: sólo el título, el texto y la barra de guardar. */
body.is-writing-focus .site-header,
body.is-writing-focus .site-footer,
body.is-writing-focus .tab-bar,
body.is-writing-focus .crumbs,
body.is-writing-focus .editor-extra,
body.is-writing-focus .shortcuts-hint,
body.is-writing-focus .editor .hint { display: none; }
body.is-writing-focus .editor { max-width: 46rem; margin-inline: auto; padding-top: 2rem; }
body.is-writing-focus .editor-toolbar { top: 0.5rem; }
body.is-writing-focus .editor-body { background: transparent; box-shadow: none; font-size: 1.3rem; }

/* Vista previa del capítulo, como la verá quien lea. */
.dialog-wide { width: min(46rem, calc(100vw - 2rem)); max-height: 88vh; overflow: hidden auto; padding: 2.5rem clamp(1.25rem, 5vw, 3.5rem); }
.preview { max-width: 34em; margin: 0 auto; padding-top: 0; font-family: var(--font-text); font-size: 1.15rem; line-height: 1.75; }
.preview h1 { margin: 0 0 1.75rem; text-align: center; font-size: clamp(var(--step-2), 5vw, var(--step-3)); line-height: 1.1; overflow-wrap: anywhere; }
.preview .reader-numeral { text-align: center; }
/* El diálogo recibe el foco al abrirse: el marco de foco va en sus botones, no en todo el cuadro. */
.dialog:focus, .dialog:focus-visible { outline: none; }
/* En oscuro, el diálogo se despega del fondo con un borde fino y un tono algo más claro. */
  :root[data-dark] .dialog { border: 1px solid var(--rule); background: var(--sheet); }


/* Una palabra larguísima sin espacios (o un enlace pegado) no puede romper la página: se parte. */
.rich, .prose, .reader-text h1, .comment, .board-post, .thread-title { overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 3rem; }
  .landing-copy { padding-bottom: 0; }
      .landing-uses, .landing-different, .landing-faq, .landing-cta { grid-template-columns: minmax(0, 1fr); }
  .landing-contents { grid-template-columns: minmax(0, 1fr); }
  .landing-contents h2, .contents { grid-column: 1; }
    .use-writer { margin-top: 0; }
    .diff-foot { grid-column: 1; }
  .faq-head { position: static; }
  .landing-cta h2 { grid-row: auto; }
}
@media (max-width: 720px) {
  .landing-actions .button { flex: 1 1 100%; }
  .landing-section { padding-block: 2.75rem 0.5rem; }
  .contents li { grid-template-columns: 2.2rem 1fr; }
  .contents-leader { display: none; }
  .contents-time { grid-column: 2; margin-top: -0.4rem; font-size: var(--step--1); }
  .landing-genres .genre-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-genres .genre-tiles li:first-child { grid-row: span 1; }
  .landing-genres .genre-tiles li:first-child .tile-initial { font-size: 8rem; bottom: -2.2rem; }
  .landing-genres .genre-tiles li:nth-child(4),
  .landing-genres .genre-tiles li:nth-child(7) { grid-column: span 1; }
  .toolbar-label { display: none; }
  .editor-body { font-size: 1.1rem; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .will-reveal:not(.is-visible) { opacity: 1; translate: none; }
}

.landing .empty-shelf {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  max-width: 44rem;
  margin: 3rem 0 0 11rem;
  padding: 2rem 2rem 2.25rem;
}
@media (max-width: 960px) {
  .landing .empty-shelf { margin-left: 0; padding: 1.5rem 1.25rem; }
  border: 2px dashed var(--rule);
  border-radius: 14px;
}
.landing .empty-shelf h2 { margin: 0; font-size: var(--step-2); }
.landing .empty-shelf p { max-width: 34rem; margin: 0 0 0.75rem; color: var(--quill); }

/* ------------------------------------------------------------------ carácter */
/* Botones con canto de imprenta (no píldoras con resplandor), iconos sin caja de degradado y
   bandas de tinta con grano de papel en vez de manchas de color. */

.button { border-radius: 6px; }
.button-small { border-radius: 5px; }
.button-primary,
.hero-band .button-primary {
  background: var(--wax);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--wax) 55%, black);
}
.button-primary:hover { background: color-mix(in srgb, var(--wax) 90%, black); translate: 0 -1px; box-shadow: 0 3px 0 color-mix(in srgb, var(--wax) 55%, black); }
.button-primary:active { translate: 0 2px; box-shadow: 0 0 0 transparent; }
.button { transition: translate 0.12s ease, background-color 0.15s ease, box-shadow 0.12s ease; }
.button:active { transform: none; }

.row-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--k);
}
.shortcuts .row-icon, .auth-points .row-icon { width: auto; height: auto; }
.hero-band .row-icon { color: color-mix(in oklab, var(--k) 70%, white); }

.hero-band,
.auth-art {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(45% 70% at 8% 105%, rgb(154 27 48 / 0.38), transparent 70%),
    radial-gradient(35% 55% at 100% 0%, rgb(46 106 102 / 0.3), transparent 70%),
    linear-gradient(168deg, #131a2f, #1e2645 70%, #251f3f);
}

/* ---------------------------------------------------------- mecenazgo */
/* Camino al mecenazgo: cada requisito con su cifra y una barra fina; lo cumplido, en verdete. */
.patronage { border-left: 3px solid var(--verdigris); }
.requirements { display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.requirement { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; align-items: baseline; }
.requirement-label { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 600; }
.requirement-count { color: var(--quill); font-size: var(--step--1); font-variant-numeric: lining-nums tabular-nums; }
.requirement.is-met .requirement-label { color: var(--verdigris); }
.requirement progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 0.45rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  appearance: none;
  overflow: hidden;
}
.requirement progress::-webkit-progress-bar { background: transparent; }
.requirement progress::-webkit-progress-value { border-radius: 999px; background: var(--ink); }
.requirement progress::-moz-progress-bar { border-radius: 999px; background: var(--ink); }
.requirement.is-met progress::-webkit-progress-value { background: var(--verdigris); }
.requirement.is-met progress::-moz-progress-bar { background: var(--verdigris); }
.button:disabled { cursor: not-allowed; }
.tip-share { margin: 0; color: var(--verdigris); font-weight: 600; min-height: 1.5em; }

/* ------------------------------------------------------------- papel con vida */
/* El fondo deja de ser un color plano: grano de papel muy fino y dos luces suaves (verdete
   arriba a la izquierda, lacre abajo a la derecha) que no se mueven al desplazarse. Va en una
   capa fija detrás de todo; el lector inmersivo la quita para que nada distraiga del texto. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.13 0 0 0 0 0.2 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glow-a: color-mix(in srgb, var(--verdigris) 12%, transparent);
  --glow-b: color-mix(in srgb, var(--wax) 8%, transparent);
}
  :root[data-dark] {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --glow-a: color-mix(in srgb, var(--verdigris) 14%, transparent);
    --glow-b: color-mix(in srgb, var(--wax) 13%, transparent);
  }

html { background: var(--paper); }
body { background: none; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--grain),
    radial-gradient(55rem 38rem at -8% -5%, var(--glow-a), transparent 70%),
    radial-gradient(48rem 36rem at 108% 104%, var(--glow-b), transparent 70%);
}
body.is-immersive::before { display: none; }

/* ------------------------------------------------- inicio: lo que engancha */
.home-hooks {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  margin: 2rem 0 0.5rem;
}
.home-hooks.is-single { grid-template-columns: minmax(0, 1fr); }

.spotlight {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  padding: 1.75rem;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 120% at 0% 50%, color-mix(in oklab, var(--g) 30%, transparent), transparent 70%),
    var(--sheet);
  box-shadow: var(--shadow-1);
}
.spotlight::after {
  /* El color del género, como el reflejo de una portada sobre la mesa. */
  content: "";
  position: absolute;
  inset: auto -10% -60% 30%;
  z-index: -1;
  height: 80%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--g) 22%, transparent), transparent);
}
.spotlight-cover .cover-lg { width: clamp(8rem, 16vw, 11rem); rotate: -2.5deg; box-shadow: 0 22px 36px -18px rgb(0 0 0 / 0.6); transition: rotate 0.3s ease, translate 0.3s ease; }
.spotlight:hover .spotlight-cover .cover-lg { rotate: 0deg; translate: 0 -4px; }
.spotlight-body h2 { margin: 0 0 0.4rem; font-size: clamp(var(--step-2), 3.4vw, var(--step-3)); line-height: 1.05; }
.spotlight-body h2 a { color: inherit; text-decoration: none; }
.spotlight-body h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.spotlight-synopsis { margin: 0.75rem 0 1.25rem; color: var(--quill); line-height: 1.6; }
.spotlight-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin: 0; }

.challenge {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--wax) 35%, var(--rule));
  border-radius: 20px;
  background:
    repeating-linear-gradient(transparent 0 1.9rem, color-mix(in srgb, var(--ink) 6%, transparent) 1.9rem calc(1.9rem + 1px)),
    var(--sheet);
  box-shadow: var(--shadow-1);
}
.challenge::before {
  /* El margen rojo de un cuaderno. */
  content: "";
  position: absolute;
  inset: 0 auto 0 1.1rem;
  width: 1px;
  background: color-mix(in srgb, var(--wax) 45%, transparent);
}
.challenge > * { position: relative; padding-left: 0.6rem; }
.challenge .kicker { color: var(--wax); }
.challenge h2 { margin: 0 0 0.75rem; font-size: var(--step-2); font-style: italic; line-height: 1.2; }
.challenge p { line-height: 1.55; }
.challenge-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin: auto 0 0; padding-top: 0.75rem; }
.challenge-compact { margin: 0 0 1.5rem; }
.challenge-text { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: var(--step-1); font-style: italic; }

/* ------------------------------------------------- apoyo al final del capítulo */
.support-card {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--wax) 30%, var(--rule));
  border-radius: 16px;
  background: color-mix(in srgb, var(--wax) 5%, var(--sheet));
}
.support-copy h2 { margin: 0 0 0.25rem; font-size: var(--step-1); }
.support-copy p { margin: 0; color: var(--quill); }
.support-amounts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.support-chip {
  min-height: 2.6rem;
  padding: 0.45rem 1rem;
  border: 1px solid color-mix(in srgb, var(--wax) 45%, var(--rule));
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, translate 0.15s ease;
}
.support-chip:hover { background: var(--wax); color: var(--wax-ink); translate: 0 -1px; }
.support-more { font-weight: 600; border-style: dashed; }

/* ----------------------------------------------------------- diálogo de propina */
.tip-dialog { width: min(34rem, calc(100vw - 2rem)); padding: 1.75rem; }
.tip-form { display: grid; gap: 1.1rem; }
.tip-head { display: flex; gap: 0.9rem; align-items: center; margin-right: 2rem; }
.tip-head .kicker { margin: 0 0 0.15rem; }
.tip-head h2 { margin: 0; font-size: var(--step-2); line-height: 1.15; }
.tip-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.tip-tier {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem 0.8rem;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.tip-tier input { position: absolute; opacity: 0; pointer-events: none; }
.tip-amount { font-family: var(--font-text); font-size: var(--step-2); font-weight: 700; line-height: 1.1; font-variant-numeric: lining-nums; }
.tip-label { color: var(--quill); font-size: var(--step--1); }
.tip-tier-custom { grid-column: span 2; }
.tip-tier-custom .tip-amount { font-size: var(--step-1); }
.tip-tier:hover { border-color: color-mix(in srgb, var(--wax) 50%, var(--rule)); }
.tip-tier:has(input:checked) { border-color: var(--wax); background: color-mix(in srgb, var(--wax) 8%, var(--paper)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wax) 18%, transparent); }
.tip-tier:has(input:checked) .tip-amount { color: var(--wax); }
.tip-tier:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tip-tiers:disabled .tip-tier { opacity: 0.6; cursor: default; }
.tip-custom { display: flex; gap: 0.5rem; align-items: center; justify-content: center; }
.tip-custom[hidden] { display: none; }
.tip-step {
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.tip-step:hover { border-color: var(--wax); color: var(--wax); }
.tip-custom-field { display: inline-flex; gap: 0.3rem; align-items: baseline; padding: 0.35rem 1rem; border-bottom: 2px solid var(--wax); }
.tip-custom-field input {
  width: 4.5ch;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-3);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: lining-nums;
  appearance: textfield;
}
.tip-custom-field input::-webkit-inner-spin-button,
.tip-custom-field input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.tip-custom-field input:focus { outline: none; }
.tip-custom-field > span:last-child { font-size: var(--step-2); font-weight: 700; color: var(--quill); }
.tip-share { text-align: center; }
.tip-submit { width: 100%; }
.tip-fine { margin: 0; color: var(--quill); font-size: 0.8rem; line-height: 1.5; text-align: center; }

@media (max-width: 860px) {
  .home-hooks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .spotlight { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 1.25rem; }
  .spotlight-cover .cover-lg { width: 8rem; }
  .tip-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tip-dialog { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-cover .cover-lg { rotate: none; }
}

/* ------------------------------------------------------------- oscuro premium */
/* Tipografía: Playfair Display para títulos y nombres de libros, Inter para la interfaz y
   Literata para leer y escribir capítulos (en textos largos cansa menos que una sans).
   Oscuro: negro OLED, tarjetas carbón, blanco roto y un dorado apagado para lo interactivo.
   Sin degradados saturados. El lacre queda para los sellos de spoiler y lo peligroso. */
:root {
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-read: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --gold: #8a6a2f;
  --glass: rgb(255 255 255 / 0.55);
  --glass-edge: rgb(16 22 40 / 0.1);
}
body { font-feature-settings: "cv11", "ss01"; letter-spacing: -0.005em; }
h1, h2, h3, .book-title, .cover-title, .story-head-title, .index-body h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
/* Cifras de caja alta en los títulos: las de estilo antiguo hacen que «0 respuestas» se lea «o respuestas». */
h1, h2, h3, .book-title, .cover-title, .story-head-title, .index-body h3 { font-variant-numeric: lining-nums; }
.kicker { font-family: var(--font-display); font-weight: 500; }
.reader { --reader-font: var(--font-read); }
.reader[data-font="sans"] { --reader-font: var(--font-sans); }
.editor-body, .preview { font-family: var(--font-read); }
.reader-text .prose { font-family: var(--reader-font); }
.reader-text h1 { font-family: var(--font-display); }

  :root[data-dark] {
    --paper: #09090b;
    --sheet: #18181b;
    --ink: #ededed;
    --quill: #a1a1aa;
    --rule: #27272a;
    --night: #09090b;
    --night-2: #111114;
    --on-night: #ededed;
    --on-night-muted: #a1a1aa;
    --gold: #d4b67a;
    --focus: #d4b67a;
    --verdigris: #7fb8b2;
    --verdigris-soft: #10201f;
    --wax-soft: #2a1217;
    --glass: rgb(255 255 255 / 0.035);
    --glass-edge: rgb(255 255 255 / 0.09);
    --shadow-1: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 10px 30px -12px rgb(0 0 0 / 0.8);
    --shadow-2: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 24px 48px -16px rgb(0 0 0 / 0.9);
  }
  /* Negro de verdad: sin grano ni luces de color en el fondo. */
  :root[data-dark] body::before { display: none; }
  :root[data-dark] .site-header { background: rgb(9 9 11 / 0.78) !important; backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--glass-edge); box-shadow: none; }
  :root[data-dark] .site-footer { background: #050506 !important; border-top: 1px solid var(--glass-edge); }
  :root[data-dark] .tab-bar { background: rgb(9 9 11 / 0.85) !important; border-top-color: var(--glass-edge) !important; }
  :root[data-dark] .tab-bar a[aria-current="page"] { color: var(--ink) !important; }
  :root[data-dark] .site-nav a[aria-current="page"] { color: var(--ink); text-decoration-color: var(--gold); }

  /* Botón principal en blanco roto, como en una tienda de películas; el secundario, contorno fino. */
  :root[data-dark] .button.button-primary,
:root[data-dark] .hero-band .button.button-primary {
    border-color: var(--ink);
    background: var(--ink);
    color: #09090b;
    box-shadow: none;
  }
  :root[data-dark] .button.button-primary:hover,
:root[data-dark] .hero-band .button.button-primary:hover { background: #ffffff; border-color: #ffffff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.08); }
  :root[data-dark] .button.button-primary:active { box-shadow: none; }
  :root[data-dark] .button,
:root[data-dark] .hero-band .button { border-color: rgb(255 255 255 / 0.18); background: transparent; color: var(--ink); }
  :root[data-dark] .button:hover,
:root[data-dark] .hero-band .button:hover { border-color: rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.05); }
  :root[data-dark] .button-danger { border-color: var(--wax); color: #f0a3ae; }

  /* Bandas oscuras sin manchas de color: casi negro y una luz blanca muy suave. */
  :root[data-dark] .hero-band,
:root[data-dark] .auth-art {
    background:
      radial-gradient(70% 120% at 85% -10%, rgb(255 255 255 / 0.06), transparent 60%),
      #0c0c0f;
    border-bottom: 1px solid var(--glass-edge);
  }
  :root[data-dark] .hero-band .kicker,
:root[data-dark] .landing .kicker { color: var(--gold); }
  :root[data-dark] .landing-cta { border-top-color: var(--glass-edge); }

  :root[data-dark] .stats-strip dd,
:root[data-dark] .stats-strip:not(.hero-band *) dd,
:root[data-dark] .stat-tiles dd,
:root[data-dark] .ledger dd { color: var(--ink); }
  :root[data-dark] .stats-strip:not(.hero-band *),
:root[data-dark] .panel,
:root[data-dark] .steps li,
:root[data-dark] .faq details,
:root[data-dark] .work-card,
:root[data-dark] .list-card {
    background: var(--sheet);
    border: 1px solid var(--glass-edge);
    box-shadow: none;
  }
  :root[data-dark] .chip,
:root[data-dark] .book-genre { background: rgb(255 255 255 / 0.05); }
  :root[data-dark] .row-arrow { border-color: var(--glass-edge); background: transparent; color: var(--ink); }
  :root[data-dark] .challenge { border-color: var(--glass-edge); background: repeating-linear-gradient(transparent 0 1.9rem, rgb(255 255 255 / 0.025) 1.9rem calc(1.9rem + 1px)), var(--sheet); }
  :root[data-dark] .challenge .kicker { color: var(--gold); }
  :root[data-dark] .challenge::before { background: rgb(212 182 122 / 0.28); }
  :root[data-dark] .support-card { border-color: var(--glass-edge); background: var(--sheet); }
  :root[data-dark] .support-chip { border-color: rgb(255 255 255 / 0.16); background: transparent; }
  :root[data-dark] .support-chip:hover { background: var(--ink); color: #09090b; }
  :root[data-dark] .tip-tier { border-color: var(--glass-edge); background: rgb(255 255 255 / 0.02); }
  :root[data-dark] .tip-tier:has(input:checked) { border-color: var(--gold); background: rgb(212 182 122 / 0.08); box-shadow: 0 0 0 3px rgb(212 182 122 / 0.14); }
  :root[data-dark] .tip-tier:has(input:checked) .tip-amount { color: var(--gold); }
  :root[data-dark] .tip-custom-field { border-bottom-color: var(--gold); }
  :root[data-dark] .tip-share { color: var(--gold); }
  :root[data-dark] .spine-deco { filter: saturate(0.55) brightness(0.85); }
  

/* ------------------------------------------------------------- inicio */
.greeting { padding: 2.75rem 0 1rem; }
.greeting-head { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.greeting-head > div { min-width: 0; }
.greeting-head h1 { margin: 0; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.05; overflow-wrap: anywhere; }
.greeting-head .lede { margin: 0.4rem 0 0; color: var(--quill); }
.greeting-empty { color: var(--quill); }
.greeting-empty a { color: var(--ink); }
.greeting .shelf-row { padding-top: 0; }

/* Atajos en una píldora flotante, no en cajas. */
.pill-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.3rem;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(12px);
}
.pill-nav a {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: var(--quill);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pill-nav a:hover, .pill-nav a:focus-visible { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.pill-nav .icon { opacity: 0.8; }

/* Destacado de hoy: contenedor grande que ilumina su propia portada. */
.home-hooks { grid-template-columns: minmax(0, 1fr); margin: 0.5rem 0 1rem; }
.spotlight {
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  min-height: 22rem;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background:
    radial-gradient(60% 110% at 12% 50%, color-mix(in oklab, var(--g) 14%, transparent), transparent 70%),
    var(--sheet);
  box-shadow: var(--shadow-2);
}
.spotlight::after { display: none; }
.spotlight.has-cover::before {
  content: "";
  position: absolute;
  inset: -25% 35% -25% -15%;
  z-index: -1;
  background: var(--cover-image) center / cover no-repeat;
  filter: blur(70px) saturate(1.15);
  opacity: 0.32;
}
.spotlight.has-cover { background: linear-gradient(90deg, transparent 0%, transparent 25%, color-mix(in srgb, var(--sheet) 85%, transparent) 60%), var(--sheet); }
.spotlight-cover .cover-lg {
  width: clamp(9rem, 19vw, 14rem);
  rotate: none;
  border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.06);
}
.spotlight:hover .spotlight-cover .cover-lg { rotate: none; translate: 0 -4px; }
.spotlight .kicker { margin-bottom: 0.5rem; color: var(--gold); }
.spotlight-body h2 { margin-bottom: 0.6rem; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.02; }
.spotlight-synopsis { max-width: 34rem; margin: 1rem 0 1.75rem; font-size: 1.05rem; line-height: 1.65; }
.challenge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 2rem;
  align-items: center;
}
.challenge > .kicker, .challenge > h2, .challenge > p:not(.challenge-actions) { grid-column: 1; }
.challenge-actions { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
.challenge-compact { display: block; }

/* Géneros: tarjetas oscuras y discretas con un punto de color; se iluminan al pasar. */
.genre-tile {
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, translate 0.2s ease;
}
.genre-tile:hover {
  translate: 0 -2px;
  transform: none;
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--ink) 6%, var(--glass));
  box-shadow: 0 12px 30px -18px color-mix(in oklab, var(--g) 60%, transparent), 0 0 0 1px color-mix(in oklab, var(--g) 25%, transparent);
}
.genre-tile strong { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.genre-tile strong::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--g); box-shadow: 0 0 12px var(--g); }
.genre-tile > span:not(.tile-initial) { color: var(--quill); }
.tile-initial { opacity: 0.05; color: var(--ink); }
.genre-tile[aria-current="page"] { outline-color: var(--gold); }

@media (max-width: 720px) {
  .greeting { padding-top: 1.5rem; }
  .greeting-head { align-items: flex-start; }
  .pill-nav { width: 100%; justify-content: space-between; }
  .pill-nav a { padding-inline: 0.7rem; }
  .pill-nav a span { font-size: 0.82rem; }
  .challenge { grid-template-columns: minmax(0, 1fr); }
  .challenge-actions { grid-column: 1; grid-row: auto; flex-direction: row; padding-top: 0.75rem; }
  .spotlight { grid-template-columns: minmax(0, 1fr); justify-items: start; min-height: 0; }
  .spotlight-cover .cover-lg { width: 9rem; }
  .spotlight.has-cover::before { inset: -20% -20% 40% -20%; }
  .spotlight.has-cover { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sheet) 88%, transparent) 55%), var(--sheet); }
  .spotlight-actions .button { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------- temas */
/* El tema lo elige cada persona en el panel de Apariencia (appearance.js) y se aplica al
   momento con atributos en <html>: data-theme (paper, sepia, night, oled) y data-dark en los
   oscuros. "Automático" sigue al sistema: claro -> Papel, oscuro -> Noche. Los ajustes de
   componentes oscuros de las secciones anteriores cuelgan de :root[data-dark]; aquí sólo se
   definen los colores de cada tema y lo que cambia en Noche frente a Negro. */

/* Papel (por defecto): crema, tinta cálida y terracota sutil. Para leer de día. */
:root {
  --paper: #F9F9F6;
  --sheet: #FFFFFF;
  --ink: #2D2D2D;
  --quill: #5F5E5A;
  --rule: #E4E2DB;
  --wax: #A64B32;
  --wax-ink: #FFF5F0;
  --wax-soft: #F6E7E1;
  --focus: #A64B32;
  --gold: #8A5A2B;
  --verdigris: #2E6A66;
  --verdigris-soft: #E3EEEC;
  --night: #26221D;
  --night-2: #3A342C;
  --glass: rgb(255 255 255 / 0.6);
  --glass-edge: rgb(45 45 45 / 0.1);
  color-scheme: light;
}
/* Sepia: menos contraste y luz más cálida, para leer mucho rato. */
:root[data-theme="sepia"] {
  --paper: #F4ECD8;
  --sheet: #FAF4E4;
  --ink: #433422;
  --quill: #6E5E47;
  --rule: #DCCFB3;
  --wax: #8E3B22;
  --wax-ink: #FFF3E8;
  --wax-soft: #EEDCC8;
  --focus: #8E3B22;
  --gold: #7A5426;
  --verdigris: #3F6A5E;
  --verdigris-soft: #E6E5CF;
  --glass: rgb(255 250 236 / 0.55);
  --glass-edge: rgb(67 52 34 / 0.14);
}
:root[data-dark] { color-scheme: dark; }
/* Noche: pizarra con acentos dorados y cobrizos. (Negro OLED usa los colores de "oscuro premium".) */
:root[data-theme="night"] {
  --paper: #111827;
  --sheet: #1F2937;
  --ink: #E5E7EB;
  --quill: #9CA3AF;
  --rule: #374151;
  --night: #0B1220;
  --night-2: #172033;
  --on-night: #E5E7EB;
  --on-night-muted: #9CA3AF;
  --gold: #D9A35F;
  --focus: #E3B577;
  --wax: #D0605A;
  --wax-ink: #1A0E0C;
  --wax-soft: #3A1F22;
  --verdigris: #7FB8B2;
  --verdigris-soft: #15282B;
  --glass: rgb(255 255 255 / 0.04);
  --glass-edge: rgb(229 231 235 / 0.1);
}
:root[data-theme="night"] .site-header { background: rgb(17 24 39 / 0.82) !important; }
:root[data-theme="night"] .site-footer { background: #0B1220 !important; }
:root[data-theme="night"] .tab-bar { background: rgb(17 24 39 / 0.92) !important; }
:root[data-theme="night"] .hero-band,
:root[data-theme="night"] .auth-art {
  background: radial-gradient(70% 120% at 85% -10%, rgb(217 163 95 / 0.1), transparent 60%), #0F172A;
}
:root[data-theme="night"] .button.button-primary,
:root[data-theme="night"] .hero-band .button.button-primary { border-color: var(--gold); background: var(--gold); color: #111827; }
:root[data-theme="night"] .button.button-primary:hover,
:root[data-theme="night"] .hero-band .button.button-primary:hover { border-color: #E8B878; background: #E8B878; box-shadow: 0 0 0 4px rgb(217 163 95 / 0.15); }
/* En Papel y Sepia, las bandas oscuras (acceso) son tinta cálida, no azul. */
:root:not([data-dark]) .hero-band,
:root:not([data-dark]) .auth-art {
  background: radial-gradient(60% 100% at 90% 0%, color-mix(in srgb, var(--wax) 28%, transparent), transparent 70%), var(--night);
}
:root[data-theme="sepia"] body::before { opacity: 0.7; }
.site-account button.icon-link { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* --------------------------------------------------------------- accesibilidad */
/* Tipografías: muy legible (Atkinson Hyperlegible) u OpenDyslexic en toda la web, también
   en el lector. Sin justificar: los ríos de espacios dificultan la lectura con dislexia. */
@font-face {
  font-family: "OpenDyslexic";
  src: url("/fonts/OpenDyslexic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/fonts/OpenDyslexic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root[data-font="legible"] {
  --font-display: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --font-read: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
}
:root[data-font="dyslexic"] {
  --font-display: "OpenDyslexic", "Comic Sans MS", sans-serif;
  --font-text: "OpenDyslexic", "Comic Sans MS", sans-serif;
  --font-read: "OpenDyslexic", "Comic Sans MS", sans-serif;
}
/* Los ajustes tipográficos de Inter (cv11, ss01) no son de estas fuentes. OpenDyslexic ya
   trae mucho espacio entre letras y palabras (es su diseño): no se le añade más. */
:root[data-font] body { font-feature-settings: normal; letter-spacing: 0; }
:root[data-font] .reader,
:root[data-font] .reader[data-font] { --reader-font: var(--font-read); }
:root[data-font] .reader-text .rich p.block { text-align: left; hyphens: manual; }
:root[data-font] h1, :root[data-font] h2, :root[data-font] h3 { letter-spacing: 0; }
/* OpenDyslexic (0.99) ya viene muy espaciada: la "a" mide 0,82 em y el espacio entre palabras
   0,85 em, tres veces el de Inter, y deja 0,30 em vacíos alrededor de cada letra (Inter, 0,12):
   el texto se rompía en trozos sueltos. Se aprieta hasta dejar ~0,20 em por letra (sigue más
   holgada que una letra normal, como piden las guías de dislexia), un pelo más pequeña, y sin
   cursivas: esta letra no trae cursiva (el navegador la inclinaba a la fuerza) y las guías de
   dislexia piden evitarlas. El énfasis va en negrita. */
/* En cada elemento (no sólo en body): el espaciado heredado se calcula con la letra de body y,
   en un texto pequeño, apretaba de más ("Seabreenelcapítulo"). Y así también gana a los botones
   y la cabecera, que llevan su propio espaciado. */
:root[data-font="dyslexic"] body { font-size-adjust: 0.53; }
:root[data-font="dyslexic"] body, :root[data-font="dyslexic"] body * { letter-spacing: -0.1em !important; word-spacing: -0.34em !important; }
:root[data-font="dyslexic"] :is(h1, h2, h3, .cover-title, .book-title, .wordmark) {
  letter-spacing: -0.12em !important;
  word-spacing: -0.34em !important;
  line-height: 1.15;
}
:root[data-font="dyslexic"] * { font-style: normal !important; }
:root[data-font="dyslexic"] em, :root[data-font="dyslexic"] i { font-weight: 700; }
:root[data-font="dyslexic"] .reader-text { line-height: 1.85; }
/* En las portadas, con esta letra tan ancha, "Iskandar" ya no cabía y se partía. */
:root[data-font="dyslexic"] .cover-title { zoom: 0.84; }

/* Alto contraste: negro sobre blanco (o al revés), bordes visibles, foco grueso y nada de
   transparencias. Se activa a mano o si el sistema pide más contraste. */
:root[data-contrast="high"] {
  --quill: var(--ink);
  --rule: var(--ink);
  --glass: var(--sheet);
  --glass-edge: var(--ink);
  --on-night-muted: var(--on-night);
}
:root[data-contrast="high"]:not([data-dark]) {
  --paper: #FFFFFF;
  --sheet: #FFFFFF;
  --ink: #000000;
  --wax: #8C2A10;
  --wax-ink: #FFFFFF;
  --focus: #000000;
  --gold: #5C3A0B;
  --verdigris: #0B4F4A;
}
:root[data-contrast="high"][data-dark] {
  --paper: #000000;
  --sheet: #000000;
  --ink: #FFFFFF;
  --gold: #FFD27A;
  --focus: #FFD27A;
  --wax: #FF8A80;
  --on-night: #FFFFFF;
}
:root[data-contrast="high"] body::before,
:root[data-contrast="high"] .spotlight.has-cover::before { display: none; }
:root[data-contrast="high"] a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
:root[data-contrast="high"] :focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 3px; }
:root[data-contrast="high"] .genre-tile,
:root[data-contrast="high"] .spotlight,
:root[data-contrast="high"] .challenge,
:root[data-contrast="high"] .pill-nav,
:root[data-contrast="high"] .panel,
:root[data-contrast="high"] .site-header { border: 2px solid var(--ink); backdrop-filter: none; background: var(--sheet) !important; box-shadow: none; }
:root[data-contrast="high"] .hero-band,
:root[data-contrast="high"] .auth-art { background: var(--paper) !important; color: var(--ink); --on-night: var(--ink); --on-night-muted: var(--ink); border-bottom: 2px solid var(--ink); }

/* Menos movimiento, aunque el sistema no lo pida. */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduce"] .will-reveal:not(.is-visible) { opacity: 1; translate: none; }

/* ------------------------------------------------------- panel de apariencia */
.appearance-panel {
  position: fixed;
  top: 4.6rem;
  right: max(1rem, calc((100vw - var(--page)) / 2 + 1rem));
  z-index: 40;
  width: min(23rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);
  overflow: auto;
  padding: 1.1rem 1.2rem 1rem;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.02);
  animation: panel-in 0.18s ease-out;
}
@keyframes panel-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
.appearance-panel[hidden] { display: none; }
.appearance-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.appearance-head h2 { margin: 0; font-size: var(--step-1); }
.appearance-group { margin: 0; padding: 0.85rem 0; border: 0; border-top: 1px solid var(--rule); }
.appearance-group legend, .appearance-label { float: left; width: 100%; margin: 0 0 0.6rem; padding: 0; color: var(--quill); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.theme-swatches { clear: both; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.theme-swatch { min-width: 0; }
.theme-swatch { display: grid; gap: 0.3rem; justify-items: center; cursor: pointer; }
.theme-swatch input, .font-option input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-sample {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgb(0 0 0 / 0.14);
  border-radius: 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  transition: box-shadow 0.15s ease, translate 0.15s ease;
}
.theme-swatch[data-swatch="auto"] .swatch-sample { background: linear-gradient(135deg, #F9F9F6 50%, #111827 50%); color: #9A6B3A; }
.theme-swatch[data-swatch="paper"] .swatch-sample { background: #F9F9F6; color: #2D2D2D; }
.theme-swatch[data-swatch="sepia"] .swatch-sample { background: #F4ECD8; color: #433422; }
.theme-swatch[data-swatch="night"] .swatch-sample { background: #111827; color: #E5E7EB; }
.theme-swatch[data-swatch="oled"] .swatch-sample { background: #000; color: #EDEDED; border-color: rgb(255 255 255 / 0.18); }
.swatch-label { max-width: 100%; color: var(--quill); font-size: 0.7rem; text-align: center; overflow-wrap: anywhere; }
.theme-swatch:hover .swatch-sample { translate: 0 -1px; }
.theme-swatch:has(input:checked) .swatch-sample { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--focus); }
.theme-swatch:has(input:checked) .swatch-label { color: var(--ink); font-weight: 600; }
.theme-swatch:has(input:focus-visible) .swatch-sample { outline: 2px solid var(--focus); outline-offset: 5px; }
.text-size { clear: both; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; }
.text-size-step {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.text-size-step.is-large { font-size: 1.45rem; }
.text-size-step:disabled { opacity: 0.4; cursor: default; }
.text-size-step:not(:disabled):hover { border-color: var(--ink); }
.text-size-value { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.font-options { clear: both; display: grid; gap: 0.4rem; }
.font-option {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  cursor: pointer;
}
.font-option:has(input:checked) { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.font-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.font-name { font-weight: 600; }
.font-hint { color: var(--quill); font-size: 0.78rem; text-align: right; }
.font-option[data-font-option="legible"] .font-name { font-family: "Atkinson Hyperlegible", Verdana, sans-serif; }
.font-option[data-font-option="dyslexic"] .font-name { font-family: "OpenDyslexic", "Comic Sans MS", sans-serif; }
.appearance-switches { display: grid; gap: 0.7rem; }
.switch { position: relative; display: flex; gap: 0.75rem; align-items: center; cursor: pointer; font-weight: 500; }
.switch input { position: absolute; opacity: 0; }
.switch-track { position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--rule); transition: background-color 0.15s ease; }
.switch-track::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: translate 0.15s ease; }
.switch input:checked + .switch-track { background: var(--focus); }
.switch input:checked + .switch-track::after { translate: 1.1rem 0; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.appearance-reset { margin-top: 0.4rem; color: var(--quill); font-size: 0.85rem; }

/* ------------------------------------------------------- escuchar el capítulo */
.listen {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  z-index: 7;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.listen-button {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.55rem 1.15rem 0.55rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sheet) 92%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.45);
  cursor: pointer;
}
.listen-button:hover { border-color: var(--ink); }
.listen.is-active .listen-button { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.listen-extra {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sheet) 92%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.listen-extra[hidden] { display: none; }
.reader-text .is-speaking {
  border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  box-shadow: 0 0 0 0.35em color-mix(in srgb, var(--gold) 15%, transparent);
  transition: background-color 0.3s ease;
}
body.is-immersive .reader:not(.show-ui) ~ .listen,
.reader:not(.show-ui) .listen:not(.is-active) { opacity: 0.85; }

/* ------------------------------------------------------- portada editorial */
/* La portada deja de ser una banda oscura: titular a la izquierda y, a la derecha, un móvil
   inclinado con el modo lectura (con los colores del tema elegido). */
.landing-hero {
  margin-top: 0;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem;
  align-items: center;
  overflow: visible;
  background: none;
  border: 0;
}
.landing-copy { padding-bottom: 0; }
.landing-copy h1 { color: var(--ink); }
.landing-copy .lede { color: var(--quill); }
.landing .kicker { color: var(--wax); }
:root[data-dark] .landing .kicker { color: var(--gold); }
.landing-peek { color: var(--quill); }
.landing-peek a, .landing-peek .link-arrow { color: var(--ink); }
.landing-count { color: var(--quill); }
.landing-count strong { color: var(--ink); }

.landing-phone { position: relative; display: grid; place-items: center; padding: 1rem 0 2.5rem; perspective: 1400px; }
.phone {
  position: relative;
  width: min(16.5rem, 64vw);
  aspect-ratio: 9 / 19;
  padding: 0.55rem;
  border-radius: 2.7rem;
  background: linear-gradient(155deg, #3a3a40, #101013 45%, #26262b);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 50px 90px -40px rgb(0 0 0 / 0.65),
    0 20px 30px -20px rgb(0 0 0 / 0.45);
  transform: rotate(-8deg) rotateY(-16deg) rotateX(5deg);
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.landing-phone:hover .phone { transform: rotate(-5deg) rotateY(-9deg) rotateX(3deg); }
.phone::before { content: ""; position: absolute; top: 1.05rem; left: 50%; z-index: 2; width: 4.6rem; height: 1.15rem; border-radius: 999px; background: #050506; translate: -50% 0; }
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 2.75rem 1.25rem 0.9rem;
  border-radius: 2.2rem;
  background: var(--paper);
  color: var(--ink);
}
.phone-progress { position: absolute; inset: 0 0 auto; height: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.phone-progress span { display: block; width: 38%; height: 100%; background: var(--wax); }
.phone-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; color: var(--quill); font-size: 0.62rem; }
.phone-where { font-style: italic; }
.phone-aa { font-family: var(--font-display); font-weight: 700; }
.phone-numeral { margin: 0; text-align: center; color: var(--quill); font-size: 0.6rem; font-style: italic; }
.phone-title { width: 62%; height: 0.8rem; margin: 0.45rem auto 1.1rem; border-radius: 4px; background: color-mix(in srgb, var(--ink) 75%, transparent); }
.phone-text { display: grid; gap: 0.42rem; }
.phone-line { display: block; width: var(--w); height: 0.34rem; border-radius: 3px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
.phone-gap { height: 0.25rem; }
.phone-sealed { display: flex; gap: 0.5rem; align-items: center; padding: 0.45rem 0.55rem; border: 1px dashed color-mix(in srgb, var(--wax) 50%, transparent); border-radius: 10px; color: var(--quill); font-size: 0.6rem; font-style: italic; }
.phone-sealed .seal { flex: none; }
.phone-dock { display: flex; justify-content: space-around; margin-top: auto; padding: 0.55rem 0.4rem 0.1rem; border-top: 1px solid var(--rule); }
.phone-dock span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.phone-dock span.is-on { background: var(--wax); }
.phone-shadow { position: absolute; bottom: 0.8rem; width: 60%; height: 2.2rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.28), transparent); filter: blur(6px); z-index: -1; }

@media (max-width: 960px) {
  .landing-phone { order: 2; padding-top: 0; }
  .phone { width: min(14rem, 62vw); }
}
@media (max-width: 720px) {
  .appearance-panel { top: auto; right: 0.5rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); left: 0.5rem; width: auto; max-height: 75vh; }
  .theme-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
  .listen { bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .listen-button span { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .phone, .landing-phone:hover .phone { transform: rotate(-6deg); }
  .appearance-panel { animation: none; }
}

/* ------------------------------------------------------------ aurora viva */
/* Fondo de la cabecera de la portada: cuatro orbes muy desenfocados que se mueven despacio,
   como tinta en el agua, y un resplandor que sigue al ratón (landing.js, mountAurora). Es una
   capa decorativa: detrás del contenido, sin eventos y a todo el ancho. En los temas oscuros
   el fondo es casi negro (#0B0F19); en Papel y Sepia los orbes son pastel sobre el papel. */
.landing-hero { position: relative; isolation: isolate; }
.aurora {
  --orb-1: rgb(99 132 206 / 0.16);
  --orb-2: rgb(167 139 250 / 0.13);
  --orb-3: rgb(242 170 120 / 0.3);
  --orb-4: rgb(166 75 50 / 0.1);
  --spot: rgb(242 170 120 / 0.2);
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  z-index: -1;
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
:root[data-dark] .aurora {
  --orb-1: rgb(30 64 175 / 0.55);
  --orb-2: rgb(76 29 149 / 0.42);
  --orb-3: rgb(217 163 95 / 0.16);
  --orb-4: rgb(14 116 144 / 0.24);
  --spot: rgb(148 163 255 / 0.11);
  background: #0B0F19;
}
.aurora-orb {
  position: absolute;
  width: 38rem;
  height: 38rem;
  border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%;
  filter: blur(110px);
  will-change: transform;
}
.orb-1 { top: -16rem; left: -10rem; background: var(--orb-1); animation: aurora-1 28s ease-in-out infinite alternate; }
.orb-2 { top: -8rem; right: -12rem; background: var(--orb-2); animation: aurora-2 24s ease-in-out infinite alternate; }
.orb-3 { bottom: -20rem; left: 28%; width: 34rem; height: 34rem; background: var(--orb-3); animation: aurora-3 30s ease-in-out infinite alternate; }
.orb-4 { bottom: -14rem; right: 8%; width: 30rem; height: 30rem; background: var(--orb-4); animation: aurora-4 22s ease-in-out infinite alternate; }
@keyframes aurora-1 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(18vw, 6rem, 0) rotate(45deg) scale(1.1); }
  100% { transform: translate3d(8vw, 13rem, 0) rotate(90deg) scale(0.95); }
}
@keyframes aurora-2 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-14vw, 10rem, 0) rotate(-35deg) scale(1.08); }
  100% { transform: translate3d(-24vw, 3rem, 0) rotate(-70deg) scale(1); }
}
@keyframes aurora-3 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-16vw, -9rem, 0) rotate(60deg) scale(1.12); }
  100% { transform: translate3d(10vw, -14rem, 0) rotate(120deg) scale(0.92); }
}
@keyframes aurora-4 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-10vw, -6rem, 0) rotate(-50deg) scale(1.15); }
  100% { transform: translate3d(-28vw, -2rem, 0) rotate(-100deg) scale(1); }
}
.aurora-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--spot), transparent 72%);
  opacity: 0;
  transform: translate3d(calc(var(--spot-x, 50vw) - 50%), calc(var(--spot-y, 40%) - 50%), 0);
  transition: opacity 1.2s ease;
  will-change: transform;
}
.aurora.has-spot .aurora-spot { opacity: 1; }
.aurora.is-offscreen .aurora-orb { animation-play-state: paused; }
:root[data-contrast="high"] .aurora { display: none; }

/* Menos movimiento (sistema o panel de Apariencia): los orbes se quedan quietos justo donde
   estaban, sin saltos (animation: none los devolvería de golpe al principio) y el resplandor
   desaparece. La regla general de "menos movimiento" usa !important; aquí se restaura la
   misma animación, pausada. */
:root[data-motion="reduce"] .aurora .orb-1 { animation: aurora-1 28s ease-in-out infinite alternate paused !important; }
:root[data-motion="reduce"] .aurora .orb-2 { animation: aurora-2 24s ease-in-out infinite alternate paused !important; }
:root[data-motion="reduce"] .aurora .orb-3 { animation: aurora-3 30s ease-in-out infinite alternate paused !important; }
:root[data-motion="reduce"] .aurora .orb-4 { animation: aurora-4 22s ease-in-out infinite alternate paused !important; }
:root[data-motion="reduce"] .aurora .aurora-spot { display: none; }
@media (prefers-reduced-motion: reduce) {
  .aurora .orb-1 { animation: aurora-1 28s ease-in-out infinite alternate paused !important; }
  .aurora .orb-2 { animation: aurora-2 24s ease-in-out infinite alternate paused !important; }
  .aurora .orb-3 { animation: aurora-3 30s ease-in-out infinite alternate paused !important; }
  .aurora .orb-4 { animation: aurora-4 22s ease-in-out infinite alternate paused !important; }
  .aurora .aurora-spot { display: none; }
}
@media (max-width: 720px) {
  .aurora-orb { width: 24rem; height: 24rem; filter: blur(80px); }
  .orb-3, .orb-4 { width: 20rem; height: 20rem; }
}

/* ------------------------------------------------------------- responsive */

  :root[data-dark] .chart,
:root[data-dark] .stats { --chart: #00a091; }


@media (max-width: 960px) {
  .desk-split { grid-template-columns: 1fr; }
  .desk-chapters { position: static; order: -1; }
  }

@media (max-width: 720px) {
  :root { --step-4: 2.4rem; --step-5: 2.8rem; }
  body { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
  body.is-immersive { padding-bottom: 0; }
  .site-header { gap: 0.75rem; padding: 0.6rem 1rem; }
  .site-nav { display: none; }
  .site-account { gap: 0.25rem; }
  .site-account .button-small { padding-inline: 0.75rem; }
  .profile-banner { margin-inline: -1rem; }
  .tab-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0.3rem 0.25rem max(0.3rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(8px);
  }
  .tab-bar a {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.35rem 0;
    border-radius: 8px;
    color: var(--quill);
    font-size: 0.68rem;
    text-decoration: none;
  }
  .tab-bar a[aria-current="page"] { color: var(--ink); font-weight: 700; }
  .tab-bar a[aria-current="page"] .icon { stroke-width: 2.2; }
  .tab-bar .count { right: calc(50% - 1.4rem); top: 0; }
  .site-footer { margin-top: 2rem; padding-bottom: 1.5rem; }
  .page { padding: 0.5rem 1rem 2rem; }
  .story-hero { grid-template-columns: 1fr; }
  .story-cover { position: static; justify-self: center; }
  .cover-lg { width: min(12rem, 60vw); }
  .story-facts { grid-template-columns: repeat(2, minmax(0, auto)); }
  .index-entry { grid-template-columns: auto 1fr; gap: 1rem; }
  .index-cover .cover-sm { width: 3.2rem; }
  .chapter-list a { grid-template-columns: 2.5rem 1fr; }
  .chapter-list .chapter-meta { grid-column: 2; }
  .chapter-desk li { grid-template-columns: 2.5rem 1fr; }
  .chapter-desk li > :nth-child(n + 3) { grid-column: 2; }
  .fact-form, .fact-new, .inline-form, .search-form { grid-template-columns: 1fr; }
  .profile-head { grid-template-columns: 1fr; align-items: start; }
  .invite { grid-template-columns: 1fr; }
  .row-arrow { display: none; }
  .row-track { grid-auto-columns: 42vw; gap: 0.9rem; }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-card { grid-template-columns: 5.5rem 1fr; }
  .reader { padding: 0 1.1rem 5rem; }
  .reader-text .rich p.block { text-align: left; }
  .p-bubble { position: static; margin-left: 0.4em; vertical-align: 0.15em; }
  .editor-toolbar { top: 3.6rem; }
  .comments-drawer { top: auto; left: 0; width: 100%; max-height: 75vh; border-left: 0; border-top: 1px solid var(--rule); border-radius: 14px 14px 0 0; }
}

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

@media (forced-colors: active) {
  .chart .bar .mark { fill: CanvasText; }
  .cover { border: 1px solid CanvasText; }
}

/* ------------------------------------------------- entrar con Google y páginas legales */

/* Colores de las normas de marca de Google (botón claro y oscuro). */
.button.button-google {
  width: 100%;
  justify-content: center;
  gap: 0.75rem;
  background: #ffffff;
  border: 1px solid #747775;
  color: #1f1f1f;
  font-weight: 500;
}
.button.button-google:hover { background: #f5f6f7; border-color: #5f6368; }
:root[data-dark] .button.button-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
:root[data-dark] .button.button-google:hover { background: #1e1f20; }
.button-google svg { flex: none; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--quill);
  font-size: var(--step--1);
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

.auth-notice { margin-bottom: 1.25rem; }
.auth-solo { max-width: 30rem; margin-inline: auto; }

.legal { max-width: 46rem; margin: 0 auto; padding: 3rem 1rem 4rem; }
.legal h1 { font-family: var(--font-display); font-size: var(--step-4); margin-bottom: 0.5rem; }
.legal h2 { font-family: var(--font-display); font-size: var(--step-2); margin-top: 2.5rem; }
.legal p, .legal li { line-height: 1.7; }
.legal .updated { color: var(--quill); }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: var(--step--1); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--rule); }
.legal .pending { background: color-mix(in srgb, var(--wax) 18%, transparent); padding: 0 0.25rem; border-radius: 3px; }
.legal-back { display: inline-block; margin-bottom: 2rem; }
.auth-forgot { margin: 0.75rem 0 0; font-size: var(--step--1); }
.auth-forgot a { color: var(--quill); }

/* ------------------------------------------------------------------- móvil (repaso 23/10/2026) */

/* Casillas y opciones a tamaño de dedo en todas partes (las del navegador miden 13 px). */
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--wax); }

@media (max-width: 720px) {
  /* Cabecera y barra inferior: zonas de toque de 44 px y etiquetas legibles. */
  .site-account > a:not(.button):not(.icon-link) { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.35rem; }
  .site-account .icon-link { min-width: 2.5rem; min-height: 2.75rem; }
  .tab-bar a { min-height: 3rem; font-size: 0.75rem; }

  /* Explorar: menos altura antes de los resultados. Los dos desplegables, en una fila; los
     géneros, en una tira que se desliza con el dedo en vez de ocupar cuatro líneas. */
  .search-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
  .search-form > input[type="search"], .search-form > button, .search-form .search-mature { grid-column: 1 / -1; }
  .chips {
    flex-wrap: nowrap;
    margin-inline: -1rem;
    padding: 0.15rem 1rem 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips > li { flex: none; scroll-snap-align: start; }
  .chip { padding: 0.55rem 1rem; white-space: nowrap; }

  /* Inicio: los accesos rápidos en una sola fila deslizable (antes "Rankings" caía a otra línea). */
  .pill-nav { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pill-nav::-webkit-scrollbar { display: none; }
  .pill-nav a { flex: none; white-space: nowrap; }

  /* Géneros en dos columnas compactas: diez tarjetas a lo ancho eran más de una pantalla. */
  .genre-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .genre-tile { min-height: 5.25rem; padding: 0.8rem 0.9rem; border-radius: 14px; }
  .genre-tile strong { font-size: 1.15rem; }
  .genre-tile > span:not(.tile-initial) { font-size: 0.78rem; }
  .genre-tile .tile-initial { font-size: 5.5rem; bottom: -1.6rem; }
  .landing-genres .genre-tiles li:first-child { grid-row: auto; }
  .landing-genres .genre-tiles li:first-child strong { font-size: 1.5rem; }
  .landing-genres .genre-tiles li:first-child .tile-initial { font-size: 8rem; bottom: -2.6rem; }
  .landing-genres .genre-tiles li:nth-child(4),
  .landing-genres .genre-tiles li:nth-child(7) { grid-column: auto; }

  /* Portada: el móvil de muestra, más pequeño (ocupaba casi una pantalla entera). */
  .landing-phone { zoom: 0.74; padding-block: 0 1rem; }

  /* Estudio: cada capítulo en dos líneas (título; palabras y estado) y la etiqueta de estado
     a su tamaño, no estirada a todo el ancho. */
  .chapter-desk li { grid-template-columns: 2.25rem minmax(0, 1fr) auto; row-gap: 0.3rem; column-gap: 0.75rem; align-items: center; }
  .chapter-desk li > :nth-child(2) { grid-column: 2 / -1; }
  .chapter-desk li > :nth-child(3) { grid-column: 2; }
  .chapter-desk li > :nth-child(4) { grid-column: 3; justify-self: end; }
  .chapter-desk li > :nth-child(n + 5) { grid-column: 2 / -1; }
  .chapter-desk .status { justify-self: start; }

  /* Editor: la barra de formato en una fila deslizable, pegada bajo la cabecera. */
  .editor-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 3.6rem; }
  .editor-toolbar::-webkit-scrollbar { display: none; }
  .editor-toolbar > * { flex: none; }
}

/* Móviles pequeños (360 px): que quepan la marca, el ojo, "Entrar" y "Crear cuenta". */
@media (max-width: 380px) {
  .site-header { gap: 0.5rem; padding-inline: 0.75rem; }
  .wordmark { font-size: 1.3rem; }
  .site-account .button-small { padding-inline: 0.6rem; }
}

/* Portada: el eslogan para quien tiene miedo de publicar. */
.landing-courage { max-width: 44rem; }
.landing-courage h2 { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(2rem, 5.5vw, 3.4rem); font-style: italic; font-weight: 500; line-height: 1.05; text-wrap: balance; }
.landing-courage p { margin: 0 0 1.25rem; color: var(--quill); font-size: var(--step-1); line-height: 1.6; }
.landing-courage .link-arrow { color: var(--ink); }

/* Moderación, tus datos y casilla de alta. */
.button.button-danger { background: #9a1b30; border-color: #9a1b30; color: #fff; }
.button.button-danger:hover { background: #7f1627; border-color: #7f1627; }
.danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.danger-zone summary { cursor: pointer; color: #9a1b30; font-weight: 600; }
:root[data-dark] .danger-zone summary { color: #f08a9b; }
.danger-zone[open] summary { margin-bottom: 0.75rem; }
.check.consent { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--quill); font-size: var(--step--1); line-height: 1.5; }
.check.consent input { margin-top: 0.15rem; }
.check.consent a { color: inherit; }
.is-hidden > .prose, .is-hidden > .thread-title, .thread.is-hidden .thread-title a { opacity: 0.55; }
.hidden-note { margin: 0.25rem 0 0.5rem; color: var(--quill); font-size: var(--step--1); font-style: italic; }
.hidden-badge { padding: 0.05rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--quill); font-size: 0.75rem; }
.thread-meta .link-button, .thread-meta .more-menu { margin-left: 0.5rem; vertical-align: middle; }

.mod-tabs { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; }
.mod-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mod-card { padding: 1.25rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); }
.mod-card h2 { margin: 0 0 0.25rem; font-size: var(--step-1); }
.mod-meta { margin: 0 0 0.75rem; color: var(--quill); font-size: var(--step--1); }
.mod-preview { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border-left: 3px solid var(--rule); background: color-mix(in srgb, var(--ink) 4%, transparent); white-space: pre-wrap; overflow-wrap: anywhere; }
.mod-details { margin: 0 0 0.75rem; font-style: italic; }
.mod-card .field textarea { min-height: 3.5rem; }
.mod-card .actions { flex-wrap: wrap; }

/* Avisos: con "left: 50%" el ancho se encogía a media pantalla y un aviso largo salía en una
   burbuja estrecha. Ahora miden su texto, hasta 32rem, y en el móvil van encima de la barra. */
.toast { width: max-content; max-width: min(32rem, calc(100vw - 2rem)); border-radius: 18px; text-align: center; }
@media (max-width: 720px) {
  .toast { bottom: calc(4.8rem + env(safe-area-inset-bottom)); }
}

/* Cobros en construcción. */
.soon-badge { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--gold, #d9a35f) 22%, transparent); color: var(--ink); font-family: var(--font-text); font-size: 0.72rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
h1 .soon-badge { font-size: 0.9rem; }
.panel.construction { border-left: 4px solid var(--gold, #d9a35f); }

/* Distintivo del equipo en el perfil (quien modera). */
.staff-badge { display: inline-flex; gap: 0.35rem; align-items: center; margin: 0.15rem 0 0.4rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--wax) 14%, transparent); color: var(--wax); font-size: 0.82rem; font-weight: 600; }
:root[data-dark] .staff-badge { background: color-mix(in srgb, var(--gold, #d9a35f) 18%, transparent); color: var(--gold, #d9a35f); }

/* Perfil: títulos, insignias de lacre, ADN lector y obra destacada. */
.profile-titles { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.profile-titles:empty { display: none; }
.pinned-badge { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0.15rem 0 0.4rem; padding: 0.15rem 0.7rem 0.15rem 0.2rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.profile-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 2rem; align-items: start; margin-bottom: 1.5rem; }
.profile-side { display: grid; gap: 1rem; }
.profile-side:empty { display: none; }
@media (max-width: 860px) { .profile-columns { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.profile-main { min-width: 0; }
.profile-main .profile-bio { margin-top: 0; }
/* En el móvil, lecturas e insignias van antes de las pestañas (son lo más "tuyo"). */
@media (max-width: 860px) { .profile-side { order: -1; } }

.dna-card, .badge-shelf { padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); }
.dna-card h2, .badge-shelf h2 { margin: 0 0 0.6rem; font-size: var(--step-0); letter-spacing: 0.02em; }
.dna-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0 0 0.6rem; }
.dna-card dt { color: var(--quill); font-size: 0.78rem; }
.dna-card dd { margin: 0; font-family: var(--font-text); font-size: var(--step-2); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dna-genres { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0; font-size: var(--step--1); color: var(--quill); }

.badge-shelf ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.badge-shelf .lacre-badge { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; }
.lacre-badge:not(.is-earned) .badge-text { opacity: 0.6; }
.badge-text { display: grid; gap: 0.05rem; }
.badge-text strong { font-size: var(--step--1); }
.badge-text small { color: var(--quill); font-size: 0.76rem; line-height: 1.35; }
.badge-text .link-button { justify-self: start; font-size: 0.76rem; }
.badge-seal { display: inline-grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9c6bf, #8f8b84); color: rgb(255 255 255 / 0.85); font-family: var(--font-display); font-weight: 700; box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.18), 0 2px 4px rgb(0 0 0 / 0.15); }
.badge-seal.is-earned { background: radial-gradient(circle at 35% 30%, #c8434f, #8c1a29 70%); color: #f6dadd; }

.pinned-story { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 0 0 1.5rem; padding: 1.1rem; border: 1px solid var(--rule); border-radius: 16px; background: var(--sheet); }
.pinned-story .pinned-cover { text-decoration: none; }
.pinned-story .pinned-cover > * { margin: 0; list-style: none; }
.pinned-story h2 { margin: 0 0 0.4rem; font-size: var(--step-2); }
.pinned-story h2 a { color: inherit; text-decoration: none; }
.pinned-synopsis { margin: 0 0 0.5rem; font-family: var(--font-read); font-style: italic; line-height: 1.6; }
.pin-select { max-width: 24rem; margin: 0 0 1.25rem; }
@media (max-width: 560px) { .pinned-story { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.9rem; } }

/* Rol e insignia junto al nombre (comentarios y taberna). */
.role-mark { display: inline-block; padding: 0 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--wax) 14%, transparent); color: var(--wax); font-size: 0.7rem; font-weight: 700; line-height: 1.5; vertical-align: 0.1em; }
:root[data-dark] .role-mark { background: color-mix(in srgb, var(--gold, #d9a35f) 18%, transparent); color: var(--gold, #d9a35f); }
.badge-mark { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c8434f, #8c1a29 70%); color: #f6dadd; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; vertical-align: -0.1em; cursor: help; }
.edited-mark { color: var(--quill); font-size: 0.85em; }

/* Estadísticas: embudo de lectura. */
.funnel { display: grid; gap: 0.35rem; margin: 0.5rem 0 0.75rem; padding: 0; list-style: none; }
.funnel li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.6rem; align-items: center; }
.funnel-label { color: var(--quill); font-family: var(--font-display); text-align: right; }
.funnel-bar { position: relative; height: 1.6rem; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); overflow: hidden; }
.funnel-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: color-mix(in srgb, var(--verdigris, #2e6a66) 70%, transparent); }
.funnel-bar span { position: relative; padding-left: 0.5rem; font-size: 0.8rem; font-weight: 600; line-height: 1.6rem; font-variant-numeric: tabular-nums; }

/* Pie: el enlace de apoyo, discreto. */
.footer-support { margin: 0.6rem 0 0; font-size: var(--step--1); }
.footer-support a { color: inherit; opacity: 0.75; }
.footer-support a:hover { opacity: 1; }

/* ------------------------------------------------------------ lote de pruebas */
.notice {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--focus);
  background: color-mix(in srgb, var(--focus) 8%, transparent);
  font-size: var(--step--1);
}
.publish-story { display: grid; gap: 0.35rem; justify-items: end; max-width: 18rem; text-align: right; }
.publish-story .hint { margin: 0; }
/* En el editor los avisos salen por encima de la barra de botones, no encima de "Publicar". */
body:has(.editor-bar) .toast { bottom: calc(6rem + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------ panel de administración */
.admin-section { margin: 2rem 0 0.75rem; font-size: var(--step-1); }
.admin-tiles { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .admin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-links { margin: 0; }
.admin-charts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.admin-chart { margin: 0; }
.admin-chart figcaption { display: grid; gap: 0.1rem; margin-bottom: 0.5rem; }
.admin-chart figcaption span { color: var(--quill); font-size: var(--step--1); }
.admin-chart .chart { height: 7.5rem; }
.admin-split { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; margin-top: 1.5rem; }
.admin-split > .panel { margin: 0; }
.admin-signups { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.admin-signups th, .admin-signups td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.admin-signups thead th { color: var(--quill); font-weight: 600; }
.health-status { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; font-weight: 600; }
.health-status.is-ok { color: #2E6A66; }
.health-status.is-warning { color: var(--wax); }
:root[data-dark] .health-status.is-ok { color: #7cc4bd; }
.health-problems { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--wax); }
.health-list { display: grid; gap: 0.6rem; margin: 0; }
.health-list div { display: grid; gap: 0.1rem; }
.health-list dt { color: var(--quill); font-size: var(--step--1); }
.health-list dd { margin: 0; }
@media (max-width: 860px) { .admin-split { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- abrir el libro */
/* La portada de la ficha es un libro: al pasar por encima se entreabre un poco (se ven las hojas). */
.story-cover.is-openable { display: block; color: inherit; text-decoration: none; perspective: 1400px; cursor: pointer; }
.story-cover.is-openable .cover { transform-origin: left center; transition: transform 0.35s cubic-bezier(.3,.7,.3,1), box-shadow 0.35s ease; }
.story-cover.is-openable:hover .cover, .story-cover.is-openable:focus-visible .cover {
  transform: rotateY(-14deg);
  box-shadow: 10px 12px 28px -12px rgb(10 12 20 / 0.55), inset -1px 0 0 rgb(255 255 255 / 0.15);
}
.story-cover.is-openable:focus-visible { outline: none; }
.story-cover.is-openable:focus-visible .cover { outline: 3px solid var(--focus); outline-offset: 4px; }
/* Las hojas: un borde claro que asoma por detrás de la tapa. */
.story-cover.is-openable::before {
  content: "";
  position: absolute;
  inset: 2% 1% 2% 3%;
  border-radius: 2px 6px 6px 2px;
  background: repeating-linear-gradient(90deg, #f7f3ea 0 2px, #e4ddcd 2px 3px);
  box-shadow: 0 8px 20px -14px rgb(10 12 20 / 0.5);
}
.story-cover.is-openable .cover { position: relative; }

.book-open { position: fixed; inset: 0; z-index: 40; cursor: pointer; }
.book-open-backdrop { position: absolute; inset: 0; background: var(--paper); opacity: 0; }
.book-open-book { position: fixed; perspective: 2000px; transform-style: preserve-3d; }
.book-open-page {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: 12%;
  border-radius: 2px 6px 6px 2px;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.1), transparent 8%), #fbf8f1;
  box-shadow: inset -3px 0 0 #ece5d6, inset -5px 0 0 #fbf8f1, inset -6px 0 0 #e2d9c6, 0 18px 40px -18px rgb(10 12 20 / 0.6);
  color: #1C2233;
  text-align: center;
  transform-origin: center;
}
.book-open-numeral { margin: 0; color: #5d6373; font-family: var(--font-read); font-size: 0.8rem; font-style: italic; }
.book-open-title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; font-variant-numeric: lining-nums; }
.book-open-rule { width: 2.5rem; height: 1px; background: #9A1B30; }
.book-open-cover { position: absolute; inset: 0; z-index: 1; transform-origin: left center; }
.book-open-front, .book-open-endpaper { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.book-open-endpaper { opacity: 0; }
.book-open-front { visibility: visible !important; }
/* La guarda: el interior de la tapa, del color del libro. Gira con ella (se ve del revés, y por
   eso no lleva texto) y aparece cuando la tapa pasa de canto. */
.book-open-endpaper {
  border-radius: 6px 3px 3px 6px;
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.08) 0 2px, transparent 3px) 0 0 / 14px 14px,
    hsl(var(--hue, 220) 30% 30%);
}
@media (prefers-reduced-motion: reduce) {
  .story-cover.is-openable .cover { transition: none; }
  .story-cover.is-openable:hover .cover { transform: none; }
}
:root[data-motion="reduce"] .story-cover.is-openable .cover { transition: none; }
:root[data-motion="reduce"] .story-cover.is-openable:hover .cover { transform: none; }
/* En el escritorio la portada es sticky (ya posicionada); en el móvil vuelve a static: las hojas necesitan un ancla. */
@media (max-width: 720px) { .story-cover.is-openable { position: relative; top: auto; } } /* top: el 5rem del sticky de escritorio lo bajaba encima del título */

/* ------------------------------------------------------------ importar historia */
.import-or { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--quill); font-size: var(--step--1); }
.import-or::before, .import-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.import-chapters { margin: 0; padding: 0; border: 0; }
.import-chapters legend { margin-bottom: 0.5rem; font-weight: 600; }
.import-chapters ol { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.import-chapter {
  display: grid;
  grid-template-columns: auto 2.2rem minmax(0, 1fr) auto;
  gap: 0.4rem 0.75rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
}
.import-chapter .check { margin: 0; }
.import-chapter input[name^="chapter-"] { padding: 0.4rem 0.6rem; }
.import-excerpt { grid-column: 3 / -1; margin: 0; color: var(--quill); font-size: var(--step--1); font-family: var(--font-read); }
.import-chapter:has([name=include]:not(:checked)) { opacity: 0.55; }
@media (max-width: 560px) {
  .import-chapter { grid-template-columns: auto minmax(0, 1fr); }
  .import-chapter .chapter-numeral { display: none; }
  .import-chapter .chapter-meta, .import-excerpt { grid-column: 2; }
}

/* Denuncias por revisar: el número sobre tu inicial (sólo el equipo) y en el menú. */
.account-menu summary { position: relative; }
.account-menu summary .count { position: absolute; top: -0.35rem; right: -0.45rem; }
.account-menu .more-items a .count { position: static; margin-left: 0.4rem; }
.import-status { margin: 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--focus); background: color-mix(in srgb, var(--focus) 8%, transparent); }
.import-status[hidden] { display: none; }

/* ------------------------------------------------- portada: el móvil que se mueve */
/* El móvil enseña, en bucle de 12 s, lo que pasa al leer en Noxsend: la página baja, la barra
   de progreso avanza, sale un comentario en un párrafo y el sello tapa lo que aún no toca. Las
   tres notas de al lado se iluminan a la vez que su parte. Todo se para fuera de la vista y
   con "menos movimiento" (queda la imagen final, quieta). */
.landing-demo { --loop: 12s; display: grid; grid-template-columns: auto minmax(0, 13rem); gap: 1.5rem; align-items: center; justify-content: center; }
.phone { translate: 0 0; animation: phone-float 7s ease-in-out infinite alternate; }
.phone-where { flex: 0 0 45%; height: 0.36rem; border-radius: 3px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.phone-page { animation: phone-scroll var(--loop) ease-in-out infinite; }
.phone-progress span { width: 18%; animation: phone-progress var(--loop) ease-in-out infinite; }
.phone-line.has-bubble { position: relative; overflow: visible; }
.phone-bubble {
  position: absolute;
  top: 50%;
  right: -0.55rem;
  display: grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px 999px 999px 3px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.55rem;
  font-weight: 700;
  translate: 0 -50%;
  scale: 0;
  animation: phone-bubble var(--loop) ease-out infinite;
}
.phone-sealed .seal { animation: phone-stamp var(--loop) cubic-bezier(.2,.9,.3,1.3) infinite; }

.phone-notes { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.phone-note {
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule);
  color: var(--quill);
  font-size: var(--step--1);
  line-height: 1.45;
  animation: var(--loop) ease-in-out infinite;
}
.note-progress { animation-name: note-progress; }
.note-bubble { animation-name: note-bubble; }
.note-seal { animation-name: note-seal; }

@keyframes phone-float { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes phone-scroll {
  0%, 12% { transform: translateY(0); }
  70%, 86% { transform: translateY(-22%); }
  100% { transform: translateY(0); }
}
@keyframes phone-progress {
  0%, 12% { width: 18%; }
  70%, 86% { width: 64%; }
  100% { width: 18%; }
}
@keyframes phone-bubble {
  0%, 20% { scale: 0; }
  24% { scale: 1.2; }
  28%, 88% { scale: 1; }
  94%, 100% { scale: 0; }
}
@keyframes phone-stamp {
  0%, 42% { scale: 1.9; rotate: -25deg; opacity: 0; }
  47% { scale: 0.92; rotate: 0deg; opacity: 1; }
  51%, 90% { scale: 1; rotate: 0deg; opacity: 1; }
  96%, 100% { scale: 1; opacity: 0; }
}
/* Cada nota se enciende mientras pasa lo suyo: progreso, comentario, sello. */
@keyframes note-progress {
  0%, 30% { color: var(--ink); border-left-color: var(--wax); }
  38%, 100% { color: var(--quill); border-left-color: var(--rule); }
}
@keyframes note-bubble {
  0%, 18% { color: var(--quill); border-left-color: var(--rule); }
  24%, 42% { color: var(--ink); border-left-color: var(--wax); }
  50%, 100% { color: var(--quill); border-left-color: var(--rule); }
}
@keyframes note-seal {
  0%, 42% { color: var(--quill); border-left-color: var(--rule); }
  48%, 90% { color: var(--ink); border-left-color: var(--wax); }
  96%, 100% { color: var(--quill); border-left-color: var(--rule); }
}

/* Fuera de la vista no se gasta batería animando. */
.landing-hero.is-offscreen .phone, .landing-hero.is-offscreen .phone *, .landing-hero.is-offscreen .phone-note { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .phone, .phone *, .phone-note { animation: none !important; }
  .phone-bubble { scale: 1; }
  .phone-progress span { width: 38%; }
}
:root[data-motion="reduce"] .phone, :root[data-motion="reduce"] .phone *, :root[data-motion="reduce"] .phone-note { animation: none !important; }
:root[data-motion="reduce"] .phone-bubble { scale: 1; }
:root[data-motion="reduce"] .phone-progress span { width: 38%; }

@media (max-width: 1180px) and (min-width: 961px) {
  .landing-demo { grid-template-columns: auto; }
  .phone-notes { display: none; } /* no caben al lado: el móvil solo */
}
@media (max-width: 960px) {
  .landing-demo { order: 2; justify-content: start; }
}
@media (max-width: 720px) {
  /* En el móvil, la primera pantalla no puede ser sólo un bloque de texto. */
  .landing-copy .lede { font-size: var(--step-0); line-height: 1.6; }
  .landing-copy h1 { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .landing-actions { margin-top: 1.5rem; }
  .landing-demo { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 1rem; align-items: center; }
  .landing-demo .landing-phone { zoom: 0.62; padding: 0 0 0.5rem; }
  .phone-note { font-size: 0.82rem; }
}
/* La barra de arriba tapa el texto que sube, como en el lector de verdad. */
.phone-bar { position: relative; z-index: 1; margin: -0.6rem -1.25rem 1.1rem; padding: 0.6rem 1.25rem 0.5rem; background: var(--paper); }

/* ------------------------------------------- portada: una sola rejilla para todo */
/* Todas las secciones empiezan en el mismo borde y llevan la misma cabecera: una línea pequeña
   en cursiva (lacre) y el título. Nada de columnas al margen que desplazaban unas y otras. */
.landing-section { padding-block: 4.5rem 0.5rem; }
.section-head { max-width: 44rem; margin: 0 0 1.75rem; }
.section-kicker { margin: 0 0 0.45rem; color: var(--wax); font-family: var(--font-display); font-size: var(--step-0); font-style: italic; }
:root[data-dark] .section-kicker { color: var(--gold); }
.section-head h2, .diff-main h2, .faq-head h2 { margin: 0; font-size: clamp(var(--step-2), 3.6vw, var(--step-3)); line-height: 1.1; text-wrap: balance; }

/* Para qué sirve: dos tarjetas iguales, alineadas arriba y del mismo alto. */
.landing-uses { display: block; }
.use-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.use-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.75rem 1.75rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--sheet);
}
.use-card.use-writer {
  border: 1px solid color-mix(in srgb, var(--verdigris) 35%, var(--rule));
  background: color-mix(in srgb, var(--verdigris) 9%, var(--sheet));
}
.use-card h3 { margin: 0; font-size: var(--step-2); line-height: 1.15; }
.use-card .use-list { flex: 1; align-content: start; margin: 0; gap: 0.75rem; } /* el hueco sobrante, abajo: no entre líneas */
.use-card .use-list li, .use-reader .use-list li:first-child { font-size: var(--step-0); }
.use-card .link-arrow { align-self: flex-start; margin-top: 0.25rem; }
.use-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wax) 13%, transparent);
  color: var(--wax);
}
.use-writer .use-icon { background: color-mix(in srgb, var(--verdigris) 16%, transparent); color: var(--verdigris); }

/* Para empezar a leer, con pocas historias: cada una en grande, con su sinopsis. */
.start-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1.5rem; } /* con una sola, media anchura: no una tarjeta vacía de lado a lado */
.start-story {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--sheet);
}
.start-cover { display: block; text-decoration: none; }
.start-cover .cover { width: 100%; }
.start-body { display: grid; gap: 0.35rem; align-content: start; }
.start-meta { margin: 0; color: var(--quill); font-size: var(--step--1); }
.start-body h3 { margin: 0; font-size: var(--step-2); line-height: 1.15; }
.start-body h3 a { color: inherit; text-decoration: none; }
.start-body h3 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.start-author { margin: 0; color: var(--quill); }
.start-synopsis { margin: 0.4rem 0 0.75rem; color: var(--ink); line-height: 1.6; }
.start-body .button { justify-self: start; }
.start-more { margin: 1.25rem 0 0; }
.start-more .link-arrow { color: var(--ink); }

/* Cómo se empieza: el índice, al mismo borde que lo demás. */
.landing-contents { display: block; }
.landing-contents .contents { max-width: 46rem; }

/* Los rankings + sin destripes: el texto a un lado y una tarjeta con el sello al otro. */
.landing-different { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 2rem 3.5rem; }
.diff-main p:not(.section-kicker) { max-width: 36rem; margin: 1rem 0 0; color: var(--quill); font-size: var(--step-1); line-height: 1.55; }
.diff-main .section-kicker { margin: 0 0 0.45rem; color: var(--wax); }
:root[data-dark] .diff-main .section-kicker { color: var(--gold); }
.diff-main h2 { max-width: 24ch; }
.diff-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  padding: 1.6rem;
  border: 1px solid color-mix(in srgb, var(--wax) 30%, var(--rule));
  border-radius: 18px;
  background: color-mix(in srgb, var(--wax) 6%, var(--sheet));
}
.diff-card h3 { margin: 0.2rem 0 0.5rem; font-size: var(--step-1); }
.diff-card p { margin: 0; line-height: 1.55; }
.diff-card .diff-foot { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); grid-column: auto; }

/* Todas las historias empezaron con cero lectores: centrado, como la cita al principio de un libro. */
.landing-courage { max-width: 40rem; margin-inline: auto; padding-block: 5rem 1.5rem; text-align: center; }
.landing-courage::before { content: ""; display: block; width: 3rem; height: 2px; margin: 0 auto 2rem; background: var(--wax); }
.landing-courage h2 { margin-inline: auto; }
.landing-courage .link-arrow { display: inline-block; }

@media (max-width: 860px) {
  .use-cards, .landing-different { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .landing-section { padding-block: 3rem 0.25rem; }
  .use-card { padding: 1.35rem 1.25rem; }
  .start-story { grid-template-columns: 6.75rem minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .start-synopsis { font-size: var(--step--1); }
  .diff-card { padding: 1.25rem; }
  .landing-courage { padding-block: 3.5rem 1rem; }
}

/* ------------------------------------------------------------------ texturas */
/* Un grano fino por ENCIMA de la página (no recibe clics), para que los fondos no sean lisos de
   plantilla. Muy suave: se nota de cerca, no a primera vista. Tinta sobre los temas claros, un
   grano claro sobre los oscuros. Es un SVG pequeño que se repite (nada que descargar) y no se
   mueve. Fuera con alto contraste y al imprimir. */
:root {
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11  0 0 0 0 .13  0 0 0 0 .2  0 0 0 .5 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23t%29'/%3E%3C/svg%3E");
  --texture-opacity: 0.3;
}
:root[data-theme="sepia"] { --texture-opacity: 0.38; }
:root[data-dark] {
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .45 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23t%29'/%3E%3C/svg%3E");
  --texture-opacity: 0.26;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: var(--texture);
  background-size: 200px 200px;
  opacity: var(--texture-opacity);
}
:root[data-contrast="high"] body::after { display: none; }
@media (prefers-contrast: more) { :root:not([data-contrast]) body::after { display: none; } }
@media print { body::after { display: none; } }