/*
	La Wiki de What If? -- laboratoriossniminix.com
	Laboratorios Sniminix. Reporte #89 de Lex.

	Un solo tema, oscuro, a proposito: es el mundo del HUD (negro brillante,
	verde de "activo", violeta del simbolo trans, cian del escaner). El fondo
	del body se pinta siempre, para que la pagina se vea igual en cualquier
	navegador.
*/

:root {
	--fondo: #07080b;
	--superficie: #101218;
	--superficie-2: #171a22;
	--borde: #262b36;
	--texto: #e8ebf1;
	--texto-suave: #a3abb8;
	--verde: #3ddc84;       /* el boton activo del HUD */
	--violeta: #b55cff;     /* el simbolo trans del HUD */
	--cian: #2fd3e0;        /* la barra y el escaner */
	--rojo: #ff5468;        /* dañado, pausado, muerte */
	--ambar: #ffb547;
	--radio: 14px;
	--ancho: 1120px;
	--lectura: 68ch;
	--titulo: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
	--cuerpo: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--cuerpo);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation: none !important; transition: none !important; }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cian); text-underline-offset: 3px; }
a:hover { color: #7fe9f1; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: var(--titulo);
	line-height: 1.2;
	letter-spacing: .01em;
	text-wrap: balance;
	margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 600; margin-top: 0; }
h3 { font-size: 1.3rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em; }

p { margin: 0 0 1em; max-width: var(--lectura); }
ul, ol { padding-left: 1.3em; max-width: var(--lectura); }
li { margin: .35em 0; }
strong { color: #fff; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }

/* ---------------- cabecera ---------------- */

.cabecera {
	position: sticky; top: 0; z-index: 20;
	background: rgba(7, 8, 11, .88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--borde);
}
/* La cabecera es mas ancha que el contenido: con siete paginas en el menu y
   los siete idiomas, en 1120 px los botones se partian en dos lineas
   (reporte #94 de Lex). */
.cabecera .contenedor {
	display: flex; align-items: center; gap: 1rem;
	min-height: 64px;
	width: min(1360px, 100% - 32px);
}
.marca {
	display: flex; align-items: center; gap: .6rem;
	font-family: var(--titulo); font-weight: 600; font-size: 1.15rem;
	color: var(--texto); text-decoration: none; white-space: nowrap;
}
.marca img { width: 34px; height: 34px; }
.marca small { color: var(--texto-suave); font-weight: 500; font-size: .8em; }

.menu-principal { margin-left: auto; display: flex; gap: .2rem; align-items: center; }
.menu-principal a {
	color: var(--texto-suave); text-decoration: none;
	font-size: .85rem; padding: .4em .55em; border-radius: 8px;
	white-space: nowrap;
}
.menu-principal a:hover, .menu-principal a[aria-current="page"] { color: #fff; background: var(--superficie-2); }

/* El idioma, en un desplegable (reporte #108). */
.idiomas { display: flex; margin-left: .5rem; }
.idiomas select {
	font: inherit; font-size: .8rem; font-weight: 700;
	background: var(--superficie-2); color: var(--texto);
	border: 1px solid var(--verde); border-radius: 8px; padding: .3em .5em; cursor: pointer;
}
.idiomas select:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* El torso de "Mi perfil": marca de agua sin sesion, verde con ella (#108). */
.enlace-perfil { display: inline-flex; align-items: center; gap: .35em; }
.icono-perfil { fill: currentColor; opacity: .35; transition: opacity .2s, fill .2s; }
.con-sesion .icono-perfil { fill: var(--verde); opacity: 1; }

/* ---------------- preguntas frecuentes (#108) ---------------- */
.faq { display: grid; gap: .6rem; max-width: 820px; margin-top: 1.6rem; }
.faq-item { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.faq-pregunta {
	width: 100%; text-align: left; font: inherit; font-weight: 700; font-size: 1.05rem;
	color: var(--texto); background: none; border: 0; padding: 1rem 1.2rem; cursor: pointer;
	display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq-pregunta::after { content: "+"; color: var(--verde); font-size: 1.3rem; line-height: 1; }
.faq-pregunta[aria-expanded="true"]::after { content: "\2212"; }
.faq-pregunta:focus-visible { outline: 2px solid var(--cian); outline-offset: -2px; border-radius: var(--radio); }
.faq-respuesta { padding: 0 1.2rem 1.1rem; color: var(--texto-suave); max-width: var(--lectura); }
.faq-respuesta p, .faq-respuesta ul { margin: 0 0 .8rem; }
.faq-respuesta li { margin-bottom: .3rem; }
.formulario textarea {
	font: inherit; color: var(--texto); background: var(--superficie-2);
	border: 1px solid var(--borde); border-radius: 10px; padding: .7em .8em; min-height: 120px; resize: vertical;
}
.formulario textarea:focus-visible { border-color: var(--cian); outline: none; }
.formulario textarea:disabled, .formulario button:disabled { opacity: .45; cursor: not-allowed; }
.faq-form { max-width: 640px; }

/* Los mensajes del sistema en el perfil (#108). */
.mensajes { display: grid; gap: .7rem; padding: 0; list-style: none; }
.mensajes li { border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1.1rem; background: var(--superficie); }
.mensajes li.nuevo { border-color: var(--verde); }
.mensajes .titulo { font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; }
.mensajes .fecha { color: var(--texto-suave); font-weight: 400; font-size: .85rem; }
.mensajes .texto { white-space: pre-wrap; color: var(--texto-suave); margin: .5rem 0 0; }

.boton-menu { display: none; margin-left: auto; font: inherit; background: none; border: 1px solid var(--borde); color: var(--texto); border-radius: 8px; padding: .3em .7em; cursor: pointer; }

/* Por debajo de esto el menu no cabe en una linea: se abre con el boton. */
@media (max-width: 1240px) {
	.boton-menu { display: block; }
	.menu-principal {
		display: none; position: absolute; top: 64px; left: 0; right: 0;
		flex-direction: column; align-items: stretch;
		background: var(--superficie); border-bottom: 1px solid var(--borde); padding: .5rem 16px 1rem;
	}
	.menu-principal.abierto { display: flex; }
	.idiomas { margin: .6rem 0 0; }
}

/* ---------------- secciones ---------------- */

.seccion { padding: 72px 0; border-bottom: 1px solid var(--borde); }
.seccion.alterna { background: var(--superficie); }
.seccion .antetitulo {
	font-family: var(--titulo); font-size: .85rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--verde); margin-bottom: .6rem; display: block;
}
.intro { color: var(--texto-suave); font-size: 1.1rem; }

/* ---------------- portada ---------------- */

.portada { padding: 56px 0 40px; }
.portada .contenedor { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.portada p { font-size: 1.15rem; color: var(--texto-suave); }
.portada .hud-portada { filter: drop-shadow(0 20px 60px rgba(181, 92, 255, .25)); }
/* El HUD con su boton a la tienda debajo, ancho como una base (Lex, #99). */
.hud-bloque { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.hud-bloque .boton-tienda { display: flex; justify-content: center; text-align: center; font-size: 1.15rem; padding: .9em 1em; }
@media (max-width: 900px) { .portada .contenedor { grid-template-columns: 1fr; } }

.botones { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.boton {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--titulo); font-weight: 600; font-size: 1rem;
	padding: .75em 1.3em; border-radius: 999px; text-decoration: none;
	border: 1px solid var(--borde); color: var(--texto); background: var(--superficie-2);
}
.boton.principal { background: var(--verde); color: #04140b; border-color: var(--verde); }
.boton.principal:hover { background: #62e89d; color: #04140b; }
.boton:hover { color: #fff; border-color: var(--texto-suave); }

/* ---------------- carrusel de publicidad ---------------- */

.carrusel { position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: var(--superficie); }
.carrusel .pistas { display: flex; transition: transform .6s ease; }
.carrusel .diapositiva { flex: 0 0 100%; aspect-ratio: 8 / 3; position: relative; }
.carrusel .diapositiva img { width: 100%; height: 100%; object-fit: cover; }
.carrusel .hueco {
	width: 100%; height: 100%; display: grid; place-items: center; text-align: center;
	padding: 1.5rem; color: var(--texto-suave);
	background:
		radial-gradient(circle at 20% 30%, rgba(61, 220, 132, .16), transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(181, 92, 255, .18), transparent 50%),
		var(--superficie-2);
}
.carrusel .hueco strong { display: block; font-family: var(--titulo); font-size: clamp(1.2rem, 3vw, 2rem); color: #fff; }
.carrusel .puntos { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.carrusel .puntos button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .35); cursor: pointer; padding: 0; }
.carrusel .puntos button[aria-current="true"] { background: var(--verde); }
.carrusel .flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borde);
	background: rgba(7, 8, 11, .6); color: #fff; font-size: 1.2rem; cursor: pointer;
}
.carrusel .flecha.ant { left: 12px; }
.carrusel .flecha.sig { right: 12px; }

/* ---------------- tarjetas ---------------- */

.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tarjeta {
	background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem;
}
.tarjeta p { margin: 0; color: var(--texto-suave); font-size: .98rem; }
.tarjeta h3 { margin: 0; }
a.tarjeta { text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
a.tarjeta:hover { border-color: var(--verde); transform: translateY(-2px); }
.tarjeta .icono { width: 64px; height: 64px; }
.tarjeta .icono.genero { width: 96px; height: 96px; }

.etiqueta {
	display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
	padding: .15em .6em; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-suave);
	align-self: flex-start;
}
.etiqueta.verde { color: var(--verde); border-color: rgba(61, 220, 132, .5); }
.etiqueta.violeta { color: var(--violeta); border-color: rgba(181, 92, 255, .5); }
.etiqueta.rojo { color: var(--rojo); border-color: rgba(255, 84, 104, .5); }
.etiqueta.cian { color: var(--cian); border-color: rgba(47, 211, 224, .5); }

/* inclusivo */
.inclusivo { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.2rem 0; }
.inclusivo span {
	font-family: var(--titulo); font-weight: 600; padding: .5em 1em; border-radius: 999px;
	background: var(--superficie-2); border: 1px solid var(--borde);
}

/* ---------------- el HUD con sus flechas ---------------- */

.diagrama { position: relative; max-width: 900px; margin: 0 auto 2rem; }
.diagrama img { width: 100%; }
.diagrama .marcador {
	position: absolute; transform: translate(-50%, -50%);
	width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--titulo); font-weight: 700; font-size: .95rem;
	background: var(--verde); color: #04140b;
	box-shadow: 0 0 0 4px rgba(61, 220, 132, .25), 0 4px 14px rgba(0, 0, 0, .6);
	text-decoration: none;
}
.leyenda { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); counter-reset: none; padding: 0; list-style: none; max-width: none; }
.leyenda li { display: flex; gap: .9rem; align-items: flex-start; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; margin: 0; }
.leyenda .num {
	flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
	background: var(--verde); color: #04140b; font-family: var(--titulo); font-weight: 700; font-size: .9rem;
}
.leyenda strong { display: block; }
.leyenda span.txt { color: var(--texto-suave); font-size: .97rem; }

/* estados de un boton */
.estados { display: flex; gap: 18px; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.estado { text-align: center; width: 128px; }
.estado img { width: 96px; margin: 0 auto .4rem; }
.estado span { font-size: .88rem; color: var(--texto-suave); }

/* ---------------- pasos ---------------- */

.pasos { list-style: none; padding: 0; counter-reset: paso; max-width: var(--lectura); }
.pasos > li {
	counter-increment: paso; position: relative;
	padding: 0 0 1.3rem 3.2rem; margin: 0;
}
.pasos > li::before {
	content: counter(paso); position: absolute; left: 0; top: -.1rem;
	width: 2.2rem; height: 2.2rem; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--titulo); font-weight: 700;
	border: 2px solid var(--verde); color: var(--verde);
}
.pasos > li:not(:last-child)::after {
	content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: .2rem; width: 2px; background: var(--borde);
}
.pasos strong { display: block; font-size: 1.05rem; }

/* avisos */
.aviso {
	border-left: 4px solid var(--ambar); background: rgba(255, 181, 71, .07);
	padding: .9rem 1.2rem; border-radius: 0 var(--radio) var(--radio) 0; margin: 1.2rem 0; max-width: var(--lectura);
}
.aviso.verde { border-color: var(--verde); background: rgba(61, 220, 132, .07); }
.aviso p:last-child { margin: 0; }

/* ---------------- productos ---------------- */

.producto {
	display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start;
	background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 1.5rem; margin-bottom: 20px;
}
.producto .foto {
	aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; text-align: center;
	background: radial-gradient(circle at 50% 40%, rgba(47, 211, 224, .14), transparent 65%), var(--superficie);
	border: 1px dashed var(--borde); color: var(--texto-suave); font-size: .82rem; padding: .8rem;
}
.producto .foto img { width: 100%; height: 100%; object-fit: contain; }
.producto .foto:has(img) { border-style: solid; padding: .4rem; }
.producto .foto img[data-ampliar] { cursor: zoom-in; border-radius: 10px; transition: transform .25s ease, filter .25s ease; }
.producto .foto img[data-ampliar]:hover, .producto .foto img[data-ampliar]:focus-visible { transform: scale(1.05); filter: drop-shadow(0 10px 22px rgba(47, 211, 224, .28)); }
.producto .foto img[data-ampliar]:focus-visible { outline: 2px solid var(--acento, #2fd3e0); outline-offset: 4px; }

/* El visor de fotos (reporte #95): la foto a tamano real sobre la pagina
   difuminada, con un halo del color de la marca detras. */
body.visor-abierto { overflow: hidden; }
.visor {
	position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
	background: rgba(5, 7, 10, .74); backdrop-filter: blur(14px) saturate(1.15);
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	opacity: 0; transition: opacity .26s ease;
}
.visor.abierto { opacity: 1; }
.visor figure {
	margin: 0; display: grid; gap: 16px; justify-items: center;
	transform: scale(.9) translateY(12px); transition: transform .38s cubic-bezier(.2, .9, .2, 1);
}
.visor.abierto figure { transform: none; }
.visor img {
	width: min(800px, 92vw, 78vh); height: auto; aspect-ratio: 1; object-fit: contain;
	border-radius: 24px; cursor: default;
	background: radial-gradient(circle at 50% 45%, rgba(47, 211, 224, .22), rgba(47, 211, 224, 0) 62%);
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}
.visor figcaption {
	font-family: var(--titulo); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: #fff; font-size: .95rem; text-align: center;
}
.visor-cerrar {
	position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff;
	font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.visor-cerrar:hover { background: rgba(255, 255, 255, .18); transform: rotate(90deg); }
.visor-cerrar:focus-visible { outline: 2px solid #2fd3e0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.visor, .visor figure, .visor-cerrar, .producto .foto img[data-ampliar] { transition: none; }
	.visor figure { transform: none; }
}
.producto h3 { margin-bottom: .3rem; }
.producto dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .8rem 0 0; font-size: .97rem; }
.producto dt { color: var(--texto-suave); }
.producto dd { margin: 0; }
@media (max-width: 640px) { .producto { grid-template-columns: 1fr; } .producto .foto { max-width: 220px; } }

/* tablas */
.tabla-marco { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); margin: 1rem 0 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-family: var(--titulo); font-weight: 600; color: var(--texto-suave); background: var(--superficie-2); }
tr:last-child td { border-bottom: 0; }

/* records (reservado) */
.medallas { display: flex; gap: 22px; flex-wrap: wrap; margin: 1.2rem 0; }
.medalla { width: 110px; text-align: center; color: var(--texto-suave); font-size: .85rem; }
.medalla svg { width: 90px; height: 90px; margin: 0 auto .4rem; display: block; opacity: .35; }

/* pie */
.pie { padding: 40px 0 56px; color: var(--texto-suave); font-size: .92rem; }
.pie .contenedor { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }
.pie nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.pie a { color: var(--texto-suave); }

/* idioma: se ESCONDE el que no toca, con !important, y el elegido conserva su
   display normal. Al reves (esconder todos y "revertir" el elegido) una regla
   de clase mas especifica, como .seccion .antetitulo {display:block}, le ganaba
   al esconder y salian los dos idiomas a la vez. Un idioma nuevo = una linea. */
html[data-ver="en"] [data-idioma]:not([data-idioma="en"]),
html[data-ver="es"] [data-idioma]:not([data-idioma="es"]),
html[data-ver="pt"] [data-idioma]:not([data-idioma="pt"]),
html[data-ver="ja"] [data-idioma]:not([data-idioma="ja"]),
html[data-ver="fr"] [data-idioma]:not([data-idioma="fr"]),
html[data-ver="de"] [data-idioma]:not([data-idioma="de"]),
html[data-ver="it"] [data-idioma]:not([data-idioma="it"]) { display: none !important; }

/* ---------------- el perfil (bloque 2) ---------------- */

/* hidden gana siempre: img {display:block} y .boton lo pisaban */
[hidden] { display: none !important; }

.formulario { display: grid; gap: .7rem; max-width: 420px; margin: 1.4rem 0; }
.formulario label { font-weight: 700; }
.formulario input[type="text"] {
	font: inherit; color: var(--texto); background: var(--superficie-2);
	border: 1px solid var(--borde); border-radius: 10px; padding: .7rem .9rem;
}
.formulario input:focus-visible { border-color: var(--cian); }
.formulario .boton { justify-self: start; }
#codigo { font-family: var(--titulo); font-size: 1.6rem; letter-spacing: .3em; max-width: 14ch; }
.mensaje { min-height: 1.6em; color: var(--ambar); }
.nota { color: var(--texto-suave); font-size: .92rem; }

.ficha-cabeza { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.retrato {
	width: 148px; height: 148px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
	border: 3px solid var(--verde); background: var(--superficie-2);
	display: grid; place-items: center;
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.sin-foto { font-family: var(--titulo); font-size: 3rem; color: var(--texto-suave); }

.bloque { border-top: 1px solid var(--borde); padding-top: 1.6rem; margin-top: 1.6rem; }
.interruptor { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; max-width: var(--lectura); }
.interruptor input { width: 1.2rem; height: 1.2rem; margin-top: .3rem; accent-color: var(--verde); flex: 0 0 auto; }
.enlace-publico { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }

.informe {
	white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--cuerpo); font-size: .98rem;
	background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 1.1rem 1.3rem; max-width: var(--lectura); margin: 0;
}

.ecos { list-style: none; padding: 0; display: grid; gap: 12px; }
.ecos li {
	display: flex; gap: .8rem 1rem; align-items: center; flex-wrap: wrap; margin: 0;
	background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1.1rem;
}
.ecos li .interruptor { flex-basis: 100%; font-size: .92rem; }
.boton.chico { padding: .3em .8em; font-size: .88rem; }

/* medallas de verdad (Records) */
.medalla { display: grid; justify-items: center; gap: .15rem; width: 150px; }
.medalla strong { font-family: var(--titulo); }
.medalla .nivel { font-family: var(--titulo); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.medalla.ganada svg { opacity: 1; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }

/* el nombre de quien llega desde el boton Perfil del HUD (#92) */
.nombre-hud { font-family: var(--titulo); font-size: 1.5rem; font-weight: 600; color: #fff; margin: .2rem 0 0; }