/* Osaria · web pública (portada, enlaces de cripta y páginas legales). Móvil primero y sin dependencias. */

@font-face { font-family: "Lilita One"; src: url("/arte/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: Nunito; src: url("/arte/Nunito-Variable.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }

:root {
  --noche: #050a19;
  --superficie: #0e1530;
  --superficie-2: #18213f;
  --espectro: #2ef2e0;
  --espectro-2: #0eb8aa;
  --oro: #f4c00e;
  --oro-claro: #ffd95a;
  --purpura: #6a2fc0;
  --magenta: #d139f0;
  --piedra: #5067a0;
  --hueso: #f3d89e;
  --peligro: #ff5a3c;
  --texto: #f6efdd;
  --texto-2: #bcc5e3;
  --texto-3: #8f9bc6;
  --borde: rgb(255 255 255 / .08);
  --radio: 22px;
  --titulo: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --cuerpo: Nunito, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--noche); color: var(--texto); font: 500 17px/1.6 var(--cuerpo); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--espectro); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--espectro); color: var(--noche); }

.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 12px 18px; border-radius: 12px; background: var(--oro); color: var(--noche); font-weight: 900; text-decoration: none; }
.saltar:focus { top: 12px; }

/* Iconos: cada .i-<id> define --icono (al final del archivo) y .icono lo pinta con el color de fondo. */
.icono { display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; background: rgb(5 10 25 / .8); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--borde); }
.marca { display: block; border-radius: 10px; }
.marca img { width: auto; height: 50px; }
.menu { display: none; gap: 2px; margin-left: auto; }
.menu a { padding: 8px 14px; border-radius: 999px; color: var(--texto-2); font-weight: 800; font-size: 15px; text-decoration: none; transition: color .2s, background-color .2s; }
.menu a:hover { color: var(--texto); background: rgb(255 255 255 / .06); }
.menu a[aria-current="page"] { color: var(--texto); background: rgb(46 242 224 / .12); }
.menu.siempre { display: flex; }
@media (max-width: 420px) { .menu.siempre a { padding: 8px 9px; font-size: 14px; } }
.idiomas { display: none; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); }
.js .idiomas { display: flex; }
.idiomas button { min-width: 44px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--texto-2); font: 900 13px/1 var(--cuerpo); letter-spacing: .08em; cursor: pointer; transition: color .2s, background-color .2s; }
.idiomas button:hover { color: var(--texto); }
.idiomas button[aria-pressed="true"] { background: var(--espectro); color: var(--noche); }

/* ---------- Piezas comunes ---------- */
.seccion { position: relative; padding: 76px 16px; }
.contenedor { max-width: 1180px; margin: 0 auto; }
.superficie { background: var(--superficie); }
/* Borde de púas: la sección asoma con una fila de dientes de su mismo color. */
.dientes::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px; background: inherit; -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 30px 100% repeat-x; mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 30px 100% repeat-x; }
.cabeza { max-width: 760px; margin-bottom: 36px; }
.cabeza.centro { margin-inline: auto; text-align: center; }
.antetitulo { margin: 0 0 6px; color: var(--espectro); font: 900 13px/1.3 var(--cuerpo); letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titulo); font-weight: 400; letter-spacing: .005em; }
.seccion h2 { margin: 6px 0 16px; font-size: clamp(36px, 8.6vw, 60px); line-height: 1.02; white-space: pre-line; text-wrap: balance; }
.entradilla { max-width: 62ch; color: var(--texto-2); font-size: 18px; }
.cabeza.centro .entradilla { margin-inline: auto; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border: 0; border-radius: 16px; background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #241700; font: 400 20px/1.1 var(--titulo); letter-spacing: .02em; text-decoration: none; cursor: pointer; box-shadow: 0 5px 0 #a8730a, 0 14px 30px rgb(244 192 14 / .22); transition: transform .15s, box-shadow .15s, filter .15s; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #a8730a, 0 18px 36px rgb(244 192 14 / .3); }
.boton:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8730a, 0 8px 18px rgb(244 192 14 / .2); }
.boton .icono { width: 22px; height: 22px; }
.boton.secundario { background: linear-gradient(180deg, #222d55, var(--superficie-2)); color: var(--texto); box-shadow: 0 5px 0 #070c1e, 0 14px 30px rgb(0 0 0 / .3); border: 1px solid rgb(255 255 255 / .1); }
.boton.secundario:hover { box-shadow: 0 7px 0 #070c1e, 0 18px 36px rgb(0 0 0 / .35); }
.boton.secundario:active { box-shadow: 0 2px 0 #070c1e; }

/* Apariciones al hacer scroll (solo con JS y si se aceptan animaciones). */
.revelar { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.con-revelado .revelar:not(.visible) { opacity: 0; transform: translateY(22px); }

/* ---------- Héroe ---------- */
.heroe { position: relative; isolation: isolate; overflow: hidden; padding: 18px 16px 84px; text-align: center; }
.heroe::before { content: ""; position: absolute; inset: 0; z-index: -3; background:
  radial-gradient(60% 42% at 50% 26%, rgb(46 242 224 / .17), transparent 70%),
  radial-gradient(55% 45% at 8% 78%, rgb(106 47 192 / .38), transparent 70%),
  radial-gradient(50% 40% at 96% 62%, rgb(209 57 240 / .2), transparent 70%),
  linear-gradient(180deg, #08112c 0%, var(--noche) 92%); }
.heroe::after { content: ""; position: absolute; left: -15%; right: -15%; bottom: -50px; height: 190px; z-index: -1; background: radial-gradient(45% 60% at 30% 60%, rgb(46 242 224 / .14), transparent 70%), radial-gradient(40% 55% at 72% 55%, rgb(106 47 192 / .28), transparent 70%); filter: blur(12px); animation: niebla 16s ease-in-out infinite alternate; }
.cielo { position: absolute; inset: 0; z-index: -2; opacity: .7; background-image:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 28% 8%, #cfe 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 46% 14%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 63% 6%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 78% 20%, #dff 50%, transparent 51%),
  radial-gradient(1px 1px at 91% 9%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 6% 40%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 94% 38%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 20% 55%, #bdf 50%, transparent 51%),
  radial-gradient(1px 1px at 84% 52%, #fff 50%, transparent 51%);
  animation: titilar 6s ease-in-out infinite alternate; }

/* Almas que suben: motas espectrales. */
.almas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.almas span { position: absolute; bottom: -20px; width: 6px; height: 6px; border-radius: 50%; background: var(--espectro); box-shadow: 0 0 10px 2px rgb(46 242 224 / .7); opacity: 0; animation: subir 11s linear infinite; }
.almas span:nth-child(1) { left: 6%; animation-delay: 0s; }
.almas span:nth-child(2) { left: 17%; animation-delay: 3.5s; animation-duration: 13s; width: 4px; height: 4px; }
.almas span:nth-child(3) { left: 29%; animation-delay: 7s; }
.almas span:nth-child(4) { left: 41%; animation-delay: 1.8s; animation-duration: 14s; background: var(--magenta); box-shadow: 0 0 10px 2px rgb(209 57 240 / .7); }
.almas span:nth-child(5) { left: 53%; animation-delay: 9s; width: 4px; height: 4px; }
.almas span:nth-child(6) { left: 64%; animation-delay: 5s; animation-duration: 12s; }
.almas span:nth-child(7) { left: 76%; animation-delay: 2.6s; background: var(--oro-claro); box-shadow: 0 0 10px 2px rgb(255 217 90 / .6); width: 4px; height: 4px; }
.almas span:nth-child(8) { left: 87%; animation-delay: 6.4s; animation-duration: 15s; }
.almas span:nth-child(9) { left: 95%; animation-delay: 10s; width: 5px; height: 5px; }
.almas span:nth-child(10) { left: 35%; animation-delay: 12s; animation-duration: 16s; background: var(--magenta); box-shadow: 0 0 10px 2px rgb(209 57 240 / .7); }

/* Fuegos fatuos: dos llamitas espectrales que vagan por el cielo. */
.fatuo { position: absolute; z-index: -1; width: 30px; height: 30px; pointer-events: none; animation: vagar 11s ease-in-out infinite; }
.fatuo::before, .fatuo::after { content: ""; position: absolute; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); }
.fatuo::before { inset: 0; background: radial-gradient(circle at 62% 38%, #dcfffb, var(--espectro) 42%, var(--espectro-2) 85%); box-shadow: 0 0 16px 5px rgb(46 242 224 / .5), 0 0 56px 16px rgb(46 242 224 / .18); animation: parpadeo 1.3s ease-in-out infinite alternate; }
.fatuo::after { inset: 34% 30% 10%; background: #f4fffe; filter: blur(1.5px); animation: parpadeo .9s ease-in-out infinite alternate-reverse; }
.fatuo.izquierda { left: 5%; top: 74%; }
.fatuo.derecha { right: 7%; top: 9%; width: 22px; height: 22px; animation-duration: 13s; animation-delay: -5s; }
.fatuo.derecha::before { background: radial-gradient(circle at 62% 38%, #fde6ff, var(--magenta) 45%, var(--purpura) 90%); box-shadow: 0 0 16px 5px rgb(209 57 240 / .5), 0 0 56px 16px rgb(209 57 240 / .18); }

.heroe-contenido { position: relative; max-width: 1180px; margin: 0 auto; display: grid; justify-items: center; gap: 4px; }
.heroe-arte { position: relative; width: min(100%, 520px); }
.heroe-arte::before { content: ""; position: absolute; inset: 6% 10% 2%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(46 242 224 / .3), rgb(106 47 192 / .26) 55%, transparent); filter: blur(28px); animation: latir 6s ease-in-out infinite; }
.flota { position: relative; animation: flotar 7s ease-in-out infinite; }
.heroe-logo { width: 100%; filter: drop-shadow(0 22px 34px rgb(0 0 0 / .55)); }
/* Las antorchas y los ojos del logo cobran vida (posiciones medidas sobre el propio logo). */
.vivo { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; }
.vivo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vivo.antorcha { top: 15%; width: 12%; height: 18%; }
.vivo.antorcha::before { background: radial-gradient(closest-side, rgb(46 242 224 / .55), rgb(46 242 224 / .12) 60%, transparent); animation: chisporrotear 1.7s steps(6, jump-none) infinite alternate; }
.vivo.antorcha.a1 { left: 28.1%; }
.vivo.antorcha.a2 { left: 71.9%; }
.vivo.antorcha.a2::before { animation-duration: 2.1s; animation-delay: -.6s; }
.vivo.ojo { width: 4.4%; height: 6%; }
.vivo.ojo::before { background: radial-gradient(closest-side, #e9fffd, rgb(46 242 224 / .7) 45%, transparent); animation: mirada 5s ease-in-out infinite; }
.vivo.ojo.o1 { left: 47.8%; top: 31.9%; }
.vivo.ojo.o2 { left: 54.1%; top: 33.8%; }

.heroe-texto { max-width: 620px; }
.heroe h1 { margin: 2px 0 16px; font-size: clamp(36px, 10.4vw, 82px); line-height: .98; white-space: pre-line; text-wrap: balance; background: linear-gradient(180deg, #fff1b8 0%, var(--oro-claro) 30%, var(--oro) 62%, #e48c00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6d3f00) drop-shadow(0 12px 22px rgb(0 0 0 / .45)); }
.heroe .entradilla { margin: 0 auto 4px; font-size: 18.5px; }
.tiendas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.tienda { display: inline-flex; align-items: center; gap: 12px; min-width: 196px; padding: 11px 22px 11px 14px; border-radius: 16px; background: linear-gradient(180deg, #1e2a55, #111936); border: 1px solid rgb(255 255 255 / .13); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 12px 30px rgb(0 0 0 / .35); color: var(--texto); text-align: left; text-decoration: none; transition: transform .2s, border-color .2s; }
.tienda .icono { width: 28px; height: 28px; background: linear-gradient(180deg, var(--espectro), var(--espectro-2)); }
.tienda small { display: block; color: var(--texto-3); font: 900 11px/1.3 var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; }
.tienda strong { display: block; font: 400 21px/1.15 var(--titulo); letter-spacing: .01em; }
a.tienda[href]:hover { transform: translateY(-2px); border-color: rgb(46 242 224 / .55); }
a.tienda:not([href]) { cursor: default; }
.nota-heroe { margin: 18px 0 0; color: var(--texto-3); font-size: 15px; font-weight: 700; }

/* ---------- Cómo se juega ---------- */
.pasos { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.paso { --acento: var(--espectro); --acento-2: var(--espectro-2); position: relative; overflow: hidden; padding: 26px 22px 26px; border-radius: var(--radio); background: linear-gradient(180deg, var(--superficie-2), rgb(24 33 63 / .35)); border: 1px solid var(--borde); }
.paso::after { counter-increment: paso; content: counter(paso); position: absolute; right: 16px; top: -10px; color: rgb(255 255 255 / .045); font: 400 120px/1 var(--titulo); pointer-events: none; }
.paso:nth-child(2) { --acento: var(--oro-claro); --acento-2: var(--oro); }
.paso:nth-child(3) { --acento: #f08cff; --acento-2: var(--magenta); }
.sello { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 18px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--acento) 26%, transparent), color-mix(in srgb, var(--acento) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); }
.sello .icono { width: 36px; height: 36px; background: linear-gradient(180deg, var(--acento), var(--acento-2)); }
.paso h3 { margin: 0 0 10px; font-size: 27px; line-height: 1.1; }
.paso p { margin: 0; color: var(--texto-2); }
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.cifras li { padding: 18px 12px; border-radius: 18px; background: rgb(255 255 255 / .03); border: 1px solid var(--borde); text-align: center; }
.cifras strong { display: block; color: var(--oro-claro); font: 400 30px/1.05 var(--titulo); }
.cifras span { display: block; margin-top: 4px; color: var(--texto-2); font-size: 14.5px; line-height: 1.35; }

/* ---------- Piezas ---------- */
.grupo-piezas + .grupo-piezas { margin-top: 56px; }
.grupo-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; }
.grupo-titulo h3 { font-size: 32px; }
.grupo-titulo .contador { color: var(--espectro); font: 900 14px/1 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; }
.grupo-titulo p { flex-basis: 100%; margin: 0; color: var(--texto-2); }
.piezas { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pieza { --brillo: 46 242 224; --icono-a: var(--espectro); --icono-b: var(--espectro-2); display: grid; grid-template-columns: 104px minmax(0, 1fr); overflow: hidden; border-radius: 20px; background: var(--superficie-2); border: 1px solid var(--borde); transition: transform .25s, border-color .25s, box-shadow .25s; }
.guardianes .pieza { --brillo: 209 57 240; --icono-a: #f08cff; --icono-b: var(--purpura); }
.pieza:hover { transform: translateY(-3px); border-color: rgb(var(--brillo) / .4); box-shadow: 0 18px 40px rgb(0 0 0 / .35); }
.pieza-arte { position: relative; min-height: 104px; overflow: hidden; background:
  radial-gradient(70% 60% at 50% 46%, rgb(var(--brillo) / .18), transparent 72%),
  linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 25% 25%,
  linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 25% 25%,
  linear-gradient(180deg, #141c3b, #0a1027); }
.pieza-arte::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: 13%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .6), transparent); }
.marcador { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; filter: drop-shadow(0 0 12px rgb(var(--brillo) / .5)); }
.marcador::before { content: ""; width: 50%; aspect-ratio: 1; background: linear-gradient(180deg, var(--icono-a) 10%, var(--icono-b) 75%); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.pieza:hover .marcador::before { transform: translateY(-6px) scale(1.06); }
.pieza-arte img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.js .pieza-arte img { opacity: 0; transition: opacity .5s; }
.js .pieza-arte img.cargada { opacity: 1; }
.pieza-arte.con-arte .marcador, .pieza-arte.con-arte::after { display: none; }
.pieza-texto { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px; }
.pieza h4 { font-size: 21px; line-height: 1.1; }
.pieza p { margin: 0; color: var(--texto-2); font-size: 15px; line-height: 1.5; }
.pieza .aviso { color: var(--texto-3); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.chip { padding: 5px 9px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid var(--borde); color: var(--texto-2); font: 900 11.5px/1.2 var(--cuerpo); letter-spacing: .05em; }
.chip.maldicion { background: rgb(209 57 240 / .12); border-color: rgb(209 57 240 / .3); color: #efc2ff; }
.reliquias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 40px 0 0; padding: 18px 20px; border-radius: 18px; background: rgb(244 192 14 / .06); border: 1px dashed rgb(244 192 14 / .3); color: var(--texto-2); }
.reliquias strong { color: var(--oro-claro); font: 400 19px/1.2 var(--titulo); }
.reliquias .chip { background: rgb(244 192 14 / .1); border-color: rgb(244 192 14 / .28); color: #ffe7a0; }

/* ---------- Ligas ---------- */
.ligas { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.liga { --color: #8a9bd0; position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 2px 16px; padding: 16px 18px; border-radius: 20px; background: var(--superficie-2); background: linear-gradient(90deg, color-mix(in srgb, var(--color) 15%, transparent), transparent 75%), var(--superficie-2); border: 1px solid color-mix(in srgb, var(--color) 28%, transparent); }
.liga.nicho { --color: var(--hueso); }
.liga.sepulcro { --color: var(--espectro); }
.liga.mausoleo { --color: #a987ff; }
.liga.panteon { --color: #e77bff; }
.liga.necropolis { --color: var(--oro); }
.emblema { grid-row: span 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color) 34%, transparent), color-mix(in srgb, var(--color) 8%, transparent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color) 45%, transparent), 0 0 26px color-mix(in srgb, var(--color) 25%, transparent); }
.emblema .icono { width: 34px; height: 34px; background: var(--color); }
.liga h3 { font-size: 25px; line-height: 1.1; }
.liga .rango { margin: 0; color: var(--color); font-weight: 900; font-size: 14.5px; letter-spacing: .02em; }
.liga .detalle { margin: 0; color: var(--texto-2); font-size: 14.5px; line-height: 1.45; }
.protecciones { display: grid; gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; }
.protecciones li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; align-items: start; padding: 16px 18px; border-radius: 18px; background: rgb(255 255 255 / .03); border: 1px solid var(--borde); }
.protecciones .icono { grid-row: span 2; width: 34px; height: 34px; margin-top: 4px; background: linear-gradient(180deg, var(--espectro), var(--espectro-2)); }
.protecciones strong { font: 400 20px/1.2 var(--titulo); }
.protecciones span { color: var(--texto-2); font-size: 15px; line-height: 1.45; }

/* ---------- Cripta del día ---------- */
.dia { display: grid; gap: 40px; align-items: center; }
.lista-icono { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.lista-icono li { display: flex; align-items: center; gap: 12px; color: var(--texto-2); }
.lista-icono .icono { width: 26px; height: 26px; background: var(--oro-claro); }
.lapida-dia { position: relative; width: min(100%, 360px); margin: 0 auto 18px; padding: 54px 26px 38px; text-align: center; border-radius: 180px 180px 24px 24px / 150px 150px 24px 24px; background: linear-gradient(180deg, #3b4b7d, #27325c 58%, #1b2347); border: 1px solid rgb(255 255 255 / .14); box-shadow: inset 0 2px 0 rgb(255 255 255 / .14), inset 0 -20px 40px rgb(0 0 0 / .35), 0 34px 60px rgb(0 0 0 / .45), 0 0 90px rgb(244 192 14 / .14); }
.lapida-dia::after { content: ""; position: absolute; left: -40px; right: -40px; bottom: -22px; height: 36px; border-radius: 50%; background: radial-gradient(closest-side, rgb(46 242 224 / .3), transparent); z-index: -1; }
.lapida-dia .icono.i-corona { width: 58px; height: 58px; margin: 0 auto 8px; background: linear-gradient(180deg, #fff1b8, var(--oro)); }
.grabado { margin: 0; color: #d3dbf6; font: 900 13px/1.4 var(--cuerpo); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 0 rgb(0 0 0 / .5); }
.cuenta { display: block; margin: 12px 0 8px; color: var(--oro-claro); font: 900 clamp(46px, 13vw, 60px)/1 var(--cuerpo); font-variant-numeric: tabular-nums; letter-spacing: .01em; text-shadow: 0 3px 0 #7a4a00, 0 0 30px rgb(244 192 14 / .35); }
.lapida-dia small { color: #aab6dc; font-size: 14px; font-weight: 700; }

/* ---------- ¿Pasas mi cripta? ---------- */
.reto { overflow: hidden; }
.reto::after { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 80%; z-index: 0; background: radial-gradient(40% 50% at 50% 50%, rgb(209 57 240 / .22), transparent 70%); pointer-events: none; }
.reto .contenedor { position: relative; z-index: 1; max-width: 680px; text-align: center; }
.formulario-reto { display: grid; gap: 12px; margin: 26px auto 0; max-width: 520px; }
.formulario-reto label { color: var(--texto-2); font-weight: 800; font-size: 15px; }
.formulario-reto input { width: 100%; min-height: 64px; padding: 14px 16px; border-radius: 18px; border: 2px solid rgb(255 255 255 / .16); background: var(--noche); color: var(--texto); caret-color: var(--espectro); font: 400 26px/1 var(--titulo); letter-spacing: .14em; text-align: center; text-transform: uppercase; transition: border-color .2s, box-shadow .2s; }
.formulario-reto input::placeholder { color: #7a86b0; }
.formulario-reto input:focus { outline: none; border-color: var(--espectro); box-shadow: 0 0 0 4px rgb(46 242 224 / .2), 0 0 40px rgb(46 242 224 / .16); }
.formulario-reto input[aria-invalid="true"] { border-color: #ff7a5e; }
.error-reto { min-height: 1.5em; margin: 0; color: #ff8f75; font-weight: 800; font-size: 15px; }
.nota-reto { margin: 18px 0 0; color: var(--texto-3); font-size: 15px; }

/* ---------- Juego limpio ---------- */
.limpio { text-align: center; background: radial-gradient(60% 80% at 50% 0%, rgb(106 47 192 / .32), transparent 70%), var(--noche); border-top: 1px solid var(--borde); }
.compromisos { display: grid; gap: 12px; max-width: 900px; margin: 28px auto 30px; padding: 0; list-style: none; text-align: left; }
.compromisos li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; background: rgb(255 255 255 / .035); border: 1px solid var(--borde); color: var(--texto-2); }
.compromisos .icono { width: 26px; height: 26px; margin-top: 1px; background: var(--espectro); }
.limpio .entradilla { margin: 0 auto 26px; }

/* ---------- Pie ---------- */
.pie { padding: 36px 16px 44px; background: #030712; border-top: 1px solid var(--borde); color: var(--texto-3); font-size: 15px; }
.pie-contenido { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.pie img { width: auto; height: 46px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pie nav a { padding: 6px 0; color: var(--texto-2); font-weight: 700; text-decoration: none; }
.pie nav a:hover { color: var(--espectro); text-decoration: underline; text-underline-offset: 4px; }
.derechos { flex-basis: 100%; margin: 0; font-size: 14px; }

/* ---------- Páginas legales y de ayuda ---------- */
.legal { position: relative; max-width: 820px; margin: 0 auto; padding: 44px 16px 92px; }
.legal::before { content: ""; position: absolute; top: 0; left: 50%; width: 120%; height: 320px; transform: translateX(-50%); z-index: -1; background: radial-gradient(50% 60% at 50% 0%, rgb(46 242 224 / .1), transparent 70%); pointer-events: none; }
.legal h1 { margin: 6px 0 14px; font-size: clamp(38px, 9vw, 60px); line-height: 1.02; text-wrap: balance; }
.legal h2 { margin: 40px 0 12px; color: var(--oro-claro); font-size: 26px; line-height: 1.15; }
.legal p, .legal li { color: var(--texto-2); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal li strong, .legal p strong { color: var(--texto); }
.legal a:not(.boton) { color: var(--espectro); text-underline-offset: 3px; }
.legal .fecha { color: var(--texto-3); font-size: 15px; }
.legal .entradilla { font-size: 19px; }
.aviso-caja { margin: 28px 0; padding: 18px 20px; border-radius: 16px; background: rgb(244 192 14 / .07); border: 1px solid rgb(244 192 14 / .25); border-left: 4px solid var(--oro); color: var(--texto); }
.preguntas { margin-top: 18px; border-top: 1px solid var(--borde); }
details { border-bottom: 1px solid var(--borde); }
summary { position: relative; padding: 18px 44px 18px 0; font: 400 21px/1.25 var(--titulo); list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 3px solid var(--espectro); border-bottom: 3px solid var(--espectro); transform: translateY(-75%) rotate(45deg); transition: transform .2s; }
details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
details p { margin: 0 0 18px; }
.legal .boton { margin-top: 10px; }

/* ---------- Enlace de cripta (/c/CODIGO) ---------- */
.pagina-cripta { position: relative; max-width: 580px; margin: 0 auto; padding: 28px 16px 72px; text-align: center; }
.pagina-cripta::before { content: ""; position: absolute; top: -40px; left: 50%; width: 140%; height: 420px; transform: translateX(-50%); z-index: -1; background: radial-gradient(45% 55% at 50% 30%, rgb(46 242 224 / .14), transparent 70%), radial-gradient(40% 50% at 50% 60%, rgb(106 47 192 / .25), transparent 70%); pointer-events: none; }
.tarjeta { position: relative; padding: 30px 22px 26px; border-radius: 28px; background: linear-gradient(180deg, var(--superficie-2), var(--superficie)); border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 34px 70px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .06); }
.tarjeta .icono-app { width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 22px; box-shadow: 0 0 0 3px rgb(46 242 224 / .25), 0 14px 34px rgb(0 0 0 / .5), 0 0 40px rgb(46 242 224 / .25); }
.tarjeta h1 { margin: 4px 0 14px; font-size: clamp(32px, 9vw, 46px); line-height: 1.05; overflow-wrap: anywhere; }
.codigo { display: inline-block; padding: 10px 16px; border-radius: 12px; background: rgb(46 242 224 / .08); border: 1px dashed rgb(46 242 224 / .45); color: var(--espectro); font: 400 22px/1 var(--titulo); letter-spacing: .14em; }
.ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 24px 0; }
.ficha div { padding: 14px 6px 12px; border-radius: 16px; background: rgb(255 255 255 / .04); border: 1px solid var(--borde); }
.ficha dt { color: var(--texto-3); font: 900 11px/1.2 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; }
.ficha dd { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; margin: 8px 0 0; font: 400 20px/1.1 var(--titulo); }
.ficha dd .icono { width: 22px; height: 22px; background: var(--oro-claro); }
.ficha dd.en-columna { flex-direction: column; gap: 4px; font-size: 18px; }
.calaveras { display: inline-flex; gap: 1px; }
.ficha .calaveras .icono { width: 17px; height: 17px; background: rgb(255 255 255 / .16); }
.ficha .calaveras .icono.llena { background: var(--peligro); }
.etiqueta-nueva { padding: 4px 10px; border-radius: 999px; background: rgb(46 242 224 / .12); color: var(--espectro); font: 900 13px/1.2 var(--cuerpo); letter-spacing: .06em; text-transform: uppercase; }
.acciones { display: grid; gap: 14px; }
.acciones .boton { width: 100%; }
.estado { margin: 12px 0 0; color: var(--espectro); font-size: 15px; font-weight: 700; }
.enlace-manual { width: 100%; margin-top: 10px; padding: 12px; border-radius: 10px; border: 1px solid #52678d; background: var(--noche); color: var(--texto); font: inherit; }
.cargando { display: none; }
.js .cargando:not([hidden]) { display: block; }
.barra { height: 14px; margin: 12px auto; border-radius: 7px; background: linear-gradient(90deg, #18213f 0, #2a3768 50%, #18213f 100%) 0 0 / 200% 100%; animation: brillo 1.4s linear infinite; }
.barra.ancha { width: 70%; height: 30px; }
.barra.media { width: 45%; }
.circulo { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 22px; background: linear-gradient(90deg, #18213f 0, #2a3768 50%, #18213f 100%) 0 0 / 200% 100%; animation: brillo 1.4s linear infinite; }
.instalar { margin-top: 18px; padding: 24px 20px; border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); }
.instalar h2 { margin-bottom: 8px; font-size: 24px; }
.instalar p { margin: 0; color: var(--texto-2); font-size: 15px; }
.instalar .tiendas { margin-top: 18px; }
.perdida .icono.i-lapida { width: 74px; height: 74px; margin: 0 auto 10px; background: linear-gradient(180deg, #a9b6e0, var(--piedra)); }
.perdida p { color: var(--texto-2); }
.perdida .formulario-reto { margin-top: 18px; }
.nota { margin: 22px 8px 0; color: var(--texto-3); font-size: 14px; }

/* ---------- Animaciones ---------- */
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes latir { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes niebla { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes titilar { from { opacity: .45; } to { opacity: .8; } }
@keyframes subir { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(18px, -45vh); } 85% { opacity: .6; } 100% { transform: translate(-10px, -90vh); opacity: 0; } }
@keyframes parpadeo { from { transform: rotate(-45deg) scale(1); opacity: .9; } to { transform: rotate(-45deg) scale(1.1, .92); opacity: 1; } }
@keyframes vagar { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(14px, -22px); } 50% { transform: translate(-6px, -40px); } 75% { transform: translate(-16px, -16px); } }
@keyframes chisporrotear { 0% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } 100% { opacity: .7; transform: scale(.98); } }
@keyframes mirada { 0%, 100% { opacity: .35; transform: scale(.85); } 45% { opacity: .95; transform: scale(1.1); } 55% { opacity: 1; transform: scale(1.15); } }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- Pantallas mayores ---------- */
@media (min-width: 600px) {
  .seccion { padding: 92px 28px; }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pieza { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pieza-arte { aspect-ratio: 4 / 3; min-height: 0; }
  .marcador::before { width: 36%; }
  .protecciones, .compromisos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ligas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie img { height: 52px; }
}
@media (min-width: 760px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .protecciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .cabecera { height: 76px; padding: 0 32px; }
  .marca img { height: 60px; }
  .menu { display: flex; }
  .js .menu + .idiomas { margin-left: 10px; }
  .piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ligas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compromisos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .compromisos li { flex-direction: column; }
  .dia { grid-template-columns: 1.15fr .85fr; gap: 64px; }
  .derechos { flex-basis: auto; margin-left: auto; }
}
@media (min-width: 1000px) {
  .heroe { padding: 40px 32px 110px; text-align: left; }
  .heroe-contenido { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 36px; }
  .heroe-texto { max-width: 640px; }
  .fatuo.izquierda { left: 3%; top: 70%; }
  .fatuo.derecha { right: 4%; top: 14%; }
  .heroe-arte { order: 2; width: 100%; max-width: 600px; }
  .heroe .entradilla { margin-left: 0; }
  .tiendas { justify-content: flex-start; }
  .heroe h1 { font-size: clamp(54px, 4.7vw, 70px); }
  .piezas.trampas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ligas { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 14px; }
  .liga { grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 6px; padding: 22px 14px 20px; text-align: center; background: var(--superficie-2); background: linear-gradient(180deg, color-mix(in srgb, var(--color) 16%, transparent), transparent 80%), var(--superficie-2); }
  .emblema { grid-row: auto; margin-bottom: 8px; }
  .liga:nth-child(1) { min-height: 230px; }
  .liga:nth-child(2) { min-height: 254px; }
  .liga:nth-child(3) { min-height: 278px; }
  .liga:nth-child(4) { min-height: 302px; }
  .liga:nth-child(5) { min-height: 326px; }
  .liga:nth-child(6) { min-height: 350px; box-shadow: 0 0 50px rgb(244 192 14 / .14); }
}

/* Sin animaciones si el sistema lo pide. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .almas { display: none; }
  .con-revelado .revelar:not(.visible) { opacity: 1; transform: none; }
}

/* Iconos (máscaras SVG). Generados; cada pieza, liga o uso tiene su clase i-<id>. */
.i-puas{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M4 20 7 10.5 10 20Z M9 20 12 4.5 15 20Z M14 20 17 10.5 20 20Z'/%3E%3Cpath d='M2.5 21h19'/%3E%3C/svg%3E")}
.i-sierra{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M18.6 12 20.99 16.37 17.34 15.88 16.71 20.82 14.04 18.28 10.62 21.9 9.96 18.28 5.06 19.2 6.66 15.88 2.15 13.75 5.4 12 3.01 7.63 6.66 8.12 7.29 3.18 9.96 5.72 13.38 2.1 14.04 5.72 18.94 4.8 17.34 8.12 21.85 10.25Z M12 9.6a2.4 2.4 0 1 0 0 4.8a2.4 2.4 0 1 0 0-4.8Z'/%3E%3C/svg%3E")}
.i-suelo_fragil{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM12.5 3l-1.8 5.2 3.1 3-2.2 4.3 1.2 5.5 M13.8 11.2l4.2-1.4L21 11 M10.7 8.2 6.5 7.6 3 9.4 M11.6 15.5 7.5 17'/%3E%3C/svg%3E")}
.i-lanzallamas{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M12 2c1 4 6.5 6 6.5 12.2a6.5 6.5 0 0 1-13 0c0-3.2 1.7-5.4 3.3-6.8 0 2.2 1 3.8 2.6 4.3C10.8 9 10.5 5 12 2ZM12 12.6c1.1 1.5 2.7 2.3 2.7 4.2a2.7 2.7 0 0 1-5.4 0c0-1.5 1.1-2.6 2.7-4.2Z'/%3E%3C/svg%3E")}
.i-ballesta{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V6 M4 11c2.8-3.6 13.2-3.6 16 0 M4 11l8 4 8-4 M8.8 6.4 12 3l3.2 3.4 M10 21h4'/%3E%3C/svg%3E")}
.i-brea{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M2.8 17.6c0-2 2.4-3.2 5-3.2 1.6 0 2.2-1 4.2-1s3.4 1 5 1c2.6 0 4.2 1.2 4.2 3.2s-2.6 3.4-6 3.4H8.6c-3.2 0-5.8-1.3-5.8-3.4Z'/%3E%3Cpath d='M8.6 8.6a2 2 0 1 1 0 4a2 2 0 1 1 0-4Z M15 4.6a1.6 1.6 0 1 1 0 3.2a1.6 1.6 0 1 1 0-3.2Z M13.4 10.2a1 1 0 1 1 0 2a1 1 0 1 1 0-2Z'/%3E%3C/svg%3E")}
.i-pendulo{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6V13'/%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M12 1.4a1.6 1.6 0 1 1 0 3.2a1.6 1.6 0 1 1 0-3.2Z M4.6 12.4c3.4 3.1 11.4 3.1 14.8 0l-1 4.6c-3.4 3.4-9.4 3.4-12.8 0Z'/%3E%3Cpath d='M3 6.5c-.9 1.6-1.2 3.1-1 4.6 M21 6.5c.9 1.6 1.2 3.1 1 4.6'/%3E%3C/svg%3E")}
.i-aplastador{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M5 3h14a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5H5a1.5 1.5 0 0 1-1.5-1.5v-6A1.5 1.5 0 0 1 5 3Z'/%3E%3Cpath d='M8 15v2.4 M12 15v3.4 M16 15v2.4 M5.5 21.2h13'/%3E%3C/svg%3E")}
.i-hielo{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12L12 2.5 M12 6L13.98 4.02 M12 6L10.02 4.02 M12 12L3.77 7.25 M6.8 9L6.08 6.3 M6.8 9L4.1 9.72 M12 12L3.77 16.75 M6.8 15L4.1 14.28 M6.8 15L6.08 17.7 M12 12L12 21.5 M12 18L10.02 19.98 M12 18L13.98 19.98 M12 12L20.23 16.75 M17.2 15L17.92 17.7 M17.2 15L19.9 14.28 M12 12L20.23 7.25 M17.2 9L19.9 9.72 M17.2 9L17.92 6.3'/%3E%3C/svg%3E")}
.i-soplido{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10.5a3 3 0 1 0-3-3 M3 12.5h15.5a3 3 0 1 1-3 3 M3 17h6.5a2.5 2.5 0 1 1-2.5 2.5'/%3E%3C/svg%3E")}
.i-portal{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c4.4 0 8 4.3 8 9.5s-3.6 9.5-8 9.5-8-4.3-8-9.5 3.6-9.5 8-9.5ZM12 7.4c2.6 0 4.3 2.1 4.3 4.6s-2 4.1-4.1 4.1-3.2-1.5-3.2-3.1 1.1-2.6 2.6-2.6 2.1 1 2.1 2.1'/%3E%3C/svg%3E")}
.i-barril{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6.4c0-1.5 2.7-2.6 6-2.6s6 1.1 6 2.6v11.8c0 1.5-2.7 2.6-6 2.6s-6-1.1-6-2.6ZM6 10c1.5.8 3.7 1.2 6 1.2s4.5-.4 6-1.2 M6 14.8c1.5.8 3.7 1.2 6 1.2s4.5-.4 6-1.2 M12 3.8c.2-1.4 1.4-2.2 2.8-1.6'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M17.6 1.2l.5 1.2 1.2.5-1.2.5-.5 1.2-.5-1.2-1.2-.5 1.2-.5Z'/%3E%3C/svg%3E")}
.i-esqueleto{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M12 2.4c-4.7 0-8 3.2-8 7.6 0 2.6 1.3 4.4 3 5.4v3.6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-3.6c1.7-1 3-2.8 3-5.4 0-4.4-3.3-7.6-8-7.6ZM9 8.4a2.1 2.1 0 1 1 0 4.2a2.1 2.1 0 1 1 0-4.2Z M15 8.4a2.1 2.1 0 1 1 0 4.2a2.1 2.1 0 1 1 0-4.2ZM12 13.4l1.1 2.1h-2.2Z M9.5 17h1v3h-1Z M13.5 17h1v3h-1Z'/%3E%3C/svg%3E")}
.i-murcielagos{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M12 9.4 13.1 7 13.6 9.2 16.2 8.4 19.2 6.2 22.8 7.2 21.2 9.4 20.4 12.6 18 11.4 16.6 14.4 14.6 13.2 12 17.4 9.4 13.2 7.4 14.4 6 11.4 3.6 12.6 2.8 9.4 1.2 7.2 4.8 6.2 7.8 8.4 10.4 9.2 10.9 7Z'/%3E%3C/svg%3E")}
.i-gargola{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M4.8 2.4c.6 2.6 1.6 4.1 3.2 5.1 1.2-.6 2.5-.9 4-.9s2.8.3 4 .9c1.6-1 2.6-2.5 3.2-5.1 1.6 2.5 1.6 5.6 0 7.6l1.6 1.6-1.9.6C18.2 16.6 15.6 21.2 12 21.2s-6.2-4.6-6.9-9l-1.9-.6L4.8 10c-1.6-2-1.6-5.1 0-7.6ZM7.9 11.6l3.4 1-.4 1.3-2.7-.5Z M16.1 11.6l-3.4 1 .4 1.3 2.7-.5ZM9.4 16.4h5.2l-1.1 1.7-.7-.9-.8 1.1-.8-1.1-.7.9Z'/%3E%3C/svg%3E")}
.i-mimico{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M7 3.4h10a4 4 0 0 1 4 4V10H3V7.4a4 4 0 0 1 4-4Z M9 5.6a1.3 1.3 0 1 1 0 2.6a1.3 1.3 0 1 1 0-2.6Z M15 5.6a1.3 1.3 0 1 1 0 2.6a1.3 1.3 0 1 1 0-2.6Z'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M4.6 10l1.3 2.2L7.2 10Z M9.1 10l1.3 2.2 1.3-2.2Z M12.3 10l1.3 2.2 1.3-2.2Z M16.8 10l1.3 2.2 1.3-2.2ZM6.6 13.8l1.3-2.1 1.3 2.1Z M11 13.8l1.3-2.1 1.3 2.1Z M15.2 13.8l1.3-2.1 1.3 2.1Z'/%3E%3Cpath d='M3 13.8v5.4a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-5.4Z M12 16.2v1.6'/%3E%3C/svg%3E")}
.i-fantasma{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M12 2.4a7.2 7.2 0 0 0-7.2 7.2V21.4l2.4-1.9 2.4 1.9 2.4-1.9 2.4 1.9 2.4-1.9 2.4 1.9V9.6A7.2 7.2 0 0 0 12 2.4ZM9.5 8.2c.8 0 1.3.9 1.3 2s-.5 2-1.3 2-1.3-.9-1.3-2 .5-2 1.3-2Z M14.5 8.2c.8 0 1.3.9 1.3 2s-.5 2-1.3 2-1.3-.9-1.3-2 .5-2 1.3-2ZM12 13.6a1.2 1.4 0 1 1 0 2.8a1.2 1.4 0 1 1 0-2.8Z'/%3E%3C/svg%3E")}
.i-golem{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M10 2.4h4a1 1 0 0 1 1 1v3.6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V3.4a1 1 0 0 1 1-1Z M10.4 4.4h1.2v1.3h-1.2Z M12.4 4.4h1.2v1.3h-1.2ZM7 8.8h10a1.5 1.5 0 0 1 1.5 1.5v5.4A1.5 1.5 0 0 1 17 17.2H7a1.5 1.5 0 0 1-1.5-1.5v-5.4A1.5 1.5 0 0 1 7 8.8ZM2.8 9.4h1.6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2.8a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1ZM19.6 9.4h1.6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-1.6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1ZM7.6 18h3a.8.8 0 0 1 .8.8v2a.8.8 0 0 1-.8.8h-3a.8.8 0 0 1-.8-.8v-2a.8.8 0 0 1 .8-.8ZM13.4 18h3a.8.8 0 0 1 .8.8v2a.8.8 0 0 1-.8.8h-3a.8.8 0 0 1-.8-.8v-2a.8.8 0 0 1 .8-.8Z'/%3E%3C/svg%3E")}
.i-construir{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V10.5a8 8 0 0 1 16 0V21 M9 21v-5.5a3 3 0 0 1 6 0V21 M2 21h20 M4 11.5h3.6 M16.4 11.5H20 M4 16h3.6 M16.4 16H20'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M10.9 2.4h2.2l-.3 3.4h-1.6Z'/%3E%3C/svg%3E")}
.i-asaltar{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5a4 4 0 0 1 4-4h9a4 4 0 0 1 4 4V19a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1Z M3.5 12h17 M10.5 12v2.6h3V12'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M12 1.4l.6 1.5 1.5.6-1.5.6-.6 1.5-.6-1.5-1.5-.6 1.5-.6Z'/%3E%3C/svg%3E")}
.i-ecos{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12a8.6 8.6 0 1 0 2.6-6.2L3.5 8.4 M3.5 3.6v4.8h4.8'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M10 8.6l5.2 3.4-5.2 3.4Z'/%3E%3C/svg%3E")}
.i-lapida{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20.5V9a6 6 0 0 1 12 0v11.5 M3 20.5h18 M12 8.5v6 M9.6 10.9h4.8'/%3E%3C/svg%3E")}
.i-nicho{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 3h15a1.5 1.5 0 0 1 1.5 1.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3Z M3 9h18 M3 15h18 M9 3v18 M15 3v18'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M12 10.6a1.4 1.4 0 1 1 0 2.8a1.4 1.4 0 1 1 0-2.8Z'/%3E%3C/svg%3E")}
.i-sepulcro{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h6l3.2 5-1.6 14H7.4L5.8 7.5Z M12 8v7 M9.6 10.4h4.8'/%3E%3C/svg%3E")}
.i-mausoleo{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 12 3l9 6Z M5.5 9v9 M9.5 9v9 M14.5 9v9 M18.5 9v9 M3.5 18h17 M2 21h20'/%3E%3C/svg%3E")}
.i-panteon{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10a7 7 0 0 1 14 0 M12 3V1.4 M3.5 10h17 M6 10v8 M10 10v8 M14 10v8 M18 10v8 M3.5 18h17 M2 21h20'/%3E%3C/svg%3E")}
.i-necropolis{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21h20 M3.5 21v-7l2.5-2.2L8.5 14v7 M9.6 21V8.5L12 6l2.4 2.5V21 M15.6 21v-8.4a2.5 2.5 0 0 1 5 0V21 M12 1.6v3 M10.8 2.7h2.4'/%3E%3C/svg%3E")}
.i-telefono{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 2h7A2.5 2.5 0 0 1 18 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 6 19.5v-15A2.5 2.5 0 0 1 8.5 2Z M11 18.4h2'/%3E%3C/svg%3E")}
.i-corona{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M3.2 17.5 4.6 7.6l4.8 4.3L12 4.4l2.6 7.5 4.8-4.3 1.4 9.9Z'/%3E%3Cpath d='M3.5 21h17'/%3E%3C/svg%3E")}
.i-escudo{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6.1c0 4.9-3.4 8.4-8 9.9-4.6-1.5-8-5-8-9.9V5.5Z M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E")}
.i-espadas{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 20 4 M6.2 14.2l3.6 3.6 M6 18l-2.5 2.5 M18 18 4 4 M17.8 14.2l-3.6 3.6 M18 18l2.5 2.5'/%3E%3C/svg%3E")}
.i-moneda{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 1 0 18a9 9 0 1 1 0-18Z'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1' stroke-linejoin='round' d='M12 3a9 9 0 0 1 0 18Z'/%3E%3C/svg%3E")}
.i-candado{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 10.5h11a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 5 19.5V12a1.5 1.5 0 0 1 1.5-1.5Z M8 10.5V7a4 4 0 0 1 8 0v3.5 M12 14.5v2.5'/%3E%3C/svg%3E")}
.i-reloj{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 1 0 18a9 9 0 1 1 0-18Z M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.i-flecha{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14 M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-copiar{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1Z M5 15H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5'/%3E%3C/svg%3E")}
.i-puerta{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V9a7 7 0 0 1 14 0v12 M2.5 21h19 M12 2v19 M9.5 13v1.5 M14.5 13v1.5'/%3E%3C/svg%3E")}