/* ============================================================================
   OXIDIA — HOMEPAGE CINEMATOGRAFICA (v0.93)
   El envoltorio AAA: portada a pantalla completa con arte real, secciones de
   modos/mapas/armas/como se juega, y CTA. Vive SOBRE el juego; DESPLEGAR lo lanza.
   Paleta y fuentes heredadas de tokens (Chakra Petch + Share Tech Mono, rust/steel).
   ============================================================================ */

#site {
  /* v26.37 se promueve tambien la portada: dos capas de composicion se ordenan por z-index, una
     promovida y otra no compiten de forma impredecible segun el navegador y la GPU. */
  position: fixed; inset: 0; z-index: 70; overflow-y: auto; overflow-x: hidden; transform: translateZ(0); /* v0.96: ENCIMA de joystick(40)/fireb(41)/chat(42): en movil interceptaban los toques de la portada */
  pointer-events: auto; /* v0.95: JAMAS heredar none (el bug: dentro de #hud los clicks atravesaban) */
  background: #0a0806;
  /* v26.31 EL DESPLAZAMIENTO SUAVE SE ACTIVA DESPUES. Con `smooth` puesto desde el primer cuadro,
     cualquier correccion de posicion se convierte en una animacion visible — y el navegador,
     restaurando la posicion de la visita anterior, hacia que la portada "viajara" hasta el final
     a la vista del jugador. El suave lo enciende el guion cuando la pagina ya se ha asentado, asi
     que sigue habiendolo al pulsar "VER MODOS" pero no durante la carga. */
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
/* v26.36 el contenedor no puede quedarse vacio a la vista: si su contenido se hunde, al menos
   conserva altura para que lo que quede se vea, en vez de dejar la pantalla en negro. */
/* v26.40 se retira el !important de v26.39: era un remiendo contra un sintoma cuya causa ya esta
   arreglada —la pantalla de bienvenida abriendose sobre la portada—. Un remiendo que sobrevive a
   su causa se convierte en la proxima trampa: alguien lo lee dentro de un año, no entiende por que
   esta y no se atreve a quitarlo. */
#site.hidden { display: none; }
#site * { box-sizing: border-box; }

/* ---------- HERO ---------- */
.oxHero {
  /* ==========================================================================================
     v26.34 ALTURA EN PIXELES, NO SOLO EN UNIDADES DE PANTALLA. El diagnostico en el navegador de
     Miguel enseño el hero pasando de 874 px a CERO a los 3,5 s, con min-height calculado en
     861 px — o sea, la regla estaba puesta y el elemento salia del layout igualmente, arrastrando
     con el todas las secciones y dejando el bloque de cierre arriba del todo. Eso es lo que se
     veia como "la portada salta al final": no habia salto, se hundia lo de arriba.
     `svh` depende de que el navegador haya resuelto la altura de la barra; mientras no lo hace, o
     si la recalcula, puede quedarse en cero. Con `height` explicito ademas de `min-height`, y un
     suelo en pixeles, el hero no puede colapsar aunque la unidad falle.
     ========================================================================================== */
  position: relative; min-height: 560px; min-height: 100svh; height: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  overflow: hidden;
}
.oxHero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('/media/hero.webp') center 30% / cover no-repeat;
  transform: scale(1.05);
  animation: oxHeroDrift 26s ease-in-out infinite alternate;
}
@keyframes oxHeroDrift { from { transform: scale(1.05) translateY(0); } to { transform: scale(1.12) translateY(-14px); } }
.oxHero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 12%, transparent 40%, rgba(10,8,6,.55) 100%),
    linear-gradient(180deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.28) 34%, rgba(10,8,6,.75) 82%, #0a0806 100%);
}
/* ============================================================================
   v3.78 EL HERO PASA A COMPOSICION EN CAPAS.
   Antes era un paisaje con texto centrado encima. Eso es la estructura de una WEB. Las landings
   de shooter -Valorant, Apex, CS- no ponen texto sobre un paisaje: ponen una FIGURA a gran
   escala y el titulo compite con ella. Fondo, personaje, tipografia. Un paisaje con texto
   encima se lee como una pagina; un operador mirandote con el titulo al lado se lee como un
   juego. La diferencia no estaba en la tipografia -Chakra Petch esta en la misma familia de
   intencion que el DIN Next que usa Valorant en toda su interfaz- sino aqui.
   Se conserva TODA la direccion de arte existente: Chakra Petch, oxido, ambar, mayusculas con
   tracking, los botones. Solo cambia la composicion.
   ============================================================================ */
.oxHero { text-align: left; }
.oxHero__figura {
  position: absolute; z-index: 2; right: 2vw; bottom: 0; top: 6%;
  width: min(42vw, 560px);
  background: url('/media/operador-hero.webp') right bottom / contain no-repeat;
  pointer-events: none;
  /* Se funde con el fondo por abajo para que no haya un corte recto donde acaba la figura */
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
@keyframes oxFigEntra { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
/* La animacion SOLO en pantalla ancha. Con animation-fill-mode: both el fotograma final fija
   opacity:1, y eso pisaba la atenuacion del movil: la figura salia opaca y tapaba el titulo en
   tablet. Lo cazo la comprobacion de solape, no la vista. */
@media (min-width: 861px) {
  .oxHero__figura { animation: oxFigEntra 1.1s cubic-bezier(.16,1,.3,1) both; }
}
/* Sombra propia bajo la figura: sin ella parece pegada, no de pie */
.oxHero__figura::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 16%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(10,8,6,.85), transparent 70%);
}
.oxHero__inner {
  position: relative; z-index: 3; max-width: 820px;
  margin-right: auto; padding-right: min(40vw, 520px);
}
/* ============================================================================================
   v25.84 EL HUECO DE LA FIGURA SE COMIA LA COLUMNA. Medido en el navegador, que es lo que
   destapo el enigma: .oxHero__inner tiene max-width 820 y padding-right de hasta 520 px para
   reservar sitio al personaje. 820 - 512 = 308 px REALES de texto, y ahi el parrafo de venta se
   parte en cuatro lineas estrechas mientras la pantalla tiene 1280.
   Subir el max-width del parrafo no servia de nada —se probo y siguio en 308—: el limite no
   estaba en el hijo, estaba en el padre. La caja parecia de 820 y era de 308.
   En pantalla ancha el contenedor crece con ella, asi que el hueco de la figura se mantiene Y el
   texto respira. Debajo de 1100 px no se toca nada: ahi la reserva es correcta.
   ============================================================================================ */
@media (min-width: 1100px) {
  .oxHero__inner { max-width: min(1180px, 92vw); }
}
/* MOVIL: no hay sitio para dos columnas. La figura pasa DETRAS, mas tenue y desplazada, y el
   texto vuelve al centro. Se mantiene la presencia del personaje sin comerse la legibilidad,
   que es lo unico que no se negocia en un hero. */
@media (max-width: 860px) {
  .oxHero { text-align: center; }
  .oxHero__inner { padding-right: 0; }
  .oxHero__figura {
    z-index: 1; right: -8vw; width: min(66vw, 380px); opacity: .26; top: 26%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .oxHero__figura { animation: none; } }
.oxHero__kicker {
  font: 600 12px/1 'Share Tech Mono', monospace; letter-spacing: .42em;
  color: #ff8a5c; text-transform: uppercase; margin-bottom: 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.oxHero__title {
  font: 800 clamp(64px, 15vw, 168px)/.92 'Chakra Petch', sans-serif;
  letter-spacing: .04em; margin: 0;
  color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.9), 0 0 80px rgba(255,90,50,.25);
}
.oxHero__title b { color: #ff4530; font-weight: 800; }
.oxHero__tagline {
  font: 600 clamp(15px, 2.6vw, 21px)/1.5 'Chakra Petch', sans-serif;
  color: rgba(240,232,226,.94); margin: 22px 0 0; max-width: 480px;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.oxHero__cta { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; margin-top: 38px; }
@media (max-width: 860px) { .oxHero__cta { justify-content: center; } .oxHero__tagline { margin: 22px auto 0; } }
/* ============================================================================================
   v25.83 LA COLUMNA RESPIRA EN PANTALLA ANCHA. Visto en captura a 1280 px: el texto de venta caia
   en una columna de unos 330 px y se partia en CINCO lineas, mientras el 60 % derecho era arte sin
   una sola funcion. Un parrafo de cinco lineas estrechas se lee peor que uno de tres anchas, y la
   promesa del juego es lo primero que hay que poder leer de un vistazo.
   Solo a partir de 1100 px: en movil la columna estrecha es correcta y no se toca.

   OJO — ESTO SOLO NO BASTA, y queda medido: subiendo el max-width a 620 px el parrafo SIGUE
   midiendo 308. Su contenedor (.oxHero__inner) tiene 820 px libres y el parrafo es display:block,
   asi que deberia ocupar 620. Algo mas fija ese ancho y no se ha encontrado en esta sesion. Se
   deja el valor correcto —no estorba— pero el arreglo de verdad esta pendiente y NO se da por
   hecho: un CSS que no cambia lo que se ve es ruido, no una mejora.
   ============================================================================================ */
@media (min-width: 1100px) {
  .oxHero__tagline { max-width: 620px; font-size: clamp(17px, 1.6vw, 22px); }
  .oxHero__cta { margin-top: 30px; }
}
.oxBtn {
  font: 700 15px/1 'Chakra Petch', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 34px; border-radius: 6px; border: 0; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease; color: #fff;
}
.oxBtn--primary {
  background: linear-gradient(135deg, #ff4530, #c22a1c); color: #fff;
  box-shadow: 0 8px 30px rgba(255,60,40,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.oxBtn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(255,60,40,.55), inset 0 1px 0 rgba(255,255,255,.3); }
.oxBtn--ghost {
  background: rgba(20,16,14,.6); border: 1px solid rgba(255,140,100,.35); backdrop-filter: blur(8px);
}
.oxBtn--ghost:hover { transform: translateY(-3px); border-color: rgba(255,140,100,.7); background: rgba(30,22,18,.75); }
.oxHero__meta {
  margin-top: 30px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  font: 600 11px/1 'Share Tech Mono', monospace; letter-spacing: .18em; color: rgba(255,200,170,.7);
  text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.oxHero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.oxHero__meta i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; font-style: normal; }
.oxScroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  font: 600 10px/1 'Share Tech Mono', monospace; letter-spacing: .3em; color: rgba(255,200,170,.55);
  text-transform: uppercase; animation: oxBounce 2.2s ease-in-out infinite;
}
@keyframes oxBounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }

/* ---------- SECCIONES ---------- */
.oxSec { max-width: 1180px; margin: 0 auto; padding: 88px 24px; }
.oxSec__head { margin-bottom: 44px; }
.oxSec__kicker { font: 600 12px/1 'Share Tech Mono', monospace; letter-spacing: .34em; color: #ff8a5c; text-transform: uppercase; }
.oxSec__title { font: 800 clamp(30px, 5vw, 46px)/1.05 'Chakra Petch', sans-serif; color: #fff; margin: 12px 0 0; letter-spacing: .01em; }
.oxSec__sub { font: 400 15px/1.6 'Chakra Petch', sans-serif; color: rgba(210,200,192,.72); margin: 14px 0 0; max-width: 560px; }

/* modos: rejilla de tarjetas */
.oxModes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.oxMode {
  position: relative; border: 1px solid rgba(255,120,80,.16); border-radius: 12px; padding: 26px 24px;
  background: linear-gradient(160deg, rgba(28,20,17,.9), rgba(16,12,10,.9));
  transition: transform .18s ease, border-color .18s ease; overflow: hidden;
}
.oxMode:hover { transform: translateY(-5px); border-color: rgba(255,120,80,.45); }
.oxMode::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #ff4530, transparent); }
.oxMode__n { font: 700 11px/1 'Share Tech Mono', monospace; letter-spacing: .2em; color: #ff8a5c; }
.oxMode__name { font: 800 22px/1 'Chakra Petch', sans-serif; color: #fff; margin: 10px 0 8px; }
.oxMode__desc { font: 400 14px/1.55 'Chakra Petch', sans-serif; color: rgba(206,196,188,.78); }

/* mapas: dos tarjetas grandes con imagen */
.oxMaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.oxMap { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; border: 1px solid rgba(255,120,80,.16); }
.oxMap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.oxMap:hover img { transform: scale(1.06); }
.oxMap__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8,6,5,.9) 100%); }
.oxMap__body { position: absolute; left: 0; bottom: 0; padding: 26px; z-index: 2; }
.oxMap__tag { font: 700 11px/1 'Share Tech Mono', monospace; letter-spacing: .2em; color: #ffb08a; text-transform: uppercase; }
.oxMap__name { font: 800 30px/1 'Chakra Petch', sans-serif; color: #fff; margin: 8px 0 6px; text-shadow: 0 3px 16px rgba(0,0,0,.8); }
.oxMap__desc { font: 400 14px/1.5 'Chakra Petch', sans-serif; color: rgba(224,216,208,.88); max-width: 380px; }

/* armas: fila compacta */
.oxArsenal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.oxWeap {
  border: 1px solid rgba(255,120,80,.14); border-radius: 10px; padding: 20px 18px;
  background: rgba(20,15,13,.7); transition: border-color .18s ease, transform .18s ease;
}
.oxWeap:hover { border-color: rgba(255,120,80,.4); transform: translateY(-3px); }
.oxWeap__cat { font: 700 10px/1 'Share Tech Mono', monospace; letter-spacing: .18em; color: #ff8a5c; text-transform: uppercase; }
.oxWeap__name { font: 700 17px/1.1 'Chakra Petch', sans-serif; color: #fff; margin: 9px 0 6px; }
.oxWeap__stat { font: 400 12px/1.5 'Share Tech Mono', monospace; color: rgba(200,190,182,.7); }

/* como se juega: banda con imagen de accion */
.oxHow { position: relative; border-radius: 16px; overflow: hidden; }
.oxHow__bg { position: absolute; inset: 0; background: url('/media/accion.webp') center / cover; }
.oxHow__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,6,5,.94) 30%, rgba(8,6,5,.55) 100%); }
.oxHow__body { position: relative; z-index: 2; padding: 54px 44px; max-width: 620px; }
.oxHow__steps { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.oxHow__step { display: flex; gap: 16px; align-items: flex-start; }
.oxHow__num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
  font: 800 17px/1 'Chakra Petch', sans-serif; color: #fff;
  background: linear-gradient(135deg, #ff4530, #c22a1c); box-shadow: 0 4px 16px rgba(255,60,40,.35);
}
.oxHow__txt h4 { font: 700 17px/1.2 'Chakra Petch', sans-serif; color: #fff; margin: 4px 0 4px; }
.oxHow__txt p { font: 400 14px/1.5 'Chakra Petch', sans-serif; color: rgba(210,200,192,.8); margin: 0; }

/* CTA final */
/* v26.34 el cierre no puede quedar arriba: si algo de lo anterior se hunde, esta seccion tiene su
   sitio y no lo ocupa. */
.oxFinal { text-align: center; padding: 96px 24px 40px; min-height: 320px; }
.oxFinal__title { font: 800 clamp(34px, 6vw, 60px)/1 'Chakra Petch', sans-serif; color: #fff; margin: 0 0 14px; }
.oxFinal__sub { font: 400 16px/1.5 'Chakra Petch', sans-serif; color: rgba(210,200,192,.75); margin: 0 auto 32px; max-width: 460px; }

/* footer */
.oxFoot { border-top: 1px solid rgba(255,120,80,.12); padding: 30px 24px; text-align: center; }
.oxFoot__brand { font: 800 20px/1 'Chakra Petch', sans-serif; color: rgba(255,255,255,.9); letter-spacing: .04em; }
.oxFoot__brand b { color: #ff4530; }
.oxFoot__line { font: 400 12px/1.6 'Share Tech Mono', monospace; color: rgba(180,170,162,.55); margin-top: 10px; letter-spacing: .06em; }
/* v26.24 LOS ENLACES DEL PIE TAMBIEN SE TOCAN. Medidos: 14 px de alto, la altura de su propia
   letra. Son los dos unicos controles de toda la web por debajo del minimo tocable, y uno de
   ellos es "Compruebalo tu" —la pagina que demuestra que no hay rastreo, o sea el argumento del
   producto—. Que no se pueda pulsar en un movil es perder justo eso.
   Se le da area con padding vertical y `inline-block`, sin tocar el tamaño de letra ni la
   composicion: el pie se sigue viendo igual y el dedo acierta. */
.oxFoot__line a { color: rgba(255,160,120,.7); text-decoration: none; display: inline-block; padding: 15px 4px; margin: -15px 0; }
.oxFoot__line a:hover { color: #ff8a5c; }

@media (max-width: 620px) {
  .oxSec { padding: 60px 18px; }
  .oxHow__body { padding: 36px 24px; }
  .oxHero__meta { gap: 14px; }
}

/* ---------- v0.94: VIDEO CINEMATOGRAFICO DEL HERO ---------- */
.oxHero__video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
/* en movil o con datos limitados: la imagen basta (el video no se descarga si display:none + preload=metadata) */
@media (max-width: 767px) { .oxHero__video { display: none; } }
@media (prefers-reduced-motion: reduce) { .oxHero__video { display: none; } .oxHero__bg { animation: none; } }

/* ---------- v0.96: modos clicables, badges de mapa, estados ---------- */
.oxMode[data-modo] { cursor: pointer; }
.oxMode[data-modo]:active { transform: translateY(-2px) scale(.99); }
.oxMode__cta { font: 700 11px/1 'Share Tech Mono', monospace; letter-spacing: .18em; color: #ff8a5c; margin-top: 14px; opacity: .0; transition: opacity .18s ease; }
.oxMode:hover .oxMode__cta { opacity: 1; }
@media (hover: none) { .oxMode__cta { opacity: .85; } }  /* en tactil, visible siempre */
.oxMap__badge { display: inline-block; font: 700 10px/1 'Share Tech Mono', monospace; letter-spacing: .16em; padding: 5px 9px; border-radius: 4px; margin-bottom: 9px; }
.oxMap__badge--live { background: rgba(52,211,153,.16); color: #34d399; border: 1px solid rgba(52,211,153,.4); }
.oxMap__badge--soon { background: rgba(255,176,138,.12); color: #ffb08a; border: 1px solid rgba(255,176,138,.35); }
.oxBtn.off { opacity: .55; cursor: progress; }
#oxToasts { z-index: 90 !important; position: fixed; }  /* v0.96: los toasts SIEMPRE visibles, tambien sobre la portada */

/* ---------- v3.25: SECCION CLASES (hero-shooter identity) ---------- */
.oxClases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.oxClase {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(24,18,16,.6), rgba(14,11,10,.92));
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.oxClase:hover { transform: translateY(-6px); }
.oxClase__art { height: 264px; background-size: cover; background-position: center top; background-color: #17110f; position: relative; }
.oxClase__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(14,11,10,.96) 100%); }
.oxClase__body { padding: 0 20px 22px; position: relative; z-index: 2; margin-top: -44px; }
.oxClase__tag { font: 700 11px/1 'Share Tech Mono', monospace; letter-spacing: .2em; }
.oxClase__name { font: 800 30px/1 'Chakra Petch', sans-serif; color: #fff; margin: 8px 0 8px; letter-spacing: .02em; }
.oxClase__role { font: 400 14px/1.5 'Chakra Petch', sans-serif; color: rgba(210,200,192,.82); margin: 0 0 14px; min-height: 42px; }
.oxClase__row { display: flex; gap: 10px; align-items: baseline; font: 400 13px/1.5 'Chakra Petch', sans-serif; color: rgba(200,192,186,.8); margin-top: 10px; }
.oxClase__row b { color: #fff; font-weight: 700; }
.oxClase__k { flex: 0 0 auto; width: 62px; font: 700 9px/1.7 'Share Tech Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: 2px 0; text-align: center; border-radius: 4px; }
.oxClase--asalto { border-top: 3px solid #ff5a3c; }
.oxClase--asalto .oxClase__tag { color: #ff7a4a; }
.oxClase--asalto .oxClase__k { background: rgba(255,90,60,.16); color: #ff9a72; }
.oxClase--asalto:hover { border-color: rgba(255,90,60,.5); }
.oxClase--vigia { border-top: 3px solid #50a0ff; }
.oxClase--vigia .oxClase__tag { color: #6cb0ff; }
.oxClase--vigia .oxClase__k { background: rgba(80,160,255,.16); color: #9cc8ff; }
.oxClase--vigia:hover { border-color: rgba(80,160,255,.5); }
.oxClase--bastion { border-top: 3px solid #4ad9a0; }
.oxClase--bastion .oxClase__tag { color: #5fe0b0; }
.oxClase--bastion .oxClase__k { background: rgba(74,217,160,.16); color: #86e8c4; }
.oxClase--bastion:hover { border-color: rgba(74,217,160,.5); }

/* v3.36 SUTURA (apoyo) - color propio, coherente con el rosa de la clase en partida */
.oxClase--sutura { border-top: 3px solid #e0679f; }
.oxClase--sutura .oxClase__tag { color: #ef86b5; }
.oxClase--sutura .oxClase__k { background: rgba(224,103,159,.16); color: #f3a8c9; }
.oxClase--sutura:hover { border-color: rgba(224,103,159,.5); }
@media (max-width: 640px) { .oxClase__art { height: 216px; } }


/* v3.33 ELEGIR CLASE DESDE LA PORTADA: las tarjetas son una decision, no un folleto. */
.oxClase { cursor: pointer; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.oxClase:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,.5); }
.oxClase::after {
  content: "ELEGIR"; position: absolute; top: 12px; right: 12px; z-index: 3;
  font: 700 10px/1 'Share Tech Mono', monospace; letter-spacing: .2em; color: rgba(255,220,200,.9);
  background: rgba(12,10,9,.72); border: 1px solid rgba(255,140,100,.5); border-radius: 4px; padding: 5px 9px;
  opacity: .75; transition: opacity .18s ease;
}
.oxClase:hover::after { opacity: 1; }
.oxClase.is-sel { border-color: #ff8a5c; box-shadow: 0 0 0 2px rgba(255,138,92,.55), 0 18px 48px rgba(0,0,0,.5); }
.oxClase.is-sel::after { content: "TU CLASE"; color: #16100c; background: #ff8a5c; border-color: #ff8a5c; opacity: 1; }


/* v3.37 LA ESCALERA: el ranking existia en el servidor y no se enseñaba. Ahora se ve. */
.oxRank { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 900px; }
@media (min-width: 760px) { .oxRank { grid-template-columns: 1fr 1fr; } }
.oxRank__col { border: 1px solid rgba(255,120,60,.22); background: rgba(12,9,7,.6); border-radius: 8px; overflow: hidden; }
.oxRank__cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 9px 13px; background: rgba(255,120,60,.09); border-bottom: 1px solid rgba(255,120,60,.2);
  font: 700 11px/1 'Share Tech Mono', monospace; letter-spacing: .22em; color: #ffb02e;
}
.oxRank__cab span { font-size: 9px; letter-spacing: .1em; color: rgba(255,220,190,.45); text-transform: none; }
.oxRank__lista { min-height: 54px; }
.oxRank__fila { display: flex; justify-content: space-between; gap: 10px; padding: 8px 13px; border-bottom: 1px solid rgba(255,120,60,.11); font: 600 12.5px 'Chakra Petch', sans-serif; letter-spacing: .05em; }
.oxRank__fila:last-child { border-bottom: 0; }
.oxRank__fila b { color: #f2e6da; font-weight: 700; }
.oxRank__pos { color: #c9a68b; font-family: 'Share Tech Mono', monospace; }
.oxRank__dato { color: #ffb02e; font-family: 'Share Tech Mono', monospace; font-size: 11.5px; white-space: nowrap; }
.oxRank__fila--yo { background: rgba(255,138,92,.14); box-shadow: inset 3px 0 0 #ff8a5c; }
.oxRank__vacio { padding: 16px 13px; font: 400 12px 'Chakra Petch', sans-serif; color: rgba(255,220,190,.42); }
.oxRank__yo { margin-top: 14px; max-width: 900px; padding: 11px 14px; border: 1px solid rgba(255,138,92,.4); background: rgba(255,138,92,.09); border-radius: 8px; font: 600 13px 'Chakra Petch', sans-serif; color: #f6e7dd; letter-spacing: .04em; }
.oxRank__yo b { color: #ff8a5c; }


/* v3.37 EXPEDIENTE: el motivo para volver manana, sin cuentas ni servidor. */
.oxExp { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .oxExp { grid-template-columns: 1.1fr .9fr; } }
.oxExp__reto {
  border: 1px solid rgba(255,193,77,.42); border-radius: 10px; padding: 16px 18px;
  background: linear-gradient(150deg, rgba(255,193,77,.10), rgba(12,10,9,.6));
}
.oxExp__k { font: 700 10px/1 'Share Tech Mono', monospace; letter-spacing: .22em; color: #ffc14d; }
.oxExp__reto h3 { font: 700 clamp(17px, 2.4vw, 22px)/1.2 'Chakra Petch', sans-serif; margin: 8px 0 12px; color: #f6ece2; }
.oxExp__barra { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.oxExp__barra i { display: block; height: 100%; background: linear-gradient(90deg, #ffb84d, #ffd98a); border-radius: 4px; transition: width .5s ease; }
.oxExp__pie { display: flex; justify-content: space-between; margin-top: 9px; font: 600 12px 'Chakra Petch', sans-serif; color: rgba(246,236,226,.72); }
.oxExp__racha { color: #ffc14d; font-weight: 800; }
.oxExp__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.oxExp__c { border: 1px solid rgba(255,140,100,.18); border-radius: 9px; padding: 12px 10px; background: rgba(12,10,9,.5); text-align: center; }
.oxExp__c b { display: block; font: 800 clamp(19px, 3.4vw, 26px)/1 'Chakra Petch', sans-serif; color: #ff8a5c; }
.oxExp__c span { display: block; margin-top: 5px; font: 600 10px/1.3 'Share Tech Mono', monospace; letter-spacing: .12em; color: rgba(246,236,226,.6); }
.oxExp__fav { grid-column: 1 / -1; border: 1px solid rgba(255,140,100,.18); border-radius: 9px; padding: 11px 14px; background: rgba(12,10,9,.5); font: 600 12px 'Chakra Petch', sans-serif; color: rgba(246,236,226,.8); display: flex; justify-content: space-between; gap: 10px; }
.oxExp__fav b { color: #f6ece2; }


/* ==============================================================================================
   v26.47 LA CONSOLA DEL OPERADOR.
   Cuatro celdas de datos reales bajo la promesa. La retorica del juego es la telemetria —tick,
   latencia, arbitraje— asi que la portada habla ese idioma en vez de adjetivos.
   Deliberadamente CALLADA: numeros pequeños, separadores finos, sin color salvo el verde del
   arbitraje, que es la unica afirmacion que el producto quiere que se lea. La audacia se gasta en
   que los datos sean CIERTOS, no en decorarlos.
   ============================================================================================== */
.oxCon__c {
  flex: 1 1 auto; min-width: 118px; padding: 9px 12px;
  border-right: 1px solid rgba(255,138,92,.16);
  display: flex; flex-direction: column; gap: 5px;
}
.oxCon__c--last { border-right: 0; }
.oxCon__k { font-size: 8px; letter-spacing: .22em; color: rgba(246,236,226,.42); }
.oxCon__c b { font-size: 12px; letter-spacing: .1em; color: #ffb08a; font-weight: 700; }

/* el pulso del enlace: late mientras hay medida, y se apaga si el servidor no responde. Es la
   unica animacion de la tira y significa algo — no es adorno. */
#oxConPing::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px;
  border-radius: 50%; background: #34d399; vertical-align: middle;
  animation: oxLatido 1.9s ease-in-out infinite;
}
#oxConPing.oxCon--mudo::after { background: #e05a3a; animation: none; }
@keyframes oxLatido { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #oxConPing::after { animation: none; opacity: .9; } }

@media (max-width: 600px) {
  /* en movil, dos por fila: cuatro celdas en linea dejan cada dato en 70 px y no se leen */
  .oxCon__c { flex: 1 1 46%; min-width: 0; }
  .oxCon__c:nth-child(2) { border-right: 0; }
}

/* ============================================================================
   JERARQUIA DEL PRIMER PANTALLAZO (v27)
   MEDIDO sobre la pagina: CATORCE botones visibles a la vez, todos con el mismo
   peso. JUGAR AHORA pesaba lo mismo que AJUSTES, y entre medias competian cinco
   modos, elegir mapa, sala privada, practica, compartir ficha, retar a un amigo
   y el selector de estilo.
   En la portada de un juego hay UNA accion que importa: entrar. Lo demas existe
   un escalon por debajo — no se esconde, se subordina. No se reescribe el
   marcado: se reordena el PESO, en tres niveles y nada mas.
   ============================================================================ */
#deployHero {
  font-size: clamp(19px, 2.1vw, 26px) !important;
  letter-spacing: .16em; padding: 20px 46px !important; min-height: 68px;
  font-weight: 700; border: 0;
  /* el naranja de marca a maxima saturacion: es el color del oxido que da nombre
     al juego, y no aparece asi en ningun otro sitio de la pantalla */
  background: linear-gradient(180deg, #ff5a2b, #e2360f);
  box-shadow: 0 0 0 1px rgba(255,140,90,.55), 0 14px 40px -12px rgba(226,54,15,.85);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, filter .16s ease;
}
#deployHero:hover, #deployHero:focus-visible {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 0 0 1px rgba(255,170,120,.75), 0 20px 52px -12px rgba(255,90,43,.95);
  filter: saturate(1.08);
}
#deployHero:active { transform: translateY(0) scale(.995); }
#oxNombre { min-height: 68px; font-size: clamp(15px, 1.3vw, 18px) !important; border-color: rgba(255,255,255,.22) !important; }
#oxNombre:focus { border-color: rgba(255,120,70,.85) !important; outline: none; }

/* los modos son UNA decision, no cinco botones sueltos */
#heroModos {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 12px;
  background: rgba(10,8,6,.42); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(6px);
}
#heroModos > button {
  font-size: 12px !important; padding: 10px 16px !important; min-height: 44px;
  letter-spacing: .1em; border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.045) !important;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
#heroModos > button:hover, #heroModos > button:focus-visible {
  background: rgba(255,255,255,.12) !important; border-color: rgba(255,150,110,.5) !important;
  transform: translateY(-1px);
}

/* presentes y callados */
#btnPractica, #btnSalaPriv, #btnAjustes, #btnCompartir, #btnRetar {
  font-size: 11px !important; padding: 8px 14px !important; min-height: 44px;
  opacity: .72; border-color: rgba(255,255,255,.1) !important; background: transparent !important;
  transition: opacity .14s ease, border-color .14s ease;
}
#btnPractica:hover, #btnSalaPriv:hover, #btnAjustes:hover, #btnCompartir:hover, #btnRetar:hover,
#btnPractica:focus-visible, #btnSalaPriv:focus-visible, #btnAjustes:focus-visible {
  opacity: 1; border-color: rgba(255,255,255,.3) !important;
}

/* el contador de carga es telemetria interna, no un mensaje para el jugador */
#assetProg { opacity: .38 !important; font-size: 10px !important; letter-spacing: .12em; }

/* foco visible en todo lo interactivo: no lo habia */
#site button:focus-visible, #site input:focus-visible, #site a:focus-visible {
  outline: 2px solid rgba(255,150,110,.9); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  #deployHero, #heroModos > button { transition: none; }
  #deployHero:hover { transform: none; }
}