/* Hexathlon — landing. Arena de noche, neón de las seis habilidades, tipografías del juego (OFL). */
/* Fuentes recortadas a los textos de la web (tools/web_assets.py, que también pone el ?v=). Dela Gothic One y M PLUS
   Rounded 1c van en dos archivos: el japonés (-ja) se declara ANTES que el básico y solo se descarga en la página en
   japonés; en los caracteres que están en los dos (日本語中文, que salen en todos los idiomas) gana el último declarado,
   que es el básico. El chino usa Noto Sans SC entera (--display/--body en :lang(zh-CN)) para no mezclar fuentes.
   El coreano (hangul) va con Noto Sans KR («HX KR», detrás de las fuentes de siempre, que no tienen hangul). */
@font-face { font-family: "Dela Gothic One"; src: url(../assets/fonts/dela-gothic-one-ja.woff2?v=604c4273) format("woff2"); font-display: swap;
  unicode-range: U+2E80-2FDF, U+3000-30FF, U+31F0-31FF, U+3200-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "Dela Gothic One"; src: url(../assets/fonts/dela-gothic-one.woff2?v=89a2a623) format("woff2"); font-display: swap;
  unicode-range: U+0000-024F, U+2000-22FF, U+2500-27BF, U+4E2D, U+6587, U+65E5, U+672C, U+8A9E; }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 700; src: url(../assets/fonts/mplus-rounded-bold-ja.woff2?v=105ffc89) format("woff2"); font-display: swap;
  unicode-range: U+2E80-2FDF, U+3000-30FF, U+31F0-31FF, U+3200-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 700; src: url(../assets/fonts/mplus-rounded-bold.woff2?v=a794244c) format("woff2"); font-display: swap;
  unicode-range: U+0000-024F, U+2000-22FF, U+2500-27BF, U+4E2D, U+6587, U+65E5, U+672C, U+8A9E; }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 800; src: url(../assets/fonts/mplus-rounded-extrabold-ja.woff2?v=4c506359) format("woff2"); font-display: swap;
  unicode-range: U+2E80-2FDF, U+3000-30FF, U+31F0-31FF, U+3200-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 800; src: url(../assets/fonts/mplus-rounded-extrabold.woff2?v=aac95582) format("woff2"); font-display: swap;
  unicode-range: U+0000-024F, U+2000-22FF, U+2500-27BF, U+4E2D, U+6587, U+65E5, U+672C, U+8A9E; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; src: url(../assets/fonts/chakra-petch-bold.woff2?v=dacb5a6b) format("woff2"); font-display: swap; }
@font-face { font-family: "Bangers"; src: url(../assets/fonts/bangers.woff2?v=7db80b35) format("woff2"); font-display: swap; }
/* Chino: un archivo por peso, cada uno válido para cualquier font-weight (sin negrita sintética); solo CJK y su
   puntuación: el latín y las cifras siguen con las fuentes de la web */
@font-face { font-family: "HX SC"; font-weight: 100 900; src: url(../assets/fonts/noto-sans-sc-bold.woff2?v=a570d434) format("woff2"); font-display: swap;
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026, U+2E80-2FDF, U+3000-30FF, U+31F0-31FF, U+3200-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "HX SC Black"; font-weight: 100 900; src: url(../assets/fonts/noto-sans-sc-black.woff2?v=176667e4) format("woff2"); font-display: swap;
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026, U+2E80-2FDF, U+3000-30FF, U+31F0-31FF, U+3200-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }

/* Coreano: Noto Sans KR en dos pesos, solo el hangul (y el ₩) de la página en coreano; «noto-sans-kr-base», declarado
   después, lleva el hangul que sale en todos los idiomas («한국어»): fuera de la página en coreano solo se baja ese */
@font-face { font-family: "HX KR"; font-weight: 100 900; src: url(../assets/fonts/noto-sans-kr-bold.woff2?v=6e88497f) format("woff2"); font-display: swap;
  unicode-range: U+1100-11FF, U+20A9, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; }
@font-face { font-family: "HX KR"; font-weight: 100 900; src: url(../assets/fonts/noto-sans-kr-base.woff2?v=84ebe093) format("woff2"); font-display: swap;
  unicode-range: U+AD6D, U+C5B4, U+D55C; }
@font-face { font-family: "HX KR Black"; font-weight: 100 900; src: url(../assets/fonts/noto-sans-kr-black.woff2?v=dbf939c0) format("woff2"); font-display: swap;
  unicode-range: U+1100-11FF, U+20A9, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF; }

:root {
  --ink: #0c0918; --night: #141029; --panel: #1b1633; --gold: #FFD23F; --white: #FFF8EE;
  --muted: rgba(255, 248, 238, .68);
  --speed: #FFD23F; --precision: #FF4D5A; --reflex: #2EE6F0; --coordination: #9B5CFF; --observation: #3DDC84; --reasoning: #FF9F1C;
  --logo: "Dela Gothic One", "Arial Black", system-ui, sans-serif;  /* HEXATHLON: igual en todos los idiomas */
  --display: "Dela Gothic One", "HX KR Black", "Arial Black", system-ui, sans-serif;
  --body: "M PLUS Rounded 1c", "HX KR", system-ui, sans-serif;
  /* Chakra Petch y Bangers no tienen japonés: detrás, M PLUS y Dela Gothic (no una fuente del sistema) */
  --hud: "Chakra Petch", "M PLUS Rounded 1c", "HX KR", ui-monospace, system-ui, sans-serif;
  --comic: "Bangers", "Dela Gothic One", "HX KR Black", "Impact", system-ui, sans-serif;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --hexgrid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v32' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* Chino: todo lo CJK con Noto Sans SC (las fuentes japonesas tienen parte de los caracteres y saldría mezclado) */
:root:lang(zh-CN) {
  --display: "HX SC Black", "Dela Gothic One", "HX KR Black", "Arial Black", system-ui, sans-serif;
  --body: "HX SC", "M PLUS Rounded 1c", "HX KR", system-ui, sans-serif;
  --hud: "Chakra Petch", "HX SC", "HX KR", ui-monospace, system-ui, sans-serif;
  --comic: "HX SC Black", "Bangers", "HX KR Black", "Impact", system-ui, sans-serif;
}
/* Japonés: sin negrita sintética. Dela Gothic One tiene un solo peso y el navegador la engordaba donde el texto hereda
   font-weight 700: el latín lo aguanta, pero los kanji se volvían manchas (el logo y la nota siguen como en latín) */
:root:lang(ja) { font-synthesis: none; }
:root:lang(ja) .brand, :root:lang(ja) .score__value { font-synthesis: weight; }
/* Saltos de línea: titulares equilibrados (sin una palabra sola en la última línea) y párrafos sin viudas */
.h2, .cta__title, .big-line, .trial__name, .hexi-shout__text { text-wrap: balance; }
.lead, .hero__lead, .trial__desc, .manifesto__final, .panel__bubble, .bubble__text { text-wrap: pretty; }
/* Chino y japonés: los titulares solo se parten tras la puntuación o donde el texto lleva un espacio de ancho cero
   (U+200B en js/i18n.js); si aun así no cabe, por donde haga falta. El resto del japonés, por frases (Chrome/Edge) */
:root:lang(ja) :is(.h2, .cta__title, .hexi-shout__text), :root:lang(zh-CN) :is(.h2, .cta__title, .hexi-shout__text) {
  word-break: keep-all; overflow-wrap: anywhere; }
:root:lang(ja) body { word-break: auto-phrase; }
/* Coreano: se parte entre palabras (por los espacios), nunca a mitad de palabra; si una no cabe, por donde haga falta */
:root:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
/* Mientras site.js traduce, el español del HTML no se ve (index.html pone la clase, como mucho 3 s) */
.i18n-wait [data-i18n] { visibility: hidden; }
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--white); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-weight: 700; line-height: 1.55; background: var(--ink); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- barra de progreso y cabecera ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--speed), var(--reflex), var(--coordination), var(--reasoning), var(--observation), var(--precision)); }
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 48px);
  transition: background .35s, box-shadow .35s, padding .35s; }
.topbar.is-solid { background: rgba(12, 9, 24, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07); padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--logo); font-size: 1.05rem; letter-spacing: .04em; }
.brand img { width: auto; height: 36px; }
.nav { display: flex; gap: clamp(12px, 2.4vw, 32px); margin-left: auto; }
.nav a { font-family: var(--hud); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; text-decoration: none; color: var(--muted); transition: color .2s; white-space: nowrap; }
.nav a:hover { color: var(--gold); }
/* selector de idioma: botón compacto (globo + idioma actual) y menú con los 7 idiomas, cada uno escrito en el suyo */
.lang { position: relative; flex: none; }
.lang__btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 9px; border-radius: 999px; cursor: pointer;
  color: var(--white); background: rgba(12, 9, 24, .35); border: 1px solid rgba(255, 255, 255, .24);
  font-family: "Chakra Petch", "M PLUS Rounded 1c", "HX KR", system-ui, sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .1em; line-height: 1;
  transition: border-color .2s, background .2s; }
.lang__btn:hover, .lang.is-open .lang__btn { border-color: var(--gold); background: rgba(255, 210, 63, .12); }
.lang__globe { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.lang__chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .25s; }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 2; min-width: 212px; margin: 0; padding: 6px; list-style: none;
  background: rgba(22, 17, 44, .97); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: 100% 0;
  transition: opacity .18s, transform .18s, visibility 0s .18s; }
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .22s cubic-bezier(.2, 1.4, .4, 1); }
.lang__menu a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px 0 12px; border-radius: 10px; text-decoration: none;
  font-family: "M PLUS Rounded 1c", "HX KR", system-ui, sans-serif; font-weight: 800; font-size: .95rem; color: var(--muted); white-space: nowrap;
  transition: background .15s, color .15s; }
.lang__menu a::before { content: ""; flex: none; width: 13px; aspect-ratio: 1.15; clip-path: var(--hex); background: rgba(255, 248, 238, .2); transition: background .15s; }
.lang__menu a:hover, .lang__menu a:focus-visible { color: var(--white); background: rgba(255, 248, 238, .08); outline: none; }
.lang__menu a:hover::before, .lang__menu a:focus-visible::before { background: rgba(255, 248, 238, .5); }
.lang__menu a[aria-current] { color: var(--gold); }
.lang__menu a[aria-current]::before { background: var(--gold); }

/* ---------- elementos comunes ---------- */
.kicker { font-family: var(--hud); text-transform: uppercase; letter-spacing: .28em; font-size: .85rem; color: var(--gold); margin: 0 0 12px; }
.h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.05; margin: 0 0 18px; }
.h3 { font-family: var(--hud); text-transform: uppercase; letter-spacing: .18em; font-size: .9rem; color: var(--muted); margin: 34px 0 14px; }
.lead { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); max-width: 60ch; margin: 0; }
.section-head { text-align: center; max-width: 820px; margin: 0 auto; }
.section-head .lead { margin-inline: auto; }
.btn { --bg: var(--gold); display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.8em; border: 0; cursor: pointer;
  font-family: var(--body); font-weight: 800; font-size: 1rem; color: var(--ink); background: var(--bg); text-decoration: none;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); transition: transform .2s, filter .2s; }
.btn:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }
.btn--ghost { --bg: rgba(255, 248, 238, .12); color: var(--white); }
.btn--ghost:hover { --bg: rgba(255, 248, 238, .2); }
.steam-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(12, 9, 24, .25); }

/* ---------- 1 · portada ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-lit { opacity: 0; }
.beams { position: absolute; inset: 0; z-index: -2; pointer-events: none; mix-blend-mode: screen; }
.beam { position: absolute; top: -12%; width: 18vw; height: 125%; opacity: .18; filter: blur(22px); transform-origin: 50% 0; }
.beam:nth-child(1) { left: 4%; transform: rotate(-24deg); background: linear-gradient(180deg, var(--precision), transparent 72%); }
.beam:nth-child(2) { left: 20%; transform: rotate(-12deg); background: linear-gradient(180deg, var(--speed), transparent 72%); }
.beam:nth-child(3) { left: 38%; transform: rotate(-4deg); background: linear-gradient(180deg, var(--reflex), transparent 72%); }
.beam:nth-child(4) { right: 38%; transform: rotate(4deg); background: linear-gradient(180deg, var(--coordination), transparent 72%); }
.beam:nth-child(5) { right: 20%; transform: rotate(12deg); background: linear-gradient(180deg, var(--observation), transparent 72%); }
.beam:nth-child(6) { right: 4%; transform: rotate(24deg); background: linear-gradient(180deg, var(--reasoning), transparent 72%); }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(12, 9, 24, .1) 0, rgba(12, 9, 24, .55) 70%, rgba(12, 9, 24, .92) 100%),
              linear-gradient(180deg, rgba(12, 9, 24, .5) 0, transparent 30%, transparent 62%, var(--ink) 100%); }
.hero__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 96px 16px 64px; width: 100%; }
.hero__kicker { font-family: var(--hud); letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; color: var(--gold); margin: 0 0 12px;
  padding: .4em 1.1em; border: 1px solid rgba(255, 210, 63, .55); border-radius: 999px; background: rgba(12, 9, 24, .55); }
/* Emblema despiezado: engastes, marco + corona y 6 gemas en el mismo lienzo (524x720), apilados. Centro del hexágono
   en el lienzo: 49,9 % / 60,6 %. Las gemas empiezan en los estandartes de la arena y encajan con el scroll (site.js). */
.hero__mark { position: relative; width: clamp(118px, min(16vw, 23vh), 226px); aspect-ratio: 524 / 720; margin: 0 0 -4px; }
.mark__body { position: absolute; inset: 0; }
.mark__body > img, .gem, .gem > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.mark__frame { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.gem { transform-origin: var(--ox) var(--oy); will-change: transform; }
.gem__glow { opacity: 0; filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 16px var(--c)); will-change: opacity; }
.mark__halo, .mark__rays, .mark__burst { position: absolute; left: 49.9%; top: 60.6%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; opacity: 0; }
.mark__burst { translate: none; }  /* GSAP lo centra con xPercent/yPercent (anima su escala) */
.mark__halo { width: 250%; mix-blend-mode: screen; animation: halo 3.2s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 236, 160, .9) 0, rgba(255, 200, 70, .5) 22%, rgba(255, 160, 40, .16) 42%, transparent 64%); }
@keyframes halo { 50% { scale: 1.08; } }
.mark__rays { width: 360%; mix-blend-mode: screen; animation: rays 48s linear infinite;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 7deg, rgba(255, 238, 170, .42) 10deg 12deg, transparent 15deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 12%, #000 22%, transparent 62%); mask: radial-gradient(circle, transparent 0 12%, #000 22%, transparent 62%); }
@keyframes rays { to { rotate: 360deg; } }
.mark__burst { width: 170%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0, rgba(255, 246, 205, .95) 12%, rgba(255, 210, 63, .5) 32%, transparent 66%); }
.mark__shine { --shine: 160%; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) var(--shine) 0 / 260% 100% no-repeat;
  -webkit-mask: url(../assets/ui/emblem.webp) center / 100% 100% no-repeat; mask: url(../assets/ui/emblem.webp) center / 100% 100% no-repeat; }
.spark { position: absolute; left: var(--ox); top: var(--oy); width: 66%; aspect-ratio: 1; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 4%, color-mix(in srgb, var(--c) 65%, #fff) 10%, color-mix(in srgb, var(--c) 50%, transparent) 25%, transparent 58%); }
.spark::after { content: ""; position: absolute; inset: 8%; background: #fff;
  clip-path: polygon(50% 0, 53.5% 46.5%, 100% 50%, 53.5% 53.5%, 50% 100%, 46.5% 53.5%, 0 50%, 46.5% 46.5%); }
.js .mark__body, .js .gem { opacity: 0; }
/* destello en el rombo del estandarte cuando su gema sale (site.js lo coloca y lo escala) */
.flag-burst { position: absolute; left: 0; top: 0; z-index: 1; width: 100px; aspect-ratio: 1; pointer-events: none; opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle, transparent 0 40%, color-mix(in srgb, var(--c) 70%, #fff) 45%, color-mix(in srgb, var(--c) 40%, transparent) 49%, transparent 54%),
              radial-gradient(circle, #fff 0 6%, color-mix(in srgb, var(--c) 55%, #fff) 13%, color-mix(in srgb, var(--c) 55%, transparent) 26%, transparent 50%); }
/* centelleo de cada gema (hija de .gem: la sigue esté en su estandarte, volando o en el emblema) */
.gem__glint { position: absolute; left: var(--ox); top: var(--oy); width: 34%; aspect-ratio: 1; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 5%, color-mix(in srgb, var(--c) 45%, #fff) 11%, transparent 34%); }
.gem__glint::after { content: ""; position: absolute; inset: 0; background: #fff;
  clip-path: polygon(50% 0, 52.5% 47.5%, 100% 50%, 52.5% 52.5%, 50% 100%, 47.5% 52.5%, 0 50%, 47.5% 47.5%); }
.hero__title { position: relative; margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(2.2rem, 10.2vw, 9.6rem);
  line-height: .98; letter-spacing: .01em; filter: drop-shadow(0 .06em 0 rgba(12, 9, 24, .6)); }
.hero__title .stroke { position: absolute; inset: 0; color: transparent; -webkit-text-stroke: .13em var(--ink); }
.hero__title .fill { --shine: 150%; position: relative; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%),
                    linear-gradient(180deg, #FFF6C2 0%, #FFD23F 42%, #FFA21C 78%, #FF7A1C 100%);
  background-size: 250% 100%, 100% 100%; background-position: var(--shine) 0, 0 0; background-repeat: no-repeat; }
.hero__tag { font-family: var(--hud); font-size: clamp(1rem, 2.2vw, 1.55rem); letter-spacing: .14em; margin: 8px 0 0; text-transform: uppercase; }
.hero__lead { max-width: 640px; color: var(--muted); font-size: clamp(.98rem, 1.5vw, 1.15rem); margin: 12px auto 0; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.hexi { position: absolute; right: clamp(4px, 4vw, 64px); bottom: clamp(8px, 5vh, 48px); z-index: 3; display: grid; justify-items: end; pointer-events: none; }
.hexi img { width: clamp(96px, 11vw, 170px); height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.bubble { position: relative; background: var(--white); color: var(--ink); font-weight: 800; font-size: clamp(.8rem, 1.1vw, .98rem); line-height: 1.35;
  padding: .75em 1em; border-radius: 16px; width: clamp(180px, 18vw, 260px); margin: 0 clamp(40px, 5vw, 80px) 10px 0; box-shadow: 0 6px 0 rgba(12, 9, 24, .35); }
.bubble::after { content: ""; position: absolute; right: 26px; bottom: -12px; border: 12px solid transparent; border-top-color: var(--white); border-bottom: 0; }
.bubble__text { display: block; min-height: 2.7em; }
.scroll-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--hud); letter-spacing: .32em; text-transform: uppercase; font-size: .72rem; color: var(--muted); }
.scroll-hint i { width: 2px; height: 36px; background: linear-gradient(var(--gold), transparent); animation: drip 1.6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 2 · manifiesto ---------- */
.manifesto { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 0 5vw;
  background: var(--hexgrid), radial-gradient(circle at 50% 50%, #221a4a 0%, var(--ink) 68%); }
.hexring { position: absolute; width: min(118vmin, 1150px); height: auto; pointer-events: none; }
.hexline { fill: none; stroke: url(#none); stroke: rgba(255, 210, 63, .45); stroke-width: 1.2; }
.hexline--inner { stroke: rgba(155, 92, 255, .4); stroke-dasharray: 3 6; }
.big-lines { position: relative; text-align: center; }
.big-line { margin: 0; font-family: var(--display); font-size: clamp(2rem, 6.4vw, 5.6rem); line-height: 1.12; }
.big-line .w { display: inline-block; white-space: pre; }
.big-line--gold { color: var(--gold); text-shadow: 0 0 40px rgba(255, 210, 63, .35); }
.manifesto__final { margin: 1.1em 0 0; font-size: clamp(1.05rem, 2vw, 1.55rem); color: var(--muted); }

/* ---------- 3 · pruebas ---------- */
.trials { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.trials__kicker { position: absolute; top: 88px; left: 7vw; z-index: 6; margin: 0; font-family: var(--hud); text-transform: uppercase; letter-spacing: .3em; font-size: .8rem; color: var(--muted); }
.trials__hud { position: absolute; top: 78px; right: clamp(16px, 3vw, 40px); z-index: 6; display: grid; justify-items: center; gap: 4px; width: 110px; }
.trials__hud svg { width: 96px; height: 96px; overflow: visible; }
.hud-hex { fill: rgba(12, 9, 24, .55); stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; }
.hud-v { fill: rgba(255, 255, 255, .18); transition: fill .3s, r .3s; }
.hud-v.is-done { fill: rgba(255, 255, 255, .55); }
.hud-v.is-on { fill: var(--c, var(--gold)); r: 10; filter: drop-shadow(0 0 8px var(--c, var(--gold))); }
.hud-count { font-family: var(--hud); font-size: .8rem; letter-spacing: .2em; color: var(--muted); }
.hud-count b { color: var(--white); }
.trials__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.trial { --c: var(--gold); position: relative; flex: 0 0 100vw; height: 100%; overflow: hidden; isolation: isolate; }
.trial__scene { position: absolute; inset: -4% -8%; width: 116%; max-width: none; height: 108%; object-fit: cover; z-index: -3; filter: saturate(1.15) brightness(.55); }
.trial::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(circle at 72% 58%, color-mix(in srgb, var(--c) 34%, transparent) 0, transparent 52%),
              linear-gradient(90deg, rgba(12, 9, 24, .97) 0, rgba(12, 9, 24, .85) 36%, rgba(12, 9, 24, .25) 66%, rgba(12, 9, 24, .5) 100%); }
.trial__lines { position: absolute; z-index: -1; right: -12vh; top: 50%; width: 110vh; aspect-ratio: 1; transform: translateY(-50%); opacity: .5; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 55%, transparent) 0deg 1.4deg, transparent 1.4deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 44%, transparent 70%); mask: radial-gradient(circle, transparent 0 24%, #000 44%, transparent 70%);
  animation: spin 60s linear infinite; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
/* Personaje: actor (posición y deriva al salir) > cuerpo (entrada) > arte (efecto propio) > recorte (máscara/clip) */
.trial__actor { position: absolute; right: 7vw; bottom: 0; height: 90vh; aspect-ratio: var(--ar, .6); pointer-events: none; }
.actor__body, .actor__art, .art__clip, .fx { position: absolute; inset: 0; }
.actor__body, .actor__art { will-change: transform, opacity; }
.art__clip picture { display: block; width: 100%; height: 100%; }
.trial__char { width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }
/* efectos de entrada (los crea site.js; --sil = la imagen del personaje como máscara) */
.fx { pointer-events: none; opacity: 0; will-change: transform, opacity; }
.fx-sil { background: var(--fx, var(--c)); -webkit-mask: var(--sil) center / 100% 100% no-repeat; mask: var(--sil) center / 100% 100% no-repeat; }
.fx-glow { filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 14px var(--c)); }
.fx-glow > .fx-sil { opacity: 1; }
.fx-flash { --fx: #fff; }
.fx-burst { inset: auto; left: 50%; top: 38%; width: 190%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--c) 70%, #fff) 7%, color-mix(in srgb, var(--c) 45%, transparent) 24%, transparent 60%); }
.fx-ring { inset: auto; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 0 18px var(--c), inset 0 0 18px var(--c); }
.fx-shock { left: 50%; top: 38%; width: 130%; aspect-ratio: 1; }
.fx-impact { left: 50%; bottom: 0; width: 120%; aspect-ratio: 4; }
.fx-lens { left: 33%; top: 19%; width: 24%; aspect-ratio: 1; }
.fx-scan { inset: 0 -6% auto; height: 100%; border-top: 3px solid color-mix(in srgb, var(--c) 50%, #fff); filter: drop-shadow(0 0 10px var(--c)); }
.trial[data-id="reasoning"] .art__clip { -webkit-mask: repeating-linear-gradient(180deg, #000 0 var(--k, 16px), transparent var(--k, 16px) 16px);
  mask: repeating-linear-gradient(180deg, #000 0 var(--k, 16px), transparent var(--k, 16px) 16px); }
.trial__text { position: absolute; left: 7vw; top: 50%; transform: translateY(-46%); max-width: min(620px, 46vw); }
.trial__num { font-family: var(--hud); color: var(--c); letter-spacing: .3em; font-size: .9rem; }
.trial__skill { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 5rem); line-height: .95; margin: .12em 0 0; color: var(--c);
  text-shadow: 0 0 44px color-mix(in srgb, var(--c) 50%, transparent); white-space: nowrap; }
.trial__name { font-family: var(--comic); font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: .03em; margin: .05em 0 .45em; display: inline-block; transform: rotate(-3deg);
  text-shadow: 3px 3px 0 var(--ink); }
.trial__desc { color: var(--muted); font-size: clamp(.98rem, 1.3vw, 1.1rem); margin: .3em 0; }
.trial__champ { display: flex; align-items: center; gap: 12px; margin: 1.4em 0 0; padding: 6px 18px 6px 6px; width: fit-content; border-radius: 999px;
  background: rgba(255, 248, 238, .07); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); font-size: .95rem; }
.trial__champ img { width: 44px; height: 44px; clip-path: var(--hex); }

/* ---------- 4 · radar ---------- */
.profile { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 90px); align-items: center;
  padding: clamp(80px, 16vh, 170px) clamp(16px, 7vw, 110px); background: var(--hexgrid), linear-gradient(180deg, var(--ink), #16103a 50%, var(--ink)); }
.profile__radar { width: 100%; max-width: 580px; margin-inline: auto; }
#radar { width: 100%; height: auto; overflow: visible; }
#radar .ring { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.5; }
#radar .ring--outer { stroke: rgba(255, 255, 255, .28); stroke-width: 2.5; }
#radar .axis { stroke: rgba(255, 255, 255, .1); stroke-width: 1.5; }
#radar .shape { fill: url(#radar-fill); stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(255, 210, 63, .45)); }
#radar .dot { stroke: var(--ink); stroke-width: 3; }
#radar .label { font-family: var(--display); font-size: 21px; text-anchor: middle; }
:root:lang(ja) #radar .label, :root:lang(zh-CN) #radar .label, :root:lang(ko) #radar .label { font-size: 32px; }  /* 2-4 caracteres: más grandes, que se lean */
#radar .value { font-family: var(--hud); font-size: 20px; fill: var(--white); text-anchor: middle; }
.score { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.score__laurel { width: 150px; height: auto; opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.score.is-done .score__laurel { opacity: 1; transform: none; }
.score__box { display: grid; }
.score__label { font-family: var(--hud); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--muted); }
.score__value { font-family: var(--display); font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1; color: var(--gold); }
.score__rank { font-family: var(--comic); font-size: 1.7rem; letter-spacing: .04em; opacity: 0; transform: translateY(8px); transition: opacity .4s .2s, transform .4s .2s; }
.score.is-done .score__rank { opacity: 1; transform: none; }

/* ---------- 5 · historia ---------- */
.story { position: relative; padding: clamp(80px, 15vh, 160px) clamp(16px, 5vw, 70px);
  background: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.5px) 0 0 / 14px 14px, #130d2b; }
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); max-width: 1180px; margin: clamp(36px, 6vh, 64px) auto 0; }
.panel { --c: var(--gold); position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 5px solid #000; border-radius: 4px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 75%, #fff) 0, color-mix(in srgb, var(--c) 55%, var(--ink)) 55%, color-mix(in srgb, var(--c) 25%, var(--ink)) 100%);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, .5); }
.panel:nth-child(odd) { rotate: -1.3deg; }
.panel:nth-child(even) { rotate: 1.1deg; }
.panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(0, 0, 0, .28) 1.3px, transparent 1.7px) 0 0 / 10px 10px; mix-blend-mode: multiply; }
.panel::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255, 255, 255, .22) 0 2deg, transparent 2deg 14deg); opacity: .5; }
/* Centrado con márgenes automáticos (no con translate: GSAP lo convertía a píxeles con la imagen aún sin cargar y el personaje se iba a la derecha)
   y con los pies dentro de la viñeta. */
.panel__char { position: absolute; z-index: 1; left: 0; right: 0; margin: 0 auto; bottom: 2.5%; height: 75%; width: auto; max-width: none; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); }
/* El bocadillo vive en la franja de arriba, por encima de la cabeza (el personaje mide el 83 % y arranca más abajo): nunca tapa la cara.
   Cada viñeta lo coloca distinto: a la izquierda o a la derecha, un poco más alto o más bajo, y con la colita hacia el personaje. */
.panel__bubble { --bl: 4%; --br: 14%; --bt: 3%; --tail: 62%; position: absolute; z-index: 2; top: var(--bt); left: var(--bl); right: var(--br); margin: 0; background: #fff; color: var(--ink); border: 3px solid #000;
  border-radius: 18px; padding: .45em .7em; font-weight: 800; font-size: clamp(.78rem, 1.05vw, .94rem); line-height: 1.28; }
.panel__bubble::after { content: ""; position: absolute; left: var(--tail); bottom: -16px; border: 14px solid transparent; border-top-color: #000; border-bottom: 0; }
.panel:nth-child(1) .panel__bubble { --bl: 4%; --br: 16%; --bt: 3%; --tail: 64%; }
.panel:nth-child(2) .panel__bubble { --bl: 18%; --br: 4%; --bt: 4.5%; --tail: 30%; }
.panel:nth-child(3) .panel__bubble { --bl: 4%; --br: 12%; --bt: 3%; --tail: 70%; }
.panel:nth-child(4) .panel__bubble { --bl: 14%; --br: 4%; --bt: 4%; --tail: 22%; }
.panel:nth-child(5) .panel__bubble { --bl: 4%; --br: 18%; --bt: 4.5%; --tail: 58%; }
.panel:nth-child(6) .panel__bubble { --bl: 16%; --br: 4%; --bt: 3%; --tail: 36%; }
.sfx { position: absolute; z-index: 3; right: 5%; bottom: 20%; font-family: var(--comic); font-size: clamp(1.7rem, 3vw, 2.8rem); color: var(--c); letter-spacing: .04em;
  -webkit-text-stroke: 2px #000; text-shadow: 3px 3px 0 #000; rotate: -12deg; }
.story__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 5vw, 70px); margin-top: clamp(40px, 8vh, 80px); }
.hexi-shout { display: flex; align-items: center; gap: 10px; }
.hexi-shout img { width: 110px; height: auto; }
.hexi-shout__text { margin: 0; font-family: var(--comic); font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: .03em; line-height: 1.05; max-width: 15ch;
  color: var(--gold); text-shadow: 3px 3px 0 #000; rotate: -3deg; }
/* en chino y japonés el «ch» de Bangers (latina estrecha) daba columnas de 4 caracteres; el trazo, más fino */
:root:lang(ja) .hexi-shout__text, :root:lang(zh-CN) .hexi-shout__text, :root:lang(ko) .hexi-shout__text { max-width: 12em; line-height: 1.2; }
:root:lang(ja) .sfx, :root:lang(zh-CN) .sfx, :root:lang(ko) .sfx { -webkit-text-stroke-width: 1.5px; }
.voice { display: grid; justify-items: center; gap: 8px; }
.btn--voice { --bg: var(--white); }
.voice__note { margin: 0; color: var(--muted); font-size: .9rem; }
/* Idiomas de los textos: rótulo HUD y fichas con el hexágono de color de la web; la del idioma actual, en dorado */
.langs { display: grid; justify-items: center; gap: 10px; margin-top: 14px; padding-top: 16px; max-width: 440px; position: relative; }
.langs::before { content: ""; position: absolute; top: 0; left: 50%; width: 70%; height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 63, .5), transparent); }
.langs__label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--hud); text-transform: uppercase;
  letter-spacing: .16em; font-size: .78rem; color: var(--gold); text-align: center; }
:root:is(:lang(ja), :lang(zh-CN), :lang(ko)) .langs__label { letter-spacing: .06em; }
.langs__globe { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.langs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.langs__list a { display: inline-flex; align-items: center; gap: 7px; padding: .38em .8em .38em .65em; border-radius: 999px; text-decoration: none;
  font-family: "M PLUS Rounded 1c", "HX KR", system-ui, sans-serif; font-weight: 800; font-size: .82rem; line-height: 1.2; white-space: nowrap;
  color: var(--muted); background: rgba(255, 248, 238, .06); border: 1px solid rgba(255, 248, 238, .14); transition: color .15s, border-color .15s, background .15s; }
.langs__list a::before { content: ""; flex: none; width: 10px; aspect-ratio: 1.15; clip-path: var(--hex); background: var(--c); opacity: .85; }
.langs__list a:hover, .langs__list a:focus-visible { color: var(--white); border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); outline: none; }
.langs__list a[aria-current] { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.langs__list a[aria-current]::before { background: var(--ink); opacity: 1; }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i { width: 4px; height: 30%; background: var(--ink); border-radius: 2px; }
.is-playing .eq i { animation: eq .8s ease-in-out infinite; }
.is-playing .eq i:nth-child(2) { animation-delay: -.2s; } .is-playing .eq i:nth-child(3) { animation-delay: -.45s; } .is-playing .eq i:nth-child(4) { animation-delay: -.65s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ---------- 6 · competición ---------- */
.compete { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 15vh, 160px) clamp(16px, 6vw, 100px); }
.compete__bg { position: absolute; inset: -10% 0; z-index: -2; }
.compete__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.35) saturate(1.2); }
.compete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0, rgba(12, 9, 24, .3) 30%, rgba(12, 9, 24, .3) 70%, var(--ink) 100%); }
.compete__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: start; max-width: 1240px; margin: 0 auto; }
/* Adornos de rango centrados bajo su título y con efecto podio. PC y tableta: 3 + 3 (arriba 2.º, corona más alta y más grande en el centro,
   3.º; abajo 4.º, 5.º y 6.º). Móvil: pirámide 1 + 2 + 3 (corona arriba, alas, laurel de oro, de plata y de bronce). Siguen flotando con GSAP. */
.compete__text .h3 { text-align: center; }
.frames { display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; align-items: end; gap: 60px 10px; max-width: 580px; margin: 8px auto 0; padding-bottom: 12px; }
.frames .frame { grid-column: span 2; }
.frames .frame:nth-child(5) { grid-row: 1; grid-column: 1 / span 2; }  /* 2.º: alas doradas */
.frames .frame:nth-child(6) { grid-row: 1; grid-column: 3 / span 2; height: 104px; align-self: start; }  /* 1.º: corona, más alta y grande */
.frames .frame:nth-child(4) { grid-row: 1; grid-column: 5 / span 2; }  /* 3.º: alas blancas */
.frames .frame:nth-child(3) { grid-row: 2; grid-column: 1 / span 2; }  /* 4.º: laurel de oro */
.frames .frame:nth-child(2) { grid-row: 2; grid-column: 3 / span 2; }  /* 5.º: laurel de plata */
.frames .frame:nth-child(1) { grid-row: 2; grid-column: 5 / span 2; }  /* 6.º: laurel de bronce */
@media (max-width: 620px) {
  .frames { max-width: 360px; gap: 52px 6px; align-items: center; }
  .frames .frame { height: 56px; }
  .frames .frame:nth-child(6) { grid-row: 1; grid-column: 3 / span 2; height: 76px; align-self: center; }
  .frames .frame:nth-child(5) { grid-row: 2; grid-column: 1 / span 3; }
  .frames .frame:nth-child(4) { grid-row: 2; grid-column: 4 / span 3; }
  .frames .frame:nth-child(3) { grid-row: 3; grid-column: 1 / span 2; }
  .frames .frame:nth-child(2) { grid-row: 3; grid-column: 3 / span 2; }
  .frames .frame:nth-child(1) { grid-row: 3; grid-column: 5 / span 2; }
}
.frame { height: 78px; width: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); animation: empuja-1 4.6s ease-in-out infinite; }
/* Efecto «cadena»: al bajar, los de arriba empujan a los de abajo (que se mueven un instante después); al subir, los de abajo empujan a los
   de arriba. Cada fila tiene su propio ciclo (mismo periodo, momentos distintos). PC: 2 filas; móvil: 3 filas (ver el bloque de abajo). */
.frames .frame:nth-child(4), .frames .frame:nth-child(5), .frames .frame:nth-child(6) { animation-name: empuja-1; }
.frames .frame:nth-child(1), .frames .frame:nth-child(2), .frames .frame:nth-child(3) { animation-name: empuja-3; }
@keyframes empuja-1 { 0%, 100% { translate: 0 0; } 25% { translate: 0 12px; } 60% { translate: 0 12px; } 85% { translate: 0 0; } }
@keyframes empuja-2 { 0%, 100% { translate: 0 0; } 8% { translate: 0 0; } 33% { translate: 0 12px; } 52% { translate: 0 12px; } 77% { translate: 0 0; } }
@keyframes empuja-3 { 0%, 100% { translate: 0 0; } 16% { translate: 0 0; } 41% { translate: 0 12px; } 44% { translate: 0 12px; } 69% { translate: 0 0; } }
@media (max-width: 620px) {
  .frames .frame:nth-child(4), .frames .frame:nth-child(5) { animation-name: empuja-2; }
  .frames .frame:nth-child(1), .frames .frame:nth-child(2), .frames .frame:nth-child(3) { animation-name: empuja-3; }
}
@media (prefers-reduced-motion: reduce) { .frame { animation: none; } }
.reduced .frame { animation: none; }
.leaderboard { background: rgba(20, 16, 41, .82); border: 1px solid rgba(255, 255, 255, .09); border-radius: 20px; padding: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.leaderboard__title { margin: 0 4px 12px; font-family: var(--hud); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; color: var(--gold); }
.lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-row { display: grid; grid-template-columns: 32px 44px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.lb-rank { font-family: var(--hud); font-size: 1.15rem; color: var(--muted); text-align: center; }
.lb-row:first-child .lb-rank { color: var(--gold); }
.lb-row img { width: 44px; height: 44px; clip-path: var(--hex); object-fit: cover; }
.lb-name { font-weight: 800; }
.lb-grade { font-family: var(--hud); font-size: 1.25rem; }
.lb-row--you { background: linear-gradient(90deg, rgba(255, 210, 63, .28), rgba(255, 210, 63, .06)); box-shadow: inset 0 0 0 2px var(--gold); animation: glow 2.2s ease-in-out infinite; }
.lb-row--you .lb-name, .lb-row--you .lb-grade { color: var(--gold); }
@keyframes glow { 50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 26px rgba(255, 210, 63, .35); } }
.achs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ach { width: 100%; aspect-ratio: 1; border-radius: 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }

/* ---------- 7 · características ---------- */
/* 6 en fila en escritorio, 3 + 3 en tableta y 2 + 2 + 2 en móvil (antes quedaba una sola en la segunda fila). La
   entrada (GSAP) va en .feat-w y el hover en .feat: con los dos en el mismo elemento, la transition del hover
   falseaba los valores que GSAP relee al refrescar y las losetas se quedaban a escala 0,7 */
.features { display: grid; grid-template-columns: repeat(6, auto); justify-content: center; gap: clamp(10px, 1.6vw, 18px); padding: clamp(60px, 10vh, 110px) clamp(16px, 5vw, 60px);
  background: var(--hexgrid), var(--ink); }
.feat { --c: var(--gold); width: clamp(150px, 13.4vw, 215px); aspect-ratio: 1.12; clip-path: var(--hex); display: grid; place-content: center; text-align: center; gap: 2px; padding: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, var(--panel)), var(--panel) 70%); transition: transform .25s; }
@media (max-width: 1179px) { .features { grid-template-columns: repeat(3, auto); } .feat { width: clamp(150px, 20vw, 215px); } }
@media (max-width: 559px) { .features { grid-template-columns: repeat(2, auto); } }
.feat:hover { transform: translateY(-6px) rotate(-2deg); }
.feat b { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.4rem); color: var(--c); line-height: 1.1; }
.feat span { font-size: .9rem; color: var(--muted); line-height: 1.25; }

/* ---------- 8 · llamada final ---------- */
.cta { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; padding: 110px 16px; }
.cta__bg { position: absolute; inset: -8% 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 55%, rgba(12, 9, 24, .35), rgba(12, 9, 24, .9) 75%), linear-gradient(180deg, var(--ink), transparent 25%); }
.cta__inner { display: grid; justify-items: center; gap: 18px; max-width: 760px; }
.cta__emblem { width: 130px; height: auto; filter: drop-shadow(0 0 28px rgba(255, 210, 63, .55)); }
.cta__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 6.8vw, 5.6rem); line-height: 1.02; color: transparent;
  -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(180deg, #FFF6C2, #FFD23F 45%, #FF9F1C); filter: drop-shadow(0 .06em 0 rgba(12, 9, 24, .7)); }
.cta .lead { margin-inline: auto; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.social { display: inline-flex; align-items: center; gap: 10px; padding: .75em 1.2em; border-radius: 14px; text-decoration: none; font-weight: 800;
  background: rgba(255, 248, 238, .1); border: 1px solid rgba(255, 248, 238, .22); transition: background .2s, transform .2s; }
.social:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.social svg .dot { fill: currentColor; stroke: none; }
.mail { color: var(--muted); font-size: .95rem; text-decoration-color: rgba(255, 255, 255, .3); overflow-wrap: anywhere; }
.mail__addr { white-space: nowrap; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.confetti i { position: absolute; top: 40%; left: 50%; width: 10px; height: 16px; border-radius: 2px; }
/* pie: marca del estudio (logo con transparencia, tools/web_assets.py) */
.footer { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 6px; padding: 46px 16px 38px; text-align: center; background: var(--ink); }
.footer::before { content: ""; position: absolute; top: 0; left: 50%; width: min(560px, 80%); height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 92, .45) 30%, rgba(214, 224, 255, .45) 70%, transparent); }
.footer__studio { display: block; border-radius: 8px; }
.footer__studio[href] { transition: transform .2s, filter .2s; }
.footer__studio[href]:hover { transform: translateY(-2px); filter: brightness(1.1); }
.footer__logo { width: clamp(132px, 12vw, 164px); height: auto; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 10px; }
.footer__links a, .footer__press a { font-family: var(--hud); font-size: .86rem; letter-spacing: .1em; text-decoration: none; color: var(--muted); transition: color .2s; }
.footer__links a:hover, .footer__press a:hover { color: var(--gold); text-decoration: underline; }
.footer__press { margin: 4px 0 0; font-family: var(--hud); font-size: .86rem; letter-spacing: .08em; color: var(--muted); }
.footer__copy { margin: 0; font-family: var(--hud); font-size: .8rem; letter-spacing: .12em; color: rgba(255, 248, 238, .5); }

/* ---------- 7 · y además (fichas de las novedades: mismo panel oscuro que el ranking y el hexágono de color de la web) ---------- */
.extras { position: relative; padding: clamp(80px, 14vh, 150px) clamp(16px, 5vw, 70px) clamp(30px, 6vh, 60px); background: var(--hexgrid), var(--ink); }
.extras__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); max-width: 1180px; margin: clamp(32px, 6vh, 56px) auto 0; padding: 0; list-style: none; }
.extra { --c: var(--gold); position: relative; display: grid; align-content: start; justify-items: center; text-align: center; gap: 10px; padding: 22px 22px 24px; border-radius: 20px;
  background: rgba(20, 16, 41, .82); border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform .25s, border-color .25s; }
.extra:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.extra__icon { display: grid; place-items: center; width: 54px; aspect-ratio: 1.15; clip-path: var(--hex); background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); }
.extra__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.extra__icon svg .dot { fill: currentColor; stroke: none; }
.extra__title { margin: 6px 0 2px; text-wrap: balance; font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.15; color: var(--c); }
.extra__text { margin: 0; max-width: 36ch; color: var(--muted); font-size: .98rem; line-height: 1.5; text-wrap: balance; }

/* ---------- 9 · AFTER HOURS (próximamente): la arena a oscuras y el cartel de neón del menú de la fiesta ---------- */
.ah { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 15vh, 160px) clamp(16px, 6vw, 100px); }
.ah__bg { position: absolute; inset: 0; z-index: -2; }
.ah__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.22) saturate(1.3) hue-rotate(-18deg); }
.ah::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 22% 30%, rgba(255, 79, 184, .22), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(46, 230, 240, .16), transparent 55%),
              linear-gradient(180deg, var(--ink) 0, rgba(12, 9, 24, .35) 22%, rgba(12, 9, 24, .35) 78%, var(--ink) 100%); }
.ah__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 60px); align-items: center; max-width: 1240px; margin: 0 auto; }
.ah__logo { margin: 0 0 18px; font-family: var(--logo); font-weight: 400; font-size: clamp(2.6rem, 7vw, 6rem); line-height: .95; letter-spacing: .02em; }
.ah__pre { display: block; margin-bottom: .35em; font-family: var(--hud); font-size: max(.8rem, .2em); letter-spacing: .4em; color: var(--muted); }
.ah__a, .ah__b { display: inline-block; animation: neon 6s infinite; }
.ah__a { color: color-mix(in srgb, #FF4FB8 50%, #fff); -webkit-text-stroke: .02em #FF4FB8; text-shadow: 0 0 .25em rgba(255, 79, 184, .9), 0 0 .8em rgba(255, 79, 184, .55); }
.ah__b { color: color-mix(in srgb, #2EE6F0 50%, #fff); -webkit-text-stroke: .02em #2EE6F0; text-shadow: 0 0 .25em rgba(46, 230, 240, .9), 0 0 .8em rgba(46, 230, 240, .5); animation-delay: -2.3s; }
@keyframes neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .45; } }
.ah__lead { color: var(--white); }
.ah__hexi { width: clamp(150px, 17vw, 250px); height: auto; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6)); }
  background: rgba(20, 16, 41, .82); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* japonés: a este tamaño los kanji de Dela Gothic One se empastan: M PLUS Rounded ExtraBold, como el cuerpo */
:root:lang(ja) :is(.extra__title) { font-family: var(--body); font-weight: 800; }
@media (max-width: 899px) {
  .extras__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ah__inner { grid-template-columns: 1fr; text-align: center; }
  .ah__head .lead { margin-inline: auto; }
  .ah__hexi { justify-self: center; width: 140px; order: -1; }
}
@media (max-width: 559px) {
  .extras__grid { grid-template-columns: 1fr; }
}

/* ---------- común: atributo hidden con fuerza, «saltar al contenido» y botón de menú ---------- */
[hidden] { display: none !important; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: .7em 1.2em; border-radius: 10px; background: var(--gold); color: var(--ink);
  font-family: var(--hud); font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform .2s; }
.skip:focus { transform: none; }
main:focus { outline: none; }
.nav-toggle { display: none; position: relative; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer;
  background: rgba(12, 9, 24, .35); border: 1px solid rgba(255, 255, 255, .24); color: var(--white); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; left: 0; margin-left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle:hover, .nav-toggle.is-open { border-color: var(--gold); }

/* ---------- preguntas frecuentes ---------- */
.faq { position: relative; padding: clamp(70px, 12vh, 130px) clamp(16px, 5vw, 70px); background: var(--hexgrid), var(--ink); }
.faq__list { display: grid; gap: 12px; max-width: 820px; margin: clamp(28px, 5vh, 48px) auto 0; }
.faq__item { border-radius: 16px; background: rgba(20, 16, 41, .82); border: 1px solid rgba(255, 255, 255, .09); transition: border-color .2s; }
.faq__item[open] { border-color: rgba(255, 210, 63, .45); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 1.05rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); rotate: 45deg; translate: 0 -2px; transition: rotate .2s; }
.faq__item[open] summary::after { rotate: 225deg; translate: 0 2px; }
.faq__item p { margin: 0; padding: 0 20px 18px; color: var(--muted); line-height: 1.55; text-wrap: pretty; }
.faq__item .faq__more { padding-top: 0; margin-top: -6px; }
.faq__more a { color: var(--gold); }
.cta__steam { margin-top: 22px; }

/* ---------- paquete «día de Steam» (apagado: #steam lleva hidden hasta DIA_STEAM = true en js/site.js) ---------- */
.steamday { padding: clamp(60px, 10vh, 120px) clamp(16px, 5vw, 70px); background: var(--hexgrid), var(--night); }
.steamday__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vh, 64px); max-width: 1100px; margin: 0 auto; }
.steamday__block .h2 { text-align: center; font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
.trailer { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 860px; margin: 0 auto; border-radius: 20px; text-decoration: none;
  background: rgba(20, 16, 41, .82); border: 1px dashed rgba(255, 255, 255, .25); overflow: hidden; }
.trailer__marker, .shots__marker { color: var(--muted); font-family: var(--hud); letter-spacing: .08em; }
.trailer__marker { position: absolute; top: 14px; left: 18px; }
.trailer:not([href]) .trailer__btn { display: none; }
.shots { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.shots img { flex: none; width: min(520px, 80vw); border-radius: 14px; scroll-snap-align: start; }
.shots__marker { margin: 0 auto; padding: 40px 0; }
.sdtable-wrap { max-width: 860px; margin: 0 auto; overflow-x: auto; }
.sdtable { width: 100%; max-width: 860px; margin: 0 auto; border-collapse: collapse; font-size: .98rem; }
.sdtable th, .sdtable td { padding: 11px 14px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sdtable thead th { font-family: var(--hud); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--gold); }
.sdtable tbody th { font-weight: 800; }
.sdtable td { color: var(--muted); }

/* ---------- móvil ---------- */
@media (max-width: 899px) {
  .nav { display: none; }
  .nav-toggle { display: block; order: 3; }
  .nav.is-open { display: grid; position: absolute; top: 100%; left: clamp(10px, 3vw, 24px); right: clamp(10px, 3vw, 24px); gap: 0; margin: 6px 0 0; padding: 8px;
    border-radius: 16px; background: rgb(22, 17, 44); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 44px rgba(0, 0, 0, .55); }
  .nav.is-open a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px; font-size: .95rem; }
  .nav.is-open a:hover, .nav.is-open a:focus-visible { background: rgba(255, 248, 238, .08); color: var(--white); outline: none; }
  .lang { margin-left: auto; }
  .hexi .bubble { display: none; }
  .hexi img { width: 88px; }
  .trials { height: auto; overflow: visible; }
  .trials__kicker { position: static; padding: 72px 6vw 0; }
  .trials__hud { display: none; }
  .trials__track { flex-direction: column; width: 100%; }
  .trial { flex: none; width: 100%; height: auto; min-height: 100svh; }
  .trial::before { background: radial-gradient(circle at 60% 35%, color-mix(in srgb, var(--c) 34%, transparent) 0, transparent 55%),
                   linear-gradient(180deg, rgba(12, 9, 24, .35) 0, rgba(12, 9, 24, .2) 35%, rgba(12, 9, 24, .92) 62%, var(--ink) 100%); }
  .trial__scene { inset: 0; width: 100%; height: 100%; }
  .trial__lines { right: -30vw; top: 32%; width: 110vw; }
  .trial__actor { right: 50%; translate: 50% 0; bottom: auto; top: 6svh; height: 56svh; }
  .hero__mark { width: min(40vw, 22svh); }
  .trial__text { position: relative; left: auto; top: auto; transform: none; max-width: none; padding: 60svh 6vw 10svh; }
  .profile { grid-template-columns: 1fr; }
  .profile__text { text-align: center; }
  .profile__text .lead { margin-inline: auto; }
  .score { justify-content: center; }
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compete__inner { grid-template-columns: 1fr; }
  .achs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-height: 820px) {  /* portátiles bajos: que el emblema, el título y los botones quepan */
  .hero__content { padding-top: 78px; padding-bottom: 52px; }
  .hero__lead { display: none; }
  .hexi .bubble { display: none; }  /* sin sitio: tapaba el lema */
}
@media (max-width: 520px) {
  .panels { grid-template-columns: 1fr; max-width: 380px; }
  .hero__lead { display: none; }
  .brand span { display: none; }
  /* textos más largos (inglés, alemán): que el rótulo quepa en una línea y la nota no se parta junto al laurel */
  .hero__kicker { font-size: .72rem; letter-spacing: .14em; padding-inline: .9em; }
  .score__laurel { width: 112px; }
  .score__label, .score__rank { white-space: nowrap; }
}

/* ---------- sin animaciones o sin JavaScript: las pruebas en columna, como en móvil (si no, solo se vería la primera) ---------- */
.reduced .trials, html:not(.js) .trials { height: auto; overflow: visible; }
.reduced .trials__kicker, html:not(.js) .trials__kicker { position: static; padding: 72px 6vw 0; }
.reduced .trials__hud, html:not(.js) .trials__hud { display: none; }
.reduced .trials__track, html:not(.js) .trials__track { flex-direction: column; width: 100%; }
.reduced .trial, html:not(.js) .trial { flex: none; width: 100%; height: auto; min-height: 100svh; }
.reduced .trial::before, html:not(.js) .trial::before { background: radial-gradient(circle at 60% 35%, color-mix(in srgb, var(--c) 34%, transparent) 0, transparent 55%),
  linear-gradient(180deg, rgba(12, 9, 24, .35) 0, rgba(12, 9, 24, .2) 35%, rgba(12, 9, 24, .92) 62%, var(--ink) 100%); }
.reduced .trial__scene, html:not(.js) .trial__scene { inset: 0; width: 100%; height: 100%; }
.reduced .trial__lines, html:not(.js) .trial__lines { right: -30vw; top: 32%; width: 110vw; }
.reduced .trial__actor, html:not(.js) .trial__actor { right: 50%; translate: 50% 0; bottom: auto; top: 6svh; height: 56svh; }
.reduced .trial__text, html:not(.js) .trial__text { position: relative; left: auto; top: auto; transform: none; max-width: 760px; margin-inline: auto; padding: 60svh 6vw 10svh; }
/* sin JavaScript el botón del menú y el selector de idioma no hacen nada: el botón se esconde y la lista se abre al pasar o enfocar */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .lang:hover .lang__menu, html:not(.js) .lang:focus-within .lang__menu { opacity: 1; visibility: visible; transform: none; }

/* ---------- sin animaciones (preferencia del sistema) ---------- */
.reduced *, .reduced *::before, .reduced *::after { animation: none !important; transition: none !important; }
.reduced .bg-lit { opacity: 1; }
.reduced .mark__body, .reduced .gem { opacity: 1; }
.reduced .score__laurel, .reduced .score__rank { opacity: 1; transform: none; }