/* Ediciones Galatea — hoja de estilos principal
   Idea rectora: la web es una página de edición crítica. Texto a una columna,
   notas en el margen, filetes de imprenta; la Constelación, terciopelo verde y oro. */

@font-face { font-family: "Garamond Galatea"; src: url(/static/fonts/eb-garamond-latin.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Garamond Galatea"; src: url(/static/fonts/eb-garamond-italic-latin.woff2) format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces Galatea"; src: url(/static/fonts/fraunces-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Galatea"; src: url(/static/fonts/fraunces-italic-latin.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --papel: #FDFBF7;
  --vitela: #F4EEE3;
  --tinta: #221C18;
  --tinta-2: #5C524A;
  --granate: #6B1426;
  --granate-2: #8C2238;
  --oro: #B8965D;
  --oro-tinta: #876629;      /* oro legible sobre papel (AA) */
  --filete: #DCD2C1;
  --terciopelo: #0F3B2D;
  --terciopelo-2: #082A20;
  --oro-luz: #E2C27A;

  --serif: "Garamond Galatea", "EB Garamond", Garamond, "Times New Roman", serif;
  --display: "Fraunces Galatea", "Fraunces", Georgia, serif;

  --t-0: 1.1875rem;            /* 19px de cuerpo */
  --t--1: 0.95rem;
  --t--2: 0.84rem;
  --t-1: 1.45rem;
  --t-2: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  --t-3: clamp(2.5rem, 1.4rem + 4.4vw, 4.9rem);

  --ancho: 76rem;
  --medida: 34em;
  --gutter: clamp(1rem, 4vw, 3rem);
  --granate-fijo: #6B1426;
  --papel-fijo: #FDFBF7;
  --verde: #3D7A4F;
  --verde-fondo: #EEF5EF;
  --verde-borde: #8DB89A;
  --rojo-fondo: #F8E9EC;
  --vitela-2: #EFE5D3;
  --campo: #FFFEFB;
  color-scheme: light;
}

/* ── Modo oscuro: tinta granate muy oscura, papel cálido como texto ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #16100E; --vitela: #211815; --vitela-2: #2B201C; --tinta: #EEE6DA; --tinta-2: #B9AC9C;
    --granate: #E58A9C; --granate-2: #F0A5B4; --oro-tinta: #D9B56E; --filete: #3A2D28; --campo: #1C1412;
    --verde: #8CCB9E; --verde-fondo: #1D2B21; --verde-borde: #3F6B4C; --rojo-fondo: #3A1C22;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --papel: #16100E; --vitela: #211815; --vitela-2: #2B201C; --tinta: #EEE6DA; --tinta-2: #B9AC9C;
  --granate: #E58A9C; --granate-2: #F0A5B4; --oro-tinta: #D9B56E; --filete: #3A2D28; --campo: #1C1412;
  --verde: #8CCB9E; --verde-fondo: #1D2B21; --verde-borde: #3F6B4C; --rojo-fondo: #3A1C22;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 var(--t-0)/1.6 var(--serif);
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--granate); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--granate-2); }
:focus-visible { outline: 2px solid var(--granate); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 380; line-height: 1.08; letter-spacing: -0.015em; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 96; }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-1); }
p { margin: 0 0 1em; text-wrap: pretty; hyphens: auto; }
em { font-style: italic; }
@view-transition { navigation: auto; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--granate); color: var(--papel); padding: .6em 1em; z-index: 10; }
.saltar:focus { left: 1rem; }

/* ── Cabecera ─────────────────────────────────────────── */
.cabecera {
  max-width: var(--ancho); margin: 0 auto; padding: 1.1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-bottom: 1px solid var(--filete);
}
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tinta); }
.marca img { width: 36px; height: auto; }
.marca-nombre { font-family: var(--display); font-size: 1.3rem; font-weight: 420; letter-spacing: -0.01em; }
.nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); font-size: var(--t--1); }
.nav a { white-space: nowrap; color: var(--tinta-2); text-decoration: none; padding: .3em 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: var(--granate); border-bottom-color: var(--oro); }
@media (max-width: 720px) {
  .cabecera { flex-wrap: wrap; gap: .6rem; }
  .nav { width: 100%; overflow-x: auto; scrollbar-width: none; gap: 1.2rem; }
}

main { display: block; }
.seccion-cab { max-width: 44rem; margin-bottom: 2rem; }
.seccion-cab p { color: var(--tinta-2); margin-top: .7rem; }

/* ── Botones ─────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 500 var(--t--1)/1 var(--display); letter-spacing: .01em;
  background: var(--granate); color: var(--papel); text-decoration: none;
  padding: .9em 1.35em; border: 1px solid var(--granate); border-radius: 2px; cursor: pointer;
  transition: background .2s, color .2s;
}
.boton:hover { background: var(--granate-2); color: var(--papel); }
.boton--oro { background: transparent; color: var(--oro-luz); border-color: var(--oro); }
.boton--oro:hover { background: var(--oro); color: var(--terciopelo-2); }
.boton--inactivo { background: transparent; color: var(--tinta-2); border-color: var(--filete); cursor: default; }

/* ── Pórtico (portada) ────────────────────────────────── */
.portico {
  max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(3rem, 7vw, 6rem);
  display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start;
}
.portico h1 { font-size: clamp(2.6rem, 1.4rem + 3.8vw, 4.4rem); font-weight: 340; font-variation-settings: "opsz" 144; color: var(--tinta); }
.entrada { font-size: 1.32rem; line-height: 1.5; color: var(--tinta-2); margin: 1.6rem 0 2.4rem; max-width: 30em; }
.puertas { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--filete); }
.puertas a {
  display: grid; gap: .15rem; padding: 1rem 0 1rem 1.6rem; text-decoration: none; color: var(--tinta);
  border-bottom: 1px solid var(--filete); position: relative; transition: padding .25s, background .25s;
}
.puertas a::before {
  content: ""; position: absolute; left: .1rem; top: 1.45rem; width: .7rem; height: .7rem;
  background: var(--oro); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transition: transform .4s;
}
.puertas a:hover { padding-left: 2rem; background: linear-gradient(90deg, var(--vitela), transparent); }
.puertas a:hover::before { transform: rotate(45deg); background: var(--granate); }
.puerta-t { font-family: var(--display); font-size: 1.32rem; font-weight: 400; }
.puerta-d { font-size: var(--t--1); color: var(--tinta-2); }
.portico-pie { font-size: var(--t--1); color: var(--tinta-2); margin: 1rem 0 0; }
@media (max-width: 960px) { .portico { grid-template-columns: 1fr; } }


/* ── Escaparate (portada) ───────────────────────────────── */
.boton--oro-lleno { background: var(--oro-luz); color: #3A0A15; border-color: var(--oro-luz); }
.boton--oro-lleno:hover { background: #F0D597; color: #3A0A15; }
.boton--claro { background: transparent; color: var(--papel-fijo); border-color: color-mix(in srgb, var(--papel-fijo) 55%, transparent); }
.boton--claro:hover { background: var(--papel-fijo); color: var(--granate-fijo); }

.escaparate {
  --estrellas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='%23E2C27A' fill-opacity='.10'%3E%3Cpath id='e' d='M30 18l1.6 6.4 4.6-4.6-4.6 4.6L38 26l-6.4 1.6 4.6 4.6-4.6-4.6L30 34l-1.6-6.4-4.6 4.6 4.6-4.6L22 26l6.4-1.6-4.6-4.6 4.6 4.6z'/%3E%3Cuse href='%23e' x='60' y='52'/%3E%3C/g%3E%3C/svg%3E");
  position: relative; overflow: hidden; color: var(--papel-fijo);
  background: var(--estrellas), radial-gradient(120% 120% at 85% 20%, #8C2238 0%, #6B1426 38%, #3E0B17 100%);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 7vw, 5.5rem) max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  min-height: min(52rem, calc(100svh - 4.6rem));
}
.escaparate h1 { font-size: clamp(3rem, 1.6rem + 5.4vw, 6.2rem); font-weight: 320; font-variation-settings: "opsz" 144; color: var(--papel-fijo); letter-spacing: -0.03em; line-height: .98; }
.escaparate .entrada { color: #F1DED9; margin: 1.6rem 0 2.2rem; max-width: 27em; }
.escaparate .entrada em { color: var(--papel-fijo); }
.escaparate-texto { position: relative; z-index: 4; }
.escaparate-botones { display: flex; flex-wrap: wrap; gap: .8rem; }

.carrusel { position: relative; display: grid; justify-items: center; gap: 1.4rem; }
.carrusel-pista { list-style: none; margin: 0; padding: 0; position: relative; width: 100%; height: clamp(26rem, 24rem + 12vw, 37rem); perspective: 1600px; }
.carrusel-item { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; gap: 1.3rem;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s; opacity: 0; pointer-events: none; transform: translateX(0) scale(.6); }
.carrusel-cubierta { display: block; width: clamp(12rem, 9rem + 9vw, 18.5rem); aspect-ratio: 1 / 1.6; }
.carrusel-cubierta picture, .carrusel-cubierta img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carrusel-cubierta picture { box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 40px 60px -24px rgba(0,0,0,.65); }
.carrusel-item.actual { opacity: 1; pointer-events: auto; transform: none; z-index: 3; }
.carrusel-item.prev { opacity: .4; transform: translateX(-40%) scale(.72) rotateY(24deg); z-index: 2; }
.carrusel-item.next { opacity: .4; transform: translateX(40%) scale(.72) rotateY(-24deg); z-index: 2; }
.carrusel-item.prev .carrusel-pie, .carrusel-item.next .carrusel-pie { opacity: 0; }
.carrusel-item.prev, .carrusel-item.next { pointer-events: auto; cursor: pointer; }
.carrusel-pie { text-align: center; max-width: 26rem; transition: opacity .5s; }
.carrusel-gancho { font: italic 400 1.22rem/1.4 var(--serif); color: var(--papel-fijo); margin: 0 0 .5rem; text-wrap: balance; }
.carrusel-gancho em { font-style: normal; }
.carrusel-obra { font-size: var(--t--1); color: #E8CFC9; margin: 0; }
.carrusel-obra a { color: var(--oro-luz); text-decoration: none; }
.carrusel-obra a:hover { text-decoration: underline; }
.carrusel-mandos { display: flex; align-items: center; gap: 1rem; color: #E8CFC9; font: 400 var(--t--1)/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }
.carrusel-btn { all: unset; cursor: pointer; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--papel) 35%, transparent); transition: background .2s, border-color .2s; }
.carrusel-btn:hover { background: color-mix(in srgb, var(--papel) 12%, transparent); border-color: var(--oro-luz); }
.carrusel-btn:focus-visible { outline: 2px solid var(--oro-luz); outline-offset: 3px; }
.carrusel-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--papel-fijo); stroke-width: 1.6; }
.escaparate :focus-visible { outline-color: var(--oro-luz); }
@media (max-width: 860px) {
  .escaparate { grid-template-columns: 1fr; min-height: 0; }
  .carrusel-item.prev { transform: translateX(-38%) scale(.7) rotateY(24deg); }
  .carrusel-item.next { transform: translateX(38%) scale(.7) rotateY(-24deg); }
}

.puertas-sec { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); }
.puertas-sec .puertas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; border-top: 0; }
.puertas-sec .puertas a { border-top: 2px solid var(--granate); border-bottom: 0; padding: 1.2rem 0 0 1.6rem; height: 100%; }
.puertas-sec .puertas a:hover { padding-left: 1.9rem; }
.puertas-sec .puertas a::before { top: 1.65rem; }
.puertas-sec .puerta-d { margin-top: .3rem; line-height: 1.45; }
@media (max-width: 760px) { .puertas-sec .puertas { grid-template-columns: 1fr; gap: 1.6rem; } }

.por-dentro { max-width: var(--ancho); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.por-dentro-texto p { color: var(--tinta-2); margin: 1rem 0 0; }
.por-dentro-texto .boton { margin-top: 1.6rem; }
@media (max-width: 960px) { .por-dentro { grid-template-columns: 1fr; } }

/* ── Folio: página anotada ─────────────────────────────── */
.folio {
  margin: 0; background: var(--papel);
  border: 1px solid var(--filete); box-shadow: 0 1px 0 var(--filete), 0 24px 48px -32px rgba(60, 30, 20, .35);
  padding: clamp(1.2rem, 3vw, 2.4rem) clamp(1.2rem, 3.2vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem);
  position: relative;
}
.folio::before { /* filete interior doble, como la cenefa de las cubiertas */
  content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent); pointer-events: none;
}
.folio-cab {
  display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t--2); color: var(--tinta-2);
  border-bottom: 1px solid var(--filete); padding-bottom: .6rem; margin-bottom: 1.4rem; font-style: italic;
}
.folio-obra { font-style: italic; }
.folio-lugar { font-style: normal; font-variant-caps: small-caps; letter-spacing: .03em; }
.folio-caja { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 1.8rem; position: relative; }
.folio-texto { font-size: 1.16rem; line-height: 1.62; min-width: 0; }
.folio-texto p { margin: 0 0 .6em; text-indent: 1.4em; hyphens: auto; }
.folio-texto p:first-child { text-indent: 0; }
.folio-texto .verso { margin: 0 0 .9em; }
.folio-texto .v { display: block; padding-left: 1.4em; text-indent: -1.4em; }
.folio-texto .pers { font-variant-caps: small-caps; letter-spacing: .04em; color: var(--granate); }
.folio-texto .acot { font-style: italic; color: var(--tinta-2); text-indent: 0; }
.folio-texto .frag-enc { font-family: var(--display); text-indent: 0; margin-top: 1em; color: var(--granate); }
.folio-texto blockquote { margin: 0 0 1em 2em; font-style: italic; }

.llamada {
  all: unset; cursor: pointer; font: 600 .62em/1 var(--display); color: var(--granate);
  vertical-align: super; padding: 0 .12em; margin-left: .05em; border-radius: 2px;
  font-variant-numeric: lining-nums; text-indent: 0; transition: background .2s, color .2s;
}
.llamada:hover, .llamada[aria-expanded="true"], .llamada.activa { background: var(--granate); color: var(--papel); }
.llamada:focus-visible { outline: 2px solid var(--granate); outline-offset: 1px; }

/* Notas en el margen (escritorio). La posición vertical la fija galatea.js. */
.folio-margen { list-style: none; margin: 0; padding: 0; position: relative; font-size: .86rem; line-height: 1.38; color: var(--tinta-2); }
.sn { padding: 0 0 0 .9rem; border-left: 1px solid var(--filete); margin-bottom: .8rem; transition: border-color .25s, color .25s, background .25s; }
.folio-margen.posicionado .sn { position: absolute; left: 0; right: 0; margin: 0; }
.sn-num { font: 600 .78rem/1 var(--display); color: var(--granate); margin-right: .25rem; }
.sn-tipo { font: 500 .66rem/1 var(--display); color: var(--oro-tinta); border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); border-radius: 2px; padding: .12rem .22rem; margin-right: .3rem; vertical-align: .08em; }
.sn-lema { font-style: italic; font-weight: 500; color: var(--tinta); }
.sn-lema::after { content: ":"; font-style: normal; }
.sn.activa { border-left-color: var(--granate); color: var(--tinta); background: linear-gradient(90deg, var(--vitela), transparent 80%); }

.folio--portico .folio-texto { font-size: 1.1rem; }

/* Coreografía de entrada (solo en el pórtico): las notas brotan al margen una a una. */
@media (prefers-reduced-motion: no-preference) {
  .folio--portico .folio-texto { font-size: 1.1rem; }
.folio--portico.listo .sn { animation: brota .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.6s + var(--i) * .42s); }
  .folio--portico.listo .llamada { animation: late .9s ease both; animation-delay: calc(.45s + var(--i, 0) * .42s); }
}
@keyframes brota { from { opacity: 0; transform: translateX(-10px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes late { 0% { background: transparent; } 35% { background: var(--oro); color: var(--papel); } 100% { background: transparent; } }

/* Nota completa: popover. En pantallas estrechas, hoja inferior. */
.nota-pop {
  text-indent: 0; display: none; margin: auto; max-width: min(34rem, calc(100vw - 2rem)); padding: 1.2rem 1.4rem 1.3rem;
  border: 1px solid var(--filete); border-top: 3px solid var(--granate); background: var(--papel); color: var(--tinta);
  font: 400 1.02rem/1.55 var(--serif); box-shadow: 0 24px 60px -20px rgba(34, 28, 24, .45);
}
.nota-pop:popover-open { display: block; }
.nota-pop::backdrop { background: rgba(34, 28, 24, .28); }
.nota-pop .nota-lema { display: block; font: italic 500 1.12rem/1.3 var(--serif); color: var(--granate); margin-bottom: .35rem; }
@media (max-width: 960px) {
  .folio-caja { grid-template-columns: 1fr; }
  .folio-margen { display: none; }
  .nota-pop:popover-open { position: fixed; inset: auto 0 0 0; margin: 0; max-width: none; width: 100%; border-radius: 10px 10px 0 0; animation: sube .25s ease-out; }
}
@keyframes sube { from { transform: translateY(30%); opacity: .4; } }

/* ── Estante cronológico ───────────────────────────────── */
.estante { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--vitela); border-block: 1px solid var(--filete); }
.estante .seccion-cab { padding: 0 var(--gutter); max-width: calc(var(--ancho)); margin-inline: auto; }
.estante .seccion-cab p { max-width: 38em; }
.estante-riel {
  display: flex; gap: 0; overflow-x: auto; padding: 0 var(--gutter) 1.4rem;
  scroll-snap-type: x proximity; scroll-padding-left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); scrollbar-width: thin; scrollbar-color: var(--oro) transparent;
  padding-left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
}
.epoca { flex: none; padding-right: 2.2rem; margin-right: 2.2rem; border-right: 1px solid var(--filete); scroll-snap-align: start; }
.epoca:last-child { border-right: 0; }
.epoca-nombre {
  font: italic 400 1.15rem/1.2 var(--serif); color: var(--granate); letter-spacing: 0;
  padding-bottom: .55rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--granate);
}
.epoca-libros { display: flex; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.libro { display: grid; width: 9.6rem; text-decoration: none; color: var(--tinta); }
.libro picture { aspect-ratio: 1 / 1.6; overflow: hidden; box-shadow: 0 1px 2px rgba(34,28,24,.2), 0 14px 26px -16px rgba(80, 20, 30, .55); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; transform-origin: 50% 100%; }
.libro img { width: 100%; height: 100%; object-fit: cover; }
.libro:hover picture { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 1px 2px rgba(34,28,24,.2), 0 26px 30px -18px rgba(80, 20, 30, .6); }
.libro-anio { font: 500 var(--t--2)/1 var(--display); color: var(--oro-tinta); margin-top: .9rem; font-variant-numeric: lining-nums; }
.libro-t { font: 420 1rem/1.2 var(--display); margin-top: .35rem; }
.libro-a { font-size: var(--t--2); color: var(--tinta-2); font-style: italic; margin-top: .2rem; }

.cartela {
  position: absolute; z-index: 2; width: 17rem; padding: .9rem 1.1rem 1rem; pointer-events: none;
  background: var(--papel); color: var(--tinta); text-align: center;
  border: 1px solid var(--oro); outline: 3px solid var(--papel); box-shadow: 0 0 0 4px var(--oro), 0 20px 40px -12px rgba(0,0,0,.6);
  font-size: .92rem; line-height: 1.4;
}
.cartela-t { font: 420 1.12rem/1.15 var(--display); color: var(--granate); display: block; }
.cartela-a { font-style: italic; color: var(--tinta-2); display: block; margin: .15rem 0 .5rem; }
.cartela ul { list-style: none; padding: .5rem 0 0; margin: 0; border-top: 1px solid var(--filete); text-align: left; }
.cartela li { padding-left: 1rem; position: relative; margin-bottom: .25rem; }
.cartela li::before { content: "♦"; position: absolute; left: 0; color: var(--oro); font-size: .7rem; top: .2rem; }
.cartela { pointer-events: auto; }
.cartela-ir { display: inline-block; margin-top: .6rem; font: 500 .9rem/1 var(--display); color: var(--granate); }
.cartela-pronto { display: inline-block; margin-top: .5rem; font-style: italic; color: var(--tinta-2); }

/* ── Constelación: página propia ───────────────────────── */
.nav-cielo { display: inline-flex; align-items: center; gap: .35em; }
.nav-cielo svg { width: .85em; height: .85em; fill: var(--oro); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.nav-cielo:hover svg { transform: rotate(45deg) scale(1.25); }

.pagina-cielo .cabecera {
  position: absolute; inset: 0 0 auto 0; z-index: 3; max-width: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  border-bottom-color: color-mix(in srgb, var(--cielo-tinta, #FDFBF7) 16%, transparent);
}
.pagina-cielo .marca, .pagina-cielo .nav a { color: var(--cielo-tinta, var(--papel)); }
.pagina-cielo .nav a:hover, .pagina-cielo .nav a[aria-current] { color: var(--cielo-tinta); border-bottom-color: var(--cielo-acento); }
html[data-cielo="noche"] .pagina-cielo .marca img { filter: sepia(1) saturate(2.2) hue-rotate(-5deg) brightness(1.6); }

.firmamento {
  position: relative; min-height: 100vh; min-height: 100svh; color: var(--cielo-tinta, var(--papel));
  background: linear-gradient(180deg, var(--cielo-cenit, #140A0D) 0%, var(--cielo-horizonte, #2A1219) 100%);
  display: grid; grid-template-rows: auto 1fr; padding-top: 6rem;
}
.firmamento-texto { padding: 1.5rem max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))) 0; max-width: 46rem; box-sizing: content-box; }
.firmamento h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem); font-weight: 330; font-variation-settings: "opsz" 144; color: var(--cielo-acento); }
.firmamento-texto p { margin: 1rem 0 0; max-width: 36em; opacity: .88; }
.reloj { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin-top: 1.4rem; font-size: var(--t--1); }
.reloj-rotulo { margin: 0 !important; font-style: italic; opacity: 1 !important; }
.reloj-control input { width: 11rem; accent-color: var(--cielo-acento); vertical-align: middle; }
.reloj-ahora { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; opacity: .8; }
.reloj-ahora:hover { opacity: 1; }
.reloj-ahora:focus-visible { outline: 2px solid var(--cielo-acento); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.firmamento-lienzo { position: relative; min-height: 34rem; }
#cielo { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
@media (max-width: 700px) { .firmamento-lienzo { min-height: 150vh; } }

/* Telón: el cielo se abre en círculo desde donde se pulsó «Constelación». */
@media (prefers-reduced-motion: no-preference) {
  html.revelar .firmamento { animation: telon 1.25s cubic-bezier(.65, 0, .25, 1) both; }
  html.revelar .pagina-cielo .cabecera { animation: aparece .5s .85s both; }
  html.revelar .firmamento-texto { animation: aparece .7s 1s both; }
}
@keyframes telon { from { clip-path: circle(0 at var(--ox, 50%) var(--oy, 0)); } to { clip-path: circle(160% at var(--ox, 50%) var(--oy, 0)); } }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }

.conversaciones { max-width: var(--ancho); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.conversaciones h2 { margin-bottom: 1.6rem; }
.conversaciones ul { list-style: none; margin: 0; padding: 0; columns: 2 22rem; column-gap: 3rem; }
.conversaciones li { break-inside: avoid; padding: .8rem 0; border-bottom: 1px solid var(--filete); display: grid; gap: .15rem; }
.conv-motivo { font: 420 1.08rem/1.25 var(--display); }
.conv-obras { font-size: var(--t--1); color: var(--tinta-2); font-style: italic; }

/* ── PAU ───────────────────────────────────────────────── */
.pau {
  max-width: var(--ancho); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.pau-cuenta { display: grid; justify-items: start; border-left: 2px solid var(--granate); padding-left: 1.4rem; }
.pau-num { font: 300 clamp(5rem, 3rem + 8vw, 9rem)/.9 var(--display); color: var(--granate); font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 144; letter-spacing: -0.04em; }
.pau-lbl { font: 400 1.3rem/1.2 var(--display); margin-top: .4rem; }
.pau-cuenta small { font-size: var(--t--2); color: var(--tinta-2); margin-top: .8rem; max-width: 22rem; line-height: 1.4; }
.pau-texto p { color: var(--tinta-2); margin: 1rem 0 1.6rem; max-width: 34em; }
@media (max-width: 760px) { .pau { grid-template-columns: 1fr; } }

/* ── Boletín ───────────────────────────────────────────── */
.boletin {
  max-width: var(--ancho); margin: 0 auto clamp(3rem, 6vw, 5rem); padding: clamp(2rem, 4vw, 3rem) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem 4rem;
  border-top: 1px solid var(--filete);
}
.boletin p { color: var(--tinta-2); margin-top: .8rem; }
.boletin-form { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem 1.2rem; align-items: end; }
.campo { display: grid; gap: .35rem; font-size: var(--t--1); color: var(--tinta-2); }
.campo input, .campo select {
  font: inherit; font-size: 1.05rem; color: var(--tinta); background: var(--papel);
  border: 0; border-bottom: 1px solid var(--tinta-2); padding: .55rem .1rem; border-radius: 0;
}
.campo input:focus, .campo select:focus { outline: none; border-bottom: 2px solid var(--granate); }
.check { grid-column: 1 / -1; font-size: var(--t--1); color: var(--tinta-2); display: flex; gap: .6rem; align-items: baseline; }
.check input { accent-color: var(--granate); }
.boletin-form .boton { justify-self: start; }
.form-estado { grid-column: 1 / -1; margin: 0; font-size: var(--t--1); min-height: 1.4em; }
.form-estado.ok { color: var(--verde); }
.form-estado.error { color: var(--granate); }
@media (max-width: 760px) { .boletin, .boletin-form { grid-template-columns: 1fr; } }

/* ── Ficha de obra ─────────────────────────────────────── */
.migas { max-width: var(--ancho); margin: 0 auto; padding: 1.2rem var(--gutter) 0; font-size: var(--t--2); color: var(--tinta-2); }
.migas a { color: var(--tinta-2); }
.ficha {
  max-width: var(--ancho); margin: 0 auto; padding: 2rem var(--gutter) clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start;
}
.ficha-cubierta { position: sticky; top: 1.5rem; perspective: 1400px; }
.cubierta { display: block; max-width: 24rem; margin-inline: auto; aspect-ratio: 1 / 1.6; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 2px 3px rgba(34,28,24,.25), 0 40px 60px -30px rgba(80, 20, 30, .55); }
.cubierta img { width: 100%; height: 100%; object-fit: cover; }
.signatura { font: 500 var(--t--1)/1 var(--display); color: var(--oro-tinta); font-variant-caps: small-caps; letter-spacing: .06em; margin-bottom: .8rem; }
.ficha-titulo { font-size: var(--t-3); font-weight: 340; font-variation-settings: "opsz" 144; }
.ficha-autor { font: italic 400 1.45rem/1.3 var(--serif); margin: .9rem 0 0; }
.ficha-autor span { color: var(--tinta-2); font-style: normal; font-size: 1.1rem; }
.ficha-gancho { font-size: 1.32rem; line-height: 1.5; margin: 1.6rem 0 2rem; padding-left: 1.2rem; border-left: 2px solid var(--oro); max-width: 30em; }
.ficha-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0; margin: 0 0 2.2rem; border-block: 1px solid var(--filete); }
.ficha-cifras div { padding: .9rem 1rem .9rem 0; }
.ficha-cifras dt { font-size: var(--t--2); color: var(--tinta-2); }
.ficha-cifras dd { margin: .15rem 0 0; font: 420 1.25rem/1.2 var(--display); font-variant-numeric: lining-nums; }
.compra { display: grid; gap: 0; }
.formato { display: grid; grid-template-columns: 1fr auto auto; gap: 1.2rem; align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--filete); }
.formato:first-child { border-top: 1px solid var(--filete); }
.formato-info { display: grid; }
.formato-n { font: 420 1.2rem/1.2 var(--display); }
.formato-d { font-size: var(--t--2); color: var(--tinta-2); }
.formato-p { font: 400 1.3rem/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.boton--compra { padding: .75em 1.1em; }
@media (max-width: 860px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha-cubierta { position: static; }
  .cubierta { max-width: 15rem; }
}
@media (max-width: 520px) {
  .formato { grid-template-columns: 1fr auto; }
  .formato .boton { grid-column: 1 / -1; }
}

.muestra .folio { max-width: 64rem; }
.muestra { max-width: var(--ancho); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.contenido-ed { max-width: var(--ancho); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--gutter); border-top: 1px solid var(--filete); }
.contenido-ed h2 { margin-bottom: 1.6rem; }
.ed-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); }
.ed-fijacion { font-size: 1.22rem; line-height: 1.55; }
.rombos { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.rombos li { position: relative; padding-left: 1.4rem; margin-bottom: .8rem; }
.rombos li::before { content: "♦"; position: absolute; left: 0; top: .1em; color: var(--oro); font-size: .8em; }
.ed-glosario { background: var(--vitela); padding: 1.5rem 1.6rem; border-top: 3px solid var(--granate); }
.ed-glosario h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.ed-glosario dl { margin: 0; }
.ed-glosario div { padding: .6rem 0; border-bottom: 1px solid var(--filete); }
.ed-glosario div:last-child { border-bottom: 0; }
.ed-glosario dt { font-style: italic; font-weight: 500; color: var(--granate); }
.ed-glosario dd { margin: .1rem 0 0; font-size: .98rem; line-height: 1.45; }
@media (max-width: 860px) { .ed-cols { grid-template-columns: 1fr; } }

/* siempre granate */
.cuaderno-aviso {
  max-width: calc(var(--ancho) - 2 * var(--gutter)); margin: clamp(1rem, 3vw, 2rem) auto; padding: clamp(1.6rem, 4vw, 2.8rem);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.5rem; align-items: center;
  background: var(--granate-fijo); color: var(--papel-fijo);
  box-shadow: inset 0 0 0 6px var(--granate-fijo), inset 0 0 0 7px color-mix(in srgb, var(--oro) 70%, transparent);
}
.cuaderno-aviso h2 { color: var(--papel-fijo); }
.cuaderno-aviso p { color: #F1E3E1; margin: 1rem 0 1.5rem; }
.cuaderno-aviso .boton { background: var(--papel-fijo); color: var(--granate-fijo); border-color: var(--papel-fijo); }
.cuaderno-aviso .boton:hover { background: var(--oro-luz); border-color: var(--oro-luz); }
.cuaderno-claves { list-style: none; margin: 0; padding: 0; }
.cuaderno-claves li { padding: .8rem 0 .8rem 1.4rem; border-bottom: 1px solid rgba(253, 251, 247, .2); position: relative; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; }
.cuaderno-claves li::before { content: "♦"; position: absolute; left: 0; color: var(--oro-luz); font-size: .75rem; top: 1.05rem; }
@media (max-width: 760px) { .cuaderno-aviso { grid-template-columns: 1fr; margin-inline: var(--gutter); } }

.afines { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); }
.afines h2 { margin-bottom: 1.8rem; }
.afines ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 2rem; }
.afines a { display: grid; text-decoration: none; color: var(--tinta); }
.afines img { width: 7.5rem; aspect-ratio: 1/1.6; object-fit: cover; box-shadow: 0 12px 22px -14px rgba(80,20,30,.55); margin-bottom: 1rem; }
.afin-motivo { font-size: var(--t--2); color: var(--oro-tinta); font-style: italic; line-height: 1.35; }
.afin-t { font: 420 1.1rem/1.2 var(--display); margin-top: .35rem; }
.afin-a { font-size: var(--t--1); color: var(--tinta-2); font-style: italic; }

/* ── Pie ───────────────────────────────────────────────── */
.pie { background: var(--vitela); border-top: 1px solid var(--filete); padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem; font-size: var(--t--1); }
.pie > * { max-width: var(--ancho); margin-inline: auto; }
.pie-sello { display: grid; justify-items: center; text-align: center; margin-bottom: 3rem; }
.pie-sello img { width: 88px; }
.pie-lema { font: italic 400 1.3rem/1.3 var(--serif); color: var(--granate); margin: 1rem 0 0; }
.pie-lema::before { content: "«"; } .pie-lema::after { content: "»"; }
.pie-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--filete); }
.pie-titulo { font: 420 1.15rem/1.2 var(--display); margin-bottom: .5rem; }
.pie nav { display: grid; align-content: start; gap: .45rem; }
.pie nav a { color: var(--tinta-2); text-decoration: none; }
.pie nav a:hover { color: var(--granate); }
.pie-nota { color: var(--tinta-2); font-size: var(--t--2); margin-top: 2.5rem; }
@media (max-width: 720px) { .pie-cols { grid-template-columns: 1fr 1fr; } .pie-cols > div { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* ── Utilidades comunes ─────────────────────────────────── */
.boton--borde { background: transparent; color: var(--granate); border-color: var(--granate); }
.boton--borde:hover { background: var(--granate); color: var(--papel); }
.enlace-boton { all: unset; cursor: pointer; color: var(--granate); text-decoration: underline; text-underline-offset: .2em; font-size: var(--t--1); }
.enlace-boton:focus-visible { outline: 2px solid var(--granate); outline-offset: 3px; }

/* ── Catálogo ───────────────────────────────────────────── */
.cat-cab { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 1.5rem; }
.cat-cab h1, .cu-hub-cab h1 { font-size: var(--t-3); font-weight: 330; font-variation-settings: "opsz" 144; }
.cat-cab p { color: var(--tinta-2); max-width: 40em; margin-top: 1rem; }
.filtros { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--papel) 94%, transparent); backdrop-filter: blur(8px);
  max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--gutter); display: grid; gap: .8rem; border-bottom: 1px solid var(--filete); }
.filtro-buscar { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--tinta-2); max-width: 26rem; }
.filtro-buscar svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--tinta-2); stroke-width: 1.6; flex: none; }
.filtro-buscar input { border: 0; background: transparent; font: inherit; font-size: 1.05rem; padding: .5rem 0; width: 100%; color: var(--tinta); }
.filtro-buscar input:focus { outline: none; }
.filtro-buscar:focus-within { border-bottom: 2px solid var(--granate); }
.filtro-grupo { border: 0; margin: 0; padding: 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.chip { flex: none; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: .35em .85em; border: 1px solid var(--filete); border-radius: 999px; font-size: var(--t--1); color: var(--tinta-2); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: var(--granate); color: var(--granate); }
.chip input:checked + span { background: var(--granate); border-color: var(--granate); color: var(--papel); }
.chip input:focus-visible + span { outline: 2px solid var(--granate); outline-offset: 2px; }
.interruptor { display: flex; align-items: center; gap: .5rem; font-size: var(--t--1); color: var(--tinta-2); cursor: pointer; }
.interruptor input { accent-color: var(--granate); }
.filtro-cuenta { margin: 0; font-size: var(--t--2); color: var(--tinta-2); }
.rejilla { list-style: none; max-width: var(--ancho); margin: 0 auto; padding: 2rem var(--gutter) 4rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 2.6rem 2rem; }
.ficha-mini a, .ficha-mini > div { display: grid; text-decoration: none; color: var(--tinta); }
.ficha-mini picture { aspect-ratio: 1 / 1.6; overflow: hidden; box-shadow: 0 1px 2px rgba(34,28,24,.2), 0 14px 26px -16px rgba(80, 20, 30, .55); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ficha-mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha-mini a:hover picture { transform: translateY(-5px); }
.mini-meta { font: 500 var(--t--2)/1 var(--display); color: var(--oro-tinta); margin-top: .9rem; font-variant-numeric: lining-nums; }
.mini-t { font: 420 1.08rem/1.2 var(--display); margin-top: .35rem; }
.mini-a { font-size: var(--t--1); color: var(--tinta-2); font-style: italic; }
.mini-g { font-size: .9rem; line-height: 1.4; color: var(--tinta-2); margin-top: .5rem; }
.mini-pronto { font-size: var(--t--2); color: var(--oro-tinta); margin-top: .4rem; }
.en-preparacion picture { filter: grayscale(.85) contrast(.9); opacity: .55; box-shadow: none; }
.rejilla-vacia { max-width: var(--ancho); margin: 0 auto 4rem; padding: 0 var(--gutter); color: var(--tinta-2); }

/* ── Cuadernos: índice ──────────────────────────────────── */
.cu-hub-cab { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 2rem;
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 3rem; align-items: end; }
.cu-hub-cab p { color: var(--tinta-2); max-width: 38em; margin-top: 1rem; }
.pau-cuenta--mini .pau-num { font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); }
.cu-lista { list-style: none; max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--gutter) 4rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem; }
.cu-lista a { display: grid; grid-template-columns: 4.6rem 1fr; grid-template-rows: auto auto 1fr; gap: .15rem 1rem; padding: 1rem;
  text-decoration: none; color: var(--tinta); border: 1px solid var(--filete); background: var(--papel); transition: border-color .2s, background .2s; }
.cu-lista a:hover { border-color: var(--granate); background: var(--vitela); }
.cu-lista img { grid-row: 1 / 4; width: 4.6rem; aspect-ratio: 1/1.6; object-fit: cover; box-shadow: 0 8px 14px -10px rgba(80,20,30,.6); }
.cu-t { font: 420 1.08rem/1.2 var(--display); }
.cu-a { font-size: var(--t--1); font-style: italic; color: var(--tinta-2); }
.cu-claves { font-size: var(--t--2); color: var(--oro-tinta); align-self: end; }
@media (max-width: 760px) { .cu-hub-cab { grid-template-columns: 1fr; } }

/* ── Cuaderno ──────────────────────────────────────────── */
.cu-cab { max-width: var(--ancho); margin: 0 auto; padding: 2rem var(--gutter) 2.5rem; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.cu-cab-cubierta { width: 9rem; box-shadow: 0 2px 3px rgba(34,28,24,.2), 0 26px 40px -22px rgba(80,20,30,.6); }
.cu-cab h1 { font-size: var(--t-3); font-weight: 330; font-variation-settings: "opsz" 144; }
.cu-cab h1 cite { font-style: normal; }
.cu-cab-autor { font: italic 1.3rem/1.3 var(--serif); margin: .6rem 0 0; }
.cu-cab-intro { color: var(--tinta-2); max-width: 36em; margin: 1rem 0 1.4rem; }
.cu-cab-botones { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 640px) { .cu-cab { grid-template-columns: 1fr; } .cu-cab-cubierta { width: 7rem; } }

.cu-cuerpo { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter) 4rem; display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3.5rem; align-items: start; border-top: 1px solid var(--filete); }
.cu-indice { position: sticky; top: 1rem; padding-top: 2rem; font-size: var(--t--1); }
.cu-progreso { margin: 0 0 .5rem; color: var(--tinta-2); font-size: var(--t--2); }
.cu-barra { height: 3px; background: var(--filete); margin-bottom: 1.2rem; }
.cu-barra span { display: block; height: 100%; width: 0; background: var(--oro); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.cu-indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--filete); }
.cu-indice a { display: block; padding: .35rem 0 .35rem 1rem; color: var(--tinta-2); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.cu-indice a:hover { color: var(--granate); border-left-color: var(--granate); }
.cu-indice a.hecho-ok::after { content: " ✓"; color: var(--verde); }
@media (max-width: 900px) {
  .cu-cuerpo { grid-template-columns: 1fr; gap: 0; }
  .cu-indice { position: static; padding-top: 1.5rem; }
  .cu-indice ol { display: flex; gap: .4rem; overflow-x: auto; border: 0; scrollbar-width: none; }
  .cu-indice a { white-space: nowrap; border: 1px solid var(--filete); border-radius: 999px; padding: .3em .8em; margin: 0; }
}
.cu-sec { padding: 2.6rem 0; border-bottom: 1px solid var(--filete); scroll-margin-top: 1rem; }
.cu-sec h2 { margin-bottom: .8rem; }
.cu-sec-intro { color: var(--tinta-2); max-width: 40em; }

.esencial { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
.esencial-bloque { background: var(--vitela); padding: 1.3rem 1.4rem; border-top: 3px solid var(--granate); }
.esencial-bloque h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: .8rem; }
.esencial-bloque dl { margin: 0; }
.esencial-bloque div { padding: .5rem 0; border-top: 1px solid var(--filete); font-size: 1rem; line-height: 1.45; }
.esencial-bloque dt { font-weight: 600; color: var(--granate); display: inline; }
.esencial-bloque dt::after { content: ": "; }
.esencial-bloque dd { display: inline; margin: 0; }
.sociograma { display: block; margin-top: 1.2rem; border: 1px solid var(--filete); background: #fff; padding: 1rem; }
.sociograma img { width: 100%; height: auto; }

.ordena { display: grid; gap: 1.4rem; margin-top: 1.4rem; }
.ordena-hechos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; min-height: 3rem; }
.hecho { all: unset; cursor: pointer; box-sizing: border-box; display: block; padding: .6rem .85rem; background: var(--papel); border: 1px solid var(--filete); border-left: 3px solid var(--oro);
  font-size: .98rem; line-height: 1.4; max-width: 30rem; transition: transform .2s, border-color .2s, background .2s; box-shadow: 0 6px 12px -10px rgba(80,20,30,.5); }
.hecho:hover { border-color: var(--granate); }
.hecho:focus-visible { outline: 2px solid var(--granate); outline-offset: 2px; }
.hecho.elegido { background: var(--granate); color: var(--papel); border-color: var(--granate); transform: translateY(-2px); }
.hecho.bien { border-left-color: var(--verde); background: var(--verde-fondo); }
.hecho.mal { border-left-color: var(--granate); background: var(--rojo-fondo); }
.ordena-partes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.parte { border: 1px dashed var(--tinta-2); min-height: 9rem; display: grid; grid-template-rows: auto 1fr; }
.parte-cab { all: unset; cursor: pointer; display: grid; padding: .8rem 1rem; background: var(--vitela); border-bottom: 1px solid var(--filete); }
.parte-cab:hover { background: var(--vitela-2); }
.parte-cab:focus-visible { outline: 2px solid var(--granate); outline-offset: -2px; }
.parte-cab b { font-family: var(--display); font-weight: 450; }
.parte-cab small { color: var(--tinta-2); font-size: var(--t--2); }
.parte-cesta { list-style: none; margin: 0; padding: .7rem; display: grid; gap: .5rem; align-content: start; }
.parte-cesta .hecho { max-width: none; }
.ej-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1rem; }
.ej-res { margin: 0; font-style: italic; color: var(--granate); }

.parejas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem 1.6rem; margin-top: 1.4rem; }
.parejas-col { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start; }
.pieza { all: unset; cursor: pointer; box-sizing: border-box; display: block; width: 100%; padding: .7rem .9rem; border: 1px solid var(--filete); background: var(--papel); font-size: .98rem; line-height: 1.4; transition: background .2s, border-color .2s, opacity .3s; }
[data-col="a"] .pieza { font-family: var(--display); font-weight: 420; }
.pieza:hover { border-color: var(--granate); }
.pieza:focus-visible { outline: 2px solid var(--granate); outline-offset: 2px; }
.pieza.elegido { background: var(--granate); color: var(--papel); border-color: var(--granate); }
.pieza.unida { background: var(--verde-fondo); border-color: var(--verde-borde); cursor: default; }
.pieza.unida::before { content: attr(data-par) " · "; color: var(--verde); font-weight: 600; }
.pieza.error { animation: tiembla .4s; border-color: var(--granate); }
.explica { font-size: .9rem; color: var(--tinta-2); margin: .3rem 0 0 .9rem; font-style: italic; }
@keyframes tiembla { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 640px) { .parejas { grid-template-columns: 1fr 1fr; gap: .6rem; } .pieza { font-size: .9rem; padding: .55rem .65rem; } }

.test { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1.6rem; }
.test-enunciado { font-weight: 600; }
.test-opciones { display: grid; gap: .5rem; }
.opcion { all: unset; cursor: pointer; padding: .6rem .9rem; border: 1px solid var(--filete); }
.opcion.bien { background: var(--verde-fondo); border-color: var(--verde-borde); }
.opcion.mal { background: var(--rojo-fondo); border-color: var(--granate); }
.test-explica { font-style: italic; color: var(--tinta-2); margin-top: .5rem; }

.tarjetas { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.tarjeta { all: unset; cursor: pointer; display: grid; width: 100%; min-height: 8.5rem; perspective: 900px; }
.tarjeta-cara, .tarjeta-dorso { grid-area: 1 / 1; display: grid; place-items: center; text-align: center; padding: 1rem; backface-visibility: hidden; transition: transform .6s cubic-bezier(.2,.7,.2,1); border: 1px solid var(--filete); }
.tarjeta-cara { font: italic 500 1.3rem/1.2 var(--serif); color: var(--granate); background: var(--vitela); }
.tarjeta-dorso { transform: rotateY(180deg); font-size: .95rem; line-height: 1.4; background: var(--papel); }
.tarjeta[aria-pressed="true"] .tarjeta-cara { transform: rotateY(-180deg); }
.tarjeta[aria-pressed="true"] .tarjeta-dorso { transform: rotateY(0); }
.tarjeta:focus-visible { outline: 2px solid var(--granate); outline-offset: 3px; }

.pregunta { margin-top: 1.6rem; padding: 1.3rem 1.4rem; border: 1px solid var(--filete); background: var(--papel); }
.pregunta h3 { font-size: 1.18rem; margin-bottom: .8rem; }
.pregunta textarea { width: 100%; font: inherit; font-size: 1rem; line-height: 1.5; padding: .8rem; border: 1px solid var(--filete); background: var(--campo); resize: vertical; }
.pregunta textarea:focus { outline: 2px solid var(--granate); outline-offset: 0; }
.pautas { margin-top: .8rem; }
.pautas summary, .paso summary { cursor: pointer; color: var(--granate); font-family: var(--display); padding: .4rem 0; }
.pautas ul { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .5rem; }
.pautas label { display: flex; gap: .6rem; align-items: baseline; font-size: .98rem; line-height: 1.45; cursor: pointer; }
.pautas input { accent-color: var(--verde); flex: none; }
.pauta-nota { margin: .6rem 0 0; font-style: italic; color: var(--verde); }

.cu-fragmento { margin: 1.2rem 0; padding: 1.4rem 1.6rem; background: var(--vitela); border-left: 3px solid var(--granate); font-size: 1.06rem; }
.cu-fragmento p { margin: 0 0 .5em; }
.cu-fragmento .pers { font-variant-caps: small-caps; letter-spacing: .04em; color: var(--granate); }
.paso { border-top: 1px solid var(--filete); padding: .4rem 0; }
.paso .rombos { margin: .6rem 0 .8rem; }
.paso--modelo summary { font-weight: 600; }
.modelo { padding: .8rem 0 1rem; max-width: 42em; }

.metodo { list-style: none; counter-reset: paso; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.4rem; }
.metodo li { counter-increment: paso; display: grid; gap: .3rem; padding-top: .9rem; border-top: 2px solid var(--granate); font-size: .98rem; line-height: 1.45; }
.metodo li::before { content: counter(paso); font: 300 2.2rem/1 var(--display); color: var(--oro-tinta); }
.metodo b { font-family: var(--display); font-weight: 450; }
.taller { margin-top: 1.4rem; }
.taller h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.linea { list-style: none; margin: 1.2rem 0 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--oro); display: grid; gap: 1rem; }
.linea li { position: relative; display: grid; gap: .15rem; }
.linea li::before { content: ""; position: absolute; left: calc(-1.2rem - 6px); top: .45em; width: 10px; height: 10px; background: var(--granate); border-radius: 50%; }
.linea b { font-family: var(--display); font-weight: 450; font-variant-numeric: lining-nums; }

.cu-cierre { margin-top: 2.6rem; padding: clamp(1.5rem, 4vw, 2.4rem); background: var(--granate-fijo); color: var(--papel-fijo); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.4rem;
  box-shadow: inset 0 0 0 6px var(--granate-fijo), inset 0 0 0 7px color-mix(in srgb, var(--oro) 70%, transparent); }
.cu-cierre h2 { color: var(--papel-fijo); }
.cu-cierre p { color: #F1E3E1; margin: .6rem 0 0; max-width: 34em; }

.descarga { border: 0; padding: 2rem 2.2rem; max-width: min(34rem, calc(100vw - 2rem)); background: var(--papel); color: var(--tinta); border-top: 4px solid var(--granate); box-shadow: 0 30px 80px -20px rgba(34,28,24,.5); }
.descarga::backdrop { background: rgba(34, 28, 24, .45); }
.descarga h2 { margin-bottom: .6rem; }
.descarga > p { color: var(--tinta-2); }
.descarga-cerrar { position: absolute; top: .6rem; right: .8rem; }
.descarga-cerrar button { all: unset; cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--tinta-2); padding: .2rem .4rem; }
.boletin-form--modal { grid-template-columns: 1fr; margin-top: 1rem; }
.descarga-directa { margin: 1rem 0 0; font-size: var(--t--1); }


/* ── Ajustes del modo oscuro y selector de tema ─────────── */
.tema { all: unset; cursor: pointer; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--tinta-2); margin-left: .4rem; flex: none; }
.tema:hover { color: var(--granate); background: var(--vitela); }
.tema:focus-visible { outline: 2px solid var(--granate); outline-offset: 2px; }
.tema svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tema [data-icono] { display: none; }
.tema[data-modo="auto"] [data-icono="auto"], .tema[data-modo="claro"] [data-icono="claro"], .tema[data-modo="oscuro"] [data-icono="oscuro"] { display: block; }
.cabecera-der { display: flex; align-items: center; gap: .4rem; }
@media (max-width: 720px) { .cabecera-der { width: 100%; } .cabecera-der .nav { flex: 1; } }
.marca img, .pie-sello img { transition: filter .3s; }
html[data-oscuro] .marca img, html[data-oscuro] .pie-sello img { filter: brightness(1.9) saturate(.8); }
html[data-oscuro] .boton { background: #8C2238; border-color: #8C2238; color: var(--papel-fijo); }
html[data-oscuro] .boton:hover { background: #A52B45; border-color: #A52B45; color: var(--papel-fijo); }
html[data-oscuro] .boton--borde, html[data-oscuro] .boton--inactivo, html[data-oscuro] .boton--oro, html[data-oscuro] .boton--claro { background: transparent; }
html[data-oscuro] .boton--oro-lleno { background: var(--oro-luz); border-color: var(--oro-luz); }
html[data-oscuro] .boton--borde, html[data-oscuro] .boton--inactivo { color: var(--granate); }
html[data-oscuro] .boton--oro, html[data-oscuro] .boton--claro { color: var(--oro-luz); }
html[data-oscuro] .boton--claro { color: var(--papel-fijo); }
html[data-oscuro] .boton--oro-lleno { color: #3A0A15; }
html[data-oscuro] .cuaderno-aviso .boton { color: var(--granate-fijo); }
html[data-oscuro] .hecho.elegido, html[data-oscuro] .pieza.elegido, html[data-oscuro] .chip input:checked + span { color: #16100E; }
html[data-oscuro] .sociograma { background: #F7F2EA; }
html[data-oscuro] .escaparate { background: var(--estrellas), radial-gradient(120% 120% at 85% 20%, #5E1426 0%, #3E0B17 45%, #1A070C 100%); }
html[data-oscuro] .folio, html[data-oscuro] .cubierta, html[data-oscuro] .libro picture, html[data-oscuro] .ficha-mini picture { box-shadow: 0 1px 0 var(--filete), 0 24px 48px -24px rgba(0,0,0,.7); }
html[data-oscuro] .en-preparacion picture { opacity: .4; }
.pagina-cielo .tema { color: var(--cielo-tinta, var(--papel)); }
.pagina-cielo .tema:hover { background: color-mix(in srgb, var(--cielo-tinta, #FDFBF7) 12%, transparent); color: var(--cielo-acento); }

/* Horizonte: el cielo se funde con el papel en vez de cortar en seco. */
.firmamento { padding-bottom: clamp(7rem, 14vh, 11rem); }
.firmamento::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(7rem, 14vh, 11rem); pointer-events: none;
  background: linear-gradient(180deg, var(--cielo-horizonte, #2A1219) 0%, color-mix(in srgb, var(--cielo-horizonte, #2A1219) 55%, var(--papel)) 55%, var(--papel) 100%);
}
.conversaciones { padding-top: clamp(1rem, 3vw, 2rem); }

/* ═══ Cuaderno didáctico v2 ═══════════════════════════════ */
.icono { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icono--grande { width: 2.4rem; height: 2.4rem; color: var(--granate); }
.icono--simbolo { width: 3.2rem; height: 3.2rem; color: var(--oro-tinta); stroke-width: 1.3; }
.mini-nivel { display: inline-block; font: 600 .68rem/1 var(--display); letter-spacing: .04em; padding: .25em .55em; border-radius: 999px; background: var(--vitela-2); color: var(--granate); vertical-align: .15em; margin-right: .3rem; }
.migas--claro, .migas--claro a { color: #E8CFC9; }

.c2-portada { color: var(--papel-fijo); background: var(--estrellas, none), radial-gradient(120% 140% at 85% 0%, #8C2238 0%, #6B1426 40%, #3E0B17 100%);
  --estrellas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='%23E2C27A' fill-opacity='.10'%3E%3Cpath id='e' d='M30 18l1.6 6.4 4.6-4.6-4.6 4.6L38 26l-6.4 1.6 4.6 4.6-4.6-4.6L30 34l-1.6-6.4-4.6 4.6 4.6-4.6L22 26l6.4-1.6-4.6-4.6 4.6 4.6z'/%3E%3Cuse href='%23e' x='60' y='52'/%3E%3C/g%3E%3C/svg%3E");
  padding: 0 max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))) 0; }
.c2-portada .migas { padding: 1.2rem 0 0; max-width: none; }
.c2-portada-grid { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: 2rem 0 2.4rem; }
.c2-cubierta { width: 12rem; box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 34px 50px -22px rgba(0,0,0,.7); transform: rotate(-2deg); }
.c2-sig { font: 500 var(--t--1)/1 var(--display); color: var(--oro-luz); margin-bottom: .6rem; }
.c2-portada h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); font-weight: 320; font-variation-settings: "opsz" 144; color: var(--papel-fijo); }
.c2-portada h1 cite { font-style: normal; }
.c2-autor { font: italic 1.3rem/1.3 var(--serif); color: #F1DED9; margin: .5rem 0 0; }
.c2-gancho { font: italic 400 1.35rem/1.4 var(--serif); margin: 1.2rem 0 1.4rem; max-width: 30em; }
.c2-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: 0; }
.c2-datos div { border-top: 1px solid color-mix(in srgb, var(--oro-luz) 60%, transparent); padding-top: .55rem; }
.c2-datos dt { font: 500 var(--t--2)/1.2 var(--display); color: var(--oro-luz); }
.c2-datos dd { margin: .2rem 0 0; font-size: 1rem; line-height: 1.35; }
.c2-hoy { border-top: 1px solid rgba(253,251,247,.18); padding: 1.1rem 0 1.4rem; font-size: 1.05rem; color: #F1DED9; max-width: 60rem; }
.c2-hoy span { font: 500 var(--t--1)/1 var(--display); color: var(--oro-luz); margin-right: .4rem; }
@media (max-width: 700px) { .c2-portada-grid { grid-template-columns: 1fr; } .c2-cubierta { width: 8rem; } }

.c2-barra { position: sticky; top: 0; z-index: 6; background: color-mix(in srgb, var(--papel) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--filete); }
.c2-barra-in { max-width: var(--ancho); margin: 0 auto; padding: .7rem var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.nivel { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: .35rem; }
.nivel legend { float: left; font-size: var(--t--2); color: var(--tinta-2); margin-right: .4rem; }
.c2-progreso { display: flex; align-items: center; gap: .6rem; font-size: var(--t--1); color: var(--tinta-2); flex: 1; min-width: 14rem; }
.c2-progreso .cu-barra { flex: 1; margin: 0; max-width: 14rem; }
.c2-medalla { color: var(--oro-tinta); display: grid; }
.c2-acciones { margin-left: auto; }

.c2 { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter) 4rem; }
.c2-sec { padding: clamp(2.4rem, 5vw, 3.6rem) 0; border-bottom: 1px solid var(--filete); scroll-margin-top: 5rem; }
.c2-sec > h2 { margin-bottom: 1rem; }
.c2-intro { color: var(--tinta-2); max-width: 42em; }
.c2-sub { font-size: 1.3rem; margin: 2.2rem 0 .4rem; }
.c2-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .7rem 2rem; }
.c2-checks li { position: relative; padding-left: 2rem; line-height: 1.45; }
.c2-checks li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.25rem; height: 1.25rem; border: 1.5px solid var(--oro); border-radius: 50%;
  background: radial-gradient(circle, var(--oro) 0 28%, transparent 30%); }

.linea-t { list-style: none; margin: 1.8rem 0 .6rem; padding: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.6rem 0; position: relative; }
.hito { position: relative; padding: 2.2rem 1rem 0 0; scroll-snap-align: start; border-top: 2px solid var(--filete); }
.hito::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--papel); border: 3px solid var(--tinta-2); }
.hito--autor::before { border-color: var(--granate); } .hito--obra::before { border-color: var(--oro); background: var(--oro); } .hito--historia::before { border-color: var(--tinta-2); }
.hito-anio { position: absolute; top: .7rem; left: 0; font: 420 1.15rem/1 var(--display); font-variant-numeric: lining-nums; }
.hito-txt { display: block; font-size: .95rem; line-height: 1.4; color: var(--tinta-2); }
.leyenda { display: flex; gap: 1.2rem; font-size: var(--t--2); color: var(--tinta-2); margin: 0 0 1.6rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.leyenda span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--tinta-2); }
.leyenda .hito--autor::before { border-color: var(--granate); } .leyenda .hito--obra::before { border-color: var(--oro); background: var(--oro); }
.c2-claves { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.c2-claves article { background: var(--vitela); padding: 1.1rem 1.3rem; border-left: 3px solid var(--oro); }
.c2-claves h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.c2-claves p { margin: 0; font-size: .98rem; line-height: 1.45; }

.escenas { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; counter-reset: esc; }
.escena { counter-increment: esc; position: relative; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--filete); min-height: 12rem; }
.escena::after { content: counter(esc); position: absolute; right: .9rem; top: .4rem; font: 300 2.6rem/1 var(--display); opacity: .35; }
.escena--0 { background: var(--papel); }
.escena--1 { background: var(--vitela); }
.escena--2 { background: #2A1D19; color: #EEE6DA; border-color: #2A1D19; }
.escena--3 { background: #160F0D; color: #EEE6DA; border-color: #160F0D; }
.escena--2 p, .escena--3 p { color: #CFC3B4; }
.escena-parte { font: 500 var(--t--2)/1 var(--display); color: var(--oro-tinta); }
.escena--2 .escena-parte, .escena--3 .escena-parte { color: var(--oro-luz); }
.escena h3 { font-size: 1.12rem; margin: .5rem 0 .4rem; padding-right: 2rem; }
.escena p { margin: 0; font-size: .96rem; line-height: 1.45; color: var(--tinta-2); }

.fichas-p { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.ficha-p { position: relative; padding: 1.2rem 1.2rem 1rem 4.6rem; border: 1px solid var(--filete); background: var(--papel); min-height: 9rem; }
.ficha-p--principal { border-top: 3px solid var(--granate); }
.monograma { position: absolute; left: 1rem; top: 1.1rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center;
  font: 400 1.5rem/1 var(--display); color: var(--papel-fijo); background: var(--granate-fijo); box-shadow: inset 0 0 0 2px var(--granate-fijo), inset 0 0 0 3.5px var(--oro); }
.ficha-p h3 { font-size: 1.15rem; }
.ficha-p-rol { font-size: var(--t--2); color: var(--oro-tinta); margin: .15rem 0 .5rem; }
.ficha-p p { font-size: .96rem; line-height: 1.42; margin: 0 0 .5rem; }
.ficha-p blockquote { margin: 0; font-style: italic; font-size: .95rem; color: var(--granate); }
.mapa-caja { margin-top: 1rem; border: 1px solid var(--filete); background: var(--vitela); padding: 1rem; overflow-x: auto; }
.mapa-rel { width: 100%; min-width: 34rem; height: auto; display: block; }
.mapa-rel .rel { fill: none; stroke: var(--tinta-2); opacity: .45; transition: opacity .25s, stroke .25s; }
.mapa-rel .rel-txt { font: italic 12.5px var(--serif); fill: var(--tinta-2); text-anchor: middle; opacity: .0; transition: opacity .25s; paint-order: stroke; stroke: var(--vitela); stroke-width: 4px; }
.mapa-rel .nodo rect { fill: var(--papel); stroke: var(--granate); stroke-width: 1.3; transition: fill .2s; }
.mapa-rel .nodo text { font: 420 15px var(--display); fill: var(--tinta); text-anchor: middle; }
.mapa-rel .nodo--centro rect { fill: var(--granate-fijo); stroke: var(--oro); stroke-width: 2; }
.mapa-rel .nodo--centro text { fill: var(--papel-fijo); }
.mapa-rel .nodo { cursor: pointer; transition: opacity .25s; outline: none; }
.mapa-rel.con-foco .nodo:not(.activo) { opacity: .3; }
.mapa-rel.con-foco .rel { opacity: .08; }
.mapa-rel .rel.activa { opacity: 1; stroke: var(--granate); }
.mapa-rel .rel-txt.activa { opacity: 1; fill: var(--granate); }
.mapa-rel:not(.con-foco) .rel-txt { opacity: .7; }

.temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.4rem; margin-top: 1.2rem; }
.tema-c { padding: 1.4rem; border: 1px solid var(--filete); background: var(--papel); display: grid; align-content: start; gap: .7rem; }
.tema-c-cab { display: flex; align-items: center; gap: .9rem; }
.tema-c h3 { font-size: 1.2rem; line-height: 1.2; }
.tema-c p { margin: 0; line-height: 1.5; font-size: 1rem; }
.tema-c blockquote { margin: 0; padding: .6rem .9rem; background: var(--vitela); border-left: 3px solid var(--granate); font-style: italic; font-size: .98rem; }
.tema-c blockquote cite { display: block; font-style: normal; font-size: var(--t--2); color: var(--tinta-2); margin-top: .3rem; }
.tema-hoy { font-size: .95rem !important; color: var(--tinta-2); }
.tema-hoy b { color: var(--oro-tinta); font-family: var(--display); font-weight: 500; }

.simbolos { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.simbolo { all: unset; cursor: pointer; display: grid; width: 100%; min-height: 13rem; perspective: 1000px; }
.simbolo-cara, .simbolo-dorso { grid-area: 1/1; display: grid; place-items: center; align-content: center; gap: .8rem; text-align: center; padding: 1.2rem; backface-visibility: hidden; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.simbolo-cara { background: var(--granate-fijo); color: var(--papel-fijo); box-shadow: inset 0 0 0 5px var(--granate-fijo), inset 0 0 0 6px color-mix(in srgb, var(--oro) 70%, transparent); }
.simbolo-cara .icono--simbolo { color: var(--oro-luz); }
.simbolo-cara b { font: 400 1.2rem/1.2 var(--display); }
.simbolo-dorso { transform: rotateY(180deg); background: var(--vitela); border: 1px solid var(--filete); font-size: .95rem; line-height: 1.42; }
.simbolo-dorso i { color: var(--granate); font-size: .9rem; }
.simbolo[aria-pressed="true"] .simbolo-cara { transform: rotateY(-180deg); }
.simbolo[aria-pressed="true"] .simbolo-dorso { transform: rotateY(0); }
.simbolo:focus-visible { outline: 2px solid var(--granate); outline-offset: 3px; }

.forma { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 2rem; margin: 1rem 0 0; }
.forma div { padding: .9rem 0; border-top: 1px solid var(--filete); }
.forma dt { font: 450 1.08rem/1.2 var(--display); color: var(--granate); margin-bottom: .3rem; }
.forma dd { margin: 0; font-size: .98rem; line-height: 1.45; }

.c2-practica { display: grid; gap: 1.6rem; }
.reto { border: 1px solid var(--filete); background: var(--papel); padding: clamp(1.2rem, 3vw, 1.8rem); }
.reto header { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.reto h3 { font-size: 1.3rem; }
.reto-nivel { font: 600 .72rem/1 var(--display); padding: .35em .7em; border-radius: 999px; background: var(--oro); color: #2A1E0A; }
.orden { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; counter-reset: ord; }
.orden-item { counter-increment: ord; display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; border: 1px solid var(--filete); background: var(--vitela); cursor: grab; transition: background .2s, border-color .2s, transform .2s; }
.orden-item::before { content: counter(ord); font: 420 1.1rem/1 var(--display); color: var(--oro-tinta); width: 1.4rem; text-align: center; }
.orden-item.arrastrando { opacity: .5; }
.orden-item.bien { border-color: var(--verde-borde); background: var(--verde-fondo); }
.orden-item.mal { border-color: var(--granate); background: var(--rojo-fondo); }
.orden-asa { color: var(--tinta-2); letter-spacing: -2px; }
.orden-txt { flex: 1; }
.orden-txt b { font-family: var(--display); font-weight: 420; }
.orden-flechas { display: flex; gap: .2rem; }
.orden-flechas button { all: unset; cursor: pointer; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--granate); }
.orden-flechas button:hover { background: var(--vitela-2); }
.orden-flechas button:focus-visible { outline: 2px solid var(--granate); }
.quien { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.quien-item blockquote { margin: 0 0 .5rem; font: italic 1.12rem/1.4 var(--serif); }
.quien-ops { display: flex; flex-wrap: wrap; gap: .4rem; }
.quien-ops button { all: unset; cursor: pointer; font-size: var(--t--1); padding: .35em .8em; border: 1px solid var(--filete); border-radius: 999px; transition: background .2s; }
.quien-ops button:hover:not(:disabled) { border-color: var(--granate); color: var(--granate); }
.quien-ops button.bien { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde); }
.quien-ops button.mal { background: var(--rojo-fondo); text-decoration: line-through; opacity: .7; }
.quien-ops button:disabled:not(.bien) { opacity: .45; cursor: default; }
.c2-situacion { background: var(--vitela); padding: .8rem 1rem; max-width: 46em; }
.preg-guia { padding-left: 1.4rem; display: grid; gap: .5rem; max-width: 46em; }
.crea { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.crea article { padding: 1.2rem 1.3rem; border: 1px dashed var(--oro); background: var(--papel); }
.crea h3 { font-size: 1.15rem; margin: .4rem 0; }
.crea p { margin: 0; font-size: .98rem; line-height: 1.45; }
.debate { padding-left: 1.2rem; display: grid; gap: .4rem; }
.chuleta { background: var(--vitela); padding: clamp(1.4rem, 4vw, 2.4rem); border-top: 4px solid var(--granate); box-shadow: 0 20px 40px -30px rgba(80,20,30,.5); max-width: 52rem; margin: 0 auto; transform: rotate(-.4deg); }
.chuleta h2 { margin-bottom: 1rem; }
.chuleta ol { margin: 0; padding-left: 1.6rem; columns: 2 20rem; column-gap: 2.4rem; }
.chuleta li { break-inside: avoid; margin-bottom: .55rem; line-height: 1.45; }
.chuleta li::marker { font-family: var(--display); color: var(--granate); }
.c2-profe { text-align: center; color: var(--tinta-2); font-size: var(--t--1); margin-top: 1.6rem; }

/* ── Guía del profesor ── */
.prof-cab { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--gutter) 1rem; }
.prof-cab h1 { font-size: var(--t-3); font-weight: 330; font-variation-settings: "opsz" 144; }
.prof-cab h1 cite { font-style: normal; }
.prof { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter) 4rem; }
.prof h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.prof-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem 3rem; }
.sesiones { padding: 0; list-style: none; display: grid; gap: .7rem; }
.sesiones li { display: grid; gap: .15rem; padding-left: .9rem; border-left: 2px solid var(--oro); }
.sesiones b { font-family: var(--display); font-weight: 450; }
.errores { list-style: none; padding: 0; display: grid; gap: .4rem; }
.errores li { padding-left: 1.6rem; position: relative; }
.errores li::before { content: "✕"; position: absolute; left: 0; color: var(--granate); font-weight: 700; }
.prof-nota { color: var(--tinta-2); font-size: .95rem; }
.prof-preg { padding: .8rem 0; border-top: 1px solid var(--filete); }
.tabla-caja { overflow-x: auto; }
.rubrica { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: .93rem; line-height: 1.38; }
.rubrica th, .rubrica td { border: 1px solid var(--filete); padding: .6rem .7rem; vertical-align: top; text-align: left; }
.rubrica thead th { background: var(--granate-fijo); color: var(--papel-fijo); font: 450 .9rem/1.2 var(--display); }
.rubrica tbody th { background: var(--vitela); font-family: var(--display); font-weight: 450; }
.evaluacion { display: grid; gap: .8rem; padding-left: 1.4rem; }
.evaluacion li { display: grid; gap: .2rem; }
.evaluacion span { color: var(--tinta-2); font-style: italic; }
@media print {
  .cabecera, .pie, .migas, .cu-cab-botones, .c2-barra, .tema { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .c2-sec { break-inside: avoid-page; padding: 1rem 0; }
}

/* ── Páginas de prosa (editorial, docentes, legales…) ── */
.prosa-cab { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 1.5rem; }
.prosa-cab h1 { font-size: var(--t-3); font-weight: 330; font-variation-settings: "opsz" 144; max-width: 16em; }
.prosa-entrada { font-size: 1.3rem; line-height: 1.5; color: var(--tinta-2); max-width: 34em; margin-top: 1.2rem; }
.prosa { max-width: calc(38em + 2 * var(--gutter)); margin: 0 auto 0 max(0px, calc((100vw - var(--ancho)) / 2)); padding: 1rem var(--gutter) 4rem; }
.prosa h2 { font-size: 1.6rem; margin: 2.4rem 0 .8rem; }
.prosa p, .prosa li { line-height: 1.65; }
.prosa ul { padding-left: 1.2rem; }
.pagina-legal .prosa h2 { font-size: 1.3rem; }
.prosa-cifras { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter) 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.prosa-cifras div { border-top: 2px solid var(--granate); padding-top: .7rem; display: grid; }
.prosa-cifras b { font: 300 2.8rem/1 var(--display); color: var(--granate); font-variant-numeric: lining-nums; }
.prosa-cifras span { color: var(--tinta-2); font-size: var(--t--1); margin-top: .3rem; }
.editor { display: grid; grid-template-columns: 6rem 1fr; gap: 1.4rem; align-items: start; background: var(--vitela); padding: 1.3rem 1.4rem; border-left: 3px solid var(--oro); }
.editor img { width: 6rem; }
.editor p { margin: 0; }
.kit { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter) 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.2rem; }
.kit article { border: 1px solid var(--filete); border-top: 3px solid var(--granate); padding: 1.3rem 1.4rem; background: var(--papel); }
.kit h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.kit p { font-size: 1rem; line-height: 1.5; }
.kit-nota { color: var(--tinta-2); font-size: var(--t--1) !important; font-style: italic; }
.guias { padding-left: 1.2rem; }
.glosario { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--gutter) 4rem; columns: 2 24rem; column-gap: 3rem; }
.glosario div { break-inside: avoid; padding: .6rem 0; border-bottom: 1px solid var(--filete); }
.glosario dt { font: italic 500 1.12rem/1.3 var(--serif); color: var(--granate); }
.glosario dd { margin: .15rem 0 0; font-size: .98rem; line-height: 1.45; }
.glosario dd a { font-size: var(--t--2); color: var(--oro-tinta); font-style: italic; margin-left: .3rem; }
.campo--linea { display: flex; align-items: center; gap: .6rem; }
.contacto { max-width: calc(38em + 2 * var(--gutter)); margin: 0 auto 4rem max(0px, calc((100vw - var(--ancho)) / 2)); padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.contacto .campo--ancho { grid-column: 1 / -1; }
.contacto textarea { font: inherit; font-size: 1.02rem; padding: .7rem; border: 1px solid var(--filete); background: var(--campo); color: var(--tinta); resize: vertical; }
.contacto .boton { justify-self: start; }
@media (max-width: 640px) { .contacto { grid-template-columns: 1fr; } }
.error-num { font: 300 clamp(6rem, 4rem + 10vw, 12rem)/.9 var(--display); color: var(--oro); margin: 0; }