/* MONITO AMARILLO — la web de la desarrolladora, como una terminal ambar.
   Paleta fija: fondo #121214 (la terminal usa un ambar mas oscuro, #0a0904) y los tres
   amarillos del logo: #f5c408 (claro), #b87f00 (miel), #794100 (cacao). */

:root {
  --fondo: #121214;
  --ambar: #0a0904;
  --amarillo: #f5c408;
  --miel: #b87f00;
  --cacao: #794100;
  --ancho: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--ambar);
  color: var(--amarillo);
  font-family: "VT323", "IBM Plex Mono", Consolas, monospace;
  font-size: 22px;
  line-height: 1.25;
  text-shadow: 0 0 6px rgba(245, 196, 8, .45);
}

a { color: var(--amarillo); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.pix { image-rendering: pixelated; }
pre { margin: 0; font: inherit; white-space: pre-wrap; }

.dim { color: var(--miel); }
.apagado { color: var(--cacao); }
.inv { background: var(--amarillo); color: var(--ambar); padding: 0 .35em; text-shadow: none; }
a.inv:hover { background: #fff; text-decoration: none; }
.cursor { display: inline-block; width: .55em; height: 1em; background: var(--amarillo); vertical-align: -.15em; animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Scanlines y viñeta fijas: la textura del monitor. */
.scan { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
.vineta { position: fixed; inset: 0; z-index: 31; pointer-events: none; background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .6) 100%); }

/* ---------- la tele (arranque) ---------- */
.tv { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; }
.tv[hidden] { display: none; }
.tv-pantalla {
  width: 100%; height: 100%; padding: 6vh 6vw; overflow: hidden; position: relative;
  background: var(--ambar);
  transform-origin: center; transform: scaleY(.004) scaleX(.2); opacity: 1;
}
.tv.encendiendo .tv-pantalla { animation: encender .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.tv.apagando .tv-pantalla { animation: apagar .55s ease-in forwards; }
.tv.revelando { background: transparent; }
@keyframes encender {
  0%   { transform: scaleY(.004) scaleX(.2); filter: brightness(4); }
  35%  { transform: scaleY(.004) scaleX(1); filter: brightness(4); }
  100% { transform: none; filter: brightness(1); }
}
@keyframes apagar {
  0%   { transform: none; filter: brightness(1); }
  60%  { transform: scaleY(.004) scaleX(1); filter: brightness(4); }
  100% { transform: scaleY(.004) scaleX(0); filter: brightness(6); }
}
/* Al revelar, la tele es negra y se "abre" desde una linea, dejando ver la pagina. */
.tv.revelando .tv-pantalla { background: #000; transform: none; clip-path: inset(0 0); animation: revelar-mascara .8s cubic-bezier(.2, .8, .2, 1) forwards; }

/* Cambiar de seccion: la pagina entera se apaga como una tele (se achica a una linea desde el
   centro de lo que se ve) y vuelve a encender ya en la seccion nueva. */
/* Rapido, como cambiar de canal en una tele vieja: se apaga en 0,16 s y prende en 0,28 s. */
main.apagando { animation: main-apagar .16s ease-in forwards; }
main.encendiendo { animation: main-encender .28s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes main-apagar {
  0%   { transform: none; filter: brightness(1); }
  70%  { transform: scaleY(.004) scaleX(1); filter: brightness(3); }
  100% { transform: scaleY(.004) scaleX(0); filter: brightness(5); opacity: 0; }
}
@keyframes main-encender {
  0%   { transform: scaleY(.004) scaleX(.15); filter: brightness(5); opacity: 1; }
  35%  { transform: scaleY(.004) scaleX(1); filter: brightness(4); }
  100% { transform: none; filter: brightness(1); }
}
@keyframes revelar-mascara {
  0%   { clip-path: inset(0 0); }
  30%  { clip-path: inset(49.7% 0 49.7% 0); }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
.arranque { font-size: clamp(18px, 2.4vw, 28px); line-height: 1.3; color: var(--amarillo); text-shadow: 0 0 8px rgba(245, 196, 8, .5); }
.arranque .ok { color: var(--amarillo); }
.arranque .visto { color: var(--amarillo); font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; font-size: .8em; }
.arranque .dim { color: var(--miel); }
.saltar { position: absolute; right: 6vw; bottom: 5vh; color: var(--cacao); font-size: 16px; }

/* ---------- barra fina (aparece al bajar) ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 56px;
  display: flex; align-items: center; gap: 24px; padding: 0 20px;
  background: rgba(10, 9, 4, .94); border-bottom: 1px solid var(--cacao);
  transform: translateY(-100%); transition: transform .25s;
  font-size: 18px; overflow: hidden;
}
.barra.visible { transform: none; }
.barra-marca { display: flex; align-items: center; gap: 12px; letter-spacing: .12em; font-size: 24px; }
.barra-marca img { width: 36px; height: auto; flex: none; }   /* height auto: el img trae height=1500 del PNG HD; flex none: que no lo aplaste el flex */
.barra-marca { flex: none; }
.barra-teclas { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.barra-teclas a, .menu a {
  display: inline-flex; align-items: center; gap: .4em;
  border: 1px solid var(--miel); padding: 2px 10px 2px 4px; letter-spacing: .08em;
}
.barra-teclas a { height: 32px; }
.barra-teclas a b, .menu a b { background: var(--amarillo); color: var(--ambar); padding: 0 .4em; text-shadow: none; font-weight: 400; }
.barra-teclas a:hover, .menu a:hover, .menu a.activo { background: rgba(245, 196, 8, .12); border-color: var(--amarillo); text-decoration: none; }

/* ---------- layout ---------- */
.term { max-width: var(--ancho); margin: 0 auto; padding: 32px 28px 60px; }

/* La portada llena la pantalla con el logo centrado; las secciones empiezan al bajar. */
.cabecera {
  min-height: calc(100vh - 32px); min-height: calc(100svh - 32px); box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; align-content: center; column-gap: 20px; padding: 0;
}
.cabecera .estado { font-size: 18px; }
.cabecera .estado.der { text-align: right; }
/* .logo lleva su propio z-index 35: la animacion de encendido crea un contexto de apilamiento y, sin esto,
   el logo caeria bajo el filtro CRT (.scan 30 / .vineta 31) mientras enciende. */
.logo { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 35; transform-origin: center; }
.logo.apagada { opacity: 0; }
/* Encendido de tele vieja: un punto brillante, se abre en una linea, la linea se abre en pantalla con un
   pequeno rebote y el brillo baja hasta lo normal. */
.logo.encendiendo { animation: logo-encender 1.05s cubic-bezier(.2, .8, .25, 1) forwards; }
@keyframes logo-encender {
  0%   { opacity: 1; transform: scale(.03, .006); filter: brightness(9); }
  22%  { opacity: 1; transform: scale(1, .006); filter: brightness(7); }
  32%  { transform: scale(1, .006); filter: brightness(7); }
  62%  { transform: scale(1, 1.06); filter: brightness(2.4); }
  80%  { transform: scale(1, .985); filter: brightness(1.25); }
  100% { opacity: 1; transform: none; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { .logo.encendiendo { animation: logo-reducido .3s forwards; } }
@keyframes logo-reducido { to { opacity: 1; } }
/* El logo viene a 20x (2200 px de ancho): se achica suave, sin pixelated, y asi no se ve borroso en ninguna pantalla. */
/* z-index 35: el logo queda POR ENCIMA de las scanlines (.scan 30) y la viñeta (.vineta 31), el filtro CRT no lo toca. */
.logo-arte { position: relative; z-index: 35; width: min(440px, 70vw); }
.logo-arte img { display: block; width: 100%; height: auto; image-rendering: auto; }
/* El mono de la animacion va justo sobre el mono del logo: arranca a 480/2200 del borde y mide 1380/2200. */
.logo-arte .mono { position: absolute; top: 0; left: 21.818%; width: 62.727%; }
.rayas { max-width: min(440px, 70vw); overflow: hidden; white-space: nowrap; color: var(--miel); font-size: 24px; letter-spacing: .08em; margin-top: 12px; }
.rayas.ancha { max-width: none; margin: 0; }   /* la linea divisoria entre las cartas del equipo, a todo lo ancho */
.menu { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; font-size: 24px; }
.menu a { padding: 6px 18px 6px 6px; }
.menu a.vacio { border-color: transparent; }   /* mientras no tiene letras (portada recien encendida) no se ve el marco */
.menu a.vacio b { background: transparent; }
.pista { grid-column: 1 / -1; text-align: center; margin: 10px 0 0; font-size: 17px; }

.seccion { padding: 34px 0 6px; outline: none; }
h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 26px; font-weight: 400; letter-spacing: .06em; }
h2 .inv { padding: 2px 14px; }
h2 .raya { flex: 1; border-top: 2px dashed var(--cacao); }
h2 .cmd { font-size: 19px; }

/* ---------- nosotros ---------- */
.nosotros p { margin: 0 0 14px; max-width: 62ch; font-size: 24px; }
.nosotros b { color: #fff; font-weight: 400; }
.sellos { display: flex; gap: 10px; flex-wrap: wrap; }
.sellos .inv { padding: 2px 12px; letter-spacing: .08em; }

/* ---------- juegos: el commander ---------- */
.commander { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.arbol { border: 2px double var(--miel); padding: 10px 10px 8px; position: sticky; top: 64px; }
.arbol .nodo { padding: 2px 6px; font-size: 20px; }
.arbol .ayuda { margin-top: 10px; font-size: 16px; color: var(--cacao); }
.arbol .item {
  display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--amarillo); font: inherit; font-size: 22px;
  padding: 3px 8px 3px 26px; cursor: pointer; text-shadow: inherit;
}
.arbol .item span { color: var(--miel); font-size: 17px; }
.arbol .item:hover { background: rgba(245, 196, 8, .12); }
.arbol .item.sel { background: var(--amarillo); color: var(--ambar); text-shadow: none; }
.arbol .item.sel span { color: var(--cacao); }
.arbol .item.apagado { color: var(--cacao); cursor: default; }   /* solo decorado: no reacciona */
.arbol .item.apagado:hover { background: none; }
.arbol .item.apagado span { color: var(--cacao); }

.vista { border: 2px double var(--miel); padding: 22px 18px 18px; position: relative; min-height: 380px; }
.vista-titulo { position: absolute; left: 12px; top: -13px; background: var(--ambar); padding: 0 8px; font-weight: 400; font-size: 18px; letter-spacing: .08em; color: var(--miel); }
.cinta { border: 2px solid var(--miel); background: #000; position: relative; }
.cinta img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cinta .eti { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(10, 9, 4, .88); border-top: 2px solid var(--miel); padding: 4px 12px; display: flex; justify-content: space-between; font-size: 19px; }
.cinta.q { aspect-ratio: 16 / 8; display: grid; place-items: center; border-style: dashed; color: var(--cacao); font-size: 90px; }
.vista h3 { margin: 16px 0 6px; font-size: 44px; font-weight: 400; letter-spacing: .04em; }   /* 30% mas grande, pedido de Esteban */
.vista p { margin: 0 0 10px; max-width: 70ch; }
#vista-desc { color: #fff; }   /* la frase "Pelea a muerte con cuchillos..." en blanco, como las negritas de Nosotros */
.vista .datos { font-size: 20px; max-width: 70ch; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 22px; }
.acciones a.dim:hover { color: var(--amarillo); }
/* [ VER MÁS ]: 80% mas grande que las demas acciones (22 -> 40 px) y titila en blanco. */
.acciones a.brilla { font-size: 40px; padding: 4px 22px; animation: brillar 1s steps(2, jump-none) infinite; }
@keyframes brillar {
  0%   { background: var(--amarillo); color: var(--ambar); box-shadow: none; }
  100% { background: #fff; color: var(--ambar); box-shadow: 0 0 18px rgba(255, 255, 255, .55); }
}
.vista.transicion { animation: cambio .28s steps(3); }
@keyframes cambio { 0% { opacity: .2; filter: brightness(2); } 100% { opacity: 1; } }

/* ---------- equipo ---------- */
.equipo { display: grid; grid-template-columns: 1fr; gap: 24px; }   /* una carta por fila, apaisada: retrato a la izquierda, texto a la derecha */
/* Carta segun el boceto de Esteban: retrato grande a la izquierda (toda la altura), a la derecha el
   nombre como barra, dos lineas cortas (rol y pais) y debajo el bloque de texto. */
.persona { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 6px 0; }   /* sin recuadro (pedido de Esteban) */
.persona b { display: inline-block; font-weight: 400; font-size: 24px; letter-spacing: .08em; background: var(--amarillo); color: var(--ambar); text-shadow: none; padding: 2px 12px; margin-bottom: 8px; }
.persona span { display: block; font-size: 18px; line-height: 1.2; }
.persona b small { font-size: .72em; letter-spacing: .04em; }   /* el alias entre parentesis, mas chico */
/* Retratos pixel art de Leo (nosotro.zip): teba = Esteban, leiyo = Leo. Traen su propio fondo oscuro, van a sangre. */
.avatar { width: 100%; aspect-ratio: 1; border: 2px solid var(--miel); background: #121214 url("marca/equipo/teba.png?v=mtvvgn9h") center / cover no-repeat; }
.avatar.leo { background-image: url("marca/equipo/leiyo.png?v=mtvvgn9h"); }

/* ---------- contacto ---------- */
.contacto { max-width: 720px; }
.contacto .linea { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 24px; }
.contacto .linea span { min-width: 110px; white-space: nowrap; }
.contacto .linea i { flex: 1; border-bottom: 2px dotted var(--cacao); transform: translateY(-6px); }

/* ---------- pie ---------- */
.pie { margin-top: 50px; border-top: 1px dashed var(--cacao); padding-top: 18px; font-size: 18px; }
.pie pre { font-size: 22px; margin-bottom: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cabecera { grid-template-columns: 1fr; text-align: center; }
  .cabecera .estado { display: none; }
  .commander { grid-template-columns: 1fr; }
  .arbol { position: static; }
}
@media (max-width: 560px) {
  body { font-size: 19px; }
  .term { padding: 20px 16px 40px; }
  .menu { font-size: 19px; gap: 6px; }
  .menu a { padding: 4px 12px 4px 4px; }
  h2 { font-size: 20px; }
  h2 .cmd { display: none; }
  .vista h3 { font-size: 38px; }   /* en el telefono 44 px partia el titulo en dos lineas */
  .contacto .linea { flex-wrap: wrap; font-size: 20px; }
  .contacto .linea i { display: none; }
  .tv-pantalla { padding: 5vh 4vw; }   /* en el telefono la tele aprovecha mas el ancho */
  .arranque { font-size: 17px; }
  .pista { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .acciones a.brilla { animation: none; background: #fff; }
}

/* ---------- idioma (siempre a la vista) ---------- */
.idioma {
  position: fixed; right: 20px; top: 12px; z-index: 45; height: 32px; display: inline-flex; align-items: center; gap: .35em;
  background: rgba(10, 9, 4, .92); color: var(--amarillo); border: 1px solid var(--miel);
  font: inherit; font-size: 18px; padding: 0 10px; cursor: pointer; text-shadow: inherit; letter-spacing: .06em;
}
.idioma b { font-weight: 400; background: var(--amarillo); color: var(--ambar); padding: 0 .4em; text-shadow: none; }
.idioma:hover { border-color: var(--amarillo); background: rgba(245, 196, 8, .12); }


/* ---------- "ver mas detalles": la seccion abierta ocupa la pantalla ---------- */
h2 .mas {
  background: var(--amarillo); border: 0; color: var(--ambar);
  font: inherit; font-size: 18px; padding: 3px 12px; cursor: pointer; text-shadow: none; letter-spacing: .08em; white-space: nowrap;
  box-shadow: 3px 3px 0 var(--cacao); transition: transform .08s, box-shadow .08s, background .12s;
}
h2 .mas:hover { background: #fff; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--cacao); }
h2 .mas:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cacao); }
.detalle { display: none; }
.seccion.abierta { padding-bottom: 24px; }   /* todas viven abiertas: el texto se escribe con el scroll */
.seccion.abierta .detalle { display: block; }
.seccion.abierta > h2 .mas { background: var(--ambar); color: var(--amarillo); box-shadow: 3px 3px 0 var(--cacao), inset 0 0 0 1px var(--amarillo); }
.seccion.abierta > h2 .mas:hover { background: rgba(245, 196, 8, .15); }

.detalle h3, .detalle h4 { display: inline-block; font-weight: 400; font-size: 19px; letter-spacing: .1em; margin: 18px 0 8px; padding: 1px 10px; }
.detalle p { margin: 0 0 10px; max-width: 70ch; }
.detalle pre { margin: 0 0 8px; }
.ok { color: var(--amarillo); }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.columnas > div > h3:first-child, .columnas > div > h4:first-child { margin-top: 10px; }

/* juegos abiertos: la vista crece y muestra lo que trae, la llave y mas capturas */
.seccion.abierta .vista { min-height: 0; }
.tiras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.tiras .cinta img { aspect-ratio: 16 / 9; }
.tiras .cinta .eti { font-size: 17px; padding: 2px 10px; }

/* equipo abierto: dos por fila, con su ficha completa */
.seccion.abierta .equipo { gap: 20px; }
.seccion.abierta .persona { grid-template-columns: 230px 1fr; padding: 8px 0; gap: 22px; align-items: start; }
.seccion.abierta .persona b { font-size: 28px; }
.quien { min-width: 0; }
.quien .detalle p { font-size: 20px; margin: 12px 0 8px; }
.quien .detalle pre { font-size: 18px; }

/* contacto abierto: cada canal con su explicacion debajo */
.contacto .detalle p { margin: 0 0 14px 122px; font-size: 20px; }

@media (max-width: 900px) {
  .columnas { grid-template-columns: 1fr; gap: 10px; }
  .contacto .detalle p { margin-left: 0; }
  .tiras { grid-template-columns: 1fr 1fr 1fr; }
  h2 .mas { font-size: 15px; }
  .idioma { right: 10px; top: 12px; font-size: 17px; }
  /* en pantallas angostas la barra queda: monito · teclas · idioma (sin el nombre) */
  .barra { gap: 14px; padding-left: 12px; }
  .barra-marca span { display: none; }
  .barra-teclas a { font-size: 16px; padding: 2px 8px 2px 3px; }
}
@media (max-width: 560px) {
  h2 { flex-wrap: wrap; }
  h2 .raya { display: none; }
  .tiras { grid-template-columns: 1fr; }
}

/* Los "hace:" y "desde:" del equipo van en una linea (el span de .persona era block). */
.quien .detalle pre span { display: inline; }
/* La barra fina deja lugar al boton de idioma, que vive fijo a la derecha. */
.barra { padding-right: 200px; }
@media (max-width: 900px) { .barra { padding-right: 160px; } }
/* Hasta 700 px las teclas van solo con el numero (1 2 3 4): con nombre no entraban y el flex aplastaba el logo. */
@media (max-width: 700px) {
  .barra-teclas a { padding: 2px 3px; font-size: 16px; gap: 0; }
  .barra-teclas a span { display: none; }
  .barra-teclas a b { padding: 0 .55em; }
}
@media (max-width: 560px) { .barra { padding-right: 150px; } }

/* Todo lo que es imagen o video va POR ENCIMA del filtro CRT (.scan 30 / .vineta 31), igual que el logo:
   la miniatura y los videos del commander (.cinta) y los retratos del equipo (.avatar). El logo de la barra ya
   esta arriba porque la barra es z-index 40. */
.cinta, .avatar { position: relative; z-index: 35; }

/* ---------- videos del commander (sin audio) + visor ---------- */
.cinta.video { cursor: pointer; }
.cinta.video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.cinta.video:hover, .cinta.video:focus-visible { border-color: var(--amarillo); outline: none; }
.cinta.video:hover .eti { border-color: var(--amarillo); color: var(--amarillo); }
.visor { position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, .93); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 4vh 4vw; }
.visor[hidden] { display: none; }
.visor video { max-width: 92vw; max-height: 78vh; border: 2px solid var(--miel); background: #000; }
.visor-cerrar { font: inherit; font-size: 22px; letter-spacing: .08em; padding: 4px 16px; cursor: pointer; border: 0; }

/* En el telefono la carta del equipo se apila: retrato arriba, nombre y texto abajo (a lo ancho el texto
   quedaba en una columna finita). Va al final del archivo para ganarle a la regla de .seccion.abierta .persona. */
@media (max-width: 560px) {
  .persona, .seccion.abierta .persona { grid-template-columns: 1fr; gap: 12px; }
  .avatar { width: min(220px, 60%); }
}

/* ---------- carga de cinta antes de abrir STAB ---------- */
.cinta-carga { position: fixed; inset: 0; z-index: 120; background: #000; display: grid; place-items: center; padding: 6vw; }
.cinta-carga[hidden] { display: none; }
.cinta-carga pre {
  margin: 0; font: inherit; font-size: clamp(17px, 2.6vw, 28px); line-height: 1.7; text-align: left;
  color: var(--amarillo); text-shadow: 0 0 8px rgba(245, 196, 8, .5); white-space: pre;
}