/*
Theme Name: GatoMonstruo
Theme URI: https://gatomonstruo.local/
Author: Ju
Description: Tema de GatoMonstruo, alter ego de la escena techno nocturna. Un sitio que se va revelando: escritos, crónicas, bestiario y oráculo. Un solo tema oscuro, sin dependencias de JavaScript externas.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gatomonstruo
*/

/* GatoMonstruo v4: el sitio se va revelando
   Un solo tema oscuro. Un acento (brasa). Radio único: 2px.
   Paradas: secciones fijas que avanzan con el scroll. No pasa nada hasta que bajas.
   Dualidad en la tipografía: filo (Bricolage Grotesque) y seda (Newsreader cursiva).
   Sin JS todo se ve; con "reduce motion" todo se ve y nada se mueve. */

:root {
  color-scheme: dark;
  --bg: #111111;
  --ink: #e9e2d8;
  --ink-dim: #a39a90;
  --ink-faint: #7d746c;
  --ember: #d9542b;
  --ember-soft: #f08a5b;
  --ember-deep: #5a1f12;
  --blood: #a3283a;
  --blood-deep: #7a1420;
  --silver: #aeb4bb;
  --amber: #e0a23a;
  --radius: 2px;
  --filo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --seda: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 62ch;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* capas: fondo 0, calor+brasas 1, contenido 2, escaneo 5, progreso 15, nav 20, skip 30 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:not(.js) { scroll-behavior: smooth; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--seda); font-size: clamp(1.125rem, 1.06rem + .3vw, 1.28rem); line-height: 1.65;
  overflow-x: hidden; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: 5px; }
::selection { background: var(--ember); color: #111; }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 30; padding: .7rem 1rem;
  background: var(--ember); color: #111; font: 700 .95rem var(--filo); border-radius: var(--radius);
}
.skip:focus { top: 1rem; }

/* ---------- Fondo: el gato, quieto y apenas visible ---------- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-img {
  position: absolute; left: 50%; top: 4vh; width: 100vw; aspect-ratio: 2200 / 1237;
  transform: translateX(-50%);
  background: url("assets/gato-fondo.jpg") center / 100% 100% no-repeat;
  opacity: .17;
  filter: sepia(.28) hue-rotate(-20deg) saturate(1.7) contrast(1.1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
@media (max-aspect-ratio: 1 / 1) { .bg-img { width: 185vw; top: 12vh; } }
.bg-r, .bg-c { opacity: 0; mix-blend-mode: screen; }
.bg-r { filter: grayscale(1) brightness(1.3) contrast(1.5) sepia(1) hue-rotate(-50deg) saturate(8); }
.bg-c { filter: grayscale(1) brightness(1.3) contrast(1.5) sepia(1) hue-rotate(150deg) saturate(6); }
.scan {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / .35) 0 2px, transparent 2px 5px);
}
/* calor: una luz de brasa desde abajo que sube cuando el texto arde */
.calor {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--heat, 0);
  background: radial-gradient(ellipse 90% 60% at 50% 112%, rgb(217 84 43 / .42), transparent 70%);
}
.brasas { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 1; pointer-events: none; }
main, .pie { position: relative; z-index: 2; }

/* progreso: una vela que se consume al revés, una línea de brasa que crece */
.prog {
  position: fixed; left: 0; top: 0; bottom: 0; width: 3px; z-index: 15; pointer-events: none;
  background: linear-gradient(to bottom, var(--ember), var(--blood-deep));
  transform-origin: top; transform: scaleY(var(--prog, 0));
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 4rem; padding: 0 var(--gutter);
  font: 400 .95rem var(--filo);
  background: linear-gradient(to bottom, rgb(17 17 17 / .96) 55%, transparent);
}
.nav-mark { font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: var(--ember-soft); }
.nav nav { display: flex; gap: clamp(1rem, 3vw, 2rem); }
.nav nav a { text-decoration: none; color: var(--ink-dim); padding: .5rem 0; white-space: nowrap; transition: color .25s; }
.nav nav a:hover { color: var(--ink); }
@media (max-width: 520px) { .nav { gap: .75rem; font-size: .85rem; } .nav nav { gap: .9rem; } }

/* ---------- umbral: el nombre se sale de la pantalla y sube letra por letra ---------- */
.umbral {
  min-height: 100dvh; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6rem 0 clamp(3rem, 8vh, 6rem);
}
.wm { font-family: var(--filo); font-weight: 800; letter-spacing: -.055em; margin: 0; }
.wm span.wm-a, .wm span.wm-b { display: block; white-space: nowrap; will-change: transform; }
.wm-a {
  font-size: clamp(6rem, 31vw, 36rem); line-height: .78; margin-left: calc(var(--gutter) * -.4);
  color: var(--ink);
  transform: translateX(calc(var(--hero, 0) * -14vw));
}
.wm-b {
  font-size: clamp(4rem, 18.6vw, 24rem); line-height: .9; color: var(--ember);
  margin-left: clamp(.6rem, 6vw, 10rem);
  transform: translateX(calc(var(--hero, 0) * 16vw));
}
.wm .l { display: inline-block; }
.canon {
  position: absolute; right: var(--gutter); top: 24vh; text-align: right;
  font: italic 400 clamp(1.3rem, 2.4vw, 2rem)/1.3 var(--seda); color: var(--ember-soft);
  transform: rotate(-4deg); transform-origin: right center;
  opacity: calc(1 - var(--hero, 0) * 1.6);
}

/* letras que suben al cargar; Monstruo se enciende de brasa apagada a brasa viva */
@media (prefers-reduced-motion: no-preference) {
  .wm .l { animation: sube 1.3s var(--ease) both; animation-delay: calc(var(--d) * 75ms + .15s); }
  .wm-b .l { animation: sube 1.3s var(--ease) both, arde 2.6s linear both; animation-delay: calc(var(--d) * 75ms + .55s), calc(var(--d) * 110ms + .9s); }
  .canon { animation: aparece 1.6s ease both 1.9s; }
  @keyframes sube { from { opacity: 0; transform: translateY(70%) rotate(5deg); } to { opacity: 1; transform: none; } }
  @keyframes arde { 0% { color: #2a1511; } 40% { color: var(--ember-deep); } 70% { color: #ff9b6b; } 100% { color: var(--ember); } }
  @keyframes aparece { from { opacity: 0; } }
}

/* ---------- paradas ---------- */
.stop { position: relative; }
.stop-pin { position: relative; display: grid; align-content: center; min-height: 100dvh; padding: 5rem var(--gutter); overflow: hidden; }

/* con JS: la parada es alta y su contenido queda fijo mientras se avanza */
.js .stop[data-modo="beats"] { height: calc(var(--n, 2) * 70vh + 100vh); }
.js .stop[data-modo="beats"] .stop-pin { position: sticky; top: 0; height: 100dvh; min-height: 0; }
.rm .stop[data-modo="beats"] { height: auto; }
.rm .stop[data-modo="beats"] .stop-pin { position: relative; height: auto; min-height: 100dvh; }

/* tiempos: el scroll solo decide cuándo toca el siguiente; la animación corre sola */
.beat { display: grid; align-content: center; gap: .6rem; }
.js:not(.rm) .stop[data-modo="beats"] .beat { position: absolute; inset: 0; padding: 5rem var(--gutter); opacity: 0; transform: translateY(3rem); transition: opacity .8s ease, transform 1s var(--ease); pointer-events: none; }
.js:not(.rm) .stop[data-modo="beats"] .beat.on { opacity: 1; transform: none; pointer-events: auto; }
.js:not(.rm) .stop[data-modo="beats"] .beat.fue { opacity: 0; transform: translateY(-3rem); }
.rm .stop[data-modo="beats"] .beat { padding: 6rem 0; }
.beat p { margin: 0; }
.b-filo, .b-seda, .b-brasa { font-size: clamp(3.6rem, 19vw, 19rem); line-height: .86; padding-bottom: .1em; }
.b-filo { font-family: var(--filo); font-weight: 800; letter-spacing: -.06em; color: var(--ink); }
.b-seda { font-family: var(--seda); font-style: italic; font-weight: 500; letter-spacing: -.03em; color: var(--ink-dim); justify-self: end; }
.b-brasa { font-family: var(--filo); font-weight: 800; letter-spacing: -.06em; color: var(--ember); }
.js:not(.rm) .b-brasa[data-fill] {
  background: linear-gradient(90deg, var(--ember) 40%, #ff9b6b 49%, #2c1d1b 52%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js:not(.rm) .beat.on .b-brasa[data-fill] { background-position: 0 0; transition: background-position 2.2s cubic-bezier(.45, .05, .25, 1) .25s; }
.stop-encender .beat:nth-child(1) { transform-origin: left bottom; }

/* texto que se aclara palabra por palabra */
.scrub { max-width: 100%; }
.js:not(.rm) .scrub .w { opacity: 0; transform: translateY(.5em); transition: opacity .9s ease, transform 1.1s var(--ease), color .6s; transition-delay: calc(var(--k, 0) * var(--gap, 150) * 1ms); }
.js:not(.rm) .stop.vis .scrub .w { opacity: 1; transform: none; }
.scrub .w.hot { color: var(--ember-soft); }
.scrub .w { display: inline-block; }
.esc { font: italic 400 clamp(1.7rem, 5.4vw, 4.6rem)/1.14 var(--seda); letter-spacing: -.01em; }
.esc > span { display: block; margin-left: calc(var(--i) * clamp(.5rem, 6.5vw, 7rem)); }
.esc > span:last-child { color: var(--ember-soft); }
.grande { font: 800 clamp(2.4rem, 8.6vw, 8rem)/.98 var(--filo); letter-spacing: -.05em; text-wrap: balance; }
.grande em { font-family: var(--seda); font-style: italic; font-weight: 500; letter-spacing: -.025em; color: var(--ember-soft); }
.stop-demonios .grande { font-size: clamp(2.6rem, 9.4vw, 9.4rem); }
@media (prefers-reduced-motion: no-preference) {
  .stop-demonios .w.hot { display: inline-block; animation: tiembla .14s steps(2) infinite; }
  @keyframes tiembla { 0% { transform: translate(0, 0); } 50% { transform: translate(-2px, 1px); } 100% { transform: translate(2px, -1px); } }
}

/* elementos: cada uno actúa según lo que es */
.stop-elementos .etq { font: 500 .9rem var(--mono); letter-spacing: .06em; color: var(--ink-faint); }
.stop-elementos .el { font: 800 clamp(2rem, 6.6vw, 6.4rem)/1.02 var(--filo); letter-spacing: -.045em; max-width: 19ch; text-wrap: balance; }
.stop-elementos .beat:nth-child(even) .el { margin-left: auto; text-align: right; }
.stop-elementos .beat:nth-child(even) .etq { text-align: right; }
.stop-elementos .beat:nth-child(even) { text-align: right; }
/* los elementos no están fijos: cada uno ocupa su pantalla y actúa solo cuando llegas.
   Las animaciones son de tiempo (keyframes): corren solas al llegar, sin depender del scroll. */
.stop-elementos .stop-pin { display: block; padding: 0; overflow: visible; }
.stop-elementos .beat { position: relative; min-height: 100dvh; padding: 5rem var(--gutter); overflow: hidden; isolation: isolate; }
.stop-elementos .etq { color: var(--ink-dim); }
.js:not(.rm) .stop-elementos .etq { opacity: 0; transition: opacity 1s ease .1s; }
.js:not(.rm) .stop-elementos .beat.vis .etq { opacity: 1; }
.js:not(.rm) .stop-elementos .el { opacity: 0; }
.js:not(.rm) .stop-elementos .beat.vis .el { opacity: 1; }

/* fuego: la llama sube por las letras y después no se queda quieta */
.js:not(.rm) [data-fx="fuego"] .el {
  background: linear-gradient(to bottom, #b8a99c 0 36%, #ffc27a 58%, #ff7a3d 70% 100%) 0 0 / 100% 300% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js:not(.rm) [data-fx="fuego"].vis .el { animation: fuego-sube 2.4s cubic-bezier(.4, 0, .2, 1) .2s forwards, fuego-late 1.3s ease-in-out 2.6s infinite alternate; }
@keyframes fuego-sube { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes fuego-late { from { filter: drop-shadow(0 0 .25rem rgb(255 122 61 / .35)); } to { filter: drop-shadow(0 0 1.3rem rgb(255 122 61 / .8)); } }

/* oscuridad: se desliza por la pared, de lado a lado, y deja una sombra detrás */
.js:not(.rm) [data-fx="oscuridad"] .el { color: #cfc6bb; }
.js:not(.rm) [data-fx="oscuridad"].vis .el { animation: oscuridad-desliza 3s cubic-bezier(.25, .1, .2, 1) .2s both; }
.js:not(.rm) [data-fx="oscuridad"]::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70%; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #000 60%, transparent);
}
.js:not(.rm) [data-fx="oscuridad"].vis::before { animation: oscuridad-sombra 3.6s ease-in-out .2s both; }
@keyframes oscuridad-desliza { from { clip-path: inset(0 100% 0 0); transform: translateX(-3rem); } to { clip-path: inset(0 -2% 0 0); transform: none; } }
@keyframes oscuridad-sombra { 0% { opacity: 0; transform: translateX(-80%); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateX(150%); } }

/* abismo: el texto cae */
.js:not(.rm) [data-fx="abismo"] .el { transform: translateY(-8vh); transform-origin: top; }
.js:not(.rm) [data-fx="abismo"].vis .el { opacity: 1; animation: abismo-cae 3.2s cubic-bezier(.55, 0, 1, .6) .5s forwards; }
@keyframes abismo-cae { from { transform: translateY(-8vh); } to { transform: translateY(12vh) scaleY(1.2); } }

/* luz: se enciende como una vela y titila */
.js:not(.rm) [data-fx="luz"] .el { color: var(--ink); }
.js:not(.rm) [data-fx="luz"].vis .el { animation: luz-enciende 2.4s ease 1s forwards, luz-titila 2.8s ease-in-out 3.4s infinite alternate; }
@keyframes luz-enciende { from { color: var(--ink); text-shadow: 0 0 0 rgb(224 162 58 / 0); } to { color: var(--amber); text-shadow: 0 0 2.6rem rgb(224 162 58 / .55); } }
@keyframes luz-titila { from { text-shadow: 0 0 1.8rem rgb(224 162 58 / .4); } to { text-shadow: 0 0 3rem rgb(224 162 58 / .7); } }

/* ---------- secciones ---------- */
.seccion { padding: clamp(5rem, 14vh, 9rem) var(--gutter); scroll-margin-top: 2.5rem; }
.titulo {
  font: 800 clamp(2.6rem, 9vw, 7.5rem)/.92 var(--filo); letter-spacing: -.045em;
  margin-bottom: clamp(1.2rem, 3vh, 2rem); text-wrap: balance; padding-bottom: .08em;
}
.titulo em { font-family: var(--seda); font-style: italic; font-weight: 500; letter-spacing: -.02em; color: var(--ember-soft); }
.ayuda-texto { color: var(--ink-dim); font-style: italic; max-width: 40rem; margin-bottom: 2rem; }

/* revelaciones al entrar en pantalla (solo con JS y sin reduce motion) */
.js:not(.rm) .rev { opacity: 0; transform: translateY(2.2rem); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js:not(.rm) .rev.vis { opacity: 1; transform: none; }
.js:not(.rm) .titulo.rev { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease), opacity .4s; opacity: 1; }
.js:not(.rm) .titulo.rev.vis { clip-path: inset(0 -1% 0 0); }
.js:not(.rm) .titulo.rev em { display: inline-block; transform: translateX(-1.2rem); opacity: 0; transition: transform 1s var(--ease) .5s, opacity 1s ease .5s; }
.js:not(.rm) .titulo.rev.vis em { transform: none; opacity: 1; }
.js:not(.rm) .rev-l { display: inline-block; transform: translateX(-60vw); opacity: 0; transition: transform 1.4s var(--ease), opacity 1s; }
.js:not(.rm) .rev-r { display: inline-block; transform: translateX(60vw); opacity: 0; transition: transform 1.6s var(--ease) 1.1s, opacity 1.2s ease 1.1s; }
.js:not(.rm) .pie.vis .rev-l, .js:not(.rm) .pie.vis .rev-r { transform: none; opacity: 1; }

/* ---------- escritos: nube de títulos ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: clamp(2rem, 6vh, 3.5rem); }
.filtro { font: 500 .9rem var(--mono); color: var(--ink-faint); padding: .45rem 0; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.filtro:hover { color: var(--ink); }
.filtro[aria-pressed="true"] { color: var(--ember-soft); border-bottom-color: var(--ember); }
.nube { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.8rem; }
.pieza {
  display: inline-block; text-align: left; line-height: 1.02; padding: .15em 0;
  color: var(--ink-dim); margin-left: var(--ml, 0); margin-top: var(--mt, 0);
  transform: rotate(var(--r, 0deg)); transform-origin: left center;
  text-wrap: balance; max-width: 100%;
  transition: color .3s, transform .5s var(--ease), letter-spacing .5s var(--ease);
}
.pieza.filo { font-family: var(--filo); font-weight: 800; letter-spacing: -.035em; }
.pieza.seda { font-family: var(--seda); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.pieza:hover { color: var(--ember-soft); transform: rotate(0deg) translateX(.5rem); }
.pieza.filo:hover { letter-spacing: -.01em; }
.pieza.pesado { text-decoration: underline; text-decoration-color: var(--blood); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.pieza[hidden] { display: none; }
/* las piezas llegan una tras otra, cada una desde su propio ángulo */
.js:not(.rm) .pieza.rev { transform: translateY(2rem) rotate(calc(var(--r, 0deg) * 3)); }
.js:not(.rm) .pieza.rev.vis { transform: rotate(var(--r, 0deg)); }
.js:not(.rm) .pieza.rev.vis:hover { transform: rotate(0deg) translateX(.5rem); transition-delay: 0s; }
.sin-resultados { color: var(--ink-dim); font-style: italic; margin-top: 1rem; }
@media (max-width: 700px) { .pieza { transform: rotate(calc(var(--r, 0deg) * .4)); margin-left: calc(var(--ml, 0px) * .4); } }

/* ---------- crónicas: noches gigantes que se encienden al llegar ---------- */
.noches { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem clamp(.8rem, 3vw, 3rem); }
.noche {
  display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; position: relative;
  margin-left: var(--ml, 0); transform: rotate(var(--r, 0deg)); transform-origin: left bottom;
}
.noche .n { font: 800 clamp(4.6rem, 14vw, 11rem)/.86 var(--filo); letter-spacing: -.06em; color: var(--ember); transition: color .4s, transform .5s var(--ease); }
.noche .m { font: 500 .8rem var(--mono); color: var(--ink-faint); margin-top: .35rem; }
button.noche:hover .n { color: var(--ember-soft); transform: translateY(-.4rem); }
.noche.pesada::after { content: ""; position: absolute; left: 0; top: .2rem; width: 2.2rem; height: 3px; background: var(--blood); }
.noche.vacia .n { color: transparent; -webkit-text-stroke: 1px #4a3f41; }
.noche.vacia .m { color: #5d544d; }
.js:not(.rm) .noche.rev { transform: translateY(3rem) rotate(calc(var(--r, 0deg) * 2)); }
.js:not(.rm) .noche.rev.vis { transform: rotate(var(--r, 0deg)); }
/* al llegar, las noches con texto se encienden: de brasa apagada a brasa viva */
@media (prefers-reduced-motion: no-preference) {
  .js .noche.rev.vis:not(.vacia) .n { animation: enciende 1.8s ease-out both; animation-delay: calc(var(--d, 0) * 1ms + .3s); }
  @keyframes enciende { 0% { color: #2b1a17; } 55% { color: #ff9b6b; } 100% { color: var(--ember); } }
}

/* ---------- bestiario: el scroll vertical se vuelve horizontal ---------- */
.gal { position: relative; }
.gal-pin { position: relative; overflow: hidden; }
.gal-track { display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(1.5rem, 4vw, 4rem); padding: 5rem var(--gutter); }
.js .gal { height: var(--h, 400vh); }
.js .gal-pin { position: sticky; top: 0; height: 100dvh; }
.js .gal-track { flex-wrap: nowrap; align-items: center; height: 100%; padding-top: 4.5rem; padding-bottom: 3rem; will-change: transform; width: max-content; }
.rm .gal { height: auto; }
.rm .gal-pin { position: relative; height: auto; }
.rm .gal-track { flex-wrap: wrap; width: auto; height: auto; }

.gal-intro { flex: 0 0 min(44rem, 80vw); }
.gal-fin { flex: 0 0 min(26rem, 78vw); padding-right: var(--gutter); font: italic 400 clamp(1.5rem, 3vw, 2.4rem)/1.2 var(--seda); color: var(--ink-dim); }
.gal-fin a { display: inline-block; margin-top: 1.2rem; font: 700 1rem var(--filo); border-bottom: 2px solid var(--ember); text-decoration: none; padding-bottom: .15rem; color: var(--ink); }
.gal-barra { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.2rem; height: 2px; background: #2a2325; }
.gal-barra span { display: block; height: 100%; background: var(--ember); transform-origin: left; transform: scaleX(var(--gp, 0)); }
.rm .gal-barra { display: none; }

.cria {
  position: relative; flex: 0 0 min(25rem, 80vw); align-self: center; padding: 1.4rem 0 0;
  display: flex; flex-direction: column; gap: .9rem;
  border-top: 2px solid #3a3032;
  opacity: var(--o, 1); transform: scale(var(--s, 1)); transform-origin: left center;
  transition: border-color .5s;
}
.cria.activa { border-top-color: var(--ember); }
.cria .tipo { font: 500 .8rem var(--mono); letter-spacing: .05em; color: var(--ink-faint); }
.cria h3 { font: 800 clamp(2.4rem, 5vw, 3.8rem)/.98 var(--filo); letter-spacing: -.045em; text-wrap: balance; transition: color .5s; }
.cria.activa h3 { color: var(--ember-soft); }
.cria .cita { font: italic 400 clamp(1.2rem, 2vw, 1.5rem)/1.35 var(--seda); color: var(--ink); max-width: 24rem; }
.cria .nota { font: 500 .85rem var(--mono); color: var(--ember-soft); }

/* ojos que aparecen en la oscuridad cuando la carta llega al centro */
.ojos { display: flex; gap: .9rem; margin: .2rem 0 .3rem; }
.ojos i { display: block; width: 1.5rem; height: .72rem; border-radius: 50%; background: var(--ember); box-shadow: 0 0 .9rem rgb(217 84 43 / .8); position: relative; opacity: 0; transform: scaleY(.1); transition: opacity .6s ease, transform .6s var(--ease); }
.ojos i::after { content: ""; position: absolute; left: 50%; top: 8%; width: 2px; height: 84%; margin-left: -1px; background: #120807; }
.js .cria.activa .ojos i { opacity: 1; transform: scaleY(1); }
.js .cria.activa .ojos i:nth-child(2) { transition-delay: .18s; }
.rm .ojos i, html:not(.js) .ojos i { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .cria { flex-basis: 80vw; }
  .js .gal-track { padding-top: 4rem; }
}

/* ---------- oráculo: un cartel ---------- */
.cartel { min-height: 56vh; display: grid; align-content: center; padding: 2rem 0; }
.cartel-texto {
  font: 800 clamp(2.2rem, 8.5vw, 7.5rem)/1 var(--filo); letter-spacing: -.045em; text-wrap: balance;
  margin-left: var(--cl, 0); transform: rotate(var(--cr, 0deg)); transform-origin: left center; max-width: 100%;
}
.cartel-texto.es-seda { font-family: var(--seda); font-style: italic; font-weight: 500; letter-spacing: -.02em; color: var(--ember-soft); }
.cartel-texto.mezcla { color: var(--ember); }
.tirar { font: 700 1rem var(--filo); padding: .95rem 1.7rem; border: 1px solid var(--ember); border-radius: var(--radius); color: var(--ink); transition: background .25s, color .25s, transform .15s; }
.tirar:hover { background: var(--ember); color: #111; }
.tirar:active { transform: translateY(1px) scale(.98); }

/* ---------- pie ---------- */
.pie { padding: 4rem 0 5rem; overflow: hidden; display: grid; gap: .9rem; color: var(--ink-dim); }
.pie-grande { font: 800 clamp(3.4rem, 15vw, 14rem)/.86 var(--filo); letter-spacing: -.055em; margin: 0 0 0 calc(var(--gutter) * -.3); color: var(--ink); }
.pie-grande span { display: block; }
.pie-grande span:last-child { font-family: var(--seda); font-style: italic; font-weight: 500; letter-spacing: -.03em; color: var(--ember); margin-left: clamp(1rem, 10vw, 12rem); }
.pie a, .pie small { margin-left: var(--gutter); }
.pie a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--ember); width: max-content; font-family: var(--filo); }
.pie small { font: 400 .8rem var(--filo); color: var(--ink-faint); }

/* ---------- la sala: cada texto, a pantalla completa ---------- */
.sala {
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: var(--bg); color: var(--ink); overflow-y: auto;
}
.sala::backdrop { background: #000; }
.sala .bg { z-index: 0; }
.sala .scan { z-index: 5; }
.sala-cerrar {
  position: fixed; top: 1rem; right: var(--gutter); z-index: 10; padding: .65rem 1.1rem;
  font: 700 .95rem var(--filo); border: 1px solid #3a3032; border-radius: var(--radius); background: rgb(17 17 17 / .92); color: var(--ink);
}
.sala-cerrar:hover { border-color: var(--ember); }
.sala-cuerpo { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; padding: 6.5rem var(--gutter) 8rem; }
.texto { background: transparent; }
.texto h3, .texto h1 { font: 800 clamp(2.2rem, 6.4vw, 4.2rem)/1 var(--filo); letter-spacing: -.045em; margin-bottom: 2.4rem; outline: none; text-wrap: balance; }
.texto .verse, .texto .prose { max-width: var(--measure); margin-bottom: 1.5rem; text-wrap: pretty; }
.texto .verse { line-height: 1.8; font-size: 1.1em; }
.texto .prose { line-height: 1.7; }
.texto hr.voz { border: 0; height: 1px; max-width: 8rem; margin: 2.8rem 0; background: linear-gradient(to right, var(--ember), transparent); }
.texto .redact { color: #3d3436; user-select: none; letter-spacing: -.05em; }
.pager { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 3rem; }
.pager button { font: 700 .95rem var(--filo); padding: .8rem 1.2rem; border: 1px solid #3a3032; border-radius: var(--radius); background: rgb(24 20 21 / .9); transition: border-color .25s, transform .15s; }
.pager button:hover { border-color: var(--ember); }
.pager button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) {
  .sala[open] .sala-cuerpo { animation: abre .7s var(--ease) both; }
  @keyframes abre { from { opacity: 0; transform: translateY(2.5rem); } }
}

/* ---------- AVISO DE PIEZA PESADA ---------- */
.aviso {
  max-width: var(--measure); margin: 0 0 2.2rem; padding: 1rem 1.2rem;
  border: 1px solid var(--blood-deep); border-left-width: 4px; border-radius: var(--radius);
  background: rgb(122 20 32 / .2); color: var(--ink); font: 400 .98rem/1.5 var(--filo);
}
.aviso strong { font-weight: 800; color: var(--silver); letter-spacing: .02em; }
.aviso p + p { margin-top: .5rem; }
.aviso .tel { color: var(--ember-soft); white-space: nowrap; font-weight: 700; }
.aviso .ayuda { color: var(--ink-dim); font-size: .92rem; }

/* ---------- GLITCH: solo cuando algo se rompe ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.glitch .bg-img:first-child { opacity: .5; }
  html.glitch .bg-r, html.glitch .bg-c { opacity: .55; }
  html.glitch .bg-r { animation: gl-r .08s steps(2) infinite; }
  html.glitch .bg-c { animation: gl-c .1s steps(2) infinite; }
  html.glitch .scan { opacity: 1; }
  .glitching { animation: gl-text .09s steps(2) infinite; text-shadow: 2px 0 rgb(255 59 59 / .8), -2px 0 rgb(59 184 255 / .8); }
  @keyframes gl-r { 0% { transform: translateX(-50%) translate(-14px, 0); clip-path: inset(18% 0 56% 0); } 50% { transform: translateX(-50%) translate(10px, 3px); clip-path: inset(52% 0 20% 0); } 100% { transform: translateX(-50%) translate(-6px, -2px); clip-path: inset(70% 0 8% 0); } }
  @keyframes gl-c { 0% { transform: translateX(-50%) translate(15px, 0); clip-path: inset(58% 0 16% 0); } 50% { transform: translateX(-50%) translate(-11px, -3px); clip-path: inset(22% 0 50% 0); } 100% { transform: translateX(-50%) translate(7px, 2px); clip-path: inset(6% 0 78% 0); } }
  @keyframes gl-text { 0% { transform: translateX(0); } 50% { transform: translateX(-3px); } 100% { transform: translateX(2px); } }
}


/* ---------- WordPress ---------- */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }
.nav ul { display: flex; gap: clamp(1rem, 3vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; color: var(--ink-dim); padding: .5rem 0; white-space: nowrap; transition: color .25s; }
.nav ul a:hover { color: var(--ink); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

/* páginas de lectura (un escrito, una crónica, una página) */
.leer { position: relative; z-index: 2; min-height: 100dvh; }
.leer .sala-cuerpo { padding-top: 7.5rem; }
.leer .volver { display: inline-block; margin-top: 3rem; font: 700 .95rem var(--filo); border-bottom: 2px solid var(--ember); text-decoration: none; padding-bottom: .15rem; }
.leer .meta { font: 500 .8rem var(--mono); color: var(--ink-faint); margin-bottom: 1rem; letter-spacing: .04em; }
.leer .contenido > * { max-width: var(--measure); }
.leer .contenido a { text-underline-offset: 4px; text-decoration-color: var(--ember); }
.lista-escritos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .6rem; }
.lista-escritos a { font: 800 clamp(1.4rem, 3vw, 2.2rem)/1.1 var(--filo); letter-spacing: -.03em; text-decoration: none; }
.lista-escritos a:hover { color: var(--ember-soft); }