/* Kora Academic Games: la noche violeta y el pixel art de The Nurse Guardian, con el naranja del logotipo. */

/* Los números de la fuente pixelada se confunden: solo las cifras salen de Atkinson, como en el juego. */
@font-face {
  font-family: 'Pixel Digits';
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-700.woff2') format('woff2');
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Pixelify Sans';
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/pixelify-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Pixelify Sans';
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/pixelify-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-hyperlegible-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
}

:root {
  --night-0: #0b0718;
  --night-1: #110c24;
  --night-2: #1a1238;
  --night-3: #2a1d55;
  --cream: #fff4dc;
  --paper: #f6f1e7;
  --paper-deep: #ebe2d0;
  --card: #fffdf8;
  --line: #d9cfbb;
  --ink: #1f2a2e;
  --ink-soft: #4e5a57;
  --outline: #2a2233;
  --orange: #f7941d;
  --orange-hi: #ffc24b;
  --orange-deep: #c9560f;
  --teal: #1f6f66;
  --teal-strong: #17564f;
  --teal-hi: #56d0bf;
  --coral: #c8473d;
  --yellow: #f2c14e;
  --violet: #8a63d2;
  --font: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-pixel: 'Pixel Digits', 'Pixelify Sans', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --nav-h: 68px;
  --step-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23f6f1e7' d='M0 16V8h16V0h24v8h16v4h24V4h16v12z'/%3E%3C/svg%3E");
  --step-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23110c24' d='M0 16V8h16V0h24v8h16v4h24V4h16v12z'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  /* La tipografía pixel dibuja mal la unión «fi»: sin ligaduras, como en el juego. */
  font-variant-ligatures: none;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cream);
  background: var(--night-1);
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 4.3vw, 3.5rem);
}

h3 {
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--orange-hi);
  text-underline-offset: 3px;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  font-variant-ligatures: none;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 40px, 1200px);
  margin-inline: auto;
}

.wrap--narrow {
  width: min(100% - 40px, 860px);
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 8px 12px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--outline);
  z-index: 100;
}

.skip:focus {
  left: 16px;
}

/* Texto para lectores de pantalla, que no se ve. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Cielo y mundo 3D ─────────────────────────────────────── */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #0c081d 0%, #150e33 40%, #24174f 78%, #33205f 100%);
  pointer-events: none;
}

/* El atardecer de la portada: se apaga al bajar. */
.sky__glow {
  position: absolute;
  inset: 0;
  opacity: var(--sky, 1);
  background:
    radial-gradient(100% 68% at 70% 106%, rgba(255, 176, 112, 1) 0%, rgba(240, 110, 134, 0.9) 24%, rgba(160, 66, 156, 0.62) 50%, transparent 78%),
    radial-gradient(70% 60% at 100% 60%, rgba(120, 60, 170, 0.35), transparent 70%);
}

.sky__stars {
  position: absolute;
  inset: 0;
  opacity: 0.75;
  background-image:
    radial-gradient(1.5px 1.5px at 24px 36px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 132px 84px, #ffe9c4 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 208px 22px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 72px 168px, #d9c8ff 50%, transparent 52%),
    radial-gradient(2px 2px at 276px 204px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 180px 250px, #ffe9c4 50%, transparent 52%),
    radial-gradient(1px 1px at 310px 120px, #fff 50%, transparent 52%);
  background-size: 340px 290px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
}

.world {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.world.is-ready {
  opacity: 1;
}

/* Sin figura que mostrar, el mundo 3D se apaga: detrás del texto no flota nada. */
.world.is-ready.is-dust {
  opacity: 0;
}

main,
.foot {
  position: relative;
  z-index: 2;
}

/* La cinta inclinada sobresale por los lados: se recorta sin romper los elementos fijos al hacer scroll. */
main {
  overflow-x: clip;
}

/* ─── Botones ──────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.95em 1.35em;
  font: 400 1.06rem/1 var(--font-pixel);
  letter-spacing: 0.01em;
  color: var(--outline);
  text-decoration: none;
  background: linear-gradient(180deg, #ffd166 0%, var(--orange) 78%);
  border: 3px solid var(--outline);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 rgba(160, 60, 0, 0.3), 0 6px 0 var(--night-0);
  cursor: pointer;
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 rgba(160, 60, 0, 0.3), 0 8px 0 var(--night-0);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 rgba(160, 60, 0, 0.3), 0 2px 0 var(--night-0);
}

.btn--sm {
  padding: 0.7em 1em;
  font-size: 0.95rem;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 4px 0 var(--night-0);
}

.btn--ghost {
  color: var(--cream);
  background: rgba(20, 12, 44, 0.55);
  border-color: var(--cream);
  box-shadow: 0 6px 0 rgba(8, 4, 20, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  box-shadow: 0 8px 0 rgba(8, 4, 20, 0.7);
  background: rgba(40, 26, 80, 0.7);
}

.btn--ghost:active {
  box-shadow: 0 2px 0 rgba(8, 4, 20, 0.7);
}

.btn--teal {
  color: var(--cream);
  background: linear-gradient(180deg, #2fae9d 0%, var(--teal) 80%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 6px 0 var(--night-0);
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  filter: grayscale(0.6) brightness(0.9);
  cursor: progress;
}

/* ─── Cabecera y marcador ──────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(16px, 3vw, 36px);
  border-bottom: 3px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.nav.is-stuck,
.nav.is-open,
.sub .nav {
  background: rgba(15, 10, 34, 0.9);
  border-bottom-color: var(--night-0);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav__logo {
  flex: none;
  margin-right: auto;
}

.nav__logo img {
  height: 40px;
  width: auto;
}

.nav__links {
  display: flex;
  gap: clamp(12px, 2vw, 28px);
}

.nav__links a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.97rem;
  opacity: 0.86;
  padding: 6px 0;
  border-bottom: 3px solid transparent;
}

.nav__links a:hover,
.nav__links a[aria-current] {
  opacity: 1;
  border-bottom-color: var(--orange);
}

.xp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 6px;
  font: 400 0.95rem/1 var(--font-pixel);
  color: var(--cream);
  background: rgba(8, 4, 20, 0.6);
  border: 2px solid rgba(255, 244, 220, 0.28);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.xp:hover {
  border-color: var(--orange-hi);
}

.xp.is-bump {
  animation: bump-xp 1.5s ease;
}

.xp__lvl {
  padding: 5px 7px;
  color: var(--outline);
  background: var(--orange-hi);
}

.xp__bar {
  position: relative;
  width: 74px;
  height: 10px;
  background: rgba(255, 244, 220, 0.16);
  overflow: hidden;
}

.xp__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-hi));
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Muescas del marcador, como una barra de vida. */
.xp__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(8, 4, 20, 0.9) 6px 8px);
}

.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 2px solid rgba(255, 244, 220, 0.28);
  cursor: pointer;
}

.nav__burger span,
.nav__burger span::before,
.nav__burger span::after {
  display: block;
  width: 20px;
  height: 3px;
  margin: auto;
  background: var(--cream);
  content: '';
}

.nav__burger span {
  position: relative;
}

.nav__burger span::before {
  position: absolute;
  top: -7px;
}

.nav__burger span::after {
  position: absolute;
  top: 7px;
}

/* ─── Portada ──────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 28px) 0 96px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.5rem, 5.5vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 0.45em;
  text-shadow: 0 2px 24px rgba(12, 8, 29, 0.55);
}

.hero__kicker {
  display: block;
  margin-bottom: 1.5em;
  font: 400 clamp(0.95rem, 1.25vw, 1.1rem) / 1.2 var(--font-pixel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-hi);
  text-shadow: none;
}

/* El «▶» parpadeante va por CSS para que no forme parte del texto del titular. */
.hero__kicker::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.6em;
  animation: blink 1.1s steps(2, jump-none) infinite;
}

/* «tu temario», en la serif de los apuntes y subrayado con fluorescente. */
.mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  padding: 0 0.08em;
  background: linear-gradient(transparent 60%, rgba(242, 193, 78, 0.5) 60% 90%, transparent 90%);
}

/* «videojuego», en pixel art y con volumen, como el título del juego. */
.pxword {
  display: inline-block;
  font-family: var(--font-pixel);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--orange-hi);
  background: linear-gradient(180deg, #fff3c4 8%, #ffc24b 46%, #f7941d 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.05em 0 #a8480f) drop-shadow(0 0.05em 0 #1a1230);
  text-shadow: none;
}

.hero__lead {
  max-width: 34em;
  font-size: clamp(1.08rem, 1.45vw, 1.3rem);
  line-height: 1.55;
  text-shadow: 0 1px 16px rgba(12, 8, 29, 0.7);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 1.9em 0 2.1em;
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 33em;
  margin: 0;
  padding: 10px 16px 10px 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  background: rgba(12, 8, 29, 0.55);
  border-left: 4px solid var(--orange);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero__proof img {
  flex: none;
  width: 48px;
  height: 64px;
  object-fit: contain;
}

.hero__stage {
  position: relative;
  width: 100%;
  height: min(76vh, 760px);
  min-height: 420px;
  pointer-events: auto;
}

.stage__poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.js .stage__poster {
  display: none;
}

.no-webgl .stage__poster {
  display: block;
}

.morph {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-pixel);
}

.no-webgl .morph {
  display: none;
}

.morph__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--cream);
  background: rgba(12, 8, 29, 0.6);
  border: 2px solid rgba(255, 244, 220, 0.35);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.morph__btn svg {
  width: 24px;
  height: 24px;
}

.morph__btn.is-on {
  color: var(--outline);
  background: var(--cream);
  border-color: var(--outline);
  box-shadow: 0 4px 0 var(--night-0);
}

.morph__arrow {
  color: var(--cream);
  opacity: 0.8;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  font: 400 0.95rem/1.2 var(--font-pixel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  text-shadow: 0 1px 8px rgba(12, 8, 29, 0.8);
}

.hero__scroll i {
  font-style: normal;
  animation: bob 1.4s ease-in-out infinite;
}

/* ─── Cinta de públicos ────────────────────────────────────── */

.ticker {
  position: relative;
  z-index: 3;
  display: flex;
  overflow: hidden;
  background: var(--orange);
  border-block: 4px solid var(--outline);
  box-shadow: 0 6px 0 var(--night-0);
  transform: rotate(-1.2deg) scale(1.02);
}

.ticker__track {
  flex: none;
  display: flex;
  animation: marquee 34s linear infinite;
}

.ticker li {
  padding: 14px 0;
  font: 400 1.15rem/1 var(--font-pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--outline);
}

.ticker li::after {
  content: '✦';
  margin: 0 22px;
  color: var(--cream);
}

/* ─── Secciones ────────────────────────────────────────────── */

.sec {
  position: relative;
  padding: clamp(84px, 11vw, 150px) 0;
}

.sec--paper {
  color: var(--ink);
  background-color: var(--paper);
  /* Papel cuadriculado, como el de los apuntes. */
  background-image:
    linear-gradient(rgba(31, 111, 102, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 111, 102, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

.sec--ink {
  background: var(--night-1);
}

/* Bordes escalonados entre el cielo y las secciones opacas. */
.sec--paper::before,
.sec--paper::after,
.sec--ink::before,
.sec--ink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background: var(--step-cream) repeat-x;
  pointer-events: none;
}

.sec--ink::before,
.sec--ink::after {
  background-image: var(--step-ink);
}

.sec--paper::before,
.sec--ink::before {
  top: -15px;
}

.sec--paper::after,
.sec--ink::after {
  bottom: -15px;
  transform: scaleY(-1);
  z-index: 1;
}

.sec--paper a {
  color: var(--teal-strong);
}

.sec__head {
  max-width: 800px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.level {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font: 400 0.98rem/1 var(--font-pixel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-hi);
}

.level span {
  padding: 6px 9px;
  color: var(--outline);
  background: var(--orange-hi);
  box-shadow: 3px 3px 0 var(--night-0);
}

.level--ink {
  color: var(--teal-strong);
}

.level--ink span {
  color: var(--cream);
  background: var(--outline);
  box-shadow: 3px 3px 0 var(--orange);
}

.level--boss span {
  color: var(--cream);
  background: var(--coral);
}

.soft {
  color: rgba(255, 244, 220, 0.62);
}

.sec--paper .soft {
  color: var(--teal);
}

.lead {
  max-width: 40em;
  font-size: clamp(1.08rem, 1.4vw, 1.24rem);
  line-height: 1.6;
}

.sec--night .lead {
  color: rgba(255, 244, 220, 0.86);
}

.ticks {
  display: grid;
  gap: 10px;
  margin: 1.4em 0;
}

.ticks li {
  position: relative;
  padding-left: 30px;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 11px;
  height: 11px;
  background: var(--teal-hi);
  box-shadow: 3px 3px 0 var(--night-0);
}

/* ─── Demo: el combate ─────────────────────────────────────── */

.battle {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  border: 4px solid var(--outline);
  box-shadow: 0 0 0 2px rgba(255, 244, 220, 0.14), 12px 12px 0 rgba(8, 4, 20, 0.6);
  scroll-margin-top: calc(var(--nav-h) + 14px);
  font-variant-ligatures: none;
}

.battle.is-shake {
  animation: quake 0.45s linear;
}

.battle__nojs {
  margin: 0;
  padding: 28px;
  color: var(--ink);
  background: var(--paper);
}

/* La arena es una ventana: detrás se ve el mundo 3D, donde vive el jefe. */
.arena {
  position: relative;
  height: clamp(310px, 43vh, 470px);
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(38% 60% at 71% 48%, rgba(214, 186, 255, 0.62) 0%, rgba(138, 99, 210, 0.3) 52%, transparent 78%),
    linear-gradient(180deg, rgba(11, 7, 24, 0.6) 0%, rgba(11, 7, 24, 0.08) 42%, rgba(11, 7, 24, 0.7) 100%);
  box-shadow: inset 0 0 90px rgba(8, 4, 20, 0.85);
}

.arena[data-rage] {
  background:
    radial-gradient(38% 60% at 71% 48%, rgba(255, 150, 120, 0.62) 0%, rgba(224, 82, 74, 0.34) 52%, transparent 78%),
    linear-gradient(180deg, rgba(40, 6, 14, 0.6) 0%, rgba(40, 6, 14, 0.1) 42%, rgba(40, 6, 14, 0.72) 100%);
}

.arena[data-state="win"] {
  background:
    radial-gradient(38% 60% at 71% 48%, rgba(255, 226, 150, 0.6) 0%, rgba(255, 194, 75, 0.28) 52%, transparent 78%),
    linear-gradient(180deg, rgba(11, 7, 24, 0.6) 0%, rgba(11, 7, 24, 0.08) 42%, rgba(11, 7, 24, 0.7) 100%);
}

/* Suelo en perspectiva que avanza hacia quien juega. */
.arena__floor {
  position: absolute;
  left: -35%;
  right: -35%;
  bottom: -4%;
  height: 66%;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(255, 194, 75, 0.7) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 194, 75, 0.7) 2px, transparent 2px);
  background-size: 56px 56px;
  transform: perspective(420px) rotateX(60deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  animation: floor 2.2s linear infinite;
}

.arena[data-rage] .arena__floor {
  filter: hue-rotate(-38deg) saturate(1.7);
  animation-duration: 0.9s;
}

.arena__stage {
  position: absolute;
  top: 70px;
  bottom: 22px;
  right: 3%;
  width: 52%;
  display: grid;
  place-items: center;
}

/* Solo sin WebGL: el jefe en 2D. */
.arena__boss2d {
  display: none;
  width: min(62%, 250px);
  filter: drop-shadow(0 10px 0 rgba(8, 4, 20, 0.45));
  animation: hover 2.4s ease-in-out infinite;
}

.no-webgl .arena__boss2d {
  display: block;
}

.arena__top {
  position: absolute;
  inset: 14px 14px auto 14px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.bossbar {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: end;
}

.bossbar__name {
  font: 800 clamp(1.05rem, 2.1vw, 1.55rem) / 1 var(--font-display);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 0 var(--night-0);
}

.bossbar__phase {
  font: 400 0.95rem/1 var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-hi);
}

.bossbar__hp {
  grid-column: 1 / -1;
  position: relative;
  height: 18px;
  background: rgba(8, 4, 20, 0.8);
  border: 3px solid var(--cream);
}

.bossbar__ghost,
.bossbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
}

/* La barra blanca se queda atrás un instante: se ve cuánto ha quitado el golpe. */
.bossbar__ghost {
  background: var(--cream);
  transition: width 0.8s 0.35s ease-out;
}

.bossbar__fill {
  background: linear-gradient(180deg, #ff8a80, var(--coral));
  transition: width 0.18s ease-out;
}

.arena__mute {
  flex: none;
  padding: 8px 10px;
  font: 400 0.95rem/1 var(--font-pixel);
  color: var(--cream);
  background: rgba(8, 4, 20, 0.75);
  border: 2px solid rgba(255, 244, 220, 0.4);
  cursor: pointer;
}

.arena__mute[aria-pressed="true"] {
  color: var(--outline);
  background: var(--orange-hi);
  border-color: var(--outline);
}

.arena__bubble {
  position: absolute;
  top: 88px;
  left: 23%;
  z-index: 2;
  max-width: 34%;
  margin: 0;
  padding: 10px 14px;
  font: 400 1.02rem/1.35 var(--font-pixel);
  color: var(--outline);
  background: var(--cream);
  border: 3px solid var(--outline);
  box-shadow: 5px 5px 0 rgba(8, 4, 20, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.arena__bubble.is-on {
  opacity: 1;
  transform: none;
}

.arena__bubble::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 16px;
  border: 8px solid transparent;
  border-left-color: var(--outline);
}

.arena__hero {
  position: absolute;
  left: 4%;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.arena__sprite {
  display: block;
  width: clamp(120px, 17vw, 205px);
  height: auto;
  filter: drop-shadow(0 12px 10px rgba(8, 4, 20, 0.55));
  animation: bob 2.6s ease-in-out infinite;
}

/* Esperando a que elijas: baila de lado a lado. */
.arena.is-waiting .arena__sprite {
  transform-origin: 50% 100%;
  animation: dance 0.84s steps(1) infinite;
}

.arena__hero.is-attack .arena__sprite {
  animation: dash 0.54s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arena__hero.is-hurt .arena__sprite {
  animation: hurt 0.52s steps(4, jump-none);
}

.hud {
  display: grid;
  gap: 7px;
  justify-items: start;
  padding-bottom: 4px;
}

.hud__combo {
  min-height: 1.5rem;
  font: 800 1.5rem/1 var(--font-display);
  color: var(--orange-hi);
  text-shadow: 0 3px 0 var(--night-0);
}

.hud__hearts {
  display: flex;
  gap: 5px;
}

/* Corazón en píxeles, recortado sobre una rejilla de 7 × 6. */
.hud__hearts i {
  width: 23px;
  height: 20px;
  background: #ff6b61;
  clip-path: polygon(14.3% 0, 42.9% 0, 42.9% 16.7%, 57.1% 16.7%, 57.1% 0, 85.7% 0, 85.7% 16.7%, 100% 16.7%, 100% 50%, 85.7% 50%, 85.7% 66.7%, 71.4% 66.7%, 71.4% 83.3%, 57.1% 83.3%, 57.1% 100%, 42.9% 100%, 42.9% 83.3%, 28.6% 83.3%, 28.6% 66.7%, 14.3% 66.7%, 14.3% 50%, 0 50%, 0 16.7%, 14.3% 16.7%);
}

.hud__hearts i.is-off {
  background: rgba(255, 244, 220, 0.22);
}

.hud__party {
  display: flex;
  gap: 6px;
}

.hud__party li {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font: 400 1rem/1 var(--font-pixel);
  color: rgba(255, 244, 220, 0.5);
  background: rgba(8, 4, 20, 0.6);
  border: 2px dashed rgba(255, 244, 220, 0.4);
}

.hud__party li.is-on {
  padding: 4px;
  background: var(--cream);
  border: 2px solid var(--outline);
  box-shadow: 0 0 0 2px var(--orange-hi), 0 0 18px rgba(255, 194, 75, 0.8);
  animation: cardget 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.hud__points {
  font: 400 1.02rem/1 var(--font-pixel);
  letter-spacing: 0.06em;
}

.hud__points.is-bump {
  animation: bump 0.5s ease;
}

/* Las manos del duelo, en bocadillos como los de Alex Kidd. */
.jk {
  position: absolute;
  top: 27%;
  z-index: 3;
  width: clamp(76px, 11vw, 118px);
  padding: 10px;
  background: var(--cream);
  border: 4px solid var(--outline);
  border-radius: 22px;
  box-shadow: 6px 6px 0 rgba(8, 4, 20, 0.6);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.2, 1.4, 0.3, 1), filter 0.2s ease;
}

.jk--me {
  left: 21%;
}

.jk--boss {
  left: 46%;
}

.jk--boss svg {
  transform: scaleX(-1);
}

.jk.is-on {
  opacity: 1;
  transform: none;
}

.jk.is-count {
  animation: jk 0.43s ease-in-out infinite;
}

.jk.is-win {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px var(--orange-hi), 0 0 32px rgba(255, 194, 75, 0.95);
}

.jk.is-lose {
  transform: scale(0.86) rotate(-6deg);
  filter: grayscale(1) brightness(0.75);
}

.arena__fx {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.fx-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: flash 0.38s ease-out forwards;
}

.fx-flash--red {
  background: #ff3b30;
}

.fx-flash--long {
  animation-duration: 1.2s;
}

.fx-slash {
  position: absolute;
  left: 44%;
  top: 30%;
  width: 50%;
  height: 12px;
  background: linear-gradient(90deg, transparent, #fff 25%, var(--orange-hi) 70%, transparent);
  filter: drop-shadow(0 0 14px var(--orange-hi));
  transform: rotate(-22deg) scaleX(0);
  transform-origin: 0 50%;
  animation: slash 0.42s ease-out forwards;
}

.fx-slash--cross {
  top: 62%;
  transform: rotate(22deg) scaleX(0);
  animation-name: slash-cross;
  animation-delay: 0.08s;
}

.fx-num {
  position: absolute;
  right: 10%;
  top: 30%;
  font: 800 clamp(2.4rem, 6vw, 4.4rem) / 1 var(--font-display);
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 4px 0 var(--outline), 0 0 20px rgba(255, 255, 255, 0.7);
  animation: num 1.15s cubic-bezier(0.2, 1.4, 0.3, 1) forwards;
}

.fx-num--crit {
  color: var(--orange-hi);
  text-shadow: 0 5px 0 #a8480f, 0 9px 0 var(--outline), 0 0 26px rgba(255, 194, 75, 0.9);
}

.fx-num--hurt {
  right: auto;
  left: 9%;
  top: 44%;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #ff8d85;
}

.fx-pts {
  position: absolute;
  left: 20%;
  bottom: 44%;
  font: 800 1.5rem/1 var(--font-display);
  color: var(--orange-hi);
  text-shadow: 0 3px 0 var(--night-0);
  animation: floatup 1.25s ease-out forwards;
}

.fx-confetti {
  position: absolute;
  top: -14px;
  left: var(--x);
  width: 10px;
  height: 10px;
  background: var(--c);
  animation: confetti var(--t) linear var(--d) forwards;
}

.arena__banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  z-index: 5;
  margin: 0;
  padding: 0 12px;
  text-align: center;
  font: 800 clamp(1.7rem, 4.8vw, 3.5rem) / 1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--orange-hi);
  text-shadow: 0 4px 0 #a8480f, 0 8px 0 var(--night-0), 0 0 30px rgba(8, 4, 20, 0.9);
  opacity: 0;
  pointer-events: none;
}

.arena__banner.is-on {
  animation: banner 1.4s ease-out;
}

.arena__banner.is-long {
  animation: banner 2.4s ease-out;
}

/* La mesa: cartas, barra de precisión, lección e informe. */
.deck {
  position: relative;
  min-height: 344px;
  padding: clamp(18px, 2.6vw, 28px);
  color: var(--ink);
  background: var(--paper);
  border-top: 4px solid var(--outline);
  scroll-margin-bottom: 16px;
}

.deck__kicker {
  margin: 0 0 8px;
  font: 400 0.95rem/1.2 var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-strong);
}

.deck__title {
  margin: 0 0 0.4em;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.deck__prompt {
  margin: 0 0 16px;
  font: 700 clamp(1.15rem, 2vw, 1.5rem) / 1.25 var(--font-display);
  letter-spacing: -0.01em;
}

/* Reciben el foco al cambiar de pantalla, para el lector de pantalla; no son controles. */
.deck__prompt:focus,
.deck__title:focus {
  outline: none;
}

.deck__wait {
  margin: 0;
  padding: 110px 0;
  text-align: center;
  font: 400 1.25rem/1.3 var(--font-pixel);
  color: var(--ink-soft);
}

.deck__wait--hit {
  font: 800 clamp(2rem, 5vw, 3.2rem) / 1 var(--font-display);
  color: var(--coral);
  animation: stamp 0.4s cubic-bezier(0.2, 1.5, 0.3, 1);
}

.deck__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.deck .btn {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 5px 0 var(--outline);
}

.btn--plain {
  color: var(--ink);
  background: var(--card);
}

.deck p {
  max-width: 46em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  min-height: 168px;
  padding: 22px 14px 16px;
  text-align: center;
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink);
  background: linear-gradient(180deg, #fffdf8 0%, #f3e8d2 100%);
  border: 3px solid var(--outline);
  box-shadow: 0 6px 0 var(--outline);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
  animation: deal 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.card:hover:not([disabled]) {
  transform: translateY(-7px) rotate(-1.2deg);
  box-shadow: 0 13px 0 var(--outline);
}

.card[disabled] {
  cursor: default;
}

.card__n {
  position: absolute;
  top: 6px;
  left: 9px;
  font: 400 0.95rem/1 var(--font-pixel);
  color: var(--ink-soft);
}

.card__icon {
  width: 66px;
}

.card__hand {
  font: 400 0.95rem/1 var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.card.is-picked {
  transform: translateY(-8px);
  box-shadow: 0 0 0 4px var(--outline), 0 14px 0 var(--outline);
}

/* «Piedra… papel… ¡tijera!», sobre las cartas mientras se decide el duelo. */
.deck__count {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  font: 800 clamp(2.2rem, 6vw, 4rem) / 1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--outline);
  background: rgba(246, 241, 231, 0.88);
}

.deck__count.is-beat {
  animation: stamp 0.3s cubic-bezier(0.2, 1.5, 0.3, 1);
}

.card.is-wrong {
  color: #7d2a24;
  text-decoration: line-through;
  filter: grayscale(0.9) brightness(0.9);
  box-shadow: none;
  transform: translateY(6px) rotate(2deg);
  animation: shake 0.35s ease;
}

.card.is-right {
  background: linear-gradient(180deg, #fff3c4 0%, #ffc24b 100%);
  box-shadow: 0 0 0 4px var(--orange), 0 0 34px rgba(255, 194, 75, 0.95);
  transform: translateY(-8px) scale(1.04);
}

.card.is-out {
  opacity: 0.35;
  box-shadow: none;
  transform: translateY(6px);
}

.deck__miss {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 5px solid var(--coral);
  background: #f9e6e2;
}

.strike__bar {
  position: relative;
  height: 36px;
  margin: 8px 0 4px;
  background: var(--outline);
  border: 3px solid var(--outline);
  overflow: hidden;
}

.strike__good {
  position: absolute;
  inset: 0 30%;
  background: var(--yellow);
}

.strike__perfect {
  position: absolute;
  inset: 0 43%;
  background: #3fbf7a;
}

.strike__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  margin-left: -4px;
  background: #fff;
  box-shadow: 0 0 0 3px var(--outline), 0 0 14px #fff;
}

.strike__btn {
  padding: 0.9em 2.2em;
  font-size: 1.3rem;
}

.lesson {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: start;
}

.gcard {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 28px 12px 18px;
  text-align: center;
  background: linear-gradient(180deg, #fff3c4 0%, #ffc24b 100%);
  border: 3px solid var(--outline);
  box-shadow: 6px 6px 0 var(--outline);
  transform: rotate(-3deg);
  animation: cardget 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

.gcard__new {
  position: absolute;
  top: -13px;
  left: 50%;
  padding: 5px 8px;
  font: 400 0.9rem/1 var(--font-pixel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
  background: var(--coral);
  border: 2px solid var(--outline);
  transform: translateX(-50%);
}

.gcard__icon {
  width: 78px;
}

.gcard__name {
  font: 800 1.08rem/1.15 var(--font-display);
}

.lesson__mech {
  color: var(--teal-strong);
}

.lesson__mech b {
  display: block;
  margin-bottom: 2px;
  font: 400 0.9rem/1.2 var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.lesson__src {
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 36px);
  align-items: start;
}

.rank {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 128px;
  height: 128px;
  margin-top: 8px;
  font: 800 4.8rem/0.9 var(--font-display);
  color: var(--outline);
  background: var(--orange-hi);
  border: 4px solid var(--outline);
  box-shadow: 7px 7px 0 var(--outline);
  transform: rotate(-5deg);
  animation: stamp 0.6s cubic-bezier(0.2, 1.5, 0.3, 1) 0.2s backwards;
}

.rank small {
  font: 400 0.9rem/1 var(--font-pixel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tally {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.tally div {
  padding: 10px 12px;
  background: var(--card);
  border: 2px solid var(--outline);
}

.tally dt {
  font: 400 0.9rem/1.2 var(--font-pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tally dd {
  margin: 5px 0 0;
  font: 800 1.7rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.tally .tally__total {
  color: var(--cream);
  background: var(--outline);
}

.tally__total dt {
  color: var(--orange-hi);
}

.mechs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.mechs li {
  padding: 6px 9px;
  font: 400 0.95rem/1 var(--font-pixel);
  color: var(--cream);
  background: var(--teal);
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: clamp(40px, 6vw, 72px);
}

.principle {
  position: relative;
  padding: 26px 24px 22px;
  background: rgba(17, 12, 36, 0.72);
  border: 2px solid rgba(255, 244, 220, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.principle__n {
  position: absolute;
  top: -16px;
  left: 20px;
  padding: 6px 9px;
  font: 400 0.95rem/1 var(--font-pixel);
  color: var(--outline);
  background: var(--teal-hi);
  box-shadow: 3px 3px 0 var(--night-0);
}

.principle p {
  margin-bottom: 0.7em;
  color: rgba(255, 244, 220, 0.85);
}

.principle__game {
  margin: 0;
  padding-top: 12px;
  border-top: 2px dashed rgba(255, 244, 220, 0.2);
  font-size: 0.97rem;
}

.principle__game b {
  display: block;
  margin-bottom: 4px;
  font: 400 0.9rem/1 var(--font-pixel);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-hi);
}

.evidence {
  max-width: 62em;
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 16px 20px;
  color: rgba(255, 244, 220, 0.9);
  background: rgba(17, 12, 36, 0.72);
  border-left: 5px solid var(--orange);
}

.evidence b {
  color: var(--orange-hi);
}

.refs {
  margin-top: 26px;
  font-size: 0.88rem;
  color: rgba(255, 244, 220, 0.7);
}

.refs summary {
  display: inline-block;
  cursor: pointer;
  font: 400 0.95rem/1 var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 244, 220, 0.85);
}

.refs summary::after {
  content: ' +';
}

.refs[open] summary::after {
  content: ' −';
}

.refs ul {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-width: 62em;
}

.refs li {
  overflow-wrap: anywhere;
}

/* ─── Caso real: The Nurse Guardian ────────────────────────── */

.case {
  padding-top: 0;
}

.case__banner {
  position: relative;
  margin-bottom: clamp(48px, 7vw, 90px);
  overflow: hidden;
}

.case__banner picture img {
  width: 100%;
  height: clamp(420px, 62vw, 760px);
  object-fit: cover;
  object-position: center 40%;
}

.case__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 12, 36, 0.55) 0%, transparent 28%, transparent 62%, var(--night-1) 100%);
}

.case__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: center;
  padding-top: clamp(34px, 6vw, 80px);
  text-align: center;
}

.case__title img {
  width: min(64vw, 620px);
  filter: drop-shadow(0 10px 24px rgba(12, 8, 29, 0.5));
}

.case__tag {
  margin: -6px 0 0;
  font: 400 clamp(1rem, 1.7vw, 1.3rem) / 1 var(--font-pixel);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 0 var(--outline), 0 0 18px rgba(12, 8, 29, 0.8);
}

.case__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.case__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 1.8em 0 0;
}

.case__soon {
  font: 400 0.95rem/1.2 var(--font-pixel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 244, 220, 0.7);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin: 0;
  background: rgba(255, 244, 220, 0.14);
  border: 3px solid rgba(255, 244, 220, 0.14);
}

.stats div {
  display: flex;
  flex-direction: column-reverse;
  padding: 18px 20px;
  background: var(--night-2);
}

.stats dd {
  margin: 0;
  font: 800 clamp(2.1rem, 4vw, 3.2rem) / 1 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--orange-hi);
  font-variant-numeric: tabular-nums;
}

.stats dt {
  margin-top: 6px;
  font-size: 0.92rem;
  line-height: 1.3;
  color: rgba(255, 244, 220, 0.78);
}

.compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 6vw, 90px);
  align-items: center;
  margin-top: clamp(64px, 9vw, 130px);
}

.compare-copy h3 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.compare-copy p {
  max-width: 34em;
  color: rgba(255, 244, 220, 0.85);
}

.hint {
  font: 400 0.95rem/1.3 var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-hi) !important;
}

.phone {
  position: relative;
  padding: 9px;
  background: #0a0616;
  border: 3px solid #3d3350;
  border-radius: 30px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), inset 0 0 0 2px #1d1630;
}

.phone img {
  border-radius: 21px;
}

.phone--big {
  width: min(78vw, 330px);
}

.phone:has(.compare__range:focus-visible) {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

.compare {
  --pos: 50%;
  justify-self: center;
}

.compare__stack {
  position: relative;
  overflow: hidden;
  border-radius: 21px;
}

.compare__pdf {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: #222;
  background: #d5d5d8;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.pdf__bar {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font: 400 0.68rem/1 system-ui, sans-serif;
  color: #eee;
  background: #3a3a40;
  white-space: nowrap;
}

.pdf__page {
  flex: 1;
  margin: 10px 10px 0;
  padding: 18px 16px;
  font-family: 'Times New Roman', Times, serif;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.pdf__h {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.pdf__s {
  margin: 12px 0 5px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.pdf__page i {
  display: block;
  height: 5px;
  margin: 6px 0;
  background: #c4c4c4;
}

.pdf__page i.short {
  width: 58%;
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 4px;
  margin-left: -2px;
  background: var(--orange-hi);
  box-shadow: 0 0 0 2px var(--outline);
}

.compare__handle::after {
  content: '◀ ▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 9px 7px;
  font: 400 0.9rem/1 var(--font-pixel);
  white-space: nowrap;
  color: var(--outline);
  background: var(--orange-hi);
  border: 3px solid var(--outline);
  box-shadow: 0 4px 0 var(--outline);
}

.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.compare__labels {
  display: flex;
  justify-content: space-between;
  margin: 14px 6px 0;
  font: 400 0.95rem/1 var(--font-pixel);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 244, 220, 0.7);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 36px);
  margin-top: clamp(64px, 9vw, 130px);
}

.gallery li:nth-child(even) {
  margin-top: 46px;
}

.gallery h3 {
  margin: 20px 0 6px;
}

.gallery p {
  margin: 0;
  font-size: 0.97rem;
  color: rgba(255, 244, 220, 0.78);
}

.campus {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  margin-top: clamp(64px, 9vw, 130px);
}

.campus__copy h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.campus__copy p,
.campus__copy li {
  color: rgba(255, 244, 220, 0.85);
}

.browser {
  margin: 0;
  background: #0a0616;
  border: 3px solid #3d3350;
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.browser__bar {
  display: flex;
  gap: 7px;
  padding: 11px 14px;
}

.browser__bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3d3350;
}

.browser figcaption {
  padding: 10px 14px;
  font-size: 0.85rem;
  color: rgba(255, 244, 220, 0.65);
}

/* ─── Servicios ────────────────────────────────────────────── */

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: var(--card);
  border: 3px solid var(--outline);
  box-shadow: 7px 7px 0 var(--outline);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service:hover,
.service:focus-within {
  transform: translate(-4px, -4px);
  box-shadow: 11px 11px 0 var(--orange);
}

.service__icon {
  width: 64px;
  margin-bottom: 18px;
}

.service h3 a {
  color: var(--ink);
  text-decoration: none;
}

/* Toda la tarjeta enlaza a la página del servicio. */
.service h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.service p {
  color: var(--ink-soft);
}

.service__more {
  margin-top: auto;
  font: 400 0.98rem/1 var(--font-pixel);
  letter-spacing: 0.04em;
  color: var(--teal-strong);
}

/* ─── Tu disciplina ────────────────────────────────────────── */

.ideas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
}

.ideas__stage {
  position: sticky;
  top: 16vh;
  height: 66vh;
  min-height: 380px;
}

.ideas .sec__head {
  margin-bottom: 30px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.chip {
  padding: 10px 14px;
  font: 400 0.98rem/1 var(--font-pixel);
  color: var(--cream);
  background: rgba(12, 8, 29, 0.6);
  border: 2px solid rgba(255, 244, 220, 0.3);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s ease;
}

.chip:hover {
  border-color: var(--orange-hi);
  transform: translateY(-2px);
}

.chip.is-on {
  color: var(--outline);
  background: var(--orange-hi);
  border-color: var(--outline);
  box-shadow: 0 4px 0 var(--night-0);
}

.idea {
  position: relative;
  padding: 28px 28px 22px;
  color: var(--ink);
  background: var(--card);
  border: 4px solid var(--outline);
  box-shadow: 9px 9px 0 rgba(8, 4, 20, 0.55);
}

/* Sin JavaScript se ven todas las fichas, una debajo de otra. */
.idea + .idea {
  margin-top: 20px;
}

.idea.is-on {
  animation: card-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.idea__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 8px;
  font: 400 0.9rem/1 var(--font-pixel);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-deep);
}

.idea__badge--real {
  color: var(--cream);
  background: var(--teal);
}

.idea h3 {
  margin-bottom: 0.2em;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.idea__genre {
  font: 400 0.95rem/1.2 var(--font-pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-strong);
}

.idea dl {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-top: 16px;
  border-top: 3px dashed var(--line);
}

.idea dt {
  font: 400 0.9rem/1 var(--font-pixel);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.idea dd {
  margin: 0 0 12px;
}

.ideas__cta {
  margin: 30px 0 0;
}

/* ─── Proceso ──────────────────────────────────────────────── */

.quest {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  counter-reset: mision;
}

/* El camino entre misiones, como en el mapa de un juego. */
.quest::before {
  content: '';
  position: absolute;
  left: 26px;
  right: calc(20% - 44px);
  top: 24px;
  border-top: 5px dotted var(--outline);
  opacity: 0.35;
}

.quest li {
  position: relative;
  padding-top: 74px;
}

.quest__n {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font: 400 1.1rem/1 var(--font-pixel);
  color: var(--outline);
  background: var(--orange-hi);
  border: 3px solid var(--outline);
  box-shadow: 5px 5px 0 var(--outline);
}

.quest li:last-child .quest__n {
  color: var(--cream);
  background: var(--teal);
}

.quest p {
  margin: 0;
  color: var(--ink-soft);
}

/* ─── El estudio ───────────────────────────────────────────── */

.party {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.member {
  padding: 26px 24px;
  background: rgba(17, 12, 36, 0.74);
  border: 2px solid rgba(255, 244, 220, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.member--you {
  border: 3px dashed var(--orange-hi);
  background: rgba(60, 30, 20, 0.5);
}

.member__pic {
  display: block;
  width: 84px;
  margin-bottom: 18px;
  padding: 10px;
  background: var(--cream);
  border: 3px solid var(--outline);
  box-shadow: 5px 5px 0 var(--night-0);
}

.member__class {
  margin-bottom: 8px;
  font: 400 0.9rem/1 var(--font-pixel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-hi);
}

.member p:last-child {
  margin: 0;
  color: rgba(255, 244, 220, 0.84);
}

.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 6vw, 72px);
}

.values li {
  padding-top: 18px;
  border-top: 4px solid var(--teal-hi);
}

.values p {
  margin: 0;
  color: rgba(255, 244, 220, 0.8);
}

/* ─── Preguntas ────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: 12px;
}

.faq details {
  background: var(--card);
  border: 3px solid var(--outline);
  box-shadow: 5px 5px 0 var(--outline);
}

.faq summary {
  position: relative;
  padding: 18px 58px 18px 20px;
  font: 700 1.1rem/1.3 var(--font-display);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font: 400 1.2rem/1 var(--font-pixel);
  color: var(--outline);
  background: var(--orange-hi);
  border: 2px solid var(--outline);
}

.faq details[open] summary::after {
  content: '−';
  color: var(--cream);
  background: var(--teal);
}

.faq details p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--ink-soft);
}

/* ─── Contacto ─────────────────────────────────────────────── */

.contact {
  padding-bottom: clamp(90px, 12vw, 160px);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.contact .sec__head {
  margin-bottom: 10px;
}

.contact__stage {
  height: clamp(260px, 42vh, 420px);
  margin: 6px 0 14px;
}

.score {
  display: grid;
  gap: 4px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: rgba(12, 8, 29, 0.6);
  border-left: 4px solid var(--orange);
}

.score__n {
  font: 400 0.95rem/1 var(--font-pixel);
  letter-spacing: 0.08em;
  color: var(--orange-hi);
}

.contact__ways {
  display: grid;
  gap: 12px;
}

.contact__ways span {
  display: block;
  font: 400 0.9rem/1.4 var(--font-pixel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 244, 220, 0.6);
}

.contact__ways a {
  overflow-wrap: anywhere;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  padding: clamp(20px, 3.2vw, 34px);
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--outline);
  box-shadow: 10px 10px 0 rgba(8, 4, 20, 0.55);
}

.form__title {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font: 400 1.5rem/1 var(--font-pixel);
  color: var(--outline);
}

.field {
  display: grid;
  gap: 6px;
  align-content: start;
}

.field--full {
  grid-column: 1 / -1;
}

/* Trampa para robots: fuera de la vista y del tabulador. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field label {
  font: 400 0.95rem/1.2 var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.field small {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 13px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--outline);
  border-radius: 0;
  box-shadow: inset 0 3px 0 rgba(42, 34, 51, 0.07);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 0;
}

.field [aria-invalid='true'] {
  border-color: var(--coral);
  background: #fbeeeb;
}

.field__error {
  font-size: 0.86rem;
  color: #9d2f26;
}

.check {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: flex-start;
  font-size: 0.95rem;
}

.check span:not(.field__error) {
  flex: 1;
}

.check .field__error {
  flex-basis: 100%;
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--teal);
}

.form a {
  color: var(--teal-strong);
}

.form__legal {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.form .btn {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 5px 0 var(--outline);
}

.form__status {
  margin: 0;
  font-weight: 700;
}

.form__status:empty {
  display: none;
}

.form__status.is-ok {
  padding: 12px 14px;
  color: var(--teal-strong);
  background: #dff1ec;
  border-left: 5px solid var(--teal);
}

.form__status.is-error {
  padding: 12px 14px;
  color: #7d2a24;
  background: #f9e6e2;
  border-left: 5px solid var(--coral);
}

/* ─── Pie ──────────────────────────────────────────────────── */

.foot {
  padding: 64px 0 30px;
  font-size: 0.95rem;
  background: var(--night-0);
  border-top: 4px solid var(--outline);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
}

.foot__brand img {
  width: 220px;
  margin-bottom: 16px;
}

.foot__brand p {
  max-width: 24em;
  color: rgba(255, 244, 220, 0.72);
}

.foot__h {
  margin-bottom: 12px;
  font: 400 0.9rem/1 var(--font-pixel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-hi);
}

.foot ul {
  display: grid;
  gap: 8px;
}

.foot nav a {
  color: rgba(255, 244, 220, 0.82);
  text-decoration: none;
}

.foot nav a:hover {
  color: var(--orange-hi);
  text-decoration: underline;
}

.foot__copy {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 2px solid rgba(255, 244, 220, 0.12);
  font-size: 0.86rem;
  color: rgba(255, 244, 220, 0.55);
}

/* ─── Logros ───────────────────────────────────────────────── */

.logros {
  width: min(92vw, 560px);
  max-height: 88vh;
  padding: 26px 26px 22px;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--outline);
  box-shadow: 10px 10px 0 rgba(8, 4, 20, 0.7);
}

.logros::backdrop {
  background: rgba(8, 4, 20, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.logros h2 {
  font-size: 2rem;
}

.logros__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  font: 400 1rem/1 var(--font-pixel);
  background: var(--card);
  border: 3px solid var(--outline);
  cursor: pointer;
}

.logros__why {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.logros__list {
  display: grid;
  gap: 8px;
}

.logros__list li {
  background: var(--card);
  border: 2px solid var(--line);
  transition: transform 0.12s ease;
}

.logros__list li:hover {
  transform: translateX(4px);
}

/* Toda la fila es un enlace al lugar donde se consigue el logro. */
.logros__list a {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  color: inherit;
  text-decoration: none;
}

.logros__list li.is-locked {
  opacity: 0.55;
}

.logros__list li.is-locked svg {
  filter: grayscale(1) brightness(0.6);
}

.logros__list li.is-done {
  border-color: var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
}

.logros__list b {
  display: block;
  line-height: 1.2;
}

.logros__list small {
  color: var(--ink-soft);
}

.logros__list em {
  font: 400 0.95rem/1 var(--font-pixel);
  font-style: normal;
  color: var(--teal-strong);
}

.toasts {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  width: min(88vw, 350px);
  padding: 10px 14px 10px 10px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--outline);
  box-shadow: 6px 6px 0 rgba(8, 4, 20, 0.6);
  animation: toast-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), toast-out 0.4s ease 3.6s forwards;
}

.toast small {
  display: block;
  font: 400 0.95rem/1.2 var(--font-pixel);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.toast b {
  display: block;
  line-height: 1.2;
}

.toast em {
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
  font-style: normal;
  color: var(--ink-soft);
}

.toast--level em {
  color: rgba(255, 244, 220, 0.8);
}

/* La ficha «+N XP» que vuela hasta el marcador. */
.xpfly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  padding: 7px 11px;
  font: 800 1.35rem/1 var(--font-display);
  white-space: nowrap;
  color: var(--outline);
  background: var(--orange-hi);
  border: 3px solid var(--outline);
  box-shadow: 0 5px 0 var(--night-0), 0 0 24px rgba(255, 194, 75, 0.8);
  pointer-events: none;
}

.toast--level {
  color: var(--cream);
  background: var(--teal);
}

.toast--level small {
  color: var(--orange-hi);
}

/* ─── Páginas interiores ───────────────────────────────────── */

.sub .sky__glow {
  opacity: 0.55;
}

.phero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(48px, 8vw, 100px)) 0 clamp(64px, 9vw, 120px);
}

.phero h1 {
  max-width: 17em;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -0.035em;
}

.phero .lead {
  color: rgba(255, 244, 220, 0.9);
}

.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 5vw, 70px);
  align-items: center;
}

.phero__icon {
  width: clamp(120px, 20vw, 240px);
  filter: drop-shadow(8px 8px 0 rgba(8, 4, 20, 0.5));
  animation: hover 3.4s ease-in-out infinite;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font: 400 0.95rem/1.2 var(--font-pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crumbs li + li::before {
  content: '▸';
  margin-right: 8px;
  opacity: 0.6;
}

.crumbs a {
  color: var(--cream);
}

.prose {
  max-width: 760px;
}

.prose h2 {
  margin-top: 1.6em;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: 1.5em;
}

.prose ul:not(.ticks):not(.cards) {
  display: grid;
  gap: 8px;
  margin: 0 0 1.2em;
  padding-left: 1.2em;
  list-style: square;
}

.prose ol {
  display: grid;
  gap: 8px;
  margin: 0 0 1.2em;
  padding-left: 1.4em;
  list-style: decimal;
}

.sec--paper .ticks li::before {
  background: var(--teal);
  box-shadow: 3px 3px 0 var(--outline);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin: 1.6em 0;
}

.cards li {
  padding: 22px 20px;
  background: var(--card);
  border: 3px solid var(--outline);
  box-shadow: 6px 6px 0 var(--outline);
}

.cards h3 {
  margin-top: 0;
  font-size: 1.15rem;
}

.cards p {
  margin: 0;
  color: var(--ink-soft);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}

.aside {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding: 24px 22px;
  color: var(--cream);
  background: var(--night-2);
  border: 3px solid var(--outline);
  box-shadow: 7px 7px 0 var(--orange);
}

.aside h2 {
  font-size: 1.4rem;
}

.aside p {
  font-size: 0.97rem;
  color: rgba(255, 244, 220, 0.85);
}

.aside a:not(.btn) {
  color: var(--orange-hi);
}

.aside ul {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px dashed rgba(255, 244, 220, 0.2);
  font-size: 0.95rem;
}

.band {
  text-align: center;
}

.band .lead {
  margin-inline: auto;
}

.band .sec__head {
  margin-inline: auto;
}

.band .level {
  justify-content: center;
}

.legal h2 {
  font-size: 1.5rem;
}

.error {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 120px 20px 80px;
}

.error__code {
  font: 700 clamp(5rem, 22vw, 12rem) / 0.9 var(--font-pixel);
  color: var(--orange-hi);
  filter: drop-shadow(0 8px 0 #a8480f) drop-shadow(0 8px 0 #1a1230);
}

.error__sprite {
  display: block;
  width: 120px;
  margin: 0 auto 20px;
  animation: hover 2.4s ease-in-out infinite;
}

/* ─── Aparición al hacer scroll ────────────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal].is-in,
.reveal-all [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Con JavaScript, solo se ve la ficha elegida. */
.js .idea[hidden] {
  display: none;
}

.js .idea + .idea {
  margin-top: 0;
}

/* ─── Animaciones ──────────────────────────────────────────── */

@keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0.15; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes marquee {
  to { transform: translateX(-100%); }
}

@keyframes bump {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.12); }
}

/* El marcador se enciende cuando llega la ficha. */
@keyframes bump-xp {
  0%, 60%, 100% { transform: scale(1); box-shadow: none; border-color: rgba(255, 244, 220, 0.28); }
  72% { transform: scale(1.22); box-shadow: 0 0 0 3px var(--orange-hi), 0 0 30px rgba(255, 194, 75, 0.95); border-color: var(--orange-hi); }
  86% { transform: scale(1.06); box-shadow: 0 0 0 3px var(--orange-hi), 0 0 18px rgba(255, 194, 75, 0.6); border-color: var(--orange-hi); }
}

@keyframes idle {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

@keyframes hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes quake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-8px, 3px); }
  30% { transform: translate(7px, -4px); }
  45% { transform: translate(-6px, -2px); }
  60% { transform: translate(5px, 3px); }
  80% { transform: translate(-3px, 1px); }
}

@keyframes floor {
  to { background-position: 0 56px, 0 0; }
}

@keyframes dash {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(46%) rotate(8deg); }
  50% { transform: translateX(52%) rotate(8deg); }
}

@keyframes hurt {
  0%, 100% { transform: translateX(0); filter: none; }
  25% { transform: translateX(-10px); filter: brightness(2.4) sepia(1) hue-rotate(-50deg) saturate(6); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-5px); filter: brightness(2.4) sepia(1) hue-rotate(-50deg) saturate(6); }
}

@keyframes flash {
  from { opacity: 0.85; }
  to { opacity: 0; }
}

@keyframes slash {
  0% { transform: rotate(-22deg) scaleX(0); opacity: 1; }
  60% { transform: rotate(-22deg) scaleX(1); opacity: 1; }
  100% { transform: rotate(-22deg) scaleX(1.1); opacity: 0; }
}

@keyframes slash-cross {
  0% { transform: rotate(22deg) scaleX(0); opacity: 1; }
  60% { transform: rotate(22deg) scaleX(1); opacity: 1; }
  100% { transform: rotate(22deg) scaleX(1.1); opacity: 0; }
}

@keyframes num {
  0% { transform: translateY(20px) scale(0.3); opacity: 0; }
  25% { transform: translateY(0) scale(1.15); opacity: 1; }
  70% { transform: translateY(-14px) scale(1); opacity: 1; }
  100% { transform: translateY(-46px) scale(0.9); opacity: 0; }
}

@keyframes banner {
  0% { transform: scale(2.2); opacity: 0; }
  14% { transform: scale(1); opacity: 1; }
  78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.94); opacity: 0; }
}

@keyframes deal {
  from { transform: translateY(46px) rotate(6deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes cardget {
  0% { transform: scale(0.2) rotate(-24deg); opacity: 0; }
  100% { opacity: 1; }
}

@keyframes dance {
  0% { transform: rotate(-9deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-12px); }
  50% { transform: rotate(9deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-12px); }
}

@keyframes jk {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes confetti {
  to { transform: translate(var(--dx), 540px) rotate(720deg); }
}

@keyframes stamp {
  from { transform: scale(2.6) rotate(8deg); opacity: 0; }
}

@keyframes floatup {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-46px); opacity: 0; }
}

@keyframes shake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -6px; }
  75% { margin-left: 6px; }
}

@keyframes card-in {
  from { transform: translateY(14px) rotate(-0.6deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes toast-in {
  from { transform: translateX(-120%); }
  to { transform: none; }
}

@keyframes toast-out {
  to { transform: translateX(-120%); opacity: 0; }
}

/* ─── Pantallas medianas y pequeñas ────────────────────────── */

@media (max-width: 1080px) {
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 8px clamp(16px, 3vw, 36px) 20px;
    background: rgba(15, 10, 34, 0.97);
    border-bottom: 3px solid var(--night-0);
  }

  .nav.is-open .nav__links {
    display: flex;
  }

  .nav__links a {
    padding: 14px 0;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 244, 220, 0.12);
  }

  .nav__burger {
    display: block;
  }

  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quest {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .quest::before {
    left: 25px;
    right: auto;
    top: 10px;
    bottom: 40px;
    border-top: 0;
    border-left: 5px dotted var(--outline);
  }

  .quest li {
    padding: 2px 0 0 78px;
    min-height: 58px;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .aside {
    position: static;
  }
}

@media (max-width: 860px) {
  .hero {
    align-items: flex-start;
    padding-top: calc(var(--nav-h) + 4px);
    padding-bottom: 84px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hero__stage {
    order: -1;
    height: 40vh;
    height: 40svh;
    min-height: 270px;
  }

  .hero__cta {
    margin: 1.4em 0 1.6em;
  }

  .sky__glow {
    background:
      radial-gradient(130% 42% at 50% 46%, rgba(255, 170, 110, 0.85) 0%, rgba(238, 108, 132, 0.7) 30%, rgba(150, 62, 150, 0.45) 58%, transparent 80%);
  }

  .principles,
  .party,
  .values {
    grid-template-columns: 1fr;
  }

  .principles {
    gap: 30px;
  }

  .case__intro,
  .campus,
  .contact__grid,
  .ideas__grid,
  .compare-row {
    grid-template-columns: 1fr;
  }

  .compare-row {
    justify-items: center;
  }

  /* Capturas en carrusel horizontal. */
  .gallery {
    grid-template-columns: repeat(4, 62vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -20px;
    padding: 0 20px 18px;
    scrollbar-width: thin;
  }

  .gallery li {
    scroll-snap-align: center;
  }

  .gallery li:nth-child(even) {
    margin-top: 0;
  }

  .ideas__stage {
    position: relative;
    top: 0;
    order: -1;
    height: 34vh;
    min-height: 240px;
  }

  .contact__stage {
    height: 26vh;
  }

  .foot__grid {
    grid-template-columns: 1fr 1fr;
  }

  .foot__brand {
    grid-column: 1 / -1;
  }

  .phero__grid {
    grid-template-columns: 1fr;
  }

  .phero__icon {
    order: -1;
    width: 110px;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 1rem;
  }

  .nav {
    gap: 10px;
  }

  .nav__logo img {
    height: 32px;
  }

  .nav__cta {
    display: none;
  }

  .xp__bar {
    width: 48px;
  }

  .services,
  .form {
    grid-template-columns: 1fr;
  }

  .arena {
    height: clamp(280px, 38vh, 340px);
  }

  .arena__stage {
    top: 96px;
    bottom: 34px;
    right: 0;
    width: 60%;
  }

  .arena__bubble {
    top: 76px;
    left: 4%;
    max-width: 44%;
    padding: 8px 10px;
    font-size: 0.95rem;
  }

  .arena__hero {
    gap: 8px;
  }

  .arena__sprite {
    width: 96px;
  }

  .hud__party li {
    width: 32px;
    height: 32px;
  }

  .deck {
    min-height: 300px;
  }

  .deck__wait {
    padding: 80px 0;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .card {
    grid-template-columns: 46px 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    justify-items: start;
    min-height: 0;
    padding: 12px 12px 12px 26px;
    text-align: left;
  }

  .card__icon {
    grid-row: span 2;
    width: 46px;
  }

  .jk {
    top: 34%;
  }

  .jk--me {
    left: 8%;
  }

  .jk--boss {
    left: 38%;
  }

  .lesson,
  .result {
    grid-template-columns: 1fr;
  }

  .gcard {
    justify-self: start;
    width: 170px;
  }

  .rank {
    width: 96px;
    height: 96px;
    font-size: 3.4rem;
  }

  .tally {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot__grid {
    grid-template-columns: 1fr;
  }

  .hero__scroll span {
    display: none;
  }

  .toasts {
    left: 10px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .toast {
    animation: none;
  }

  .ticker__track {
    animation: none;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ─── Ajustes de las páginas interiores ────────────────────── */

.band .hero__cta,
.error .hero__cta {
  justify-content: center;
  margin-bottom: 0;
}

.error h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.error .lead {
  margin-inline: auto;
}

@media (max-width: 620px) {
  /* En el móvil, un solo aviso de logro a la vez. */
  .toast:not(:last-child) {
    display: none;
  }
}

/* ─── Combate en pantallas anchas y bajas (portátiles, pantallas con zoom) ───
   La arena y la mesa van una al lado de la otra y todo cabe sin hacer scroll. */
@media (min-width: 1000px) and (max-height: 800px) {
  .battle {
    --bh: min(calc(100vh - var(--nav-h) - 34px), 540px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    max-width: 1200px;
  }

  .arena {
    height: var(--bh);
  }

  .deck {
    height: var(--bh);
    min-height: 0;
    padding: 18px 20px;
    overflow-y: auto;
    border-top: 0;
    border-left: 4px solid var(--outline);
  }

  .arena__stage {
    top: 84px;
    right: 0;
    width: 58%;
  }

  .arena__sprite {
    width: clamp(96px, 11vw, 140px);
  }

  .arena__bubble {
    left: 4%;
    max-width: 46%;
    font-size: 0.95rem;
  }

  .jk {
    top: 30%;
    width: clamp(64px, 7vw, 88px);
    padding: 8px;
  }

  .jk--me {
    left: 8%;
  }

  .jk--boss {
    left: 34%;
  }

  .deck__prompt {
    margin-bottom: 12px;
    font-size: 1.15rem;
  }

  .deck__title {
    font-size: 1.4rem;
  }

  .deck p {
    margin-bottom: 0.6em;
  }

  .deck__actions {
    margin-top: 12px;
  }

  .deck__wait {
    padding: 0;
    height: 100%;
    display: grid;
    place-items: center;
  }

  .cards {
    gap: 10px;
  }

  .card {
    min-height: 0;
    gap: 8px;
    padding: 18px 8px 12px;
    font-size: 0.95rem;
  }

  .card__icon {
    width: 50px;
  }

  .lesson {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 18px;
  }

  .gcard {
    padding: 22px 8px 12px;
  }

  .gcard__icon {
    width: 52px;
  }

  .gcard__name {
    font-size: 0.95rem;
  }

  .result {
    gap: 16px;
  }

  .rank {
    width: 84px;
    height: 84px;
    font-size: 3rem;
  }

  .tally {
    gap: 6px;
    margin-bottom: 10px;
  }

  .tally div {
    padding: 6px 8px;
  }

  .tally dd {
    font-size: 1.25rem;
  }

  .mechs {
    gap: 5px;
    margin-bottom: 10px;
  }

  .mechs li {
    padding: 4px 6px;
  }
}

/* Las cartas del combate, siempre tres en fila (una columna en el móvil). */
.deck .cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

@media (max-width: 620px) {
  .deck .cards {
    grid-template-columns: 1fr;
  }
}