/* Voryn Mu: estilo del portal. Paleta, tipografía y ornamentos de la identidad visual (marca/identidad.webp):
   negro abisal, verde selva, esmeralda, jade, oro ancestral y hueso; Cinzel para títulos y Montserrat para leer. */
:root {
  --negro-abisal: #050505;
  --verde-selva: #0f3d2e;
  --esmeralda: #00e58a;
  --jade: #1e6b57;
  --oro-ancestral: #c79a3b;
  --hueso: #e6dfc9;

  --fondo: #060807;
  --fondo2: #0a120e;
  --panel: #0c1913;
  --panel2: #10221a;
  --borde: #c79a3b33;
  --borde-suave: #e6dfc914;
  --texto: var(--hueso);
  --suave: #a9a38f;
  --oro: var(--oro-ancestral);
  --oro2: #e8c77e;
  --oro3: #f6e2ae;
  --rojo: #e0645a;
  --verde: var(--esmeralda);
  --radio: 12px;
  --ancho: 1180px;
  --sombra: 0 18px 40px #0009;
  --oro-texto: linear-gradient(180deg, var(--oro3) 0%, var(--oro2) 45%, var(--oro) 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Las franjas de ancho completo usan 100vw, que incluye la barra de desplazamiento: sin esto, sobra un poco a lo ancho. */
html, body { overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 70% 40% at 15% 0%, #00e58a12 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 30%, #0f3d2e55 0%, transparent 70%),
    var(--fondo);
  color: var(--texto);
  font: 15.5px/1.65 Montserrat, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--oro2); text-decoration: none; transition: color .15s; }
a:hover { color: var(--oro3); }
h1, h2, h3, h4 { font-family: Cinzel, Georgia, serif; letter-spacing: .03em; line-height: 1.25; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .4em; }
h2 { font-size: 1.3rem; margin: 0; color: var(--oro2); }
h3 { font-size: 1rem; margin: 1.2em 0 .5em; color: var(--suave); }
code { background: #0008; border: 1px solid var(--borde-suave); padding: .1em .45em; border-radius: 5px; color: var(--oro2); font-size: .9em; }
small { color: var(--suave); }
img { max-width: 100%; }
::selection { background: #00e58a44; }

/* Texto dorado de los títulos, como el logotipo. */
.dorado, .cabecera h1, .seccion-titulo h2, .hero .lema {
  background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Ornamento: línea, rombo esmeralda, línea (como en la marca). */
.ornamento { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: .4rem auto; width: min(260px, 70%); }
.ornamento::before, .ornamento::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); }
.ornamento::after { background: linear-gradient(90deg, var(--oro), transparent); }
.ornamento i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--esmeralda); box-shadow: 0 0 10px var(--esmeralda); }

/* ---------- Encabezado ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, #050705fa, #050705f2); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.barra-in { max-width: var(--ancho); margin: 0 auto; padding: .55rem 16px; display: flex; align-items: center; gap: 1.2rem; }
.marca { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.marca img { width: 48px; height: 48px; filter: drop-shadow(0 0 8px #00e58a40); }
.marca span { font: 900 1.25rem Cinzel, Georgia, serif; letter-spacing: .06em; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu { display: flex; align-items: center; gap: .3rem; }
.menu a:not(.boton), .menu button.link {
  color: var(--texto); font-size: .88rem; font-weight: 500; padding: .45rem .7rem; border-radius: 8px; position: relative;
}
.menu a:not(.boton):hover, .menu button.link:hover { color: var(--oro3); background: #ffffff08; }
.menu a.activo { color: var(--oro2); }
.menu a.activo::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: 2px; background: var(--oro); border-radius: 2px; }
.menu .cuenta { display: flex; align-items: center; gap: .3rem; margin-left: .6rem; padding-left: .9rem; border-left: 1px solid var(--borde); }
.enlinea { display: inline; margin: 0; }
button.link { background: none; border: 0; color: var(--suave); cursor: pointer; font: inherit; padding: 0; }
.menu-boton { display: none; }

main { flex: 1; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; cursor: pointer; font: 700 .92rem Montserrat, sans-serif; letter-spacing: .02em;
  padding: .78em 1.5em; border-radius: 10px; text-decoration: none;
  background: linear-gradient(180deg, var(--oro3) 0%, var(--oro2) 35%, var(--oro) 100%); color: #1d1406;
  box-shadow: 0 0 0 1px #f6e2ae55 inset, 0 8px 24px #c79a3b33;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.boton:hover { color: #1d1406; transform: translateY(-1px); box-shadow: 0 0 0 1px #f6e2ae88 inset, 0 10px 30px #c79a3b55; }
.boton.sec, .boton.secundario {
  background: #0008; color: var(--oro2); box-shadow: inset 0 0 0 1px var(--oro);
}
.boton.sec:hover, .boton.secundario:hover { color: var(--oro3); background: #c79a3b1a; }
.boton.grande { font-size: 1rem; padding: .95em 1.9em; }
.boton.chico { padding: .45em .95em; font-size: .82rem; border-radius: 8px; }
.boton:disabled, .boton[aria-disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.estado {
  display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .85rem; border-radius: 999px;
  background: #000a; border: 1px solid var(--borde-suave); font-size: .8rem; font-weight: 600; color: var(--texto);
}
.estado i { width: 9px; height: 9px; border-radius: 50%; background: var(--suave); }
.estado.on i { background: var(--esmeralda); box-shadow: 0 0 0 0 #00e58a99; animation: pulso 2s infinite; }
.estado.off i { background: var(--rojo); }
@keyframes pulso { 70% { box-shadow: 0 0 0 9px #00e58a00; } 100% { box-shadow: 0 0 0 0 #00e58a00; } }

.acciones { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; align-items: center; }

.icono { width: 1.1em; height: 1.1em; }

/* Títulos de sección con ornamento. */
.seccion { margin: 3.5rem 0 0; }
.seccion-titulo { text-align: center; margin-bottom: 1.6rem; }
.seccion-titulo h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.seccion-titulo p { color: var(--suave); margin: .3rem auto 0; max-width: 40em; }

/* ---------- Paneles ---------- */
.grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.grilla.tres { grid-template-columns: 1.15fr 1fr 1fr; }
.panel {
  position: relative; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.3rem 1.4rem; box-shadow: 0 10px 30px #0006;
}
/* Esquinas doradas, como los marcos de la identidad. */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--oro); pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radio); }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radio); }
.panel.ancho { grid-column: 1 / -1; }
.cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.cab h2 { font-size: 1.1rem; }
.cab a { font-size: .82rem; font-weight: 600; }

.tarjetas { display: grid; gap: .8rem; }
.tarjeta { background: #000a; border: 1px solid var(--borde-suave); border-radius: 10px; padding: .85rem 1.05rem; display: grid; }
.tarjeta b { font-size: 1.1rem; }
.eti { font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--oro); text-transform: uppercase; }

/* Ranking */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .7rem; padding: .55rem .2rem; border-bottom: 1px solid var(--borde-suave); }
.ranking li:last-child { border-bottom: 0; }
.ranking .pos {
  font: 800 .95rem Cinzel, serif; color: var(--suave); text-align: center; width: 2rem; height: 2rem; line-height: 2rem;
  border-radius: 50%; background: #0007; border: 1px solid var(--borde-suave);
}
.ranking li:nth-child(1) .pos { color: #1d1406; background: var(--oro-texto); border: 0; box-shadow: 0 0 14px #c79a3b66; }
.ranking li:nth-child(2) .pos { color: #111; background: linear-gradient(180deg, #f1f1f1, #9da3a6); border: 0; }
.ranking li:nth-child(3) .pos { color: #1b0f05; background: linear-gradient(180deg, #e7a46a, #9b5a2a); border: 0; }
.ranking .pj { display: flex; align-items: center; gap: .6rem; line-height: 1.3; }
.ranking .pj > span:last-child, .ranking .valor { display: grid; line-height: 1.3; }
.ranking .pj b { color: var(--texto); }
.ranking .valor { text-align: right; font-weight: 700; color: var(--oro2); }
.vacio { color: var(--suave); padding: .7rem 0; }
.clase-icono {
  flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%;
  border: 1px solid #c79a3b66; background: radial-gradient(circle at 50% 35%, var(--tono, #1e6b57), #07100c 75%); color: var(--oro3);
}
.clase-icono .icono { width: 17px; height: 17px; }
.clase-icono.f0 { --tono: #2b3f8a; }
.clase-icono.f4 { --tono: #7a2a22; }
.clase-icono.f8 { --tono: #2a6b2f; }
.clase-icono.f12 { --tono: #5b2a7a; }
.clase-icono.f16 { --tono: #7a5a1a; }
.clase-icono.f20 { --tono: #6b2a55; }
.clase-icono.f24 { --tono: #24606b; }
.emblema { flex: none; width: 22px; height: 22px; border-radius: 3px; background: #0006; border: 1px solid var(--borde-suave); image-rendering: pixelated; }
.emblema.sin { display: inline-block; }
.con-icono, .con-emblema { display: inline-flex; align-items: center; gap: .55rem; }
.ranking li.vacio { display: block; border: 0; }

/* Eventos */
.eventos { list-style: none; margin: .4rem 0 0; padding: 0; }
.eventos li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--borde-suave); }
.eventos li:last-child { border-bottom: 0; }
.eventos li > span:first-child { display: grid; line-height: 1.35; }
.eventos li > span:last-child { text-align: right; font-size: .88rem; color: var(--suave); white-space: nowrap; }
.reloj { display: inline-grid; justify-items: end; gap: .05rem; line-height: 1.2; }
.reloj .cuenta { font: 700 1.05rem Montserrat, sans-serif; font-variant-numeric: tabular-nums; color: var(--oro2); letter-spacing: .02em; }
.reloj small { font-size: .75rem; }
td .reloj { justify-items: start; }
.vivo, .vivo-chip { color: var(--verde); font-weight: 700; }
.vivo-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem;
  background: #00e58a14; border: 1px solid #00e58a44;
}
.vivo-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--esmeralda); box-shadow: 0 0 8px var(--esmeralda); }

/* Noticias */
.noticias { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.noticias article {
  position: relative; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--borde-suave);
  border-radius: var(--radio); padding: 1.3rem 1.3rem 1.2rem; overflow: hidden; transition: border-color .2s, transform .2s;
}
.noticias article::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--esmeralda), var(--oro)); opacity: .8; }
.noticias article:hover { border-color: var(--borde); transform: translateY(-2px); }
.noticias h3 { color: var(--texto); margin: .45em 0 .35em; font-size: 1.08rem; }
.noticias p { margin: 0; color: var(--suave); font-size: .93rem; }


/* ---------- Páginas internas ---------- */
.cabecera {
  position: relative; margin: 0 calc(50% - 50vw); padding: 3.2rem 16px 2.6rem; text-align: center; overflow: hidden;
  border-bottom: 1px solid var(--borde);
  background:
    linear-gradient(180deg, #060807b3 0%, #060807 100%),
    var(--fondo-cabecera, url(/img/fondo-templo.webp)) center 30% / cover no-repeat;
}
.cabecera h1 { margin: 0; }
.cabecera p { color: #cfc8b2; margin: .4rem auto 0; max-width: 42em; }
.cabecera .eti { display: block; margin-bottom: .3rem; }

.pagina { padding: 2.4rem 0 1rem; }
.pagina.angosta { max-width: 480px; margin: 0 auto; }
.pagina.angosta .form, .tarjeta-form {
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.6rem 1.6rem 1.8rem; box-shadow: var(--sombra);
}
.pagina.angosta > h1 { text-align: center; font-size: 1.8rem; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pagina.angosta > .nota { text-align: center; }
.nota { color: var(--suave); }
.tabs, .filtros { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.tabs a, .filtros a { padding: .45em 1em; border-radius: 999px; border: 1px solid var(--borde-suave); color: var(--texto); font-size: .88rem; background: #0006; }
.tabs a:hover, .filtros a:hover { border-color: var(--borde); color: var(--oro3); }
.tabs a.activo, .filtros a.activo { background: var(--oro-texto); color: #1d1406; border-color: transparent; font-weight: 700; }
.tabs { justify-content: center; }
.filtros a { font-size: .8rem; }
.tabla { overflow-x: auto; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--borde); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--borde-suave); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #ffffff05; }
th { font-size: .7rem; letter-spacing: .1em; color: var(--oro); text-transform: uppercase; background: #0005; font-weight: 700; }
td.horas { white-space: normal; color: var(--suave); font-size: .85rem; }
.tabla .filtros { padding: .9rem 1rem .2rem; margin: 0; }
/* Los tres primeros del ranking, en oro, plata y bronce. */
.ranking-tabla td.pos { font: 800 1rem Cinzel, serif; color: var(--suave); width: 3rem; }
.ranking-tabla tr.p1 td.pos { color: var(--oro2); }
.ranking-tabla tr.p2 td.pos { color: #d9dde0; }
.ranking-tabla tr.p3 td.pos { color: #e7a46a; }
.ranking-tabla tr.p1 td, .ranking-tabla tr.p2 td, .ranking-tabla tr.p3 td { background: #c79a3b0a; }
.filtros-ranking { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; margin: 0 0 1.1rem; }
.filtros-ranking select, .filtros-ranking .buscador { width: auto; min-width: 180px; }
.buscador { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 340px; }
.buscador .icono { position: absolute; left: .8rem; color: var(--suave); pointer-events: none; }
.buscador input { padding-left: 2.4rem; }
.filtros-ranking .limpiar { font-size: .85rem; }
.paginas { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; font-size: .9rem; color: var(--suave); }
.paginas a { font-weight: 600; }

/* Formularios */
.form { display: grid; gap: .35rem; margin-top: 1rem; }
.form label { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; margin-top: .6rem; }
.form small { margin-top: -.05rem; font-size: .8rem; }
input, select {
  background: #050806; color: var(--texto); border: 1px solid var(--borde-suave); border-radius: 9px;
  padding: .72em .9em; font: inherit; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px #c79a3b26; }
input[type="checkbox"] { width: auto; accent-color: var(--oro); }
.form .boton { margin-top: 1.1rem; width: 100%; }
.alerta { padding: .85rem 1.05rem; border-radius: 10px; background: #c79a3b14; border: 1px solid #c79a3b55; margin: 1rem 0; }
.alerta.error { background: #e0645a14; border-color: #e0645a66; }
.alerta.ok { background: #00e58a10; border-color: #00e58a55; }
.guia li { margin-bottom: 1rem; }

/* Mi panel */
.pjs { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.1rem; margin: 1.2rem 0; }
.pj-card { position: relative; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem; display: grid; gap: .9rem; }
.pj-card header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; border-bottom: 1px solid var(--borde-suave); padding-bottom: .6rem; }
.pj-card h3 { margin: 0; color: var(--oro2); font-size: 1.2rem; }
.pj-card header span { color: var(--suave); font-size: .85rem; }
.pj-card dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: 0; }
.pj-card dt { font-size: .66rem; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.pj-card dd { margin: 0; font-weight: 700; }
.puntos p { margin: 0 0 .4rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .45rem; margin-bottom: .7rem; }
.stats label { display: grid; gap: .2rem; font-size: .8rem; }
.stats input { padding: .45em .55em; }
.resumen-cuenta { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }
.resumen-cuenta span { padding: .3rem .8rem; border-radius: 999px; background: #000a; border: 1px solid var(--borde-suave); font-size: .82rem; color: var(--suave); }
.resumen-cuenta b { color: var(--oro2); }

/* Guía: índice fijo a la izquierda y el texto a la derecha. */
.doc { display: grid; grid-template-columns: 230px 1fr; gap: 2.5rem; align-items: start; }
.indice { position: sticky; top: 5.5rem; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.2rem; max-height: calc(100vh - 7rem); overflow: auto; }
.indice h2 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin-bottom: .6rem; font-family: Montserrat, sans-serif; }
.indice ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .88rem; }
.indice li::marker { color: var(--oro); }
.indice a { color: var(--texto); }
.indice a:hover { color: var(--oro2); }
.doc article { min-width: 0; max-width: 780px; }
.doc article > h1 { display: none; }
.doc article h2 { font-size: 1.45rem; margin: 2.4rem 0 .8rem; padding-top: 1rem; border-top: 1px solid var(--borde); scroll-margin-top: 5.5rem; }
.doc article h3 { font-size: 1.02rem; color: var(--esmeralda); margin: 1.6rem 0 .5rem; scroll-margin-top: 5.5rem; }
.doc article p, .doc article li { color: var(--texto); }
.doc article b { color: var(--oro2); }
.doc article ul, .doc article ol { padding-left: 1.3rem; }
.doc article li { margin-bottom: .3rem; }
.doc .tabla { margin: .9rem 0 1.3rem; }
.doc td { white-space: normal; }

/* Guía: portada con tarjetas y una página por tema. */
.guia-destacada {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; padding: 1.6rem 1.8rem; margin-bottom: 1.6rem;
  border: 1px solid var(--borde); border-radius: var(--radio); color: inherit; box-shadow: var(--sombra);
  background: linear-gradient(110deg, #060807f0 0%, #060807cc 55%, #06080766 100%), var(--arte, url(/img/fondo-templo.webp)) center / cover;
  transition: border-color .2s, transform .2s;
}
.guia-destacada:hover { border-color: var(--oro); transform: translateY(-2px); color: inherit; }
.guia-destacada img { width: 120px; height: 120px; filter: drop-shadow(0 0 18px #00e58a55); }
.guia-destacada h2 { font-size: 1.7rem; margin: .2rem 0 .4rem; }
.guia-destacada p { color: #cfc8b2; margin: 0 0 .9rem; max-width: 40em; }
.guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.guia-tarjeta {
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr; gap: .25rem 1rem; align-items: start;
  padding: 1.1rem 1.2rem; color: inherit; border: 1px solid var(--borde-suave); border-radius: var(--radio);
  background: linear-gradient(180deg, var(--panel2), var(--panel)); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.guia-tarjeta:hover { color: inherit; border-color: #c79a3b88; transform: translateY(-3px); box-shadow: 0 14px 30px #0008, 0 0 20px #00e58a14; }
.guia-tarjeta img { grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--borde-suave); }
.guia-tarjeta h3 { margin: .1rem 0 0; color: var(--oro2); font-size: 1.02rem; }
.guia-tarjeta p { margin: 0; color: var(--suave); font-size: .86rem; line-height: 1.5; }
.guia-cabecera {
  margin: 0 calc(50% - 50vw); padding: 2.4rem max(16px, calc((100vw - var(--ancho)) / 2 + 16px)) 2rem; display: flex; align-items: center; gap: 1.4rem;
  border-bottom: 1px solid var(--borde); background: linear-gradient(180deg, #060807b3, #060807), url(/img/fondo-templo.webp) center 30% / cover;
}
.guia-cabecera img { width: 96px; height: 96px; border-radius: 18px; border: 1px solid var(--borde); box-shadow: 0 0 24px #00e58a26; }
.guia-cabecera h1 { margin: .2rem 0 0; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.indice-guias { list-style: none; padding: 0 !important; }
.indice-guias a { display: flex; align-items: center; gap: .55rem; padding: .3rem .4rem; border-radius: 8px; }
.indice-guias a.activo { background: #c79a3b1f; color: var(--oro3); }
.indice-guias img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.guia-texto > h3:first-child, .guia-texto > p:first-child { margin-top: 0; }
.guia-texto h3 { font-size: 1.15rem !important; padding-top: .4rem; }
/* Pasos: listas numeradas con rombo dorado. */
.guia-texto ol { list-style: none; padding: 0 !important; counter-reset: paso; display: grid; gap: .7rem; margin: 1rem 0 1.4rem; }
.guia-texto ol > li {
  counter-increment: paso; position: relative; padding: .9rem 1rem .9rem 3.6rem; margin: 0 !important;
  background: #0a120ecc; border: 1px solid var(--borde-suave); border-radius: 10px;
}
.guia-texto ol > li::before {
  content: counter(paso); position: absolute; left: .9rem; top: .85rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  background: var(--oro-texto); color: #1d1406; font: 800 .9rem Cinzel, serif; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* Avisos: consejo (esmeralda), importante (oro) y ojo (rojo). */
.aviso { position: relative; margin: 1.1rem 0 1.3rem; padding: .9rem 1.1rem .9rem 3.2rem; border-radius: 10px; border: 1px solid; }
.aviso p { margin: 0; }
.aviso::before { position: absolute; left: 1rem; top: .85rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; font: 800 .85rem Montserrat, sans-serif; }
.aviso.consejo { background: #00e58a0f; border-color: #00e58a44; }
.aviso.consejo::before { content: "✦"; background: #00e58a26; color: var(--esmeralda); }
.aviso.importante { background: #c79a3b14; border-color: #c79a3b66; }
.aviso.importante::before { content: "!"; background: #c79a3b33; color: var(--oro2); }
.aviso.ojo { background: #e0645a12; border-color: #e0645a55; }
.aviso.ojo::before { content: "!"; background: #e0645a33; color: var(--rojo); }
.figura { margin: 1.4rem 0; text-align: center; }
.figura img { max-height: 340px; width: auto; max-width: 100%; border-radius: var(--radio); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.figura figcaption { margin-top: .5rem; font-size: .82rem; color: var(--suave); font-style: italic; }
.guia-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--borde); }
.guia-nav { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 10px; border: 1px solid var(--borde-suave); background: #0a120e; color: inherit; }
.guia-nav:hover { border-color: var(--oro); color: inherit; }
.guia-nav.sig { flex-direction: row-reverse; text-align: right; }
.guia-nav img { width: 40px; height: 40px; border-radius: 8px; }
.guia-nav span { display: grid; }
.guia-nav b { color: var(--oro2); }

/* Páginas de texto (Cómo jugar, VIP, legales): una columna cómoda de leer. */
.doc-simple { max-width: 800px; margin: 0 auto; }
.doc-simple > h1 { display: none; }
.doc-simple h2 { font-size: 1.35rem; margin: 2.2rem 0 .7rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.doc-simple ul, .doc-simple ol { padding-left: 1.3rem; }
.doc-simple li { margin-bottom: .5rem; }
.doc-simple li::marker { color: var(--oro); }
.doc-simple .acciones { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1.4rem 0; }
.doc-simple mark { background: none; color: var(--rojo); font-weight: 600; }
.descarga-caja {
  display: grid; justify-items: center; text-align: center; gap: .3rem; max-width: 560px; padding: 1.8rem 1.6rem; margin: .4rem auto 1.4rem;
  background: linear-gradient(120deg, #0f3d2e88, #0a120ef2); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
.descarga-caja img { width: 92px; height: 92px; filter: drop-shadow(0 0 14px #00e58a55); }
.descarga-caja h2 { border: 0; margin: 0 0 .2rem; padding: 0; font-size: 1.25rem; }
.descarga-caja p { margin: 0; color: var(--suave); }
.descarga-caja .acciones { justify-content: center; margin: 1rem 0 0; }
.alerta.centrado { text-align: center; }
.vip-pagina { max-width: 900px; margin: 0 auto; }
.comparar { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.1rem; align-items: stretch; margin: 1.2rem 0 1.8rem; }
.comparar-col { position: relative; border-radius: var(--radio); padding: 1.4rem 1.5rem; border: 1px solid var(--borde-suave); background: #0a120ecc; }
.comparar-col h3 { margin: 0 0 .9rem; font-size: 1.15rem; color: var(--suave); text-align: center; }
.comparar-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.comparar-col li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .8rem; padding: .62rem 0; border-bottom: 1px solid var(--borde-suave); }
.comparar-col li:last-child { border-bottom: 0; }
.comparar-col li span { color: var(--suave); font-size: .9rem; }
.comparar-col li b { font-size: 1.05rem; }
.comparar-col.sin b { color: var(--texto); opacity: .8; }
.comparar-col.con { border-color: var(--oro); background: linear-gradient(160deg, #1d2a14, #0c1913 60%); box-shadow: 0 0 0 1px #c79a3b33, 0 18px 40px #0009, 0 0 40px #c79a3b1f; }
.comparar-col.con h3 { background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.comparar-col.con b { color: var(--oro3); font-family: Cinzel, serif; font-size: 1.15rem; }
.comparar .sello {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); padding: .2rem .9rem; border-radius: 999px;
  background: var(--oro-texto); color: #1d1406; font: 800 .75rem Montserrat, sans-serif; letter-spacing: .15em;
}
.comparar .medidor { grid-column: 1 / -1; display: block; height: 5px; border-radius: 9px; background: linear-gradient(90deg, var(--esmeralda), var(--oro2)); position: relative; overflow: hidden; }
.comparar .medidor i { position: absolute; inset: 0 auto 0 0; background: #ffffff38; border-right: 2px solid #060807; }
.vip-compra {
  display: grid; justify-items: center; gap: 1rem; text-align: center; padding: 1.8rem 1.4rem; margin: 0 auto 1.6rem; max-width: 720px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: var(--sombra);
}
.vip-compra .acciones { justify-content: center; flex-direction: column; margin: 0; width: 100%; }
.vip-compra .acciones > small { color: var(--suave); }
.precio-vip { display: grid; justify-items: center; gap: .1rem; }
.precio-vip b { font: 900 clamp(2.4rem, 6vw, 3.2rem)/1.1 Cinzel, serif; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.precio-vip > span:not(.eti) { color: var(--suave); font-size: .9rem; }
.precio-vip .regalo-vip { color: var(--texto); margin-top: .4rem; }
.precio-vip .regalo-vip b { font: inherit; font-weight: 700; color: var(--oro, #c79a3b); background: none; -webkit-background-clip: initial; background-clip: initial; }
.ajustes-vip { display: grid; gap: .8rem; }
.compra-vip { display: grid; justify-items: center; gap: 1rem; width: 100%; }
.compra-vip > p { margin: 0; }
.compra-vip .acepto { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; }
.compra-vip .acepto input { margin-top: .3rem; }
.medios-pago { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; width: 100%; }
.medio {
  flex: 1 1 190px; max-width: 220px; display: grid; justify-items: center; gap: .2rem; padding: 1rem .8rem; cursor: pointer;
  border-radius: 11px; border: 1px solid #c79a3b66; background: #050806; color: var(--texto); font: inherit; transition: all .15s;
}
.medio b { font-size: 1rem; color: var(--oro2); }
.medio small { font-size: .78rem; }
.medio em { font-style: normal; font-size: .68rem; color: var(--esmeralda); letter-spacing: .08em; text-transform: uppercase; }
.medio:hover { border-color: var(--oro); background: #c79a3b14; transform: translateY(-2px); }
.vip-pasos { list-style: none; padding: 0; margin: 0 auto 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; max-width: 720px; counter-reset: v; }
.vip-pasos li { counter-increment: v; display: grid; justify-items: center; text-align: center; gap: .15rem; padding: .9rem .6rem; border-radius: 10px; background: #0a120e; border: 1px solid var(--borde-suave); }
.vip-pasos li::before { content: counter(v); width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--oro-texto); color: #1d1406; font: 800 .85rem Cinzel, serif; }
.vip-pasos b { color: var(--oro2); }
.vip-pasos span { font-size: .85rem; color: var(--suave); }
.fila-admin { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.fila-admin label { flex: 1 1 10rem; }
.fila-admin .boton { width: auto; }
.datos-spei th { text-align: left; white-space: nowrap; padding-right: 1rem; background: none; }
.datos-spei code { font-size: 1.05rem; user-select: all; }

/* ---------- Ventanas de cuenta ---------- */
body.con-modal { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-fondo { position: absolute; inset: 0; background: #020403a6; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: aparecer .2s ease; }
.modal-caja {
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; text-align: center;
  padding: 1.8rem 1.7rem 1.5rem; border-radius: 18px; border: 1px solid #c79a3b55;
  background: linear-gradient(160deg, #12271ccc, #070d0ad9); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 80px #000c, inset 0 1px 0 #ffffff14, 0 0 50px #00e58a14; animation: subir .25s ease;
}
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-x { position: absolute; top: .7rem; right: .8rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde-suave); background: #0007; color: var(--suave); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.modal-x:hover { color: var(--oro3); border-color: var(--borde); }
.modal-emblema { width: 72px; height: 72px; filter: drop-shadow(0 6px 16px #000c); }
/* Ventanas con el mismo marco que los paneles de la portada: borde dorado fino y el brillo de la selva arriba. */
.modal-caja::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 160px; pointer-events: none; border-radius: 18px 18px 0 0;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, #00e58a1f, transparent 70%), var(--fondo-modal, none) center top / cover;
  opacity: .9;
}
.modal-caja > :not(.modal-x) { position: relative; }
.modal-caja h2 { margin: .4rem 0 0; font-size: 1.55rem; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-sub { color: var(--suave); font-size: .9rem; margin: .3rem 0 .8rem; }
.modal-caja form { display: grid; gap: .55rem; text-align: left; margin-top: .6rem; }
.modal-caja [hidden] { display: none !important; }
.modal-caja label { display: grid; gap: .3rem; font-weight: 600; font-size: .86rem; }
.modal-caja label small { font-weight: 400; font-size: .76rem; }
.modal-caja form > small { font-size: .76rem; margin-top: -.2rem; }
.modal-caja input:not([type=checkbox]) { background: #03060499; }
.modal-caja .boton { width: 100%; margin-top: .4rem; }
.modal-caja .alerta { margin: 0; font-size: .88rem; }
.modal-pie { margin: 1rem 0 0; font-size: .88rem; color: var(--suave); text-align: center; }
.check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: .5rem; font-weight: 500 !important; font-size: .85rem; color: var(--texto); }
.check input { margin-top: .2rem; }
.fila-modal { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .82rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
input.codigo { text-align: center; font: 800 1.8rem Montserrat, sans-serif; letter-spacing: .5em; padding: .5em .4em .5em .9em; }
.noscript { position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 60; text-align: center; }

/* ---------- Pie ---------- */
.pie { margin-top: 4.5rem; border-top: 1px solid var(--borde); background: linear-gradient(180deg, #08100c, #040504); }
.pie-in { max-width: var(--ancho); margin: 0 auto; padding: 2.8rem 16px 1.5rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.pie-marca .marca { margin: 0 0 .8rem; }
.pie-marca p { margin: 0; color: var(--suave); font-size: .9rem; max-width: 26em; }
.pie-marca .cita { margin-top: .8rem; font: italic 600 .95rem Cinzel, Georgia, serif; color: var(--hueso); }
.pie h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin: .3rem 0 .8rem; font-family: Montserrat, sans-serif; }
.pie nav { display: grid; gap: .45rem; }
.pie nav a { color: var(--suave); font-size: .9rem; }
.pie nav a:hover { color: var(--oro3); }
.pie-nota { max-width: var(--ancho); margin: 0 auto; padding: 1.1rem 16px 2rem; border-top: 1px solid var(--borde-suave); color: #7d786a; font-size: .8rem; text-align: center; }

/* ---------- Accesibilidad ---------- */
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 50; padding: .6rem 1rem; border-radius: 8px;
  background: var(--oro); color: #1d1406; font-weight: 700;
}
.saltar:focus { top: 10px; color: #1d1406; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .boton:focus-visible {
  outline: 2px solid var(--esmeralda); outline-offset: 3px; border-radius: 6px;
}

/* ---------- Portada (opción 3, "Minimalista Dark UX") ----------
   Hero 60/40 con el logotipo y la mascota oficiales sobre hero-atmosphere.svg; datos reales del servidor; próximo
   evento con cuenta regresiva; tres acciones rápidas; "Explora" y cierre. */
.ph-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.ph-cta.centrado { justify-content: center; }
.ph-cta .boton .icono { width: 1.2em; height: 1.2em; }
.ph-hero-arte { position: relative; display: grid; place-items: center; }
.ph-hero-arte::before {
  content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #00e58a2e 0%, #00e58a0a 45%, transparent 70%);
}
.ph-hero-arte img { position: relative; width: min(520px, 100%); height: auto; filter: drop-shadow(0 24px 40px #000d); animation: flotar 8s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-10px); } }

/* Datos del servidor: una fila discreta, cada uno con su ícono. */
.ph-datos {
  display: grid; grid-template-columns: repeat(6, 1fr); margin: 2rem 0 0;
  border: 1px solid var(--borde); border-radius: var(--radio); background: #0a120ecc; overflow: hidden;
}
.ph-dato { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; }
.ph-dato + .ph-dato { border-left: 1px solid var(--borde-suave); }
.ph-dato-icono {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--oro2);
  border: 1px solid #c79a3b55; background: radial-gradient(circle at 50% 35%, #1e6b5799, #0a1a13);
}
.ph-dato-icono .icono { width: 20px; height: 20px; }
.ph-dato > span:last-child { display: grid; line-height: 1.25; }
.ph-dato b { font: 700 1.05rem Cinzel, Georgia, serif; color: var(--hueso); }
.ph-dato small { font-size: .74rem; color: var(--suave); }

/* Explora: cuatro tarjetas con el arte que ya hay en el repositorio. */
.ph-explora { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ph-tarjeta {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; min-height: 230px; padding: 1.2rem;
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; color: var(--texto); isolation: isolate;
  background: var(--arte) center / cover no-repeat, var(--verde-selva);
  transition: transform .2s, border-color .2s;
}
.ph-tarjeta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #05050522 0%, #050505d9 62%, #050505 100%); }
/* Las marcas secundarias (dragón y serpiente) traen el nombre abajo: se muestra la cabeza y el texto queda en la sombra. */
.ph-tarjeta.marca-sec { background-size: 150% auto; background-position: center 8%; }
.ph-tarjeta:hover { color: var(--texto); transform: translateY(-3px); border-color: #c79a3b99; }
.ph-tarjeta-icono { color: var(--oro2); }
.ph-tarjeta-icono .icono { width: 24px; height: 24px; }
.ph-tarjeta b { font: 700 1.15rem Cinzel, Georgia, serif; color: var(--oro2); }
.ph-tarjeta small { color: #cfc8b2; font-size: .86rem; }

/* Cierre */
.ph-cierre { margin: 4rem 0 0; text-align: center; }
.ph-cierre img { width: min(420px, 90%); height: auto; }
.ph-cierre h2 { margin: 1rem 0 .6rem; font-size: clamp(1.4rem, 3.4vw, 2rem); background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-cierre p { max-width: 38em; margin: 0 auto; color: var(--suave); }

@media (max-width: 1100px) {
  .ph-datos { grid-template-columns: repeat(3, 1fr); }
  .ph-dato:nth-child(3n + 1) { border-left: 0; }
  .ph-dato:nth-child(n + 4) { border-top: 1px solid var(--borde-suave); }
}
@media (max-width: 980px) {
  /* En el celular primero el logo, el texto y los botones; la mascota después, más chica. */
  .ph-hero-arte img { width: min(360px, 78%); }
  .ph-explora { grid-template-columns: repeat(2, 1fr); }
  .ph-datos { grid-template-columns: repeat(2, 1fr); }
  .ph-dato:nth-child(n) { border-left: 0; border-top: 1px solid var(--borde-suave); }
  .ph-dato:nth-child(2n) { border-left: 1px solid var(--borde-suave); }
  .ph-dato:nth-child(-n + 2) { border-top: 0; }
}
@media (max-width: 600px) {
  .ph-cta .boton { flex: 1 1 100%; }
  .ph-explora { grid-template-columns: 1fr; }
  .ph-tarjeta { min-height: 170px; }
  .ph-dato { padding: .85rem .8rem; gap: .55rem; }
  .ph-dato-icono { width: 34px; height: 34px; }
  .ph-dato b { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ph-hero-arte img { animation: none; }
  .ph-tarjeta, .noticias article, .boton { transition: none; }
  .ph-tarjeta:hover { transform: none; }
}

/* ---------- Portada: estructura de portal (noticia, panel en vivo, crónica, podio) ---------- */
.ph2-hero { position: relative; margin: 0 calc(50% - 50vw); padding: 2.6rem 16px 0; overflow: hidden; border-bottom: 1px solid var(--borde); }
.ph2-hero-fondo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, #050505a6 0%, #050505d6 62%, #050505 100%),
    radial-gradient(ellipse 45% 65% at 74% 42%, #00e58a2e 0%, transparent 65%),
    var(--fondo-hero, url(/img/fondo-templo.webp)) center 30% / cover no-repeat,
    var(--negro-abisal);
}
.ph2-hero-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.45fr 1fr; gap: 2rem; align-items: center; }
.ph2-marca { display: flex; align-items: center; gap: .9rem; margin: 0; font: 900 1.7rem/1.1 Cinzel, Georgia, serif; letter-spacing: .05em; }
.ph2-marca img { width: 84px; height: auto; filter: drop-shadow(0 6px 18px #000c); }
.ph2-marca span { display: grid; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph2-marca small { font: 600 .72rem Montserrat, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); -webkit-text-fill-color: var(--suave); margin-top: .3rem; }
.ph2-eti { margin: 1.8rem 0 .3rem; font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--esmeralda); }
.ph2-titulo { margin: 0; font: 700 clamp(1.6rem, 3.6vw, 2.5rem)/1.15 Cinzel, Georgia, serif; color: var(--hueso); letter-spacing: .02em; }
.ph2-desc { margin: .8rem 0 0; max-width: 38em; color: #cfc8b2; }
.ph2-ver-intro .icono { width: 1em; height: 1em; fill: currentColor; }
.ph2-hero .ph-hero-arte img { width: min(460px, 100%); }
.ph2-chips {
  max-width: 1280px; margin: 1.6rem auto 0; padding: 1rem 0 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem;
  border-top: 1px solid var(--borde-suave);
}
.ph2-chips a {
  padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--borde); background: #0a120ecc;
  color: var(--texto); font-size: .85rem; font-weight: 600;
}
.ph2-chips a:hover { color: var(--oro3); border-color: #c79a3b99; }

/* Panel en vivo 2×2 */
.ph2-vivo {
  display: grid; grid-template-columns: repeat(2, 1fr); margin: 1.6rem 0 0;
  border: 1px solid var(--borde); border-radius: var(--radio); background: #0a120ecc; overflow: hidden;
}
.ph2-vivo-item { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.3rem; }
.ph2-vivo-item:nth-child(2n) { border-left: 1px solid var(--borde-suave); }
.ph2-vivo-item:nth-child(n + 3) { border-top: 1px solid var(--borde-suave); }
.ph2-vivo-item > span:last-child { display: grid; line-height: 1.3; min-width: 0; }
.ph2-vivo-item b { font-size: 1.15rem; color: var(--hueso); }
.ph2-vivo-item small { color: var(--suave); font-size: .82rem; }
.ph2-vivo-item .reloj { justify-items: start; }
.ph2-vivo-icono {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--oro2);
  border: 1px solid var(--borde); background: #050505;
}
.ph2-vivo-icono .icono { width: 22px; height: 22px; }
.ph2-vivo-icono.on { color: var(--esmeralda); border-color: #00e58a55; }
.ph2-vivo-icono.off { color: var(--rojo); }
.verde { color: var(--esmeralda); font-weight: 700; }
.ph2-tasas { margin-top: 1rem; }

/* Aviso */
.ph2-aviso {
  display: flex; gap: .8rem; align-items: flex-start; margin: 1rem 0 0; padding: .9rem 1.1rem;
  border: 1px solid #c79a3b55; border-radius: var(--radio); background: #1a140888; color: #ddd3b8; font-size: .92rem;
}
.ph2-aviso .icono { flex: none; width: 20px; height: 20px; color: var(--oro2); margin-top: .1rem; }

/* Crónica del mundo */
.ph2-cronica { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; align-items: start; }
.ph2-cronica-lado { display: grid; gap: 1.2rem; }
.ph2-jefes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.ph2-jefe {
  display: grid; gap: .1rem; padding: .85rem 1rem; border-radius: 10px; background: #050505aa;
  border: 1px solid var(--borde-suave); border-left: 3px solid var(--suave);
}
.ph2-jefe b { color: var(--hueso); }
.ph2-jefe small { color: var(--suave); font-size: .8rem; }
.ph2-jefe-estado { margin-top: .45rem; font-size: .86rem; font-weight: 700; }
.ph2-jefe.vivo { border-left-color: var(--esmeralda); }
.ph2-jefe.vivo .ph2-jefe-estado { color: var(--esmeralda); }
.ph2-jefe.muerto { border-left-color: var(--rojo); }
.ph2-jefe.muerto .ph2-jefe-estado { color: var(--rojo); }
.ph2-jefe.evento { border-left-color: var(--oro); }
.ph2-jefe.evento .ph2-jefe-estado { color: var(--oro2); }
.ph2-pk { list-style: none; margin: 0; padding: 0; }
.ph2-pk li { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--borde-suave); }
.ph2-pk li:last-child { border-bottom: 0; }
.ph2-pk li.vacio { display: block; border: 0; }
.ph2-pk em { color: var(--rojo); font-style: normal; font-size: .85rem; }
.ph2-pk li > span:nth-child(2) { display: grid; line-height: 1.35; }
.ph2-pk li > span:nth-child(2) small, .ph2-pk li > small { color: var(--suave); font-size: .8rem; }
.ph2-pk-icono { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--rojo); background: #e0645a1a; border: 1px solid #e0645a55; }
.ph2-pk-icono .icono { width: 16px; height: 16px; }
.ph2-invasion { margin: .2rem 0; font: 700 1.2rem Cinzel, Georgia, serif; color: var(--hueso); }

/* Salón de la fama: podio 2-1-3 y tres columnas */
.ph2-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; align-items: end; gap: 1.2rem; margin-bottom: 1.6rem; }
.ph2-podio-lugar { display: grid; justify-items: center; text-align: center; gap: .15rem; }
.ph2-podio-lugar b { font: 700 1.1rem Cinzel, Georgia, serif; color: var(--hueso); margin-top: .5rem; }
.ph2-podio-lugar small { color: var(--suave); font-size: .8rem; }
.ph2-podio-avatar .clase-icono { width: 86px; height: 86px; box-shadow: 0 0 30px #00e58a26; }
.ph2-podio-avatar .clase-icono .icono { width: 44px; height: 44px; }
.l1 .ph2-podio-avatar .clase-icono { width: 110px; height: 110px; border-color: var(--oro); box-shadow: 0 0 40px #c79a3b55; }
.l1 .ph2-podio-avatar .clase-icono .icono { width: 56px; height: 56px; }
.l1 b { color: var(--oro2); }
.ph2-podio-base {
  width: 100%; margin-top: .7rem; display: grid; place-items: center; border-radius: 8px 8px 0 0;
  font: 900 1.6rem Cinzel, Georgia, serif; color: #1d1406;
}
.l1 .ph2-podio-base { height: 92px; background: var(--oro-texto); }
.l2 .ph2-podio-base { height: 66px; background: linear-gradient(180deg, #f1f1f1, #9da3a6); color: #222; }
.l3 .ph2-podio-base { height: 50px; background: linear-gradient(180deg, #e7a46a, #9b5a2a); }
.ph2-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

/* Presentación (escenas que pasan solas) */
.intro { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: #000e; animation: aparecer .4s ease; }
.intro[hidden] { display: none; }
.intro-caja { position: relative; width: min(1040px, 100%); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; background: #050505; box-shadow: 0 30px 90px #000, 0 0 60px #00e58a14; }
.intro-x { position: absolute; top: 10px; right: 10px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde); background: #000a; color: var(--hueso); font-size: 1.4rem; cursor: pointer; }
.intro-x:hover { color: var(--oro3); border-color: var(--oro); }
.intro-escenario { position: relative; aspect-ratio: 16 / 9; max-height: calc(100svh - 140px); width: 100%; overflow: hidden; background: #050505; }
.intro-escena-n { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.intro-escena-n.activa { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
.intro-escena-n .intro-fondo { position: absolute; inset: -4%; background: var(--fondo) center / cover no-repeat; transform: scale(1.12); }
.intro-escena-n.activa .intro-fondo { animation: intro-ken 6.5s ease-out forwards; }
.intro-velo { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 50%, #05050566, #050505e6 75%), linear-gradient(180deg, #05050580, transparent 30%, #050505d9); }
.intro-contenido { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.3rem, 1.4vw, .8rem); padding: 1.2rem 1.4rem; text-align: center; }
.intro-escena-n.activa .intro-contenido > * { animation: intro-entra .9s cubic-bezier(.2, .8, .2, 1) both; }
.intro-escena-n.activa .intro-contenido > :nth-child(2) { animation-delay: .15s; }
.intro-escena-n.activa .intro-contenido > :nth-child(3) { animation-delay: .3s; }
.intro-escena-n.activa .intro-contenido > :nth-child(4) { animation-delay: .45s; }
.intro-logo { width: clamp(90px, 18%, 190px); height: auto; filter: drop-shadow(0 10px 30px #000) drop-shadow(0 0 30px #00e58a33); }
.intro-eti { margin: 0; font-size: clamp(.7rem, 1.6vw, .85rem); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--esmeralda); text-shadow: 0 2px 12px #000; }
.intro-titulo { margin: 0; font: 900 clamp(2rem, 6.5vw, 4.4rem)/1.05 Cinzel, Georgia, serif; letter-spacing: .03em; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px #000); }
.intro-titulo.chico { font-size: clamp(1.3rem, 4vw, 2.6rem); }
.intro-texto { margin: 0; max-width: 40em; color: #e6dfc9; font-size: clamp(.82rem, 1.8vw, 1.05rem); text-shadow: 0 2px 14px #000; }
.intro-mundos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, 2vw, 1.4rem); width: min(760px, 100%); margin: .3rem 0; }
.intro-mundo { --tono: #00e58a; display: grid; justify-items: center; gap: .15rem; padding: clamp(.6rem, 2vw, 1.2rem); border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tono) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 18%, #050505e6), #050505ee); box-shadow: 0 16px 40px #000c, 0 0 30px color-mix(in srgb, var(--tono) 18%, transparent); }
.intro-mundo.medium { --tono: #f0b44c; }
.intro-mundo span { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--tono); }
.intro-mundo b { font: 700 clamp(1.1rem, 3vw, 1.6rem) Cinzel, Georgia, serif; color: var(--hueso); }
.intro-mundo strong { font: 900 clamp(1.8rem, 6vw, 3.2rem)/1 Cinzel, Georgia, serif; color: var(--tono); text-shadow: 0 0 24px color-mix(in srgb, var(--tono) 50%, transparent); }
.intro-mundo small { color: #cfc8b2; font-size: clamp(.7rem, 1.5vw, .82rem); }
.intro-clases { display: flex; justify-content: center; align-items: flex-end; margin-top: .4rem; }
.intro-clases img { width: clamp(64px, 13%, 150px); height: auto; margin: 0 -1.2%; filter: drop-shadow(0 12px 20px #000); }
.intro-clases img:is(.f0, .f4, .f8) { -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 48%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 48%, #000 55%, transparent 100%); }
.intro-escena-n.activa .intro-clases img { animation: intro-clase .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--k) * .12s); }
.intro-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .5rem; }
.intro-barra { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: #ffffff14; }
.intro-barra i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, var(--jade), var(--esmeralda), var(--oro2)); animation: intro-avance 5.2s linear forwards; }
.intro.ultima .intro-barra i { animation: none; transform: scaleX(1); }
.intro-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid var(--borde-suave); background: #0a120e; }
.intro-puntos { display: flex; gap: .45rem; }
.intro-puntos button { width: 10px; height: 10px; padding: 0; border-radius: 99px; border: 1px solid #c79a3b88; background: transparent; cursor: pointer; transition: width .3s, background .3s; }
.intro-puntos button.activo { width: 28px; background: var(--oro2); border-color: var(--oro2); }
.intro-ocultar { margin: 0; font-size: .82rem; color: var(--suave); }
.intro-nav { display: flex; gap: .4rem; }
@keyframes intro-ken { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes intro-entra { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-clase { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes intro-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 980px) {
  .ph2-hero { padding-top: 1.6rem; }
  .ph2-hero-in { grid-template-columns: 1fr; text-align: center; }
  .ph2-marca { justify-content: center; }
  .ph2-desc { margin-left: auto; margin-right: auto; }
  .ph2-hero .ph-cta, .ph2-chips { justify-content: center; }
  .ph2-hero .ph-hero-arte img { width: min(300px, 70%); }
  .ph2-cronica, .ph2-columnas { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ph2-marca img { width: 64px; }
  .ph2-marca { font-size: 1.35rem; text-align: left; }
  .ph2-vivo { grid-template-columns: 1fr; }
  .ph2-vivo-item:nth-child(n) { border-left: 0; border-top: 1px solid var(--borde-suave); }
  .ph2-vivo-item:first-child { border-top: 0; }
  .ph2-jefes { grid-template-columns: 1fr; }
  .ph2-podio { gap: .5rem; }
  .ph2-podio-avatar .clase-icono { width: 62px; height: 62px; }
  .l1 .ph2-podio-avatar .clase-icono { width: 76px; height: 76px; }
  .ph2-podio-lugar b { font-size: .92rem; }
  .ph2-podio-lugar small:last-of-type { display: none; }
  .intro-pie { flex-wrap: wrap; justify-content: center; }
  .intro-escenario { aspect-ratio: 4 / 5; }
  .intro-mundos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-escena-n.activa .intro-fondo, .intro-escena-n.activa .intro-contenido > *, .intro-escena-n.activa .intro-clases img, .intro-barra i { animation: none; }
}


/* ---------- Arte nuevo (opcional, ver docs/imagenes.md) ---------- */
.ph2-podio-retrato { width: 150px; height: auto; filter: drop-shadow(0 14px 24px #000) drop-shadow(0 0 22px #00e58a26); }
.l1 .ph2-podio-retrato { width: 190px; filter: drop-shadow(0 16px 28px #000) drop-shadow(0 0 30px #c79a3b40); }
.guia-tarjeta.con-arte { background: linear-gradient(90deg, #0a120ef5 45%, #0a120eb3 100%), var(--arte) right center / cover no-repeat; }
.guia-cabecera.con-arte {
  padding: 1.6rem; border-radius: var(--radio); border: 1px solid var(--borde);
  background: linear-gradient(90deg, #060807f2 35%, #06080799 100%), var(--arte) center / cover no-repeat;
}
@media (max-width: 600px) {
  .ph2-podio-retrato { width: 96px; }
  .l1 .ph2-podio-retrato { width: 118px; }
}


/* ---------- Elegir mundo (entrada del portal) ---------- */
/* Una pantalla: sin pie y con la sección del alto de la ventana menos la barra (67px). */
body.en-mundos .pie { display: none; }
.mundos {
  position: relative; isolation: isolate; margin: 0 calc(50% - 50vw); overflow: hidden;
  min-height: calc(100svh - 67px); padding: clamp(.8rem, 2.5vh, 2rem) 16px clamp(.8rem, 2vh, 1.4rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.8rem, 2.4vh, 1.6rem);
}
.mundos-niebla {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(ellipse 35% 30% at 30% 70%, #00e58a1f, transparent 70%), radial-gradient(ellipse 30% 28% at 72% 65%, #c79a3b24, transparent 70%);
  animation: niebla 18s ease-in-out infinite alternate;
}
@keyframes niebla { to { transform: translate3d(3%, -2%, 0) scale(1.06); } }
.mundos-cabeza { max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; animation: bajar .8s cubic-bezier(.2, .8, .2, 1) both; }
.mundos-cabeza img { display: block; width: clamp(76px, 13vh, 150px); height: auto; margin: 0 auto; filter: drop-shadow(0 12px 30px #000c); animation: flotar 6s ease-in-out infinite; }
.mundos-cabeza .eti { display: block; margin: .4rem auto 0; }
.mundos-cabeza h1 { margin: .15rem 0 0; font-size: clamp(1.6rem, 5vh, 2.7rem); line-height: 1.1; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mundos-cabeza p { margin: .4rem 0 0; color: #cfc8b2; font-size: .95rem; }
@keyframes bajar { from { opacity: 0; transform: translateY(-18px); } }
@keyframes flotar { 50% { transform: translateY(-6px); } }
.mundos-lista { width: 100%; max-width: 1040px; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); perspective: 1200px; }

.mundo-tarjeta {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; --tono: #00e58a;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(.35rem, 1.1vh, .7rem);
  padding: clamp(1rem, 2.6vh, 1.8rem) clamp(1rem, 2.2vw, 1.8rem); border-radius: 16px; text-align: center; color: var(--texto); text-decoration: none;
  background: linear-gradient(180deg, #0f3d2ee6, #050505f2 70%); border: 1px solid var(--borde); box-shadow: var(--sombra);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .25s ease-out, box-shadow .35s, border-color .35s, opacity .45s, filter .45s;
  animation: subir .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i) * .14s);
}
.mundo-tarjeta.medium { --tono: #f0b44c; background: linear-gradient(180deg, #3d2a0fe6, #050505f2 70%); }
@keyframes subir { from { opacity: 0; transform: translateY(40px) scale(.96); } }
.mundo-tarjeta:hover, .mundo-tarjeta:focus-visible { color: var(--texto); border-color: transparent; box-shadow: 0 26px 60px #000c, 0 0 38px color-mix(in srgb, var(--tono) 28%, transparent); }
.mundo-tarjeta:focus-visible { outline: 2px solid var(--tono); outline-offset: 4px; }
/* Borde de luz que gira al pasar el mouse. */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mundo-borde {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: conic-gradient(from var(--giro, 0deg), transparent 0 55%, var(--tono) 72%, var(--oro3) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: girar 3.2s linear infinite;
}
@keyframes girar { to { --giro: 360deg; } }
.mundo-tarjeta:hover .mundo-borde, .mundo-tarjeta:focus-visible .mundo-borde { opacity: 1; }
/* Reflejo que sigue al mouse y un destello que cruza la tarjeta. */
.mundo-brillo {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--tono) 22%, transparent), transparent 55%);
}
.mundo-brillo::after {
  content: ''; position: absolute; top: -50%; bottom: -50%; width: 40%; left: -60%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, #ffffff1f, transparent);
}
.mundo-tarjeta:hover .mundo-brillo { opacity: 1; }
.mundo-tarjeta:hover .mundo-brillo::after { animation: destello 1.1s ease-out; }
@keyframes destello { to { left: 120%; } }
.mundo-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.mundo-tarjeta .eti { margin: 0; color: var(--tono); }
.mundo-estado { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--suave); }
.mundo-estado i { width: 8px; height: 8px; border-radius: 50%; background: #777; }
.mundo-estado.on { color: var(--esmeralda); }
.mundo-estado.on i { background: var(--esmeralda); box-shadow: 0 0 0 0 #00e58a99; animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 7px #00e58a00; } 100% { box-shadow: 0 0 0 0 #00e58a00; } }
.mundo-emblema { width: clamp(48px, 9vh, 96px); height: auto; filter: drop-shadow(0 8px 18px #000c); transform: translateZ(30px); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.mundo-tarjeta:hover .mundo-emblema { transform: translateZ(40px) scale(1.08) rotate(-3deg); }
.mundo-tarjeta h2 { margin: 0; font-size: clamp(1.15rem, 3vh, 1.5rem); color: var(--hueso); transform: translateZ(20px); }
.mundo-lema { color: #cfc8b2; font-size: .9rem; max-width: 34em; }
.mundo-datos { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin: .2rem 0; }
.mundo-datos > span { display: grid; padding: clamp(.4rem, 1.2vh, .7rem) .3rem; border: 1px solid var(--borde-suave); border-radius: 10px; background: #050505aa; transition: border-color .3s, transform .3s; }
.mundo-tarjeta:hover .mundo-datos > span { border-color: color-mix(in srgb, var(--tono) 30%, transparent); }
.mundo-tarjeta:hover .mundo-datos > span:nth-child(odd) { transform: translateY(-2px); }
.mundo-datos b { font: 700 clamp(1rem, 2.6vh, 1.3rem) Cinzel, Georgia, serif; color: var(--oro2); }
.mundo-datos small { color: var(--suave); font-size: .72rem; }
.mundo-evento { color: #cfc8b2; font-size: .85rem; min-height: 1.3em; }
.mundo-evento .reloj { display: inline-grid; justify-items: center; vertical-align: middle; }
.mundo-cta { margin-top: .2rem; transform: translateZ(25px); }
.mundo-cta span { display: inline-block; transition: transform .3s; }
.mundo-tarjeta:hover .mundo-cta span { transform: translateX(5px); }
.mundos-pie { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; margin: 0; animation: aparecer .8s .5s both; }
@keyframes aparecer { from { opacity: 0; } }
/* Al elegir: la otra tarjeta se apaga, la elegida crece y entra el velo con el logo. */
.mundos.eligiendo .mundo-tarjeta:not(.elegida) { opacity: 0; filter: blur(4px); transform: scale(.92); }
.mundos.eligiendo .mundo-tarjeta.elegida { transform: scale(1.06); box-shadow: 0 30px 80px #000, 0 0 60px color-mix(in srgb, var(--tono) 45%, transparent); transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s; }
.mundos-velo {
  position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 1rem;
  background: radial-gradient(circle at center, #0b1a12f2, #050505 70%); opacity: 0; pointer-events: none; transition: opacity .45s .3s;
}
.mundos-velo img { width: 120px; height: auto; animation: flotar 2s ease-in-out infinite; }
.mundos-velo span { font: 700 1.1rem Cinzel, Georgia, serif; color: var(--oro2); letter-spacing: .04em; }
.mundos.eligiendo .mundos-velo { opacity: 1; pointer-events: auto; }
@media (max-height: 820px) and (min-width: 801px) {
  .mundo-lema, .mundos-cabeza p { display: none; }
}
/* Un solo mundo en línea: su tarjeta al centro. */
.mundos-lista:has(> :only-child) { grid-template-columns: minmax(0, 520px); justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .mundos-niebla, .mundos-cabeza, .mundos-cabeza img, .mundo-tarjeta, .mundo-borde, .mundos-pie, .mundos-velo img { animation: none; }
  .mundo-tarjeta { transform: none; }
}
.mundo-pill {
  display: inline-flex; align-items: center; gap: .45rem; margin-left: -.6rem; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--borde); background: #0a120ecc; color: var(--texto); font-size: .8rem; font-weight: 700;
}
.mundo-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--esmeralda); box-shadow: 0 0 8px var(--esmeralda); }
.mundo-pill small { color: var(--suave); font-weight: 500; }
.mundo-pill:hover { color: var(--oro3); border-color: #c79a3b99; }
/* Con el selector de mundo, el encabezado no alcanza para el nombre junto al logo en pantallas medianas. */
@media (max-width: 1180px) and (min-width: 981px) {
  .barra .marca span { display: none; }
  .menu a:not(.boton), .menu button.link { padding: .45rem .55rem; }
}
@media (max-width: 800px) {
  .mundos { justify-content: flex-start; }
  .mundos-lista { grid-template-columns: 1fr; max-width: 520px; }
  .mundo-lema { display: none; }
  .mundo-pill small { display: none; }
}

/* ---------- Mi panel ---------- */
.pnl-resumen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem; align-items: stretch; margin: .4rem 0 1rem;
}
.pnl-cuenta, .pnl-dato {
  position: relative; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio);
  background: linear-gradient(160deg, var(--panel2), var(--panel) 60%, #07100c); box-shadow: var(--sombra);
}
.pnl-cuenta { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; }
.pnl-cuenta::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(#00e58a1c, transparent 70%); pointer-events: none; }
.pnl-cuenta img { width: 64px; height: 64px; filter: drop-shadow(0 6px 14px #000c); }
.pnl-cuenta div { display: grid; gap: .35rem; justify-items: start; }
.pnl-cuenta h2 { margin: 0; font-size: 1.35rem; color: var(--oro2); }
.pnl-cuenta small { color: var(--suave); font-size: .8rem; }
.pnl-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 700; border: 1px solid var(--borde-suave); background: #000a; color: var(--suave); }
.pnl-chip i { width: 7px; height: 7px; border-radius: 50%; background: #777; }
.pnl-chip.verde { color: var(--esmeralda); border-color: #00e58a44; }
.pnl-chip.verde i { background: var(--esmeralda); box-shadow: 0 0 8px var(--esmeralda); }
.pnl-chip.oro { color: #1b1206; background: linear-gradient(180deg, var(--oro3), var(--oro)); border: 0; }
.pnl-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pnl-dato { display: grid; align-content: start; gap: .25rem; padding: 1rem 1.1rem; transition: transform .25s, border-color .25s; }
.pnl-dato:hover { transform: translateY(-3px); border-color: #c79a3b77; }
.pnl-dato small { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.pnl-dato b { font: 700 1.5rem Cinzel, Georgia, serif; color: var(--hueso); }
.pnl-dato span { color: var(--suave); font-size: .8rem; }
.pnl-dato a { font-size: .82rem; font-weight: 700; margin-top: .2rem; }
.pnl-dato.vip.on { border-color: #c79a3b88; background: linear-gradient(160deg, #3d2a0f, var(--panel) 65%); }
.pnl-dato.vip.on b { color: var(--oro2); }
.pnl-barra { display: block; height: 7px; border-radius: 99px; background: #ffffff12; overflow: hidden; }
.pnl-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--jade), var(--esmeralda)); box-shadow: 0 0 10px #00e58a66; animation: llenar 1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.pnl-dato.vip .pnl-barra i, .pj-nivel .pnl-barra i { background: linear-gradient(90deg, var(--oro), var(--oro3)); box-shadow: 0 0 10px #c79a3b66; }
@keyframes llenar { from { transform: scaleX(0); } }
.pnl-cuenta { flex-wrap: wrap; }
.pnl-cuenta > div { flex: 1; min-width: 0; }
.pnl-clave { flex-basis: 100%; display: inline-flex; justify-content: center; align-items: center; gap: .4rem; }
.pnl-clave .icono { width: 16px; height: 16px; }
.pnl-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin: 1.6rem 0 0; padding-bottom: .5rem; border-bottom: 1px solid var(--borde-suave); }
.pnl-cabeza small { color: var(--suave); font-size: .82rem; }
.pnl-titulo { margin: 0; font-size: 1.25rem; color: var(--oro2); }
.pnl .pjs { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.pnl .pj-card { animation: subir .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .08s); transition: border-color .25s, box-shadow .25s; }
.pnl .pj-card:hover { border-color: #c79a3b77; box-shadow: 0 18px 40px #000a, 0 0 24px #00e58a14; }
.pnl .pj-card header { justify-content: flex-start; align-items: center; gap: .7rem; }
.pnl .pj-card header > div { display: grid; flex: 1; min-width: 0; }
.pnl .pj-card header .clase-icono { width: 42px; height: 42px; }
.pnl .pj-card header .clase-icono .icono { width: 22px; height: 22px; }
.pj-nivel { display: grid; gap: .35rem; }
.pj-nivel > div { display: flex; align-items: baseline; gap: .5rem; }
.pj-nivel b { font: 700 1.9rem/1 Cinzel, Georgia, serif; color: var(--oro2); }
.pj-nivel small { color: var(--suave); font-size: .78rem; }
.pnl .pj-card dl { grid-template-columns: repeat(3, 1fr); }
.pnl .pj-card dd.oro { color: var(--oro2); }
.pj-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pj-stats li { display: grid; grid-template-columns: 6.5em 4.5em 1fr; align-items: center; gap: .5rem; font-size: .82rem; }
.pj-stats span { color: var(--suave); }
.pj-stats b { text-align: right; }
.pj-acciones { border-top: 1px solid var(--borde-suave); padding-top: .6rem; }
.pj-acciones summary { cursor: pointer; font-weight: 700; color: var(--oro2); font-size: .88rem; }
.pj-acciones summary b { color: var(--esmeralda); }
.pj-acciones .puntos { margin-top: .6rem; }
.pj-mover { display: flex; justify-content: flex-end; }

/* ---------- Soporte ---------- */
.soporte-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.soporte-form { padding: 1.4rem; border: 1px solid var(--borde); border-radius: var(--radio); background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.soporte-form textarea {
  width: 100%; padding: .7em .8em; border-radius: 8px; border: 1px solid var(--borde); background: #050806; color: var(--texto); font: inherit; resize: vertical;
}
.soporte-form textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px #c79a3b26; }
.soporte-form small { color: var(--suave); }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.soporte-faq h2 { margin: 0 0 .8rem; font-size: 1.2rem; color: var(--oro2); }
.soporte-faq details { border: 1px solid var(--borde-suave); border-radius: 10px; background: #0a120ecc; margin-bottom: .6rem; transition: border-color .2s; }
.soporte-faq details[open] { border-color: #c79a3b66; }
.soporte-faq summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; }
.soporte-faq details p { margin: 0; padding: 0 1rem .9rem; color: #cfc8b2; font-size: .92rem; }

/* ---------- Créditos del pie ---------- */
.pie-nota p { margin: 0; }
.pie-nota .creditos { margin-top: .45rem; font-size: .78rem; letter-spacing: .04em; }
.pie-nota .creditos a { font-weight: 700; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pie-nota .creditos a:hover { filter: brightness(1.2); }

@media (max-width: 980px) {
  .pnl-resumen, .soporte-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pnl-datos { grid-template-columns: 1fr 1fr; }
  .pnl-datos .vip { grid-column: 1 / -1; }
  .pnl .pjs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pnl-barra i, .pnl .pj-card { animation: none; }
}

/* ---------- Mi panel: personajes como en la selección del juego ---------- */
.sel-pj.f0, .pj-ventana.f0 { --luz: #4f8dff; }
.sel-pj.f4, .pj-ventana.f4 { --luz: #ff5a3c; }
.sel-pj.f8, .pj-ventana.f8 { --luz: #00e58a; }
.sel-pj.f12, .pj-ventana.f12 { --luz: #b76bff; }
.sel-pj.f16, .pj-ventana.f16 { --luz: #f0b44c; }
.sel-pj.f20, .pj-ventana.f20 { --luz: #ff5fc8; }
.sel-pj.f24, .pj-ventana.f24 { --luz: #3fd6e0; }
.sel-escenario {
  position: relative; overflow: hidden; margin-top: .9rem; padding: 2rem 1rem 1.2rem; border-radius: 16px; border: 1px solid var(--borde);
  background:
    radial-gradient(ellipse 60% 40% at 50% 88%, #00e58a1a, transparent 70%),
    linear-gradient(180deg, #050505cc 0%, #050505a6 45%, #050505f2 100%),
    var(--fondo-sel, url(/img/fondo-templo.webp)) center 35% / cover no-repeat, var(--negro-abisal);
  box-shadow: inset 0 -40px 60px #000a, var(--sombra);
}
/* Piso: una franja de luz donde se paran los pedestales. */
.sel-escenario::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 3.4rem; height: 2px; background: linear-gradient(90deg, transparent, #c79a3b55, transparent); pointer-events: none; }
.sel-fila { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: clamp(.4rem, 2vw, 1.6rem); flex-wrap: wrap; }
.sel-pj {
  --luz: #00e58a; position: relative; width: clamp(120px, 15vw, 170px); display: flex; flex-direction: column; align-items: center;
  padding: 0; border: 0; background: none; color: var(--texto); font: inherit; cursor: pointer;
  animation: subir .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .09s);
}
.sel-pj.libre { cursor: default; opacity: .55; }
.sel-figura { position: relative; z-index: 1; height: clamp(150px, 20vw, 210px); width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sel-retrato { max-height: 100%; width: auto; max-width: 118%; filter: drop-shadow(0 10px 18px #000) brightness(.82) saturate(.85); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
/* Los retratos de mago, caballero y elfa traen fondo oscuro propio: se difumina hacia las orillas. */
:is(.f0, .f4, .f8) > .sel-figura > img.sel-retrato, :is(.f0, .f4, .f8) img.pj-ventana-retrato {
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 48%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 48%, #000 55%, transparent 100%);
}
.sel-retrato.sin-arte { display: grid; place-items: center; height: 70%; }
.sel-retrato.sin-arte .clase-icono { width: 74px; height: 74px; }
.sel-retrato.sin-arte .clase-icono .icono { width: 40px; height: 40px; }
.sel-sombra { width: 58%; height: 78%; border-radius: 45% 45% 10% 10%; background: radial-gradient(ellipse at 50% 25%, #ffffff12, transparent 70%); border: 1px dashed #e6dfc922; }
.sel-pedestal {
  position: relative; width: 82%; height: 22px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--luz) 55%, #fff0) 0%, color-mix(in srgb, var(--luz) 18%, #0000) 45%, transparent 72%),
              linear-gradient(180deg, #2a2418, #0b0a07);
  box-shadow: 0 0 0 1px #c79a3b44, 0 8px 18px #000c; transition: box-shadow .35s;
}
.sel-pj.libre .sel-pedestal { background: linear-gradient(180deg, #1c1a14, #0b0a07); }
.sel-placa { display: grid; justify-items: center; gap: .05rem; margin-top: .55rem; line-height: 1.25; }
.sel-placa b { font: 700 1rem Cinzel, Georgia, serif; color: var(--oro2); }
.sel-placa small { font-size: .74rem; color: var(--suave); }
.sel-aviso { position: absolute; z-index: 2; top: 6px; right: 12%; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #04140c; background: var(--esmeralda); box-shadow: 0 0 12px #00e58a88; }
.sel-aviso.oro { color: #1b1206; background: linear-gradient(180deg, var(--oro3), var(--oro)); box-shadow: 0 0 12px #c79a3b88; }
.sel-pj:not(.libre):hover .sel-retrato, .sel-pj:focus-visible .sel-retrato {
  transform: translateY(-8px) scale(1.06); filter: drop-shadow(0 14px 22px #000) drop-shadow(0 0 18px color-mix(in srgb, var(--luz) 60%, transparent)) brightness(1.05);
}
.sel-pj:not(.libre):hover .sel-pedestal, .sel-pj:focus-visible .sel-pedestal { box-shadow: 0 0 0 1px var(--luz), 0 0 26px color-mix(in srgb, var(--luz) 70%, transparent), 0 8px 18px #000c; }
.sel-pj:not(.libre):hover .sel-placa b { color: var(--oro3); }
.sel-pj:focus-visible { outline: none; }
.sel-pj:focus-visible .sel-placa b { text-decoration: underline; }
.sel-ayuda { position: relative; z-index: 1; margin: 1.1rem 0 0; text-align: center; color: var(--suave); font-size: .85rem; }

/* Ventana del personaje */
.modal-caja.pj-ventana { width: min(560px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; text-align: left; display: grid; gap: .9rem; }
.pj-ventana-cabeza { display: flex; align-items: flex-end; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--borde-suave); }
.pj-ventana-retrato { width: 120px; height: auto; flex: none; filter: drop-shadow(0 10px 18px #000) drop-shadow(0 0 16px color-mix(in srgb, var(--luz) 45%, transparent)); }
.pj-ventana-retrato.sin-arte { display: grid; place-items: center; width: 90px; height: 90px; }
.pj-ventana-cabeza > div { display: grid; gap: .25rem; justify-items: start; }
.modal-caja.pj-ventana h2 { margin: 0; font-size: 1.6rem; }
.pj-ventana-clase { font-weight: 700; color: color-mix(in srgb, var(--luz) 70%, #fff); }
.pj-ventana-mapa { font-size: .82rem; color: var(--suave); }
.pj-ventana-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0; }
.pj-ventana-datos div { padding: .55rem .6rem; border-radius: 10px; border: 1px solid var(--borde-suave); background: #0507068c; }
.pj-ventana-datos dt { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.pj-ventana-datos dd { margin: 0; font-weight: 700; font-size: 1.1rem; }
.pj-ventana-datos dd.oro { color: var(--oro2); }
.pj-ventana-sub { margin: 0 0 .3rem; font-weight: 700; color: var(--oro2); }
.pj-ventana .puntos { padding: .8rem; border-radius: 10px; border: 1px solid #c79a3b44; background: #0b0a07a6; }
.pj-ventana .puntos .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .45rem; }
.pj-ventana .puntos label { font-weight: 600; font-size: .8rem; }
.pj-ventana > form { width: 100%; justify-self: stretch; margin-top: 0; }
.pj-ventana .pj-mover { display: grid; grid-template-columns: 1fr; gap: .3rem; justify-items: stretch; }
.pj-ventana .pj-mover small { color: var(--suave); font-size: .76rem; text-align: center; }
.pj-ventana .pj-mover .boton { width: 100%; margin: 0; }
@media (max-width: 560px) {
  .sel-pj { width: calc(50% - .4rem); }
  .pj-ventana-retrato { width: 90px; }
  .pj-ventana-datos { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sel-pj { animation: none; }
}

/* ---------- Celular y tablet ---------- */
@media (max-width: 980px) {
  .menu-boton {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--borde); cursor: pointer;
    background: transparent;
  }
  .menu-boton span, .menu-boton span::before, .menu-boton span::after {
    display: block; width: 20px; height: 2px; background: var(--oro2); border-radius: 2px; position: relative; content: "";
  }
  .menu-boton span::before { position: absolute; top: -6px; }
  .menu-boton span::after { position: absolute; top: 6px; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: .1rem;
    padding: .6rem 16px 1rem; background: #050705f7; border-bottom: 1px solid var(--borde);
  }
  .barra.abierto .menu { display: flex; }
  .menu a:not(.boton), .menu button.link { padding: .7rem .6rem; font-size: 1rem; text-align: left; }
  .menu a.activo::after { display: none; }
  .menu .cuenta { margin: .5rem 0 0; padding: .7rem 0 0; border-left: 0; border-top: 1px solid var(--borde); flex-wrap: wrap; }
  .grilla, .grilla.tres { grid-template-columns: 1fr; }
  .comparar { grid-template-columns: 1fr; }
  .pie-in { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .doc { grid-template-columns: 1fr; gap: 1.2rem; }
  .guia-destacada { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .guia-cabecera { gap: 1rem; }
  .guia-cabecera img { width: 64px; height: 64px; }
  .doc .indice { order: 2; }
  .indice { position: static; max-height: none; }
  .pj-card dl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vip-pasos { grid-template-columns: 1fr; }
  .dos { grid-template-columns: 1fr; }
  .modal { padding: 10px; align-items: end; }
  .modal-caja { border-radius: 18px 18px 14px 14px; padding: 1.5rem 1.2rem 1.2rem; }
  .filtros-ranking select, .filtros-ranking .buscador { flex: 1 1 100%; max-width: none; }
  .pie-in { grid-template-columns: 1fr; }
  .marca span { font-size: 1.1rem; }
}