/* =============================================================================
   TORMENTA NEGRA OPS · estilo común de la web del juego
   -----------------------------------------------------------------------------
   Es el estilo «Carmesí» del menú del juego: negro carbón, fibra de carbono,
   esquinas rojas y la letra Rajdhani. Todas las páginas de /juego cargan este
   archivo; lo propio de una página va en su propio .css (la portada, en
   portada.css). Así la cabecera, los botones y las monedas se ven igual en
   todas partes, que es justo lo que le faltaba a la web del original (dos marcas
   peleándose, cajas blancas y negras mezcladas).

   Índice:
     1. Letra            7. Etiquetas y rarezas     13. Tablas
     2. Colores          8. Cabecera y menú         14. Pie
     3. Base             9. Cabeza de página        15. Detalles vivos
     4. Marcos          10. Secciones y tarjetas    16. Adaptación al móvil
     5. Botones         11. Formularios
     6. Monedas         12. Avisos y estados
   ========================================================================== */

/* 1. LETRA -------------------------------------------------------------------
   Rajdhani recortada a latín en woff (20 KB cada una en vez de 400 KB del ttf
   completo, que trae devanagari). «swap» para que el texto se lea desde el
   primer momento aunque la letra tarde. */
@font-face { font-family: "Rajdhani"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/juego/fuentes/Rajdhani-SemiBold.woff") format("woff"), url("/juego/fuentes/Rajdhani-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/juego/fuentes/Rajdhani-Bold.woff") format("woff"), url("/juego/fuentes/Rajdhani-Bold.ttf") format("truetype"); }

/* 2. COLORES ----------------------------------------------------------------
   Los de la propuesta A de monedas (colores.txt) y los del menú Carmesí. */
:root {
  --negro: #060608;
  --fondo: #09090c;
  --carbon: #0d0f12;
  --panel: #13151a;
  --panel-2: #1a1d23;
  --panel-3: #22262e;
  --linea: rgba(255,255,255,.07);
  --linea-2: rgba(255,255,255,.14);
  --carmesi: #d91f2b;
  --carmesi-claro: #ff3d48;
  --carmesi-oscuro: #6e0c13;
  --oro: #ffc446;
  --oro-claro: #ffe29a;
  --oro-titulo: #ffc850;
  --cash: #3ce68c;
  --cash-titulo: #50eb96;
  --no-alcanza: #ff5c4a;
  --azul: #5b9bff;
  --texto: #eceef2;
  --texto-2: #a9aeb8;
  --texto-3: #8b909b; /* más claro que antes (#70757f): las etiquetas pequeñas en mayúsculas no se leían bien */
  --raro: #4f9cff;
  --epico: #b56cff;
  --legendario: #ffa12e;
  --mitico: #ff4a5a;
  --ancho: 1400px;
  --gutter: 32px;
  --alto-cab: 76px;
  color-scheme: dark;
}

/* 3. BASE -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--negro); scroll-padding-top: calc(var(--alto-cab) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: "Rajdhani", system-ui, "Segoe UI", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.45;
  color: var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-color: var(--carbon);
  /* Resplandor carmesí arriba y trama fina de fibra encima del carbón. */
  background-image:
    radial-gradient(1200px 600px at 50% -200px, rgba(217,31,43,.10), transparent 70%),
    repeating-conic-gradient(from 45deg, #111317 0 25%, #0b0d10 0 50%);
  background-size: auto, 6px 6px;
}
body > main { flex: 1 0 auto; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
::selection { background: var(--carmesi); color: #fff; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* Envase centrado: todo el contenido de ancho fijo va dentro de .env */
.env { width: min(var(--ancho), calc(100% - var(--gutter) * 2)); margin: 0 auto; }
.env.estrecho { width: min(980px, calc(100% - var(--gutter) * 2)); }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mayus { text-transform: uppercase; letter-spacing: .06em; }
.ico { width: 20px; height: 20px; flex: none; }
.num { font-variant-numeric: tabular-nums; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--carmesi); color: #fff; font-weight: 700; }
.saltar:focus { top: 12px; }

/* Fibra de carbono de verdad (la del panel del menú), para fondos de panel. */
.carbono {
  background-color: #121216;
  background-image:
    linear-gradient(27deg, #0f0f12 5px, transparent 5px),
    linear-gradient(207deg, #0f0f12 5px, transparent 5px),
    linear-gradient(27deg, #19191e 5px, transparent 5px),
    linear-gradient(207deg, #19191e 5px, transparent 5px),
    linear-gradient(90deg, #141418 10px, transparent 10px),
    linear-gradient(#16161b 25%, #131317 25%, #131317 50%, transparent 50%, transparent 75%, #1b1b21 75%, #1b1b21);
  background-size: 20px 20px;
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
}

/* 4. MARCOS -------------------------------------------------------------------
   .marco = panel con las cuatro esquinas carmesí, como los del menú del juego.
   .cab-panel = su barra de título (línea roja abajo y rayado a la derecha). */
.marco { position: relative; background: linear-gradient(180deg, rgba(26,29,35,.94), rgba(16,18,22,.96)); border: 1px solid var(--linea); }
.marco::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
  --c: var(--carmesi); --l: 16px; --g: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--g) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--g) var(--l) no-repeat;
}
.marco.oro::after { --c: var(--oro); }
.panel { background: linear-gradient(180deg, #16181d, #101216); border: 1px solid var(--linea-2); }
.cab-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 18px;
  border-bottom: 1px solid var(--carmesi);
  background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 60%),
              repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255,255,255,.035) 5px 6px) right / 90px 100% no-repeat;
}
.cab-panel h2, .cab-panel h3 { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1.1; }
.cab-panel small { color: var(--texto-3); font-weight: 600; letter-spacing: .04em; margin-left: 6px; }
.cab-panel a { font-size: 14px; color: var(--texto-2); }
.cab-panel a:hover { color: var(--carmesi-claro); }
.cuerpo-panel { padding: 18px; }

/* 5. BOTONES -------------------------------------------------------------------
   .btn           base (chaflán en dos esquinas, como los del juego)
   .btn-rojo      el principal carmesí («INICIO RÁPIDO» del lobby)
   .btn-linea     el secundario, borde fino
   .btn-grande / .btn-chico / .btn-bloque (ancho completo)
   .bc            el botón dorado de compra con la moneda y la cifra (propuesta A)
   ------------------------------------------------------------------------------ */
.btn {
  --chaflan: 10px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 26px; font-weight: 700; font-size: 17px; line-height: 1;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; cursor: pointer; user-select: none;
  clip-path: polygon(var(--chaflan) 0, 100% 0, 100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%, 0 100%, 0 var(--chaflan));
  transition: filter .15s, transform .15s, box-shadow .15s, color .15s, background .15s;
}
.btn .ico { width: 20px; height: 20px; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.apagado { filter: grayscale(.8) brightness(.6); cursor: not-allowed; pointer-events: none; }
.btn-rojo {
  color: #fff; overflow: hidden; isolation: isolate; text-shadow: 0 1px 1px rgba(0,0,0,.5);
  background: linear-gradient(180deg, #ff4a4f 0%, #e11d2a 46%, #b10d19 54%, #cf1422 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.3);
}
/* Destello que cruza el botón de vez en cuando: dice «aquí» sin gritar. */
.btn-rojo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; left: -120px; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: cruzar 5.5s ease-in-out 1.5s infinite;
}
@keyframes cruzar { 0% { left: -120px; } 32%, 100% { left: calc(100% + 60px); } }
.btn-rojo:hover { filter: brightness(1.12); }
.sombra-roja { display: inline-flex; filter: drop-shadow(0 0 18px rgba(230,25,43,.5)) drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.btn-linea { color: var(--texto); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px var(--linea-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-linea:hover { box-shadow: inset 0 0 0 1px var(--carmesi-claro); color: #fff; background: rgba(217,31,43,.12); }
.btn-oscuro { color: var(--texto); background: rgba(8,9,11,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-oscuro:hover { box-shadow: inset 0 0 0 1px var(--oro); color: #fff; }
.btn-grande { --chaflan: 14px; height: 62px; padding: 0 40px; font-size: 22px; letter-spacing: .1em; }
.btn-grande .ico { width: 24px; height: 24px; }
.btn-chico { --chaflan: 8px; height: 40px; padding: 0 18px; font-size: 15px; }
.btn-bloque { display: flex; width: 100%; }
.btn .dos-lineas { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.btn .dos-lineas small { font-size: 13px; letter-spacing: .05em; color: var(--texto-2); text-transform: none; font-weight: 600; }
.enlace { color: var(--texto); border-bottom: 1px solid var(--carmesi); padding-bottom: 1px; }
.enlace:hover { color: var(--oro); }

/* Botón dorado de compra. Las piezas son las del juego (9 cortes a 2x):
   placa (normal / encima / pulsado / apagado), pozo negro con la cifra,
   resplandor ámbar y destello que cruza. Estructura:
     <a class="bc" href="…"><span class="bc-destello"></span>
       <span class="bc-etq"><small>Alquilar</small>7 días</span>
       <span class="bc-pozo"><img src="/juego/img/monedas/cash.webp" alt="Cash">1.500</span></a>
   O con O7.botonDorado({...}) de comun.js. */
.bc { position: relative; display: inline-flex; align-items: stretch; height: 56px; min-width: 240px; isolation: isolate; cursor: pointer; user-select: none; text-decoration: none; }
.bc::before { content: ""; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 30px 22px 24px 22px; border-image: url("/juego/img/monedas/boton_placa_normal.webp") 60 44 48 44 fill stretch; }
.bc::after { content: ""; position: absolute; inset: -8px; z-index: -2; border-style: solid; border-width: 38px 30px 32px 30px; border-image: url("/juego/img/monedas/boton_resplandor.webp") 76 60 64 60 fill stretch; opacity: .55; transition: opacity .2s; }
.bc:hover::before { border-image-source: url("/juego/img/monedas/boton_placa_encima.webp"); }
.bc:hover::after { opacity: 1; }
.bc:active::before { border-image-source: url("/juego/img/monedas/boton_placa_pulsado.webp"); }
.bc:active .bc-etq, .bc:active .bc-pozo > * { transform: translateY(1px); }
.bc-etq {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 12px 0 18px;
  color: #221102; font-weight: 700; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 1.2px 0 rgba(255,226,150,.59), 0 -.6px 0 rgba(90,45,0,.47);
}
.bc-etq small { font-size: 13px; letter-spacing: .06em; margin-bottom: 2px; }
.bc-pozo {
  position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 47%; padding: 0 20px 0 14px;
  color: #fffaee; font-weight: 700; font-size: 26px; line-height: 1; white-space: nowrap; text-shadow: .8px 1.2px 0 rgba(0,0,0,.78);
}
.bc-pozo::before { content: ""; position: absolute; inset: 0 0 0 -4px; z-index: -1; border-style: solid; border-width: 30px 24px 24px 20px; border-image: url("/juego/img/monedas/boton_pozo.webp") 60 48 48 40 fill stretch; }
.bc-pozo img { height: 35px; width: 35px; margin-right: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.bc-pozo .mon { font-size: 15px; color: #d8d2c4; }
.bc-destello { position: absolute; top: 0; left: 11px; width: 80px; height: 100%; background: url("/juego/img/monedas/boton_destello.webp") center / 80px 100% no-repeat; opacity: 0; pointer-events: none; }
.bc:hover .bc-destello { animation: destello .7s ease-out; }
@keyframes destello { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--w, 240px) - 92px)); } }
.bc.chico { height: 46px; min-width: 0; }
.bc.chico::before { border-width: 25px 18px 20px 18px; }
.bc.chico .bc-etq { font-size: 18px; padding: 0 10px 0 14px; }
.bc.chico .bc-etq small { font-size: 12.5px; }
.bc.chico .bc-pozo { font-size: 21px; padding: 0 16px 0 10px; }
.bc.chico .bc-pozo img { height: 28px; width: 28px; }
.bc.chico .bc-pozo::before { border-width: 25px 20px 20px 17px; }
.bc.bloque { display: flex; width: 100%; }
/* Solo muestra un precio (no se compra desde aquí): sin brillo al pasar por encima. */
.bc.precio { cursor: default; }
.bc.precio:hover::before { border-image-source: url("/juego/img/monedas/boton_placa_normal.webp"); }
.bc.precio::after, .bc.precio:hover::after { opacity: .35; }
.bc.precio:hover .bc-destello { animation: none; }
/* Apagado: no alcanza el saldo o no está a la venta. Candado y cifra en rojo. */
.bc.apagado { cursor: not-allowed; pointer-events: none; }
.bc.apagado::before { border-image-source: url("/juego/img/monedas/boton_placa_apagado.webp"); }
.bc.apagado::after { display: none; }
.bc.apagado .bc-etq { color: #969aa2; text-shadow: 0 1.2px 0 rgba(0,0,0,.63), 0 -.6px 0 rgba(255,255,255,.12); }
.bc.apagado .bc-etq::before { content: ""; width: 20px; height: 20px; margin-bottom: 2px; background: url("/juego/img/monedas/candado.webp") center / contain no-repeat; }
.bc.apagado .bc-pozo::before { border-image-source: url("/juego/img/monedas/boton_pozo_apagado.webp"); }
.bc.apagado .bc-pozo { color: var(--no-alcanza); }
.bc.apagado .bc-pozo img { filter: grayscale(1) brightness(.7); }

/* 6. MONEDAS ------------------------------------------------------------------
   Chips de saldo y de precio: cápsula con el canto de su color y la moneda
   saliendo por la izquierda, como la barra de saldo del juego.
     <span class="chip chip-oro"><img class="moneda" src="/juego/img/monedas/oro.webp" alt="Oro">12.300</span>
     <span class="chip chip-cash chico"><img class="moneda" src="/juego/img/monedas/cash.webp" alt="Cash">500</span>
   O con O7.chip('oro' | 'cash', cantidad, {chico, mas, href}). */
.chip {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 16px 0 36px; margin-left: 13px; isolation: isolate;
  font-weight: 700; font-size: 21px; line-height: 1; color: #fffcf4; text-shadow: 1px 1px 0 rgba(0,0,0,.86); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 17px 19px; border-image: url("/juego/img/monedas/chip_oro.webp") 30 34 fill stretch; }
.chip-cash::before { border-image-source: url("/juego/img/monedas/chip_cash.webp"); }
.chip > .moneda { position: absolute; left: -13px; top: 50%; height: 42px; width: 42px; transform: translateY(-50%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.chip-cash > .moneda { height: 44px; width: 44px; left: -14px; }
.chip .mas { width: 24px; height: 24px; margin-left: 10px; margin-right: -8px; }
a.chip:hover { filter: brightness(1.15); }
.chip.chico { height: 26px; font-size: 16px; padding: 0 11px 0 25px; margin-left: 9px; }
.chip.chico::before { border-width: 12px 14px; }
.chip.chico > .moneda { height: 30px; width: 30px; left: -9px; }
.chip.chico .mas { width: 18px; height: 18px; margin-left: 7px; margin-right: -5px; }
.chip.oculto-saldo { color: var(--texto-2); letter-spacing: .1em; }
/* Moneda suelta dentro de un texto: «cuesta <img class="moneda-txt"> 1.500». */
.moneda-txt { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.3em; margin: 0 .1em; }
.txt-oro { color: var(--oro-titulo); }
.txt-cash { color: var(--cash-titulo); }

/* 7. ETIQUETAS Y RAREZAS ---------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--carmesi); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.tag.evento { background: #c8161f; }
.tag.tienda { background: #139655; }
.tag.novedad { background: #2f6fd6; }
.tag.objetos { background: #b27a0c; }
.tag.mantenimiento { background: #5d626d; }
.tag.ejemplo { background: transparent; color: var(--oro); box-shadow: inset 0 0 0 1px rgba(255,196,70,.5); clip-path: none; }
.fecha { font-size: 13.5px; color: var(--texto-3); letter-spacing: .06em; }
.rar { font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.rar.raro { color: var(--raro); } .rar.epico { color: var(--epico); } .rar.legendario { color: var(--legendario); } .rar.mitico { color: var(--mitico); }
.antetitulo { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--carmesi-claro); }
.antetitulo::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }

/* 8. CABECERA Y MENÚ -----------------------------------------------------------
   La pinta comun.js en todas las páginas. En la portada va transparente sobre
   el póster (body.con-poster) y se vuelve sólida al bajar (.solida). */
.hueco-cabecera { height: var(--alto-cab); }
.con-poster .hueco-cabecera { height: 0; }
.cabecera {
  position: sticky; top: 0; z-index: 50; height: var(--alto-cab);
  background: linear-gradient(180deg, rgba(8,9,11,.97), rgba(8,9,11,.9)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea); background-origin: border-box; transition: background .3s, box-shadow .3s, height .3s;
}
.cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--carmesi) 30%, var(--carmesi) 70%, transparent); opacity: .7; }
.con-poster .cabecera { position: fixed; left: 0; right: 0; background: linear-gradient(180deg, rgba(4,4,6,.82), rgba(4,4,6,0)); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.con-poster .cabecera::after { opacity: 0; }
.con-poster .cabecera.solida { background: rgba(8,9,11,.93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.5); border-bottom-color: var(--linea); }
.con-poster .cabecera.solida::after { opacity: .7; }
.cabecera .env { height: 100%; display: flex; align-items: center; gap: 22px; }
.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo svg { width: 44px; height: 44px; }
.logo .nombre { display: flex; flex-direction: column; line-height: .9; }
.logo .op { font-size: 24px; font-weight: 700; letter-spacing: .03em; color: #fff; white-space: nowrap; }
.logo .op i { font-style: normal; color: var(--carmesi-claro); }
.logo .tn { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .6em; color: var(--carmesi-claro); margin-top: 4px; }
.logo .tn::before, .logo .tn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--carmesi)); }
.logo .tn::after { background: linear-gradient(90deg, var(--carmesi), transparent); }
.logo .tn span { margin-right: -.6em; }
.menu { display: flex; align-items: stretch; height: 100%; gap: 2px; flex: 1; list-style: none; }
.menu > li { position: relative; display: flex; }
.menu > li > a { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 11px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; color: #cfd2d8; transition: color .2s; }
.menu > li > a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; background: var(--carmesi); box-shadow: 0 0 12px var(--carmesi); transform: scaleX(0); transition: transform .25s; }
.menu > li > a:hover, .menu > li > a.activo, .menu > li:focus-within > a { color: #fff; }
.menu > li > a:hover::after, .menu > li > a.activo::after { transform: scaleX(1); }
.menu .flecha { width: 10px; height: 10px; opacity: .6; }
.sub {
  position: absolute; top: 100%; left: 0; min-width: 280px; padding: 8px; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility 0s .2s;
  background: rgba(14,16,20,.98); border: 1px solid var(--linea-2); border-top: 2px solid var(--carmesi); box-shadow: 0 20px 40px rgba(0,0,0,.6);
}
.menu > li:hover .sub, .menu > li:focus-within .sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.sub a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.sub a:hover, .sub a.activo { background: rgba(217,31,43,.14); color: #fff; }
.sub a img { width: 48px; height: 36px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--linea-2); background: #0b0c0f; }
.sub a img.contener { object-fit: contain; }
.sub a small { display: block; font-size: 13px; color: var(--texto-3); text-transform: none; letter-spacing: 0; font-weight: 600; }
.acciones { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.btn-entrar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #dfe1e6; }
.btn-entrar:hover { color: var(--oro); }
.btn-entrar .ico { width: 19px; height: 19px; }
.hamburguesa { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--linea-2); flex: none; }
.hamburguesa .ico { width: 22px; height: 22px; }
.cab-cargando { width: 180px; height: 36px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04)); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }

/* Con sesión: el jugador, su Oro, su Cash y su menú. */
.jugador { position: relative; display: flex; align-items: center; gap: 14px; }
.jugador .chip { margin-left: 14px; }
.jugador-boton { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 4px; border-radius: 2px; }
.jugador-boton:hover, .jugador.abierto .jugador-boton { background: rgba(255,255,255,.05); }
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; font-size: 19px; font-weight: 700; color: #fff; text-transform: uppercase;
  background: linear-gradient(180deg, #ff3b47, #8e0d15); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.jugador-boton .nombre-j { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; max-width: 150px; }
.jugador-boton .nombre-j b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.jugador-boton .nombre-j small { font-size: 13px; color: var(--texto-3); letter-spacing: .08em; text-transform: uppercase; }
.jugador-boton .flecha { width: 10px; height: 10px; opacity: .6; transition: transform .2s; }
.jugador.abierto .jugador-boton .flecha { transform: rotate(180deg); }
.jugador-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 300px; z-index: 60; display: none;
  background: rgba(14,16,20,.98); border: 1px solid var(--linea-2); border-top: 2px solid var(--carmesi); box-shadow: 0 24px 50px rgba(0,0,0,.7);
}
.jugador.abierto .jugador-menu { display: block; }
.jugador-menu .quien { padding: 16px 16px 14px; border-bottom: 1px solid var(--linea); }
.jugador-menu .quien b { display: block; font-size: 19px; line-height: 1.1; }
.jugador-menu .quien small { display: block; font-size: 14px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jugador-menu .saldos { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--linea); }
.jugador-menu .saldos .chip { margin-left: 13px; }
.jugador-menu .saldos { align-items: center; }
.jugador-menu .saldos small { color: var(--texto-3); font-size: 12.5px; letter-spacing: .02em; line-height: 1.25; max-width: 130px; }
.jugador-menu nav { padding: 6px; }
.jugador-menu nav a, .jugador-menu nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); text-align: left; }
.jugador-menu nav a:hover, .jugador-menu nav button:hover { background: rgba(217,31,43,.14); color: #fff; }
.jugador-menu nav .ico { width: 18px; height: 18px; color: var(--carmesi-claro); }
.jugador-menu nav .recargar .ico { color: var(--cash); }

/* Menú del móvil (panel a pantalla completa). */
.panel-movil { position: fixed; inset: 0; z-index: 70; display: none; flex-direction: column; overflow: auto; padding: 14px 16px 28px; background: rgba(6,7,9,.985); }
.panel-movil.abierto { display: flex; }
.panel-movil .arriba { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-movil nav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--linea); }
.panel-movil nav a.activo { color: var(--carmesi-claro); }
.panel-movil nav .subm a { font-size: 17px; padding: 11px 4px 11px 20px; color: var(--texto-2); }
.panel-movil .botones { display: grid; gap: 10px; margin-top: 18px; }
.panel-movil .saldos { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 0 4px 14px; }
body.menu-abierto { overflow: hidden; }

/* 9. CABEZA DE PÁGINA (páginas interiores) ------------------------------------
   Título grande sobre un fondo del juego. El fondo se pasa con --foto:
     <header class="cabeza-pagina" style="--foto:url('/juego/img/fondos/mapa_pueblo_2560.webp')">
   Opcional --posicion (object-position del fondo) y --foto-movil. */
.cabeza-pagina {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 380px; padding: 120px 0 48px; margin-bottom: 56px; border-bottom: 1px solid var(--linea-2);
  background: #07080a;
}
.cabeza-pagina::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--foto, none) var(--posicion, 50% 50%) / cover no-repeat; animation: acercar 20s ease-out both; }
.cabeza-pagina::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,7,9,.94) 0%, rgba(6,7,9,.72) 38%, rgba(6,7,9,.2) 75%),
    linear-gradient(0deg, var(--carbon) 0%, rgba(13,15,18,.4) 40%, rgba(6,7,9,.5) 100%);
}
@keyframes acercar { from { transform: scale(1.06); } to { transform: scale(1); } }
/* Tiras que se deslizan de lado (comun.js, O7.marcarDeslizables): el borde por donde
   sigue el contenido se funde, para que se vea que hay más. */
.desliza.hay-der { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.desliza.hay-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.desliza.hay-izq.hay-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
/* Cabeceras con foto compuesta (img/fondos/cab_*): la foto ya viene oscura y con el
   personaje o el arma a la derecha, así que el velo solo oscurece el lado del texto. */
.cabeza-pagina.foto-compuesta::after {
  background:
    linear-gradient(90deg, rgba(6,7,9,.92) 0%, rgba(6,7,9,.66) 36%, rgba(6,7,9,.06) 62%, rgba(6,7,9,0) 100%),
    linear-gradient(0deg, var(--carbon) 0%, rgba(13,15,18,0) 26%, rgba(6,7,9,0) 80%, rgba(6,7,9,.45) 100%);
}
.cabeza-pagina h1 { font-size: 64px; line-height: .92; text-transform: uppercase; letter-spacing: .01em; margin: 12px 0 14px; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.cabeza-pagina p { max-width: 620px; font-size: 19px; color: #c9ccd3; }
.cabeza-pagina .migas { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--texto-3); margin-bottom: 18px; letter-spacing: .06em; text-transform: uppercase; }
.cabeza-pagina .migas a:hover { color: #fff; }
.cabeza-pagina .migas span[aria-hidden] { color: var(--carmesi); }
.cabeza-pagina.chica { min-height: 280px; }

/* 10. SECCIONES Y TARJETAS ------------------------------------------------------ */
.seccion { position: relative; padding: 96px 0 0; }
/* La última sección no deja su propio hueco antes del pie: ya lo pone el margen del pie. */
main .seccion:last-child { padding-bottom: 8px; }
.titulo-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.titulo-sec h2 { font-size: 52px; line-height: .95; text-transform: uppercase; font-weight: 700; letter-spacing: .01em; margin-top: 8px; }
.titulo-sec p { max-width: 560px; color: var(--texto-2); font-size: 17px; margin-top: 10px; }
.enlace-mas { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-2); padding-bottom: 8px; }
.enlace-mas .ico { width: 16px; height: 16px; transition: transform .2s; }
.enlace-mas:hover { color: #fff; }
.enlace-mas:hover .ico { transform: translateX(3px); color: var(--carmesi-claro); }
.rejilla { display: grid; gap: 18px; }
.rejilla.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Tarjeta con foto de fondo y texto abajo (noticias, mapas, accesos). */
.tarjeta { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; background: #0b0c0f; border: 1px solid var(--linea-2); transition: border-color .25s; }
.tarjeta > img.fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.tarjeta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,7,9,.97) 6%, rgba(6,7,9,.6) 40%, rgba(6,7,9,0) 72%); }
.tarjeta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--carmesi); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
a.tarjeta:hover { border-color: rgba(217,31,43,.6); }
a.tarjeta:hover > img.fondo { transform: scale(1.05); }
a.tarjeta:hover::after { transform: scaleX(1); }
.tarjeta .texto { padding: 22px 24px; }
.tarjeta h3 { font-size: 26px; line-height: 1.02; text-transform: uppercase; margin: 10px 0 6px; }
.tarjeta p { font-size: 16px; color: var(--texto-2); line-height: 1.38; }
.lista-datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.lista-datos dt { color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; padding-top: 2px; }
.lista-datos dd { color: #dfe2e7; }
.separador { height: 1px; background: var(--linea); margin: 18px 0; border: 0; }
.texto-largo { font-size: 18px; line-height: 1.6; color: #d3d6dc; max-width: 760px; }
.texto-largo > * + * { margin-top: 16px; }
.texto-largo h2 { font-size: 30px; line-height: 1.05; text-transform: uppercase; color: #fff; margin-top: 34px; }
.texto-largo h3 { font-size: 22px; text-transform: uppercase; color: #fff; margin-top: 26px; }
.texto-largo ul { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.texto-largo li { position: relative; padding-left: 22px; }
.texto-largo li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--carmesi); transform: rotate(45deg); }
.texto-largo a { color: #fff; border-bottom: 1px solid var(--carmesi); }
.texto-largo a:hover { color: var(--oro); }

/* 11. FORMULARIOS ----------------------------------------------------------------
   <form class="formulario">
     <label class="campo"><span class="etiqueta">Correo</span>
       <span class="caja"><svg class="ico"><use href="#i-correo"/></svg><input type="email" …></span>
       <span class="ayuda">…</span></label>
     <label class="casilla"><input type="checkbox"> Acepto…</label>
     <button class="btn btn-rojo btn-bloque">Crear cuenta</button>
   </form>
   Con error: .campo.error (borde rojo; el texto va en .ayuda). */
.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo .etiqueta { font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.campo .caja { position: relative; display: block; }
.campo .caja > .ico { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.campo input, .campo select, .campo textarea {
  width: 100%; height: 48px; padding: 0 14px 0 42px; font: 600 17px "Rajdhani", system-ui, sans-serif; color: var(--texto);
  background: #0a0b0e; border: 1px solid var(--linea-2); outline: 0; border-radius: 0; transition: border-color .15s, box-shadow .15s;
}
.campo textarea { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; line-height: 1.4; }
.campo select { padding-left: 14px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.campo .sin-icono input { padding-left: 14px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--carmesi); box-shadow: 0 0 0 3px rgba(217,31,43,.18); }
.campo input:-webkit-autofill { -webkit-text-fill-color: var(--texto); -webkit-box-shadow: 0 0 0 40px #0a0b0e inset; caret-color: var(--texto); }
.campo .ayuda { font-size: 14px; color: var(--texto-3); line-height: 1.3; }
.campo.error input, .campo.error select, .campo.error textarea { border-color: var(--no-alcanza); }
.campo.error .ayuda { color: var(--no-alcanza); }
.campo.bien input { border-color: rgba(60,230,140,.6); }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; color: var(--texto-3); }
.ver-clave:hover { color: #fff; }
.ver-clave .ico { width: 19px; height: 19px; }
.campo .caja:has(.ver-clave) input { padding-right: 46px; }
.casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--texto-2); cursor: pointer; line-height: 1.35; }
.casilla input { accent-color: var(--carmesi); width: 17px; height: 17px; margin: 2px 0 0; flex: none; }
.casilla a { color: #fff; border-bottom: 1px solid var(--carmesi); }
.fila-form { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; color: var(--texto-2); }
.fila-form a:hover { color: #fff; }
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.fuerza i { height: 4px; background: rgba(255,255,255,.08); }
.fuerza[data-n="1"] i:nth-child(-n+1) { background: var(--no-alcanza); }
.fuerza[data-n="2"] i:nth-child(-n+2) { background: var(--legendario); }
.fuerza[data-n="3"] i:nth-child(-n+3) { background: var(--oro); }
.fuerza[data-n="4"] i { background: var(--cash); }

/* 12. AVISOS Y ESTADOS ---------------------------------------------------------
   .aviso (.error | .exito | .info | .ejemplo): mensaje en una caja con borde de color.
   .cargando: ruedita. .esqueleto: bloque gris que late mientras carga.
   .vacio: el estado «próximamente» / «no hay nada», bien diseñado. */
.aviso { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; font-size: 15.5px; line-height: 1.35; color: var(--texto); background: rgba(255,255,255,.04); border-left: 3px solid var(--texto-3); }
.aviso .ico { width: 20px; height: 20px; margin-top: 1px; }
.aviso.error { background: rgba(255,92,74,.09); border-left-color: var(--no-alcanza); }
.aviso.error .ico { color: var(--no-alcanza); }
.aviso.exito { background: rgba(60,230,140,.08); border-left-color: var(--cash); }
.aviso.exito .ico { color: var(--cash); }
.aviso.info { background: rgba(91,155,255,.08); border-left-color: var(--azul); }
.aviso.info .ico { color: var(--azul); }
.aviso.ejemplo { background: rgba(255,196,70,.06); border-left-color: var(--oro); color: var(--oro-claro); }
.aviso[hidden] { display: none; }
.cargando { display: inline-block; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--carmesi-claro); border-radius: 50%; animation: girar .8s linear infinite; vertical-align: middle; }
.btn .cargando { width: 18px; height: 18px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes girar { to { transform: rotate(360deg); } }
.esqueleto { background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.08), rgba(255,255,255,.035)); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.vacio { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 24px; text-align: center; color: var(--texto-2); }
.vacio .sello { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); box-shadow: inset 0 0 0 1px rgba(255,196,70,.45); background: rgba(255,196,70,.06); }
.vacio h3 { font-size: 26px; line-height: 1; text-transform: uppercase; color: #fff; }
.vacio p { max-width: 420px; font-size: 15.5px; line-height: 1.4; }
.error-carga { display: flex; align-items: center; gap: 12px; padding: 16px; color: var(--texto-2); font-size: 15px; }
.error-carga button { color: #fff; border-bottom: 1px solid var(--carmesi); }

/* 13. TABLAS -------------------------------------------------------------------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tabla th { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linea-2); font-weight: 700; white-space: nowrap; }
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--linea); color: #d6d9df; vertical-align: middle; }
.tabla tbody tr:nth-child(odd) { background: rgba(255,255,255,.015); }
.tabla tbody tr:hover { background: rgba(217,31,43,.06); }
.tabla .der { text-align: right; }
.tabla-envase { overflow-x: auto; }

/* 14. PIE ------------------------------------------------------------------------ */
.pie { margin-top: 72px; padding: 60px 0 28px; background: #060708; border-top: 1px solid var(--linea); position: relative; }
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--carmesi) 50%, transparent); opacity: .6; }
.pie-arriba { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 38px; border-bottom: 1px solid var(--linea); }
.pie-marca p { color: var(--texto-3); font-size: 15px; margin: 14px 0 18px; max-width: 330px; }
.pie-marca .botones { display: flex; gap: 10px; flex-wrap: wrap; }
.pie h2 { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.pie ul { list-style: none; display: grid; gap: 9px; }
.pie ul a { font-size: 15.5px; color: var(--texto-3); }
.pie ul a:hover { color: #fff; }
.pie-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 18px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; color: var(--texto-2); }
.pie-estado b { color: #fff; }
.pie-abajo { display: flex; justify-content: space-between; gap: 30px; padding-top: 22px; font-size: 14px; color: var(--texto-3); }
.pie .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.pie .legal a { color: var(--texto-2); }
.pie .legal a:hover { color: #fff; }
.pie .creditos { max-width: 780px; line-height: 1.5; }
.pie .creditos p + p { margin-top: 6px; }
.pie .creditos p a { color: var(--texto-2); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.edad { display: inline-flex; align-items: center; gap: 10px; flex: none; align-self: flex-start; }
.edad b { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--texto-2); color: var(--texto); font-size: 18px; }

/* 15. DETALLES VIVOS ---------------------------------------------------------------- */
/* Punto verde que late (servidor en línea). .apagado = gris; .caido = rojo. */
.punto-vivo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--cash); box-shadow: 0 0 0 0 rgba(60,230,140,.6); animation: pulso 2s infinite; }
.punto-vivo.apagado { background: var(--texto-3); animation: none; }
.punto-vivo.caido { background: var(--no-alcanza); animation: none; box-shadow: 0 0 10px rgba(255,92,74,.6); }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(60,230,140,0); } 100% { box-shadow: 0 0 0 0 rgba(60,230,140,0); } }
/* Cuenta atrás en cajitas: O7.cuentaAtras(elemento, fechaFin) la rellena. */
.cuenta-atras { display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
.cuenta-atras span { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 5px 4px 3px; background: rgba(217,31,43,.16); border: 1px solid rgba(217,31,43,.45); }
.cuenta-atras b { font-size: 22px; line-height: 1; }
.cuenta-atras em { font-style: normal; font-size: 13px; letter-spacing: .16em; color: var(--texto-2); line-height: 1.3; text-transform: uppercase; }
/* Entrada suave al bajar (la activa comun.js; sin JS se ve todo). */
.js .aparece { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .aparece.visto { opacity: 1; transform: none; }
.modo-foto .aparece, .modo-foto .aparece.visto { opacity: 1; transform: none; transition: none; }

/* 16. ADAPTACIÓN AL MÓVIL -------------------------------------------------------- */
@media (max-width: 1360px) {
  .menu > li > a { padding: 0 9px; font-size: 15px; letter-spacing: .06em; }
  .menu > li > a::after { left: 9px; right: 9px; }
  .jugador-boton .nombre-j { display: none; }
}
@media (max-width: 1180px) {
  .menu { display: none; }
  .hamburguesa { display: flex; }
  .rejilla.r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-arriba { grid-template-columns: repeat(3, 1fr); }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --alto-cab: 62px; }
  body { font-size: 16px; }
  .cabecera .env { gap: 10px; }
  .logo { gap: 9px; }
  .logo svg { width: 38px; height: 38px; }
  .logo .op { font-size: 19px; }
  .logo .tn { font-size: 10px; letter-spacing: .5em; }
  .acciones { gap: 6px; }
  .btn-entrar { padding: 0 6px; font-size: 14.5px; letter-spacing: .06em; }
  .acciones .btn-chico { height: 38px; padding: 0 12px; font-size: 13.5px; letter-spacing: .06em; }
  .hamburguesa { width: 40px; height: 40px; }
  .jugador { gap: 4px; }
  .jugador .chip-oro { display: none; }
  .jugador .chip { height: 30px; font-size: 17px; padding: 0 10px 0 28px; }
  .jugador .chip::before { border-width: 14px 16px; }
  .jugador .chip > .moneda { width: 36px; height: 36px; left: -11px; }
  .jugador .chip .mas { width: 20px; height: 20px; margin-left: 7px; margin-right: -4px; }
  .jugador-boton .flecha { display: none; }
  .jugador-menu { position: fixed; top: calc(var(--alto-cab) + 6px); left: 10px; right: 10px; width: auto; }
  .btn-grande { height: 56px; padding: 0 24px; font-size: 19px; }
  .cabeza-pagina { min-height: 300px; padding: 96px 0 34px; margin-bottom: 36px; }
  .cabeza-pagina::before { background-image: var(--foto-movil, var(--foto, none)); }
  .cabeza-pagina h1 { font-size: 42px; }
  .cabeza-pagina p { font-size: 16.5px; }
  .seccion { padding-top: 72px; }
  .titulo-sec { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 20px; }
  .titulo-sec h2 { font-size: 38px; }
  .enlace-mas { padding-bottom: 0; }
  .rejilla.r2, .rejilla.r3, .rejilla.r4 { grid-template-columns: minmax(0, 1fr); }
  .tarjeta .texto { padding: 18px; }
  .texto-largo { font-size: 16.5px; }
  .pie { margin-top: 52px; padding-top: 44px; }
  .pie-arriba { grid-template-columns: 1fr 1fr; gap: 26px; }
  .pie-abajo { flex-direction: column; }
  .tabla { font-size: 14.5px; }
  .tabla th, .tabla td { padding: 10px 10px; }
}
@media (max-width: 420px) {
  /* En un teléfono estrecho, ENTRAR y CREAR CUENTA tienen que caber siempre:
     cede el nombre del logo y queda el escudo. */
  .cabecera .logo .nombre { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .aparece { opacity: 1; transform: none; }
}