/* =====================================================================
   Mu Clásico · tema oscuro de fantasía: negro profundo, oro y carmesí.
   ===================================================================== */
:root {
    --fondo: #07080c;
    --fondo-2: #0c0e15;
    --fondo-elevado: #12141c;
    --fondo-hover: #1a1d27;
    --tarjeta: rgb(16 18 26 / 0.78);
    --borde: rgb(212 168 75 / 0.16);
    --borde-fuerte: rgb(212 168 75 / 0.45);
    --borde-suave: rgb(255 255 255 / 0.07);
    --texto: #ece7dc;
    --texto-tenue: #a19d93;
    /* Paleta tomada del emblema: oro de las alas, naranja de los bordes, rojo del estandarte. */
    --oro: #e9a21f;
    --oro-claro: #ffe066;
    --amarillo: #f4b327;
    --naranja: #e07a16;
    --fuente-etiqueta: "Oswald", "Inter", sans-serif;
    --oro-oscuro: #8a5a12;
    --carmesi: #b5191c;
    --rojo-oscuro: #5a0b0b;
    --ok: #4cc38a;
    --error: #e5534b;
    --radio: 14px;
    --sombra: 0 18px 50px rgb(0 0 0 / 0.5);
    --fuente-titulo: "Cinzel", Georgia, serif;
    --fuente: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    background:
        radial-gradient(1000px 600px at 10% 10%, rgb(244 179 39 / 0.14), transparent 60%),
        radial-gradient(900px 600px at 90% 30%, rgb(181 25 28 / 0.16), transparent 60%),
        radial-gradient(800px 500px at 50% 90%, rgb(224 122 22 / 0.12), transparent 60%),
        var(--fondo);
    color: var(--texto); font-family: var(--fuente); font-size: 15px; line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: 700; line-height: 1.2; margin: 0 0 0.6em; letter-spacing: 0.02em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--oro-claro); }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--oro); margin-bottom: 0.9em; }
p { margin: 0 0 1em; }
a { color: inherit; }
code, kbd { font-family: ui-monospace, Consolas, monospace; background: var(--fondo-hover); padding: 0.1em 0.45em; border-radius: 5px; font-size: 0.92em; }
h1:focus, h2:focus { outline: none; }
img { max-width: 100%; }

.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.contenido { flex: 1; padding-top: 36px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }
.tenue { color: var(--texto-tenue); }
.pequeno { font-size: 0.85rem; }
.centrado { text-align: center; }
.destacado { color: var(--oro-claro); font-weight: 600; }

/* ===== Barras superiores ===== */
.barra-bienvenida { text-align: center; font-size: 0.85rem; padding: 7px 16px; background: #000; color: var(--texto-tenue); border-bottom: 1px solid rgb(255 196 37 / 0.15); }
.barra-bienvenida strong { color: var(--amarillo); font-family: var(--fuente-etiqueta); letter-spacing: 0.08em; text-transform: uppercase; }
.barra-estado { background: #050507; border-bottom: 1px solid rgb(255 196 37 / 0.15); overflow: hidden; }
.cinta { display: flex; width: max-content; animation: desplazar 36s linear infinite; }
.cinta:hover { animation-play-state: paused; }
.cinta-grupo { display: flex; gap: 48px; padding-right: 48px; padding-top: 7px; padding-bottom: 7px; font-family: var(--fuente-etiqueta); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-tenue); white-space: nowrap; }
.cinta-grupo span { display: inline-flex; align-items: center; gap: 7px; }
@keyframes desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta { animation: none; width: 100%; justify-content: center; } .cinta-grupo[aria-hidden] { display: none; } }
.punto-oro { background: var(--amarillo); box-shadow: 0 0 8px rgb(255 196 37 / 0.7); }

/* ===== Cabecera ===== */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgb(7 8 12 / 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(255 196 37 / 0.2); }
.cabecera-fila { display: flex; align-items: center; gap: 22px; min-height: 92px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca-icono { width: auto; height: 84px; margin: -8px 0; filter: drop-shadow(0 0 10px rgb(255 196 37 / 0.5)); }
.menu { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.menu a { text-decoration: none; color: var(--texto); padding: 11px 20px; border-radius: 7px; border: 1px solid rgb(255 196 37 / 0.28); background: rgb(255 255 255 / 0.02); font-family: var(--fuente-titulo); font-weight: 700; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.12em; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.menu a:hover { color: var(--amarillo); border-color: rgb(255 196 37 / 0.7); background: rgb(255 196 37 / 0.06); }
.menu a.active { color: var(--amarillo); border-color: var(--amarillo); box-shadow: 0 0 14px rgb(255 196 37 / 0.25); }
.sesion { display: flex; align-items: center; gap: 10px; }
.sesion form { margin: 0; }

/* ===== Botones ===== */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 9px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; text-decoration: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; }
.boton-primario { background: linear-gradient(180deg, #ffd45a, var(--amarillo) 55%, #e6ad12); color: #140f02; font-family: var(--fuente-etiqueta); text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 0 22px rgb(255 196 37 / 0.4), 0 6px 20px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.5); }
.boton-primario:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgb(255 196 37 / 0.65), 0 10px 28px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.5); }
.boton-contorno { background: rgb(0 0 0 / 0.35); border-color: var(--amarillo); color: var(--amarillo); font-family: var(--fuente-etiqueta); text-transform: uppercase; letter-spacing: 0.08em; }
.boton-contorno:hover { background: rgb(255 196 37 / 0.12); box-shadow: 0 0 18px rgb(255 196 37 / 0.3); }
.boton-secundario { background: rgb(212 168 75 / 0.06); border-color: var(--borde-fuerte); color: var(--oro-claro); }
.boton-secundario:hover { background: rgb(212 168 75 / 0.14); }
.boton-fantasma { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.18); color: var(--texto); backdrop-filter: blur(6px); }
.boton-fantasma:hover { border-color: var(--oro); color: var(--oro-claro); }
.boton-texto { background: none; color: var(--texto-tenue); padding: 10px 10px; }
.boton-texto:hover { color: var(--texto); }
.boton-grande { padding: 14px 28px; font-size: 1rem; }
.boton-ancho { width: 100%; }
.deshabilitado { opacity: 0.5; cursor: not-allowed; }

/* ===== Héroe ===== */
.heroe { position: relative; overflow: hidden; padding: 0 0 20px; isolation: isolate; }
.heroe-fondo { position: absolute; inset: 0; z-index: -2; background: url("img/hero.jpg") center 40% / cover no-repeat; filter: saturate(1.35) contrast(1.08); }
.heroe-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (prefers-reduced-motion: reduce) { .heroe-video { display: none; } }
.heroe-logo { margin: 0 auto 2px; max-width: 540px; line-height: 0; }
.heroe-logo img { width: 100%; height: auto;
    filter: saturate(1.25) contrast(1.08) drop-shadow(0 0 30px rgb(255 200 90 / 0.45)); animation: brillar 5s ease-in-out infinite alternate; }
@keyframes brillar { from { filter: saturate(1.25) contrast(1.08) drop-shadow(0 0 22px rgb(255 200 90 / 0.35)); } to { filter: saturate(1.35) contrast(1.1) drop-shadow(0 0 44px rgb(255 210 110 / 0.7)); } }
.heroe-fondo::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgb(7 8 12 / 0.93) 0%, rgb(7 8 12 / 0.8) 32%, rgb(7 8 12 / 0.35) 60%, rgb(7 8 12 / 0.15) 100%),
    linear-gradient(180deg, rgb(7 8 12 / 0.3) 0%, transparent 25%, rgb(7 8 12 / 0.4) 70%, var(--fondo) 100%); }
.heroe-halo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(520px 420px at 18% 45%, rgb(255 196 37 / 0.22), transparent 70%),
    radial-gradient(700px 500px at 85% 40%, rgb(255 120 40 / 0.18), transparent 70%);
    animation: respirar 6s ease-in-out infinite alternate; }
@keyframes respirar { from { opacity: 0.75; } to { opacity: 1; } }
.heroe-particulas { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(3px 3px at 12% 80%, rgb(255 225 140 / 1), transparent 60%),
        radial-gradient(2px 2px at 30% 60%, rgb(255 225 140 / 0.9), transparent 60%),
        radial-gradient(3px 3px at 55% 85%, rgb(255 190 90 / 0.9), transparent 60%),
        radial-gradient(2px 2px at 72% 55%, rgb(255 225 140 / 1), transparent 60%),
        radial-gradient(3px 3px at 88% 75%, rgb(255 225 140 / 0.9), transparent 60%),
        radial-gradient(2px 2px at 42% 35%, rgb(255 225 140 / 0.8), transparent 60%),
        radial-gradient(2px 2px at 8% 40%, rgb(150 190 255 / 0.9), transparent 60%),
        radial-gradient(2.5px 2.5px at 64% 25%, rgb(255 225 140 / 0.9), transparent 60%),
        radial-gradient(2px 2px at 94% 45%, rgb(150 190 255 / 0.9), transparent 60%),
        radial-gradient(2px 2px at 25% 20%, rgb(255 225 140 / 0.7), transparent 60%);
    animation: flotar 12s ease-in-out infinite alternate; }
@keyframes flotar { from { transform: translateY(22px); opacity: 0.8; } to { transform: translateY(-30px); opacity: 1; } }
.heroe-contenido { text-align: left; padding: clamp(28px, 4vw, 48px) 20px 36px; max-width: 1180px; }
.pastilla-estado { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgb(255 196 37 / 0.5); background: rgb(0 0 0 / 0.55); font-family: var(--fuente-etiqueta); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amarillo); }
.heroe-emblema { display: block; width: min(380px, 70vw); height: auto; margin: 10px 0 6px -14px; filter: drop-shadow(0 0 30px rgb(255 196 37 / 0.45)); animation: brillar 5s ease-in-out infinite alternate; }
.heroe-sobre { color: var(--amarillo); font-family: var(--fuente-etiqueta); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.82rem; font-weight: 600; margin: 0 0 6px; text-shadow: 0 0 14px rgb(255 196 37 / 0.5); }
.heroe-titulo { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.3em; line-height: 1.05; color: var(--amarillo); text-shadow: 0 0 26px rgb(255 196 37 / 0.45), 0 6px 24px rgb(0 0 0 / 0.8); }
.heroe-lema { color: #f1ece2; font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 600px; margin: 0 0 26px; text-shadow: 0 2px 14px rgb(0 0 0 / 0.9); line-height: 1.6; }
.heroe-acciones { display: flex; justify-content: flex-start; gap: 14px; flex-wrap: wrap; }
.chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(12 14 24 / 0.7); border: 1px solid rgb(243 210 124 / 0.35); box-shadow: 0 0 16px rgb(212 168 75 / 0.15), inset 0 1px 0 rgb(255 255 255 / 0.08); backdrop-filter: blur(8px); font-size: 0.88rem; color: #d8d3c7; }
.chips li strong { color: var(--oro-claro); font-weight: 700; text-shadow: 0 0 10px rgb(243 210 124 / 0.5); }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--texto-tenue); }
.punto-ok { background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: latir 2s ease-in-out infinite; }
.punto-error { background: var(--error); }
@keyframes latir { 0%, 100% { box-shadow: 0 0 6px var(--ok); } 50% { box-shadow: 0 0 16px var(--ok); } }

.contadores { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(150px, 190px)); gap: 14px; }
.contadores li { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 18px; border-radius: 10px; background: rgb(10 11 16 / 0.85); border: 1px solid rgb(255 196 37 / 0.3); backdrop-filter: blur(8px); box-shadow: 0 0 20px rgb(255 196 37 / 0.08), 0 10px 24px rgb(0 0 0 / 0.4); }
.contador-etiqueta { order: -1; font-family: var(--fuente-etiqueta); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--texto-tenue); margin-bottom: 8px; }
.contador-valor { font-family: var(--fuente-etiqueta); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: #fff; line-height: 1; text-shadow: 0 0 14px rgb(255 196 37 / 0.35); }

/* ===== Portada: bloques ===== */
.portada { padding: 56px 20px 72px; display: flex; flex-direction: column; gap: 72px; }
.bloque-dos { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; }
.seccion-titulo { margin-bottom: 26px; }
.seccion-titulo .sobre { display: block; color: var(--oro-claro); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem; font-weight: 700; margin-bottom: 8px; text-shadow: 0 0 14px rgb(243 210 124 / 0.5); }
.seccion-titulo h1, .seccion-titulo h2 { margin: 0; }
.seccion-titulo h2 { background: linear-gradient(180deg, #fff3d0, var(--oro-claro) 60%, var(--oro)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgb(243 210 124 / 0.25)); }
.seccion-titulo.centrado h2::after { content: ""; display: block; width: 90px; height: 2px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--oro-claro), transparent); box-shadow: 0 0 12px rgb(243 210 124 / 0.6); }

.tarjeta { border: 1px solid transparent; border-radius: var(--radio); padding: 26px; backdrop-filter: blur(8px); position: relative; transition: box-shadow 0.25s, transform 0.25s;
    background: linear-gradient(160deg, rgb(34 24 18 / 0.92), rgb(14 11 10 / 0.94)) padding-box,
                linear-gradient(135deg, rgb(255 224 102 / 0.75), rgb(224 122 22 / 0.55) 50%, rgb(181 25 28 / 0.6)) border-box;
    box-shadow: 0 0 34px rgb(244 179 39 / 0.12), 0 10px 30px rgb(0 0 0 / 0.35); }
.tarjeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, rgb(255 224 102 / 1), transparent); border-radius: var(--radio) var(--radio) 0 0; }
.tarjeta:hover { box-shadow: 0 0 46px rgb(244 179 39 / 0.26), 0 0 70px rgb(181 25 28 / 0.14), 0 14px 34px rgb(0 0 0 / 0.4); }

.rates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 20px; }
.rates-amplio { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 0; }
.rates > div { background: linear-gradient(160deg, rgb(224 122 22 / 0.14), rgb(0 0 0 / 0.3)); border: 1px solid rgb(244 179 39 / 0.25); border-radius: 10px; padding: 12px 14px; }
.rates dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-tenue); }
.rates dd { margin: 4px 0 0; font-weight: 700; color: var(--oro-claro); font-size: 1.05rem; text-shadow: 0 0 12px rgb(243 210 124 / 0.4); }
.capacidad { margin-bottom: 18px; }
.capacidad-texto { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--texto-tenue); margin-bottom: 8px; }
.capacidad-texto strong { color: var(--texto); }
.barra { height: 8px; background: rgb(255 255 255 / 0.07); border-radius: 999px; overflow: hidden; }
.barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro)); box-shadow: 0 0 12px rgb(212 168 75 / 0.6); border-radius: 999px; }

.noticias-lista { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.noticias-lista li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; }
.noticia-fecha { font-family: var(--fuente-titulo); font-weight: 700; color: var(--oro); text-transform: uppercase; font-size: 0.78rem; line-height: 1.3; text-align: center; padding-top: 4px; border-right: 1px solid var(--borde-suave); }
.noticia-titulo { display: block; font-weight: 700; color: var(--texto); text-decoration: none; margin: 6px 0 4px; font-size: 1.02rem; }
.noticia-titulo:hover { color: var(--oro-claro); }
.noticias-lista p { margin: 0; font-size: 0.9rem; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.08em; }
.etiqueta-oro { color: var(--oro-claro); border-color: var(--borde-fuerte); background: rgb(212 168 75 / 0.08); }
.etiqueta-ok { color: var(--ok); border-color: rgb(76 195 138 / 0.4); }

.clases { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.tarjeta-clase { text-align: center; padding: 22px 12px 18px; transition: transform 0.2s, border-color 0.2s; }
.tarjeta-clase:hover { transform: translateY(-4px); border-color: var(--borde-fuerte); }
.tarjeta-clase h3 { margin: 12px 0 6px; font-size: 0.9rem; }
.tarjeta-clase p { margin: 10px 0 0; font-size: 0.8rem; line-height: 1.5; }
.emblema { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.1rem; color: #fff; border: 2px solid rgb(255 255 255 / 0.25); box-shadow: 0 0 0 5px rgb(0 0 0 / 0.3), 0 0 28px var(--brillo, rgb(255 255 255 / 0.3)), 0 10px 30px rgb(0 0 0 / 0.5); text-shadow: 0 2px 6px rgb(0 0 0 / 0.6); }
.emblema-dk { --brillo: rgb(255 110 90 / 0.7); background: radial-gradient(circle at 30% 30%, #ffb3a0, #c0392b 55%, #6e1a12 100%); }
.emblema-dw { --brillo: rgb(100 150 255 / 0.7); background: radial-gradient(circle at 30% 30%, #b6d0ff, #2f63d8 55%, #142a66 100%); }
.emblema-elf { --brillo: rgb(90 230 140 / 0.7); background: radial-gradient(circle at 30% 30%, #c0ffcc, #2fb85c 55%, #15552b 100%); }
.emblema-mg { --brillo: rgb(190 120 255 / 0.7); background: radial-gradient(circle at 30% 30%, #ecd0ff, #8e44d6 55%, #3f1a6e 100%); }
.emblema-dl { --brillo: rgb(255 200 90 / 0.8); background: radial-gradient(circle at 30% 30%, #ffe9b0, #e0a030 55%, #7a4e12 100%); }
.emblema-sum { --brillo: rgb(255 120 200 / 0.7); background: radial-gradient(circle at 30% 30%, #ffd0ec, #d63f9a 55%, #6e1a4a 100%); }
.emblema-rf { --brillo: rgb(90 230 230 / 0.7); background: radial-gradient(circle at 30% 30%, #c8ffff, #2fb8b8 55%, #155555 100%); }
.tarjeta-clase:hover { box-shadow: 0 0 40px var(--brillo-tarjeta, rgb(212 168 75 / 0.2)), 0 14px 34px rgb(0 0 0 / 0.4); }
/* Clases con ilustración (wwwroot/img/clases/<codigo>.jpg): la imagen llena la tarjeta y el texto va sobre un velo. */
.clases-ilustradas { grid-template-columns: repeat(7, 1fr); }
.clases-ilustradas .tarjeta-clase { min-height: 380px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.tarjeta-clase-imagen { padding: 0; min-height: 380px; background-size: cover; background-position: center top; overflow: hidden; display: flex; align-items: flex-end; justify-content: stretch; text-align: left; }
.tarjeta-clase-imagen::before { display: none; }
.clase-velo { width: 100%; padding: 70px 14px 16px; background: linear-gradient(180deg, transparent 0%, rgb(7 8 12 / 0.75) 45%, rgb(7 8 12 / 0.96) 100%); }
.clase-velo h3 { margin: 0 0 6px; text-shadow: 0 2px 10px rgb(0 0 0 / 0.9); }
.clase-velo p { margin: 10px 0 0; font-size: 0.78rem; color: #d8d3c7; line-height: 1.45; }
.tarjeta-clase:has(.emblema-dk) { --brillo-borde: rgb(255 110 90 / 0.6); --brillo-tarjeta: rgb(255 110 90 / 0.22); }
.tarjeta-clase:has(.emblema-dw) { --brillo-borde: rgb(100 150 255 / 0.6); --brillo-tarjeta: rgb(100 150 255 / 0.22); }
.tarjeta-clase:has(.emblema-elf) { --brillo-borde: rgb(90 230 140 / 0.6); --brillo-tarjeta: rgb(90 230 140 / 0.22); }
.tarjeta-clase:has(.emblema-mg) { --brillo-borde: rgb(190 120 255 / 0.6); --brillo-tarjeta: rgb(190 120 255 / 0.22); }
.tarjeta-clase:has(.emblema-dl) { --brillo-borde: rgb(255 200 90 / 0.6); --brillo-tarjeta: rgb(255 200 90 / 0.22); }
.tarjeta-clase:has(.emblema-sum) { --brillo-borde: rgb(255 120 200 / 0.6); --brillo-tarjeta: rgb(255 120 200 / 0.22); }
.tarjeta-clase:has(.emblema-rf) { --brillo-borde: rgb(90 230 230 / 0.6); --brillo-tarjeta: rgb(90 230 230 / 0.22); }

.fama { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fama h3 { color: var(--oro-claro); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; border-bottom: 1px solid rgb(243 210 124 / 0.25); padding-bottom: 12px; text-shadow: 0 0 12px rgb(243 210 124 / 0.45); }
.podio { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; }
.podio li { display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "medalla nombre valor" "medalla detalle valor"; align-items: center; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
.podio li:last-child { border-bottom: none; }
.medalla { grid-area: medalla; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--fuente-titulo); font-weight: 800; font-size: 0.85rem; background: var(--fondo-hover); color: var(--texto-tenue); }
.medalla-1 { background: linear-gradient(135deg, #fff1b8, #d4a84b 60%, #8a6a25); color: #1a1405; box-shadow: 0 0 18px rgb(243 210 124 / 0.9); }
.medalla-2 { background: linear-gradient(135deg, #f4f6f8, #b9c1cc 60%, #6c7684); color: #121418; }
.medalla-3 { background: linear-gradient(135deg, #f0c9a2, #c47a3c 60%, #7a4418); color: #1a0f05; }
.podio-nombre { grid-area: nombre; font-weight: 700; }
.podio-detalle { grid-area: detalle; font-size: 0.8rem; color: var(--texto-tenue); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.podio-valor { grid-area: valor; font-family: var(--fuente-titulo); font-weight: 700; color: var(--oro-claro); text-align: right; }
.podio-valor small { font-family: var(--fuente); font-weight: 500; color: var(--texto-tenue); font-size: 0.72rem; }

.eventos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 14px; }
.tarjeta-evento { display: flex; flex-direction: column; gap: 6px; }
.evento-en-curso { border-color: rgb(76 195 138 / 0.5); box-shadow: 0 0 0 1px rgb(76 195 138 / 0.25), 0 10px 30px rgb(0 0 0 / 0.35); }
.evento-cabecera { display: flex; align-items: center; gap: 10px; }
.evento-cabecera h3 { margin: 0; font-size: 1rem; }
.evento-icono { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(160deg, rgb(244 179 39 / 0.55), rgb(181 25 28 / 0.55)); border: 1px solid rgb(255 224 102 / 0.6); box-shadow: 0 0 18px rgb(244 179 39 / 0.45); font-size: 1.35rem; line-height: 1; }
.evento-icono-imagen { background: radial-gradient(circle at 50% 40%, rgb(60 40 20 / 0.9), rgb(10 8 8 / 0.95)); }
.evento-icono-imagen img { width: 40px; height: auto; filter: drop-shadow(0 0 6px rgb(255 224 102 / 0.6)); }
.evento-icono-imagen.tono-oro img { filter: sepia(1) saturate(5) hue-rotate(-8deg) brightness(1.05) drop-shadow(0 0 6px rgb(255 200 60 / 0.8)); }
.evento-icono-imagen.tono-rojo img { filter: sepia(1) saturate(8) hue-rotate(-40deg) brightness(0.95) drop-shadow(0 0 6px rgb(255 80 60 / 0.8)); }
.evento-fila { display: inline-flex; align-items: center; gap: 8px; }
.evento-fila .evento-icono { width: 32px; height: 32px; border-radius: 7px; }
.evento-fila .evento-icono-imagen img { width: 26px; }
.evento-cuenta { font-family: var(--fuente-titulo); font-size: 1.75rem; font-weight: 800; color: var(--oro-claro); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; margin-top: 6px; text-shadow: 0 0 16px rgb(243 210 124 / 0.55); }
.evento-cuenta.en-curso { color: #6ff0a6; text-shadow: 0 0 16px rgb(76 195 138 / 0.8); animation: latir-texto 1.6s ease-in-out infinite; }
@keyframes latir-texto { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.evento-proximo { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-tenue); }
.tarjeta-evento p { margin: 8px 0 0; font-size: 0.86rem; }
.horarios { font-variant-numeric: tabular-nums; white-space: nowrap; }

.redes { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta-final { text-align: center; padding: 56px 24px; border-radius: var(--radio); border: 1px solid rgb(244 179 39 / 0.45); box-shadow: 0 0 50px rgb(244 179 39 / 0.18); background:
    radial-gradient(700px 320px at 50% 0%, rgb(255 224 102 / 0.26), transparent 70%),
    radial-gradient(500px 300px at 15% 100%, rgb(224 122 22 / 0.28), transparent 70%),
    radial-gradient(500px 300px at 85% 100%, rgb(181 25 28 / 0.3), transparent 70%),
    linear-gradient(180deg, #241610, var(--fondo-2)); }
.cta-final h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--oro-claro); text-shadow: 0 0 24px rgb(243 210 124 / 0.5); }
.cta-final p { max-width: 520px; margin: 0 auto 26px; }

/* ===== Paneles (páginas interiores) ===== */
.panel { background: linear-gradient(160deg, rgb(34 24 18 / 0.88), rgb(14 11 10 / 0.9)); border: 1px solid rgb(244 179 39 / 0.3); border-radius: var(--radio); padding: 26px; box-shadow: 0 0 30px rgb(244 179 39 / 0.08), 0 10px 30px rgb(0 0 0 / 0.35); backdrop-filter: blur(8px); position: relative; }
.panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, rgb(255 224 102 / 0.9), transparent); border-radius: var(--radio) var(--radio) 0 0; }
.panel-estrecho { max-width: 480px; width: 100%; margin: 0 auto; }
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-cabecera h1, .panel-cabecera h2 { margin: 0; }
.enlace { color: var(--oro); text-decoration: none; font-weight: 600; }
.enlace:hover { color: var(--oro-claro); text-decoration: underline; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.noticias { display: flex; flex-direction: column; gap: 18px; }
.noticia h2 { margin: 10px 0 8px; }
.noticia-meta { display: flex; align-items: center; gap: 12px; color: var(--texto-tenue); font-size: 0.85rem; }
.noticia-resumen { font-size: 1.05rem; color: #d8d3c7; }
.noticia-contenido > .boton { margin-top: 6px; }
.noticia-con-imagen { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.noticia-imagen { aspect-ratio: 2 / 3; border-radius: 10px; background: #05060a center top / cover no-repeat; border: 1px solid rgb(244 179 39 / 0.35); box-shadow: 0 0 24px rgb(244 179 39 / 0.15); }
.noticia-destacada { padding: 0; overflow: hidden; border-color: rgb(244 179 39 / 0.6); box-shadow: 0 0 46px rgb(244 179 39 / 0.22), 0 14px 40px rgb(0 0 0 / 0.45); }
.noticia-destacada .noticia-contenido { padding: 22px 30px 30px; }
.noticia-destacada:not(:has(.noticia-portada)) .noticia-contenido { padding-top: 26px; }
.noticia-portada { min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 30px; background: #05060a center / cover no-repeat; position: relative; isolation: isolate; }
.noticia-portada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(7 8 12 / 0.1), rgb(7 8 12 / 0.55) 55%, rgb(14 11 10 / 0.96)); }
.noticia-portada h2 { margin: 12px 0 0; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--amarillo); text-shadow: 0 0 26px rgb(255 196 37 / 0.45), 0 4px 18px rgb(0 0 0 / 0.9); }
.noticia-portada .noticia-meta { color: #e6e0d3; }

/* ===== Cuenta regresiva (noticias y aviso de la portada) ===== */
.cuenta { margin: 18px 0; }
.cuenta-texto { display: block; color: var(--oro-claro); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem; font-weight: 700; margin-bottom: 10px; }
.cuenta-bloques { display: flex; gap: 10px; flex-wrap: wrap; }
.cuenta-bloques div { min-width: 78px; padding: 10px 12px; text-align: center; border-radius: 12px; background: linear-gradient(180deg, rgb(244 179 39 / 0.16), rgb(0 0 0 / 0.45)); border: 1px solid rgb(244 179 39 / 0.45); box-shadow: 0 0 20px rgb(244 179 39 / 0.15), inset 0 1px 0 rgb(255 255 255 / 0.08); }
.cuenta-bloques b { display: block; font-family: var(--fuente-titulo); font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--oro-claro); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgb(243 210 124 / 0.6); }
.cuenta-bloques span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--texto-tenue); }
.cuenta-cumplida-texto { display: none; font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 800; color: #6ff0a6; text-shadow: 0 0 16px rgb(76 195 138 / 0.8); }
.cuenta-cumplida .cuenta-bloques { display: none; }
.cuenta-cumplida .cuenta-cumplida-texto { display: block; }
.cuenta-compacta { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cuenta-compacta .cuenta-texto { margin: 0; letter-spacing: 0.1em; }
.cuenta-compacta .cuenta-bloques { gap: 6px; }
.cuenta-compacta .cuenta-bloques div { min-width: 0; padding: 4px 8px; border-radius: 8px; display: flex; align-items: baseline; gap: 4px; }
.cuenta-compacta .cuenta-bloques b { font-size: 1.15rem; }
.cuenta-compacta .cuenta-bloques span { font-size: 0.62rem; letter-spacing: 0.08em; }
.cuenta-compacta .cuenta-cumplida-texto { font-size: 1rem; }
.heroe-aviso { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 24px; padding: 10px 16px; border-radius: 14px; text-decoration: none; color: inherit; background: rgb(12 14 24 / 0.72); border: 1px solid rgb(244 179 39 / 0.5); box-shadow: 0 0 26px rgb(244 179 39 / 0.22); backdrop-filter: blur(8px); transition: box-shadow 0.25s, transform 0.25s; }
.heroe-aviso:hover { transform: translateY(-1px); box-shadow: 0 0 36px rgb(244 179 39 / 0.38); }

/* ===== Próximamente: navegador y celular (fase 2) ===== */
.juega-navegador { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 44px; border-radius: var(--radio); border: 1px solid rgb(244 179 39 / 0.4); background: radial-gradient(ellipse at 78% 50%, rgb(224 122 22 / 0.2), transparent 60%), linear-gradient(160deg, rgb(26 20 16 / 0.92), rgb(8 9 13 / 0.94)); box-shadow: 0 0 44px rgb(244 179 39 / 0.14); overflow: hidden; }
.juega-navegador h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); color: var(--oro-claro); margin: 14px 0 12px; text-shadow: 0 0 24px rgb(243 210 124 / 0.4); }
.juega-navegador-lista { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.juega-navegador-subtitulo { margin: 22px 0 0; font-size: 1.05rem; color: var(--oro-claro); }
.juega-navegador-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.juega-navegador-lista li { display: flex; align-items: center; gap: 12px; }
.juega-navegador-lista span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgb(244 179 39 / 0.1); border: 1px solid rgb(244 179 39 / 0.3); }
.juega-navegador-dispositivos { position: relative; height: 270px; }
.dispositivo { position: absolute; background: #05060a center / cover no-repeat; border: 2px solid rgb(243 210 124 / 0.6); box-shadow: 0 0 34px rgb(244 179 39 / 0.28), 0 22px 44px rgb(0 0 0 / 0.65); overflow: hidden; }
.dispositivo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.05) 30%, rgb(0 0 0 / 0.6)); }
.dispositivo img { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 18px rgb(244 179 39 / 0.65)); }
.dispositivo-pc { left: 0; top: 8px; width: 80%; aspect-ratio: 16 / 10; border-radius: 12px; border-bottom-width: 10px; }
.dispositivo-pc img { width: 30%; }
.dispositivo-movil { right: 2%; bottom: 0; width: 25%; aspect-ratio: 9 / 18; border-radius: 22px; border-width: 4px; animation: flotar-movil 5s ease-in-out infinite; }
.dispositivo-movil img { width: 72%; }
@keyframes flotar-movil { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .dispositivo-movil { animation: none; } }

/* ===== Tablas ===== */
.tabla-desplazable { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.tabla { width: 100%; border-collapse: collapse; min-width: 520px; }
.tabla th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--oro); font-weight: 700; padding: 10px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 11px 10px; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
.tabla tbody tr:hover { background: rgb(212 168 75 / 0.04); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .nombre { font-weight: 700; }
.puesto { color: var(--texto-tenue); font-weight: 800; font-family: var(--fuente-titulo); }
.puesto-1 { color: #f5d06f; }
.puesto-2 { color: #cfd6e0; }
.puesto-3 { color: #d39a62; }

.clase { display: inline-block; font-size: 0.76rem; padding: 2px 9px; border-radius: 999px; background: rgb(0 0 0 / 0.3); border: 1px solid var(--borde-suave); white-space: nowrap; letter-spacing: 0.03em; }
.clase-dw { color: #8fb3ff; }
.clase-dk { color: #ff8f7a; }
.clase-elf { color: #8fe3a5; }
.clase-mg { color: #d4a3ff; }
.clase-dl { color: #f5c26b; }
.clase-sum { color: #ff9fd6; }
.clase-rf { color: #7fe0e0; }

/* ===== Filtros ===== */
.pestanas { display: flex; gap: 4px; background: rgb(0 0 0 / 0.3); border: 1px solid var(--borde); border-radius: 9px; padding: 3px; }
.pestanas a { text-decoration: none; padding: 7px 16px; border-radius: 7px; color: var(--texto-tenue); font-weight: 600; font-size: 0.88rem; }
.pestanas a.activa { background: rgb(212 168 75 / 0.14); color: var(--oro-claro); }
.filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.filtro-grupo { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { text-decoration: none; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--borde-suave); color: var(--texto-tenue); font-size: 0.86rem; }
.chip:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.chip.activa { background: rgb(212 168 75 / 0.14); border-color: var(--oro); color: var(--oro-claro); }

/* ===== Formularios ===== */
.formulario { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.92rem; }
.formulario small { color: var(--texto-tenue); font-weight: 400; font-size: 0.82rem; }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="password"], .formulario input:not([type]) {
    background: rgb(0 0 0 / 0.35); border: 1px solid var(--borde-suave); border-radius: 9px; color: var(--texto); padding: 11px 13px; font: inherit; }
.formulario input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgb(212 168 75 / 0.18); }
.formulario input.invalid { border-color: var(--error); }
.formulario .casilla { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
.casilla input { width: 18px; height: 18px; accent-color: var(--oro); }
.validation-message { color: var(--error); font-size: 0.85rem; font-weight: 400; }
.aviso { padding: 12px 14px; border-radius: 9px; border: 1px solid var(--borde); background: rgb(0 0 0 / 0.25); margin: 0; }
.aviso-ok { border-color: rgb(76 195 138 / 0.5); background: rgb(76 195 138 / 0.1); }
.aviso-error { border-color: rgb(229 83 75 / 0.5); background: rgb(229 83 75 / 0.1); }

/* ===== Cuenta ===== */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.resumen > div { background: rgb(0 0 0 / 0.25); border: 1px solid var(--borde-suave); border-radius: 10px; padding: 10px 14px; }
.resumen dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-tenue); }
.resumen dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.resumen-compacto { margin-top: 8px; max-width: 420px; }
.personajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tarjeta-personaje { background: rgb(0 0 0 / 0.25); border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: 16px; }
.tarjeta-personaje h3 { margin-bottom: 6px; }
.tarjeta-personaje dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 12px 0 0; }
.tarjeta-personaje dt { font-size: 0.72rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.08em; }
.tarjeta-personaje dd { margin: 0; font-weight: 600; }

/* ===== Descargas y donaciones ===== */
.descargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tarjeta-descarga { background: rgb(0 0 0 / 0.25); border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.tarjeta-descarga-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lista-pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.detalle { margin-top: 12px; border: 1px solid var(--borde-suave); border-radius: 9px; padding: 10px 14px; }
.detalle summary { cursor: pointer; font-weight: 600; }
.detalle p { margin: 10px 0 0; }
.paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.tarjeta-paquete { background: rgb(0 0 0 / 0.25); border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: 22px; text-align: center; transition: transform 0.2s, border-color 0.2s; }
.tarjeta-paquete:hover { transform: translateY(-3px); border-color: var(--borde-fuerte); }
.tarjeta-paquete h2 { text-transform: capitalize; color: var(--oro-claro); font-size: 1.2rem; }
.paquete-wcoin { font-size: 1.9rem; font-weight: 800; font-family: var(--fuente-titulo); margin: 0; }
.paquete-wcoin span { font-size: 0.85rem; color: var(--texto-tenue); font-weight: 500; font-family: var(--fuente); }
.paquete-bono { color: var(--ok); font-size: 0.9rem; margin: 4px 0 0; }
.paquete-precio { font-size: 1.15rem; margin: 14px 0; }
.titulo-vip { margin-top: 36px; color: var(--oro-claro); scroll-margin-top: 90px; }
.beneficios-vip { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.beneficios-vip strong { color: var(--oro-claro); }
.tarjeta-vip { border-color: var(--borde-fuerte); background: linear-gradient(180deg, rgb(244 179 39 / 0.12), rgb(0 0 0 / 0.25)); }
.tarjeta-vip h2 { letter-spacing: 0.12em; }

/* ===== Pedidos y pagos ===== */
.estado { display: inline-block; font-size: 0.78rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borde-suave); color: var(--texto-tenue); white-space: nowrap; }
.estado-pendiente { color: var(--oro-claro); border-color: var(--borde-fuerte); }
.estado-por_verificar { color: #8fb3ff; border-color: rgb(143 179 255 / 0.4); }
.estado-pagado { color: var(--ok); border-color: rgb(76 195 138 / 0.4); }
.estado-acreditado { color: var(--ok); background: rgb(76 195 138 / 0.12); border-color: rgb(76 195 138 / 0.5); }
.estado-rechazado, .estado-cancelado { color: var(--error); border-color: rgb(229 83 75 / 0.4); }
.metodos { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.metodos legend { font-weight: 600; margin-bottom: 8px; }
.opcion-metodo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--borde-suave); border-radius: 9px; background: rgb(0 0 0 / 0.25); cursor: pointer; font-weight: 400; }
.opcion-metodo:has(input:checked) { border-color: var(--oro); background: rgb(212 168 75 / 0.08); }
.opcion-metodo input { width: 18px; height: 18px; accent-color: var(--oro); }
.opcion-texto { display: flex; flex-direction: column; gap: 2px; }
.opcion-texto small { color: var(--texto-tenue); }
.opcion-precio { font-weight: 700; white-space: nowrap; }
.instrucciones { margin-top: 20px; }
.instrucciones h2 { font-size: 1.1rem; }
.formulario-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.entrada-corta { background: rgb(0 0 0 / 0.35); border: 1px solid var(--borde-suave); border-radius: 7px; color: var(--texto); padding: 6px 10px; font: inherit; width: 170px; }

/* ===== Pie ===== */
.pie { border-top: 1px solid rgb(244 179 39 / 0.3); background: radial-gradient(800px 300px at 50% 0%, rgb(181 25 28 / 0.14), transparent 70%), linear-gradient(180deg, #120d0b, var(--fondo)); padding: 48px 0 24px; font-size: 0.9rem; margin-top: auto; }
.pie-logo { display: block; width: auto; height: 130px; margin: -10px 0 4px -6px; filter: drop-shadow(0 0 14px rgb(244 179 39 / 0.45)); }
.pie-nombre { display: block; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amarillo); }
.pie-rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.pie-rejilla a { display: block; color: var(--texto-tenue); text-decoration: none; padding: 4px 0; }
.pie-rejilla a:hover { color: var(--oro-claro); }
.pie-marca p { margin: 12px 0; max-width: 320px; }
.pie-rates { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--texto-tenue); }
.pie-rates strong { color: var(--oro-claro); }
.pie-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--borde-suave); color: var(--texto-tenue); font-size: 0.8rem; text-align: center; }
.pie-legal p { margin: 0 0 6px; }

/* ===== Botones flotantes ===== */
.flotantes { position: fixed; left: 16px; top: 46%; display: flex; flex-direction: column; gap: 12px; z-index: 30; }
.comunidad { position: fixed; right: 18px; bottom: 18px; z-index: 30; }
.comunidad-flotante { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px; background: var(--amarillo); color: #140f02; font-family: var(--fuente-etiqueta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; cursor: pointer; list-style: none; user-select: none; box-shadow: 0 0 22px rgb(255 196 37 / 0.45), 0 8px 24px rgb(0 0 0 / 0.5); }
.comunidad-flotante::-webkit-details-marker { display: none; }
.comunidad-flotante::before { content: "👥"; }
.comunidad[open] .comunidad-flotante { box-shadow: 0 0 30px rgb(255 196 37 / 0.6), 0 8px 24px rgb(0 0 0 / 0.5); }
.comunidad-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(320px, calc(100vw - 36px)); background: #0b0909; border: 1px solid rgb(244 179 39 / 0.4); border-radius: 12px; padding: 14px; box-shadow: 0 0 30px rgb(244 179 39 / 0.15), 0 18px 40px rgb(0 0 0 / 0.6); animation: aparecer 0.18s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.comunidad-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-family: var(--fuente-etiqueta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: #fff; }
.comunidad-cabecera button { background: #1c1917; border: 1px solid rgb(255 255 255 / 0.1); color: var(--texto); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 0.9rem; }
.comunidad-cabecera button:hover { border-color: var(--amarillo); color: var(--amarillo); }
.comunidad-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comunidad-rejilla a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 9px; background: #141110; border: 1px solid rgb(255 255 255 / 0.08); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: border-color 0.15s, background 0.15s; }
.comunidad-rejilla a:hover { border-color: var(--amarillo); background: rgb(244 179 39 / 0.08); }
.comunidad-rejilla i { font-style: normal; width: 22px; text-align: center; color: var(--amarillo); }
.flotante { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.5); transition: transform 0.15s; }
.flotante:hover { transform: scale(1.08); }
.flotante-whatsapp { background: #25d366; }
.flotante-discord { background: #5865f2; }

/* ===== Móvil ===== */
@media (max-width: 1000px) {
    .clases { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .bloque-dos, .fama { grid-template-columns: 1fr; }
    .pie-rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .cabecera { position: static; }
    .cabecera-fila { gap: 10px; min-height: 70px; }
    .marca-icono { height: 60px; }
    .menu { gap: 6px; }
    .menu a { padding: 8px 12px; font-size: 0.76rem; }
    .sesion .boton { padding: 8px 11px; font-size: 0.8rem; }
    .cinta { animation-duration: 24s; }
    .clases { grid-template-columns: repeat(2, 1fr); }
    .heroe-contenido { padding-top: 24px; }
    .heroe-emblema { margin-left: 0; }
    .contadores { grid-template-columns: repeat(2, 1fr); }
    .flotantes { left: 10px; top: auto; bottom: 80px; }
    .comunidad { right: 12px; bottom: 12px; }
    .comunidad-flotante { padding: 10px 14px; }
    .menu { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .sesion { margin-left: auto; }
    .portada { gap: 52px; padding-top: 40px; }
    .panel, .tarjeta { padding: 18px; }
    .pie-rejilla { grid-template-columns: 1fr; gap: 20px; }
    .flotantes { right: 12px; bottom: 12px; }
}

/* Noticias, cuenta regresiva y "Próximamente" en pantallas chicas */
@media (max-width: 900px) {
    .juega-navegador { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
    .noticia-destacada { padding: 0; }
    .juega-navegador-dispositivos { width: 100%; max-width: 420px; height: 230px; margin: 0 auto; }
}
@media (max-width: 640px) {
    .noticia-con-imagen { grid-template-columns: 1fr; }
    .noticia-imagen { aspect-ratio: 16 / 9; background-position: center 20%; }
    .noticia-destacada .noticia-contenido, .noticia-portada { padding-left: 18px; padding-right: 18px; }
    .cuenta-bloques div { min-width: 64px; padding: 8px; }
    .cuenta-bloques b { font-size: 1.6rem; }
    .heroe-aviso { padding: 10px 12px; }
}