/* estilo.css — paleta de marca (PALETA-WEB): negro #050505 · hueso #F2F0E9 · amarillo #FFD400.
   Mobile-first, sin dependencias ni fuentes externas (condensada del sistema como eco de
   Archivo Black/Anton hasta que la landing real lo integre con su tipografía). */
:root {
  --negro: #050505; --hueso: #F2F0E9; --amarillo: #FFD400;
  --gris: #8a877f; --linea: #26241f;
  /* escala de SUPERFICIES por elevación (rework UX lote 1): la profundidad se hace ACLARANDO,
     nunca con sombras — y nada "encima" puede ser más oscuro que el fondo (firma del dark
     barato). Base #050505 → panel #141414 → casilla activa #1E1E1E. */
  --sup-1: #141414; --sup-2: #1e1e1e;
  --radio: 10px;
  --muelle: cubic-bezier(.34, 1.56, .64, 1);
}
* { box-sizing: border-box; }
/* pasada 2 del bucle: foco de teclado de MARCA en TODO lo interactivo (antes solo 3 selectores lo
   tenían → el creador era casi innavegable por teclado, con el anillo azul del navegador). */
:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* P24 (política Low+): el check del boletín usaba el azul del navegador → de marca (amarillo) */
input[type="checkbox"] { accent-color: var(--amarillo); }
body {
  margin: 0; background: var(--negro); color: var(--hueso);
  font-family: "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 560px; margin: 0 auto; padding: 28px 18px 64px; }
.kicker { color: var(--gris); letter-spacing: .2em; font-size: 12px; margin: 0 0 6px; }
h1, h2 { font-weight: 900; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 8px; }
h1 { font-size: clamp(34px, 9vw, 52px); line-height: .95; }
h2 { font-size: 22px; }
.acento { color: var(--amarillo); }
.cursor { color: var(--amarillo); animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.sub { color: var(--gris); margin: 0 0 18px; }
.meta { color: var(--gris); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.tarjeta { border: 1px solid var(--linea); padding: 18px; margin: 18px 0; }
.oculto { display: none; }
label, .etiqueta { display: block; color: var(--gris); font-size: 12px; letter-spacing: .12em; margin: 12px 0 6px; }
input[type="text"], input[type="email"], input:not([type]) {
  width: 100%; background: transparent; border: 1px solid var(--linea); color: var(--hueso);
  padding: 12px; font-size: 18px; font-family: inherit;
}
input:focus { outline: 2px solid var(--amarillo); border-color: var(--amarillo); }
.paletas { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.paletas button {
  aspect-ratio: 1; border: 2px solid var(--linea); cursor: pointer; width: 100%;
  background: var(--c); border-radius: 4px;
}
.paletas button[aria-selected="true"] { border-color: var(--hueso); outline: 2px solid var(--amarillo); }

.btn {
  background: var(--amarillo); color: var(--negro); border: 0; cursor: pointer;
  font: 900 16px/1 inherit; letter-spacing: .06em; padding: 14px 22px; text-transform: uppercase;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* P19: el botón secundario era "borde-pegatina" hueso 2px — el anti-patrón que la marca
   prohíbe. Ahora superficie elevada + glow al hover (mismo lenguaje que piezas y swatches). */
.btn-secundario { background: var(--sup-1); color: var(--hueso); border: 1px solid var(--linea); }
.btn-secundario:hover { background: var(--sup-2); border-color: #4a463c; box-shadow: 0 0 18px rgba(255, 212, 0, .10); filter: none; }
.saldo { float: right; font-size: 15px; color: var(--amarillo); }
.enlace-suave { background: none; border: 0; color: var(--gris); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; padding: 0; }
.enlace-suave:hover { color: var(--hueso); }
.aviso-red { background: #2b2416; color: var(--amarillo); margin: 0; padding: 8px 12px; font-size: 13px; text-align: center; }
/* P20: renombrar solapaba la línea de perfil y tapaba «vale» (peor en móvil). #compartir pasa a
   flex-wrap: el input + «vale» caen ordenados a su propia línea en vez de encimarse. */
#compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.editor-nombre { background: var(--sup-1); color: var(--hueso); border: 1px solid var(--gris); font: inherit; font-size: 14px; padding: 6px 8px; margin-left: 0; max-width: 180px; border-radius: 6px; }
.check { display: flex; gap: 8px; align-items: flex-start; color: var(--hueso); font-size: 14px;
  letter-spacing: 0; text-transform: none; margin: 12px 0; }
.separador { text-align: center; margin: 14px 0 10px; }

/* rework cuerpo-v1: composición por capas (misma cámara/luz → apilar = componer) */
.nomms-capas { position: relative; display: inline-block; flex: none; }
.nomms-capas img { position: absolute; inset: 0; width: 100%; height: 100%; }
.nomms-capas img:first-child { position: relative; } /* la 1ª da tamaño al contenedor */
.nomms-capas canvas { width: 100%; height: 100%; display: block; }
.capas-preview { width: 240px; height: 240px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
/* ACABADO: misma fila que el tinte pero botones un poco MÁS grandes y redondos. Un acabado no es un color:
   es de qué está hecha la pieza, y a 24px cuadrado se leía como «otro tinte más». */
.swatches-acabado { display: flex; gap: 7px; flex-wrap: wrap; margin: 2px 0 10px; }
.swatches-acabado button { width: 30px; height: 30px; border-radius: 50%; background: var(--c);
  border: 2px solid #0006; cursor: pointer; }
.swatches-acabado button[aria-pressed="true"] { outline: 2px solid var(--acento, #FFD400); outline-offset: 2px; }
/* el rúnico tiene luz propia en el motor; aquí se marca con un halo, o a tamaño de botón se confunde con
   «un dorado más» y el jugador no ve que es el legendario */
.swatches-acabado button.acabado-brilla { box-shadow: 0 0 8px 2px #C9A22799, inset 0 0 6px #fff6; }
.swatches-tinte { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.swatches-tinte button { width: 24px; height: 24px; border-radius: 3px; background: var(--c);
  border: 2px solid var(--linea); cursor: pointer; padding: 0; }
.swatches-tinte button[aria-pressed="true"] { border-color: var(--hueso); outline: 2px solid var(--amarillo); }
.swatches-tinte .sin-tinte { background: transparent; color: var(--gris); font-size: 13px; line-height: 1; }
.capas-cmp { width: 150px; height: 150px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.capas-ring { width: 130px; height: 130px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.capas-mini { width: 56px; height: 56px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.desbloqueo { border-color: var(--amarillo); box-shadow: 0 0 24px rgba(255,212,0,.12); }
.desbloqueo .btn { margin-right: 10px; margin-top: 6px; }
#cuenta .btn { margin-right: 10px; }
#cuenta-correo { margin-bottom: 12px; }
.versus { display: flex; align-items: center; justify-content: space-around; gap: 8px; }
.versus figure { margin: 0; text-align: center; }
.versus figcaption b { display: block; font-size: 15px; }
.versus figcaption span { color: var(--gris); font-size: 13px; }
.vs { color: var(--amarillo); font-weight: 900; font-size: 20px; }
#btn-lucha { margin-top: 14px; }
#btn-lucha:disabled { opacity: .35; cursor: not-allowed; }
.ring { display: flex; align-items: flex-start; justify-content: space-around; gap: 8px; }
.esquina { margin: 0; text-align: center; }
.esquina figcaption { color: var(--gris); font-size: 13px; margin-top: 4px; }
.hp { height: 8px; background: var(--linea); margin-top: 8px; border-radius: 2px; overflow: hidden; }
.hp-fill { height: 100%; width: 100%; background: var(--amarillo); transition: width .25s ease-out; }
.golpeado { animation: sacudida .3s; }
@keyframes sacudida {
  25% { transform: translateX(-6px) rotate(-3deg); }
  75% { transform: translateX(6px) rotate(3deg); }
}
/* mejora-exhaustiva: combate como espectáculo — daño flotante + flash de la barra HP + victoria */
.esquina { position: relative; }
.dano-flota {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  font: 900 26px/1 inherit; color: var(--hueso); text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
  animation: sube-dano .85s cubic-bezier(.16, 1, .3, 1) both;
}
.dano-flota.esquiva { color: var(--gris); font-size: 18px; }
@keyframes sube-dano {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  25% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}
.hp.flash-hp { animation: flash-barra .28s ease-out; }
@keyframes flash-barra { 0% { box-shadow: 0 0 0 2px var(--amarillo); } 100% { box-shadow: none; } }
.lucha-final.victoria { animation: pulso-victoria .5s var(--muelle); }
@keyframes pulso-victoria { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.cronica { margin-top: 14px; min-height: 72px; max-height: 128px; overflow-y: auto;
  font-size: 14px; color: var(--gris); border-top: 1px solid var(--linea); padding-top: 10px; }
.cronica p { margin: 2px 0; }
.cronica .tuyo { color: var(--hueso); }
.lucha-final { font-weight: 900; font-size: 18px; text-transform: uppercase; min-height: 24px; }
.lucha-final.victoria { color: var(--amarillo); }

/* tablón de misiones (B1) */
.misiones { list-style: none; margin: 0; padding: 0; }
.misiones li { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.misiones li:last-child { border-bottom: 0; }
.misiones .marca { color: var(--gris); }
.misiones .progreso { margin-left: auto; color: var(--gris); font-size: 13px; }
.misiones .hecha .marca, .misiones .hecha .progreso { color: var(--amarillo); }
.misiones .hecha { color: var(--gris); }
.misiones .cuerpo-mision { display: flex; flex-direction: column; gap: 2px; }
.misiones .det { color: var(--gris); font-size: 12px; }

/* La Arena (B4 all-in): roster de salvajes + liga semanal */
#arena-intentos { font-size: 15px; color: var(--gris); }
.arena-rivales { list-style: none; margin: 0 0 20px; padding: 0; }
.arena-rival { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.arena-rival:last-child { border-bottom: 0; }
.arena-rival.luchado { opacity: .5; }
.arena-rival-info { display: flex; flex-direction: column; gap: 2px; }
.arena-rival-info .det { color: var(--gris); font-size: 12px; }
.arena-retar { margin-left: auto; padding: 8px 16px; font-size: 13px; }
.arena-liga-titulo { font-weight: 900; text-transform: uppercase; font-size: 16px; margin: 4px 0 4px; }
.arena-liga { list-style: none; margin: 8px 0 0; padding: 0; }
.liga-fila { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.liga-fila:last-child { border-bottom: 0; }
.liga-pos { color: var(--gris); width: 24px; }
.liga-nom { color: var(--hueso); }
.liga-fila.salvaje .liga-nom { color: var(--gris); }
.liga-xp { margin-left: auto; color: var(--gris); font-size: 13px; }
.liga-fila.eres-tu { background: rgba(255,212,0,.08); }
.liga-fila.eres-tu .liga-nom { color: var(--amarillo); font-weight: 900; }
/* LIGA con avatar + barra (opcional aprobado 26-jul). La fila pasa de `baseline` a `center` porque ahora
   tiene un elemento alto (el retrato) y con baseline el avatar quedaba colgando bajo el texto. */
.liga-fila { align-items: center; }
.liga-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: rgba(242,240,233,.06); display: grid; place-items: center; }
.liga-avatar canvas { width: 100%; height: 100%; display: block; }
/* respaldo sin WebGL2: la inicial. Sigue distinguiendo a los rivales entre sí, que es a lo que sirve. */
.liga-avatar-letra { font-weight: 900; font-size: 15px; color: var(--gris); }
.liga-fila.eres-tu .liga-avatar { box-shadow: 0 0 0 2px var(--amarillo); }
.liga-nom-caja { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.liga-nom-caja .liga-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* la barra es RELATIVA al líder: lo que se lee de un vistazo es cuánto falta para el de arriba */
.liga-barra { height: 4px; border-radius: 3px; background: rgba(242,240,233,.10); overflow: hidden; }
.liga-barra-relleno { display: block; height: 100%; border-radius: 3px; background: var(--gris);
  transition: width .5s ease; }
.liga-fila.eres-tu .liga-barra-relleno { background: var(--amarillo); }
/* reduced-motion: la barra aparece ya en su sitio, sin animar */
@media (prefers-reduced-motion: reduce) { .liga-barra-relleno { transition: none; } }
.liga-fila.eres-tu .liga-pos { color: var(--amarillo); }
/* pasada 2: marca de zona (▲ sube / ▼ baja) — convención sellada, cero rojo/verde en deltas */
.liga-aviso { margin: 0 0 8px; }
/* aversión a la pérdida sin romper la paleta (cero rojo): el aviso de descenso va en amarillo
   atenuado con una barra de acento, no en rojo de alarma */
.liga-aviso.peligro { color: var(--amarillo); }
.liga-zona { margin-left: 4px; font-size: 12px; }
.zona-asciende .liga-zona { color: var(--amarillo); }
.zona-desciende .liga-zona { color: var(--gris); }
.zona-asciende { box-shadow: inset 2px 0 0 var(--amarillo); }


/* ============================================================================
   REWORK DEL CREADOR — lote 1 (informe UX/UI del creador de Nomms, 19-jul-2026)
   Cura los síntomas medidos en el baseline: opciones que se leen en vez de verse,
   amarillo diluido en 7 sitios, selección tipo pegatina, todo pegado, Nomms flotando.
   ========================================================================== */

/* — ESCENARIO: el Nomms se planta en un suelo, con sombra y un único halo de foco — */
.escenario {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 18px 0 0;
  margin: 4px 0 18px;
  border-radius: var(--radio);
  /* el ÚNICO glow amarillo de la vista, detrás del personaje (patrón dark-premium 2025) */
  background:
    radial-gradient(ellipse 70% 55% at 50% 12%, rgba(255, 212, 0, .10), transparent 70%),
    var(--sup-1);
  overflow: hidden;
}
.escenario .capas-preview {
  width: min(260px, 64vw); height: min(260px, 64vw);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .75));
  /* idle: respira. Un personaje quieto se lee como pegatina (regla del módulo-personaje). */
  animation: respira 3.4s ease-in-out infinite;
  transform-origin: 50% 100%;
  position: relative; z-index: 1;
}
@keyframes respira {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-4px) scale(.995, 1.008); }
}
/* suelo + sombra elíptica: lo que hace que deje de flotar */
.escenario-suelo {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 46%; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .75), transparent 72%);
  animation: sombra 3.4s ease-in-out infinite;
}
@keyframes sombra {
  0%, 100% { opacity: .85; width: 46%; }
  50%      { opacity: .68; width: 42%; }
}
/* al cambiar de pieza el Nomms hace squash&stretch (micro-feedback del lote 2, base aquí) */
.escenario.pt-cambio .capas-preview { animation: squash .34s var(--muelle); }

/* — JUICE lote 2 (web/juice.mjs): hitstop, flash, latido y partículas de la CEREMONIA — */
/* hitstop: congela el idle un instante (el cerebro lee la pausa como peso) */
.escenario.congelado .capas-preview, .escenario.congelado .escenario-suelo { animation-play-state: paused; }
/* flash del impacto: overlay 90ms que nace y muere solo (lo limpia juice.mjs en animationend) */
.escenario .flash {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 212, 0, .30), transparent 65%);
  animation: flashea .09s ease-out both;
}
@keyframes flashea { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* latido: el mismo squash con el origen al CENTRO se lee como corazón, no como aterrizaje */
.escenario .capas-preview.latido { animation: late .5s var(--muelle); transform-origin: 50% 50%; }
@keyframes late {
  0% { transform: scale(1); } 30% { transform: scale(1.12); }
  55% { transform: scale(.97); } 75% { transform: scale(1.05); } 100% { transform: scale(1); }
}
/* partícula del estallido: viaja a su --dx/--dy (anillo + jitter) mientras cae y se apaga */
.escenario .particula {
  position: absolute; left: 50%; top: 44%; z-index: 2; pointer-events: none;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--amarillo));
  animation: vuela .8s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes vuela {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 46px)) scale(.4); opacity: 0; }
}
/* la ruleta del dado deshabilita el botón mientras gira (estado visible, no solo lógico) */
.preset-dado[disabled] { opacity: .55; cursor: wait; }

/* con el motor 3D activo, la sombra pertenece a la ESCENA (se mueve con la órbita): la CSS sobra */
.escenario.con-3d .escenario-suelo { display: none; }
/* P6: con el motor 3D activo, el mundo entero (respiración + sombra de contacto) lo hace el
   propio motor. La animación `respira` y el `drop-shadow` CSS sobre el contenedor duplicaban
   ambas cosas (doble respiración + sombra fantasma) — regresión del fix de anatomía v2. */
.escenario.con-3d .capas-preview { animation: none !important; filter: none; }

/* — GIRO 2.5D: agarrar y girar el Nomms (direct manipulation, sin gate de reduced-motion) — */
.escenario.girable { cursor: grab; }
.escenario.girable.girando { cursor: grabbing; }
.escenario.girable:focus-visible { outline: 2px solid var(--amarillo); outline-offset: -2px; } /* foco de marca, no azul del navegador */
.escenario.girable .capas-preview { user-select: none; -webkit-user-select: none; }
.pista-giro {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 2;
  margin: 0; color: var(--gris); font-size: 12px; letter-spacing: .04em; white-space: nowrap;
  pointer-events: none; transition: opacity .4s ease;
}
.pista-giro.oculto { display: block; opacity: 0; } /* se desvanece, no salta el layout */

/* — LOTE 3: grano, photo-booth, unicidad y confirmar escénico — */
/* grano: mosaico de ruido al mínimo (runtime, juice.mjs) — textura, no suciedad */
.escenario .grano { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; }
/* photo-booth: mueble discreto en la esquina del escenario (jamás compite con el CTA) */
.btn-foto {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(20, 20, 20, .72); border: 1px solid var(--linea); font-size: 16px; line-height: 1;
  opacity: .75; transition: opacity .15s ease, background .15s ease;
}
.btn-foto:hover { opacity: 1; background: var(--sup-2); }
/* unicidad: una línea serena bajo el escenario */
.unicidad { text-align: center; margin: 0 0 14px; }
/* CONFIRMAR ESCÉNICO (patrón BG3): DARLE VIDA descansa apagado y SE ENCIENDE al haber nombre —
   el único amarillo pleno de la vista aparece cuando la decisión está madura */
#crear .btn:not(.listo) {
  background: transparent; color: var(--gris); border: 1px solid var(--linea);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#crear .btn.listo {
  box-shadow: 0 0 26px rgba(255, 212, 0, .22);
  animation: enciende .5s var(--muelle);
}
@keyframes enciende { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
/* toggle de sonido: mueble discreto, jamás compite con el CTA */
.btn-sfx {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--linea); color: var(--gris);
  border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 14px; line-height: 1;
}
.btn-sfx:hover { color: var(--hueso); border-color: #4a463c; }
@keyframes squash {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.06, .94); }
  70%  { transform: scale(.97, 1.03); }
  100% { transform: scale(1, 1); }
}

/* — PRESETS: arranque de un toque (la mejora nº1 de choice architecture) — */
/* UNA sola fila deslizable: en la primera captura ocupaban 3 filas y empujaban la vitrina
   fuera de pantalla — el personaje y las piezas son lo que manda, los presets son el atajo */
.fila-arranque {
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.fila-arranque::-webkit-scrollbar { display: none; }
.presets { display: flex; gap: 8px; flex: 0 0 auto; } /* sin flex:0 0 auto el contenedor se encoge y recorta las píldoras */
.preset {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--sup-1); border: 1px solid var(--linea); color: var(--hueso);
  border-radius: 999px; padding: 8px 13px; cursor: pointer;
  font: 700 12px/1 inherit; letter-spacing: .03em;
  transition: background .15s ease, border-color .15s ease, transform .15s var(--muelle);
}
.preset:hover { background: var(--sup-2); border-color: #4a463c; transform: translateY(-1px); }
.preset:active { transform: scale(.96); }

/* — PESTAÑAS por slot con icono (una categoría a la vez) — */
.pestanas {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 20px 0 0; padding-bottom: 2px;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  position: relative;
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--gris); cursor: pointer; padding: 8px 10px 7px;
  font: 700 10px/1 inherit; letter-spacing: .1em;
  transition: color .15s ease, border-color .15s ease;
}
.pestana-icono { font-size: 19px; line-height: 1; filter: grayscale(1) opacity(.65); transition: filter .15s ease; }
.pestana:hover { color: var(--hueso); }
.pestana:hover .pestana-icono { filter: grayscale(.4) opacity(.9); }
/* la pestaña activa NO usa amarillo (está reservado a UNA cosa): se marca con hueso + peso */
.pestana[aria-selected="true"] { color: var(--hueso); border-bottom-color: var(--hueso); }
.pestana[aria-selected="true"] .pestana-icono { filter: none; }
/* punto = ese slot lleva pieza puesta (lectura de un vistazo) */
.pestana-punto {
  position: absolute; top: 6px; right: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gris);
}

/* — VITRINA: la pieza se VE (miniatura recortada), no se lee — */
#vitrina-piezas { background: var(--sup-1); border-radius: var(--radio); padding: 14px; margin-top: 2px; }
.vitrina {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.pieza {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--gris); font: 600 11px/1.1 inherit;
}
.pieza-caja {
  position: relative;
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--sup-2); border: 1px solid transparent; border-radius: var(--radio);
  transition: background .16s ease, box-shadow .2s ease, transform .18s var(--muelle);
}
.pieza-lienzo canvas { width: 100%; height: 100%; display: block; }
.pieza-vacia { color: #4a463c; font-size: 22px; }
.pieza:hover .pieza-caja { background: #262626; transform: translateY(-2px); }
.pieza:active .pieza-caja { transform: scale(.95); }
/* SELECCIÓN = GLOW ENVOLVENTE (no el borde-pegatina prohibido por PALETA-WEB) */
.pieza[aria-pressed="true"] .pieza-caja {
  background: #241f08;
  box-shadow: 0 0 0 1px rgba(255, 212, 0, .55), 0 0 18px 2px rgba(255, 212, 0, .22);
}
.pieza[aria-pressed="true"] { color: var(--hueso); }
.pieza:focus-visible .pieza-caja { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.pieza-nombre { text-align: center; }

/* la rejilla de color hereda el mismo lenguaje (blobs, no cuadraditos sueltos) */
#vitrina-piezas .paletas { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 10px; }
#vitrina-piezas .paletas button {
  border-radius: 42% 58% 54% 46% / 50% 44% 56% 50%;
  border: 0; box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .28);
  transition: box-shadow .2s ease, transform .18s var(--muelle);
}
#vitrina-piezas .paletas button:hover { transform: translateY(-2px) scale(1.04); }
#vitrina-piezas .paletas button[aria-selected="true"] {
  outline: 0;
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .28),
              0 0 0 2px rgba(255, 212, 0, .7), 0 0 18px 3px rgba(255, 212, 0, .25);
}
#vitrina-piezas .paletas button:disabled { opacity: .3; cursor: not-allowed; }

/* tintes: mismo criterio de selección (glow), sin bordes amarillos sueltos */
.swatches-tinte button[aria-pressed="true"] {
  border-color: transparent; outline: 0;
  box-shadow: 0 0 0 2px rgba(255, 212, 0, .7), 0 0 14px 2px rgba(255, 212, 0, .22);
}

/* — el CTA es la ÚNICA cosa amarilla plena de la vista — */
#crear .btn { width: 100%; margin-top: 6px; padding: 16px 22px; border-radius: var(--radio); font-size: 17px; }

/* respeto a quien no quiere movimiento (guardarraíl innegociable del informe) */
@media (prefers-reduced-motion: reduce) {
  .escenario .capas-preview, .escenario-suelo { animation: none; }
  .preset, .pieza-caja, #vitrina-piezas .paletas button { transition: none; }
  .escenario.pt-cambio .capas-preview { animation: none; }
  /* juice lote 2: con movimiento reducido, cero fiesta (juice.mjs ya corta antes; doble cinturón) */
  .escenario .flash, .escenario .particula { animation: none; display: none; }
  .escenario .capas-preview.latido { animation: none; }
  /* lote 3: el encendido del CTA sin animación (el cambio de color ya comunica) */
  #crear .btn.listo { animation: none; }
  /* pasada 2 del bucle: el reduced-motion estaba a medias — el CLÍMAX (la pelea) seguía
     temblando. Se apagan la sacudida de los golpes, el parpadeo infinito del cursor del H1
     y cualquier keyframe residual. El desenlace se sigue leyendo (color + texto), sin movimiento. */
  .golpeado { animation: none; }
  .cursor { animation: none; }
  .dano-flota, .hp.flash-hp, .lucha-final.victoria { animation: none; }
  .dano-flota { display: none; } /* el número flotante depende de la animación: sin ella, no aparece */
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* escritorio: el escenario manda y la vitrina respira (el baseline desaprovechaba 2/3) */
@media (min-width: 720px) {
  .escenario { padding-top: 26px; }
  .escenario .capas-preview { width: 340px; height: 340px; }
  .vitrina { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ── EL HOGAR (R1 lote 4): habitación con muebles crafteados + puntuación ── */
.materiales { color: var(--hueso); letter-spacing: .3px; }
.hogar-lienzo {
  display: block; width: 100%; max-width: 264px; height: auto; margin: 10px auto;
  image-rendering: pixelated; border: 1px solid var(--linea); border-radius: var(--radio);
  background: #12100b; cursor: pointer; touch-action: manipulation;
}
.hogar-bandeja { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.hogar-pieza {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--radio);
  color: var(--hueso); cursor: pointer; transition: transform .12s var(--muelle), border-color .12s;
}
.hogar-pieza .ico { font-size: 18px; }
.hogar-pieza.sel { border-color: var(--amarillo); box-shadow: 0 0 0 2px var(--amarillo) inset; transform: translateY(-1px); }
.hogar-pieza:disabled { opacity: .4; cursor: default; }
/* F6: el catálogo pasa a ser una PILA de bloques por tema; la rejilla de tarjetas vive DENTRO de cada
   bloque (.hogar-crafts). Antes `#hogar-catalogo` era el grid directamente, así que al meter las
   cabeceras de tema caían como una celda de 84px y la maqueta se partía en columnas raras. */
.hogar-catalogo { display: flex; flex-direction: column; gap: 2px; }
.hogar-craft {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--radio); text-align: center;
}
.hogar-craft .ico { font-size: 22px; }
.hogar-craft .det { color: var(--gris); font-size: .8rem; }
.hogar-craft.no { opacity: .55; }
.hogar-craft .btn { padding: 4px 8px; font-size: .8rem; margin-top: 2px; }

/* ── DESKTOP: creador a lo ancho (preview grande + panel de opciones, estilo VRoid/ARK) + tablero 2col ── */
@media (min-width: 900px) {
  main { max-width: 1040px; }
  /* la cabecera va CENTRADA (antes se veía "a la izquierda" por el text-align por defecto) */
  .kicker, h1, .sub, #guia-ios { text-align: center; }
  /* el CREADOR ocupa el ancho: escenario grande y pegajoso a la izquierda + opciones a la derecha */
  #crear { display: grid; grid-template-columns: 46% 1fr; column-gap: 34px; align-items: start; }
  #crear > .escenario { grid-column: 1; grid-row: 1 / span 99; position: sticky; top: 18px; margin-top: 0; }
  #crear > *:not(.escenario) { grid-column: 2; }
  #crear .escenario .capas-preview { width: min(380px, 40vw); height: min(380px, 40vw); }
  /* el resto del flujo de creación se queda centrado y legible, no estirado */
  #guardar, #cuenta, #comparativa, #desbloqueo { max-width: 560px; margin-inline: auto; }
  /* el tablero del juego (misiones/arena/hogar/lucha) a 2 columnas */
  .tablero { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .tablero #lucha { grid-column: 1 / -1; } /* el ring de combate, a lo ancho */
}
/* las pestañas de categoría ENVUELVEN (nunca se corta la de arma ⚔️, antes quedaba fuera del scroll) */
.pestanas { flex-wrap: wrap; }

/* ── Momento de NACIMIENTO (Optional aplicado): celebración breve al dar vida ── */
.nacimiento {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(5, 5, 5, .88); opacity: 0; pointer-events: none; transition: opacity .33s ease;
}
.nacimiento.ver { opacity: 1; }
.nacimiento-caja { text-align: center; transform: scale(.9); transition: transform .33s var(--muelle); }
.nacimiento.ver .nacimiento-caja { transform: scale(1); }
.nacimiento-chispa { font-size: 46px; margin: 0 0 4px; }
.nacimiento-nombre {
  font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .95;
  font-size: clamp(34px, 11vw, 66px); color: var(--amarillo); margin: 0;
}
.nacimiento-sub { color: var(--hueso); margin: 10px 0 0; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .nacimiento, .nacimiento-caja { transition: none; }
  .nacimiento.ver .nacimiento-caja { transform: none; }
}

/* ── F1: sliders de morfo del cuerpo (pestaña CUERPO del creador) ── */
.morfos { display: flex; flex-direction: column; gap: 15px; padding: 6px 2px 2px; }
.morfo { display: block; }
.morfo-cab { display: block; color: var(--hueso); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
.morfo input[type="range"] { width: 100%; accent-color: var(--amarillo); height: 24px; cursor: pointer; }
.morfo-ext { display: flex; justify-content: space-between; color: var(--gris); font-size: 11px; letter-spacing: .03em; margin-top: 1px; text-transform: lowercase; }
.morfo-nota { text-align: center; margin-top: 8px; }

/* UNDO del creador (investigación p3: petición nº1 de power-users) */

/* UNDO del creador (investigación p3: petición nº1 de los power-users). Va junto a la cámara, sobre la
   escena: es una acción sobre el personaje, NO un "look" — meterlo en el carrusel de presets lo dejaba
   fuera del área visible y lo mezclaba con los arquetipos. */
.btn-undo-esc { position: absolute; top: 10px; right: 58px; z-index: 3;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  color: #fff; font-size: 15px; line-height: 1; padding: 7px 9px; cursor: pointer; }
.btn-undo-esc:disabled { opacity: .35; cursor: default; }

/* ── F9: diario de bienvenida + barras de necesidad (docs/ADR-001-barras-de-necesidades.md) ──
   Tono: el diario cuenta lo que HIZO; las barras informan sin alarmar. Nada de rojo de peligro ni
   iconos de aviso: el ADR prohíbe el marco de castigo, y el color es parte del marco. */
.diario { margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.05); border-left: 3px solid var(--acento, #ffd84d); }
.diario p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; opacity: .92; }
.diario p:last-child { margin-bottom: 0; }
.necesidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px;
  margin: 8px 0 4px; }
.nec { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.nec-icono { font-size: 15px; }
.nec-barra { flex: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,.12);
  overflow: hidden; display: block; }   /* un <span> inline ignora width/height: se vio vacía */
.nec-relleno { display: block; height: 100%; border-radius: 999px; background: #6ee7a8;
  transition: width .35s ease; }
.nec.baja .nec-relleno { background: #ffd84d; }        /* ámbar, NO rojo: informa, no alarma */
.nec-btn { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  color: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer; }
.nec-btn:disabled { opacity: .35; cursor: default; }
.nec-pie { grid-column: 1 / -1; font-size: 11.5px; opacity: .6; margin-top: 2px; }

/* F10.8 — MIS LOOKS y copiar color. Mismo lenguaje visual que los presets de arranque: son la misma
   idea (un look de un toque), solo que estos los hizo el jugador. */
.presets-mios { margin-bottom: .35rem; }
.preset-caja { position: relative; display: inline-flex; }
.preset-mio { padding-right: 1.55rem; }
.preset-x {
  position: absolute; right: .18rem; top: 50%; transform: translateY(-50%);
  width: 1.15rem; height: 1.15rem; line-height: 1; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.28); color: #fff; font-size: .72rem; cursor: pointer; opacity: .55;
}
.preset-x:hover, .preset-x:focus-visible { opacity: 1; background: rgba(190,40,60,.85); }
.preset-guardar { border-style: dashed; }
.copia-color { margin: .35rem 0 .1rem; }
.copia-color .mini {
  font: inherit; font-size: .78rem; padding: .28rem .55rem; border-radius: .5rem; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: inherit;
}
.copia-color .mini:hover, .copia-color .mini:focus-visible { background: rgba(255,255,255,.12); }

/* F6 — catálogo del Hogar por TEMAS. La cabecera lleva el color del tema como pista visual (así el
   jugador ve de un vistazo qué muebles pegan entre sí, que es justo lo que premia la puntuación). */
.hogar-tema { border-left: 3px solid var(--c, #888); padding-left: .45rem; margin: .7rem 0 .3rem; }
.hogar-crafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hogar-craft .hogar-tienes { opacity: .75; font-variant-numeric: tabular-nums; }

/* F9.6 — COLECCIÓN. La pieza que no tienes NO lleva candado ni tachado: es una silueta apagada. La
   diferencia importa — un candado dice «no puedes», una silueta dice «todavía no» (ADR-001). */
.hogar-coleccion { display: flex; flex-direction: column; gap: 4px; margin: .5rem 0 .7rem; }
.col-tema { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.col-tema-et {
  font-size: .74rem; color: var(--gris); border-left: 3px solid var(--c, #888);
  padding-left: .35rem; min-width: 6.6rem; font-variant-numeric: tabular-nums;
}
.col-pieza {
  width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: .4rem;
  font-size: .95rem; background: var(--sup-1); border: 1px solid var(--linea);
  filter: grayscale(1) brightness(.55); opacity: .8; cursor: help;
}
.col-pieza.col-tengo { filter: none; opacity: 1; border-color: var(--c, var(--linea)); background: color-mix(in srgb, var(--c) 16%, var(--sup-1)); }
.col-siguiente { margin-top: .2rem; }

/* la fecha de nacimiento en la tarjeta de guardar: presencia sin robar el foco al campo de correo */
.nacimiento-fecha:empty { display: none; }
.nacimiento-fecha { color: var(--amarillo); font-weight: 700; margin: 2px 0 6px; }

/* F7: qué está haciendo el rival ahora mismo. En cursiva y apagado: es color, no dato de combate — el nivel
   sigue siendo lo que decide si le retas, y esto no debe competir con él por la atención. */
.arena-rutina { font-style: italic; opacity: .78; }