/* ==========================================================================
   AODrag Legacy · sistema de diseño "Bronce y verdín"
   Concepto: noche de asedio. Una escena viva (luna, castillo, dragón, brasas)
   detrás de todo; la interfaz son placas de piedra con filo de bronce.
   Un único tema oscuro, elegido a propósito.
   ========================================================================== */

/* Requiere assets/css/tokens.css cargado antes. */

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 12px); }
body {
  margin: 0;
  background: var(--noche);
  color: var(--hueso);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bronce-claro); text-underline-offset: 3px; }
a:hover { color: var(--hueso); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-gotica); font-weight: 700; line-height: 1.05; text-wrap: balance; margin: 0; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.pix { image-rendering: pixelated; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ancho { max-width: var(--ancho); margin-inline: auto; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: .6em 1em; background: var(--oro); color: #1a1206; font-weight: 700; }
.saltar:focus { top: 12px; }

/* ---------- 3. Escena ---------- */
.escena { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.telon { position: fixed; inset: 0; background: #000; z-index: 1; pointer-events: none; animation: telon 1.4s ease-out .1s both; }
@keyframes telon { to { opacity: 0; visibility: hidden; } }
.capa { position: relative; z-index: 2; }

/* ---------- 4. Componentes ---------- */
.placa { background: var(--placa); border: 1px solid var(--placa-borde); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .06), 0 18px 40px rgba(0, 0, 0, .35); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: .6em 1.3em;
  border: 1px solid var(--bronce); background: var(--btn-fondo, rgba(12, 22, 27, .6)); color: var(--hueso);
  text-decoration: none; font-weight: 700; cursor: var(--cursor-enlace, pointer);
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.btn:hover { border-color: var(--oro); color: var(--hueso); box-shadow: 0 0 0 1px var(--oro), 0 0 22px rgba(242, 206, 126, .25); }
.btn:active { transform: translateY(1px); }
.btn-jugar {
  background: linear-gradient(180deg, #D23A41, #9A1D25); border-color: #E9737A;
  box-shadow: 0 0 28px rgba(179, 38, 46, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  font-family: var(--f-gotica); font-size: var(--t-l); padding: .5em 1.6em;
}
.btn-jugar:hover { box-shadow: 0 0 0 1px #F2A0A4, 0 0 40px rgba(240, 102, 108, .6), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-verdin { background: linear-gradient(180deg, #3B7871, #27514C); border-color: var(--verdin-claro); }

.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--verdin-luz); box-shadow: 0 0 10px var(--verdin-claro); animation: late 2.4s ease-in-out infinite; }
.punto.rojo { background: var(--sangre-claro); box-shadow: 0 0 10px var(--sangre); }
.punto.apagado { background: #5b6b68; box-shadow: none; animation: none; }
@keyframes late { 50% { opacity: .45; } }

.estandarte { width: 11px; height: 15px; flex: none; background: var(--bronce-claro); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); box-shadow: 0 0 8px var(--bronce-claro); }

/* estado (vivo, en espera…) como texto con color, sin caja */
.tono { font-weight: 700; white-space: nowrap; }
.tono-vivo, .tono-activo { color: var(--sangre-claro); }
.tono-buff { color: var(--oro); }
.tono-disponible, .tono-libre { color: var(--verdin-luz); }
.tono-espera, .tono-neutro, .tono-guerra { color: var(--bronce-claro); }
.tono-muerto, .tono-apagado { color: var(--niebla); font-weight: 500; }
.tono-conquistado { color: var(--hueso); }

.titulo-placa { font-size: var(--t-xl); color: var(--oro); margin-bottom: 12px; }
.filas { list-style: none; margin: 0; padding: 0; }
.filas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: var(--t-s); }
.filas .sec { color: var(--niebla); font-size: var(--t-xs); }
.vacio { color: var(--niebla); font-size: var(--t-s); }

/* ---------- 5. Cabecera ---------- */
.cabecera { position: fixed; left: 0; right: 0; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.cabecera.solida { background: rgba(8, 15, 19, .97); border-bottom-color: rgba(221, 176, 111, .2); }
.cabecera .ancho { display: flex; align-items: center; gap: 20px; min-height: var(--cabecera); }
.cabecera .marca { opacity: 0; transition: opacity .3s; }
.cabecera.solida .marca, .cabecera .marca:focus-visible { opacity: 1; }
.cabecera .marca img { height: 34px; width: auto; }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { color: var(--hueso); text-decoration: none; white-space: nowrap; padding: .5em .8em; font-size: var(--t-s); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.menu a:hover { color: var(--oro); }
.idioma { display: flex; border: 1px solid rgba(221, 176, 111, .3); }
.idioma a { padding: .35em .6em; font-size: var(--t-xs); color: var(--niebla); text-decoration: none; }
.idioma a[aria-current="true"] { color: var(--hueso); background: rgba(46, 94, 88, .6); }
.abrir-menu { display: none; margin-left: auto; background: rgba(8, 15, 19, .6); border: 1px solid var(--bronce); min-height: 40px; padding: 0 .9em; cursor: var(--cursor-enlace, pointer); }

/* ---------- 6. Portada: hero ---------- */
.hero { min-height: min(100vh, 940px); min-height: min(100svh, 940px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 90px; }
.hero-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; padding-block: 40px 30px; }
.logo-hero { position: relative; width: min(620px, 88vw); aspect-ratio: 1240 / 338; animation: logo-entra 1.6s cubic-bezier(.2, .7, .2, 1) .4s both; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .85)) drop-shadow(0 0 40px rgba(179, 38, 46, .35)); }
.logo-hero img { width: 100%; height: 100%; }
.logo-hero .brillo {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 244, 214, .95) 50%, transparent 58%) no-repeat;
  background-size: 260% 100%; background-position: 150% 0;
  -webkit-mask: url(../images/logo.webp?v=20261019) center / 100% 100% no-repeat; mask: url(../images/logo.webp?v=20261019) center / 100% 100% no-repeat;
  mix-blend-mode: screen; animation: brillo 8s ease-in-out 2.2s infinite;
}
@keyframes logo-entra {
  from { opacity: .35; transform: scale(1.12); filter: blur(8px) drop-shadow(0 6px 22px rgba(0, 0, 0, .85)) drop-shadow(0 0 40px rgba(179, 38, 46, .35)); }
  to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 6px 22px rgba(0, 0, 0, .85)) drop-shadow(0 0 40px rgba(179, 38, 46, .35)); }
}
@keyframes brillo { 0% { background-position: 150% 0; } 16%, 100% { background-position: -60% 0; } }
.hero { --btn-fondo: rgba(30, 16, 18, .66); }
.hero-centro { position: relative; isolation: isolate; }
/* velo oscuro y suave tras el logo y el lema: el texto se lee sobre el cielo claro del atardecer */
.hero-centro::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(920px, 100%); height: 82%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(30, 12, 22, .66), rgba(30, 12, 22, .44) 62%, rgba(30, 12, 22, 0)); pointer-events: none; }
.lema { max-width: 36ch; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.35; text-shadow: 0 1px 2px rgba(20, 8, 12, .95), 0 2px 14px rgba(20, 8, 12, .9); animation: sube .9s ease-out 1.2s both; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; animation: sube .9s ease-out 1.4s both; }
.vivo-reino { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; animation: sube .9s ease-out 1.6s both; }
.vivo-reino li { display: flex; align-items: center; gap: .5em; padding: .35em .8em; background: rgba(28, 15, 16, .78); border: 1px solid rgba(232, 184, 110, .3); font-size: var(--t-s); }
.vivo-reino b { font-weight: 800; }
@keyframes sube { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.accesos { border-top: 1px solid rgba(232, 184, 110, .3); background: linear-gradient(180deg, rgba(26, 14, 14, .3), rgba(26, 16, 12, .9)); }
.accesos ul { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.accesos a { position: relative; display: flex; align-items: center; min-height: 56px; padding: 0 1.15em; color: var(--hueso); text-decoration: none; }
.accesos a::after { content: ""; position: absolute; left: 1.15em; right: 1.15em; bottom: 12px; height: 1px; background: var(--oro); transform: scaleX(0); transition: transform .2s; }
.accesos a:hover { color: var(--oro); }
.accesos a:hover::after { transform: none; }

/* ---------- 7. Portada: cuerpo ---------- */
/* La portada pasa a piedra cálida: los tokens se redefinen solo dentro de su cuerpo,
   así el panel y las páginas interiores siguen con la pizarra de siempre. */
.hero + .cuerpo {
  --pizarra: var(--piedra-calida); --pizarra-honda: var(--piedra-calida-honda);
  --placa: var(--placa-calida); --placa-borde: var(--placa-calida-borde);
  --linea: var(--linea-calida); --niebla: var(--niebla-calida);
  --btn-fondo: rgba(30, 20, 13, .65);
  background: linear-gradient(180deg, rgba(42, 30, 22, 0) 0, rgba(36, 25, 18, .94) 220px, var(--pizarra) 520px);
}
.capa:has(.hero) .cabecera.solida, .capa:has(.hero) .menu.abierto { background: rgba(26, 17, 13, .97); }
.capa:has(.hero) .pie { background: #150E0A; }

.aviso-panel { position: relative; overflow: hidden; border-block: 1px solid rgba(242, 206, 126, .35); background: linear-gradient(90deg, #5A3A1B, #7A4F22 40%, #4E3217); }
.aviso-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 120px at 85% 50%, rgba(255, 214, 140, .12), transparent 70%); }
.aviso-panel .ancho { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 18px; flex-wrap: wrap; }
.aviso-panel strong { font-family: var(--f-gotica); font-size: var(--t-l); margin-right: .4em; color: var(--oro); }
.aviso-panel .btn { --btn-fondo: rgba(30, 18, 8, .55); border-color: var(--oro); }

.reino { padding-block: 56px; }
.reino .ancho {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr);
  grid-template-areas: "izq bien der" "izq nov der"; grid-template-rows: auto 1fr;
  gap: 20px 28px; align-items: start;
}
.bienvenida { grid-area: bien; min-width: 0; padding: 28px; }
.novedades { grid-area: nov; min-width: 0; padding: 28px; }
.col-izq { grid-area: izq; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.col-der { grid-area: der; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.col-izq > section, .col-der > section { padding: 20px; }
.bienvenida h1 { font-size: var(--t-2xl); margin-bottom: 10px; }
.bienvenida > p { color: var(--niebla); max-width: 62ch; }
.novedades h2 { font-size: var(--t-xl); color: var(--oro); margin-bottom: 10px; }

/* Información del servidor: primeras placas de cada columna */
.info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 16px; font-size: var(--t-s); }
.info dt { color: var(--niebla); }
.info dd { margin: 0; font-weight: 700; text-align: right; }
.info dd.num { font-size: var(--t-l); line-height: 1.1; color: var(--oro); }
.info dd .base { font-size: var(--t-xs); font-weight: 500; color: var(--niebla); }
.info ul { margin: 0; padding-left: 1.1em; font-size: var(--t-s); display: grid; gap: 7px; }
.info li::marker { color: var(--bronce); }
.info .dos-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.evento-activo { display: flex; align-items: flex-start; gap: .6em; margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--oro); background: rgba(242, 206, 126, .1); font-size: var(--t-s); font-weight: 700; color: var(--oro); }
.evento-activo .estandarte { margin-top: .25em; background: var(--oro); }

/* Monster DraG: vivo en verde, muerto en rojo, sin datos o atrasado en gris */
.tono-raid-vivo { color: #8FE3A0; }
.tono-raid-muerto { color: var(--sangre-claro); }
.tono-raid-desconocido, .tono-raid-sin-datos, .tono-raid-atrasado { color: var(--niebla); font-weight: 500; }
.aviso-atraso { margin: -2px 0 10px; font-size: var(--t-xs); color: var(--niebla); font-style: italic; }

.online-grande { display: flex; align-items: baseline; gap: .4em; margin-bottom: 4px; }
.online-grande b { font-size: 3.4rem; line-height: 1; font-weight: 800; text-shadow: 0 0 24px rgba(242, 206, 126, .3); }
.online-grande span { color: var(--niebla); }
.estado-linea { display: flex; align-items: center; gap: .6em; font-size: var(--t-s); color: var(--niebla); margin-bottom: 16px; }
.servidor .btn-jugar { width: 100%; }

.filas li.fila-evento { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.fila-evento .sec { grid-column: 1 / -1; }

.filas li.castillo { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center; }
.castillo .letra { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--bronce); font-family: var(--f-gotica); font-size: var(--t-l); color: var(--oro); background: rgba(180, 130, 63, .2); }
.castillo .nombre { font-weight: 700; }
.castillo .detalle { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-xs); color: var(--niebla); }
.castillo .clan { display: flex; align-items: center; gap: .45em; color: var(--hueso); }

.pestanas { display: flex; border-bottom: 1px solid rgba(221, 176, 111, .2); margin-bottom: 18px; }
.pestanas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .6em 1em; margin-bottom: -1px; cursor: var(--cursor-enlace, pointer); color: var(--niebla); font-size: var(--t-m); }
.pestanas button[aria-selected="true"] { color: var(--hueso); border-bottom-color: var(--oro); }
.mensaje { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--linea); }
.mensaje:last-child { border-bottom: 0; margin-bottom: 0; }
.mensaje .meta { display: flex; gap: .8em; font-size: var(--t-xs); color: var(--niebla); margin-bottom: 6px; }
.mensaje .meta b { color: var(--bronce-claro); font-weight: 700; }
.mensaje .texto { max-width: 66ch; overflow-wrap: anywhere; }
.mensaje .texto code { background: rgba(255, 255, 255, .06); padding: .05em .3em; }
.mensaje .imagenes { display: grid; gap: 8px; margin-top: 10px; }
.mensaje .imagenes img { border: 1px solid rgba(221, 176, 111, .3); max-height: 420px; width: auto; }
.enlace-discord { display: inline-flex; margin-top: 18px; }

.seccion { padding-block: 64px; }
.seccion > .ancho > h2 { font-size: var(--t-2xl); margin-bottom: 28px; }

.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 32%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-color: var(--bronce) transparent; }
.galeria button { display: block; margin: 0; padding: 0; border: 1px solid rgba(221, 176, 111, .3); background: var(--pizarra-honda); cursor: zoom-in; scroll-snap-align: start; overflow: hidden; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s; }
.galeria button:hover img { transform: scale(1.06); }
.visor { width: min(1100px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--bronce); background: #05090b; color: var(--hueso); }
.visor::backdrop { background: rgba(3, 6, 8, .9); }
.visor img { width: 100%; max-height: calc(94vh - 60px); object-fit: contain; }
.visor .controles { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; }
.visor .controles span { flex: 1 0 auto; text-align: center; color: var(--niebla); font-size: var(--t-s); }

.descargas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.descargas > div { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.descargas h3 { font-size: var(--t-xl); }
.espejos { display: flex; flex-wrap: wrap; gap: 10px; }
.nota { color: var(--niebla); font-size: var(--t-s); max-width: 56ch; }
.pasos { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; font-size: var(--t-s); }
.pasos li::marker { color: var(--oro); font-weight: 800; }

/* ---------- 7b. Páginas interiores y noticias ---------- */
.pagina-interior { padding-top: calc(var(--cabecera) + 40px); padding-bottom: 72px; min-height: 70vh; background: linear-gradient(180deg, rgba(6, 17, 26, .55), rgba(16, 27, 33, .92) 320px, var(--pizarra) 700px); }
.cabeza-pagina { margin-bottom: 28px; }
.cabeza-pagina h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.cabeza-pagina p { color: var(--niebla); margin-top: 6px; }
.noticia-vacia { padding: 28px; display: grid; gap: 14px; justify-items: start; }
.noticia-vacia h1 { font-size: var(--t-2xl); }
.lista-noticias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tarjeta-noticia { display: grid; grid-template-rows: auto 1fr; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.tarjeta-noticia:hover { border-color: rgba(242, 206, 126, .55); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .06), 0 18px 40px rgba(0, 0, 0, .35), 0 0 22px rgba(242, 206, 126, .12); }
.tarjeta-noticia .imagen { display: block; overflow: hidden; border-bottom: 1px solid var(--placa-borde); }
.tarjeta-noticia .imagen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s; }
.tarjeta-noticia:hover .imagen img { transform: scale(1.04); }
.tarjeta-noticia .texto { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.tarjeta-noticia h2 { font-size: var(--t-xl); }
.tarjeta-noticia h2 a { color: var(--hueso); text-decoration: none; }
.tarjeta-noticia h2 a:hover { color: var(--oro); }
.tarjeta-noticia .texto > p:not(.meta) { color: var(--niebla); max-width: 62ch; }
.tarjeta-noticia .leer { margin-top: auto; align-self: flex-start; }
.tarjeta-noticia.destacada { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: none; }
.tarjeta-noticia.destacada .imagen { border-bottom: 0; border-right: 1px solid var(--placa-borde); }
.tarjeta-noticia.destacada .imagen img { height: 100%; }
.tarjeta-noticia.destacada h2 { font-size: var(--t-2xl); }
.tarjeta-noticia.destacada .texto { padding: 28px; justify-content: center; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .7em; font-size: var(--t-xs); color: var(--niebla); }
.tipo { padding: .1em .55em; border: 1px solid currentColor; font-weight: 700; color: var(--bronce-claro); }
.tipo-evento { color: var(--verdin-luz); }
.tipo-mantenimiento { color: var(--sangre-claro); }
.tipo-parche { color: #8FD6FF; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 32px; color: var(--niebla); }
.noticia-detalle { max-width: 860px; }
.noticia-detalle .volver { display: inline-block; margin-bottom: 18px; font-size: var(--t-s); }
.noticia-detalle header { margin-bottom: 22px; }
.noticia-detalle h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-top: 10px; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.portada-noticia { width: 100%; height: auto; max-height: 520px; object-fit: cover; border: 1px solid var(--placa-borde); margin-bottom: 22px; }
.cuerpo-noticia { padding: 28px 32px; font-size: 1.125rem; line-height: 1.7; }
.cuerpo-noticia > * + * { margin-top: 1em; }
.cuerpo-noticia h2 { font-size: var(--t-xl); color: var(--oro); margin-top: 1.4em; }
.cuerpo-noticia ul { padding-left: 1.2em; }
.cuerpo-noticia li + li { margin-top: .35em; }
.cuerpo-noticia li::marker { color: var(--bronce); }
.cuerpo-noticia strong { color: var(--hueso); }
.cuerpo-noticia p, .cuerpo-noticia li { max-width: 68ch; }
.pie-noticia { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* Noticias propias en la portada */
.noticia-portada { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); }
.noticia-portada .img { overflow: hidden; border: 1px solid rgba(221, 176, 111, .3); align-self: start; }
.noticia-portada img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.noticia-portada:hover img { transform: scale(1.05); }
.noticia-portada h3 { font-size: var(--t-xl); margin: 6px 0 8px; }
.noticia-portada h3 a { color: var(--hueso); text-decoration: none; }
.noticia-portada h3 a:hover { color: var(--oro); }
.noticia-portada p.ext { margin-bottom: 8px; max-width: 60ch; }
.noticias-mas { list-style: none; margin: 0 0 16px; padding: 0; }
.noticias-mas li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.noticias-mas time { color: var(--niebla); white-space: nowrap; }

/* ---------- 8. Pie ---------- */
.pie { background: #070E12; border-top: 1px solid rgba(221, 176, 111, .2); padding-block: 36px; }
.pie .ancho { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.pie .logo img { height: 42px; width: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--t-s); }
.pie nav a { color: var(--niebla); }
.redes { display: flex; gap: 10px; }
.redes a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(221, 176, 111, .3); color: var(--hueso); }
.redes a:hover { border-color: var(--oro); color: var(--oro); }
.redes svg { width: 20px; height: 20px; fill: currentColor; }
.pie small { grid-column: 1 / -1; color: var(--niebla); font-size: var(--t-xs); }

/* ---------- 9. Responsive ---------- */
@media (max-width: 1100px) {
  .reino .ancho { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "bien bien" "nov nov" "izq der"; grid-template-rows: none; }
}
/* Con diez entradas, el menú solo cabe en una línea a partir de ~1180 px. */
@media (max-width: 1180px) {
  .menu { display: none; }
  .menu.abierto { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; max-height: calc(100vh - var(--cabecera)); max-height: calc(100dvh - var(--cabecera)); overflow-y: auto; overscroll-behavior: contain; background: rgba(8, 15, 19, .97); border-bottom: 1px solid var(--placa-borde); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
  .abrir-menu { display: inline-flex; align-items: center; }
  .cabecera .marca { opacity: 1; }
  .cabecera .ancho { position: relative; }
}
@media (max-width: 900px) {
  .descargas { grid-template-columns: 1fr; }
  .pie .ancho { grid-template-columns: 1fr; }
  .galeria { grid-auto-columns: minmax(260px, 70%); }
}
@media (max-width: 900px) {
  .lista-noticias { grid-template-columns: 1fr; }
  .tarjeta-noticia.destacada { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tarjeta-noticia.destacada .imagen { border-right: 0; border-bottom: 1px solid var(--placa-borde); }
  .tarjeta-noticia.destacada .imagen img { height: auto; }
}
@media (max-width: 640px) {
  .noticia-portada { grid-template-columns: 1fr; }
  .cuerpo-noticia { padding: 20px 18px; font-size: 1.0625rem; }
}
@media (max-width: 640px) {
  :root { --t-2xl: 2.125rem; --t-xl: 1.5rem; }
  /* Una columna: las placas de ambas columnas pasan a la misma lista y la
     información del servidor sube justo debajo de la bienvenida. */
  .reino .ancho { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .col-izq, .col-der { display: contents; }
  .bienvenida { order: 1; }
  .info-servidor { order: 2; }
  .info-eventos { order: 3; }
  .info-sistemas { order: 4; }
  .novedades { order: 5; }
  .servidor { order: 6; }
  .eventos { order: 7; }
  .bosses { order: 8; }
  .raids { order: 9; }
  .castillos { order: 10; }
  .bienvenida, .novedades { padding: 20px; }
  .accesos a { min-height: 46px; padding: 0 .7em; font-size: var(--t-s); }
  .galeria { grid-auto-columns: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .telon { display: none; }
}

/* ---- Bugs: página pública de reporte e incidencias (bugs.php) ---- */
.bugs-pagina { max-width: 880px; }
.bugs-pagina .cabeza-pagina p { max-width: 62ch; }
.bugs-avisos:empty { display: none; }
.bugs-aviso { padding: 14px 18px; border: 1px solid; border-left-width: 4px; margin-bottom: 20px; overflow-wrap: anywhere; }
.bugs-aviso-ok { border-color: var(--verdin-claro); background: rgba(46, 94, 88, .45); color: var(--verdin-luz); font-weight: 700; }
.bugs-aviso-error { border-color: var(--sangre-claro); background: rgba(179, 38, 46, .16); }
.bugs-aviso-error > p { font-weight: 700; color: var(--sangre-claro); }
.bugs-aviso-error ul { margin: 6px 0 0; padding-left: 1.2em; font-size: var(--t-s); }

/* El formulario: una placa de bronce con remaches */
.bugs-form {
  position: relative; padding: 30px 34px 32px; margin-bottom: 52px;
  border-color: rgba(221, 176, 111, .55);
  background: linear-gradient(180deg, rgba(180, 130, 63, .16), rgba(12, 22, 27, 0) 160px), var(--placa);
  box-shadow: inset 0 0 0 4px rgba(12, 22, 27, .85), inset 0 0 0 5px rgba(180, 130, 63, .3), inset 0 1px 0 rgba(255, 236, 200, .1), 0 18px 40px rgba(0, 0, 0, .4);
}
.bugs-form::before {
  content: ""; position: absolute; inset: 11px; pointer-events: none;
  --remache: radial-gradient(circle, var(--bronce-claro) 0 1.6px, rgba(0, 0, 0, .55) 2.2px 2.8px, transparent 3.2px);
  background: var(--remache) 0 0 / 8px 8px no-repeat, var(--remache) 100% 0 / 8px 8px no-repeat,
              var(--remache) 0 100% / 8px 8px no-repeat, var(--remache) 100% 100% / 8px 8px no-repeat;
}
.bugs-form h2 { font-size: var(--t-xl); color: var(--oro); }
.bugs-panel { margin: 8px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); color: var(--niebla); font-size: var(--t-s); }
.bugs-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.bugs-campo { min-width: 0; }
.bugs-campo-ancho { grid-column: 1 / -1; }
.bugs-campo label { display: block; font-weight: 700; margin-bottom: 6px; }
.bugs-opcional { font-weight: 500; font-size: var(--t-xs); color: var(--niebla); }
.bugs-campo input[type="text"], .bugs-campo select, .bugs-campo textarea {
  display: block; width: 100%; min-height: 46px; padding: .55em .75em; border-radius: 0;
  background: var(--pizarra-honda); border: 1px solid rgba(221, 176, 111, .32); color: var(--hueso);
  transition: border-color .15s, box-shadow .15s;
}
.bugs-campo textarea { min-height: 190px; resize: vertical; line-height: 1.5; }
.bugs-campo select option { background: var(--pizarra-honda); color: var(--hueso); }
.bugs-campo input:hover, .bugs-campo select:hover, .bugs-campo textarea:hover { border-color: rgba(221, 176, 111, .6); }
.bugs-campo input:focus, .bugs-campo select:focus, .bugs-campo textarea:focus { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.bugs-campo input[type="file"] { display: block; width: 100%; padding: .5em; font-size: var(--t-s); color: var(--niebla); background: var(--pizarra-honda); border: 1px dashed rgba(221, 176, 111, .45); }
.bugs-campo input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; margin-right: .8em; padding: .45em .9em; min-height: 36px; cursor: var(--cursor-enlace, pointer);
  border: 1px solid var(--bronce); background: rgba(12, 22, 27, .7); color: var(--hueso);
}
.bugs-campo input[type="file"]::file-selector-button:hover { border-color: var(--oro); }
.bugs-pista { margin-top: 6px; color: var(--niebla); font-size: var(--t-xs); max-width: 64ch; }
.bugs-campo label + .bugs-pista { margin: -2px 0 8px; }
.bugs-privado { margin: 24px 0 18px; padding: 10px 14px; border-left: 3px solid var(--bronce); background: rgba(180, 130, 63, .1); font-size: var(--t-s); max-width: 70ch; }
.bugs-trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* El registro: un libro de incidencias, una línea por reporte */
.bugs-registro-cabeza h2 { font-size: var(--t-2xl); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.bugs-registro-cabeza p { color: var(--niebla); margin-top: 6px; }
.bugs-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.bugs-filtros a {
  display: inline-flex; align-items: center; gap: .5em; min-height: 40px; padding: .3em .85em;
  border: 1px solid rgba(221, 176, 111, .3); background: rgba(12, 22, 27, .7); color: var(--hueso); text-decoration: none; font-size: var(--t-s);
}
.bugs-filtros a:hover { border-color: var(--oro); color: var(--hueso); }
.bugs-filtros .num { min-width: 1.7em; padding: 0 .35em; text-align: center; font-size: var(--t-xs); color: var(--niebla); background: rgba(255, 255, 255, .06); }
.bugs-filtros a[aria-current="page"] { background: rgba(46, 94, 88, .65); border-color: var(--verdin-claro); }
.bugs-filtros a[aria-current="page"] .num { color: var(--hueso); }
.bugs-lista { list-style: none; margin: 0; padding: 0; }
.bugs-fila + .bugs-fila { border-top: 1px solid var(--linea); }
.bugs-fila article { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 6px 20px; padding: 20px 24px; }
.bugs-fila.con-captura article { grid-template-columns: 4.75rem minmax(0, 1fr) 160px; }
.bugs-num { align-self: stretch; padding-right: 14px; border-right: 1px solid rgba(221, 176, 111, .3); text-align: right; font-family: var(--f-gotica); font-size: var(--t-l); line-height: 1.2; color: var(--bronce-claro); }
.bugs-cuerpo { min-width: 0; display: grid; gap: 6px; align-content: start; }
.bugs-cuerpo h3 { font-family: var(--f-texto); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.bugs-chip { padding: .1em .55em; border: 1px solid currentColor; font-weight: 700; }
.bugs-tono-pend { color: var(--oro); }
.bugs-tono-rev { color: var(--verdin-luz); }
.bugs-tono-ok { color: #A6E39A; }
.bugs-tono-off { color: var(--niebla); }
.bugs-prio-alta, .bugs-grav-grave { color: var(--bronce-claro); }
.bugs-prio-urgente, .bugs-grav-critica { color: var(--sangre-claro); font-weight: 700; }
.bugs-firma { display: flex; flex-wrap: wrap; gap: .2em 1.1em; font-size: var(--t-xs); color: var(--niebla); overflow-wrap: anywhere; }
.bugs-detalle summary { width: fit-content; padding: .2em 0; cursor: var(--cursor-enlace, pointer); color: var(--bronce-claro); font-size: var(--t-s); }
.bugs-detalle summary:hover { color: var(--hueso); }
.bugs-detalle[open] summary { color: var(--hueso); }
.bugs-detalle p { margin-top: 8px; padding: 12px 14px; background: rgba(6, 12, 15, .55); border-left: 2px solid var(--bronce); font-size: var(--t-s); max-width: 68ch; overflow-wrap: anywhere; }
.bugs-captura { align-self: start; display: grid; gap: 5px; color: var(--bronce-claro); font-size: var(--t-xs); text-decoration: none; }
.bugs-captura img { width: 160px; height: 100px; object-fit: cover; border: 1px solid rgba(221, 176, 111, .3); background: var(--pizarra-honda); transition: border-color .15s; }
.bugs-captura:hover img { border-color: var(--oro); }
.bugs-vacio { padding: 26px 28px; display: grid; gap: 8px; }
.bugs-vacio p:first-child { font-weight: 700; }

@media (max-width: 640px) {
  .bugs-form { padding: 24px 18px 22px; }
  .bugs-form::before { inset: 8px; }
  .bugs-campos { grid-template-columns: minmax(0, 1fr); }
  .bugs-form .btn { width: 100%; }
  .bugs-fila article, .bugs-fila.con-captura article { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .bugs-num { border-right: 0; padding-right: 0; text-align: left; font-size: var(--t-m); }
  .bugs-captura img { width: 100%; max-width: 320px; height: auto; aspect-ratio: 16 / 10; }
  .bugs-vacio { padding: 20px 18px; }
}

/* ---- Donaciones: donations.php, gracias.php y cancelado.php ---- */
/* Idea fuerte: el tesoro. Los paquetes son montones de gemas del mismo tamaño
   que crecen de 1 a 15 sobre un estante de bronce; el mayor, enmarcado. */
.donar-pagina { max-width: 1120px; }
.donar-cabeza p { max-width: 64ch; }
.donar-indice { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; font-size: var(--t-s); }
.donar-pruebas { display: inline-block; margin: -10px 0 22px; padding: .25em .8em; border: 1px dashed rgba(221, 176, 111, .6); color: var(--bronce-claro); font-size: var(--t-xs); }

.donar-tesoro {
  position: relative; padding: 30px 34px 30px; margin-bottom: 56px;
  border: 1px solid rgba(221, 176, 111, .45);
  background: radial-gradient(760px 300px at 82% 96%, rgba(143, 214, 255, .14), transparent 70%), linear-gradient(180deg, rgba(12, 22, 27, .92), rgba(8, 15, 19, .95));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .08), 0 18px 40px rgba(0, 0, 0, .4);
}
.donar-paso + .donar-paso { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linea); }
.donar-paso-titulo { display: flex; align-items: center; gap: .55em; font-size: var(--t-xl); color: var(--oro); }
.donar-ordinal { display: grid; place-items: center; flex: none; width: 1.45em; height: 1.45em; border: 1px solid var(--bronce); background: rgba(46, 94, 88, .4); color: var(--hueso); font-size: .8em; line-height: 1; }
.donar-pista { margin-top: 6px; color: var(--niebla); font-size: var(--t-s); max-width: 62ch; }
.donar-campo { max-width: 440px; margin-top: 16px; }
.donar-campo label { display: block; font-weight: 700; margin-bottom: 6px; }
.donar-campo input {
  display: block; width: 100%; min-height: 52px; padding: .5em .8em; border-radius: 0;
  background: var(--pizarra-honda); border: 1px solid rgba(221, 176, 111, .4); color: var(--hueso); font-size: 1.25rem;
  transition: border-color .15s, box-shadow .15s;
}
.donar-campo input:hover { border-color: rgba(221, 176, 111, .7); }
.donar-campo input:focus { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); outline: none; }
.donar-campo input[aria-invalid="true"] { border-color: var(--sangre-claro); box-shadow: 0 0 0 1px var(--sangre-claro); }
.donar-error { min-height: 1.5em; margin-top: 6px; color: var(--sangre-claro); font-weight: 700; font-size: var(--t-s); }
.donar-noscript { margin-top: 10px; padding: 10px 14px; border-left: 3px solid var(--sangre-claro); background: rgba(179, 38, 46, .16); font-size: var(--t-s); max-width: 62ch; }
.donar-estado { margin-top: 0; font-size: var(--t-s); font-weight: 700; }
.donar-estado:not(:empty) { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--verdin-claro); background: rgba(46, 94, 88, .35); color: var(--verdin-luz); }
.donar-estado.es-error:not(:empty) { border-left-color: var(--sangre-claro); background: rgba(179, 38, 46, .16); color: var(--sangre-claro); }
.donar-estado:focus { outline: none; }
.donar-estado:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.donar-form[aria-busy="true"] .donar-paquete:not(.es-elegido) { opacity: .7; }

/* El estante: los paquetes se apoyan en la misma línea y crecen hacia arriba */
.donar-paquetes {
  list-style: none; margin: 26px 0 0; padding: 0 4px;
  display: flex; align-items: flex-end; justify-content: center; gap: 14px;
  border-bottom: 2px solid var(--bronce);
  box-shadow: 0 10px 18px -12px rgba(221, 176, 111, .45);
}
.donar-paquete {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 300px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 10px 18px; text-align: center;
}
.donar-brillo { position: relative; display: grid; place-items: end center; width: 100%; margin-bottom: 6px; }
.donar-brillo::before {
  content: ""; position: absolute; left: 50%; bottom: -14%; width: 130%; aspect-ratio: 2 / 1; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(143, 214, 255, calc(.06 + var(--nivel) * .05)), transparent);
}
.donar-monton { position: relative; width: 150px; max-width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.donar-cantidad { font-size: calc(1.45rem + var(--nivel) * .22rem); color: var(--hueso); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.donar-unidad { display: block; margin-top: 2px; font-family: var(--f-texto); font-size: var(--t-xs); font-weight: 500; color: var(--niebla); }
.donar-regalo { color: var(--verdin-luz); font-weight: 800; font-size: var(--t-s); }
.donar-desc { color: var(--niebla); font-size: var(--t-xs); max-width: 24ch; }
.donar-precio { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .7em; margin-top: 4px; font-size: var(--t-xs); color: var(--niebla); }
.donar-precio .principal { width: 100%; font-size: var(--t-m); font-weight: 700; color: var(--hueso); }
.donar-comprar { width: 100%; margin-top: 8px; }
.donar-comprar:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; border-color: var(--bronce); }

.donar-paquete.es-mayor {
  flex-grow: 1.45; max-width: 420px; padding: 30px 18px 20px; margin-bottom: -2px;
  border: 1px solid rgba(242, 206, 126, .75); border-bottom-color: var(--bronce);
  background: radial-gradient(circle at 50% 32%, rgba(143, 214, 255, .2), transparent 62%), rgba(10, 19, 24, .9);
  box-shadow: inset 0 0 0 4px rgba(12, 22, 27, .85), inset 0 0 0 5px rgba(180, 130, 63, .35), 0 0 46px rgba(143, 214, 255, .14);
}
.es-mayor .donar-monton { width: 200px; }
.es-mayor .donar-cantidad { color: var(--oro); }
.donar-sello {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  padding: .15em .9em; background: var(--oro); color: #1a1206; font-weight: 800; font-size: var(--t-xs);
}
/* destello sobre el gran tesoro (se apaga con prefers-reduced-motion) */
.es-mayor .donar-brillo::after {
  content: ""; position: absolute; top: 4%; left: 62%; width: 18px; height: 18px; pointer-events: none;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: donar-destello 3.6s ease-in-out infinite; opacity: 0;
}
@keyframes donar-destello { 0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 80% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.donar-nota { margin-top: 14px; color: var(--niebla); font-size: var(--t-xs); text-align: center; }
.donar-vacio { padding: 20px 22px; margin-top: 18px; }

/* Resto de la página: sobrio */
.donar-seccion { margin-top: 52px; }
.donar-seccion > h2 { font-size: var(--t-2xl); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); margin-bottom: 14px; }
.donar-acreditacion { margin-top: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--oro); display: grid; gap: 8px; }
.donar-acreditacion > h2 { font-size: var(--t-xl); color: var(--oro); margin-bottom: 4px; }
.donar-acreditacion p { max-width: 70ch; }

.donar-metodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.donar-metodo { padding: 24px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.donar-metodo h3 { font-size: var(--t-xl); color: var(--oro); }
.donar-metodo > p { color: var(--niebla); }
.donar-metodo .btn { margin-top: auto; }
.donar-insignias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.donar-insignias li { display: inline-flex; align-items: center; gap: .45em; padding: .25em .65em; border: 1px solid rgba(221, 176, 111, .32); background: rgba(6, 12, 15, .5); font-size: var(--t-xs); font-weight: 700; }
.donar-insignias svg { width: 18px; height: 13px; flex: none; color: var(--bronce-claro); }
.donar-pie-metodo { font-size: var(--t-s); color: var(--hueso); }
.donar-metodo > p.donar-pie-metodo { color: var(--hueso); }
.donar-alias { display: flex; align-items: center; gap: .6em; color: var(--niebla); }
.donar-alias code, .donar-metodo .pasos code { font-family: ui-monospace, Consolas, monospace; color: var(--oro); }
.donar-alias code { padding: .1em .55em; font-size: 1.25rem; background: rgba(255, 255, 255, .05); border: 1px solid var(--placa-borde); user-select: all; }

.donar-casas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.donar-casas > li { padding-top: 14px; border-top: 2px solid rgba(221, 176, 111, .45); display: flex; flex-direction: column; gap: 10px; }
.donar-casas > li:last-child { border-top-color: var(--oro); }
.donar-casas h3 { font-size: var(--t-l); }
.donar-casas ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--t-s); color: var(--niebla); }
.donar-casas ul li::marker { color: var(--bronce); }
.donar-casa-precio { margin-top: auto; font-weight: 700; }
.donar-casa-precio .donar-unidad { display: inline; margin: 0 0 0 .3em; }
.donar-casas-contacto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 24px; padding: 14px 20px; border-left: 3px solid var(--verdin-claro); background: rgba(46, 94, 88, .28); }
.donar-casas-contacto p { max-width: 62ch; }
.donar-usuario { color: var(--oro); font-weight: 800; }

/* gracias.php y cancelado.php */
.donar-vuelta { max-width: 680px; }
.donar-vuelta-placa { padding: 40px 36px 34px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.donar-vuelta-placa.es-gracias { background: radial-gradient(420px 240px at 50% 0, rgba(143, 214, 255, .16), transparent 70%), var(--placa); }
.donar-vuelta-placa h1 { font-size: clamp(2.2rem, 6vw, 3.25rem); text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.donar-vuelta-placa p { max-width: 52ch; }
.donar-vuelta-lema { font-size: var(--t-l); line-height: 1.35; }
.donar-vuelta-gema { width: 76px; height: auto; filter: drop-shadow(0 0 18px rgba(143, 214, 255, .45)); animation: donar-gema-entra .9s cubic-bezier(.2, .7, .2, 1) .6s both; }
@keyframes donar-gema-entra { from { opacity: 0; transform: translateY(-14px) scale(.6); } to { opacity: 1; transform: none; } }
.donar-vuelta-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.donar-vuelta-nota { color: var(--niebla); font-size: var(--t-s); }

@media (max-width: 900px) {
  .donar-tesoro { padding: 24px 20px; }
  .donar-paquetes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border-bottom: 0; box-shadow: none; margin-top: 18px; }
  .donar-paquete, .donar-paquete.es-mayor {
    max-width: none; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 16px; align-items: center;
    padding: 16px 0; text-align: left; border-top: 1px solid var(--linea);
  }
  .donar-paquete > * { grid-column: 2; }
  .donar-paquete > .donar-brillo { grid-column: 1; grid-row: 1 / span 5; margin: 0; }
  .donar-paquete > .donar-comprar { grid-column: 1 / -1; }
  .donar-monton, .es-mayor .donar-monton { width: 104px; }
  .donar-cantidad { font-size: calc(1.35rem + var(--nivel) * .12rem); }
  .donar-unidad { display: inline; margin: 0 0 0 .25em; }
  .donar-desc { max-width: none; }
  .donar-precio { justify-content: flex-start; }
  .donar-paquete.es-mayor { margin: 18px 0 0; padding: 26px 14px 16px; border: 1px solid rgba(242, 206, 126, .75); }
  .donar-sello { left: 14px; transform: translateY(-50%); }
  .donar-metodos, .donar-casas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .donar-tesoro { padding: 20px 16px; margin-inline: -4px; }
  .donar-paquete, .donar-paquete.es-mayor { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; }
  .donar-monton, .es-mayor .donar-monton { width: 76px; }
  .donar-metodo { padding: 20px 18px; }
  .donar-vuelta-placa { padding: 30px 18px 26px; }
  .donar-casas-contacto { padding: 14px 16px; }
  .donar-casas-contacto .btn, .donar-metodo .btn { width: 100%; }
}

/* ---- Estadísticas: buscador de personajes y salón de la fama (estadisticas.php) ---- */
.stats-aviso { padding: 18px 22px; margin-bottom: 20px; }
.stats-panel:focus-visible { outline-offset: 6px; }

/* Pestañas: buscador | rankings */
.stats-pestanas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; margin-bottom: 30px; border-bottom: 1px solid rgba(221, 176, 111, .25); }
.stats-pestanas [role="tab"] {
  position: relative; min-height: 46px; padding: .45em 1.05em; margin-bottom: -1px;
  background: none; border: 1px solid transparent; border-bottom: 0; color: var(--niebla); cursor: var(--cursor-enlace, pointer); font-size: var(--t-m);
}
.stats-pestanas [role="tab"]:hover { color: var(--hueso); }
.stats-pestanas [role="tab"][aria-selected="true"] { color: var(--oro); background: var(--pizarra-honda); border-color: var(--placa-borde); box-shadow: inset 0 2px 0 var(--oro); }
.stats-pestanas [data-seccion="nivel"] { margin-left: 18px; }
.stats-pestanas [data-seccion="nivel"]::before { content: ""; position: absolute; left: -11px; top: 12px; bottom: 12px; width: 1px; background: rgba(221, 176, 111, .3); }

/* Estados (cargando, error, aviso solo para lectores de pantalla) */
.stats-estado { margin: 0 0 18px; color: var(--niebla); }
.stats-estado:empty { margin: 0; }
.stats-estado-cargando { display: flex; align-items: center; gap: .7em; color: var(--hueso); }
.stats-estado-cargando::before { content: ""; flex: none; width: 18px; height: 18px; border: 2px solid rgba(221, 176, 111, .3); border-top-color: var(--oro); border-radius: 50%; animation: stats-gira .8s linear infinite; }
.stats-estado-error { max-width: 640px; padding: 14px 18px; border: 1px solid var(--sangre-claro); border-left-width: 4px; background: rgba(179, 38, 46, .16); color: var(--hueso); overflow-wrap: anywhere; }
.stats-estado-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@keyframes stats-gira { to { transform: rotate(360deg); } }

/* Buscador */
.stats-buscador { max-width: 640px; padding: 22px 24px; margin-bottom: 20px; }
.stats-buscador label { display: block; font-weight: 700; margin-bottom: 8px; }
.stats-buscador-fila { display: flex; gap: 10px; }
.stats-buscador input {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: .55em .75em; border-radius: 0;
  background: var(--pizarra-honda); border: 1px solid rgba(221, 176, 111, .32); color: var(--hueso); transition: border-color .15s, box-shadow .15s;
}
.stats-buscador input:hover { border-color: rgba(221, 176, 111, .6); }
.stats-buscador input:focus { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.stats-buscador input[aria-invalid="true"] { border-color: var(--sangre-claro); }
.stats-pista { margin-top: 6px; font-size: var(--t-xs); color: var(--niebla); }
.stats-campo-error { margin-top: 4px; font-size: var(--t-s); font-weight: 700; color: var(--sangre-claro); }

/* Ficha del personaje: una sola placa, cabecera y bloques separados por líneas */
.stats-ficha { overflow: hidden; }
.stats-ficha-cabeza {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 24px;
  padding: 26px 28px 22px; border-bottom: 1px solid var(--placa-borde);
  background: linear-gradient(180deg, rgba(180, 130, 63, .16), rgba(180, 130, 63, 0));
}
.stats-ficha-quien { flex: 1 1 320px; min-width: 0; }
.stats-ficha h2 { font-size: clamp(2.2rem, 5vw, 3.25rem); overflow-wrap: anywhere; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.stats-ficha-sub { margin-top: 6px; color: var(--bronce-claro); font-weight: 700; }
.stats-ficha-desc { margin-top: 10px; max-width: 60ch; color: var(--niebla); font-style: italic; overflow-wrap: anywhere; }
.stats-sellos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stats-sello { display: inline-flex; align-items: center; gap: .55em; min-height: 36px; padding: .25em .85em; border: 1px solid rgba(221, 176, 111, .3); background: rgba(8, 15, 19, .6); font-size: var(--t-s); font-weight: 700; color: var(--niebla); }
.stats-sello-online { color: var(--verdin-luz); border-color: rgba(134, 187, 175, .5); }
.stats-fac-real { color: var(--oro); }
.stats-fac-real .estandarte { background: var(--oro); }
.stats-fac-caos { color: var(--sangre-claro); }
.stats-fac-caos .estandarte { background: var(--sangre-claro); box-shadow: 0 0 8px var(--sangre); }
.stats-fac-neutral { color: var(--bronce-claro); }
.stats-fac-neutral .estandarte { background: var(--niebla); box-shadow: none; }
.stats-ficha-cuerpo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-bloque { min-width: 0; padding: 20px 24px 22px; box-shadow: -1px -1px 0 0 var(--linea); }
.stats-bloque h3 { font-size: var(--t-l); color: var(--oro); margin-bottom: 10px; }
.stats-bloque dl { margin: 0; }
.stats-dato { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; padding: 7px 0; border-top: 1px solid var(--linea); font-size: var(--t-s); }
.stats-dato:first-child { border-top: 0; }
.stats-dato dt { color: var(--niebla); }
.stats-dato dd { margin: 0; font-weight: 700; text-align: right; }
.stats-dato.destacado dd { color: var(--oro); font-size: var(--t-m); }
.stats-barra { flex: 1 0 100%; height: 6px; margin-top: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.stats-barra-relleno { display: block; height: 100%; background: var(--relleno, var(--bronce-claro)); }
.stats-dato-barra.vida { --relleno: linear-gradient(90deg, #8E1C23, var(--sangre-claro)); }
.stats-dato-barra.mana { --relleno: linear-gradient(90deg, #2C5F99, #8FD6FF); }
.stats-dato-barra.energia { --relleno: linear-gradient(90deg, #8A6A2A, var(--oro)); }
.stats-exp-pct { font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--oro); }
.stats-exp-barra { height: 12px; margin: 10px 0 8px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(221, 176, 111, .3); overflow: hidden; }
.stats-exp-barra .stats-barra-relleno { background: linear-gradient(90deg, var(--verdin), var(--verdin-luz)); }

/* Salón de la fama: el podio es la pieza fuerte de la página */
.stats-salon-cabeza { max-width: 640px; margin: 0 auto; text-align: center; }
.stats-ceja { font-family: var(--f-gotica); font-size: var(--t-l); color: var(--bronce-claro); }
.stats-salon-cabeza h2 { font-size: var(--t-2xl); text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.stats-salon-cabeza p:last-child { margin-top: 6px; color: var(--niebla); }
.stats-salon > .stats-estado { margin-top: 20px; text-align: center; }
.stats-salon > .stats-estado-cargando { justify-content: center; }
.stats-salon > .stats-estado-error { margin-inline: auto; text-align: left; }
.stats-reintentar { text-align: center; }

.stats-podio {
  position: relative; list-style: none; max-width: 980px; margin: 36px auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "p2 p1 p3";
  align-items: end; gap: 0 clamp(8px, 2vw, 22px);
}
.stats-podio::before {
  content: ""; position: absolute; left: 50%; top: -70px; width: min(640px, 100%); height: 480px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(242, 206, 126, .22), rgba(242, 206, 126, .06) 55%, rgba(242, 206, 126, 0)); pointer-events: none;
}
.stats-podio::after { content: ""; grid-column: 1 / -1; height: 3px; background: linear-gradient(90deg, rgba(221, 176, 111, 0), rgba(221, 176, 111, .55), rgba(221, 176, 111, 0)); }
.stats-podio-puesto { position: relative; min-width: 0; display: flex; flex-direction: column; }
.stats-metal-oro { grid-area: p1; --metal: linear-gradient(180deg, #FBE7AE, #E2B65C 45%, #9C6A26); --metal-texto: var(--oro); --peana: 168px; }
.stats-metal-plata { grid-area: p2; --metal: linear-gradient(180deg, #F2F6F7, #B9C6CA 45%, #6F7F84); --metal-texto: #DCE6E8; --peana: 112px; }
.stats-metal-bronce { grid-area: p3; --metal: linear-gradient(180deg, #F1C08C, #C7884E 45%, #7A4520); --metal-texto: #EDB98A; --peana: 78px; }
.stats-podio-placa { display: grid; justify-items: center; gap: 6px; padding: 0 6px 16px; text-align: center; animation: stats-aparece .6s ease-out both; }
.stats-corona { width: 42px; height: 26px; background: var(--metal); clip-path: polygon(0 100%, 0 18%, 26% 58%, 50% 0, 74% 58%, 100% 18%, 100% 100%); }
.stats-podio-nombre { max-width: 100%; font-family: var(--f-gotica); font-size: var(--t-xl); line-height: 1.1; overflow-wrap: anywhere; }
.stats-metal-oro .stats-podio-nombre { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.stats-podio-nombre a { color: var(--hueso); text-decoration: none; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.stats-podio-nombre a:hover { color: var(--metal-texto); text-decoration: underline; }
.stats-podio-cifra { display: grid; justify-items: center; line-height: 1.1; }
.stats-podio-cifra b { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 800; color: var(--metal-texto); }
.stats-metal-oro .stats-podio-cifra b { font-size: clamp(1.9rem, 3.4vw, 2.75rem); text-shadow: 0 0 26px rgba(242, 206, 126, .35); }
.stats-podio-cifra span { font-size: var(--t-xs); color: var(--niebla); }
.stats-podio-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 2px 0 0; font-size: var(--t-xs); color: var(--niebla); }
.stats-podio-extra div { display: flex; gap: .35em; }
.stats-podio-extra dd { margin: 0; color: var(--hueso); }
.stats-peana {
  position: relative; height: var(--peana); display: grid; place-items: start center; padding-top: 12px;
  background: linear-gradient(180deg, #2B3E45, #17252B 60%, #0F191D);
  border: 1px solid rgba(221, 176, 111, .25); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -30px 40px rgba(0, 0, 0, .35);
  transform-origin: bottom; animation: stats-alza .7s cubic-bezier(.2, .7, .2, 1) both;
}
.stats-peana::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--metal); }
.stats-peana span { font-family: var(--f-gotica); font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 1; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-metal-bronce .stats-peana { animation-delay: .05s; }
.stats-metal-plata .stats-peana { animation-delay: .15s; }
.stats-metal-oro .stats-peana { animation-delay: .25s; }
.stats-metal-bronce .stats-podio-placa { animation-delay: .35s; }
.stats-metal-plata .stats-podio-placa { animation-delay: .45s; }
.stats-metal-oro .stats-podio-placa { animation-delay: .6s; }
@keyframes stats-alza { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
@keyframes stats-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Del puesto 4 al 20: tabla sobria */
.stats-tabla-marco { max-width: 980px; margin: 0 auto; }
.stats-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.stats-tabla th, .stats-tabla td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--linea); }
.stats-tabla thead th { font-size: var(--t-xs); font-weight: 700; color: var(--niebla); border-bottom-color: var(--placa-borde); }
.stats-tabla tbody tr:last-child > * { border-bottom: 0; }
.stats-tabla tbody tr:hover { background: rgba(46, 94, 88, .2); }
.stats-tabla .n { text-align: right; }
.stats-tabla .pos { width: 4.2rem; text-align: right; font-family: var(--f-gotica); font-size: var(--t-l); line-height: 1; color: var(--bronce-claro); }
.stats-tabla thead .pos { font-family: var(--f-texto); font-size: var(--t-xs); color: var(--niebla); }
.stats-tabla abbr { text-decoration: none; }
.stats-tabla .jugador { font-weight: 700; }
.stats-tabla .jugador a { color: var(--hueso); text-decoration: none; overflow-wrap: anywhere; }
.stats-tabla .jugador a:hover { color: var(--oro); text-decoration: underline; }
.stats-tabla .principal { color: var(--oro); font-weight: 700; }

@media (max-width: 900px) {
  .stats-ficha-cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stats-pestanas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; border-bottom: 0; }
  .stats-pestanas [role="tab"] { min-height: 44px; margin: 0; padding: .35em .2em; font-size: var(--t-s); border: 1px solid rgba(221, 176, 111, .3); background: rgba(12, 22, 27, .7); }
  .stats-pestanas [role="tab"][aria-selected="true"] { color: var(--hueso); background: rgba(46, 94, 88, .65); border-color: var(--verdin-claro); box-shadow: none; }
  .stats-pestanas [data-seccion="buscador"] { grid-column: 1 / -1; }
  .stats-pestanas [data-seccion="nivel"] { margin-left: 0; }
  .stats-pestanas [data-seccion="nivel"]::before { display: none; }

  .stats-buscador { padding: 18px 16px; }
  .stats-buscador-fila { flex-wrap: wrap; }
  .stats-buscador-fila .btn { flex: 1 0 100%; }
  .stats-ficha-cabeza { padding: 20px 18px 18px; }
  .stats-ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .stats-bloque { padding: 16px 18px 18px; }

  .stats-podio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "p1" "p2" "p3"; gap: 10px; margin-top: 24px; }
  .stats-podio::before { top: -40px; height: 280px; }
  .stats-podio::after { display: none; }
  .stats-podio-puesto { display: grid; grid-template-columns: 64px minmax(0, 1fr); background: var(--placa); border: 1px solid var(--placa-borde); }
  .stats-metal-oro { border-color: rgba(242, 206, 126, .6); box-shadow: 0 0 30px rgba(242, 206, 126, .14); }
  .stats-peana { order: -1; height: auto; min-height: 76px; padding: 0; place-items: center; border: 0; border-right: 1px solid var(--placa-borde); }
  .stats-peana::before { left: 0; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .stats-peana span { font-size: 2.2rem; }
  .stats-podio-placa { justify-items: start; gap: 2px; padding: 12px 14px; text-align: left; }
  .stats-corona { display: none; }
  .stats-podio-nombre, .stats-metal-oro .stats-podio-nombre { font-size: var(--t-xl); }
  .stats-podio-cifra { grid-auto-flow: column; justify-items: start; align-items: baseline; gap: .45em; }
  .stats-podio-cifra b, .stats-metal-oro .stats-podio-cifra b { font-size: 1.625rem; }
  .stats-podio-extra { justify-content: flex-start; }

  .stats-tabla-marco { margin-top: 10px; }
  .stats-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stats-tabla, .stats-tabla tbody { display: block; }
  .stats-tabla tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 12px 14px 12px 3.4rem; border-bottom: 1px solid var(--linea); }
  .stats-tabla tbody tr:last-child { border-bottom: 0; }
  .stats-tabla tbody th, .stats-tabla tbody td { display: block; padding: 0; border: 0; text-align: left; }
  .stats-tabla tbody .pos { position: absolute; left: 14px; top: 12px; width: 2.4rem; text-align: left; }
  .stats-tabla tbody .jugador { flex: 1 0 100%; font-size: var(--t-m); }
  .stats-tabla td[data-label]::before { content: attr(data-label) " "; font-weight: 400; color: var(--niebla); }
}

/* ---------- 9. Noticias: secciones de cambios por tipo ("### Mejoras" + "- entrada") ---------- */
/* Cada tipo tiene su color (contraste AA sobre la placa) e icono SVG; el texto de las entradas sigue en hueso. */
.nota-novedad { --nota: #7DD3A0; --nota-fondo: rgba(125, 211, 160, .08); }
.nota-mejora { --nota: #E2B866; --nota-fondo: rgba(226, 184, 102, .08); }
.nota-correccion { --nota: #F08A8A; --nota-fondo: rgba(240, 138, 138, .08); }
.nota-balance { --nota: #8DB8EA; --nota-fondo: rgba(141, 184, 234, .08); }
.nota-rendimiento { --nota: #B9A3EE; --nota-fondo: rgba(185, 163, 238, .08); }
.nota-conocido { --nota: #F0A060; --nota-fondo: rgba(240, 160, 96, .08); }
.cuerpo-noticia .nota-parche { margin-top: 1.4em; border: 1px solid var(--linea); border-left: 3px solid var(--nota, var(--bronce)); background: var(--nota-fondo, transparent); }
.cuerpo-noticia .nota-parche h3 { display: flex; align-items: center; gap: .55em; margin: 0; padding: .6em 1em; border-bottom: 1px solid var(--linea); font-family: var(--f-texto); font-size: var(--t-m); font-weight: 800; line-height: 1.3; letter-spacing: .01em; color: var(--nota); }
.cuerpo-noticia .nota-parche h3 svg { flex: none; width: 1.3em; height: 1.3em; }
.cuerpo-noticia .nota-parche ul { list-style: none; margin: 0; padding: .35em 1em .55em; }
.cuerpo-noticia .nota-parche li { position: relative; max-width: none; margin: 0; padding: .4em 0 .4em 1.2em; overflow-wrap: anywhere; }
.cuerpo-noticia .nota-parche li + li { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.cuerpo-noticia .nota-parche li::before { content: ""; position: absolute; left: .1em; top: 1.05em; width: .42em; height: .42em; background: var(--nota); transform: rotate(45deg); }
.cuerpo-noticia .nota-parche + .nota-parche { margin-top: 1em; }
@media (max-width: 640px) {
  .cuerpo-noticia .nota-parche h3 { padding: .55em .8em; }
  .cuerpo-noticia .nota-parche ul { padding: .3em .8em .5em; }
}

/* ---- Mapa del mundo ---- */
/* mapa.php + assets/js/mapa.js (Leaflet 1.9.4 en assets/vendor/leaflet). El mapa ocupa la pantalla bajo la
   cabecera; encima flotan el buscador, la ficha, la leyenda, las coordenadas y el minimapa; a la derecha el panel
   (hoja inferior en móvil). Las capas de Leaflet quedan aisladas en .mapa-lienzo (z-index 0). */
.mapa-pagina { padding-top: calc(var(--cabecera) + env(safe-area-inset-top, 0px)); background: var(--pizarra); }
.mapa-app { --der: 404px; --mapa-borde: rgba(221, 176, 111, .3); --mapa-placa: rgba(9, 17, 21, .95); position: relative; display: flex; flex-direction: column; height: calc(100vh - var(--cabecera)); height: calc(100svh - var(--cabecera) - env(safe-area-inset-top, 0px)); min-height: 520px; background: var(--pizarra-honda); border-bottom: 1px solid var(--placa-borde); }
.mapa-app:fullscreen { height: 100vh; min-height: 0; }
.mapa-barra { display: flex; align-items: center; gap: 8px 16px; min-height: 54px; padding-block: 6px; background: rgba(8, 15, 19, .97); border-bottom: 1px solid var(--linea); }
.mapa-barra h1 { font-size: 1.65rem; color: var(--oro); white-space: nowrap; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.mapa-donde { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--niebla); font-size: var(--t-s); }
.mapa-donde small { color: var(--niebla); }
.mapa-donde-chip { display: inline-block; padding: 0 .5em; margin-right: .3em; border: 1px solid var(--verdin-claro); color: var(--verdin-luz); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.mapa-acciones { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mapa-mundo-sel { min-height: 38px; background: var(--mapa-placa); border: 1px solid var(--mapa-borde); padding: 0 .6em; }
.mapa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 38px; padding: 0 .8em; border: 1px solid var(--mapa-borde); background: rgba(12, 22, 27, .9); color: var(--hueso); font-size: var(--t-s); font-weight: 700; line-height: 1.15; cursor: var(--cursor-enlace, pointer); transition: border-color .15s, color .15s; }
.mapa-btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.mapa-btn:hover { border-color: var(--oro); color: var(--oro); }
.mapa-btn[aria-pressed="true"], #mapa-panel-btn[aria-expanded="true"] { border-color: var(--verdin-claro); background: rgba(46, 94, 88, .55); }
.mapa-btn-mini { min-height: 32px; padding: 0 .65em; font-size: var(--t-xs); }

.mapa-cuerpo { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* titular "Hoy en Tierras de AODrag": franja de datos en vivo entre la barra y el mapa */
.mapa-titular { display: flex; align-items: center; gap: 6px; min-height: 38px; padding-block: 4px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(90deg, rgba(180, 130, 63, .2), rgba(8, 15, 19, .96) 40%); border-bottom: 1px solid var(--linea); animation: mapa-hoy-entra .6s ease-out both; }
.mapa-titular::-webkit-scrollbar { display: none; }
@keyframes mapa-hoy-entra { from { opacity: 0; transform: translateY(-6px); } }
.mapa-hoy-titulo { flex: none; margin-right: 6px; font-family: var(--f-gotica); font-size: 1.15rem; color: var(--oro); white-space: nowrap; }
.mapa-hoy-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: rgba(9, 17, 21, .9); border: 1px solid var(--mapa-borde); color: var(--hueso); font-size: var(--t-xs); font-weight: 700; white-space: nowrap; cursor: pointer; }
.mapa-hoy-chip:hover, .mapa-hoy-chip:focus-visible { border-color: var(--oro); color: var(--oro); }
.mapa-hoy-chip .mapa-ico { width: 16px; height: 16px; }
.mapa-hoy-chip .estandarte { width: 9px; height: 13px; }
.mapa-hoy-chip .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verdin-claro); box-shadow: 0 0 6px var(--verdin-claro); }
.mapa-hoy-brillo { width: 9px; height: 9px; transform: rotate(45deg); background: #f2ce7e; box-shadow: 0 0 8px #f2ce7e; }
.mapa-hoy-alerta { width: 9px; height: 9px; border-radius: 50%; background: var(--sangre-claro); box-shadow: 0 0 8px var(--sangre-claro); animation: mapa-hoy-latido 1.2s ease-in-out infinite; }
@keyframes mapa-hoy-latido { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mapa-titular, .mapa-hoy-alerta { animation: none; } }
/* explorar: mapas para tu nivel y caza del tesoro */
.mapa-tp > h3 + .mapa-intro { margin-top: 2px; }
.mapa-nivel-form { display: grid; grid-template-columns: auto 90px minmax(0, 1fr); gap: 8px; align-items: center; }
.mapa-nivel-form label:not(.oculto) { font-size: var(--t-s); color: var(--hueso); font-weight: 700; }
.mapa-nivel-form .mapa-campo { margin-bottom: 0; }
.mapa-nivel-cab { margin: 10px 0 2px; color: var(--oro); font-size: var(--t-s); font-weight: 700; }
.mapa-nivel-dato { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.mapa-nivel-dato small { color: var(--niebla); }
#mapa-nivel-res > .mapa-btn, #mapa-tesoros > .mapa-btn { margin-top: 8px; }
.mapa-sec h4 .mapa-item { width: 24px; height: 24px; }
.mapa-tesoro-premios { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mapa-tesoro-premios li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: rgba(242, 206, 126, .05); border: 1px solid rgba(242, 206, 126, .22); text-align: center; font-size: var(--t-xs); color: var(--hueso); }
/* próximamente (En vivo) */
.mapa-prox-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.mapa-prox-lista li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(221, 176, 111, .12); font-size: var(--t-s); }
.mapa-prox-lista li .mapa-ico { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }
.mapa-prox-cuando { color: var(--oro); font-weight: 700; font-size: var(--t-xs); }
.mapa-prox-lista button { padding: 2px 8px; background: none; border: 1px solid var(--mapa-borde); color: var(--bronce-claro); font-size: var(--t-xs); cursor: pointer; }
.mapa-prox-lista button:hover { border-color: var(--oro); color: var(--oro); }
.mapa-cuerpo.panel-plegado { --der: 12px; }
.mapa-lienzo { position: absolute; inset: 0; z-index: 0; background: #1d3b52; font-family: var(--f-texto); }
.mapa-lienzo:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; }
.mapa-lienzo .mapa-tesela { image-rendering: pixelated; }
.mapa-lienzo.leaflet-container { cursor: grab; }
.mapa-lienzo .leaflet-interactive, .mapa-lienzo .leaflet-marker-icon { cursor: var(--cursor-enlace, pointer); }
.mapa-lienzo .leaflet-bottom.leaflet-right { right: calc(var(--der) - 10px); bottom: 2px; }
.mapa-lienzo .leaflet-bar { border: 1px solid var(--mapa-borde); border-radius: 0; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.mapa-lienzo .leaflet-bar a { width: 36px; height: 36px; line-height: 34px; border-radius: 0 !important; background: var(--mapa-placa); color: var(--hueso); border-bottom-color: var(--linea); font: 700 20px/34px var(--f-texto); }
.mapa-lienzo .leaflet-bar a:hover, .mapa-lienzo .leaflet-bar a:focus-visible { background: rgba(46, 94, 88, .8); color: var(--oro); }
.mapa-lienzo .leaflet-bar a.leaflet-disabled { background: rgba(9, 17, 21, .8); color: #56635f; }

/* superposiciones SVG (Leaflet pone el color en atributos; el CSS manda) */
.mapa-lienzo path.mapa-sel { stroke: var(--oro); filter: drop-shadow(0 0 6px rgba(242, 206, 126, .75)); }
.mapa-lienzo path.mapa-buscado { stroke: #86e0d0; fill: #86e0d0; }
.mapa-lienzo path.mapa-fac-armada { stroke: #4a8fe7; fill: #4a8fe7; }
.mapa-lienzo path.mapa-fac-caos { stroke: #e0473d; fill: #e0473d; }
.mapa-lienzo path.mapa-fac-disputa { stroke: #e8a13a; fill: #e8a13a; stroke-dasharray: 10 6; }
.mapa-lienzo path.mapa-segura { fill: #57d68d; stroke: none; }
.mapa-lienzo path.mapa-seguro-zona { stroke: #57d68d; fill: #57d68d; }
.mapa-lienzo path.mapa-pesca-zona { stroke: #43c6e0; fill: #43c6e0; }
.mapa-lienzo path.mapa-ruta-linea { stroke: var(--oro); stroke-dasharray: 12 9; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .9)); animation: mapa-hormigas 1.1s linear infinite; }
.mapa-lienzo path.mapa-invasion { stroke: #f0666c; fill: #f0666c; animation: mapa-late 1.6s ease-in-out infinite; }
.mapa-lienzo path.mapa-caliente { stroke: #ff9f43; fill: #ff9f43; stroke-dasharray: 6 5; }
@keyframes mapa-hormigas { to { stroke-dashoffset: -21; } }
@keyframes mapa-late { 50% { stroke-opacity: .35; } }

/* resúmenes por mapa (zoom medio) y nombres de ciudades (zoom bajo) */
.mapa-res-cont, .mapa-etq-cont, .mapa-vivo-m { background: none; border: 0; }
.mapa-res { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; }
.mapa-res-t { display: flex; align-items: center; gap: 5px; padding: 1px 7px; background: rgba(8, 15, 19, .86); border: 1px solid var(--linea); font-size: 12px; line-height: 1.5; color: var(--hueso); }
.mapa-res-t small { color: var(--niebla); font-size: 11px; }
.mapa-res-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 168px; }
.mapa-res-c { display: inline-flex; align-items: center; gap: 1px; padding: 0 4px 0 1px; background: rgba(8, 15, 19, .78); font-size: 11px; color: var(--hueso); font-variant-numeric: tabular-nums; }
.mapa-res-c .mapa-ico { width: 15px; height: 15px; }
.mapa-res-cont:hover .mapa-res-t { border-color: var(--oro); }
.mapa-pel { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #57d68d; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.mapa-pel.p1 { background: #a4d65e; } .mapa-pel.p2 { background: #e8d454; } .mapa-pel.p3 { background: #f29d48; } .mapa-pel.p4 { background: #ef5446; } .mapa-pel.p5 { background: #c45cf0; }
.mapa-etq { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--f-gotica); font-size: 15px; font-weight: 700; color: var(--hueso); text-shadow: 0 0 4px #000, 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .8); pointer-events: none; }
.mapa-etq-armada { color: #b3d3ff; } .mapa-etq-caos { color: #ffaaa3; } .mapa-etq-disputa { color: #ffd08a; }

/* tooltip */
.mapa-lienzo .leaflet-tooltip.mapa-tip { padding: 5px 9px; background: rgba(9, 17, 21, .97); color: var(--hueso); border: 1px solid var(--bronce); border-radius: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); font-family: var(--f-texto); font-size: var(--t-xs); line-height: 1.35; }
.mapa-lienzo .leaflet-tooltip.mapa-tip i { color: var(--bronce-claro); }
.mapa-lienzo .leaflet-tooltip.mapa-tip small { color: var(--niebla); }
.mapa-lienzo .leaflet-tooltip-top.mapa-tip::before { border-top-color: var(--bronce); }

/* marcadores en vivo y de ruta */
.mapa-vivo-m > * { vertical-align: middle; }
.mapa-vivo-m { white-space: nowrap; }
.mapa-vivo-castillo, .mapa-vivo-boss, .mapa-vivo-raid { display: flex !important; align-items: center; gap: 5px; transform-origin: 0 0; }
.mapa-vivo-castillo b, .mapa-vivo-boss b, .mapa-vivo-raid b { position: relative; padding: 1px 6px; background: rgba(8, 15, 19, .92); border: 1px solid var(--bronce); font-size: 12px; color: var(--hueso); font-weight: 700; }
/* Vista del mundo entero: los nombres de bosses y raids tapan los de las ciudades; se ven al pasar el ratón. */
.zoom-bajo .mapa-vivo-boss b, .zoom-bajo .mapa-vivo-raid b { display: none; }
.zoom-bajo .mapa-vivo-boss:hover b, .zoom-bajo .mapa-vivo-raid:hover b { display: inline-block; }
.mapa-vivo-castillo { margin: -12px 0 0 -8px; }
.mapa-vivo-castillo .estandarte { width: 14px; height: 20px; }
.mapa-vivo-boss i, .mapa-vivo-raid i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--niebla); border: 2px solid #0b1216; flex: none; }
.mapa-vivo-boss { margin: -8px 0 0 -8px; }
.mapa-vivo-raid { margin: -8px 0 0 -8px; }
.mapa-vivo-boss.tono-vivo i, .mapa-vivo-boss.tono-activo i, .mapa-vivo-raid.raid-vivo i { background: var(--sangre-claro); box-shadow: 0 0 0 4px rgba(240, 102, 108, .3), 0 0 14px var(--sangre); animation: late 1.6s ease-in-out infinite; }
.mapa-vivo-raid.raid-muerto i, .mapa-vivo-boss.tono-muerto i { background: #5b6b68; }
.mapa-vivo-raid.raid-desconocido i, .mapa-vivo-raid.raid-atrasado i, .mapa-vivo-boss.tono-espera i, .mapa-vivo-boss.tono-neutro i { background: var(--bronce-claro); }
.mapa-vivo-raid.raid-sin-datos i { background: #3a4744; }
.mapa-vivo-raid.raid-sin-datos b { color: var(--niebla); border-color: var(--linea); }
.mapa-ruta-pin span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oro); color: #1a1206; border: 2px solid #1a1206; font-weight: 800; box-shadow: 0 0 0 3px rgba(242, 206, 126, .35); }

/* superposiciones del mapa */
.mapa-buscador { position: absolute; z-index: 20; top: 12px; left: 12px; width: min(390px, calc(100% - var(--der) - 24px)); }
.mapa-q-fila { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 6px 0 12px; background: var(--mapa-placa); border: 1px solid var(--mapa-borde); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.mapa-q-fila:focus-within { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro), 0 10px 28px rgba(0, 0, 0, .45); }
.mapa-q-fila > svg { width: 18px; height: 18px; flex: none; fill: var(--niebla); }
#mapa-q { flex: 1; min-width: 0; min-height: 44px; background: transparent; border: 0; outline: 0; font-size: 1.0625rem; }
#mapa-q::placeholder { color: #7f918c; }
.mapa-q-limpiar { width: 36px; height: 36px; flex: none; background: none; border: 0; color: var(--niebla); font-size: 1.5rem; line-height: 1; cursor: var(--cursor-enlace, pointer); }
.mapa-q-limpiar:hover { color: var(--oro); }
.mapa-bus-tabs { display: flex; gap: 2px; margin-top: 4px; overflow-x: auto; scrollbar-width: none; }
.mapa-bus-tabs::-webkit-scrollbar { display: none; }
.mapa-bus-tabs button { flex: none; min-height: 30px; padding: .2em .7em; background: rgba(9, 17, 21, .9); border: 1px solid var(--linea); color: var(--niebla); font-size: var(--t-xs); font-weight: 700; cursor: var(--cursor-enlace, pointer); }
.mapa-bus-tabs button:hover { color: var(--hueso); }
.mapa-bus-tabs button[aria-selected="true"] { color: var(--hueso); background: rgba(46, 94, 88, .9); border-color: var(--verdin-claro); }
.mapa-sugerencias { list-style: none; margin: 4px 0 0; padding: 4px 0; max-height: min(52vh, 430px); overflow: auto; background: rgba(9, 17, 21, .98); border: 1px solid var(--mapa-borde); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.mapa-sugerencias li[role="option"] { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 12px; cursor: var(--cursor-enlace, pointer); }
.mapa-sugerencias li[role="option"]:hover, .mapa-sugerencias li[aria-selected="true"] { background: rgba(46, 94, 88, .6); }
.mapa-sugerencias li[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--oro); }
.mapa-sug-grupo { padding: 8px 12px 2px; color: var(--bronce-claro); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.mapa-sug-vacio { padding: 10px 12px; color: var(--niebla); font-size: var(--t-s); }
.mapa-sug-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mapa-sug-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-sug-t small, .mapa-bus-lista small { color: var(--niebla); font-size: var(--t-xs); }
.mapa-bus-detalle { position: relative; margin-top: 4px; padding: 12px 14px; max-height: min(50vh, 440px); overflow: auto; background: rgba(9, 17, 21, .98); border: 1px solid var(--mapa-borde); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.mapa-bus-detalle h3 { display: flex; align-items: center; gap: 8px; padding-right: 34px; font-family: var(--f-texto); font-size: var(--t-m); color: var(--oro); }
.mapa-bus-detalle > p { margin-top: 4px; color: var(--niebla); font-size: var(--t-s); }
.mapa-bus-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.mapa-bus-lista button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 10px; text-align: left; background: rgba(255, 255, 255, .03); border: 1px solid var(--linea); cursor: var(--cursor-enlace, pointer); }
.mapa-bus-lista button:hover { border-color: var(--bronce-claro); background: rgba(46, 94, 88, .35); }
.mapa-bus-lista button > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mapa-bus-npc { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.mapa-bus-npc > span { display: flex; flex-direction: column; min-width: 0; }
.mapa-bus-mapas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mapa-bus-mapas button { width: auto; min-height: 32px; padding: 2px 8px; font-size: var(--t-xs); }
.mapa-cerrar { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--niebla); font-size: 1.6rem; line-height: 1; cursor: var(--cursor-enlace, pointer); }
.mapa-cerrar:hover { color: var(--oro); border-color: var(--linea); }

.mapa-ico { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle; }
.mapa-ico.grande { width: 40px; height: 40px; }
.mapa-item { width: 32px; height: 32px; flex: none; background: rgba(0, 0, 0, .35); }
.chip { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--linea); color: var(--niebla); font-size: 11px; font-weight: 700; vertical-align: middle; }
.chip-hostil { color: var(--sangre-claro); border-color: rgba(240, 102, 108, .5); }
.chip-sacerdote { color: #9cc4ff; border-color: rgba(90, 160, 255, .5); }
.chip-banquero { color: #f5d384; border-color: rgba(242, 193, 78, .5); }
.chip-comerciante { color: #87e0a8; border-color: rgba(63, 191, 114, .5); }
.chip-entrenador { color: #d0b2f7; border-color: rgba(176, 124, 240, .5); }
.chip-otro { color: var(--hueso); }
.mapa-ficha .chip { margin-left: 0; }

/* ficha de NPC */
.mapa-ficha { position: absolute; z-index: 30; left: 12px; bottom: 12px; width: min(410px, calc(100% - var(--der) - 24px)); max-height: calc(100% - 132px); overflow: auto; padding: 14px 16px 16px; background: rgba(9, 17, 21, .98); border: 1px solid var(--bronce); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 22px 50px rgba(0, 0, 0, .6); overscroll-behavior: contain; }
.mapa-ficha:focus { outline: 0; }
.mapa-ficha:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.mapa-ficha-cabeza { display: flex; align-items: center; gap: 12px; padding-right: 38px; }
.mapa-ficha-cabeza h2 { font-size: 1.8rem; color: var(--oro); }
.mapa-ficha-sub { color: var(--bronce-claro); font-size: var(--t-s); font-style: italic; }
/* dentro del juego (?juego=1): solo el mapa, a pantalla completa de la ventana */
.modo-juego .cabecera, .modo-juego .pie, .modo-juego .mapa-seo, .modo-juego .escena, .modo-juego .telon, .modo-juego .saltar { display: none !important; }
.modo-juego .mapa-pagina { padding-top: 0; }
.mapa-btn-cerrar-juego { border-color: var(--sangre-claro); }
.mapa-btn-seguir.activo { border-color: #7ef2b0; color: #7ef2b0; }
.mapa-btn-cerrar-juego:hover { background: rgba(240, 102, 108, .15); }
.modo-juego .mapa-app { height: 100vh; height: 100dvh; min-height: 0; border-bottom: 0; }
/* "Estás aquí" (posición del jugador): verde, fija */
.mapa-faro.mapa-yo .nucleo { background: #7ef2b0; box-shadow: 0 0 12px 4px rgba(126, 242, 176, .8); }
.mapa-faro.mapa-yo .anillo { border-color: #7ef2b0; }
.mapa-faro.mapa-yo b { color: #7ef2b0; border-color: #7ef2b0; font-size: 1rem; }
/* faro del vuelo de entrada */
.mapa-faro { width: 0 !important; height: 0 !important; background: none; border: 0; cursor: pointer; }
.mapa-faro .anillo, .mapa-faro .nucleo { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.mapa-faro .nucleo { width: 14px; height: 14px; background: #f2ce7e; box-shadow: 0 0 12px 4px rgba(242, 206, 126, .8); }
.mapa-faro .anillo { width: 16px; height: 16px; border: 2px solid #f2ce7e; animation: mapa-faro-onda 2s ease-out infinite; }
.mapa-faro .anillo.a2 { animation-delay: 1s; }
@keyframes mapa-faro-onda { from { width: 16px; height: 16px; opacity: 1; } to { width: 150px; height: 150px; opacity: 0; } }
.mapa-faro b { position: absolute; left: 0; top: -22px; transform: translate(-50%, -100%); padding: 6px 12px; white-space: nowrap; background: rgba(8, 15, 19, .95); border: 1px solid var(--oro); color: var(--oro); font-family: var(--f-gotica); font-size: 1.15rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); animation: mapa-faro-entra .5s ease-out both .2s; }
@keyframes mapa-faro-entra { from { opacity: 0; transform: translate(-50%, -80%); } }
@media (prefers-reduced-motion: reduce) { .mapa-faro .anillo { animation: none; opacity: .6; width: 40px; height: 40px; } .mapa-faro b { animation: none; } }
/* criaturas dibujadas sobre el mapa (pane "sprites"; --e = escala del zoom) */
.mapa-lienzo .leaflet-sprites-pane { --e: 1; }
.mapa-spr-m { width: 0 !important; height: 0 !important; background: none; border: 0; cursor: pointer; }
.mapa-spr-m:not(.listo) { display: none; }
.mapa-spr { position: absolute; left: calc(var(--ox, 0) * var(--e) * -1px); top: calc(var(--oy, 0) * var(--e) * -1px); width: calc(var(--fw, 32) * var(--e) * 1px); height: calc(var(--fh, 32) * var(--e) * 1px); background-repeat: no-repeat; background-position: 0 0; background-size: calc(var(--fw, 32) * var(--n, 1) * var(--e) * 1px) 100%; image-rendering: pixelated; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55)); }
.mapa-spr-m.anima .mapa-spr { animation: mapa-spr-andar calc(var(--n, 1) * .13s) steps(var(--n, 1)) infinite; }
@keyframes mapa-spr-andar { to { background-position: calc(var(--fw, 32) * var(--n, 1) * var(--e) * -1px) 0; } }
/* bajo un techo: se ve a través de él */
.mapa-spr-m.techo .mapa-spr { opacity: .62; }
.mapa-spr-m:hover .mapa-spr { filter: drop-shadow(0 0 2px #f2ce7e) drop-shadow(0 2px 1px rgba(0, 0, 0, .55)); }
@media (prefers-reduced-motion: reduce) { .mapa-spr-m.anima .mapa-spr { animation: none; } }
/* dibujo del NPC: escenario con suelo y el sprite caminando en el sitio */
.mapa-retrato { position: relative; display: grid; place-items: end center; height: 0; margin: 10px -16px 0; overflow: hidden; background: radial-gradient(ellipse 60% 26% at 50% 88%, rgba(0, 0, 0, .55), transparent 70%), radial-gradient(ellipse 70% 90% at 50% 100%, rgba(180, 130, 63, .16), transparent 70%), linear-gradient(180deg, rgba(8, 15, 19, 0), rgba(8, 15, 19, .6)); border-block: 1px solid transparent; transition: height .25s ease, border-color .25s ease; }
.mapa-retrato.listo { height: 176px; border-color: rgba(180, 130, 63, .28); }
.mapa-retrato-hostil { background-color: rgba(120, 30, 24, .12); }
.mapa-retrato-sprite { --e: 2; display: block; margin-bottom: 14px; width: calc(var(--fw, 32) * var(--e) * 1px); height: calc(var(--fh, 32) * var(--e) * 1px); background-repeat: no-repeat; background-position: 0 0; background-size: calc(var(--fw, 32) * var(--n, 1) * var(--e) * 1px) 100%; image-rendering: pixelated; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .6)); animation: mapa-npc-andar calc(var(--n, 1) * .13s) steps(var(--n, 1)) infinite; }
@keyframes mapa-npc-andar { to { background-position: calc(var(--fw, 32) * var(--n, 1) * var(--e) * -1px) 0; } }
@media (prefers-reduced-motion: reduce) { .mapa-retrato-sprite { animation: none; } .mapa-retrato { transition: none; } }
.mapa-ficha-tipo { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--niebla); font-size: var(--t-xs); }
.mapa-ficha-desc { margin-top: 8px; font-size: var(--t-s); }
.mapa-ficha-frase { margin: 8px 0 0; padding: 6px 12px; border-left: 2px solid var(--bronce); background: rgba(180, 130, 63, .08); color: var(--hueso); font-style: italic; font-size: var(--t-s); }
.mapa-ficha-nota { margin-top: 6px; color: var(--oro); font-size: var(--t-xs); }
.mapa-ficha h3 { margin-top: 14px; font-family: var(--f-texto); font-size: var(--t-s); color: var(--bronce-claro); text-transform: uppercase; letter-spacing: .07em; }
.mapa-ficha .mapa-stats { margin: 10px 0 0; }
.mapa-ficha-pie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* coordenadas, leyenda, minimapa, avisos */
.mapa-coords { position: absolute; z-index: 10; left: 12px; bottom: 12px; display: flex; gap: 12px; max-width: calc(100% - var(--der) - 300px); padding: 4px 10px; background: rgba(8, 15, 19, .88); border: 1px solid var(--linea); color: var(--hueso); font-size: var(--t-xs); white-space: nowrap; pointer-events: none; }
.mapa-coords-z { color: var(--niebla); }
.mapa-leyenda { position: absolute; z-index: 10; left: 12px; bottom: 46px; max-width: 250px; background: rgba(9, 17, 21, .94); border: 1px solid var(--mapa-borde); font-size: var(--t-xs); }
.mapa-leyenda summary { padding: 6px 10px; color: var(--bronce-claro); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; cursor: var(--cursor-enlace, pointer); }
.mapa-leyenda ul { list-style: none; margin: 0; padding: 0 10px 9px; display: grid; gap: 4px; }
.mapa-leyenda li { display: flex; align-items: center; }
.mapa-ley-m { display: inline-block; flex: none; width: 20px; height: 12px; margin-right: 8px; }
.mapa-ley-sel { border: 2px solid var(--oro); box-shadow: 0 0 6px rgba(242, 206, 126, .6); }
.mapa-ley-busqueda { border: 2px dashed #86e0d0; background: rgba(134, 224, 208, .12); }
.mapa-ley-armada { border: 2px solid #4a8fe7; background: rgba(74, 143, 231, .12); }
.mapa-ley-caos { border: 2px solid #e0473d; background: rgba(224, 71, 61, .12); }
.mapa-ley-disputa { border: 2px dashed #e8a13a; background: rgba(232, 161, 58, .12); }
.mapa-ley-seguro { background: rgba(87, 214, 141, .4); }
.mapa-ley-ruta { height: 0; border-top: 3px dashed var(--oro); }
.mapa-ley-castillo { width: 11px; height: 15px; margin: 0 17px 0 4px; background: var(--bronce-claro); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
.mapa-ley-invasion { border: 2px solid #f0666c; background: rgba(240, 102, 108, .3); }
.mapa-ley-caliente { border: 2px dashed #ff9f43; background: rgba(255, 159, 67, .25); }
.mapa-leyenda .mapa-ley-iconos { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px; border-top: 1px solid var(--linea); }
.mapa-mini { position: absolute; z-index: 10; right: calc(var(--der) + 46px); bottom: 12px; width: 190px; height: 160px; border: 1px solid var(--bronce); background: #1d3b52; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); cursor: crosshair; touch-action: none; }
.mapa-mini .leaflet-container, .mapa-mini.leaflet-container { cursor: crosshair; }
.mapa-cargando { position: absolute; z-index: 60; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: rgba(6, 17, 26, .86); text-align: center; }
.mapa-destello { position: absolute; z-index: 50; left: 50%; top: 14px; padding: 6px 14px; background: var(--verdin); border: 1px solid var(--verdin-claro); color: var(--hueso); font-weight: 700; font-size: var(--t-s); max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.mapa-destello.visible { opacity: 1; transform: translate(-50%, 0); }
.mapa-noscript { margin: 16px; padding: 16px; }

/* panel lateral */
.mapa-panel { position: absolute; z-index: 25; top: 12px; right: 12px; bottom: 12px; width: 380px; display: flex; flex-direction: column; background: var(--mapa-placa); border: 1px solid var(--mapa-borde); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); transition: transform .25s ease, visibility 0s; }
.panel-plegado .mapa-panel { transform: translateX(calc(100% + 16px)); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
.mapa-asa { display: none; }
.mapa-panel-tabs { display: flex; flex: none; border-bottom: 1px solid var(--linea); }
.mapa-panel-tabs button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px; display: flex; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--niebla); font-size: var(--t-xs); font-weight: 700; cursor: var(--cursor-enlace, pointer); }
.mapa-panel-tabs button:hover { color: var(--hueso); }
.mapa-panel-tabs button[aria-selected="true"] { color: var(--oro); border-bottom-color: var(--oro); background: rgba(242, 206, 126, .05); }
.mapa-panel-tabs .punto { width: 7px; height: 7px; }
.mapa-tp { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 20px; overscroll-behavior: contain; }
.mapa-tp:focus-visible { outline-offset: -3px; }
.mapa-intro { color: var(--niebla); font-size: var(--t-s); margin-bottom: 8px; }
.mapa-pista { margin-top: 10px; color: var(--niebla); font-size: var(--t-xs); }
.mapa-error { color: var(--sangre-claro); font-size: var(--t-s); margin-top: 8px; }
.mapa-p-num { color: var(--bronce-claro); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mapa-p-cabeza h2 { margin: 2px 0 8px; font-size: 2rem; color: var(--oro); overflow-wrap: anywhere; }
.mapa-etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.et { padding: .1em .55em; border: 1px solid var(--linea); background: rgba(255, 255, 255, .04); color: var(--hueso); font-size: var(--t-xs); font-weight: 700; }
.et-segura { color: #8ff0b6; border-color: rgba(87, 214, 141, .6); }
.et-insegura { color: var(--sangre-claro); border-color: rgba(240, 102, 108, .6); }
.et-clima { color: #a9d4f5; border-color: rgba(169, 212, 245, .35); }
.et-restr { color: var(--oro); border-color: rgba(242, 206, 126, .5); }
.et-armada { color: #9cc4ff; border-color: #4a8fe7; }
.et-caos { color: #ff958c; border-color: #e0473d; }
.et-disputa { color: #ffc46b; border-color: #e8a13a; }
.mapa-p-desc { margin: 10px 0; color: var(--niebla); font-size: var(--t-s); }
.mapa-p-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.mapa-p-datos > div { padding: 6px 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--linea); }
.mapa-p-datos dt { color: var(--niebla); font-size: var(--t-xs); }
.mapa-p-datos dd { margin: 0; font-weight: 700; font-size: var(--t-s); }
.mapa-peligro { display: inline-flex; align-items: center; gap: 7px; }
.mapa-peligro-b { display: inline-flex; gap: 2px; }
.mapa-peligro-b i { width: 7px; height: 13px; background: rgba(255, 255, 255, .12); }
.mapa-peligro.p0 { color: #8ff0b6; }
.mapa-peligro.p1 { color: #b9e27a; } .mapa-peligro.p1 i.on { background: #a4d65e; }
.mapa-peligro.p2 { color: #eedc6a; } .mapa-peligro.p2 i.on { background: #e8d454; }
.mapa-peligro.p3 { color: #f6ae64; } .mapa-peligro.p3 i.on { background: #f29d48; }
.mapa-peligro.p4 { color: #f57c70; } .mapa-peligro.p4 i.on { background: #ef5446; }
.mapa-peligro.p5 { color: #d892f5; } .mapa-peligro.p5 i.on { background: #c45cf0; }
.mapa-p-botones { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.mapa-sec { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea); }
.mapa-sec h3, .mapa-tp > h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--f-texto); font-size: var(--t-s); color: var(--bronce-claro); text-transform: uppercase; letter-spacing: .07em; }
.mapa-sec h3 .num { color: var(--niebla); font-weight: 500; }
.mapa-sec h4 { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: var(--t-s); color: var(--hueso); }
.mapa-salidas, .mapa-criaturas, .mapa-hab, .mapa-recursos, .mapa-vivo-lista, .mapa-maz, .mapa-ruta-pasos, .mapa-capas { list-style: none; margin: 0; padding: 0; }
.mapa-salidas li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.mapa-salidas li > small { color: var(--niebla); font-size: var(--t-xs); white-space: nowrap; }
.mapa-salidas button, .mapa-npc-btn { display: flex; align-items: center; gap: 8px; min-height: 36px; min-width: 0; padding: 4px 0; background: none; border: 0; color: var(--hueso); text-align: left; cursor: var(--cursor-enlace, pointer); }
.mapa-vecinos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; font-size: var(--t-xs); }
.mapa-vecinos > span { flex-basis: 100%; color: var(--niebla); }
.mapa-vecinos button { min-height: 32px; padding: 0 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linea); font-size: var(--t-xs); cursor: var(--cursor-enlace, pointer); }
.mapa-vecinos button:hover { border-color: var(--oro); color: var(--oro); }
.mapa-salidas button small, .mapa-npc-btn small, .mapa-npc-btn i { color: var(--niebla); font-size: var(--t-xs); }
.mapa-salidas button:hover b, .mapa-npc-btn:hover b { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.mapa-criaturas > li { padding: 6px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.mapa-stats { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 2px 0 0 28px; font-size: var(--t-xs); }
.mapa-stats > div { display: flex; gap: 4px; }
.mapa-stats dt { color: var(--niebla); }
.mapa-stats dd { margin: 0; font-weight: 700; }
.mapa-drops { margin: 6px 0 0 28px; }
.mapa-drops > span { color: var(--niebla); font-size: var(--t-xs); }
.mapa-objetos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.mapa-objetos li { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 8px 2px 2px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linea); font-size: var(--t-xs); }
.mapa-objetos small { color: var(--niebla); }
.mapa-obj-n { overflow-wrap: anywhere; }
.mapa-hab li { border-bottom: 1px solid rgba(255, 255, 255, .04); }
.mapa-recursos li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 0; }
.mapa-recursos .mapa-objetos { flex-basis: 100%; margin-left: 28px; }

/* capas */
.mapa-capas-acc { display: flex; gap: 6px; margin: 4px 0 8px; }
.mapa-capas li label { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 2px; border-bottom: 1px solid rgba(255, 255, 255, .05); cursor: var(--cursor-enlace, pointer); }
.mapa-capas input { width: 18px; height: 18px; flex: none; accent-color: var(--verdin-claro); }
.mapa-capa-n { flex: 1; }
.mapa-capa-c { color: var(--niebla); font-size: var(--t-xs); }

/* ruta */
.mapa-ruta-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
.mapa-ruta-form label { grid-column: 1 / -1; margin-top: 6px; color: var(--niebla); font-size: var(--t-xs); font-weight: 700; }
.mapa-ruta-form input, .mapa-campo { width: 100%; min-height: 42px; padding: 0 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--mapa-borde); color: var(--hueso); }
.mapa-ruta-form input:focus, .mapa-campo:focus { border-color: var(--oro); outline: 0; box-shadow: 0 0 0 1px var(--oro); }
.mapa-ruta-form #mapa-ruta-destino { grid-column: 1; }
.mapa-ruta-botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mapa-ruta-botones .btn { min-height: 42px; padding: .4em 1em; }
.mapa-ruta-resumen { margin-top: 14px; }
.mapa-aviso-insegura, .mapa-aviso-segura { margin: 8px 0; padding: 7px 10px; font-size: var(--t-s); }
.mapa-aviso-insegura { border-left: 3px solid var(--sangre-claro); background: rgba(240, 102, 108, .08); }
.mapa-aviso-segura { border-left: 3px solid var(--verdin-claro); background: rgba(134, 187, 175, .08); }
.mapa-ruta-pasos { counter-reset: paso; margin-top: 6px; }
.mapa-ruta-pasos li { counter-increment: paso; }
.mapa-ruta-pasos button { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 42px; padding: 6px 6px 6px 38px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); text-align: left; cursor: var(--cursor-enlace, pointer); }
.mapa-ruta-pasos button::before { content: counter(paso); position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(242, 206, 126, .15); border: 1px solid var(--bronce); color: var(--oro); font-size: var(--t-xs); font-weight: 800; }
.mapa-ruta-fin button::before { content: "B"; background: var(--oro); color: #1a1206; }
.mapa-ruta-pasos button:hover .mapa-ruta-txt { color: var(--oro); }
.mapa-ruta-txt { flex-basis: 100%; }
.mapa-ruta-pasos small { color: var(--niebla); font-size: var(--t-xs); }
.mapa-ruta-pasos .chip { margin-left: 0; }

/* mazmorras */
.mapa-campo { margin-bottom: 8px; }
.mapa-maz li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.mapa-maz-n { font-weight: 700; }
.mapa-maz-n small { color: var(--niebla); font-weight: 500; }
.mapa-maz-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mapa-maz-btns button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linea); font-size: var(--t-s); cursor: var(--cursor-enlace, pointer); }
.mapa-maz-btns button:hover { border-color: var(--oro); }
.mapa-maz-btns small { color: var(--niebla); font-size: var(--t-xs); }

/* en vivo */
.mapa-vivo-online { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.mapa-vivo-lista li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.mapa-vivo-lista li > span:not(.estandarte) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mapa-vivo-lista small { color: var(--niebla); font-size: var(--t-xs); }
.mapa-vivo-lista button, .mapa-sec > .mapa-bus-lista button { flex: none; min-height: 32px; padding: 0 .7em; background: rgba(12, 22, 27, .9); border: 1px solid var(--mapa-borde); color: var(--hueso); font-size: var(--t-xs); font-weight: 700; cursor: var(--cursor-enlace, pointer); }
.mapa-vivo-lista button:hover { border-color: var(--oro); color: var(--oro); }
.mapa-raid-p { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #3a4744; }
.mapa-raid-p.raid-vivo { background: var(--sangre-claro); box-shadow: 0 0 8px var(--sangre); }
.mapa-raid-p.raid-muerto { background: #5b6b68; }
.mapa-raid-p.raid-desconocido, .mapa-raid-p.raid-atrasado { background: var(--bronce-claro); }

/* texto para buscadores bajo el mapa */
.mapa-seo { padding-block: 40px 56px; }
.mapa-seo h2 { margin-bottom: 10px; font-size: var(--t-xl); color: var(--oro); }
.mapa-seo p { max-width: 75ch; margin-top: 8px; color: var(--niebla); }

@media (max-width: 1180px) {
  .mapa-acciones .mapa-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mapa-acciones .mapa-btn { width: 40px; padding: 0; }
}
@media (max-width: 900px) {
  .mapa-app { --der: 352px; }
  .mapa-panel { width: 330px; }
  .mapa-mini { display: none; }
  .mapa-coords { max-width: calc(100% - var(--der) - 70px); }
}
@media (max-width: 640px) {
  .mapa-app, .mapa-cuerpo.panel-plegado { --der: 0px; }
  .mapa-app { min-height: 440px; }
  .mapa-barra { min-height: 50px; gap: 6px; }
  .mapa-barra h1 { font-size: 1.3rem; }
  .mapa-donde { display: none; }
  .mapa-acciones .mapa-btn { width: 44px; min-height: 44px; }
  .mapa-mundo-sel { max-width: 34vw; min-width: 0; min-height: 44px; }
  #mapa-pantalla, #mapa-panel-btn { display: none; }
  .mapa-barra { overflow: hidden; }
  .mapa-acciones { min-width: 0; }
  .mapa-panel, .mapa-ficha { background: #0a1317; }
  .mapa-buscador { top: 8px; left: 8px; right: 8px; width: auto; }
  .mapa-bus-tabs button { min-height: 36px; }
  .mapa-sugerencias, .mapa-bus-detalle { max-height: 46vh; }
  .mapa-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 50%; border-width: 1px 0 0; box-shadow: 0 -12px 34px rgba(0, 0, 0, .55); transition: height .25s ease; }
  .mapa-panel[data-hoja="peek"], .panel-plegado .mapa-panel { height: 68px; }
  .mapa-panel[data-hoja="lleno"] { height: calc(100% - 62px); }
  .panel-plegado .mapa-panel { transform: none; visibility: visible; }
  .mapa-panel.arrastrando { transition: none; }
  .mapa-asa { display: flex; flex: none; align-items: center; justify-content: center; width: 100%; height: 22px; padding: 0; background: none; border: 0; cursor: var(--cursor-enlace, pointer); touch-action: none; }
  .mapa-asa span { width: 46px; height: 5px; border-radius: 3px; background: var(--niebla); }
  .mapa-panel-tabs { overflow-x: auto; scrollbar-width: none; }
  .mapa-panel-tabs button { flex: 1 0 auto; padding: 0 10px; min-height: 44px; font-size: var(--t-s); }
  .mapa-coords { left: 8px; bottom: 76px; max-width: calc(100% - 80px); font-size: 12px; }
  .mapa-leyenda { left: 8px; bottom: 108px; max-width: calc(100% - 90px); }
  .mapa-lienzo .leaflet-bottom.leaflet-right { right: 0; bottom: 66px; }
  .mapa-lienzo .leaflet-bar a { width: 46px; height: 46px; line-height: 44px; font-size: 24px; }
  .mapa-ficha { left: 8px; right: 8px; bottom: 76px; width: auto; max-height: calc(100% - 140px); }
  .mapa-p-cabeza h2 { font-size: 1.7rem; }
  .mapa-salidas button, .mapa-npc-btn { min-height: 44px; }
  .mapa-seo { padding-block: 28px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-lienzo path.mapa-ruta-linea, .mapa-lienzo path.mapa-invasion, .mapa-vivo-m i { animation: none !important; }
  .mapa-panel, .panel-plegado .mapa-panel, .mapa-destello { transition: none; }
}