/* ==========================================================================
   FERRUM · web — estilo
   --------------------------------------------------------------------------
   La misma paleta que el juego (`ferrum/css/estilo.css`), a proposito: entrar
   en la web y entrar en la partida tienen que sentirse como el mismo sitio.
   Lo que cambia es la densidad — la web respira, el juego es una sala de mando.

   Sin dependencias, sin fuentes externas, sin build. Un solo fichero que se
   lee de arriba abajo.
   ========================================================================== */
:root{
  --grafito:#12171a; --grafito2:#171d21; --panel:#1c2429; --panel2:#222b31;
  --oliva:#3d4a3a; --acero:#677480; --linea:#2c363d;
  --ambar:#ff9d2e; --rojo:#eb646e; --cian:#4fd1c5; --verde:#7ee081;
  --foco:#ffbe5c;
  --texto:#c9d4da; --tenue:#8e9ba5; --blanco:#eef4f7;
  /* --tenue se subio de #84929c a #8e9ba5: el original daba 4,51:1 sobre
     --panel2, que pasa la AA por dos centesimas. El gris tenue es justo el que
     lleva el texto de 11-12 px (rotulos, fechas, avisos), asi que se le da
     holgura en vez de dejarlo rozando el limite. */
  --sombra:0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  --radio:3px;
}
*{box-sizing:border-box}
/* Las transiciones se declaran UNA vez, por propiedad y no con `all`: `all`
   anima tambien el layout y produce esos saltos raros al repintar una lista. */
.btn,.conv,.tarjeta-partida,.panel,nav.menu a,.pestanas button,input,select,textarea{
  transition:background-color .13s ease, border-color .13s ease,
             color .13s ease, transform .13s ease, box-shadow .13s ease;
}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh;
  background:var(--grafito); color:var(--texto);
  font:15px/1.65 "Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* La retícula de sala de mando del juego, más tenue: aquí es fondo, no piel. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(103,116,128,.045) 1px, transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg, rgba(103,116,128,.045) 1px, transparent 1px) 0 0/44px 100%,
    radial-gradient(ellipse at 50% -10%, #1b242a 0%, var(--grafito) 62%);
}
h1,h2,h3,h4{margin:0 0 .5em; font-weight:700; letter-spacing:.04em; color:var(--blanco)}
h1{font-size:clamp(28px,5vw,44px); line-height:1.12; letter-spacing:.02em}
h2{font-size:22px} h3{font-size:17px}
p{margin:0 0 1em}
a{color:var(--ambar); text-decoration:none}
a:hover{text-decoration:underline}
small{font-size:12.5px; color:var(--tenue)}
hr{border:0;border-top:1px solid var(--linea);margin:2em 0}
code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.9em;
  background:#0e1215;border:1px solid var(--linea);border-radius:2px;padding:.1em .35em}

.stencil{font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  text-transform:uppercase; letter-spacing:.14em}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0e1215}
::-webkit-scrollbar-thumb{background:#33414a;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#465a66}

/* Foco visible SIEMPRE. Se navega esto con teclado o no se navega. */
:focus-visible{outline:2px solid var(--foco); outline-offset:2px; border-radius:2px}

/* ------------------------------------------------------------- armazon --- */
.envoltorio{max-width:1080px;margin:0 auto;padding:0 20px}
.estrecho{max-width:560px}
main{padding:32px 0 80px}
.salta-aqui{position:absolute;left:-9999px;top:0;background:var(--ambar);color:#12171a;
  padding:10px 16px;z-index:100;font-weight:700}
.salta-aqui:focus{left:8px;top:8px}

/* ---------------------------------------------------------------- barra -- */
header.barra{
  position:sticky;top:0;z-index:50;
  background:rgba(18,23,26,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
header.barra::before{content:'';display:block;height:2px;background:var(--ambar)}
.barra .envoltorio{display:flex;align-items:center;gap:22px;height:58px}
.marca{display:flex;align-items:center;gap:10px;color:var(--blanco);font-weight:700;
  letter-spacing:.14em;font-size:15px}
.marca:hover{text-decoration:none}
.marca .sello{width:26px;height:26px;flex:none}
nav.menu{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav.menu a{padding:7px 12px;border-radius:var(--radio);color:var(--texto);font-size:14px}
nav.menu a:hover{background:var(--panel);text-decoration:none}
nav.menu a[aria-current="page"]{background:var(--panel);color:var(--ambar);
  box-shadow:inset 0 -2px 0 var(--ambar)}
.globo{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;
  background:var(--rojo);color:#12171a;border-radius:9px;font-size:11px;font-weight:700;
  text-align:center;line-height:18px}

/* --------------------------------------------------------------- piezas -- */
.panel{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
  border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:20px; position:relative;
}
/* Las escuadras de esquina del juego. Cuatro gradientes, ni un nodo de más. */
.panel.escuadras::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:var(--radio);
  background:
    linear-gradient(var(--acero),var(--acero)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--acero),var(--acero)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--acero),var(--acero)) 100% 100%/1px 12px no-repeat,
    linear-gradient(var(--acero),var(--acero)) 100% 100%/12px 1px no-repeat;
  opacity:.5;
}
.rejilla{display:grid;gap:16px}
/* `auto-fill` y NO `auto-fit`: con auto-fit, una rejilla con una sola tarjeta
   colapsa las pistas vacias y esa tarjeta se estira a los 1080 px enteros, que
   es justo lo que pasaba en "Proximamente" cuando solo habia una partida.
   auto-fill mantiene las pistas y la tarjeta conserva su ancho. */
.rejilla.dos{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
/* El minimo de pista es lo que decide cuantas columnas caben, y con el se
   ajustan dos cosas a la vez: que dos tarjetas llenen la fila con holgura
   (420 -> dos pistas de 520 en 1080) y que una sola no se estire al ancho
   entero. El `min(100%, …)` evita que la pista sea mas ancha que la pantalla
   en un movil, que es el desbordamiento clasico de esta tecnica. */

.cab-seccion{display:flex;align-items:baseline;gap:12px;margin:38px 0 16px;
  padding-bottom:8px;border-bottom:1px solid var(--linea)}
.cab-seccion h1,.cab-seccion h2{margin:0;position:relative;padding-left:14px}
/* El bloque de acento de las cabeceras del juego: una regla vertical ambar.
   Es lo que hace que una seccion se lea como seccion y no como un parrafo en
   negrita. */
.cab-seccion h1::before,.cab-seccion h2::before{
  content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:3px;
  background:var(--ambar);border-radius:2px;
}
.cab-seccion .pista{color:var(--tenue);font-size:13px;margin-left:auto}

/* --------------------------------------------------------------- botones - */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--radio);border:1px solid var(--linea);
  background:var(--panel2);color:var(--texto);font:inherit;font-weight:600;
  font-size:14px;cursor:pointer;text-align:center;
}
.btn:hover{background:#2a343b;text-decoration:none;border-color:var(--acero)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primario{background:var(--ambar);border-color:var(--ambar);color:#12171a}
.btn.primario:hover{background:var(--foco);border-color:var(--foco);
  box-shadow:0 0 0 3px rgba(255,157,46,.18)}
.btn.peligro{border-color:var(--rojo);color:var(--rojo)}
.btn.peligro:hover{background:rgba(235,100,110,.12)}
.btn.pequeno{padding:5px 11px;font-size:13px}
.btn.ancho{width:100%}

/* ------------------------------------------------------------ formulario - */
label{display:block;margin:0 0 14px}
label .rotulo{display:block;font-size:13px;color:var(--tenue);margin-bottom:5px;
  letter-spacing:.04em}
input,select,textarea{
  width:100%;padding:9px 12px;border-radius:var(--radio);
  border:1px solid var(--linea);background:#0e1215;color:var(--blanco);
  font:inherit;font-size:14px;
}
input:focus,select:focus,textarea:focus{border-color:var(--acero)}
textarea{resize:vertical;min-height:80px}
.fila{display:flex;gap:12px;flex-wrap:wrap}
.fila>*{flex:1 1 160px}
/* El margen negativo acerca la ayuda a SU campo. Solo se aplica cuando de
   verdad viene detras de una etiqueta: tras un formulario entero se comia la
   ultima fila y el texto quedaba encima del boton. */
.ayuda{font-size:12.5px;color:var(--tenue);margin:6px 0 14px}
label+.ayuda{margin-top:-9px}

/* --------------------------------------------------------------- avisos -- */
.aviso{padding:11px 14px;border-radius:var(--radio);border:1px solid var(--linea);
  background:var(--panel);margin:0 0 16px;font-size:14px}
.aviso.malo{border-color:var(--rojo);background:rgba(235,100,110,.10);color:#ffd3d6}
.aviso.bueno{border-color:var(--verde);background:rgba(126,224,129,.10);color:#d6f7d7}
.aviso.ojo{border-color:var(--ambar);background:rgba(255,157,46,.10)}
.aviso:empty{display:none}

/* -------------------------------------------------------------- tarjetas - */
/* Una tarjeta que se puede abrir tiene que parecerlo. La elevacion es de 2 px
   y la linea superior se tiñe: suficiente para que el ojo la marque como
   objetivo, sin el rebote de las tarjetas que crecen al pasar por encima. */
.tarjeta-partida{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.tarjeta-partida::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--linea);transition:background-color .13s ease;
}
.tarjeta-partida:hover{transform:translateY(-2px);border-color:var(--acero)}
.tarjeta-partida:hover::before{background:var(--ambar)}
.tarjeta-partida.viva::before{background:var(--verde)}
.tarjeta-partida.llena::before{background:var(--rojo)}
.tarjeta-partida .arriba{display:flex;align-items:flex-start;gap:12px}
/* Clase y no `style="flex:1"` en linea: un estilo en linea gana a cualquier
   regla de la hoja, incluidas las de la consulta de movil, y ahi es donde
   hacia falta que el bloque pasara a ocupar el ancho entero. */
.tarjeta-partida .ancho{flex:1 1 auto;min-width:0}
/* `.ancho` esta pensado para repartir el espacio HORIZONTAL dentro de `.arriba`.
   Aplicado al boton, que cuelga directamente de la tarjeta —que es una columna—
   lo que reparte es el espacio VERTICAL: en una fila de dos tarjetas, la del
   contenido mas corto estiraba su boton hasta los ochenta pixeles de alto.
   El boton se queda de su tamano y se pega abajo, asi que los botones de una
   misma fila quedan alineados aunque las tarjetas digan cosas distintas. */
.tarjeta-partida > .btn.ancho{flex:0 0 auto;width:100%;margin-top:auto}
.tarjeta-partida h3{margin:0}
.tarjeta-partida .desc{color:var(--tenue);font-size:13.5px;margin:0}
.etiquetas{display:flex;gap:6px;flex-wrap:wrap}
/* Una pildora de estado que se parte en dos lineas deja de parecer una pildora
   y pasa a parecer un error: «EN / CURSO», «INSCRIPCION / ABIERTA». */
.etiqueta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:2px 8px;border-radius:10px;border:1px solid var(--linea);color:var(--tenue)}
.etiqueta.viva{border-color:var(--verde);color:var(--verde)}
.etiqueta.pronto{border-color:var(--cian);color:var(--cian)}
.etiqueta.llena{border-color:var(--rojo);color:var(--rojo)}
/* El punto delante de un estado en vivo. Late despacio, porque "en curso"
   quiere decir que ahi esta pasando algo ahora mismo. */
.etiqueta.viva::before,.etiqueta.pronto::before,.etiqueta.llena::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:6px;vertical-align:.08em}
.etiqueta.viva::before{animation:latir 2.4s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.35}}

.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px 14px;
  border-top:1px solid var(--linea);padding-top:12px}
/* Un dato cuyo valor es texto (el nombre de una facción) necesita el doble de
   sitio que uno que es una cifra, o parte la palabra en dos lineas y se pega
   al de al lado. */
.dato.texto{grid-column:span 2}
.dato.texto .v{font-size:15px;line-height:1.3}
.dato.texto .v small{display:inline;font-size:12.5px;color:var(--ambar);
  margin-left:4px;font-weight:600}
.dato .k{display:block;font-size:11px;color:var(--tenue);letter-spacing:.08em;
  text-transform:uppercase}
.dato .v{display:block;font-size:17px;color:var(--blanco);font-weight:700}

/* La barra de aforo. Se pinta con un ancho en línea desde JS. */
.medidor{height:5px;background:#0e1215;border-radius:3px;overflow:hidden;
  border:1px solid var(--linea)}
.medidor i{display:block;height:100%;background:var(--ambar);
  transition:width .4s ease}
.medidor.lleno i{background:var(--rojo)}

/* --------------------------------------------------------------- tablas -- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linea)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);
  font-weight:600}
tbody tr:hover{background:rgba(103,116,128,.07)}
tbody tr:last-child td{border-bottom:0}
/* El podio. Tres filas con su color, sin medallitas de emoji: la tipografia y
   un filo de color dicen lo mismo y no dependen de la fuente del sistema. */
tr.podio td{background:rgba(255,157,46,.045)}
tr.podio td:first-child{box-shadow:inset 3px 0 0 var(--ambar);font-weight:700}
tr.podio.p2 td{background:rgba(103,116,128,.07)}
tr.podio.p2 td:first-child{box-shadow:inset 3px 0 0 var(--acero)}
tr.podio.p3 td{background:rgba(192,115,88,.06)}
tr.podio.p3 td:first-child{box-shadow:inset 3px 0 0 #c07358}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-envuelta{overflow-x:auto}

/* ------------------------------------------------------------- mensajes -- */
.mensajeria{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
@media(max-width:760px){.mensajeria{grid-template-columns:1fr}}
.lista-conv{max-height:70vh;overflow-y:auto}
/* `min-width:0` no es opcional aqui: un boton con texto `nowrap` dentro toma
   su ancho INTRINSECO, asi que el recorte con puntos suspensivos no se aplica
   nunca y el texto se sale del panel. Es el fallo clasico de las listas de
   conversaciones. */
.conv{display:block;width:100%;min-width:0;text-align:left;padding:11px 12px;border:0;
  border-bottom:1px solid var(--linea);background:none;color:var(--texto);
  cursor:pointer;font:inherit;overflow:hidden}
.conv:hover{background:rgba(103,116,128,.09)}
.conv[aria-selected="false"] .t{font-weight:600}
.conv[aria-selected="true"]{background:var(--panel2);box-shadow:inset 3px 0 0 var(--ambar)}
.conv .t{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--blanco)}
.conv .p{display:block;max-width:100%;font-size:12.5px;color:var(--tenue);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .t>span{min-width:0}
.hilo{display:flex;flex-direction:column;height:70vh}
/* Los mensajes se apoyan ABAJO, como en cualquier chat: una conversacion de
   dos mensajes en un panel de 70vh dejaba medio metro de vacio encima. El
   `margin-top:auto` en el primero lo consigue sin romper el scroll, que es lo
   que si rompe `justify-content:flex-end` en algunos navegadores. */
.hilo .cuerpo{flex:1;overflow-y:auto;padding:4px 4px 12px;display:flex;
  flex-direction:column;gap:10px}
.hilo .cuerpo>:first-child{margin-top:auto}
.msj{max-width:min(74%,560px);padding:9px 13px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--linea);align-self:flex-start}
.msj.mio{align-self:flex-end;background:#26352a;border-color:#41523f}
.msj .a{font-size:11.5px;color:var(--tenue);margin-bottom:2px}
.msj .x{white-space:pre-wrap;overflow-wrap:anywhere}
.msj.retirado .x{color:var(--tenue);font-style:italic}
.escribir{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--linea)}
.escribir textarea{min-height:44px;max-height:130px}

/* ---------------------------------------------------------------- admin -- */
.pestanas{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--linea);
  margin-bottom:20px}
.pestanas button{padding:9px 15px;border:0;background:none;color:var(--tenue);
  font:inherit;font-weight:600;cursor:pointer;border-bottom:2px solid transparent}
.pestanas button[aria-selected="true"]{color:var(--ambar);border-bottom-color:var(--ambar)}
.puntos{font-weight:700;font-variant-numeric:tabular-nums}
.puntos.alto{color:var(--rojo)} .puntos.medio{color:var(--ambar)}
.senales{margin:4px 0 0;padding-left:18px;font-size:13px;color:var(--tenue)}
.senales li{margin:2px 0}

/* La puntuacion de sospecha, con barra. Una cifra suelta obliga a recordar la
   escala cada vez; la barra dice "mucho o poco" de un vistazo. */
.aguja{display:inline-flex;align-items:center;gap:8px}
.aguja .n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--texto)}
.aguja.medio .n{color:var(--ambar)}
.aguja.alto .n{color:var(--rojo)}
.aguja .riel{display:block;width:52px;height:5px;border-radius:3px;
  background:#0e1215;border:1px solid var(--linea);overflow:hidden}
.aguja .riel i{display:block;height:100%;background:var(--acero)}
.aguja.medio .riel i{background:var(--ambar)}
.aguja.alto .riel i{background:var(--rojo)}
.aguja.grande .n{font-size:24px}
.aguja.grande .riel{width:72px;height:6px}

/* Un grupo de cuentas relacionadas: la cabecera dice cuantas y por que, y
   debajo va una fila por cuenta. La version anterior amontonaba un boton
   "Sancionar Fulano" por cuenta en un parrafo y era ilegible con siete. */
.grupo-sospecha header{display:flex;gap:14px;align-items:flex-start;
  padding-bottom:12px;border-bottom:1px solid var(--linea)}
.cuentas-sospecha{list-style:none;margin:0;padding:0}
.cuentas-sospecha li{display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--linea)}
.cuentas-sospecha li:last-child{border-bottom:0}
.cuentas-sospecha li span{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:var(--blanco);font-weight:600}
.embudo{display:grid;gap:10px}
.paso{display:grid;grid-template-columns:130px 1fr 62px;gap:10px;align-items:center}
.paso .barra-e{height:22px;background:#0e1215;border:1px solid var(--linea);
  border-radius:2px;overflow:hidden}
/* La barra del embudo era oliva sobre grafito: se leia mal en una pantalla
   con brillo bajo. Ambar apagado sube el contraste sin gritar. */
.paso .barra-e i{display:block;height:100%;
  background:linear-gradient(90deg,#7a5a2a,#b4802f);transition:width .4s ease}
/* Grafica de afluencia. Cada dia tiene su carril, tenga datos o no: si solo se
   pintan los dias con actividad, un servidor recien abierto enseña una barra
   suelta en medio de la nada y parece que la grafica esta rota. */
/* Una sola barra en una caja vacia no es un grafico, es una marca suelta: no
   se sabe si 5 es mucho o poco. Con la linea del maximo, la del medio y la
   cifra del tope, la misma barra ya dice algo. */
.grafico-dias{position:relative;padding-right:38px}
.grafico-dias .tope{position:absolute;right:0;top:-5px;font-size:10.5px;
  color:var(--tenue);font-variant-numeric:tabular-nums}
.grafico-dias::before{
  content:'';position:absolute;left:0;right:38px;top:0;height:50%;
  border-top:1px dashed var(--linea);border-bottom:1px dashed var(--linea);
  pointer-events:none}
.afluencia{display:flex;align-items:flex-end;gap:2px;height:130px;
  border-bottom:1px solid var(--linea);padding-bottom:0;position:relative}
.afluencia .dia{flex:1;min-width:3px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:1px;height:100%;
  background:linear-gradient(var(--linea),var(--linea)) bottom/100% 1px no-repeat}
.afluencia .dia i{display:block;border-radius:1px 1px 0 0}
.vacio-mini{padding:26px 14px;text-align:center;color:var(--tenue);font-size:13px;
  border:1px dashed var(--linea);border-radius:var(--radio)}
.afluencia .dia .r{background:var(--ambar)}
.afluencia .dia .a{background:#5f7359}
.ejes{display:flex;justify-content:space-between;margin-top:6px}

/* Las reglas de `.cifras` viven ahora con la portada, mas abajo. Habia dos
   bloques con el mismo selector —el viejo centrado con `auto` y el nuevo en
   tres columnas iguales— y el resultado era el peor de los dos: columnas de
   ancho automatico apretadas contra la izquierda. */

/* ============================================================== PORTADA ==
   El mapa es la mejor baza visual del juego, y durante mucho tiempo la portada
   lo usaba mal: centrado detras del titular, al 46 % de opacidad y con un velo
   oscuro encima justo donde estaba el texto. El resultado era que ni se leia
   como mapa ni aportaba nada — papel pintado caro.

   Ahora el texto se aparta a una columna y el mapa ocupa la otra. No hace
   falta velo sobre el titular porque el titular ya no esta encima del mapa, y
   sin velo el mapa por fin se ve: continentes con su color, costas, relieve.

   Va como <img> de un SVG suelto y no incrustado: son 89 KB de trazados que
   asi se cachean una vez en vez de viajar con cada pagina. */
.portada{
  position:relative; overflow:hidden; isolation:isolate;
  padding:76px 0 0; margin-bottom:34px;
  border-bottom:1px solid var(--linea);
}
/* `>` y no un descendiente cualquiera: el zocalo de cifras lleva su PROPIO
   `.envoltorio` dentro de la portada, y con el selector suelto heredaba el
   hueco del 46 % reservado para el mapa — las tres cifras se apretaban en la
   mitad izquierda con medio ancho vacio al lado. */
.portada > .envoltorio{
  position:relative; z-index:1;
  max-width:1080px;
  /* La columna de texto ocupa poco mas de la mitad. El resto es el mapa, y esa
     es la proporcion que hace que se lea como una composicion y no como un
     titulo sobre una foto. */
  padding-right:clamp(20px, 46%, 540px);
  padding-top:8px; padding-bottom:70px;
}
.mundo-fondo{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  /* Anclado a la derecha y desbordando por arriba y por la derecha: se ve el
     Atlantico, Europa, Africa y Asia, que es donde el mapa tiene mas dibujo. */
  /* Cabe ENTERO en la mitad derecha. La version anterior lo hacia mas grande
     de lo que tenia sitio y el borde inferior de la portada le cortaba
     Sudamerica y Africa por la mitad: un mapa cortado en seco no parece un
     encuadre, parece un fallo de maquetado. */
  right:-3%; top:50%; transform:translateY(-50%);
  width:min(940px, 66%); height:auto;
  opacity:.66; filter:saturate(.92) brightness(1) contrast(1.04);
  /* Se desvanece por la izquierda, que es por donde toca el texto, y por los
     cuatro bordes, para que no parezca recortado con tijeras. */
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 56% 50%,
    #000 0%, #000 52%, rgba(0,0,0,.55) 76%, transparent 97%),
    linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image:radial-gradient(ellipse 78% 82% at 56% 50%,
    #000 0%, #000 52%, rgba(0,0,0,.55) 76%, transparent 97%),
    linear-gradient(90deg, transparent 0%, #000 26%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.portada > .envoltorio .antetitulo{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ambar); margin:0 0 16px; font-weight:600;
  /* `inline-flex` y no `flex`: con `flex` la linea ocupaba todo el ancho de la
     columna y se partia en dos justo cuando cabia entera. */
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
}
/* Una regla corta delante del antetitulo. Es el mismo gesto que la barra
   vertical de las cabeceras de seccion: dice «aqui empieza algo». */
.portada .antetitulo::before{
  content:''; width:28px; height:2px; background:var(--ambar); flex:none;
}
.portada > .envoltorio h1{
  font-size:clamp(38px, 7.2vw, 76px); line-height:.98; margin:0 0 20px;
  letter-spacing:.03em; text-shadow:0 2px 30px rgba(10,14,16,.7);
}
.portada > .envoltorio .lema{
  font-size:17.5px; line-height:1.62; color:var(--texto);
  max-width:46ch; margin:0 0 28px;
}
.portada > .envoltorio .acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.portada > .envoltorio .letra-chica{
  margin:16px 0 0; font-size:12.5px; color:var(--tenue);
}

/* El zocalo de cifras, apoyado en el borde de la portada. Son las tres o
   cuatro que NO cambian. Las que si cambian —partidas abiertas, comandantes—
   van en su seccion: «9 comandantes» en una portada no es un dato, es una
   confesion, y ademas la contradice el dia que haya novecientos. */
.portada .zocalo{
  position:relative; z-index:1;
  border-top:1px solid var(--linea);
  background:linear-gradient(180deg, rgba(12,16,19,.5), rgba(12,16,19,.86));
  backdrop-filter:blur(3px);
}
/* Tres, no cuatro. La cuarta («4 recursos») obligaba a un rotulo de tres
   lineas al lado de otro de una, y una fila de cifras desalineadas no se lee
   como una fila de cifras. */
.cifras{
  display:grid; grid-template-columns:repeat(3,1fr); margin:0;
}
.cifra{
  padding:18px 4px 20px; position:relative; text-align:center;
}
.cifra+.cifra::before{
  content:''; position:absolute; left:0; top:22%; bottom:22%;
  width:1px; background:var(--linea);
}
.cifra .n{
  display:block; margin:0; font-size:clamp(24px,3.4vw,34px); font-weight:700;
  color:var(--blanco); font-variant-numeric:tabular-nums; line-height:1.05;
}
.cifra .q{
  display:block; font-size:11px; color:var(--tenue); text-transform:uppercase;
  letter-spacing:.12em; margin-bottom:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media(max-width:860px){
  .portada{padding-top:52px}
  .portada > .envoltorio{padding-right:20px; padding-bottom:44px}
  /* El `nowrap` que impide que el antetitulo se parta en dos en el escritorio
     lo saca de la pantalla en un movil. Aqui se le deja partir. */
  .portada > .envoltorio .antetitulo{
    white-space:normal; display:flex; align-items:flex-start;
    font-size:11px; letter-spacing:.14em;
  }
  .portada > .envoltorio .antetitulo::before{margin-top:.55em}
  /* En movil el mapa vuelve detras del texto —no hay ancho para dos columnas—
     pero muy tenue y anclado abajo, donde no compite con el titular. */
  .mundo-fondo{
    right:-30%; top:auto; bottom:-6%; transform:none;
    width:170%; opacity:.30;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 40%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 40%);
    -webkit-mask-composite:source-over; mask-composite:add;
  }
  /* Las tres siguen en linea. Con dos columnas, la tercera se quedaba sola en
     una segunda fila pegada a la izquierda, que parece un fallo de maquetado y
     no una decision. Son cifras cortas: caben. */
  .cifras{grid-template-columns:repeat(3,1fr)}
  .cifra{padding:14px 2px 16px}
  .cifra .n{font-size:clamp(20px,6vw,28px)}
  .cifra .q{font-size:9.5px; letter-spacing:.08em; white-space:normal}
}

/* ============================================================== CRONICA ===
   La pagina de una temporada terminada. Es la unica de la web que existe para
   compartirse, asi que el mapa manda: ocupa todo el ancho del panel y los
   mandos van debajo, pequeños, como los de un video.

   `aspect-ratio` en vez de una altura fija: el mapa es de 2880x1442, y con una
   altura fija en movil salian doscientos pixeles de nada a los lados. */
.cronica-mapa{
  width:100%; aspect-ratio:2880/1442; background:var(--grafito);
  overflow:hidden; display:block;
}
.cronica-mapa svg{width:100%; height:100%; display:block}
/* Las transiciones van en el SVG y no en JS: una provincia que cambia de dueño
   se funde al color nuevo en vez de dar un salto, y no cuesta ni una linea de
   codigo por fotograma. 180 ms es menos que el paso de la animacion (220 ms),
   asi que nunca hay dos fundidos encima. */
.cronica-mapa path{transition:fill .18s linear}
@media (prefers-reduced-motion: reduce){
  .cronica-mapa path{transition:none}
}

.cronica-mandos{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-top:1px solid var(--linea);
}
.cronica-mandos input[type=range]{accent-color:var(--ambar); min-width:0}
.cronica-hora{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  color:var(--tenue); min-width:9ch; text-align:right;
}
/* La forma de la temporada de un vistazo: una tira por foto, del color de
   quien iba primero. Se lee antes de darle a reproducir. */
.cronica-barra{display:flex; height:6px; gap:0}
.cronica-barra i{flex:1 1 0; min-width:1px}

.cronica-leyenda{list-style:none; margin:0; padding:0}
.cronica-leyenda li{
  display:flex; align-items:center; gap:9px;
  padding:5px 0; border-bottom:1px solid var(--linea); font-size:13px;
}
.cronica-leyenda li:last-child{border-bottom:0}
.cronica-leyenda i{width:12px; height:12px; flex:0 0 auto; border-radius:2px}
.cronica-leyenda .nm{flex:1; min-width:0}
.cronica-leyenda .n{font-variant-numeric:tabular-nums; color:var(--tenue)}
.cronica-leyenda .pj{
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ambar); margin-left:6px;
}
.cronica-leyenda .neutral .nm{color:var(--tenue)}
.cronica-hitos{margin:0; padding-left:20px; font-size:13px; line-height:1.6}
.cronica-hitos li{margin-bottom:8px}

@media (max-width:640px){
  .cronica-mandos{flex-wrap:wrap}
  .cronica-hora{min-width:auto}
}

/* ============================================================= FACCIONES ==
   Siete tiras de color entre dos secciones grises. La portada no enseñaba lo
   mas distintivo que tiene el juego —siete rivales que pelean distinto— y un
   parrafo mas no lo iba a arreglar: hace falta verlo. */
.facciones{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
}
.facciones li{
  position:relative;
  display:grid; align-items:baseline; gap:4px 16px;
  /* Columnas FIJAS. Con `auto` cada fila medía lo suyo y las tres columnas
     bailaban de una fila a otra: una tabla que no se alinea no es una tabla. */
  /* Y una columna delante para la silueta de su tropa de cabecera: la dibuja
     el propio juego, asi que es literalmente lo que te vas a encontrar. */
  grid-template-columns:56px 196px 232px 1fr;
  padding:12px 14px 12px 20px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--color) 13%, transparent) 0%,
    color-mix(in srgb, var(--color) 3%, transparent) 24%, transparent 62%);
  border:1px solid var(--linea);
  border-left:0;
  border-radius:0 var(--radio) var(--radio) 0;
}
/* La barra de color es el elemento: identifica la faccion de un vistazo y es
   el mismo color con el que veras sus provincias en el mapa. */
.facciones li::before{
  content:''; position:absolute; left:0; top:-1px; bottom:-1px; width:4px;
  background:var(--color);
}
.facciones .tropa{
  grid-row:1 / -1; align-self:center; justify-self:center;
  width:50px; height:50px; opacity:1;
  /* Se tiñe del color de la faccion: la silueta viene en gris del juego y en
     color deja de ser un icono y pasa a ser SU tropa. */
  filter:drop-shadow(0 0 0 var(--color));
}
.facciones li b{color:var(--blanco); font-size:15.5px; letter-spacing:.01em}
.facciones .doctrina{
  /* El color de la faccion, aclarado hacia el color del texto. Los siete
     estan elegidos para pintar provincias en un mapa, no para leerse a
     12,5 px: en crudo, el mas oscuro daba 4,33:1 sobre el fondo y la prueba de
     contraste lo tumbaba por diecisiete centesimas. Mezclarlo con el blanco
     roto conserva la identidad —sigue siendo SU color— y sube todos a AA.
     `filter:brightness()` no valia: aclara igual al claro que al oscuro. */
  color:color-mix(in srgb, var(--color) 58%, var(--blanco));
  font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.facciones .que{color:var(--tenue); font-size:13.5px; line-height:1.5}
.facciones li.cargando{
  grid-template-columns:1fr; --color:var(--acero); color:var(--tenue);
}
/* Menos hueco a la derecha en los paneles pequeños: con 74 px el parrafo se
   quedaba en un 60 % del ancho y se leia a cuatro palabras por linea. */
.rejilla.apoyos .panel.con-arte p{padding-right:56px}
.rejilla.apoyos .panel.con-arte .arte{width:112px; opacity:.42}
@media(max-width:760px){
  .facciones li{grid-template-columns:46px 1fr; gap:2px 12px}
  .facciones li b,.facciones .doctrina,.facciones .que{grid-column:2}
  .facciones .doctrina{white-space:normal}
}

/* Un estado vacio dice QUE falta y QUE hacer. Un "no hay nada" a secas deja
   al visitante sin saber si esta roto o si es asi. */
/* La tira de cifras de un perfil. Seis datos en una linea se comparan de un
   vistazo; repartidos en tres cajas hay que leerlos de tres en tres. */
.tira-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:4px 0;padding:18px 8px}
.cifra-perfil{text-align:center;padding:6px 10px;position:relative}
.cifra-perfil+.cifra-perfil::before{
  content:'';position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:var(--linea)}
.cifra-perfil .k{display:block;font-size:11px;color:var(--tenue);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:2px}
.cifra-perfil .v{display:block;font-size:26px;font-weight:700;color:var(--blanco);
  font-variant-numeric:tabular-nums;line-height:1.15}
.cifra-perfil.destacada .v{color:var(--ambar)}

.vacio,.chat-vacio{text-align:center;color:var(--tenue);padding:44px 22px}
.vacio h3,.chat-vacio h3{color:var(--texto);margin-bottom:.4em}
.chat-vacio{display:flex;flex-direction:column;justify-content:center;height:100%;
  max-width:380px;margin:0 auto}
.chat-vacio p{font-size:13px;margin:0}
.vacio .marca-vacio,.chat-vacio .marca-vacio{
  display:block;width:44px;height:44px;margin:0 auto 14px;opacity:.4;
  border:2px solid var(--acero);border-radius:50%;position:relative}
.vacio .marca-vacio::after,.chat-vacio .marca-vacio::after{
  content:'';position:absolute;inset:12px;border:2px solid var(--acero);
  border-radius:50%;opacity:.6}

/* Esqueletos en vez de la palabra "Cargando". Ocupan el sitio que va a ocupar
   el contenido, asi que la pagina no pega un salto al llegar los datos. */
.cargando{color:var(--tenue);padding:20px 0}
.hueso{background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 37%,
  var(--panel) 63%);background-size:400% 100%;
  animation:brillar 1.4s ease infinite;border-radius:var(--radio)}
@keyframes brillar{0%{background-position:100% 0}100%{background-position:-100% 0}}
.hueso.linea{height:12px;margin:0 0 9px}
.hueso.titulo{height:19px;width:52%;margin:0 0 13px}
.hueso.tarjeta{height:212px}

footer{border-top:1px solid var(--linea);padding:26px 0;color:var(--tenue);font-size:13px}
footer .envoltorio{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer nav{margin-left:auto;display:flex;gap:16px}

/* ============================================================== MOVIL ====
   Lo que se rompia en 390 px, y por que.

   La barra tenia `height:58px` con los enlaces en una sola fila. Con sesion
   iniciada son SIETE enlaces y no caben: envolvian a tres lineas dentro de una
   caja de 58 px de alto y se salian por encima del titulo de la pagina. Aqui
   la barra pasa a dos filas —marca arriba, navegacion debajo— y la navegacion
   se desplaza en horizontal en vez de envolver. Sin boton de menu: una tira
   deslizable no esconde nada y no necesita JavaScript. */
@media(max-width:760px){
  .barra .envoltorio{height:auto;min-height:52px;flex-wrap:wrap;gap:0;
    padding-top:8px;padding-bottom:8px}
  .marca{flex:1 1 100%}
  nav.menu{
    /* Sin margenes negativos: el relleno del envoltorio cambia en movil y un
       -20px contra un padding de 14px desbordaba la pagina 6 px por lado. */
    flex:1 1 100%;margin:6px 0 0;padding:0 0 2px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  nav.menu::-webkit-scrollbar{display:none}
  nav.menu a,nav.menu button{flex:0 0 auto;white-space:nowrap}
  /* Un desvanecido en el borde derecho: sin el, la tira deslizable parece un
     menu recortado y nadie descubre que hay mas enlaces detras. */
  nav.menu{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  }

  /* Cabeceras: el titulo y su pista dejan de pelearse por la misma linea. */
  .cab-seccion{flex-wrap:wrap;gap:4px 12px}
  .cab-seccion .pista{margin-left:0;flex-basis:100%}

  /* La etiqueta de estado baja debajo del titulo en vez de comerse la mitad
     del ancho y dejar la descripcion en columna de cuatro palabras. */
  .tarjeta-partida .arriba{flex-wrap:wrap-reverse;justify-content:flex-start}
  .tarjeta-partida .ancho{flex:1 1 100%}

  .cifras{gap:10px}
  .cifra .n{font-size:26px}
  .cifra .q{font-size:10.5px;letter-spacing:.06em}
  .datos{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}
  .dato.texto{grid-column:span 2}
  main{padding:20px 0 56px}
  .envoltorio{padding:0 14px}
  h1{font-size:clamp(24px,7vw,32px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important}
  html{scroll-behavior:auto}
  /* El punto de "en curso" y el brillo del esqueleto son decorativos: se
     quedan quietos y visibles, no invisibles. */
  .etiqueta.viva::before{opacity:1}
  .hueso{background:var(--panel2)}
}

/* ============================================ JERARQUIA EN «DE QUE VA» =====
   Seis paneles del mismo tamaño y el mismo gris se leen como una lista de
   especificaciones, no como un argumento. Dos de peso arriba —las dos ideas
   que de verdad separan esto de un juego de clicar— y el resto de apoyo.    */
.rejilla.destacados{margin-bottom:16px}
.panel.destacado{
  padding:26px 26px 22px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,157,46,.055) 0%, transparent 58%),
    linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
  border-color:#36434c;
}
.panel.destacado h3{font-size:20px; margin-bottom:.55em; line-height:1.25}
.panel.destacado p{font-size:15px}
/* El numero de orden, grande y muy tenue, en la esquina. Es el gesto que dice
   «esto es lo primero» sin necesidad de un titulo que lo diga. */
/* Una chapa pequeña sobre el titular, no una marca de agua gigante detras.
   Se probaron las dos: a 52 px al lado del titulo el numero se leia como una
   palabra mas del mismo renglon, y a 74 px detras del apunte competia con el
   texto que tenia encima. Pequeño y arriba no compite con nada y sigue
   diciendo lo unico que tiene que decir: que estos dos van primero. */
.panel.destacado .marca-num{
  display:block; margin-bottom:10px;
  font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.22em;
  color:var(--ambar); opacity:.85;
}
/* El apunte es un dato medido, no una promesa. Va separado por una regla
   porque es de otra clase que el parrafo de arriba: aquello es lo que hace el
   juego, esto es lo que salio al medirlo. */
.panel.destacado .apunte{
  margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--linea);
  font-size:13px; color:var(--tenue); font-style:italic; position:relative;
}
.rejilla.apoyos .panel h3{font-size:16px}
.rejilla.apoyos .panel p{font-size:14px; margin-bottom:0}

/* La llamada final, en dos columnas: el texto no tiene por que estar encima
   del boton, y en una sola linea la pagina termina en vez de desinflarse. */
.panel.llamada{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap; padding:30px 30px;
  margin-top:46px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(255,157,46,.07) 0%, transparent 60%),
    linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
}
.panel.llamada .texto{flex:1 1 340px}
.panel.llamada h2{margin-bottom:.35em}
.panel.llamada p{margin:0; color:var(--tenue); max-width:52ch; font-size:14.5px}
.panel.llamada .acciones{display:flex; gap:12px; flex-wrap:wrap}

/* ------------------------------------------------------------- botones ++ */
/* `grande` para la llamada principal y `fantasma` para la secundaria. Antes
   las dos eran del mismo tamaño y la una al lado de la otra: dos botones
   iguales no son una jerarquia, son una pregunta. */
.btn.grande{padding:13px 26px; font-size:15px}
.btn.fantasma{
  background:transparent; border-color:#3c4952; color:var(--texto);
}
.btn.fantasma:hover{
  background:rgba(255,255,255,.04); border-color:var(--acero); color:var(--blanco);
}

/* ================================================ EL PIE, SIEMPRE ABAJO ===
   Una pagina con poco contenido —la clasificacion antes de que cierre la
   primera temporada, el lobby sin partidas— dejaba el pie flotando a media
   altura con medio monitor de vacio negro debajo. No es que sobrara espacio:
   es que parecia que la pagina se habia cortado al cargar. */
body{display:flex; flex-direction:column}
/* `width:100%` hace falta de verdad. Varias paginas usan `<main class="envoltorio">`
   —el propio main es el contenedor centrado, con `max-width` y margenes auto— y
   como hijo de un flex en columna esos margenes auto anulan el estirado: el
   main pasaba a medir lo que midiera su contenido y la pagina entera aparecia
   encogida y descentrada. Con el ancho al 100 %, el `max-width` del envoltorio
   sigue centrandolo dentro. */
body > main{flex:1 0 auto; width:100%}
body > footer{flex:none}

/* =============================================== UNA TARJETA SOLA EN FILA ==
   La rejilla usa `auto-fill` a proposito —con `auto-fit`, una sola tarjeta se
   estira a los 1080 px y queda ridicula— pero el efecto secundario era la otra
   mitad de la fila vacia, que se lee como un hueco donde falta algo.

   Cuando la tarjeta es la unica, se le da el ancho entero Y se tumba: los
   datos a la izquierda, el boton a la derecha. Ancha es rara si sigue siendo
   una columna; tumbada es una barra, y una barra ancha es normal. */
.rejilla > .tarjeta-partida:only-child{
  grid-column:1 / -1;
  display:grid; gap:10px 28px; align-items:center;
  /* La columna del medio tiene que caber CUATRO datos en una linea. Con la
     primera proporcion se partian en dos filas y quedaba un hueco enorme en
     el centro de la tarjeta, que es peor que la fila a medias que se venia a
     arreglar. */
  grid-template-columns:minmax(230px,1fr) minmax(360px,1.5fr) auto;
  grid-template-areas:'titulo datos boton' 'etiq datos boton';
}
.rejilla > .tarjeta-partida:only-child .arriba{grid-area:titulo; margin:0; align-self:end}
.rejilla > .tarjeta-partida:only-child .etiquetas{grid-area:etiq; align-self:start; margin:0}
.rejilla > .tarjeta-partida:only-child .cupo{display:none}
.rejilla > .tarjeta-partida:only-child .datos{
  grid-area:datos; margin:0;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
}
.rejilla > .tarjeta-partida:only-child .btn{grid-area:boton; align-self:center}
@media(max-width:820px){
  .rejilla > .tarjeta-partida:only-child{
    grid-template-columns:1fr;
    grid-template-areas:'titulo' 'etiq' 'datos' 'boton';
  }
  .rejilla > .tarjeta-partida:only-child .cupo{display:block}
}

/* ==================================================== FILAS DE DATOS ======
   `Facciones libres` partia en dos lineas al lado de `Lleva`, y `dentro de 59
   minutos` al lado de `14:50`: la fila quedaba con los rotulos a distinta
   altura y los valores desalineados. Alineando arriba y reservando el alto de
   dos lineas para el rotulo, la fila se lee como una fila aunque uno de los
   rotulos sea largo. */
.datos{align-items:start}
.dato .k{display:block; min-height:2.1em; line-height:1.25}
.dato .v{display:block; line-height:1.3}

/* ================================================== TITULO DE PAGINA ======
   El titulo de la pagina y el de una seccion llevaban exactamente el mismo
   galon —la barra ambar— asi que «Calendario» y «Martes, 25 de agosto» pesaban
   igual y no se sabia cual contenia a cual. El de pagina sube de cuerpo, se
   queda con la barra, y el de seccion la cambia por una regla mas corta y
   tenue. */
.cab-pagina{margin-bottom:26px}
.cab-pagina h1{font-size:clamp(26px,4.2vw,38px)}
.cab-seccion h2::before{background:var(--acero); opacity:.7}
.cab-seccion h2{font-size:19px; letter-spacing:.06em}

/* ================================================== ARTE Y ALEGRIA =======
   El juego dibuja sus propios edificios en SVG isometrico —`ferrum/js/arte.js`,
   catorce edificios con cuatro estados cada uno— y la web no usaba ninguno.
   Una landing de un juego con ilustraciones propias sin una sola ilustracion.
   `tools/arte_web.js` los saca a `web/arte/*.svg` y aqui se colocan.

   Van con `alt=""` y `aria-hidden`: son decoracion, no informacion. Quien
   navegue con lector de pantalla no se pierde nada, y quien mire la pagina ve
   una refineria con su antorcha en vez de otro rectangulo gris.             */
.panel.con-arte{position:relative; overflow:hidden}
.panel.con-arte .arte{
  position:absolute; right:-14px; bottom:-18px;
  width:132px; height:auto; opacity:.5;
  pointer-events:none; user-select:none;
  /* Se apaga hacia el borde para que no compita con el texto ni parezca un
     recorte pegado encima. */
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 60% 40%, #000 30%, transparent 82%);
  mask-image:radial-gradient(ellipse 80% 80% at 60% 40%, #000 30%, transparent 82%);
  transition:opacity .18s ease, transform .18s ease;
}
.panel.con-arte:hover .arte{opacity:.78; transform:translate(-4px,-4px) scale(1.04)}
.panel.destacado.con-arte .arte{width:188px; right:-20px; bottom:-24px; opacity:.55}
/* El texto no se mete debajo del dibujo. Sin esto la ultima linea del parrafo
   pasaba por encima de la chimenea de la refineria y no se leia ninguna de las
   dos cosas. */
.panel.con-arte h3,.panel.con-arte p{position:relative; z-index:1}
.rejilla.apoyos .panel.con-arte p{padding-right:74px}
.panel.destacado.con-arte .apunte{padding-right:130px}
@media(max-width:520px){
  .panel.con-arte .arte{width:96px; opacity:.32}
  .rejilla.apoyos .panel.con-arte p{padding-right:0}
  .panel.destacado.con-arte .apunte{padding-right:0}
}

/* ================================================== LA GALERIA ===========
   Capturas de una partida DE VERDAD —las saca `tools/probar.js` jugando— y no
   un montaje. La primera manda: el mapamundi es lo que explica el juego de un
   vistazo, y las otras tres van debajo a un tercio.                        */
.galeria{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.galeria figure{
  margin:0; grid-column:span 1;
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
  border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
.galeria figure:hover{border-color:var(--acero); transform:translateY(-2px)}
.galeria figure.grande{grid-column:1 / -1}
.galeria img{
  display:block; width:100%; height:auto;
  border-bottom:1px solid var(--linea);
  /* Las capturas vienen de una pantalla oscura y sobre el panel oscuro se
     confunden con el fondo: un pelin de contraste las separa sin falsearlas. */
  filter:contrast(1.04) saturate(1.05);
}
/* Las tres pequeñas se recortan a la MISMA proporcion. Vienen de zonas
   distintas de la interfaz y con alturas distintas, y sin esto los pies de
   foto quedaban a tres alturas diferentes: tres tarjetas iguales con el texto
   descuadrado se lee como un fallo, no como una galeria. */
.galeria figure:not(.grande) img{aspect-ratio:16/10; object-fit:cover; object-position:left top}
.galeria figcaption{
  padding:12px 14px 14px; font-size:13.5px; line-height:1.55; color:var(--tenue);
}
.galeria figcaption b{color:var(--texto); font-weight:600}
@media(max-width:900px){
  .galeria{grid-template-columns:1fr}
  .galeria figure.grande{grid-column:1}
}

/* ============================================ COLOR EN LOS RECURSOS ======
   El juego tiene un color por recurso —acero, petroleo, uranio, poblacion— y
   la web era gris con un ambar. Las cifras del zocalo se quedan en blanco
   (son numeros, no recursos) pero el zocalo gana una linea de color arriba
   que es, literalmente, la barra de dominacion del juego.                  */
.portada .zocalo{position:relative}
.portada .zocalo::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg,
    #e63946 0 14%, #2a9d8f 14% 28%, #4b90c4 28% 42%, #e9c46a 42% 56%,
    #c1666b 56% 70%, #5d9c3c 70% 84%, #8e7dbe 84% 100%);
  opacity:.75;
}

/* ------------------------------------------------------------- cambios --
   La pagina /cambios. La escribe `servidor/tools/generar_cambios.cjs` desde
   `CHANGELOG.md`, asi que aqui solo hay estilo: si algo se ve raro, casi
   siempre es que al CHANGELOG le falta una linea en blanco. */
.cambios{max-width:760px}
.cambio{border-left:2px solid var(--linea);padding:0 0 28px 22px;margin:0;position:relative}
.cambio:last-child{padding-bottom:6px}
/* El punto de la linea de tiempo. Va sobre el borde, no dentro: asi las
   entradas se leen como una columna y no como tarjetas sueltas. */
.cambio::before{content:"";position:absolute;left:-6px;top:9px;width:10px;height:10px;
  border-radius:50%;background:var(--ambar);box-shadow:0 0 0 4px var(--grafito)}
.cambio h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-size:clamp(18px,2.4vw,23px);margin:0 0 14px}
.cambio h2 time{color:var(--tenue);font-size:13px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.cambio h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);margin:20px 0 8px;font-weight:600}
.cambio p{margin:0 0 12px;line-height:1.62}
.cambio ul{margin:0 0 14px;padding-left:20px}
.cambio li{margin:0 0 8px;line-height:1.6}
.cambio code{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1px 5px;font-size:.88em}
.cambio blockquote{margin:0 0 16px;padding:12px 16px;background:var(--panel);
  border:1px solid var(--linea);border-left:3px solid var(--ambar);
  border-radius:var(--radio);color:var(--texto);line-height:1.6}
/* El ancla de cada entrada: invisible hasta que pasas por encima, porque esta
   ahi para copiarla, no para leerla. */
.cambio .ancla{color:var(--tenue);text-decoration:none;opacity:0;font-weight:400;
  transition:opacity .13s ease}
.cambio h2:hover .ancla,.cambio .ancla:focus{opacity:1}
.cambio.senalada::before{background:var(--foco);box-shadow:0 0 0 4px var(--grafito),0 0 0 7px rgba(255,190,92,.25)}
@media (max-width:560px){
  .cambio{padding-left:16px}
  .cambio h2{gap:6px}
}