/* ==========================================================================
Kit visual de Inertia.gg · v1 (28/10/2026)
Fondos propios F1–F5, arte de los juegos (enmarcado o recortado como la
campaña), tarjetas de juego y separadores. Misma familia que la campaña de
redes: verde #9DE83B, dorado #C8AA6E, coral #FF4655, Archivo expandida,
Inter y JetBrains Mono.
TEMA: sigue al sistema (prefers-color-scheme) y respeta el botón del sitio
(html[data-tema="claro|oscuro"], de js/tema.js). También entiende
html[data-theme="light|dark"]. Las dos versiones están diseñadas: el claro
es papel cálido de cada juego (pergamino, crema, gris lima), no blanco.
ARTE DE RIOT (decisión de Samuel, 28/10/2026, pendiente de pasar a
CUMPLIMIENTO-RIOT.md con su aprobación): como en la campaña, en la web se
permiten recortes del arte (ventanas diagonales, máscaras) y texto encima.
Se mantiene: sin logos de Riot ni de los juegos, sin TFT, sin recolorear el
arte, alt sin decir «oficial», y los íconos (perfil, posiciones, tarjetas
pequeñas) nunca más grandes que su tamaño original.
Para mostrar el arte completo y sin tocar sigue existiendo .arte-marco.
Prefijos: .k-, .fondo-, .arte-marco, .tarjeta-juego, .separador.
========================================================================== */
:root, .k-tema-oscuro { /* .k-tema-oscuro fuerza el oscuro en un bloque */
/* Marca (campaña) */
--k-verde: #9DE83B;
--k-verde-tx: #0A0C11; /* texto sobre verde: 13:1 */
--k-ambar: #F2B84B;
--k-lol: #C8AA6E;
--k-lol-claro: #F0E6D2;
--k-lol-oscuro: #785A28; /* dorado para texto en tema claro: 5.2:1 */
--k-lol-fondo: #091428;
--k-lol-hex: #0AC8B9;
--k-val: #FF4655;
--k-val-claro: #ECE8E1;
--k-val-oscuro: #B3303C; /* coral para texto en tema claro */
--k-val-fondo: #0F1923;
--k-tinta: #0A0C11;
/* Tipografía */
--k-display: "Archivo", "Arial Black", system-ui, sans-serif;
--k-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--k-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
/* Forma y movimiento */
--k-radio: 10px;
--k-marco: 10px;
--k-curva: cubic-bezier(.2, .7, .2, 1);
/* ---- Tema OSCURO (por defecto) ----
n = neutro (F1) · l = LoL (F2) · v = VALORANT (F3) · d = doble (F4) · x = vacío (F5) */
--k-n-sup: #0A0C11; --k-n-sup-rgb: 10 12 17; --k-n-tx: #ECEFF4; --k-n-suave: #9AA3B3; --k-n-ac: var(--k-verde); --k-n-ac-tx: var(--k-verde); --k-n-tex: rgb(236 239 244 / .55); --k-n-panel: #11141C; --k-n-borde: #252B38;
--k-l-sup: #091428; --k-l-sup-rgb: 9 20 40; --k-l-tx: #F0E6D2; --k-l-suave: #B9B4A6; --k-l-ac: var(--k-lol); --k-l-ac-tx: var(--k-lol); --k-l-tex: rgb(200 170 110 / .9); --k-l-panel: #0C1A31; --k-l-borde: #2A3346;
--k-v-sup: #0F1923; --k-v-sup-rgb: 15 25 35; --k-v-tx: #ECE8E1; --k-v-suave: #A3ABB3; --k-v-ac: var(--k-val); --k-v-ac-tx: var(--k-val); --k-v-tex: rgb(236 232 225 / .8); --k-v-panel: #131F2A; --k-v-borde: #27323D;
--k-em-marca: none;
--k-sombra: 0 18px 40px rgba(0, 0, 0, .5);
--k-ruido-opacidad: .07;
--k-n-img-1920: url("../assets/inertiagg/fondos/f1-neutro-oscuro-1920.webp"); --k-n-img-1440: url("../assets/inertiagg/fondos/f1-neutro-oscuro-1440.webp"); --k-n-img-390: url("../assets/inertiagg/fondos/f1-neutro-oscuro-390.webp");
--k-l-img-1920: url("../assets/inertiagg/fondos/f2-lol-oscuro-1920.webp"); --k-l-img-1440: url("../assets/inertiagg/fondos/f2-lol-oscuro-1440.webp"); --k-l-img-390: url("../assets/inertiagg/fondos/f2-lol-oscuro-390.webp");
--k-v-img-1920: url("../assets/inertiagg/fondos/f3-val-oscuro-1920.webp"); --k-v-img-1440: url("../assets/inertiagg/fondos/f3-val-oscuro-1440.webp"); --k-v-img-390: url("../assets/inertiagg/fondos/f3-val-oscuro-390.webp");
--k-d-img-1920: url("../assets/inertiagg/fondos/f4-doble-oscuro-1920.webp"); --k-d-img-1440: url("../assets/inertiagg/fondos/f4-doble-oscuro-1440.webp"); --k-d-img-390: url("../assets/inertiagg/fondos/f4-doble-oscuro-390.webp");
--k-x-img-1920: url("../assets/inertiagg/fondos/f5-vacio-oscuro-1920.webp"); --k-x-img-1440: url("../assets/inertiagg/fondos/f5-vacio-oscuro-1440.webp"); --k-x-img-390: url("../assets/inertiagg/fondos/f5-vacio-oscuro-390.webp");
}
/* ---- Tema CLARO: papel de cada juego, nunca blanco puro ---- */
@media (prefers-color-scheme: light) {
:root:not([data-tema="oscuro"]):not([data-theme="dark"]) {
--k-n-sup: #ECEFE6; --k-n-sup-rgb: 236 239 230; --k-n-tx: #0A0C11; --k-n-suave: #3E4553; --k-n-ac: var(--k-verde); --k-n-ac-tx: #0A0C11; --k-n-tex: rgb(10 12 17 / .7); --k-n-panel: #F6F8F1; --k-n-borde: #C9D0C0;
--k-l-sup: #F1E8D6; --k-l-sup-rgb: 241 232 214; --k-l-tx: #091428; --k-l-suave: #4F4430; --k-l-ac: var(--k-lol); --k-l-ac-tx: var(--k-lol-oscuro); --k-l-tex: rgb(120 90 40 / .9); --k-l-panel: #F8F2E6; --k-l-borde: #D8C8A6;
--k-v-sup: #EBE7E0; --k-v-sup-rgb: 235 231 224; --k-v-tx: #0F1923; --k-v-suave: #47515C; --k-v-ac: var(--k-val); --k-v-ac-tx: var(--k-val-oscuro); --k-v-tex: rgb(15 25 35 / .75); --k-v-panel: #F6F3EE; --k-v-borde: #D3CCC0;
--k-em-marca: linear-gradient(transparent 62%, rgb(157 232 59 / .85) 62% 94%, transparent 94%);
--k-sombra: 0 16px 34px -12px rgba(30, 30, 20, .28);
--k-ruido-opacidad: .05;
--k-n-img-1920: url("../assets/inertiagg/fondos/f1-neutro-claro-1920.webp"); --k-n-img-1440: url("../assets/inertiagg/fondos/f1-neutro-claro-1440.webp"); --k-n-img-390: url("../assets/inertiagg/fondos/f1-neutro-claro-390.webp");
--k-l-img-1920: url("../assets/inertiagg/fondos/f2-lol-claro-1920.webp"); --k-l-img-1440: url("../assets/inertiagg/fondos/f2-lol-claro-1440.webp"); --k-l-img-390: url("../assets/inertiagg/fondos/f2-lol-claro-390.webp");
--k-v-img-1920: url("../assets/inertiagg/fondos/f3-val-claro-1920.webp"); --k-v-img-1440: url("../assets/inertiagg/fondos/f3-val-claro-1440.webp"); --k-v-img-390: url("../assets/inertiagg/fondos/f3-val-claro-390.webp");
--k-d-img-1920: url("../assets/inertiagg/fondos/f4-doble-claro-1920.webp"); --k-d-img-1440: url("../assets/inertiagg/fondos/f4-doble-claro-1440.webp"); --k-d-img-390: url("../assets/inertiagg/fondos/f4-doble-claro-390.webp");
--k-x-img-1920: url("../assets/inertiagg/fondos/f5-vacio-claro-1920.webp"); --k-x-img-1440: url("../assets/inertiagg/fondos/f5-vacio-claro-1440.webp"); --k-x-img-390: url("../assets/inertiagg/fondos/f5-vacio-claro-390.webp");
}
}
:root[data-tema="claro"], :root[data-theme="light"], .k-tema-claro { /* .k-tema-claro fuerza el claro en un bloque */
--k-n-sup: #ECEFE6; --k-n-sup-rgb: 236 239 230; --k-n-tx: #0A0C11; --k-n-suave: #3E4553; --k-n-ac: var(--k-verde); --k-n-ac-tx: #0A0C11; --k-n-tex: rgb(10 12 17 / .7); --k-n-panel: #F6F8F1; --k-n-borde: #C9D0C0;
--k-l-sup: #F1E8D6; --k-l-sup-rgb: 241 232 214; --k-l-tx: #091428; --k-l-suave: #4F4430; --k-l-ac: var(--k-lol); --k-l-ac-tx: var(--k-lol-oscuro); --k-l-tex: rgb(120 90 40 / .9); --k-l-panel: #F8F2E6; --k-l-borde: #D8C8A6;
--k-v-sup: #EBE7E0; --k-v-sup-rgb: 235 231 224; --k-v-tx: #0F1923; --k-v-suave: #47515C; --k-v-ac: var(--k-val); --k-v-ac-tx: var(--k-val-oscuro); --k-v-tex: rgb(15 25 35 / .75); --k-v-panel: #F6F3EE; --k-v-borde: #D3CCC0;
--k-em-marca: linear-gradient(transparent 62%, rgb(157 232 59 / .85) 62% 94%, transparent 94%);
--k-sombra: 0 16px 34px -12px rgba(30, 30, 20, .28);
--k-ruido-opacidad: .05;
--k-n-img-1920: url("../assets/inertiagg/fondos/f1-neutro-claro-1920.webp"); --k-n-img-1440: url("../assets/inertiagg/fondos/f1-neutro-claro-1440.webp"); --k-n-img-390: url("../assets/inertiagg/fondos/f1-neutro-claro-390.webp");
--k-l-img-1920: url("../assets/inertiagg/fondos/f2-lol-claro-1920.webp"); --k-l-img-1440: url("../assets/inertiagg/fondos/f2-lol-claro-1440.webp"); --k-l-img-390: url("../assets/inertiagg/fondos/f2-lol-claro-390.webp");
--k-v-img-1920: url("../assets/inertiagg/fondos/f3-val-claro-1920.webp"); --k-v-img-1440: url("../assets/inertiagg/fondos/f3-val-claro-1440.webp"); --k-v-img-390: url("../assets/inertiagg/fondos/f3-val-claro-390.webp");
--k-d-img-1920: url("../assets/inertiagg/fondos/f4-doble-claro-1920.webp"); --k-d-img-1440: url("../assets/inertiagg/fondos/f4-doble-claro-1440.webp"); --k-d-img-390: url("../assets/inertiagg/fondos/f4-doble-claro-390.webp");
--k-x-img-1920: url("../assets/inertiagg/fondos/f5-vacio-claro-1920.webp"); --k-x-img-1440: url("../assets/inertiagg/fondos/f5-vacio-claro-1440.webp"); --k-x-img-390: url("../assets/inertiagg/fondos/f5-vacio-claro-390.webp");
}
/* ---------- Familias: cada clase toma los tokens de su juego ---------- */
.fondo-neutro, .fondo-doble, .fondo-vacio, .tarjeta-juego--neutro, .arte-marco--neutro, .separador--neutro {
--k-sup: var(--k-n-sup); --k-sup-rgb: var(--k-n-sup-rgb); --k-tx: var(--k-n-tx); --k-suave: var(--k-n-suave); --k-ac: var(--k-n-ac); --k-ac-tx: var(--k-n-ac-tx); --k-tex: var(--k-n-tex); --k-panel: var(--k-n-panel); --k-borde: var(--k-n-borde);
}
.fondo-lol, .tarjeta-juego--lol, .arte-marco--lol, .separador--lol {
--k-sup: var(--k-l-sup); --k-sup-rgb: var(--k-l-sup-rgb); --k-tx: var(--k-l-tx); --k-suave: var(--k-l-suave); --k-ac: var(--k-l-ac); --k-ac-tx: var(--k-l-ac-tx); --k-tex: var(--k-l-tex); --k-panel: var(--k-l-panel); --k-borde: var(--k-l-borde); --k-em-marca: none;
}
.fondo-val, .tarjeta-juego--val, .arte-marco--val, .separador--val {
--k-sup: var(--k-v-sup); --k-sup-rgb: var(--k-v-sup-rgb); --k-tx: var(--k-v-tx); --k-suave: var(--k-v-suave); --k-ac: var(--k-v-ac); --k-ac-tx: var(--k-v-ac-tx); --k-tex: var(--k-v-tex); --k-panel: var(--k-v-panel); --k-borde: var(--k-v-borde); --k-em-marca: none;
}
.fondo-neutro { --k-img-1920: var(--k-n-img-1920); --k-img-1440: var(--k-n-img-1440); --k-img-390: var(--k-n-img-390); }
.fondo-lol { --k-img-1920: var(--k-l-img-1920); --k-img-1440: var(--k-l-img-1440); --k-img-390: var(--k-l-img-390); }
.fondo-val { --k-img-1920: var(--k-v-img-1920); --k-img-1440: var(--k-v-img-1440); --k-img-390: var(--k-v-img-390); }
.fondo-doble { --k-img-1920: var(--k-d-img-1920); --k-img-1440: var(--k-d-img-1440); --k-img-390: var(--k-d-img-390); }
.fondo-vacio { --k-img-1920: var(--k-x-img-1920); --k-img-1440: var(--k-x-img-1440); --k-img-390: var(--k-x-img-390); }
/* ---------- Tipografía y piezas pequeñas ---------- */
.k-titulo {
margin: 0;
font-family: var(--k-display);
font-stretch: 125%;
font-weight: 900;
text-transform: uppercase;
line-height: .95;
letter-spacing: -.005em;
text-wrap: balance;
color: var(--k-tx, inherit);
}
.k-titulo em { font-style: normal; color: var(--k-ac-tx, var(--k-verde)); background: var(--k-em-marca); }
.k-ceja {
margin: 0;
font: 700 12px/1.3 var(--k-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--k-ac-tx, var(--k-verde));
}
.k-ceja b { color: inherit; background: var(--k-em-marca); }
.k-etiqueta { display: inline-block; font: 500 11px/1.4 var(--k-mono); padding: 2px 8px; border-radius: 3px; border: 1px solid currentColor; color: var(--k-ac-tx, var(--k-verde)); white-space: nowrap; }
.k-boton {
display: inline-flex; align-items: center; gap: .5em; justify-self: start;
font: 700 15px/1 var(--k-body); color: var(--k-verde-tx); background: var(--k-verde);
padding: 13px 18px; border-radius: 6px; border: 0; text-decoration: none; cursor: pointer;
transition: transform .2s var(--k-curva), box-shadow .2s var(--k-curva);
}
.k-boton:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgb(157 232 59 / .7); }
.k-boton--fantasma { color: var(--k-tx, currentColor); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-tx, currentColor) 55%, transparent); }
.k-boton--fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--k-ac-tx, var(--k-verde)); }
.k-boton:focus-visible, .tarjeta-juego a:focus-visible { outline: 2px solid var(--k-ac-tx, var(--k-verde)); outline-offset: 3px; }
/* ==========================================================================
FONDOS
Familia: .fondo-neutro (F1) · .fondo-lol (F2) · .fondo-val (F3) · .fondo-doble (F4) · .fondo-vacio (F5)
Variante: .fondo--hero WebP propio (1920 / 1440 / 390) + capa de contraste + grano
.fondo--seccion color + textura SVG (con el color del tema) + grano
Capas opcionales dentro:
…
(arte recortado, ver abajo)
========================================================================== */
.fondo--hero, .fondo--seccion {
position: relative;
isolation: isolate;
overflow: hidden;
color: var(--k-tx);
background-color: var(--k-sup);
}
.fondo--hero::after, .fondo--seccion::after { /* grano propio */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: url("../assets/inertiagg/fondos/texturas/ruido.svg") 0 0 / 240px 240px;
opacity: var(--k-ruido-opacidad); mix-blend-mode: overlay;
}
/* ---------- Hero ---------- */
.fondo--hero {
min-height: clamp(520px, 78vh, 820px);
display: grid;
align-content: center;
padding-block: clamp(72px, 10vw, 128px);
background-image: var(--k-img-1920);
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
@media (max-width: 1440px) { .fondo--hero { background-image: var(--k-img-1440); } }
.fondo--hero::before { /* capa de contraste del lado del texto */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(90deg, rgb(var(--k-sup-rgb) / .95) 0%, rgb(var(--k-sup-rgb) / .84) 36%, rgb(var(--k-sup-rgb) / .2) 62%, rgb(var(--k-sup-rgb) / 0) 78%),
linear-gradient(0deg, rgb(var(--k-sup-rgb) / .9) 0%, rgb(var(--k-sup-rgb) / 0) 22%);
}
.fondo-doble.fondo--hero { background-position: center; }
.fondo-doble.fondo--hero::before { /* F4: el texto va al centro */
background:
radial-gradient(48% 66% at 50% 50%, rgb(var(--k-sup-rgb) / .95) 0%, rgb(var(--k-sup-rgb) / .86) 58%, rgb(var(--k-sup-rgb) / 0) 100%),
linear-gradient(0deg, rgb(var(--k-sup-rgb) / .85) 0%, rgb(var(--k-sup-rgb) / 0) 20%);
}
.fondo-doble .k-hero__contenido { margin-inline: auto; justify-items: center; text-align: center; }
.fondo-doble .k-hero__acciones { justify-content: center; }
.k-hero__contenido { position: relative; display: grid; gap: 18px; max-width: 600px; }
.k-hero__contenido .k-titulo { font-size: clamp(40px, 6.4vw, 84px); text-shadow: 0 4px 24px rgb(var(--k-sup-rgb) / .6); }
.k-hero__contenido p { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; max-width: 52ch; }
.k-hero__contenido > p:not(.k-ceja) { color: var(--k-tx); }
.k-hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
@media (max-width: 760px) {
.fondo--hero {
min-height: min(94vh, 860px);
align-content: end;
padding-block: 140px 44px;
background-image: var(--k-img-390);
background-position: center top;
}
.fondo--hero::before, .fondo-doble.fondo--hero::before { /* en celular el texto va abajo */
background: linear-gradient(0deg, rgb(var(--k-sup-rgb) / .97) 0%, rgb(var(--k-sup-rgb) / .88) 44%, rgb(var(--k-sup-rgb) / .3) 64%, rgb(var(--k-sup-rgb) / 0) 80%);
}
.fondo-doble .k-hero__contenido { justify-items: start; text-align: left; margin-inline: 0; }
.fondo-doble .k-hero__acciones { justify-content: flex-start; }
}
@media (prefers-contrast: more) { .fondo--hero::before { background: rgb(var(--k-sup-rgb) / .9) !important; } }
/* ---------- Sección ---------- */
.fondo--seccion { padding-block: clamp(56px, 8vw, 104px); }
.fondo--seccion::before { /* textura SVG usada como máscara: toma el color del tema */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-color: var(--k-tex);
-webkit-mask: var(--k-textura) 0 0 / var(--k-textura-tam) repeat;
mask: var(--k-textura) 0 0 / var(--k-textura-tam) repeat;
}
.fondo-neutro.fondo--seccion, .fondo-vacio.fondo--seccion {
--k-textura: url("../assets/inertiagg/fondos/texturas/puntos.svg"); --k-textura-tam: 22px 22px;
background-image: radial-gradient(60% 80% at 92% 0%, rgb(157 232 59 / .1), transparent 70%);
}
.fondo-lol.fondo--seccion {
--k-textura: url("../assets/inertiagg/fondos/texturas/reticula-hex.svg"); --k-textura-tam: 56px 97px;
background-image: radial-gradient(55% 70% at 85% 10%, rgb(10 200 185 / .12), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgb(200 170 110 / .12), transparent 70%);
}
.fondo-val.fondo--seccion {
--k-textura: url("../assets/inertiagg/fondos/texturas/reticula.svg"); --k-textura-tam: 96px 96px;
background-image: linear-gradient(115deg, transparent 0 72%, rgb(255 70 85 / .12) 72% 72.6%, transparent 72.6% 74%, rgb(255 70 85 / .07) 74% 77%, transparent 77%);
}
.fondo-doble.fondo--seccion {
--k-textura: url("../assets/inertiagg/fondos/texturas/puntos.svg"); --k-textura-tam: 22px 22px;
background-image: radial-gradient(50% 70% at 0% 0%, rgb(200 170 110 / .14), transparent 70%), radial-gradient(50% 70% at 100% 100%, rgb(255 70 85 / .1), transparent 70%);
}
/* Textura sola en cualquier panel (toma el color de texto del contexto) */
.k-textura { position: relative; isolation: isolate; }
.k-textura::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--k-tex, currentColor); opacity: .6; -webkit-mask: var(--k-textura) 0 0 / var(--k-textura-tam) repeat; mask: var(--k-textura) 0 0 / var(--k-textura-tam) repeat; }
.k-textura--puntos { --k-textura: url("../assets/inertiagg/fondos/texturas/puntos.svg"); --k-textura-tam: 22px 22px; }
.k-textura--hex { --k-textura: url("../assets/inertiagg/fondos/texturas/reticula-hex.svg"); --k-textura-tam: 56px 97px; }
.k-textura--reticula { --k-textura: url("../assets/inertiagg/fondos/texturas/reticula.svg"); --k-textura-tam: 96px 96px; }
.k-textura--ruido { --k-textura: url("../assets/inertiagg/fondos/texturas/ruido.svg"); --k-textura-tam: 240px 240px; }
/* ---------- F5: estado vacío ---------- */
.k-vacio {
position: relative; isolation: isolate; overflow: hidden;
display: grid; place-items: center; text-align: center; gap: 12px;
min-height: 360px; padding: 48px 20px;
color: var(--k-tx); background: var(--k-sup) var(--k-img-1440) center / cover no-repeat;
border: 1px solid var(--k-borde); border-radius: var(--k-radio);
}
.k-vacio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 46% at 50% 50%, rgb(var(--k-sup-rgb) / .86), rgb(var(--k-sup-rgb) / .55) 70%, rgb(var(--k-sup-rgb) / .2)); }
.k-vacio > * { margin: 0; max-width: 46ch; }
.k-vacio p:not(.k-ceja) { color: var(--k-suave); }
@media (max-width: 760px) { .k-vacio { background-image: var(--k-img-390); } }
/* ---------- Líneas de energía (capa opcional) ---------- */
.k-energia {
position: absolute; inset: 0 -12% 0 0; z-index: -1; pointer-events: none;
background: var(--k-ac, var(--k-verde));
-webkit-mask: url("../assets/inertiagg/fondos/texturas/lineas-energia.svg") center / cover no-repeat;
mask: url("../assets/inertiagg/fondos/texturas/lineas-energia.svg") center / cover no-repeat;
opacity: .5;
animation: k-deriva 22s ease-in-out infinite alternate;
}
/* ==========================================================================
ARTE RECORTADO EN EL HERO (como la campaña)
VALORANT: .k-hero-arte--val, y opcional ![]()
(tarjeta 268×640,
a su tamaño o menos). Escritorio: ventana diagonal a la derecha. Celular: arriba.
El arte no se recolorea: solo se recorta y se funde con el fondo en el borde.
========================================================================== */
.k-hero-arte { position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: min(56%, 1000px); pointer-events: none; }
.k-ventana, .k-filo { position: absolute; inset: 0; clip-path: polygon(30% 0, 100% 0, 100% 100%, 8% 100%); }
.k-filo { background: linear-gradient(180deg, var(--k-lol), var(--k-lol-oscuro)); transform: translateX(-14px); }
.k-ventana img { width: 100%; height: 100%; object-fit: cover; object-position: var(--k-foco, 62% 30%); display: block; }
.k-ventana::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--k-sup-rgb) / .8), rgb(var(--k-sup-rgb) / 0) 42%), linear-gradient(0deg, rgb(var(--k-sup-rgb) / .9), rgb(var(--k-sup-rgb) / 0) 34%); }
.k-hero-arte--val .k-ventana, .k-hero-arte--val .k-filo { clip-path: polygon(22% 0, 100% 0, 100% 86%, 92% 100%, 0 100%); }
.k-hero-arte--val .k-filo { background: var(--k-val); transform: translateX(-10px); }
.k-agente {
position: absolute; left: 34%; bottom: 0; width: auto; height: min(88%, 640px); max-width: none;
filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .5));
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}
@media (max-width: 760px) {
.k-hero-arte { left: 0; width: auto; bottom: auto; height: 56%; }
.k-ventana, .k-filo { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
.k-filo { transform: translateY(8px); }
.k-hero-arte--val .k-ventana, .k-hero-arte--val .k-filo { clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 86%, 0 86%); }
.k-ventana::after { background: linear-gradient(0deg, rgb(var(--k-sup-rgb) / 1), rgb(var(--k-sup-rgb) / 0) 45%); }
.k-agente { left: auto; right: 4%; height: min(100%, 420px); }
}
/* ==========================================================================
MARCO PARA ARTE COMPLETO (sin recorte)
![]()
…
Arte completo, a su proporción y nunca más grande que su tamaño natural.
El degradado vive en ::before y solo pinta el anillo (máscara).
========================================================================== */
.arte-marco {
position: relative; isolation: isolate; margin: 0;
width: fit-content; max-width: 100%;
padding: var(--k-marco); display: grid; gap: 10px;
background: var(--k-panel, #11141C);
border-radius: calc(var(--k-radio) + 2px);
box-shadow: var(--k-sombra), 0 0 42px -14px color-mix(in srgb, var(--k-ac, var(--k-verde)) 55%, transparent);
transition: box-shadow .35s var(--k-curva);
}
.arte-marco img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 4px; }
.arte-marco::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
padding: calc(var(--k-marco) - 4px); border-radius: inherit;
background: linear-gradient(140deg, var(--k-ac), color-mix(in srgb, var(--k-ac) 15%, transparent) 45%, color-mix(in srgb, var(--k-ac) 15%, transparent) 60%, var(--k-ac));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.arte-marco figcaption { font: 500 12px/1.4 var(--k-mono); letter-spacing: .06em; color: var(--k-suave); padding: 2px 2px 0; }
.arte-marco:hover { box-shadow: var(--k-sombra), 0 0 56px -10px color-mix(in srgb, var(--k-ac) 75%, transparent); }
.arte-marco--lol { border-radius: 4px; outline: 1px solid color-mix(in srgb, var(--k-ac) 50%, transparent); outline-offset: 5px; }
.arte-marco--lol::after {
content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; z-index: 2;
transform: translateX(-50%) rotate(45deg); background: var(--k-panel); border: 1.5px solid var(--k-ac);
box-shadow: 0 0 0 2px var(--k-panel), 0 0 10px var(--k-lol-hex);
}
.arte-marco--lol img { border-radius: 2px; }
.arte-marco--val {
--k-corte: 14px; /* menor que 2 × --k-marco: el corte no toca el arte */
border-radius: 0; box-shadow: none; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .35));
clip-path: polygon(var(--k-corte) 0, 100% 0, 100% calc(100% - var(--k-corte)), calc(100% - var(--k-corte)) 100%, 0 100%, 0 var(--k-corte));
border-left: 4px solid var(--k-val); padding-left: calc(var(--k-marco) - 2px);
}
.arte-marco--val::before { border-radius: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--k-tx) 45%, transparent), transparent 35%, transparent 65%, var(--k-val)); }
.arte-marco--val img { border-radius: 0; }
.arte-marco--val:hover { box-shadow: none; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .35)) drop-shadow(0 0 14px rgb(255 70 85 / .35)); }
.arte-marco--neutro::after {
content: ""; position: absolute; right: 14px; bottom: -3px; width: 64px; height: 6px; z-index: 2;
background: linear-gradient(90deg, var(--k-verde) 0 30%, transparent 30% 40%, var(--k-ambar) 40% 48%, transparent 48% 56%, var(--k-verde) 56%);
transform: skewX(-31deg);
}
/* ==========================================================================
TARJETA DE JUEGO
Portada (arte recortado, texto encima, con más impacto):
…
Enmarcada (arte completo): figure.arte-marco + .tarjeta-juego__cuerpo
========================================================================== */
.tarjeta-juego {
position: relative; isolation: isolate;
display: grid; align-content: start; justify-items: center; gap: 18px;
padding: 18px 18px 22px; min-width: 0;
color: var(--k-tx); background: var(--k-panel);
border: 1px solid var(--k-borde); border-radius: var(--k-radio); overflow: hidden;
transition: transform .35s var(--k-curva), border-color .35s var(--k-curva), box-shadow .35s var(--k-curva);
}
.tarjeta-juego::before { /* textura del juego, con el color del tema */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
background-color: var(--k-tex);
-webkit-mask: var(--k-textura, url("../assets/inertiagg/fondos/texturas/puntos.svg")) 0 0 / var(--k-textura-tam, 22px 22px) repeat;
mask: var(--k-textura, url("../assets/inertiagg/fondos/texturas/puntos.svg")) 0 0 / var(--k-textura-tam, 22px 22px) repeat;
}
.tarjeta-juego::after { /* filo superior con destello */
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--k-ac) 40%, var(--k-ac) 60%, transparent) -100% 0 / 60% 100% no-repeat, color-mix(in srgb, var(--k-ac) 45%, transparent);
}
.tarjeta-juego:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--k-ac) 60%, var(--k-borde)); box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--k-ac) 45%, transparent); }
.tarjeta-juego:hover::after { animation: k-barrido 1.1s var(--k-curva) forwards; }
.tarjeta-juego__cuerpo { display: grid; gap: 10px; width: 100%; align-content: start; }
.tarjeta-juego__titulo { margin: 0; font: 900 clamp(22px, 2.4vw, 28px)/1 var(--k-display); font-stretch: 125%; text-transform: uppercase; color: var(--k-tx); }
.tarjeta-juego__texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--k-suave); }
.tarjeta-juego__datos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 6px; padding: 0; list-style: none; font: 500 12.5px/1.3 var(--k-mono); color: var(--k-tx); }
.tarjeta-juego__datos li::before { content: "▸ "; color: var(--k-ac-tx); }
.tarjeta-juego--lol { --k-textura: url("../assets/inertiagg/fondos/texturas/reticula-hex.svg"); --k-textura-tam: 56px 97px; }
.tarjeta-juego--val { --k-textura: url("../assets/inertiagg/fondos/texturas/reticula.svg"); --k-textura-tam: 96px 96px; border-radius: 0; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
/* Portada: el arte llena la parte de arriba, recortado en diagonal, y el título se monta encima */
.tarjeta-juego--portada { padding: 0 0 22px; gap: 0; justify-items: stretch; }
.tarjeta-juego__portada { position: relative; aspect-ratio: var(--k-proporcion, 4 / 3); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); }
.tarjeta-juego--val .tarjeta-juego__portada { clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 14% 90%, 0 90%); }
.tarjeta-juego__portada img { width: 100%; height: 100%; object-fit: cover; object-position: var(--k-foco, 50% 25%); display: block; transition: transform .6s var(--k-curva); }
.tarjeta-juego__portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--k-sup-rgb) / .97) 0%, rgb(var(--k-sup-rgb) / .85) 26%, rgb(var(--k-sup-rgb) / .3) 50%, rgb(var(--k-sup-rgb) / 0) 66%); }
.tarjeta-juego--portada:hover .tarjeta-juego__portada img { transform: scale(1.05); }
.tarjeta-juego--portada .tarjeta-juego__cuerpo { padding-inline: 20px; margin-top: -58px; position: relative; z-index: 2; }
.tarjeta-juego--portada .k-ceja { text-shadow: 0 1px 8px rgb(var(--k-sup-rgb) / .95), 0 0 2px rgb(var(--k-sup-rgb)); }
.tarjeta-juego--portada .tarjeta-juego__titulo { font-size: clamp(26px, 3vw, 34px); text-shadow: 0 2px 14px rgb(var(--k-sup-rgb) / .9); }
.tarjeta-juego--portada .tarjeta-juego--lol, .tarjeta-juego--portada.tarjeta-juego--lol { background: var(--k-sup); }
.tarjeta-juego--portada.tarjeta-juego--val, .tarjeta-juego--portada.tarjeta-juego--neutro { background: var(--k-sup); }
@media (min-width: 760px) {
.tarjeta-juego--horizontal { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 28px; padding: 22px 28px 22px 22px; }
}
/* ==========================================================================
SEPARADORES
========================================================================== */
.separador {
height: 24px; margin-block: clamp(32px, 6vw, 64px);
background:
var(--k-ornamento, url("../assets/inertiagg/fondos/separadores/ornamento-neutro.svg")) center / 120px 24px no-repeat,
linear-gradient(90deg, transparent, color-mix(in srgb, var(--k-ac, var(--k-verde)) 75%, transparent) 25%, color-mix(in srgb, var(--k-ac, var(--k-verde)) 75%, transparent) 75%, transparent) center / 100% 1px no-repeat;
}
.separador--lol { --k-ornamento: url("../assets/inertiagg/fondos/separadores/ornamento-lol.svg"); }
.separador--val { --k-ornamento: url("../assets/inertiagg/fondos/separadores/ornamento-val.svg"); }
.k-corte { position: relative; display: block; height: clamp(28px, 5vw, 72px); background: var(--k-corte-desde, var(--k-n-sup)); }
.k-corte::before {
content: ""; position: absolute; inset: 0; background: var(--k-corte-hacia, var(--k-n-panel));
-webkit-mask: var(--k-corte-forma) 0 0 / 100% 100% no-repeat; mask: var(--k-corte-forma) 0 0 / 100% 100% no-repeat;
}
.k-corte--diagonal { --k-corte-forma: url("../assets/inertiagg/fondos/separadores/corte-diagonal.svg"); }
.k-corte--escalon { --k-corte-forma: url("../assets/inertiagg/fondos/separadores/corte-escalon.svg"); }
.k-corte--marca { /* las tres franjas de la marca cruzando la página */
height: 14px;
background: linear-gradient(90deg, var(--k-verde) 0 62%, transparent 62% 64%, var(--k-ambar) 64% 66%, transparent 66% 68%, var(--k-verde) 68%);
clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.k-corte--marca::before { display: none; }
/* ==========================================================================
MOVIMIENTO (sutil). Todo se apaga con prefers-reduced-motion.
========================================================================== */
.k-aparece { animation: k-entrada .8s var(--k-curva) both; animation-delay: var(--k-retraso, 0s); }
@supports (animation-timeline: view()) {
.k-aparece { animation-timeline: view(); animation-range: entry 0% cover 30%; animation-delay: 0s; }
}
.k-hero-arte .k-ventana img { animation: k-acerca 14s ease-out both; }
@keyframes k-entrada { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes k-deriva { from { transform: translateX(0); } to { transform: translateX(-8%); } }
@keyframes k-barrido { to { background-position: 200% 0, 0 0; } }
@keyframes k-acerca { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.k-aparece, .k-energia, .tarjeta-juego:hover::after, .k-hero-arte .k-ventana img { animation: none !important; }
.k-aparece { opacity: 1; transform: none; }
.tarjeta-juego, .arte-marco, .k-boton, .tarjeta-juego__portada img { transition: none; }
.tarjeta-juego:hover, .k-boton:hover, .tarjeta-juego--portada:hover .tarjeta-juego__portada img { transform: none; }
}
/* ==========================================================================
IDENTIFICAR EL JUEGO (sin logos de Riot ni de los juegos)
Nombre escrito con la tipografía de la marca y el color del juego, más un
emblema PROPIO en SVG (máscara, toma el color del tema). Los logos oficiales
no se usan ni se redibujan (Legal Jibber Jabber §5; decisión de Samuel, 28/10/2026).
League of Legends
========================================================================== */
.k-emblema {
display: inline-block; flex: none;
width: var(--k-emblema-tam, 40px); height: var(--k-emblema-tam, 40px);
background: var(--k-ac-tx, currentColor);
-webkit-mask: var(--k-emblema) center / contain no-repeat; mask: var(--k-emblema) center / contain no-repeat;
}
.k-emblema--lol { --k-emblema: url("../assets/inertiagg/emblemas/emblema-lol.svg"); background: var(--k-l-ac-tx); }
.k-emblema--val { --k-emblema: url("../assets/inertiagg/emblemas/emblema-val.svg"); background: var(--k-v-ac-tx); }
.k-emblema--inertia { --k-emblema: url("../assets/inertiagg/emblemas/emblema-inertia.svg"); background: var(--k-verde); }
.k-juego { display: inline-flex; align-items: center; gap: .55em; --k-emblema-tam: 1.9em; font: 900 var(--k-juego-tam, 15px)/1 var(--k-display); font-stretch: 125%; letter-spacing: .04em; text-transform: uppercase; }
.k-juego--lol { color: var(--k-l-ac-tx); } /* #C8AA6E en oscuro; #785A28 en claro (AA) */
.k-juego--val { color: var(--k-v-ac-tx); } /* #FF4655 en oscuro; #B3303C en claro (AA) */
.k-juego--grande { --k-juego-tam: clamp(19px, 2.2vw, 24px); } /* 19 px bold o más = texto grande (AA 3:1) */
.k-hero__contenido .k-juego { text-shadow: 0 2px 14px rgb(var(--k-sup-rgb) / .95), 0 0 2px rgb(var(--k-sup-rgb) / .8); }
/* Selector de juego: enlaces o botones con aria-current / aria-pressed */
.k-selector-juego { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.k-selector-juego a, .k-selector-juego button {
display: inline-flex; align-items: center; gap: .55em; --k-emblema-tam: 26px;
padding: 10px 16px 10px 12px; border-radius: 6px; cursor: pointer; text-decoration: none;
font: 900 14px/1 var(--k-display); font-stretch: 125%; letter-spacing: .04em; text-transform: uppercase;
color: var(--k-n-tx); background: var(--k-n-panel); border: 1.5px solid var(--k-n-borde);
transition: border-color .2s var(--k-curva), transform .2s var(--k-curva);
}
.k-selector-juego a:hover, .k-selector-juego button:hover { transform: translateY(-1px); }
.k-selector-juego .k-juego--lol[aria-current], .k-selector-juego .k-juego--lol[aria-pressed="true"] { border-color: var(--k-l-ac-tx); box-shadow: inset 0 -3px 0 var(--k-lol); }
.k-selector-juego .k-juego--val[aria-current], .k-selector-juego .k-juego--val[aria-pressed="true"] { border-color: var(--k-v-ac-tx); box-shadow: inset 0 -3px 0 var(--k-val); }
.k-selector-juego a:focus-visible, .k-selector-juego button:focus-visible { outline: 2px solid var(--k-verde); outline-offset: 3px; }