/* Freefus. Direccion en DESIGN.md: manual de aventurero, pergamino y tinta. */
:root {
  color-scheme: light dark;
  --pergamino: light-dark(#e9dfc4, #1d1812);
  --pergamino-hondo: light-dark(#dccfae, #28211a);
  --tinta: light-dark(#2b2118, #eadfc6);
  --tinta-suave: light-dark(#5f4f3c, #b3a282);
  --ocre: light-dark(#b8741a, #d9973a);            /* acento: lineas, marcas, fondos */
  --ocre-texto: light-dark(#7d4a0c, #e0a24a);      /* ocre para letra: AA sobre ambos papeles */
  --ocre-boton: light-dark(#97590f, #e0a24a);
  --sobre-ocre: light-dark(#fbf4e2, #1d1812);
  --noche: light-dark(#15120e, #0d0b08);
  --sombra: light-dark(#2b2118, #000);
  --sombra-lamina: light-dark(rgba(43, 33, 24, .12), rgba(0, 0, 0, .35));
  --velo: light-dark(transparent, rgba(24, 19, 13, .9)); /* oscurece la textura del papel */
  --azul-juego: rgba(30, 144, 255, .62);
  --ocre-juego: rgba(200, 176, 90, .78);
  --titulo: "IM Fell English", Georgia, serif;
  --versal: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --texto: "Alegreya", Georgia, serif;
  --versalitas: "Alegreya Sans SC", "Alegreya", sans-serif;
  --ancho: 1200px;
  --linea: color-mix(in srgb, var(--tinta) 25%, transparent);
}
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="oscuro"] { color-scheme: dark; }
@supports not (color: light-dark(#000, #fff)) { /* sin light-dark(): solo claro */
  :root {
    --pergamino: #e9dfc4; --pergamino-hondo: #dccfae; --tinta: #2b2118; --tinta-suave: #5f4f3c;
    --ocre: #b8741a; --ocre-texto: #7d4a0c; --ocre-boton: #97590f; --sobre-ocre: #fbf4e2; --noche: #15120e;
    --sombra: #2b2118; --sombra-lamina: rgba(43, 33, 24, .12); --velo: transparent;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; } /* el menu fijo no tapa foco ni anclas (WCAG 2.4.11) */
html:has(.visor[open]) { overflow: hidden; } /* con el visor abierto la pagina no se desplaza */
html, body { overflow-x: clip; } /* la sombra del menu fijo sale 100vmax a los lados */
body {
  margin: 0; color: var(--tinta); font: 400 1.125rem/1.6 var(--texto);
  background-color: var(--pergamino);
  /* Fibra del papel (textura PNG de 256 px, barata de pintar) + bordes tostados; en oscuro, velo */
  background-image: linear-gradient(var(--velo), var(--velo)), radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(120, 90, 40, .12)), url("../img/papel.png");
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; margin: 0; line-height: 1.12; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); letter-spacing: -.01em; }
h1 em { color: var(--ocre-texto); }
h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
::selection { background: var(--ocre); color: var(--pergamino); }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
.saltar { /* WCAG 2.4.1: saltar el menu */
  position: fixed; left: 1rem; top: -4rem; z-index: 40; padding: .7rem 1rem; border-radius: 3px;
  background: var(--tinta); color: var(--pergamino); text-decoration: none; transition: top .2s;
  &:focus { top: 1rem; }
}

/* Piezas tipograficas del libro */
.folio { font: 400 1rem/1 var(--versal); color: var(--ocre-texto); letter-spacing: .04em; }
.folio::before { content: "§ "; color: var(--tinta-suave); }
.folio--pie { position: absolute; bottom: 1.1rem; font-style: italic; font-family: var(--titulo); color: var(--tinta-suave); }
.folio--pie::before { content: none; }
.al-margen { font-style: italic; font-size: .98rem; color: var(--tinta-suave); padding-left: 1rem; border-left: 2px solid rgba(184, 116, 26, .5); }
.capitular::first-letter {
  float: left; font: 400 4.4em/.78 var(--titulo); color: var(--ocre-texto); margin: .08em .1em 0 0;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--sombra) 20%, transparent);
}
.fleuron { font-size: 2rem; color: var(--ocre); line-height: 1; }

/* Menu */
.menu {
  max-width: var(--ancho); margin: 0 auto; padding: 1.4rem clamp(1rem, 4vw, 2rem) 1rem;
  display: flex; align-items: center; gap: 2rem; border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 20; background: var(--pergamino);
  box-shadow: 0 0 0 100vmax var(--pergamino); clip-path: inset(0 -100vmax -30px);
  transition: padding .3s ease;
}
.menu.plegado { padding-block: .7rem .6rem; }
.menu.plegado::after { content: ""; position: absolute; inset: 100% -100vmax auto; height: 14px; background: linear-gradient(color-mix(in srgb, var(--sombra) 14%, transparent), transparent); pointer-events: none; }
.menu__marca img { transition: rotate .6s cubic-bezier(.3, 1.6, .5, 1); }
.menu__marca:hover img { rotate: 20deg; }
.menu__marca { display: flex; align-items: center; gap: .55rem; font: 400 1.6rem/1 var(--titulo); text-decoration: none; }
.menu__enlaces { display: flex; gap: 1.4rem; margin-left: auto; font-size: 1rem; }
.menu__enlaces a { text-decoration: none; color: var(--tinta-suave); padding: .2rem 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.menu__enlaces a:hover, .menu__enlaces a.activo { color: var(--tinta); border-bottom-color: var(--ocre); }
.menu__enlaces a[data-pendiente] { font-style: italic; } /* antes atenuado: no llegaba a 4.5:1 */
.menu__abrir { display: none; margin-left: auto; font: 500 1rem var(--texto); background: none; border: 1px solid var(--tinta-suave); border-radius: 3px; padding: .35rem .8rem; cursor: pointer; }

/* Botones */
.boton {
  display: inline-block; padding: .8rem 1.5rem; text-decoration: none; font: 500 1.05rem/1 var(--texto);
  color: var(--sobre-ocre); background: var(--ocre-boton); border: 0; border-radius: 3px; cursor: pointer;
  min-height: 44px; /* zona tactil comoda (WCAG 2.5.8 pide al menos 24 px) */
  box-shadow: 0 1px 0 #6a410d, 0 3px 0 #4f300a; transition: transform .15s, box-shadow .15s, background .2s;
}
.boton:hover { background: light-dark(#84500d, #eab25e); }
.boton:active { transform: translateY(2px); box-shadow: 0 1px 0 #6a410d; }
.boton--claro { color: var(--tinta); min-height: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--tinta); }
.boton--claro:hover { background: rgba(184, 116, 26, .12); }
.boton--claro:active { box-shadow: inset 0 0 0 1px var(--tinta); }
.enlace { text-decoration: underline; text-decoration-color: var(--ocre); text-underline-offset: 4px; }
.enlace:hover { text-decoration-thickness: 2px; }

/* Lamina enmarcada */
.lamina { margin: 0; }
.lamina__marco {
  position: relative; background: var(--noche); padding: 7px; border: 1px solid var(--tinta);
  box-shadow: 0 0 0 4px var(--pergamino), 0 0 0 5px color-mix(in srgb, var(--tinta) 55%, transparent), 6px 8px 0 5px var(--sombra-lamina);
  overflow: hidden;
}
.lamina__marco > img:first-child { width: 100%; }
.lamina figcaption { margin-top: .8rem; font-style: italic; font-size: .95rem; color: var(--tinta-suave); }

/* Portada: libro abierto */
.libro {
  max-width: var(--ancho); margin: clamp(1.5rem, 4vw, 3rem) auto clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: 1fr 1.15fr; position: relative;
  background: linear-gradient(90deg, light-dark(#efe6cd, #262019) 0%, light-dark(#eadfc3, #241e17) 46%, light-dark(#d9cba6, #18140f) 49.6%, light-dark(#c9b88f, #0f0d0a) 50%, light-dark(#d9cba6, #18140f) 50.4%, light-dark(#eadfc3, #241e17) 54%, light-dark(#efe6cd, #262019) 100%);
  border-radius: 6px 6px 4px 4px;
  box-shadow: 0 2px 0 light-dark(#cdbb93, #3a3024), 0 4px 0 light-dark(#bba77c, #30271d), 0 6px 0 light-dark(#ad986d, #261f17), 0 26px 50px -24px color-mix(in srgb, var(--sombra) 55%, transparent);
}
.libro::before { /* esquinas ornamentadas */
  content: ""; position: absolute; inset: 14px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent);
  background:
    linear-gradient(var(--ocre), var(--ocre)) top left / 26px 2px no-repeat,
    linear-gradient(var(--ocre), var(--ocre)) top left / 2px 26px no-repeat,
    linear-gradient(var(--ocre), var(--ocre)) top right / 26px 2px no-repeat,
    linear-gradient(var(--ocre), var(--ocre)) top right / 2px 26px no-repeat,
    linear-gradient(var(--ocre), var(--ocre)) bottom left / 26px 2px no-repeat,
    linear-gradient(var(--ocre), var(--ocre)) bottom left / 2px 26px no-repeat,
    linear-gradient(var(--ocre), var(--ocre)) bottom right / 26px 2px no-repeat,
    linear-gradient(var(--ocre), var(--ocre)) bottom right / 2px 26px no-repeat;
}
.libro__pagina { position: relative; padding: clamp(2.2rem, 5vw, 4rem) clamp(1.5rem, 4.5vw, 3.6rem) clamp(3rem, 5vw, 4rem); min-width: 0; }
.libro__pagina--izq { display: grid; gap: 1.3rem; align-content: center; }
.libro__pagina--izq .folio--pie { left: 50%; }
.libro__pagina--der { display: grid; align-content: center; }
.libro__pagina--der .folio--pie { left: 50%; }
.capitular { font-size: 1.16rem; }
.libro__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.3rem; margin-top: .3rem; }
.sello { /* sello de lacre */
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; rotate: -12deg;
  background: radial-gradient(circle at 35% 30%, #c9452f, #8e2414 60%, #6d1a0d);
  box-shadow: 0 0 0 3px #a8301d, 0 0 0 4px rgba(60, 10, 0, .5), 2px 3px 4px color-mix(in srgb, var(--sombra) 40%, transparent);
  clip-path: polygon(50% 0, 63% 5%, 78% 3%, 86% 15%, 98% 25%, 96% 40%, 100% 55%, 92% 68%, 92% 83%, 78% 90%, 66% 100%, 50% 95%, 34% 100%, 22% 90%, 8% 83%, 8% 68%, 0 55%, 4% 40%, 2% 25%, 14% 15%, 22% 3%, 37% 5%);
}
.sello img { width: 24px; filter: sepia(1) saturate(3) hue-rotate(-20deg) brightness(.85) drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.lamina--portada .lamina__marco > img:first-child { aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.9) contrast(1.02); }
.lamina__logo { position: absolute; left: 50%; bottom: 6%; width: 74%; translate: -50% 0; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); }

/* Unico momento orquestado: la lamina se entinta al cargar */
.js .lamina--portada .lamina__marco { animation: entintar 1.6s cubic-bezier(.6, .05, .2, 1) .55s both; }
.js .lamina--portada .lamina__logo { animation: logo-entra 1.2s cubic-bezier(.2, .8, .2, 1) 1.7s both; }
.js .libro__pagina--izq > * { animation: aparecer .9s ease-out .8s both; }
.js .libro__pagina--izq > h1 { animation: none; }
.js .libro__pagina--izq > :nth-child(3) { animation-delay: 1.5s; }
.js .libro__pagina--izq > :nth-child(4) { animation-delay: 1.7s; }
.js .libro__pagina--izq > :nth-child(5) { animation-delay: 1.9s; }
@keyframes entintar {
  from { clip-path: inset(0 100% 0 0); filter: sepia(1) brightness(1.3); }
  60% { filter: sepia(.4); }
  to { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes logo-entra { from { opacity: 0; transform: translateY(18px) scale(.92); filter: blur(6px) drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); } to { opacity: 1; transform: none; } }

/* Secciones de dos columnas */
.prueba, .destacado, .resultados, .senda, .dano-sec, .cosecha {
  max-width: var(--ancho); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; border-top: 1px solid var(--linea);
}
.prueba > *, .destacado > *, .resultados > *, .senda > *, .dano-sec > *, .cosecha > * { min-width: 0; }
.prueba__texto, .destacado__texto, .resultados__texto, .senda__texto, .dano-sec__texto, .cosecha__texto { display: grid; gap: 1.1rem; align-content: start; }

/* Demostracion del alcance */
.prueba { grid-template-columns: .85fr 1.15fr; }
.muestra { padding: 0 .35em; border-radius: 2px; font-weight: 500; }
.muestra--azul { background: var(--azul-juego); color: #fff; }
.muestra--ocre { background: var(--ocre-juego); color: #2b2118; }
.hechizos { display: grid; gap: .5rem; }
.hechizos button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: left;
  padding: .7rem 1rem; background: light-dark(rgba(255, 252, 240, .35), rgba(255, 240, 210, .04)); border: 1px solid var(--linea); border-radius: 3px; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.hechizos button small { color: var(--tinta-suave); font-size: .9rem; font-style: italic; }
.hechizos button:hover { background: light-dark(rgba(255, 252, 240, .7), rgba(255, 240, 210, .09)); }
.hechizos button[aria-checked="true"] { border-color: var(--ocre); background: rgba(184, 116, 26, .13); box-shadow: inset 3px 0 0 var(--ocre); }
.lectura { min-height: 1.6em; font-style: italic; color: var(--tinta-suave); }
.tablero {
  position: relative; border: 1px solid var(--tinta); padding: 6px; background: #3b3a2c;
  box-shadow: 0 0 0 4px var(--pergamino), 0 0 0 5px color-mix(in srgb, var(--tinta) 55%, transparent), 6px 8px 0 5px var(--sombra-lamina);
}
.tablero svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.celda { stroke: rgba(30, 28, 20, .35); stroke-width: 1; cursor: pointer; transition: fill .15s; }
.celda--suelo { fill: #9aa57f; }
.celda--suelo.alt { fill: #939e78; }
.celda.celda--azul { fill: #5d8fd6; }
.celda.celda--ocre { fill: #c9b467; }
.celda--fuera { fill: #262619; cursor: default; }
.celda.encima { stroke: #fff6d8; stroke-width: 2.5; }
.roca { pointer-events: none; }
.roca__cara { fill: #6e6553; stroke: #2b2118; stroke-width: 1; }
.roca__cara--der { fill: #575041; }
.roca__cima { fill: #8b8169; stroke: #2b2118; stroke-width: 1; }
.pj { pointer-events: none; }

/* Launcher */
.destacado { grid-template-columns: .95fr 1fr; }
.lamina--captura .lamina__marco { background: #2e2a25; }
.descarga { display: grid; gap: .45rem; max-width: 26rem; margin-top: .4rem; }
.descarga__barra { height: 14px; border-radius: 7px; background: #4a443b; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); overflow: hidden; }
.descarga__barra i { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(#ff9a2e, #d6540a); }
#descarga-texto { font: italic .95rem var(--texto); color: var(--tinta-suave); }

/* Replica de la ventana de resultados */
.resultados { grid-template-columns: .9fr 1.1fr; }
.resultados__texto .boton { justify-self: start; }
.ventana-resultados {
  background: #2f2f2f; color: #e7e3d8; border: 1px solid #111; border-radius: 6px; overflow: visible;
  box-shadow: 0 0 0 4px var(--pergamino), 0 0 0 5px color-mix(in srgb, var(--tinta) 55%, transparent), 6px 8px 0 5px var(--sombra-lamina);
  font: 500 .98rem/1 Verdana, Tahoma, sans-serif;
}
.vr__cabecera, .vr__fila { display: grid; grid-template-columns: 1.1fr .6fr 2fr .9fr; align-items: center; }
.vr__cabecera { background: #242424; color: #cfcabe; font-size: .9rem; border-radius: 6px 6px 0 0; }
.vr__cabecera span, .vr__fila > span { padding: .85rem .8rem; text-align: center; border-right: 1px solid #555; }
.vr__cabecera span:last-child, .vr__fila > span:last-child { border-right: 0; }
.vr__fila { background: #3c3c3c; }
.vr__xp { position: relative; display: grid; place-items: center; cursor: help; border-radius: 12px; }
.vr__barra { grid-area: 1 / 1; position: relative; width: 100%; height: 24px; border-radius: 12px; background: #1c1c1c; overflow: hidden; }
.vr__barra i { position: absolute; inset: 0 auto 0 0; border-radius: 12px; transition: width .9s cubic-bezier(.3, .7, .2, 1); }
.vr__ganada { background: #ffb000; }
.vr__previa { background: #ff6600; z-index: 1; }
.vr__xp b { grid-area: 1 / 1; position: relative; z-index: 2; font: 700 .95rem Verdana, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.vr__tooltip {
  position: absolute; z-index: 5; left: 50%; top: calc(100% + 10px); translate: -50% 0; width: max-content;
  padding: .8rem 1rem; background: #262626; border: 1px solid #555; border-radius: 4px; color: #eee;
  font: 400 .9rem/1.5 Verdana, sans-serif; text-align: left; white-space: pre; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.vr__xp:hover .vr__tooltip, .vr__xp:focus .vr__tooltip { opacity: 1; }

/* Registro */
.novedades { background: var(--pergamino-hondo); border-block: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); }
.novedades__cabecera, .registro, .novedades__pie { max-width: 980px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.novedades__cabecera { padding-top: clamp(3.5rem, 8vw, 5.5rem); display: grid; gap: .8rem; }
.novedades__cabecera > p:not(.folio) { color: var(--tinta-suave); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.filtros button { padding: .35rem .9rem; border: 1px solid var(--linea); border-radius: 99px; background: transparent; cursor: pointer; font-size: .98rem; transition: background .2s, border-color .2s; }
.filtros button:hover { border-color: var(--tinta-suave); }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--pergamino); border-color: var(--tinta); }
.registro { list-style: none; margin-top: 2rem; margin-bottom: 0; container: registro / inline-size; }
.registro li {
  display: grid; grid-template-columns: 4.5rem 8rem 1fr; gap: 1.2rem; align-items: baseline;
  padding: 1.25rem 0; border-top: 1px dashed color-mix(in srgb, var(--tinta) 35%, transparent); transition: background .2s, opacity .3s;
}
.registro li:last-child { border-bottom: 1px dashed color-mix(in srgb, var(--tinta) 35%, transparent); }
.registro li:hover { background: linear-gradient(90deg, transparent, rgba(184, 116, 26, .07) 20%, rgba(184, 116, 26, .07) 80%, transparent); }
.registro li[hidden] { display: none; }
.registro time { font-style: italic; color: var(--tinta-suave); }
.version {
  justify-self: start; font: 700 .85rem/1 var(--versalitas); color: var(--sobre-ocre); letter-spacing: .03em;
  background: var(--ocre-boton); padding: .32rem .55rem .36rem; border-radius: 2px; rotate: -2deg;
  box-shadow: 1px 1px 0 #6a410d;
}
.registro li[data-tema="mundo"] .version { color: #fbf4e2; background: #4f6a3a; box-shadow: 1px 1px 0 #2f4222; }
.registro li[data-tema="interfaz"] .version { color: #fbf4e2; background: #6b5a45; box-shadow: 1px 1px 0 #43372a; }
.registro h3 { margin-bottom: .35rem; }
.registro p { color: light-dark(#3e3226, #d8cbb0); }
.novedades__pie { padding-block: 1.6rem clamp(3rem, 7vw, 5rem); font-style: italic; color: var(--tinta-suave); }

/* Senda del Ocre como mapa */
.senda { grid-template-columns: .7fr 1.3fr; }
.mapa { margin: 0; }
.mapa svg { width: 100%; height: auto; background: light-dark(rgba(255, 250, 235, .35), rgba(255, 240, 210, .03)); border: 1px solid var(--linea); border-radius: 3px; }
.mapa__rejilla { fill: none; stroke: color-mix(in srgb, var(--tinta) 8%, transparent); }
.mapa__rosa circle { fill: none; stroke: color-mix(in srgb, var(--tinta) 40%, transparent); }
.mapa__rosa path { fill: color-mix(in srgb, var(--tinta) 18%, transparent); stroke: color-mix(in srgb, var(--tinta) 50%, transparent); }
.mapa__camino { fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-dasharray: 2 9; stroke-linecap: round; }
.js .mapa__camino { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.js .mapa.trazado .mapa__camino { animation: trazar 2.6s ease-in-out forwards; }
@keyframes trazar { 90% { stroke-dashoffset: 0; stroke-dasharray: 1400; } 100% { stroke-dashoffset: 0; stroke-dasharray: 2 9; } }
.mapa__etapa circle { fill: var(--pergamino); stroke: var(--ocre); stroke-width: 3; }
.mapa__etapa text, .mapa__rosa text { font: italic 17px var(--titulo); fill: var(--tinta); text-anchor: middle; }
.js .mapa__etapa, .js .mapa__huevo { opacity: 0; transition: opacity .5s; }
.js .mapa.trazado .mapa__etapa { opacity: 1; transition-delay: calc(var(--i) * .55s + .2s); }
.js .mapa.trazado .mapa__huevo { opacity: 1; transition-delay: 2.5s; }
.mapa figcaption { margin-top: .7rem; font-style: italic; color: var(--tinta-suave); font-size: .95rem; }

/* Laminas */
.laminas { max-width: var(--ancho); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem); border-top: 1px solid var(--linea); }
.laminas h2 { margin-bottom: 1.6rem; }
.laminas__fila {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 30%); gap: 2rem;
  overflow-x: auto; padding: 8px 8px 1.2rem; scroll-snap-type: x mandatory; scrollbar-color: var(--tinta-suave) transparent;
}
.laminas__fila .lamina { scroll-snap-align: start; }
.laminas__fila img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease, filter .4s ease; }
.laminas__fila .lamina:hover img { transform: scale(1.04); }

/* Para entrar */
.empezar {
  max-width: 720px; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem) clamp(4rem, 8vw, 6rem);
  display: grid; gap: 1.1rem; justify-items: center; text-align: center; border-top: 1px solid var(--linea);
}

/* Pie y aviso */
.pie { background: var(--noche); color: #b9ab90; padding: 2rem clamp(1rem, 4vw, 2rem); font-size: .95rem; }
.pie p { max-width: var(--ancho); margin: 0 auto; }
.aviso {
  position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 10; max-width: 22rem; margin: 0;
  padding: .7rem 1rem; background: var(--tinta); color: var(--pergamino); border-radius: 3px;
  font-size: .98rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.aviso.visible { opacity: 1; visibility: visible; transform: none; }

/* Escenas del juego (dano estimado y recoleccion) */
.dano-sec { grid-template-columns: 1.15fr .85fr; }
.cosecha { grid-template-columns: .85fr 1.15fr; }
.escena-marco {
  position: relative; border: 1px solid var(--tinta); background: #3b3a2c; padding: 6px;
  box-shadow: 0 0 0 4px var(--pergamino), 0 0 0 5px color-mix(in srgb, var(--tinta) 55%, transparent), 6px 8px 0 5px var(--sombra-lamina);
}
.escena { position: relative; }
.escena svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.escena .suelo { fill: #9aa57f; stroke: rgba(30, 28, 20, .35); }
.escena .suelo.alt { fill: #939e78; }
.escena--cursor-libre .suelo { cursor: pointer; }
kbd { font: 700 .82em var(--versalitas); padding: .05em .45em .15em; border: 1px solid var(--tinta-suave); border-bottom-width: 3px; border-radius: 4px; background: light-dark(#f5edd6, #2e261d); }

/* Vista previa de dano (igual que la barra de vida del cliente) */
.pv {
  position: absolute; z-index: 3; left: 68.75%; top: 46%; translate: -50% -100%; min-width: 9.5rem;
  padding: .45rem .7rem .5rem; background: rgba(28, 28, 28, .88); border: 1px solid #555; border-radius: 4px;
  display: grid; justify-items: center; gap: .3rem; font: 700 12px/1.25 Verdana, Tahoma, sans-serif; color: #fff;
  pointer-events: none; transition: translate .2s;
}
.pv__vida { width: 100%; height: 7px; background: #1a1a1a; border: 1px solid #000; }
.pv__vida i { display: block; height: 100%; width: 100%; background: linear-gradient(#e0473a, #a8261c); transition: width .5s cubic-bezier(.3, .7, .2, 1); }
.pv__filas { display: grid; justify-items: center; gap: .1rem; }
.pv__filas:empty { display: none; }
.pv__fila { display: flex; align-items: center; gap: .3rem; white-space: nowrap; animation: fila-entra .35s cubic-bezier(.2, .8, .2, 1) both; }
.pv__fila:nth-child(2) { animation-delay: .08s; }
@keyframes fila-entra { from { opacity: 0; transform: translateY(-5px); } }
.tri { width: 10px; height: 10px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pv.critico { animation: sacudir .35s; }
@keyframes sacudir { 25% { translate: calc(-50% - 4px) -100%; } 75% { translate: calc(-50% + 4px) -100%; } }

.tofu { cursor: crosshair; }
.tofu__cuerpo { transform-box: fill-box; transform-origin: 50% 100%; animation: saltito 1.6s ease-in-out infinite; }
@keyframes saltito { 0%, 100% { transform: none; } 45% { transform: translateY(-6px) scaleY(1.04); } 55% { transform: translateY(-6px); } }
.tofu.herido .tofu__cuerpo { animation: herido .35s; }
@keyframes herido { 30% { transform: translateX(6px) rotate(8deg); filter: brightness(2) saturate(.3); } }
.tofu.caido { animation: caer .8s ease-in forwards; }
@keyframes caer { to { opacity: 0; transform: translateY(-20px); } }
.tofu.vuelve { animation: aparecer .6s ease-out; }
.flecha { stroke: #f5e6c0; stroke-width: 3; stroke-linecap: round; }
.dano--critico { font-size: 28px; }

.barra-hechizos { display: flex; gap: .5rem; padding: .55rem .6rem .3rem; background: #2a2620; border-top: 1px solid #111; }
.barra-hechizos button {
  display: grid; justify-items: center; gap: .25rem; padding: .3rem; background: #1c1a16; border: 1px solid #5a4e38;
  border-radius: 5px; cursor: pointer; color: #cfc4a8; font: 400 .78rem/1.1 var(--texto); transition: border-color .2s, transform .15s, background .2s;
}
.barra-hechizos svg { width: 40px; height: 40px; }
.barra-hechizos button:hover { border-color: #b8a070; }
.barra-hechizos button:active, .barra-hechizos button.pulsado { transform: scale(.92); }
.barra-hechizos button[aria-checked="true"] { border-color: #ffb000; background: #3a2e18; box-shadow: 0 0 0 1px #ffb000; color: #fff2cf; }

/* Cursor de la demostracion automatica */
.cursor-demo {
  position: absolute; z-index: 8; left: 0; top: 0; width: 22px; pointer-events: none; opacity: 0;
  transition: translate .8s cubic-bezier(.45, .05, .25, 1), opacity .3s; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .5));
}
.cursor-demo.visible { opacity: 1; }
.cursor-demo svg { display: block; width: 100%; }
.cursor-demo.clic svg { animation: clic .25s; }
@keyframes clic { 50% { transform: scale(.82); } }
.cursor-demo kbd { position: absolute; left: 20px; top: 20px; font-size: .7rem; opacity: 0; transition: opacity .2s; }
.cursor-demo.mayus kbd { opacity: 1; background: #ffe2a0; }

/* Recoleccion */
.cosecha .reglas { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.cosecha .reglas li::marker { color: var(--ocre); content: "❧  "; }
.marca { fill: rgba(30, 144, 255, .62); stroke: #bfe0ff; stroke-width: 1.5; animation: marca .3s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes marca { from { transform: scale(.3); opacity: 0; } }
.recurso { cursor: pointer; }
.recurso .planta { transition: opacity .35s; }
.recurso .resto { opacity: 0; transition: opacity .35s; }
.recurso.cosechado .planta { opacity: 0; }
.recurso.cosechado .resto { opacity: 1; }
.recurso.cosechado { cursor: default; }
.recurso.encima .planta { filter: brightness(1.25); }
.espiga { transform-box: fill-box; transform-origin: 50% 100%; animation: espiga 3.2s ease-in-out infinite; }
.copa { transform-box: fill-box; transform-origin: 50% 100%; animation: copa 5s ease-in-out infinite; }
@keyframes espiga { 0%, 100% { rotate: -4deg; } 50% { rotate: 5deg; } }
@keyframes copa { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
.recurso.golpeando .planta { animation: temblor .3s 4; }
@keyframes temblor { 50% { transform: translateX(2px); } }
.progreso { fill: none; stroke: #ffe39a; stroke-width: 4; stroke-linecap: round; }
.progreso-fondo { fill: rgba(0, 0, 0, .45); stroke: rgba(0, 0, 0, .5); stroke-width: 4; }
.pj.trabaja .pj__figura { animation: trabajar .35s ease-in-out infinite; }
@keyframes trabajar { 50% { transform: rotate(-9deg) translateY(1px); } }
.botin { font: 700 15px Verdana, sans-serif; fill: #ffe39a; stroke: #2a1a05; stroke-width: 3.5; paint-order: stroke; text-anchor: middle; animation: dano 1.4s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.cola {
  position: absolute; z-index: 3; right: 8px; top: 8px; min-width: 8.5rem; padding: .45rem .65rem; background: rgba(28, 28, 28, .82);
  border: 1px solid #555; border-radius: 4px; color: #eee; font: 400 12px/1.4 Verdana, sans-serif;
}
.cola b { display: block; color: #ffcf6a; margin-bottom: .2rem; }
.cola ol { margin: 0; padding-left: 1.3rem; min-height: 1.4em; }
.cola ol:empty::before { content: "vacía"; margin-left: -1.3rem; color: #999; font-style: italic; }
.cola li { animation: fila-entra .3s both; }
.cola li.actual { color: #8fd0ff; }
.chat {
  height: 4.6rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .1rem;
  padding: .4rem .7rem; background: #1e1c19; border-top: 1px solid #111; font: 400 12px/1.45 Verdana, sans-serif; color: #d8d2c0;
}
.chat p { animation: fila-entra .3s both; }
.chat .aviso-chat { color: #ff9a5a; }
.chat .botin-chat { color: #a6e07a; }

/* ===== Movimiento ===== */

/* Hilo de lectura (progreso de la pagina) */
.hilo { position: fixed; inset: 0 0 auto; height: 3px; z-index: 30; background: var(--ocre); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* El libro se abre: una hoja pasa sobre el lomo */
.libro { perspective: 2600px; }
.hoja { display: none; }
.js .hoja {
  display: block; position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%; width: 50%; pointer-events: none;
  transform-origin: left center; border-radius: 0 6px 4px 0;
  background: linear-gradient(90deg, light-dark(#cdbd96, #18140f), light-dark(#efe6cd, #262019) 9%, light-dark(#efe6cd, #262019) 85%, light-dark(#e2d6b7, #1f1a14));
  box-shadow: -4px 0 18px color-mix(in srgb, var(--sombra) 25%, transparent);
  animation: pasar-hoja 1.15s cubic-bezier(.5, .05, .3, 1) .1s both;
}
@keyframes pasar-hoja {
  0% { transform: rotateY(0); filter: brightness(1); opacity: 1; }
  50% { filter: brightness(.82); }
  92% { opacity: 1; }
  100% { transform: rotateY(-180deg); filter: brightness(1.05); opacity: 0; }
}

/* Titulo que se escribe palabra a palabra */
.js .palabra { display: inline-block; animation: tinta-palabra .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.75s + var(--n) * 75ms); }
@keyframes tinta-palabra { from { opacity: 0; transform: translateY(.35em) rotate(2deg); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* Sello de lacre que se estampa */
.js .sello { animation: estampar .55s cubic-bezier(.3, 1.5, .5, 1) 2.2s both; }
.sello { position: relative; transition: rotate .4s, transform .4s; }
.sello:hover { rotate: 6deg; }
@keyframes estampar {
  0% { opacity: 0; scale: 2.6; rotate: -40deg; }
  70% { opacity: 1; scale: .9; }
  100% { opacity: 1; scale: 1; rotate: -12deg; }
}

/* Lamina de portada: inclinacion con el raton y polvo en la luz */
.lamina--portada { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.lamina__logo { z-index: 2; translate: calc(-50% + var(--lx, 0px)) var(--ly, 0px); transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.mota {
  position: absolute; z-index: 1; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%;
  background: #ffe7a8; box-shadow: 0 0 6px 1px rgba(255, 210, 120, .7); opacity: 0; pointer-events: none;
  animation: flotar var(--d) linear var(--r) infinite;
}
@keyframes flotar {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .9; }
  80% { opacity: .6; }
  100% { opacity: 0; transform: translate(var(--dx), -420px); }
}

/* Botones con un brillo que cruza */
.boton { position: relative; overflow: hidden; isolation: isolate; }
.boton::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 238, 200, .5) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s ease;
}
.boton:hover::after { transform: translateX(130%); }
.libro .boton::after { animation: brillo 5s ease-in-out 3s infinite; }
@keyframes brillo { 0%, 70% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }

/* Aparicion al desplazar */
.js .revela { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .revela.visto { opacity: 1; transform: none; }
/* Mascara y no clip-path: con clip-path el IntersectionObserver no ve el titulo */
.js h2.revela {
  transform: none; transition: opacity .4s, -webkit-mask-position 1.3s cubic-bezier(.5, .05, .2, 1), mask-position 1.3s cubic-bezier(.5, .05, .2, 1);
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 220% 100%; mask-size: 220% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.js h2.revela.visto { -webkit-mask-position: 0 0; mask-position: 0 0; }
.js .folio.revela { transform: translateX(-14px); }
.js .folio.revela.visto { transform: none; }
.js .laminas__fila .lamina.revela { transform: translateY(30px) rotate(1.5deg); }
.js .laminas__fila .lamina.revela.visto { transform: none; }
.js .laminas__fila .lamina.visto .lamina__marco { animation: entintar 1.1s cubic-bezier(.6, .05, .2, 1) both; animation-delay: inherit; }
.js .registro li.revela { transform: translateX(-18px); }
.js .registro li.revela.visto { transform: none; }
.js .registro li.visto .version { animation: sellar-version .5s cubic-bezier(.3, 1.6, .5, 1) .35s both; }
@keyframes sellar-version { from { opacity: 0; scale: 2.2; rotate: -16deg; } to { opacity: 1; scale: 1; rotate: -2deg; } }
.js .fleuron.visto { animation: fleuron 1.2s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes fleuron { from { opacity: 0; rotate: -200deg; scale: .3; } to { opacity: 1; rotate: 0deg; scale: 1; } }

/* Tablero: personaje y efectos */
.pj__sombra { fill: rgba(0, 0, 0, .35); }
.pj__capa { fill: #4f6a3a; stroke: #1f2a16; stroke-width: 1.2; }
.pj__capucha { fill: #3d5530; stroke: #1f2a16; stroke-width: 1.2; }
.pj__cara { fill: #f0d3a8; stroke: #5a3c1e; stroke-width: 1; }
.pj__arco { fill: none; stroke: #7a4c10; stroke-width: 2.6; stroke-linecap: round; }
.pj__figura { animation: respirar 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.pj.lanza .pj__figura { animation: lanzar .35s ease-out; }
@keyframes respirar { 50% { transform: translateY(-2px) scaleY(1.02); } }
@keyframes lanzar { 30% { transform: scale(1.12, .9) rotate(-6deg); } }
.celda.golpe { fill: #fff2c4; }
.proyectil { fill: #bfe4ff; stroke: #1e90ff; stroke-width: 2; }
.chispa { fill: #8fd0ff; animation: chispa .45s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes chispa { to { opacity: 0; transform: scale(.2); } }
.impacto { fill: none; stroke: #bfe4ff; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: onda .65s ease-out forwards; }
.impacto--suave { stroke: #fff6d8; stroke-width: 2; }
@keyframes onda { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.dano { font: 700 24px Verdana, sans-serif; fill: #ff4a3a; stroke: #2a0a05; stroke-width: 4; paint-order: stroke; text-anchor: middle; animation: dano 1.1s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes dano { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 15% { opacity: 1; transform: translateY(-6px) scale(1.25); } 30% { transform: translateY(-10px) scale(1); } 100% { opacity: 0; transform: translateY(-46px); } }
.lectura { transition: color .2s; }
.lectura.si { color: light-dark(#2f5d9a, #8fb8ee); }
.lectura.no { color: light-dark(#7d4a0c, #e3a957); }

/* Launcher: barra buscando, descargando y lista */
.descarga__barra { position: relative; }
.descarga__barra.buscando::before {
  content: ""; position: absolute; inset: 0; border-radius: 7px;
  background: repeating-linear-gradient(-45deg, rgba(255, 154, 46, .5) 0 8px, transparent 8px 16px); background-size: 22.6px 100%;
  animation: rayas .6s linear infinite;
}
@keyframes rayas { to { background-position: 22.6px 0; } }
.descarga__barra i { position: relative; overflow: hidden; }
.descarga__barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: reflejo 1.4s linear infinite; }
@keyframes reflejo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.descarga__barra.listo i { background: linear-gradient(#9ccf5a, #4f8a1e); }

/* Resultados: subida de nivel */
.ventana-resultados { position: relative; }
.vr__xp.destello .vr__barra { animation: destello .7s ease-out; }
@keyframes destello { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 60, .9); filter: brightness(1.8); } 100% { box-shadow: 0 0 0 12px rgba(255, 200, 60, 0); filter: none; } }
#vr-nivel.sube { animation: sube-nivel .6s cubic-bezier(.3, 1.6, .5, 1); color: #ffcf4a; }
@keyframes sube-nivel { 40% { scale: 1.7; } }
.vr__aviso {
  position: absolute; left: 50%; top: -1.6rem; translate: -50% 0; z-index: 6; white-space: nowrap;
  font: 400 1.7rem var(--titulo); color: var(--ocre-texto); text-shadow: 0 1px 0 var(--pergamino), 0 2px 6px color-mix(in srgb, var(--sombra) 30%, transparent);
  animation: aviso-nivel 1.8s ease-out forwards; pointer-events: none;
}
@keyframes aviso-nivel { 0% { opacity: 0; transform: translateY(16px) scale(.7); } 20% { opacity: 1; transform: translateY(0) scale(1.08); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
#vr-kamas, #vr-cifra { font-variant-numeric: tabular-nums; }

/* Registro: filtrar con movimiento */
.registro li.saliendo { opacity: 0; transform: translateX(-14px); transition: opacity .2s, transform .2s; }
.registro li.entrando { animation: entra-cambio .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes entra-cambio { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.filtros button { transition: background .25s, border-color .25s, color .25s, transform .15s; }
.filtros button:active { transform: scale(.94); }

/* Mapa: viajero, etapas alcanzadas, huevo y rosa */
.mapa__viajero { opacity: 0; transition: opacity .4s; }
.mapa__viajero.en-camino { opacity: 1; }
.mapa__viajero circle { fill: rgba(184, 116, 26, .25); stroke: var(--ocre); stroke-width: 2; }
.mapa__viajero .nucleo { fill: var(--tinta); stroke: none; }
.mapa__viajero .halo { fill: none; stroke: var(--ocre); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: onda 1.4s ease-out infinite; }
.mapa__etapa circle { transition: fill .3s, r .3s; }
.mapa__etapa.alcanzada circle { fill: var(--ocre); r: 11px; }
.mapa__huevo { transform-box: fill-box; transform-origin: 50% 80%; }
.mapa__huevo.brilla { animation: huevo 1.6s ease-in-out; }
@keyframes huevo { 0%, 100% { transform: none; filter: none; } 20% { transform: translateY(-10px) rotate(-8deg); } 40% { transform: translateY(0) rotate(6deg); filter: drop-shadow(0 0 10px rgba(255, 190, 60, .9)); } 60% { transform: rotate(-3deg); } }
.mapa__rosa path { transform-box: fill-box; transform-origin: center; animation: rosa 9s ease-in-out infinite; }
@keyframes rosa { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }

/* Laminas: inclinacion y visor */
.laminas__fila .lamina { cursor: zoom-in; perspective: 900px; }
.laminas__fila .lamina__marco { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.fleuron { animation: mecer 6s ease-in-out infinite; }
@keyframes mecer { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.visor { max-width: min(1100px, 94vw); padding: 0; border: 0; background: transparent; overflow: visible; }
.visor[open] { animation: visor-abre .45s cubic-bezier(.2, .8, .2, 1); }
.visor::backdrop { background: rgba(21, 18, 14, .82); animation: velo .35s ease; }
.visor figure { margin: 0; }
.visor img { width: 100%; border: 7px solid var(--noche); box-shadow: 0 0 0 4px var(--pergamino), 0 30px 60px rgba(0, 0, 0, .5); }
.visor figcaption { margin-top: .9rem; color: var(--pergamino); font-style: italic; text-align: center; }
.visor__cerrar { position: absolute; top: -1rem; right: -1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--ocre-boton); color: var(--sobre-ocre); font-size: 1.5rem; line-height: 1; cursor: pointer; }
@keyframes visor-abre { from { opacity: 0; transform: scale(.9) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes velo { from { opacity: 0; } }

/* ===== Tendencias 2026 (ver DESIGN.md, "CSS moderno") ===== */

/* Interruptor de tema: una vela. Apagada = pergamino de dia; encendida = lectura de noche. */
.menu__tema {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: -.6rem; flex: none;
  border: 1px solid var(--linea); border-radius: 50%; background: transparent; cursor: pointer;
  transition: border-color .2s, background .2s;
  & svg { width: 24px; height: 24px; overflow: visible; }
  & .vela__cera { fill: var(--pergamino-hondo); stroke: var(--tinta); stroke-width: 1.2; }
  & .vela__mecha { stroke: var(--tinta); stroke-width: 1.4; stroke-linecap: round; }
  & .vela__llama { fill: #ffb000; opacity: 0; scale: .2; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .3s, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
  & .vela__humo { fill: none; stroke: var(--tinta-suave); stroke-width: 1.2; stroke-linecap: round; opacity: .7; transition: opacity .3s; }
  &:hover { border-color: var(--ocre); background: color-mix(in srgb, var(--ocre) 12%, transparent); }
  &[aria-pressed="true"] {
    & .vela__llama { opacity: 1; scale: 1; animation: llama 1.8s ease-in-out infinite; }
    & .vela__humo { opacity: 0; }
  }
}
@keyframes llama { 0%, 100% { scale: 1 1; rotate: 0deg; } 30% { scale: .9 1.08; rotate: -4deg; } 60% { scale: 1.05 .95; rotate: 3deg; } }

/* View Transitions: el cambio de tema se entinta desde la vela */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.cambiando-tema::view-transition-new(root) { animation: tema-entinta .8s cubic-bezier(.6, .05, .2, 1); }
@keyframes tema-entinta {
  from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 2rem)); }
  to { clip-path: circle(150vmax at var(--vt-x, 90%) var(--vt-y, 2rem)); }
}
/* Filtros del registro: cada cambio se desliza a su sitio nuevo */
.registro li { view-transition-class: cambio; }
::view-transition-group(*.cambio) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* Visor: la lamina crece desde su miniatura */
::view-transition-group(lamina-ampliada) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.visor.vt[open] { animation: none; } /* con View Transitions la lamina ya crece sola */

/* Container queries: cada pieza se adapta a su hueco, no a la ventana */
@container registro (max-width: 620px) {
  .registro li { grid-template-columns: auto 1fr; gap: .4rem 1rem; }
  .registro li > div { grid-column: 1 / -1; }
}
.escena-marco { container: escena / inline-size; }
@container escena (max-width: 540px) { .barra-hechizos button span { font-size: .7rem; } }
@container escena (max-width: 380px) { .barra-hechizos button span { display: none; } }
.prueba__texto { container: lado / inline-size; }
@container lado (max-width: 340px) {
  .hechizos button { flex-direction: column; align-items: flex-start; gap: .1rem; }
}

/* :has(): estilos segun el contenido, sin JavaScript */
@media (hover: hover) {
  .registro:has(li:hover) li:not(:hover) { opacity: .6; }           /* lee una entrada a la vez */
  .laminas__fila:has(.lamina:hover) .lamina:not(:hover) img { filter: sepia(.45) brightness(.85); }
}
.libro__acciones:has(.boton:hover, .boton:focus-visible) .sello { transform: rotate(16deg) scale(1.08); } /* la animacion fija rotate: se usa transform */

/* Responsivo */
@media (max-width: 900px) {
  .libro { grid-template-columns: 1fr; background: light-dark(#ede3c8, #241e17); }
  .libro__pagina--der { order: -1; padding-bottom: 1rem; }
  .libro__pagina--der .folio--pie { display: none; }
  .prueba, .destacado, .resultados, .senda, .dano-sec, .cosecha { grid-template-columns: 1fr; }
  .dano-sec__texto { order: -1; }
  .menu { flex-wrap: wrap; }
  .menu__abrir { display: block; }
  .menu__enlaces { order: 5; }
  .menu__tema { margin-left: 0; }
  .menu__enlaces { display: none; width: 100%; flex-direction: column; gap: .2rem; margin: .6rem 0 0; }
  .menu__enlaces a { padding: .6rem 0; } /* zonas tactiles de 44 px */
  .menu.abierto .menu__enlaces { display: flex; }
  .laminas__fila { grid-auto-columns: 78%; }
  .vr__cabecera, .vr__fila { grid-template-columns: .9fr .5fr 2fr .8fr; font-size: .85rem; }
  .js .hoja { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .mapa__camino { stroke-dasharray: 2 9; stroke-dashoffset: 0; }
  .js .mapa__etapa, .js .mapa__huevo { opacity: 1; }
  .js .hoja, .mota, .mapa__viajero, .cursor-demo { display: none; }
}