/* ============================================================
OLTS-JKA — hoja de estilos principal
Fusión: estilos originales + efecto 3D Hero con vídeo
============================================================ */
/* ── Google Fonts (añade en el de tu PHP si no las tienes ya) ──
────────────────────────────────────────────────────────────────── */
/* ============================================================
1. VARIABLES & RESET
============================================================ */
.olts-jka-wrapper {
--sith-red: #c0392b;
--sith-crimson:#8b0000;
--sith-dark: #1a0000;
--saber-blue: #4fc3f7;
--saber-red: #cd0000;
--gold: #fff;
--gold-dim: #c49a10;
--dark-bg: #080810;
--dark-panel: #0e0e1a;
--dark-card: #12121f;
--dark-border: #1e1e35;
--text-primary: #e8e4d0;
--text-secondary: #9a96b0;
--text-muted: #55526a;
/* SF6 palette */
--sf-orange: #ff6b1a; /* naranja icónico SF6 */
--sf-orange2: #e55a0c; /* hover */
--sf-yellow: #ffd23f; /* acento amarillo */
--sf-ink: #1a0a00; /* negro tinta */
--sf-grunge: #2a1505; /* fondo grunge cálido */
/* Valorant palette*/
--val-red: #ff4655; /* rojo Valorant */
--val-red2: #bd3944; /* rojo oscuro hover */
--val-white: #ece8e1; /* blanco cálido Valorant */
--val-teal: #00b4d8; /* acento teal agentes */
/* colores por rango */
--rank-council: #f5c518;
--rank-master: #c0392b;
--rank-keeper: #9b59b6;
--rank-lord: #00e5ff;
--rank-warrior: #2ecc71;
--rank-adept: #e67e22;
--rank-norank: #50506a;
background: var(--dark-bg);
color: var(--text-primary);
font-family: 'Rajdhani', sans-serif;
font-size: 17px;
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
/*cursor: none;*/
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ============================================================
2. CURSOR PERSONALIZADO
============================================================ */
/*.cursor {
width: 20px; height: 20px;
border: 2px solid var(--saber-red);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.15s ease, border-color 0.2s, width 0.2s, height 0.2s;
transform: translate(-50%, -50%);
}
.cursor-dot {
width: 10px; height: 10px;
background: var(--saber-red);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
}*/
/* ============================================================
3. STARFIELD
============================================================ */
.starfield {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.starfield::before, .starfield::after {
content: '';
position: absolute;
width: 2px; height: 2px;
background: white;
border-radius: 50%;
box-shadow:
120px 40px rgba(255,255,255,0.8), 250px 180px rgba(255,255,255,0.5),
400px 60px rgba(255,255,255,0.9), 550px 140px rgba(255,255,255,0.4),
700px 90px rgba(255,255,255,0.7), 900px 200px rgba(255,255,255,0.6),
80px 320px rgba(255,255,255,0.5), 330px 400px rgba(255,255,255,0.8),
600px 350px rgba(255,255,255,0.4), 850px 420px rgba(255,255,255,0.7),
1100px 80px rgba(255,255,255,0.6), 1250px 300px rgba(255,255,255,0.5),
1400px 150px rgba(255,255,255,0.8), 1550px 450px rgba(255,255,255,0.4),
50px 600px rgba(255,255,255,0.6), 200px 750px rgba(255,255,255,0.5),
450px 680px rgba(255,255,255,0.7), 700px 800px rgba(255,255,255,0.4),
950px 720px rgba(255,255,255,0.8), 1200px 850px rgba(255,255,255,0.3),
150px 900px rgba(255,255,255,0.6), 380px 980px rgba(255,255,255,0.5),
620px 1050px rgba(255,255,255,0.7), 880px 1100px rgba(255,255,255,0.4),
1300px 600px rgba(255,255,255,0.8), 1480px 780px rgba(255,255,255,0.5),
1600px 950px rgba(255,255,255,0.6), 1750px 250px rgba(255,255,255,0.7),
1900px 650px rgba(255,255,255,0.4), 30px 1200px rgba(255,255,255,0.5);
animation: twinkle 4s infinite alternate;
}
.starfield::after {
width: 1px; height: 1px;
box-shadow:
75px 25px rgba(79,195,247,0.6), 310px 110px rgba(255,255,255,0.4),
520px 280px rgba(245,197,24,0.3), 760px 190px rgba(255,255,255,0.5),
1020px 310px rgba(79,195,247,0.4), 1180px 450px rgba(255,255,255,0.6),
1370px 220px rgba(255,255,255,0.3), 1620px 390px rgba(245,197,24,0.2),
280px 520px rgba(255,255,255,0.5), 490px 610px rgba(79,195,247,0.3),
730px 580px rgba(255,255,255,0.6), 1010px 490px rgba(255,255,255,0.4),
1240px 700px rgba(245,197,24,0.3), 1500px 620px rgba(255,255,255,0.5);
animation: twinkle 6s infinite alternate-reverse;
}
@keyframes twinkle {
0% { opacity: 0.4; }
100% { opacity: 1; }
}
/* ============================================================
4. NAV
============================================================ */
.olts-jka-wrapper nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 0 60px;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(8,8,16,0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(79,195,247,0.15);
}
.nav-logo {
font-family: 'Cinzel', serif;
font-size: 22px; font-weight: 900; letter-spacing: 4px;
color: var(--gold); text-decoration: none;
text-shadow: 0 0 20px rgba(245,197,24,0.4);
}
.nav-logo span { color: var(--saber-red); }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
font-family: 'Rajdhani', sans-serif;
font-size: 13px; font-weight: 600; letter-spacing: 2px;
text-transform: uppercase; color: var(--text-secondary);
text-decoration: none; transition: color 0.2s; position: relative;
}
.nav-links a::after {
content: ''; position: absolute;
bottom: -4px; left: 0; width: 0; height: 1px;
background: var(--saber-red); transition: width 0.3s;
}
.nav-links a:hover { color: var(--saber-red); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
padding: 9px 24px; background: transparent;
border: 1px solid var(--saber-red); color: var(--saber-red) !important;
font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; cursor: inherit;
transition: background 0.2s, box-shadow 0.2s !important; text-decoration: none;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
background: rgba(79,195,247,0.1) !important;
box-shadow: 0 0 20px rgba(79,195,247,0.3) !important;
color: var(--saber-red) !important;
}
/* ============================================================
5. HERO — BASE (igual que antes, pero con perspective añadida)
============================================================ */
.hero {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 120px 40px 80px;
overflow: hidden;
/* ► NUEVO: habilita el espacio 3D para el parallax */
perspective: 1200px;
transform-style: preserve-3d;
}
/* Glows decorativos originales — se mantienen pero quedan bajo la escena */
.hero-glow {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 600px; height: 600px;
background: radial-gradient(ellipse, rgba(192,57,43,0.12) 0%, transparent 70%);
pointer-events: none;
/* ► quitamos z-index para que quede bajo el vídeo */
}
.hero-glow-blue {
position: absolute; top: 30%; left: 20%;
width: 400px; height: 400px;
background: radial-gradient(ellipse, rgba(79,195,247,0.06) 0%, transparent 70%);
pointer-events: none;
}
/* ============================================================
5b. HERO — CAPAS 3D NUEVAS ★ BLOQUE AÑADIDO ★
============================================================ */
/* Contenedor raíz de la escena — JS rota esto con el ratón */
.hero-scene {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
transition: transform 0.08s linear;
will-change: transform;
}
/* Vídeo de fondo */
.hero-video-wrap {
position: absolute;
inset: -3%; /* margen para absorber el movimiento */
transform: translateZ(-60px) scale(1.12);
transform-style: preserve-3d;
overflow: hidden;
}
.hero-video-wrap video {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.85;
filter: saturate(0.8) brightness(0.85);
transform: scale(1.02); /* margen extra para que nunca aparezca borde */
will-change: transform;
}
/* Neblina de color que "respira" */
.hero-fog {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 60% at 50% 60%, rgba(192,57,43,0.18) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 20% 30%, rgba(79,195,247,0.07) 0%, transparent 60%);
mix-blend-mode: screen;
animation: fogPulse 8s ease-in-out infinite alternate;
transform: translateZ(-20px);
pointer-events: none;
}
@keyframes fogPulse {
0% { opacity: 0.7; }
50% { opacity: 1.0; }
100% { opacity: 0.6; }
}
/* Viñeta oscura para enmarcar */
.hero-vignette {
position: absolute; inset: 0;
background: radial-gradient(
ellipse 85% 80% at 50% 50%,
transparent 45%,
rgba(8,8,16,0.55) 75%,
rgba(8,8,16,0.92) 100%
);
transform: translateZ(-10px);
pointer-events: none;
}
/* Marco con efecto sable láser */
.hero-frame {
position: absolute; inset: 0;
pointer-events: none;
transform: translateZ(10px);
}
/* Splash de fondo */
.hero-splash{position:absolute;inset:-6%;background:url('https://oltszone.com/wp-content/uploads/2020/01/demacia.jpg') center/cover no-repeat;filter:brightness(.35) saturate(.8);transform:scale(1.06);will-change:transform;transition:transform .1s linear;}
/*Splash valorant*/
.val-hero-splash{position:absolute;inset:-8%;background:url('https://oltszone.com/wp-content/uploads/2020/04/valorant_carga-1.jpg') center/cover no-repeat;filter:brightness(.3) saturate(.75);transform:scale(1.08);will-change:transform;}
/* Capas de color sobre el splash */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,16,.2) 0%,rgba(9,20,40,.5) 50%,rgba(8,8,16,.97) 100%);}
.hero-glow-lol{position:absolute;top:30%;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(11,196,227,.1) 0%,transparent 65%);pointer-events:none;}
/* Viñeta y marco fino */
.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 40%,rgba(8,8,16,.6) 75%,rgba(8,8,16,.95) 100%);pointer-events:none;}
.hero-line-top{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lol-blue),rgba(200,155,60,.6),var(--lol-blue),transparent);box-shadow:0 0 10px rgba(11,196,227,.3);}
.hero-line-bot{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lol-gold),transparent);box-shadow:0 0 10px rgba(200,155,60,.2);}
.frame-top, .frame-bottom, .frame-left, .frame-right { position: absolute; }
.frame-top {
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg,
transparent 0%, var(--saber-red) 20%,
rgba(0,229,255,0.6) 50%, var(--saber-red) 80%, transparent 100%);
box-shadow: 0 0 12px 3px rgba(0,229,255,0.35), 0 0 40px 10px rgba(0,229,255,0.1);
animation: saberFlicker 4s ease-in-out infinite;
}
.frame-bottom {
bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg,
transparent 0%, var(--sith-red) 20%,
rgba(192,57,43,0.6) 50%, var(--sith-red) 80%, transparent 100%);
box-shadow: 0 0 12px 3px rgba(192,57,43,0.35), 0 0 40px 10px rgba(192,57,43,0.1);
animation: saberFlicker 4s ease-in-out infinite 0.5s;
}
.frame-left {
top: 0; bottom: 0; left: 0; width: 2px;
background: linear-gradient(180deg, transparent 0%, var(--saber-red) 25%, var(--sith-red) 75%, transparent 100%);
box-shadow: 0 0 10px 3px rgba(100,150,255,0.2);
animation: saberFlicker 5s ease-in-out infinite 0.3s;
}
.frame-right {
top: 0; bottom: 0; right: 0; width: 2px;
background: linear-gradient(180deg, transparent 0%, var(--sith-red) 25%, var(--saber-red) 75%, transparent 100%);
box-shadow: 0 0 10px 3px rgba(192,57,43,0.2);
animation: saberFlicker 5s ease-in-out infinite 0.8s;
}
@keyframes saberFlicker {
0%,100% { opacity: 1; }
20% { opacity: 0.8; }
21% { opacity: 0.55; }
22% { opacity: 0.9; }
60% { opacity: 1; }
61% { opacity: 0.6; }
62% { opacity: 1; }
}
/* Esquinas doradas del marco */
.hero-corner {
position: absolute; width: 28px; height: 28px; pointer-events: none;
}
.hero-corner::before, .hero-corner::after {
content: ''; position: absolute; background: var(--gold);
}
.hero-corner::before { width: 100%; height: 2px; top: 0; left: 0; box-shadow: 0 0 8px var(--gold); }
.hero-corner::after { width: 2px; height: 100%; top: 0; left: 0; box-shadow: 0 0 8px var(--gold); }
.hero-corner.tl { top: 8px; left: 8px; }
.hero-corner.tr { top: 8px; right: 8px; transform: rotate(90deg); }
.hero-corner.bl { bottom: 8px; left: 8px; transform: rotate(270deg); }
.hero-corner.br { bottom: 8px; right: 8px; transform: rotate(180deg); }
/* Partículas flotantes */
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform: translateZ(5px); }
.hero-particle {
position: absolute; border-radius: 50%;
animation: particleDrift linear infinite; opacity: 0;
}
@keyframes particleDrift {
0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
10% { opacity: 0.8; }
80% { opacity: 0.5; }
100% { transform: translateY(-120px) translateX(var(--pdx)) scale(0.3); opacity: 0; }
}
/* Scanlines */
.hero-scanlines {
position: absolute; inset: 0;
background: repeating-linear-gradient(
0deg, transparent, transparent 2px,
rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px
);
pointer-events: none; transform: translateZ(15px);
mix-blend-mode: multiply;
animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
from { background-position: 0 0; }
to { background-position: 0 200px; }
}
/* Reflejo de suelo */
.hero-reflection {
position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
background: linear-gradient(to top, rgba(8,8,16,0.95) 0%, rgba(8,8,16,0) 100%);
transform: translateZ(-5px); pointer-events: none;
}
/* Luz que sigue al cursor */
.hero-mouse-light {
position: absolute;
width: 600px; height: 600px; border-radius: 50%;
background: radial-gradient(circle, rgba(192,57,43,0.12) 0%, transparent 70%);
pointer-events: none;
transform: translate(-50%, -50%) translateZ(25px);
mix-blend-mode: screen;
/* posición actualizada por JS — sin transition para que sea instantáneo en el rAF */
}
/* Contenido del hero — flota por encima de toda la escena */
.hero-content {
position: relative;
z-index: 10;
display: flex; flex-direction: column; align-items: center;
transform-style: preserve-3d;
transform: translateZ(80px);
}
/* Ripple al hacer click */
@keyframes rippleOut {
0% { width: 0; height: 0; opacity: 1; }
100% { width: 300px; height: 300px; opacity: 0; }
}
/* ============================================================
6. HERO — ELEMENTOS DE CONTENIDO (sin cambios respecto al original)
============================================================ */
.sith-symbol {
width: 90px; height: 90px; margin-bottom: 28px; opacity: 0.9;
animation: float 6s ease-in-out infinite;
filter: drop-shadow(0 0 12px rgba(192,57,43,0.6));
}
@keyframes float {
0%,100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
}
.hero-eyebrow {
font-family: 'Share Tech Mono', monospace; font-size: 14px; letter-spacing: 5px;
color: #fff; text-transform: uppercase; margin-bottom: 20px;
opacity: 0; animation: fadeUp 0.8s 0.3s ease forwards;
text-shadow: 0 0 20px rgba(0,229,255,0.5);
}
.hero-title {
font-family: 'Cinzel', serif; font-size: clamp(48px, 8vw, 92px); font-weight: 900;
line-height: 1.0; letter-spacing: 6px; text-transform: uppercase;
color: var(--text-primary); margin-bottom: 10px;
opacity: 0; animation: fadeUp 0.8s 0.5s ease forwards;
text-shadow: 0 4px 40px rgba(0,0,0,0.8);
}
.hero-title .highlight { color: var(--gold); text-shadow: 0px 0px 10px #000; }
.hero-title .highlight-red { color: var(--sith-red); text-shadow: 0px 0px 10px #000; }
.hero-subtitle {
font-family: 'Cinzel', serif; font-size: clamp(16px, 2.5vw, 22px); font-weight: 400;
letter-spacing: 8px; color: var(--text-secondary); margin-bottom: 28px;
opacity: 0; animation: fadeUp 0.8s 0.7s ease forwards;
}
.divider-line {
width: 120px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
margin: 0 auto 28px; opacity: 0; animation: fadeUp 0.8s 0.9s ease forwards;
}
.hero-desc {
max-width: 560px; font-size: 17px; font-weight: 400;
color: #fff; line-height: 1.8; margin: 0 auto 48px;
opacity: 0; animation: fadeUp 0.8s 1.1s ease forwards;
text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}
.hero-buttons {
display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
opacity: 0; animation: fadeUp 0.8s 1.3s ease forwards;
}
.btn-primary {
padding: 16px 44px; background: var(--sith-red); border: none; color: white;
font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
letter-spacing: 3px; text-transform: uppercase; text-decoration: none; cursor: inherit;
position: relative; overflow: hidden; transition: box-shadow 0.3s, transform 0.2s;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-primary::before {
content: ''; position: absolute; top: 0; left: -100%;
width: 100%; height: 100%; background: rgba(255,255,255,0.1); transition: left 0.3s;
}
.btn-primary:hover { box-shadow: 0 0 36px rgba(192,57,43,0.65); transform: translateY(-2px); cursor: pointer;}
.btn-primary:hover::before { left: 100%; }
.btn-secondary {
padding: 16px 44px; background: transparent; border: 1px solid var(--gold);
color: var(--gold); font-family: 'Rajdhani', sans-serif; font-size: 14px;
font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
text-decoration: none; cursor: inherit; transition: background 0.3s, box-shadow 0.3s;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-secondary:hover { background: rgba(236, 235, 235, 0.18); box-shadow: 0 0 30px rgba(245,197,24,0.25);color: #fff; cursor: pointer;}
.scroll-indicator {
position: absolute; bottom: 40px; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
opacity: 0; animation: fadeUp 0.8s 1.8s ease forwards; z-index: 10;
}
.scroll-indicator span {
font-family: 'Share Tech Mono', monospace; font-size: 14px;
letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase;
}
.scroll-line {
width: 1px; height: 40px;
background: linear-gradient(to bottom, var(--saber-red), transparent);
animation: scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim {
0%,100% { opacity: 0.3; height: 30px; }
50% { opacity: 1; height: 50px; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
7. SECCIONES BASE
============================================================ */
.olts-jka-wrapper section { position: relative; z-index: 1; }
.section-label {
font-family: 'Share Tech Mono', monospace; font-size: 14px; letter-spacing: 4px;
color: var(--saber-red); text-transform: uppercase; margin-bottom: 14px; opacity: 0.8;
}
.section-title {
font-family: 'Cinzel', serif; font-size: clamp(28px, 4vw, 46px); font-weight: 700;
letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary);
line-height: 1.2; margin-bottom: 18px;
}
.section-title .accent { color: var(--gold); }
.section-text { font-size: 18px; color: var(--text-secondary); line-height: 1.8; max-width: 560px; }
/* ============================================================
8. ABOUT
============================================================ */
.about {
padding: 120px 80px; display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center; max-width: 1300px; margin: 0 auto;
}
.about-visual { position: relative; }
.about-emblem { width: 100%; max-width: 420px; aspect-ratio: 1; position: relative; margin: 0 auto; }
.emblem-ring {
position: absolute; inset: 0; border-radius: 50%;
border: 1px solid rgba(245,197,24,0.2); animation: rotate 30s linear infinite;
}
.emblem-ring-2 { inset: 15%; border-color: rgba(192,57,43,0.3); animation: rotate 20s linear infinite reverse; }
.emblem-ring-3 { inset: 28%; border-color: rgba(79,195,247,0.25); border-style: dashed; animation: rotate 15s linear infinite; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.emblem-center {
position: absolute; inset: 5%; display: flex; align-items: center; justify-content: center;
background: rgba(192,57,43,0.05); border-radius: 50%; border: 1px solid rgba(192,57,43,0.3);
}
.emblem-center svg { width: 60%; height: 60%; opacity: 0.9; }
.about-stats { display: flex; gap: 16px; margin-top: 36px; }
.stat-card {
padding: 20px 24px; background: var(--dark-card); border: 1px solid var(--dark-border);
border-top: 2px solid var(--sith-red); position: relative; overflow: hidden;
}
.stat-card::before {
content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 40px;
background: linear-gradient(135deg, transparent 50%, rgba(192,57,43,0.08) 50%);
}
.stat-num { font-family: 'Cinzel', serif; font-size: 38px; font-weight: 900; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.stat-label { font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
/* ============================================================
9. SQUADS
============================================================ */
.squad-icon-area.background-squad-jk {
background: url('/wp-content/uploads/2026/05/jedi-knight-academy-olts.jpg');
background-position: 100%;
background-size: cover;
}
.squad-icon-area.background-squad-sf {
background: url('/wp-content/uploads/2026/05/street-fighter-sixolts.jpg');
background-position: 100%;
background-size: cover;
}
.squad-icon-area.background-squad-val {
background: url('/wp-content/uploads/2026/05/valorant-olts.jpg');
background-position: 100%;
background-size: cover;
}
.squad-icon-area.background-squad-lol {
background: url('/wp-content/uploads/2026/05/league-of-legends-olts.jpg');
background-position: 100%;
background-size: cover;
}
.squads-section { padding: 120px 60px; background: linear-gradient(180deg, transparent, rgba(14,14,26,0.8), transparent); }
.squads-header { text-align: center; margin-bottom: 70px; }
.squads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1300px; margin: 0 auto; }
.squad-card {
background: var(--dark-card); border: 1px solid var(--dark-border); overflow: hidden;
position: relative; cursor: inherit; transition: transform 0.3s, border-color 0.3s;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.squad-card:hover { transform: translateY(-6px); border-color: rgba(245,197,24,0.3); }
.squad-card:hover .squad-glow { opacity: 1; }
.squad-glow { position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity 0.3s; }
.squad-card:nth-child(1) .squad-glow { background: linear-gradient(90deg, var(--sith-red), var(--gold)); }
.squad-card:nth-child(2) .squad-glow { background: linear-gradient(90deg, #e44d26, #f16529); }
.squad-card:nth-child(3) .squad-glow { background: linear-gradient(90deg, var(--saber-red), #1565c0); }
.squad-card:nth-child(4) .squad-glow { background: linear-gradient(90deg, #c9aa71, #785a28); }
.squad-icon-area {
height: 140px; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--dark-border);
font-size: 60px; position: relative; overflow: hidden;
}
.squad-icon-area::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at center, rgba(192,57,43,0.06), transparent 70%);
}
.squad-body { padding: 24px; }
.squad-tag { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 3px; color: var(--sith-red); text-transform: uppercase; margin-bottom: 10px; }
.squad-name { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; color: var(--text-primary); margin-bottom: 10px; }
.squad-desc { font-size: 18px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }
.squad-link {
font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--gold); text-decoration: none;
display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s;
}
.squad-link:hover { gap: 14px;color: #c0392b; }
.squad-link::after { content: '→'; }
/* ============================================================
10. TORNEOS + LEADERBOARD
============================================================ */
.tournaments { padding: 120px 80px; max-width: 1300px; margin: 0 auto; }
.tournaments-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.tournament-feed { display: flex; flex-direction: column; gap: 16px; }
.tournament-item {
display: flex; gap: 20px; align-items: center; padding: 20px 24px;
background: var(--dark-card); border: 1px solid var(--dark-border); border-left: 3px solid var(--sith-red);
transition: border-color 0.2s, background 0.2s;
}
.tournament-item:hover { background: rgba(192,57,43,0.04); border-color: var(--sith-red); }
.tournament-date { text-align: center; min-width: 50px; }
.tournament-date .day { font-family: 'Cinzel', serif; font-size: 28px; font-weight: 900; color: var(--gold); line-height: 1; }
.tournament-date .month { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; }
.tournament-info { flex: 1; }
.tournament-game { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 3px; color: var(--saber-red); text-transform: uppercase; margin-bottom: 4px; }
.tournament-name { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.tournament-meta { font-size: 13px; color: var(--text-muted); }
.tournament-badge { padding: 5px 12px; font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid; }
.badge-open { color: #4caf50; border-color: rgba(76,175,80,0.3); background: rgba(76,175,80,0.05); }
.badge-soon { color: var(--gold); border-color: rgba(245,197,24,0.3); background: rgba(245,197,24,0.05); }
.badge-closed { color: var(--text-muted); border-color: var(--dark-border); }
.leaderboard { background: var(--dark-card); border: 1px solid var(--dark-border); overflow: hidden; }
.leaderboard-header { padding: 20px 24px; border-bottom: 1px solid var(--dark-border); display: flex; align-items: center; justify-content: space-between; }
.leaderboard-title { font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.leaderboard-row { display: flex; align-items: center; padding: 14px 24px; gap: 16px; border-bottom: 1px solid rgba(30,30,53,0.5); transition: background 0.2s; }
.leaderboard-row:hover { background: rgba(255,255,255,0.02); }
.rank { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700; min-width: 30px; }
.rank-1 { color: var(--gold); } .rank-2 { color: #c0c0c0; } .rank-3 { color: #cd7f32; } .rank-other { color: var(--text-muted); }
.player-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; }
.player-info { flex: 1; }
.player-name { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.player-role { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; }
.player-score { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--saber-red); }
/* ============================================================
11. COMMUNITY CTA
============================================================ */
.community { padding: 120px 60px; text-align: center; position: relative; overflow: hidden; }
.community::before {
content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 800px; height: 400px; background: radial-gradient(ellipse, rgba(192,57,43,0.08) 0%, transparent 60%); pointer-events: none;
}
.community-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.community-quote {
font-family: 'Cinzel', serif; font-size: clamp(20px, 3vw, 32px); font-weight: 400; font-style: italic;
color: var(--text-secondary); line-height: 1.5; margin-bottom: 50px; position: relative;
}
.community-quote::before, .community-quote::after {
content: '"'; color: var(--sith-red); font-size: 80px; line-height: 0; position: absolute; opacity: 0.3;
}
.community-quote::before { top: 30px; left: -20px; }
.community-quote::after { bottom: -20px; right: -10px; }
.social-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.social-btn {
padding: 13px 28px; border: 1px solid var(--dark-border); background: var(--dark-card);
color: var(--text-secondary); font-family: 'Rajdhani', sans-serif; font-size: 13px;
font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
cursor: inherit; display: flex; align-items: center; gap: 10px;
transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.social-btn:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 15px rgba(245,197,24,0.1); }
.social-icon { font-size: 18px; }
/* ============================================================
12. FOOTER
============================================================ */
.olts-jka-wrapper footer {
padding: 40px 80px; border-top: 1px solid var(--dark-border);
display: flex; justify-content: space-between; align-items: center;
position: relative; z-index: 1;
}
.footer-logo { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 900; letter-spacing: 4px; color: var(--gold); }
.footer-tagline { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase; margin-top: 4px; }
.footer-links { display: flex; gap: 30px; list-style: none; }
.footer-links a { font-size: 12px; letter-spacing: 1px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--text-secondary); }
.footer-copy { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--text-muted); }
/* ============================================================
13. ORNAMENTOS
============================================================ */
.ornament { display: flex; align-items: center; gap: 20px; max-width: 400px; margin: 24px 0; }
.ornament-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--dark-border)); }
.ornament-line.flip { background: linear-gradient(90deg, var(--dark-border), transparent); }
.ornament-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); opacity: 0.6; }
.saber-left, .saber-right {
position: absolute; top: 50%; width: 3px; height: 200px;
transform: translateY(-50%); border-radius: 2px; opacity: 0.15;
}
.saber-left { left: 40px; background: linear-gradient(to bottom, transparent, var(--saber-red), transparent); }
.saber-right { right: 40px; background: linear-gradient(to bottom, transparent, var(--sith-red), transparent); }
/* ============================================================
14. SCROLL REVEAL
============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ============================================================
15. RESPONSIVE
============================================================ */
@media (max-width: 900px) {
.olts-jka-wrapper nav { padding: 0 24px; }
.olts-jka-wrapper section {position: relative;z-index: 1;padding: 30px 10px;}
.nav-links { display: none; }
.about { grid-template-columns: 1fr; padding: 0px 0px; gap: 50px; }
.tournaments-layout { grid-template-columns: 1fr; }
.tournaments { padding: 80px 30px; }
.squads-section { padding: 80px 30px; }
.community { padding: 80px 30px; }
.olts-jka-wrapper footer { flex-direction: column; gap: 20px; padding: 40px 30px; text-align: center; }
.footer-links { justify-content: center; }
/* El efecto 3D del hero se desactiva en móvil — demasiado costoso y el gyroscope no compensa */
.hero-scene { transform: none !important; transition: none !important; }
.hero-video-wrap video { transform: scale(1.04) !important; }
.hero-frame, .hero-scanlines, .hero-mouse-light { display: none; }
.hero-content { transform: none !important; }
.hero-title {margin-bottom: 20px;}
.hero-eyebrow {
font-family: 'Share Tech Mono',monospace;
font-size: 12px!important;
letter-spacing: 0px;
color: var(--saber-cyan);
text-transform: uppercase;
margin-bottom: 20px;}
.scroll-indicator {display:none;}
.stat-card {
padding: 15px 10px;
background: var(--dark-card);
border: 1px solid var(--dark-border);
border-top: 2px solid var(--sith-red);
position: relative;
overflow: hidden;}
.stat-card {padding: 15px 10px;}
}
/*******************QUIENES SOMOS **********************/
.hero-glow-b{position:absolute;top:25%;left:10%;width:340px;height:340px;background:radial-gradient(ellipse,rgba(79,195,247,.05) 0%,transparent 70%);pointer-events:none;}
.hero-glow-r{position:absolute;top:30%;right:8%;width:280px;height:280px;background:radial-gradient(ellipse,rgba(192,57,43,.06) 0%,transparent 70%);pointer-events:none;}
.saber-l,.saber-r{position:absolute;top:50%;width:3px;height:280px;transform:translateY(-50%);border-radius:2px;}
.saber-l{left:60px;background:linear-gradient(to bottom,transparent,rgba(79,195,247,.28),transparent);}
.saber-r{right:60px;background:linear-gradient(to bottom,transparent,rgba(192,57,43,.28),transparent);}
.hero-emblem{width:90px;height:90px;margin-bottom:24px;animation:float 7s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(192,57,43,.55));}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.hero-eyebrow{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:5px;color:var(--saber-cyan);text-transform:uppercase;margin-bottom:18px;opacity:0;animation:fadeUp .8s .3s ease forwards;}
.hero-title{font-family:'Cinzel',serif;font-size:clamp(42px,7vw,86px);font-weight:900;line-height:1;letter-spacing:4px;text-transform:uppercase;margin-bottom:8px;opacity:0;animation:fadeUp .8s .5s ease forwards;}
.hero-title em{font-style:normal;color:var(--sith-red);text-shadow:0 0 28px rgba(192,57,43,.5);}
.hero-title strong{color:var(--gold);text-shadow:0 0 28px rgba(245,197,24,.4);}
.hero-sub{font-family:'Cinzel',serif;font-size:clamp(13px,2vw,18px);letter-spacing:8px;color:var(--text-secondary);margin-bottom:26px;opacity:0;animation:fadeUp .8s .7s ease forwards;}
.divider{width:100px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 24px;opacity:0;animation:fadeUp .8s .9s ease forwards;}
.hero-lead{max-width:580px;font-size:17px;color:var(--text-secondary);line-height:1.85;margin:0 auto 40px;opacity:0;animation:fadeUp .8s 1.1s ease forwards;}
.hero-stats{display:flex;gap:0;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .8s 1.3s ease forwards;}
.hstat{padding:22px 44px;text-align:center;border-right:1px solid var(--dark-border);}
.hstat:last-child{border-right:none;}
.hstat-num{font-family:'Cinzel',serif;font-size:40px;font-weight:900;color:var(--gold);line-height:1;text-shadow:0 0 20px rgba(245,197,24,.3);}
.hstat-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;margin-top:4px;}
.scroll-cue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp .8s 1.8s ease forwards;}
.scroll-cue span{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;}
.scroll-line{width:1px;height:36px;background:linear-gradient(to bottom,var(--saber-cyan),transparent);animation:scrlAnim 2s ease-in-out infinite;}
@keyframes scrlAnim{0%,100%{opacity:.3;height:28px}50%{opacity:1;height:46px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* ─── FUNDACIÓN — split layout ─── */
.fundacion{padding:110px 80px;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;max-width:1340px;margin:0 auto;}
.fund-visual{position:relative;display:flex;align-items:center;justify-content:center;}
.fund-bg-text{position:absolute;font-family:'Cinzel',serif;font-size:200px;font-weight:900;color:rgba(192,57,43,.04);line-height:1;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;letter-spacing:-10px;}
.fund-card{background:var(--dark-card);border:1px solid var(--dark-border);padding:40px;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));max-width:380px;width:100%;}
.fund-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sith-red),var(--gold));}
.fund-year{font-family:'Cinzel',serif;font-size:72px;font-weight:900;color:var(--sith-red);line-height:1;text-shadow:0 0 40px rgba(192,57,43,.3);margin-bottom:10px;}
.fund-founders{margin-top:24px;display:flex;gap:14px;}
.founder-pill{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(192,57,43,.06);border:1px solid rgba(192,57,43,.2);}
.founder-avatar{width:32px;height:32px;border-radius:50%;background:rgba(192,57,43,.2);border:1px solid rgba(192,57,43,.4);display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--sith-red);}
.founder-info .fn{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;color:var(--text-primary);}
.founder-info .fl{font-size:11px;color:var(--text-muted);letter-spacing:1px;}
/* ─── TIMELINE ─── */
.timeline-section{padding:80px 0 100px;max-width:1100px;margin:0 auto;position:relative;}
.timeline-section > .section-label,
.timeline-section > .section-title{text-align:center;margin-left:auto;margin-right:auto;}
.timeline-section > .section-title{max-width:600px;}
.tl-spine{position:absolute;left:50%;top:200px;bottom:60px;width:1px;background:linear-gradient(to bottom,var(--sith-red),rgba(192,57,43,.1));transform:translateX(-50%);}
.tl-list{list-style:none;margin-top:60px;position:relative;}
.tl-item{display:grid;grid-template-columns:1fr 60px 1fr;gap:0;margin-bottom:10px;position:relative;align-items:start;}
.tl-item:nth-child(even) .tl-content{grid-column:3;text-align:left;}
.tl-item:nth-child(even) .tl-spacer{grid-column:1;order:-2;}
.tl-item:nth-child(even) .tl-dot-col{order:-1;}
.tl-item:nth-child(odd) .tl-content{grid-column:1;text-align:right;}
.tl-item:nth-child(odd) .tl-spacer{grid-column:3;}
.tl-dot-col{grid-column:2;display:flex;flex-direction:column;align-items:center;padding-top:18px;}
.tl-dot{width:14px;height:14px;border-radius:50%;background:var(--sith-red);border:2px solid var(--dark-bg);box-shadow:0 0 12px rgba(192,57,43,.6);flex-shrink:0;position:relative;z-index:2;}
.tl-dot.gold{background:var(--gold);box-shadow:0 0 14px rgba(245,197,24,.5);}
.tl-dot.cyan{background:var(--saber-cyan);box-shadow:0 0 14px rgba(0,229,255,.5);}
.tl-content{padding:0 30px 40px;}
.tl-year-badge{display:inline-block;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:3px;color:var(--sith-red);text-transform:uppercase;border:1px solid rgba(192,57,43,.3);padding:3px 10px;margin-bottom:10px;}
.tl-year-badge.gold{color:var(--gold);border-color:rgba(245,197,24,.3);}
.tl-year-badge.cyan{color:var(--saber-cyan);border-color:rgba(0,229,255,.3);}
.tl-event-title{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:10px;letter-spacing:1px;}
.tl-event-text{font-size:17px;color:var(--text-secondary);line-height:1.75;}
.tl-event-text strong{color:var(--text-primary);}
.tl-spacer{}
/* ─── JERARQUÍA RANGOS ─── */
.rangos-section{padding:100px 80px;background:linear-gradient(180deg,transparent,rgba(13,13,26,.7),transparent);}
.rangos-inner{max-width:1200px;margin:0 auto;}
.rangos-header{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-bottom:70px;}
.rangos-pyramid{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px;}
.rango-tier{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;}
.rango-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border:1px solid var(--dark-border);background:var(--dark-card);position:relative;transition:border-color .25s,background .25s;cursor:none;}
.rango-bar:hover{border-color:rgba(192,57,43,.35);background:rgba(192,57,43,.04);}
.rango-bar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;}
.rango-bar.tier-1::before{background:var(--gold);}
.rango-bar.tier-2::before{background:var(--sith-red);}
.rango-bar.tier-3::before{background:#7b68ee;}
.rango-bar.tier-4::before{background:#4fc3f7;}
.rango-bar.tier-5::before{background:#4caf50;}
.rango-bar.tier-6::before{background:var(--text-muted);}
.rango-left{display:flex;align-items:center;gap:14px;}
.rango-code{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;color:var(--text-muted);min-width:36px;}
.rango-name{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--text-primary);}
.rango-old{font-size:12px;color:var(--text-muted);margin-left:6px;font-style:italic;}
.rango-desc{font-size:12px;color:var(--text-muted);text-align:right;max-width:200px;}
.rangos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:20px;}
.rango-note{padding:22px 26px;background:var(--dark-card2);border:1px solid var(--dark-border);border-top:2px solid var(--sith-red);}
.rango-note.gold-top{border-top-color:var(--gold);}
.rango-note.cyan-top{border-top-color:var(--saber-cyan);}
.rn-title{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--saber-cyan);text-transform:uppercase;margin-bottom:8px;}
.rn-text{font-size:17px;color:var(--text-secondary);line-height:1.7;}
/* ─── DIPLOMACIA ─── */
.diplomacia{padding:100px 80px;max-width:1340px;margin:0 auto;}
.dipl-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.dipl-quote{margin:30px 0;padding:28px 32px;background:var(--dark-card);border-left:3px solid var(--sith-red);position:relative;}
.dipl-quote::before{content:'"';position:absolute;top:-10px;left:16px;font-family:'Cinzel',serif;font-size:64px;color:var(--sith-red);opacity:.2;line-height:1;}
.dipl-quote p{font-family:'Cinzel',serif;font-size:18px;font-style:italic;color:var(--text-secondary);line-height:1.6;}
.dipl-quote .dq-attr{margin-top:12px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;}
.incidents-list{display:flex;flex-direction:column;gap:14px;margin-top:10px;}
.incident{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--dark-card);border:1px solid var(--dark-border);transition:border-color .2s;}
.incident:hover{border-color:rgba(192,57,43,.3);}
.incident-icon{font-size:20px;flex-shrink:0;margin-top:2px;line-height:1;}
.incident-body .inc-title{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}
.incident-body .inc-text{font-size:17px;color:var(--text-secondary);line-height:1.6;}
.powa-banner{margin-top:40px;padding:30px 36px;background:linear-gradient(135deg,rgba(192,57,43,.08),rgba(8,8,16,0));border:1px solid rgba(192,57,43,.25);position:relative;overflow:hidden;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));}
.powa-banner::after{content:'OLTS';position:absolute;right:-10px;top:50%;transform:translateY(-50%);font-family:'Cinzel',serif;font-size:120px;font-weight:900;color:rgba(192,57,43,.04);pointer-events:none;line-height:1;}
.powa-text{font-family:'Cinzel',serif;font-size:clamp(22px,3vw,34px);font-weight:900;color:var(--text-primary);letter-spacing:4px;}
.powa-text .powa-accent{color:var(--sith-red);}
.powa-sub{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;margin-top:8px;}
.powa-author{margin-top:16px;display:flex;align-items:center;gap:12px;}
.powa-avatar{width:38px;height:38px;border-radius:50%;background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.35);display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:var(--sith-red);}
.powa-name{font-size:14px;font-weight:600;color:var(--text-primary);}
.powa-role{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;color:var(--text-muted);}
/* ─── NORMAS card ─── */
.normas-section{padding:0 80px 100px;max-width:1340px;margin:0 auto;}
.normas-box{background:var(--dark-card2);border:1px solid var(--dark-border);display:grid;grid-template-columns:1fr 2fr;overflow:hidden;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));}
.normas-left{padding:50px 40px;background:rgba(192,57,43,.04);border-right:1px solid var(--dark-border);display:flex;flex-direction:column;justify-content:center;}
.normas-left .nl-icon{font-size:48px;margin-bottom:20px;opacity:.7;}
.normas-right{padding:50px 50px;}
.normas-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.norma-item{display:flex;gap:16px;align-items:flex-start;}
.norma-num{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--sith-red);min-width:28px;padding-top:2px;flex-shrink:0;}
.norma-text{font-size:15px;color:var(--text-secondary);line-height:1.7;}
.norma-text strong{color:var(--text-primary);}
/* ─── CTA ─── */
.cta-section{padding:100px 60px;text-align:center;position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(192,57,43,.07) 0%,transparent 60%);pointer-events:none;}
.cta-inner{max-width:620px;margin:0 auto;position:relative;z-index:1;}
.social-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.social-btn{padding:11px 24px;border:1px solid var(--dark-border);background:var(--dark-card);color:var(--text-secondary);font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;text-decoration:none;cursor:none;display:flex;align-items:center;gap:8px;transition:border-color .2s,color .2s,box-shadow .2s;}
.social-btn:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px rgba(245,197,24,.1);}
.btn-p{padding:14px 42px;background:var(--sith-red);border:none;color:white;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;cursor:none;transition:box-shadow .3s,transform .2s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));display:inline-block;}
.btn-p:hover{box-shadow:0 0 28px rgba(192,57,43,.5);transform:translateY(-2px);}
.btn-s{padding:14px 42px;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;cursor:none;transition:background .3s,box-shadow .3s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));display:inline-block;}
.btn-s:hover{background:rgba(245,197,24,.07);box-shadow:0 0 22px rgba(245,197,24,.2);}
/* ─── Reveal ─── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
/* ─── Responsive ─── */
@media(max-width:960px){
.olts-jka-wrapper nav{padding:0 24px;}.nav-links{display:none;}
.fundacion{grid-template-columns:1fr;padding:80px 28px;gap:50px;}
.timeline-section{padding:80px 24px 80px;}
.tl-spine{left:24px;}
.tl-item{grid-template-columns:0 40px 1fr!important;}
.tl-item:nth-child(odd) .tl-content{grid-column:3!important;text-align:left!important;}
.tl-item:nth-child(even) .tl-content{grid-column:3!important;text-align:left!important;}
.tl-item:nth-child(even) .tl-spacer,.tl-item:nth-child(odd) .tl-spacer{display:none;}
.tl-dot-col{grid-column:2!important;order:0!important;}
.rangos-section{padding:80px 24px;}
.rangos-header{grid-template-columns:1fr;gap:40px;}
.diplomacia{grid-template-columns:1fr;padding:80px 24px;}
.dipl-layout{grid-template-columns:1fr;gap:40px;}
.normas-section{padding:0 24px 80px;}
.normas-box{grid-template-columns:1fr;}
.normas-left{padding:36px 28px;}
.normas-right{padding:36px 28px;}
.cta-section{padding:80px 24px;}
.olts-jka-wrapper footer{flex-direction:column;gap:16px;padding:36px 24px;text-align:center;}
.footer-links{justify-content:center;}
.hero-stats{flex-direction:column;gap:0;}
.hstat{border-right:none;border-bottom:1px solid var(--dark-border);padding:16px 32px;}
.hstat:last-child{border-bottom:none;}
}
/*JKA*/
/* ── Tabs strip (filter) ── */
.tabs-section{padding:50px 60px 0;max-width:1340px;margin:0 auto;}
.tabs-row{display:flex;gap:0;border-bottom:1px solid var(--dark-border);}
.tab-btn{padding:12px 28px;background:transparent;border:none;border-bottom:2px solid transparent;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);cursor:none;transition:color .2s,border-color .2s;margin-bottom:-1px;}
.tab-btn:hover{color:var(--text-secondary);}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold);}
/* ── Maps grid ── */
.maps-section{padding:60px 60px 100px;max-width:1340px;margin:0 auto;}
.maps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
.maps-grid.hidden{display:none;}
/* Map card */
.map-card{background:var(--dark-card);border:1px solid var(--dark-border);overflow:hidden;position:relative;cursor:none;transition:transform .3s,border-color .3s;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));}
.map-card:hover{transform:translateY(-5px);border-color:rgba(192,57,43,.35);}
.map-card:hover .card-glow{opacity:1;}
.card-glow{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sith-red),var(--gold));opacity:0;transition:opacity .3s;}
/* Screenshot carousel */
.card-gallery{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--dark-panel);}
.card-gallery img{width:100%;height:100%;object-fit:initial;position:absolute;top:0;left:0;opacity:0;transition:opacity .5s;}
.card-gallery img.active{opacity:1;}
.gallery-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}
.g-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3);cursor:none;transition:background .2s;}
.g-dot.active{background:var(--gold);}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;background:rgba(0,0,0,.5);border:1px solid var(--dark-border2);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:14px;cursor:none;transition:background .2s;opacity:0;transition:opacity .2s;}
.gallery-nav:hover{background:rgba(0,0,0,.75);color:var(--text-primary);}
.gallery-prev{left:8px;}
.gallery-next{right:8px;}
.card-gallery:hover .gallery-nav{opacity:1;}
/* Audio player */
.card-audio{padding:8px 16px;background:rgba(8,8,16,.6);border-bottom:1px solid var(--dark-border);display:flex;align-items:center;gap:12px;}
.audio-play{width:26px;height:26px;background:var(--sith-red);border:none;border-radius:50%;color:white;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:none;flex-shrink:0;transition:box-shadow .2s;}
.audio-play:hover{box-shadow:0 0 12px rgba(192,57,43,.5);}
.audio-bar{flex:1;height:3px;background:var(--dark-border2);border-radius:2px;overflow:hidden;cursor:none;}
.audio-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--sith-red),var(--gold));transition:width .1s linear;}
.audio-time{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);}
/* Card body */
.card-body{padding:20px 22px;}
.card-tag{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:var(--sith-red);text-transform:uppercase;margin-bottom:8px;}
.card-title{font-family:'Cinzel',serif;font-size:17px;font-weight:700;letter-spacing:1px;color:var(--text-primary);margin-bottom:10px;}
.card-desc{font-size:14px;color:var(--text-secondary);line-height:1.7;}
/* Type badge */
.card-type{position:absolute;top:12px;right:14px;padding:3px 10px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;background:rgba(8,8,16,.75);border:1px solid var(--dark-border2);color:var(--text-muted);}
/* ── Featured card (CRYPT) ── */
.map-card.featured{grid-column:span 2;}
.map-card.featured .card-gallery{aspect-ratio:21/9;}
@media(max-width:700px){.map-card.featured{grid-column:span 1;}.map-card.featured .card-gallery{aspect-ratio:16/9;}}
/* ── Skins section ── */
.skins-section{padding:0 60px 120px;max-width:1340px;margin:0 auto;}
.skins-box{background:var(--dark-card2);border:1px solid var(--dark-border);padding:50px 60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));}
.skin-visual{position:relative;}
.skin-ring-wrap{width:100%;max-width:320px;aspect-ratio:1;margin:0 auto;position:relative;}
.skin-ring{position:absolute;inset:0;border-radius:50%;border:1px solid;}
.skin-ring-1{border-color:rgba(192,57,43,.25);animation:rotate 25s linear infinite;}
.skin-ring-2{inset:12%;border-color:rgba(245,197,24,.2);animation:rotate 18s linear infinite reverse;}
.skin-ring-3{inset:22%;border-color:rgba(79,195,247,.15);border-style:dashed;animation:rotate 12s linear infinite;}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.skin-center{position:absolute;inset:30%;background:rgba(192,57,43,.04);border-radius:50%;border:1px solid rgba(192,57,43,.25);display:flex;align-items:center;justify-content:center;}
.skins-info .section-label{margin-bottom:10px;}
.download-btn{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:15px 36px;background:var(--sith-red);color:white;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;cursor:none;transition:box-shadow .3s,transform .2s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));}
.download-btn:hover{box-shadow:0 0 28px rgba(192,57,43,.5);transform:translateY(-2px);}
.download-btn .dl-icon{font-size:18px;}
.download-note{margin-top:16px;font-size:13px;color:var(--text-muted);line-height:1.7;border-left:2px solid var(--dark-border2);padding-left:14px;}
/* ── Pack download banner ── */
.pack-banner{margin:0 60px 50px;max-width:1220px;background:linear-gradient(135deg,rgba(192,57,43,.07),rgba(8,8,16,0));border:1px solid rgba(192,57,43,.2);padding:28px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));position:relative;z-index:1;}
.pack-text .pack-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:4px;color:var(--saber-cyan);text-transform:uppercase;margin-bottom:6px;}
.pack-text .pack-title{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--text-primary);}
.pack-text .pack-meta{font-size:14px;color:var(--text-muted);margin-top:4px;}
/* Buttons */
.btn-p{padding:14px 40px;background:var(--sith-red);border:none;color:white;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;cursor:none;transition:box-shadow .3s,transform .2s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));}
.btn-p:hover{box-shadow:0 0 28px rgba(192,57,43,.5);transform:translateY(-2px);}
.btn-s{padding:14px 40px;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;cursor:none;transition:background .3s,box-shadow .3s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));margin-top:15px;}
.btn-s:hover{background:rgba(245,197,24,.07);box-shadow:0 0 24px rgba(245,197,24,.2);}
@media screen and (max-width:980px) {
.pack-banner {margin: 0 9px 0px;max-width: 100%;padding: 28px 20px;display: block;}
.tabs-section {padding: 10px 0px 0;max-width: 100%;margin: 0 auto;}
.maps-section {padding: 10px 15px 70px;max-width: 100%;margin: 0 auto;}
.maps-section {padding: 10px 15px 70px;max-width: 100%;margin: 0 auto;}
.skins-box {padding: 20px 5px;display:block;}
.skin-visual {padding-bottom: 20px;}
}
/*LOL*/
/* ═══════════════════════════════════════════════
HERO — Demacia splash con parallax
═══════════════════════════════════════════════ */
.lol-hero{position:relative;z-index:1;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 40px 80px;overflow:hidden;}
/* Splash de fondo */
.lol-hero-splash{position:absolute;inset:-6%;background:url('https://oltszone.com/wp-content/uploads/2020/01/demacia.jpg') center/cover no-repeat;filter:brightness(.35) saturate(.8);transform:scale(1.06);will-change:transform;transition:transform .1s linear;}
/* Capas de color sobre el splash */
.lol-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,16,.2) 0%,rgba(9,20,40,.5) 50%,rgba(8,8,16,.97) 100%);}
.lol-hero-glow-lol{position:absolute;top:30%;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(11,196,227,.1) 0%,transparent 65%);pointer-events:none;}
/* Viñeta y marco fino */
.lol-hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 40%,rgba(8,8,16,.6) 75%,rgba(8,8,16,.95) 100%);pointer-events:none;}
.lol-hero-line-top{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lol-blue),rgba(200,155,60,.6),var(--lol-blue),transparent);box-shadow:0 0 10px rgba(11,196,227,.3);}
.lol-hero-line-bot{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lol-gold),transparent);box-shadow:0 0 10px rgba(200,155,60,.2);}
/* Contenido */
.lol-hero-content{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;}
.lol-hero-squad-badge{display:flex;align-items:center;gap:10px;padding:6px 18px;background:rgba(11,196,227,.07);border:1px solid rgba(11,196,227,.25);margin-bottom:22px;opacity:0;animation:fadeUp .8s .2s ease forwards;}
.lol-squad-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--lol-blue);box-shadow:0 0 8px var(--lol-blue);}
.lol-squad-badge-text{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:4px;color:var(--lol-blue);text-transform:uppercase;}
.lol-hero-eyebrow{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:5px;color:var(--lol-gold);text-transform:uppercase;margin-bottom:18px;opacity:0;animation:fadeUp .8s .35s ease forwards;}
.lol-hero-title{font-family:'Cinzel',serif;font-size:clamp(52px,9vw,106px);font-weight:900;line-height:.95;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;opacity:0;animation:fadeUp .8s .5s ease forwards;}
.lol-hero-title .t1{display:block;color:var(--lol-gold);text-shadow:0 0 50px rgba(200,155,60,.45),0 4px 40px rgba(0,0,0,.9);}
.lol-hero-title .t2{display:block;color:var(--text-primary);font-size:.55em;letter-spacing:12px;text-shadow:0 0 30px rgba(11,196,227,.3);}
.lol-hero-sub{font-family:'Cinzel',serif;font-size:clamp(13px,1.8vw,18px);letter-spacing:8px;color:var(--text-secondary);margin-bottom:26px;opacity:0;animation:fadeUp .8s .65s ease forwards;}
.lol-divider{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--lol-gold),transparent);margin:0 auto 22px;opacity:0;animation:fadeUp .8s .8s ease forwards;}
.lol-hero-desc{max-width:560px;font-size:17px;color:var(--text-secondary);line-height:1.85;margin:0 auto 44px;opacity:0;animation:fadeUp .8s 1s ease forwards;text-shadow:0 2px 12px rgba(0,0,0,.9);}
.lol-hero-desc strong{color:var(--text-primary);}
.lol-hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .8s 1.2s ease forwards;}
/* ═══════════════════════════════════════════════
ABOUT — split layout
═══════════════════════════════════════════════ */
.about-section{padding:110px 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1340px;margin:0 auto;}
/* Visual hexagonal LoL */
.hex-wrap{position:relative;width:320px;height:320px;}
.hex-ring{position:absolute;inset:0;border-radius:50%;border:1px solid;}
.hex-ring-1{border-color:rgba(200,155,60,.25);animation:rotate 30s linear infinite;}
.hex-ring-2{inset:12%;border-color:rgba(11,196,227,.2);animation:rotate 20s linear infinite reverse;}
.hex-ring-3{inset:22%;border-color:rgba(200,155,60,.15);border-style:dashed;animation:rotate 14s linear infinite;}
@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hex-center{position:absolute;inset:32%;background:rgba(11,196,227,.04);border-radius:50%;border:1px solid rgba(11,196,227,.2);display:flex;align-items:center;justify-content:center;}
/* Audio player incrustado en about */
.lol-audio{margin-top:28px;display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--dark-card);border:1px solid var(--dark-border);border-left:2px solid var(--lol-blue);}
.audio-play-btn{width:32px;height:32px;border-radius:50%;background:var(--lol-blue);border:none;color:#000;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:none;flex-shrink:0;transition:box-shadow .2s;font-weight:900;}
.audio-play-btn:hover{box-shadow:0 0 14px rgba(11,196,227,.5);}
.audio-bar-wrap{flex:1;height:3px;background:var(--dark-border2);border-radius:2px;overflow:hidden;cursor:none;}
.audio-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--lol-blue),var(--lol-gold));transition:width .1s linear;}
.audio-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;}
.audio-time{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--lol-blue);min-width:36px;text-align:right;}
/* ═══════════════════════════════════════════════
TACTICS — training grid
═══════════════════════════════════════════════ */
.tactics-section{padding:100px 80px;background:linear-gradient(180deg,transparent,rgba(9,20,40,.35),transparent);}
.tactics-inner{max-width:1340px;margin:0 auto;}
.tactics-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;margin-top:50px;}
/* Schedule card */
.schedule-card{background:var(--dark-card);border:1px solid var(--dark-border);padding:36px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));position:relative;}
.schedule-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--lol-blue),var(--lol-gold));}
.schedule-days{display:flex;gap:10px;margin:20px 0 14px;}
.day-pill{padding:8px 18px;font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--lol-gold);background:rgba(200,155,60,.07);border:1px solid rgba(200,155,60,.25);}
.schedule-time{font-family:'Share Tech Mono',monospace;font-size:28px;font-weight:700;color:var(--text-primary);letter-spacing:2px;}
.schedule-time span{color:var(--lol-blue);}
.schedule-mode{font-size:13px;color:var(--text-muted);margin-top:8px;letter-spacing:1px;}
/* Tactics list */
.tactics-list{display:flex;flex-direction:column;gap:10px;}
.tactic-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--dark-card);border:1px solid var(--dark-border);border-left:2px solid var(--lol-blue);transition:border-color .2s,background .2s;}
.tactic-item:hover{background:rgba(11,196,227,.03);border-color:rgba(11,196,227,.4);}
.tactic-num{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--lol-blue);min-width:24px;}
.tactic-icon{font-size:18px;flex-shrink:0;}
.tactic-text{font-size:15px;font-weight:600;color:var(--text-primary);}
/* ═══════════════════════════════════════════════
MIEMBROS — cards con roles
═══════════════════════════════════════════════ */
.members-section{padding:100px 80px;max-width:1340px;margin:0 auto;}
.members-filter{display:flex;gap:0;border-bottom:1px solid var(--dark-border);margin-bottom:40px;}
.filter-btn{padding:11px 26px;background:transparent;border:none;border-bottom:2px solid transparent;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);cursor:none;transition:color .2s,border-color .2s;margin-bottom:-1px;}
.filter-btn:hover{color:var(--text-secondary);}
.filter-btn.active{color:var(--lol-gold);border-bottom-color:var(--lol-gold);}
.members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.member-card{background:var(--dark-card);border:1px solid var(--dark-border);overflow:hidden;position:relative;cursor:none;transition:transform .25s,border-color .25s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));}
.member-card:hover{transform:translateY(-4px);border-color:rgba(200,155,60,.3);}
.member-card:hover .mc-glow{opacity:1;}
.mc-glow{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--lol-blue),var(--lol-gold));opacity:0;transition:opacity .3s;}
.mc-role-bar{padding:8px 14px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.2);border-bottom:1px solid var(--dark-border);}
.mc-role-icon{font-size:14px;}
.mc-role-name{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;}
.mc-body{padding:16px 18px;}
.mc-alias{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--lol-blue);text-transform:uppercase;margin-bottom:6px;}
.mc-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:10px;line-height:1.2;}
.mc-link{font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--lol-gold);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s;opacity:.7;}
.mc-link:hover{opacity:1;gap:10px;}
.mc-link::after{content:'→';}
.mc-no-link{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1px;color:var(--text-muted);margin-top:4px;}
/* Rank badge */
.mc-rank{position:absolute;top:8px;right:10px;padding:2px 8px;font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:2px;background:rgba(200,155,60,.1);border:1px solid rgba(200,155,60,.2);color:var(--lol-gold);text-transform:uppercase;}
/* ═══════════════════════════════════════════════
VÍDEOS — galería filtrable
═══════════════════════════════════════════════ */
.videos-section{padding:100px 80px;background:linear-gradient(180deg,transparent,rgba(9,20,40,.3),transparent);}
.videos-inner{max-width:1340px;margin:0 auto;}
.videos-filter{display:flex;gap:0;border-bottom:1px solid var(--dark-border);margin-bottom:36px;}
/* reutiliza .filter-btn */
.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.video-card{background:var(--dark-card);border:1px solid var(--dark-border);overflow:hidden;cursor:none;transition:border-color .25s,transform .25s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));position:relative;}
.video-card:hover{transform:translateY(-4px);border-color:rgba(11,196,227,.3);}
.video-card:hover .vc-overlay{opacity:1;}
.vc-wrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;}
.vc-wrap video{width:100%;height:100%;object-fit:cover;display:block;}
.vc-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(9,20,40,.55);opacity:0;transition:opacity .25s;}
.vc-play{width:50px;height:50px;border-radius:50%;background:rgba(11,196,227,.15);border:2px solid var(--lol-blue);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--lol-blue);box-shadow:0 0 20px rgba(11,196,227,.3);}
.vc-tag{position:absolute;top:10px;left:10px;padding:3px 10px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;background:rgba(8,8,16,.75);border:1px solid var(--dark-border);}
.vc-tag.hl{color:var(--lol-gold);border-color:rgba(200,155,60,.3);}
.vc-tag.fl{color:var(--sith-red);border-color:rgba(192,57,43,.3);}
.vc-body{padding:14px 16px;}
.vc-title{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;color:var(--text-secondary);letter-spacing:1px;}
/* ═══════════════════════════════════════════════
LIGA / CHALLONGE
═══════════════════════════════════════════════ */
.liga-section{padding:100px 80px;max-width:1340px;margin:0 auto;}
.liga-card{background:linear-gradient(135deg,rgba(9,20,40,.6),rgba(8,8,16,0));border:1px solid rgba(11,196,227,.2);padding:50px 60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));position:relative;overflow:hidden;}
.liga-card::before{content:'OLTS';position:absolute;right:-20px;top:50%;transform:translateY(-50%);font-family:'Cinzel',serif;font-size:140px;font-weight:900;color:rgba(11,196,227,.03);pointer-events:none;line-height:1;}
.liga-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--lol-blue),var(--lol-gold),var(--lol-blue));}
.liga-text .section-label{margin-bottom:10px;}
.liga-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
/* ═══════════════════════════════════════════════
CTA BOTTOM
═══════════════════════════════════════════════ */
.cta-section{padding:100px 60px;text-align:center;position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(11,196,227,.07) 0%,transparent 60%);pointer-events:none;}
.cta-inner{max-width:620px;margin:0 auto;position:relative;z-index:1;}
.social-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.social-btn{padding:11px 24px;border:1px solid var(--dark-border);background:var(--dark-card);color:var(--text-secondary);font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;text-decoration:none;cursor:none;display:flex;align-items:center;gap:8px;transition:border-color .2s,color .2s,box-shadow .2s;}
.social-btn:hover{border-color:var(--lol-gold);color:var(--lol-gold);box-shadow:0 0 12px rgba(200,155,60,.1);}
/* ═══════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════ */
footer{padding:36px 80px;border-top:1px solid var(--dark-border);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
.footer-logo{font-family:'Cinzel',serif;font-size:17px;font-weight:900;letter-spacing:4px;color:var(--gold);}
.footer-tag{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;margin-top:3px;}
.footer-links{display:flex;gap:28px;list-style:none;}
.footer-links a{font-size:12px;letter-spacing:1px;color:var(--text-muted);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--text-secondary);}
.footer-copy{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);}
/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
/* ═══════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:960px){
nav{padding:0 24px;}.nav-links{display:none;}
.about-section,.tactics-layout,.liga-card{grid-template-columns:1fr;gap:40px;padding-left:28px;padding-right:28px;}
.about-section,.tactics-section,.members-section,.videos-section,.liga-section,.cta-section{padding:80px 24px;}
.hero-stats{flex-direction:column;gap:0;}
.hstat{border-right:none;border-bottom:1px solid var(--dark-border);padding:14px 28px;}
.hstat:last-child{border-bottom:none;}
.members-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
footer{flex-direction:column;gap:16px;padding:36px 24px;text-align:center;}
.footer-links{justify-content:center;}
.liga-card{padding:36px 28px;}
}
/*Valorant*/
/*Hero*/
/* Contenido hero */
.valo-hero-content{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;}
.valo-hero-badge{display:flex;align-items:center;gap:10px;padding:6px 18px;background:rgba(255,70,85,.07);border:1px solid rgba(255,70,85,.25);margin-bottom:22px;opacity:0;animation:fadeUp .8s .2s ease forwards;}
.valo-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--val-red);box-shadow:0 0 8px var(--val-red);animation:badgePulse 2s ease-in-out infinite;}
@keyframes badgePulse{0%,100%{opacity:.6}50%{opacity:1}}
.valo-badge-txt{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:4px;color:var(--val-red);text-transform:uppercase;}
.valo-hero-eyebrow{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:5px;color:var(--text-secondary);text-transform:uppercase;margin-bottom:14px;opacity:0;animation:fadeUp .8s .35s ease forwards;}
/* Logo Valorant SVG inline — tipografía diagonal icónica */
.valo-hero-title{font-family:'Cinzel',serif;font-size:clamp(58px,5vw,118px);font-weight:900;line-height:.9;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;opacity:0;animation:fadeUp .8s .5s ease forwards;}
.valo-hero-title .t-val{display:block;color:var(--val-red);text-shadow:0 0 60px rgba(255,70,85,.4),0 4px 40px rgba(0,0,0,.9);}
.valo-hero-title .t-ant{display:block;color:var(--val-white);font-size:.38em;letter-spacing:16px;text-shadow:0 0 20px rgba(255,255,255,.15);}
.valo-hero-sub{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:6px;color:var(--text-secondary);margin-bottom:24px;opacity:0;animation:fadeUp .8s .65s ease forwards;}
.valo-divider{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--val-red),transparent);margin:0 auto 22px;opacity:0;animation:fadeUp .8s .8s ease forwards;}
.valo-hero-desc{max-width:580px;font-size:17px;color:var(--text-secondary);line-height:1.85;margin:0 auto 44px;opacity:0;animation:fadeUp .8s 1s ease forwards;text-shadow:0 2px 12px rgba(0,0,0,.9);}
.valo-hero-desc strong{color:var(--text-primary);}
.valo-hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .8s 1.2s ease forwards;}
.valo-hero-stats{display:flex;justify-content:center;margin-top:50px;opacity:0;animation:fadeUp .8s 1.5s ease forwards;}
.valo-hstat{padding:18px 40px;text-align:center;border-right:1px solid var(--dark-border);}
.valo-hstat:last-child{border-right:none;}
.valo-hstat-num{font-family:'Cinzel',serif;font-size:34px;font-weight:900;color:var(--val-red);line-height:1;text-shadow:0 0 20px rgba(255,70,85,.35);}
.valo-hstat-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;margin-top:4px;}
.valo-hero-title .t-val{display:block;color:var(--val-red);text-shadow:0 0 60px rgba(255,70,85,.4),0 4px 40px rgba(0,0,0,.9);}
.valo-hero-title .t-ant{display:block;color:var(--val-white);font-size:.38em;letter-spacing:16px;text-shadow:0 0 20px rgba(255,255,255,.15);}
/* Marco val — trazo diagonal esquinas */
.hero-frame-val{position:absolute;inset:0;pointer-events:none;}
.hfv-corner{position:absolute;width:40px;height:40px;}
.hfv-corner::before,.hfv-corner::after{content:'';position:absolute;background:var(--val-red);box-shadow:0 0 8px rgba(255,70,85,.6);}
.hfv-corner::before{width:100%;height:2px;top:0;left:0;}
.hfv-corner::after{width:2px;height:100%;top:0;left:0;}
.hfv-corner.tl{top:16px;left:16px;}
.hfv-corner.tr{top:16px;right:16px;transform:rotate(90deg);}
.hfv-corner.bl{bottom:16px;left:16px;transform:rotate(270deg);}
.hfv-corner.br{bottom:16px;right:16px;transform:rotate(180deg);}
/* línea de escaneo Valorant */
.hero-scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--val-red) 30%,rgba(255,70,85,.4) 50%,var(--val-red) 70%,transparent 100%);box-shadow:0 0 12px rgba(255,70,85,.4);animation:scanDown 6s ease-in-out infinite;top:0;}
@keyframes scanDown{0%{top:10%;opacity:0}10%{opacity:1}90%{opacity:.6}100%{top:90%;opacity:0}}
@media screen and (max-width:980px) {
.valo-hero-badge {padding: 6px 18px;margin-bottom: 45px;margin-top: 45px;}
.hero-eyebrow {max-width: 360px;}
.valo-hero-title {font-size: clamp(36px,5vw,100px);line-height: 1.4;letter-spacing: 5px;}
.scroll-cue {display: none;}
.starting-five {grid-template-columns: repeat(2,1fr)!important;}
.req-grid {display: block!important;}
}
/* ══════════════════════════════════════════
SQUAD — 5 titulares + banco
══════════════════════════════════════════ */
.squad-section{padding:100px 80px;max-width:1340px;margin:0 auto;}
/* 5 titulares en fila destacada */
.starting-five{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:40px 0 50px;}
.s5-card{background:var(--dark-card);border:1px solid var(--dark-border);overflow:hidden;position:relative;cursor:none;transition:transform .25s,border-color .25s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));}
.s5-card:hover{transform:translateY(-5px);border-color:rgba(255,70,85,.35);}
.s5-card:hover .s5-glow{opacity:1;}
.s5-glow{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--val-red),var(--gold));opacity:0;transition:opacity .3s;}
.s5-top{padding:22px 18px 14px;text-align:center;background:rgba(255,70,85,.03);border-bottom:1px solid var(--dark-border);position:relative;}
.s5-role-icon{font-size:32px;display:block;margin-bottom:10px;}
.s5-role{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:3px;color:var(--val-red);text-transform:uppercase;}
.s5-rank-badge{position:absolute;top:8px;right:8px;width:20px;height:20px;background:rgba(255,70,85,.1);border:1px solid rgba(255,70,85,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;}
.s5-body{padding:16px 18px;}
.s5-tag{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:5px;}
.s5-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.2;margin-bottom:10px;}
.s5-status{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:2px;text-transform:uppercase;}
.s5-status.capitan{background:rgba(245,197,24,.07);border:1px solid rgba(245,197,24,.2);color:var(--gold);}
.s5-status.ayudante{background:rgba(255,70,85,.07);border:1px solid rgba(255,70,85,.2);color:var(--val-red);}
.s5-status.member{background:rgba(255,255,255,.03);border:1px solid var(--dark-border2);color:var(--text-muted);}
/* Sub‑section titulo banco */
.bench-header{display:flex;align-items:center;gap:20px;margin-bottom:24px;}
.bench-label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:4px;color:var(--text-muted);text-transform:uppercase;}
.bench-line{flex:1;height:1px;background:var(--dark-border);}
/* Banco en grid compacto */
.bench-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.bench-card{background:var(--dark-card2);border:1px solid var(--dark-border);padding:14px 16px;display:flex;align-items:center;gap:12px;transition:border-color .2s;}
.bench-card:hover{border-color:rgba(255,70,85,.25);}
.bench-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,70,85,.08);border:1px solid rgba(255,70,85,.2);display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:var(--val-red);flex-shrink:0;}
.bench-info .bn{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;color:var(--text-primary);}
.bench-info .br{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;}
/* ══════════════════════════════════════════
REQUISITOS / PRUEBA
══════════════════════════════════════════ */
.requisitos-section{padding:0 80px 100px;max-width:1340px;margin:0 auto;}
.req-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:40px;}
.req-card{padding:30px 28px;background:var(--dark-card);border:1px solid var(--dark-border);position:relative;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));}
.req-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.req-card:nth-child(1)::before{background:linear-gradient(90deg,var(--val-red),var(--val-red2));}
.req-card:nth-child(2)::before{background:linear-gradient(90deg,var(--gold),var(--val-red));}
.req-card:nth-child(3)::before{background:linear-gradient(90deg,var(--val-teal),var(--val-red));}
.req-num{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:var(--val-red);text-transform:uppercase;margin-bottom:12px;}
.req-icon{font-size:32px;margin-bottom:14px;display:block;}
.req-title{font-family:'Cinzel',serif;font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:12px;letter-spacing:1px;}
.req-text{font-size:14px;color:var(--text-secondary);line-height:1.75;}
.req-text strong{color:var(--text-primary);}
/* ══════════════════════════════════════════
STREAMING
══════════════════════════════════════════ */
.streaming-section{padding:100px 80px;background:linear-gradient(180deg,transparent,rgba(20,4,8,.3),transparent);}
.streaming-inner{max-width:1340px;margin:0 auto;}
.streaming-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;}
.stream-card{background:var(--dark-card);border:1px solid var(--dark-border);overflow:hidden;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:border-color .25s,transform .25s;cursor:none;}
.stream-card:hover{border-color:rgba(255,70,85,.3);transform:translateY(-4px);}
.stream-card:hover .sc-glow{opacity:1;}
.sc-glow{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#9146ff,var(--val-red));opacity:0;transition:opacity .3s;}
.sc-header{padding:20px 24px;border-bottom:1px solid var(--dark-border);display:flex;align-items:center;gap:14px;}
.sc-twitch-icon{font-size:24px;color:#9146ff;}
.sc-live-dot{width:8px;height:8px;border-radius:50%;background:#9146ff;box-shadow:0 0 8px #9146ff;animation:badgePulse 2s ease-in-out infinite;}
.sc-name{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--text-primary);}
.sc-handle{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--text-muted);margin-top:2px;}
.sc-body{padding:20px 24px;}
.sc-desc{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:18px;}
.sc-link{font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9146ff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s;}
.sc-link:hover{gap:12px;}
.sc-link::after{content:'→';}
/* ══════════════════════════════════════════
VÍDEOS
══════════════════════════════════════════ */
.videos-section{padding:100px 80px;max-width:1340px;margin:0 auto;}
.videos-filter{display:flex;gap:0;border-bottom:1px solid var(--dark-border);margin-bottom:36px;}
.filter-btn{padding:11px 26px;background:transparent;border:none;border-bottom:2px solid transparent;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);cursor:none;transition:color .2s,border-color .2s;margin-bottom:-1px;}
.filter-btn:hover{color:var(--text-secondary);}
.filter-btn.active{color:var(--val-red);border-bottom-color:var(--val-red);}
.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.video-card{background:var(--dark-card);border:1px solid var(--dark-border);overflow:hidden;cursor:none;transition:border-color .25s,transform .25s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));position:relative;}
.video-card:hover{transform:translateY(-4px);border-color:rgba(255,70,85,.3);}
.vc-wrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;}
.vc-wrap video{width:100%;height:100%;object-fit:cover;display:block;}
.vc-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,4,8,.55);opacity:0;transition:opacity .25s;}
.video-card:hover .vc-overlay{opacity:1;}
.vc-play{width:52px;height:52px;border-radius:50%;background:rgba(255,70,85,.15);border:2px solid var(--val-red);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--val-red);box-shadow:0 0 22px rgba(255,70,85,.3);}
.vc-tag{position:absolute;top:10px;left:10px;padding:3px 10px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;background:rgba(8,8,16,.75);border:1px solid;}
.vc-tag.mk{color:var(--val-red);border-color:rgba(255,70,85,.3);}
.vc-tag.hl{color:var(--gold);border-color:rgba(245,197,24,.3);}
.vc-tag.yl{color:var(--val-teal);border-color:rgba(0,180,216,.3);}
.vc-body{padding:14px 16px;}
.vc-title{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;color:var(--text-secondary);letter-spacing:1px;}
@media screen and (max-width:980px) {
.lol-hero-squad-badge {padding: 6px 18px;margin-bottom: 45px;margin-top: 45px;}
.lol-hero-sub {margin-top: 45px;}
}
/* ============================================================
§SF6 — Street Fighter 6 page
SCOPE: .sf6-page
Todas las clases de esta sección llevan el prefijo sf6-
o están dentro de .sf6-page para no colisionar con ningún
selector global existente (.hero, .btn-p, .filter-btn, etc.)
============================================================ */
/* ── Font adicional para SF6 (añadir en el del template) ──
──────────────────────────────────────────────────────────────── */
/* Variables propias de SF6 — ya están en :root del wrapper */
/* ── Hero SF6 ── */
.sf6-page .hero {
/* Sobreescribe perspective del hero global — no conflicto porque
el hero 3D sólo se usa en la landing principal, no en sf6-page */
perspective: none;
transform-style: flat;
}
.sf6-page .hero-splash {
background: url('https://oltszone.com/wp-content/uploads/2020/09/sfv-arcade-edition.jpg') center/cover no-repeat;
filter: brightness(.25) saturate(.6) hue-rotate(-10deg);
transform: scale(1.08);
}
.sf6-page .hero-overlay {
background: linear-gradient(to bottom, rgba(8,8,16,.1) 0%, rgba(26,10,0,.6) 45%, rgba(8,8,16,.97) 100%);
}
/* Glows específicos SF6 — nombres únicos, no colisionan */
.hero-glow-sf {
position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
width: 900px; height: 500px;
background: radial-gradient(ellipse, rgba(255,107,26,.12) 0%, transparent 60%);
pointer-events: none;
}
.hero-glow-y {
position: absolute; top: 40%; right: 5%;
width: 320px; height: 320px;
background: radial-gradient(ellipse, rgba(255,210,63,.06) 0%, transparent 70%);
pointer-events: none;
}
/* Viñeta SF6 — sobreescribe .hero-vignette sólo dentro de .sf6-page */
.sf6-page .hero-vignette {
background: radial-gradient(ellipse 80% 75% at 50% 50%,
transparent 38%, rgba(8,8,16,.6) 72%, rgba(8,8,16,.97) 100%);
transform: none; /* anula el translateZ del hero 3D */
pointer-events: none;
}
/* Líneas de energía diagonal — clases únicas SF6 */
.hero-slash {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero-slash::before {
content: ''; position: absolute; top: -10%; left: -5%;
width: 4px; height: 130%;
background: linear-gradient(to bottom, transparent, var(--sf-orange), rgba(255,107,26,.3), transparent);
transform: rotate(-12deg);
box-shadow: 0 0 20px rgba(255,107,26,.4);
animation: sf6SlashPulse 4s ease-in-out infinite;
}
.hero-slash::after {
content: ''; position: absolute; top: -10%; right: 8%;
width: 2px; height: 130%;
background: linear-gradient(to bottom, transparent, rgba(255,210,63,.4), transparent);
transform: rotate(-12deg);
box-shadow: 0 0 12px rgba(255,210,63,.2);
animation: sf6SlashPulse 4s ease-in-out infinite .8s;
}
@keyframes sf6SlashPulse { 0%,100%{opacity:.4} 50%{opacity:.9} }
/* Barra de energía superior — clase única */
.hero-energy-bar {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg,
transparent 0%, var(--sf-orange) 20%, var(--sf-yellow) 50%,
var(--sf-orange) 80%, transparent 100%);
box-shadow: 0 0 14px rgba(255,107,26,.5);
animation: sf6EnergyPulse 3s ease-in-out infinite;
}
@keyframes sf6EnergyPulse { 0%,100%{opacity:.7} 50%{opacity:1} }
/* Esquinas biseladas SF6 — .hc es único SF6, no existe en otros módulos */
.hero-corners { position: absolute; inset: 0; pointer-events: none; }
.hc { position: absolute; width: 44px; height: 44px; }
.hc::before, .hc::after {
content: ''; position: absolute;
background: var(--sf-orange);
box-shadow: 0 0 10px rgba(255,107,26,.6);
}
.hc::before { width: 100%; height: 2px; top: 0; left: 0; }
.hc::after { width: 2px; height: 100%; top: 0; left: 0; }
.hc.tl { top: 14px; left: 14px; }
.hc.tr { top: 14px; right: 14px; transform: rotate(90deg); }
.hc.bl { bottom: 14px; left: 14px; transform: rotate(270deg); }
.hc.br { bottom: 14px; right: 14px; transform: rotate(180deg); }
/* Hero content SF6 */
.sf6-page .hero-content {
position: relative; z-index: 5;
display: flex; flex-direction: column; align-items: center;
transform: none; /* anula translateZ del hero 3D */
}
/* Badge SF6 — clase única sf6- */
.sf6-hero-badge {
display: flex; align-items: center; gap: 10px;
padding: 6px 18px;
background: rgba(255,107,26,.07);
border: 1px solid rgba(255,107,26,.28);
margin-bottom: 22px;
opacity: 0; animation: fadeUp .8s .2s ease forwards;
}
.sf6-badge-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--sf-orange); box-shadow: 0 0 8px var(--sf-orange);
animation: sf6BadgePulse 2s ease-in-out infinite;
}
@keyframes sf6BadgePulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.sf6-badge-txt {
font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 4px;
color: var(--sf-orange); text-transform: uppercase;
}
/* Hero eyebrow SF6 — sobreescribe .hero-eyebrow sólo en .sf6-page */
.sf6-page .hero-eyebrow {
color: var(--text-secondary);
}
/* Hero title SF6 — clase única */
.sf6-hero-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(80px, 14vw, 170px);
line-height: .85; letter-spacing: 6px; text-transform: uppercase;
margin-bottom: 10px;
opacity: 0; animation: fadeUp .8s .5s ease forwards;
}
.sf6-hero-title .t-sf {
display: block; color: var(--sf-orange);
text-shadow: 0 0 60px rgba(255,107,26,.5), 0 6px 40px rgba(0,0,0,.9), 4px 4px 0 rgba(26,10,0,.8);
}
.sf6-hero-title .t-6 {
display: block; color: var(--sf-yellow);
font-size: .55em; letter-spacing: 18px;
text-shadow: 0 0 30px rgba(255,210,63,.45);
}
.sf6-hero-title .t-tag {
display: block; font-family: 'Share Tech Mono', monospace;
font-size: .14em; letter-spacing: 8px; color: var(--text-secondary); font-weight: 400;
}
/* Hero sub, divider y desc SF6 — sobreescriben dentro de .sf6-page */
.sf6-page .hero-sub { color: var(--text-secondary); }
.sf6-page .divider { background: linear-gradient(90deg, transparent, var(--sf-orange), transparent); height: 2px; }
.sf6-page .hero-desc strong { color: var(--text-primary); }
/* Hero stats SF6 — clases únicas sf6- */
.sf6-hstat { padding: 18px 40px; text-align: center; border-right: 1px solid var(--dark-border); }
.sf6-hstat:last-child { border-right: none; }
.sf6-hstat-num {
font-family: 'Bebas Neue', sans-serif; font-size: 42px;
color: var(--sf-orange); line-height: 1;
text-shadow: 0 0 20px rgba(255,107,26,.4);
}
.sf6-hstat-label {
font-family: 'Share Tech Mono', monospace; font-size: 9px;
letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase; margin-top: 4px;
}
/* Scroll cue SF6 */
.sf6-page .scroll-cue { z-index: 5; }
.sf6-page .scroll-line {
background: linear-gradient(to bottom, var(--sf-orange), transparent);
}
/* ── Botones SF6 — sobreescriben .btn-p y .btn-s dentro de .sf6-page ── */
.sf6-page .btn-p {
background: var(--sf-orange);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.sf6-page .btn-p:hover {
box-shadow: 0 0 30px rgba(255,107,26,.6);
}
.sf6-page .btn-s {
border-color: var(--sf-yellow);
color: var(--sf-yellow);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.sf6-page .btn-s:hover {
background: rgba(255,210,63,.07);
box-shadow: 0 0 22px rgba(255,210,63,.25);
}
/* ── Sección base SF6 — sobreescriben dentro de .sf6-page ── */
.sf6-page .section-label { color: var(--sf-orange); }
.sf6-page .section-title .a { color: var(--sf-orange); }
.sf6-page .orn-diamond { background: var(--sf-orange); }
/* ── About SF6 ── */
.sf6-about-section {
padding: 110px 80px; display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center; max-width: 1340px; margin: 0 auto;
}
.sf6-about-visual { display: flex; flex-direction: column; align-items: center; gap: 28px; }
/* VS central */
.vs-wrap {
position: relative; width: 300px; height: 300px;
display: flex; align-items: center; justify-content: center;
}
.vs-ring {
position: absolute; inset: 0; border-radius: 50%; border: 1px solid;
animation: sf6Rotate 30s linear infinite;
}
.vs-ring-1 { border-color: rgba(255,107,26,.25); }
.vs-ring-2 { inset: 12%; border-color: rgba(255,210,63,.18); border-style: dashed; animation-duration: 20s; animation-direction: reverse; }
.vs-ring-3 { inset: 22%; border-color: rgba(255,107,26,.1); animation-duration: 14s; }
@keyframes sf6Rotate { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.vs-center { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.vs-text {
font-family: 'Bebas Neue', sans-serif; font-size: 90px; color: var(--sf-orange);
text-shadow: 0 0 30px rgba(255,107,26,.6), 4px 4px 0 rgba(26,10,0,.8); line-height: 1;
}
/* Audio SF6 — clase única */
.sf6-audio {
display: flex; align-items: center; gap: 14px;
padding: 14px 20px; background: var(--dark-card);
border: 1px solid var(--dark-border); border-left: 2px solid var(--sf-orange);
width: 100%; max-width: 340px;
}
.sf6-ap-btn {
width: 32px; height: 32px; border-radius: 50%;
background: var(--sf-orange); border: none; color: white;
font-size: 10px; display: flex; align-items: center; justify-content: center;
cursor: inherit; flex-shrink: 0; font-weight: 900; transition: box-shadow .2s;
}
.sf6-ap-btn:hover { box-shadow: 0 0 14px rgba(255,107,26,.5); }
.sf6-ap-bar-wrap { flex: 1; height: 3px; background: var(--dark-border2); border-radius: 2px; overflow: hidden; }
.sf6-ap-bar-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--sf-orange), var(--sf-yellow));
transition: width .1s linear;
}
.sf6-ap-label {
font-family: 'Share Tech Mono', monospace; font-size: 9px;
letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; white-space: nowrap;
}
.sf6-ap-time {
font-family: 'Share Tech Mono', monospace; font-size: 10px;
color: var(--sf-orange); min-width: 36px; text-align: right;
}
/* ── Dojo — Luchadores ── */
.dojo-section { padding: 100px 80px; max-width: 1340px; margin: 0 auto; }
.dojo-search { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.dojo-search-input {
flex: 1; max-width: 360px; padding: 12px 18px;
background: var(--dark-card); border: 1px solid var(--dark-border);
color: var(--text-primary); font-family: 'Rajdhani', sans-serif;
font-size: 14px; font-weight: 600; letter-spacing: 1px; outline: none; transition: border-color .2s;
}
.dojo-search-input:focus { border-color: rgba(255,107,26,.4); }
.dojo-search-input::placeholder { color: var(--text-muted); }
.dojo-count { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 2px; color: var(--text-muted); }
.dojo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px; }
.fighter-card {
background: var(--dark-card); border: 1px solid var(--dark-border);
overflow: hidden; position: relative; cursor: inherit;
transition: transform .25s, border-color .25s;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.fighter-card:hover { transform: translateY(-4px); border-color: rgba(255,107,26,.35); }
.fighter-card:hover .fc-glow { opacity: 1; }
.fc-glow {
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--sf-orange), var(--sf-yellow));
opacity: 0; transition: opacity .3s;
}
.fc-hp { width: 100%; height: 4px; background: var(--dark-border2); position: relative; }
.fc-hp-fill {
height: 100%;
background: linear-gradient(90deg, var(--sf-orange), var(--sf-yellow));
transition: width .6s ease;
}
.fc-body { padding: 14px 16px 16px; }
.fc-alias {
font-family: 'Share Tech Mono', monospace; font-size: 8px;
letter-spacing: 3px; color: var(--sf-orange); text-transform: uppercase; margin-bottom: 6px;
}
.fc-name {
font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
color: var(--text-primary); margin-bottom: 12px; line-height: 1.2;
}
.fc-cfn-link {
font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; color: var(--sf-yellow);
text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
transition: gap .2s; opacity: .75;
}
.fc-cfn-link:hover { opacity: 1; gap: 10px; }
.fc-cfn-link::after { content: '→'; }
.fc-no-cfn { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--text-muted); }
/* ── Torneos SF6 ── */
.torneos-section {
padding: 100px 80px;
background: linear-gradient(180deg, transparent, rgba(26,10,0,.25), transparent);
}
.torneos-inner { max-width: 1340px; margin: 0 auto; }
.torneos-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 40px; }
.torneo-card {
background: var(--dark-card); border: 1px solid var(--dark-border);
overflow: hidden; position: relative;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
cursor: inherit; transition: transform .25s, border-color .25s;
}
.torneo-card:hover { transform: translateY(-4px); border-color: rgba(255,107,26,.35); }
.torneo-card:hover .tc-glow { opacity: 1; }
.tc-glow {
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--sf-orange), var(--sf-yellow));
opacity: 0; transition: opacity .3s;
}
.tc-img { aspect-ratio: 4/3; overflow: hidden; background: var(--dark-card2); }
.tc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; filter: saturate(.8); }
.torneo-card:hover .tc-img img { transform: scale(1.04); }
.tc-body { padding: 20px 22px; }
.tc-edition {
font-family: 'Share Tech Mono', monospace; font-size: 9px;
letter-spacing: 3px; color: var(--sf-orange); text-transform: uppercase; margin-bottom: 8px;
}
.tc-title { font-family: 'Cinzel', serif; font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.tc-meta { font-size: 13px; color: var(--text-muted); }
.tc-badge {
display: inline-block; padding: 4px 12px;
font-family: 'Share Tech Mono', monospace; font-size: 8px;
letter-spacing: 2px; text-transform: uppercase; margin-top: 12px;
}
.tc-badge.done { background: rgba(255,107,26,.07); border: 1px solid rgba(255,107,26,.2); color: var(--sf-orange); }
.tc-badge.next {
background: rgba(255,210,63,.07); border: 1px solid rgba(255,210,63,.2); color: var(--sf-yellow);
animation: sf6BadgePulse 2s ease-in-out infinite;
}
/* Challonge banner SF6 */
.challonge-banner {
margin-top: 40px; padding: 28px 36px;
background: linear-gradient(135deg, rgba(255,107,26,.07), rgba(8,8,16,0));
border: 1px solid rgba(255,107,26,.22);
display: flex; align-items: center; justify-content: space-between; gap: 24px;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
position: relative; overflow: hidden;
}
.challonge-banner::after {
content: 'SF6'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
font-family: 'Bebas Neue', sans-serif; font-size: 110px;
color: rgba(255,107,26,.04); pointer-events: none; line-height: 1;
}
.cb-text .cb-label {
font-family: 'Share Tech Mono', monospace; font-size: 9px;
letter-spacing: 4px; color: var(--sf-orange); text-transform: uppercase; margin-bottom: 6px;
}
.cb-text .cb-title { font-family: 'Cinzel', serif; font-size: 19px; font-weight: 700; color: var(--text-primary); }
.cb-text .cb-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
/* ── Vídeos SF6 — sobreescribe .filter-btn.active y .video-card hover dentro de .sf6-page ── */
.sf6-page .filter-btn.active {
color: var(--sf-orange);
border-bottom-color: var(--sf-orange);
}
.sf6-page .video-card:hover { border-color: rgba(255,107,26,.3); }
.sf6-page .vc-play {
border-color: var(--sf-orange); color: var(--sf-orange);
background: rgba(255,107,26,.15);
box-shadow: 0 0 22px rgba(255,107,26,.35);
}
.sf6-page .vc-tag.hl { color: var(--sf-orange); border-color: rgba(255,107,26,.3); }
.sf6-page .vc-tag.yl { color: var(--sf-yellow); border-color: rgba(255,210,63,.3); }
/* ─ vc-wrap imagen (SF6 usa img en lugar de video) */
.sf6-page .vc-wrap img {
width: 100%; display: block; aspect-ratio: 16/9;
object-fit: cover; transition: transform .35s; filter: saturate(.75);
}
.sf6-page .video-card:hover .vc-wrap img { transform: scale(1.04); }
.sf6-page .vc-overlay { background: rgba(26,10,0,.55); }
/* ── CTA SF6 ── */
.sf6-page .cta-section::before {
background: radial-gradient(ellipse, rgba(255,107,26,.08) 0%, transparent 60%);
}
.sf6-cta-tagline {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(18px, 3vw, 32px); color: var(--text-secondary);
letter-spacing: 4px; margin: 10px auto 36px;
}
.sf6-page .social-btn:hover {
border-color: var(--sf-yellow); color: var(--sf-yellow);
box-shadow: 0 0 12px rgba(255,210,63,.1);
}
/* ── Responsive SF6 ── */
@media (max-width: 960px) {
.sf6-about-section { grid-template-columns: 1fr; padding: 80px 24px; gap: 40px; }
.torneos-layout { grid-template-columns: 1fr; }
.dojo-section, .torneos-section,
.sf6-page .videos-section,
.sf6-page .cta-section { padding-left: 24px; padding-right: 24px; }
.sf6-page .hero-stats { flex-direction: column; }
.sf6-hstat { border-right: none; border-bottom: 1px solid var(--dark-border); padding: 14px 28px; }
.sf6-hstat:last-child { border-bottom: none; }
.challonge-banner { flex-direction: column; align-items: flex-start; }
}
/* ── FIN BLOQUE SF6 ── */
/*Miembros*/
/* Stats rápidos del roster */
.roster-stats{display:flex;justify-content:center;gap:0;margin-top:44px;opacity:0;animation:fadeUp .7s 1.2s ease forwards;}
.rs{padding:16px 38px;text-align:center;border-right:1px solid var(--dark-border);}
.rs:last-child{border-right:none;}
.rs-num{font-family:'Cinzel',serif;font-size:32px;font-weight:900;color:var(--gold);line-height:1;}
.rs-label{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;margin-top:4px;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* ══════════════════════════════════════
BUSCADOR + FILTRO
══════════════════════════════════════ */
.controls{position:relative;z-index:1;padding:0 60px 50px;max-width:1300px;margin:0 auto;}
.controls-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.search-wrap{display:flex;align-items:center;gap:12px;flex:1;max-width:380px;padding:12px 18px;background:var(--dark-card);border:1px solid var(--dark-border);transition:border-color .2s;}
.search-wrap:focus-within{border-color:rgba(79,195,247,.3);}
.search-icon{color:var(--text-muted);font-size:14px;flex-shrink:0;}
.search-input{background:none;border:none;outline:none;color:var(--text-primary);font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:600;width:100%;}
.search-input::placeholder{color:var(--text-muted);}
.filter-group{display:flex;gap:6px;flex-wrap:wrap;}
.filter-btn{padding:8px 16px;background:transparent;border:1px solid var(--dark-border);color:var(--text-muted);font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:none;transition:all .2s;}
.filter-btn:hover{color:var(--text-secondary);border-color:var(--dark-border2);}
.filter-btn.active{color:var(--dark-bg);border-color:transparent;}
.filter-btn[data-rank="all"].active{background:var(--text-muted);color:var(--dark-bg);}
.filter-btn[data-rank="council"].active{background:var(--rank-council);color:#000;}
.filter-btn[data-rank="master"].active{background:var(--rank-master);}
.filter-btn[data-rank="keeper"].active{background:var(--rank-keeper);}
.filter-btn[data-rank="lord"].active{background:var(--rank-lord);color:#000;}
.filter-btn[data-rank="warrior"].active{background:var(--rank-warrior);color:#000;}
.filter-btn[data-rank="adept"].active{background:var(--rank-adept);}
.member-count{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--text-muted);margin-left:auto;white-space:nowrap;}
/* ══════════════════════════════════════
RANK SECTIONS
══════════════════════════════════════ */
.rank-section{position:relative;z-index:1;padding:0 60px 70px;max-width:1300px;margin:0 auto;}
.rank-header{display:flex;align-items:center;gap:20px;margin-bottom:28px;}
.rank-tag{padding:6px 18px;font-family:'Cinzel',serif;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;border:1px solid;white-space:nowrap;}
.rank-tag.council{color:var(--rank-council);border-color:rgba(245,197,24,.3);background:rgba(245,197,24,.06);}
.rank-tag.master{color:var(--rank-master);border-color:rgba(192,57,43,.3);background:rgba(192,57,43,.06);}
.rank-tag.keeper{color:var(--rank-keeper);border-color:rgba(155,89,182,.3);background:rgba(155,89,182,.06);}
.rank-tag.lord{color:var(--rank-lord);border-color:rgba(0,229,255,.3);background:rgba(0,229,255,.06);}
.rank-tag.warrior{color:var(--rank-warrior);border-color:rgba(46,204,113,.3);background:rgba(46,204,113,.06);}
.rank-tag.adept{color:var(--rank-adept);border-color:rgba(230,126,34,.3);background:rgba(230,126,34,.06);}
.rank-tag.norank{color:var(--text-muted);border-color:var(--dark-border);background:transparent;}
.rank-line{flex:1;height:1px;background:var(--dark-border);}
.rank-desc{font-size:18px;color:var(--text-muted);max-width:680px;line-height:1.6;margin-bottom:28px;padding-left:4px;}
/* ══════════════════════════════════════
MEMBER CARDS
══════════════════════════════════════ */
.members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.member-card{background:var(--dark-card);border:1px solid var(--dark-border);overflow:hidden;position:relative;cursor:none;transition:transform .25s,border-color .25s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));}
.member-card:hover{transform:translateY(-5px);}
.member-card:hover .mc-glow{opacity:1;}
.mc-glow{position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .3s;}
/* colores del glow por rango */
.member-card[data-rank="council"]:hover{border-color:rgba(245,197,24,.35);}
.member-card[data-rank="council"] .mc-glow{background:linear-gradient(90deg,var(--rank-council),var(--sith-red));}
.member-card[data-rank="master"]:hover{border-color:rgba(192,57,43,.35);}
.member-card[data-rank="master"] .mc-glow{background:linear-gradient(90deg,var(--rank-master),var(--gold));}
.member-card[data-rank="keeper"]:hover{border-color:rgba(155,89,182,.35);}
.member-card[data-rank="keeper"] .mc-glow{background:linear-gradient(90deg,var(--rank-keeper),var(--rank-master));}
.member-card[data-rank="lord"]:hover{border-color:rgba(0,229,255,.25);}
.member-card[data-rank="lord"] .mc-glow{background:linear-gradient(90deg,var(--rank-lord),var(--rank-keeper));}
.member-card[data-rank="warrior"]:hover{border-color:rgba(46,204,113,.25);}
.member-card[data-rank="warrior"] .mc-glow{background:linear-gradient(90deg,var(--rank-warrior),var(--rank-lord));}
.member-card[data-rank="adept"]:hover{border-color:rgba(230,126,34,.25);}
.member-card[data-rank="adept"] .mc-glow{background:linear-gradient(90deg,var(--rank-adept),var(--rank-warrior));}
/* Avatar */
.mc-avatar-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:var(--dark-card2);}
.mc-avatar-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .3s;filter:saturate(.75) brightness(.85);}
.member-card:hover .mc-avatar-wrap img{transform:scale(1.06);filter:saturate(.95) brightness(.95);}
.mc-avatar-fallback{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--dark-card2),var(--dark-panel));}
.mc-initials{font-family:'Cinzel',serif;font-size:32px;font-weight:900;opacity:.25;color:var(--text-primary);}
/* Rank pip sobre la imagen */
.mc-rank-pip{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:9px;font-weight:700;border:1px solid rgba(0,0,0,.3);}
.mc-rank-pip.council{background:var(--rank-council);color:#000;}
.mc-rank-pip.master{background:var(--rank-master);color:#fff;}
.mc-rank-pip.keeper{background:var(--rank-keeper);color:#fff;}
.mc-rank-pip.lord{background:var(--rank-lord);color:#000;}
.mc-rank-pip.warrior{background:var(--rank-warrior);color:#000;}
.mc-rank-pip.adept{background:var(--rank-adept);color:#fff;}
.mc-rank-pip.norank{background:var(--dark-border2);color:var(--text-muted);}
/* Cuerpo */
.mc-body{padding:14px 16px 16px;}
.mc-tag-rank{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;}
.mc-tag-rank.council{color:var(--rank-council);}
.mc-tag-rank.master{color:var(--rank-master);}
.mc-tag-rank.keeper{color:var(--rank-keeper);}
.mc-tag-rank.lord{color:var(--rank-lord);}
.mc-tag-rank.warrior{color:var(--rank-warrior);}
.mc-tag-rank.adept{color:var(--rank-adept);}
.mc-tag-rank.norank{color:var(--text-muted);}
.mc-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.2;margin-bottom:8px;}
.mc-role{font-size:12px;color:var(--text-muted);line-height:1.5;letter-spacing:.5px;}
/* ══════════════════════════════════════
EMPTY STATE
══════════════════════════════════════ */
.empty-state{display:none;text-align:center;padding:60px 40px;grid-column:1/-1;}
.empty-state.visible{display:block;}
.empty-state p{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;}
/* Responsive */
@media(max-width:900px){
.members-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.roster-stats{flex-wrap:wrap;}
.rs{flex:1;min-width:100px;border-right:none;border-bottom:1px solid var(--dark-border);padding:12px 20px;}
.rs:last-child{border-bottom:none;}
.controls-inner{flex-direction:column;align-items:stretch;}
.search-wrap{max-width:100%;}
.member-count{margin-left:0;}
}
/*Resultados*/
/* ══ GLOBAL STATS BAR ══ */
.global-stats{position:relative;z-index:1;padding:0 60px 60px;max-width:1300px;margin:0 auto;}
.gs-box{background:var(--dark-card);border:1px solid var(--dark-border);padding:32px 44px;display:flex;align-items:center;gap:0;position:relative;overflow:hidden;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));}
.gs-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sith-red),var(--gold),var(--saber-cyan));}
.gs-box::after{content:'OLTS';position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-family:'Cinzel',serif;font-size:100px;font-weight:900;color:rgba(245,197,24,.025);pointer-events:none;line-height:1;}
.gs-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:4px;color:var(--text-muted);text-transform:uppercase;margin-bottom:8px;}
.gs-stat{flex:1;text-align:center;border-right:1px solid var(--dark-border);padding:0 20px;position:relative;z-index:1;}
.gs-stat:last-child{border-right:none;}
.gs-num{font-family:'Cinzel',serif;font-size:40px;font-weight:900;line-height:1;}
.gs-num.total{color:var(--text-primary);}
.gs-num.wins{color:var(--win-green);text-shadow:0 0 18px rgba(39,174,96,.3);}
.gs-num.losses{color:var(--loss-red);text-shadow:0 0 18px rgba(192,57,43,.3);}
.gs-num.frags{color:var(--gold);}
.gs-num.wr{color:var(--saber-cyan);}
/* Barra de winrate visual */
.wr-bar-wrap{flex:1.6;padding:0 28px;border-right:1px solid var(--dark-border);}
.wr-bar-label{display:flex;justify-content:space-between;margin-bottom:8px;}
.wr-bar-track{height:8px;background:rgba(192,57,43,.2);border-radius:4px;overflow:hidden;}
.wr-bar-fill{height:100%;background:linear-gradient(90deg,var(--win-green),var(--saber-cyan));border-radius:4px;transition:width 1.2s cubic-bezier(.16,1,.3,1);}
/* ══ CONTROLES ══ */
.controls{position:relative;z-index:1;padding:0 60px 40px;max-width:1300px;margin:0 auto;}
.controls-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.search-wrap{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--dark-card);border:1px solid var(--dark-border);flex:1;max-width:300px;transition:border-color .2s;}
.search-wrap:focus-within{border-color:rgba(79,195,247,.3);}
.search-icon{color:var(--text-muted);font-size:13px;flex-shrink:0;}
.search-input{background:none;border:none;outline:none;color:var(--text-primary);font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:600;width:100%;}
.search-input::placeholder{color:var(--text-muted);}
.filter-group{display:flex;gap:5px;flex-wrap:wrap;}
.filter-btn{padding:8px 14px;background:transparent;border:1px solid var(--dark-border);color:var(--text-muted);font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:none;transition:all .2s;}
.filter-btn:hover{color:var(--text-secondary);border-color:var(--dark-border2);}
.filter-btn.active{border-color:transparent;}
.filter-btn[data-filter="all"].active{background:rgba(255,255,255,.08);color:var(--text-primary);}
.filter-btn[data-filter="victoria"].active{background:rgba(39,174,96,.12);border-color:rgba(39,174,96,.3);color:var(--win-green);}
.filter-btn[data-filter="derrota"].active{background:rgba(192,57,43,.12);border-color:rgba(192,57,43,.3);color:var(--loss-red);}
.result-count{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--text-muted);margin-left:auto;white-space:nowrap;}
/* ══ ERA SECTIONS ══ */
.era-section{position:relative;z-index:1;padding:0 60px 70px;max-width:1300px;margin:0 auto;}
.era-header{display:flex;align-items:center;gap:20px;margin-bottom:20px;}
.era-tag{font-family:'Cinzel',serif;font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:7px 20px;border:1px solid rgba(245,197,24,.25);color:var(--gold);background:rgba(245,197,24,.05);white-space:nowrap;}
.era-line{flex:1;height:1px;background:var(--dark-border);}
/* Era mini-stats */
.era-stats{display:flex;gap:16px;margin-bottom:28px;flex-wrap:wrap;}
.es{padding:12px 22px;background:var(--dark-card2);border:1px solid var(--dark-border);display:flex;align-items:center;gap:10px;}
.es-num{font-family:'Cinzel',serif;font-size:22px;font-weight:900;line-height:1;}
.es-num.w{color:var(--win-green);}
.es-num.l{color:var(--loss-red);}
.es-num.t{color:var(--text-primary);}
.es-num.f{color:var(--gold);}
.es-lbl{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;}
/* ══ TABLA DE COMBATES ══ */
.matches-table{width:100%;border-collapse:collapse;}
.matches-table thead tr{background:rgba(255,255,255,.02);border-bottom:1px solid var(--dark-border2);}
.matches-table th{padding:10px 16px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;text-align:left;font-weight:400;}
.matches-table th.center{text-align:center;}
.matches-table tbody tr{border-bottom:1px solid rgba(28,28,48,.6);transition:background .15s;}
.matches-table tbody tr:hover{background:rgba(255,255,255,.02);}
.matches-table tbody tr.match-row{cursor:none;}
/* Clan cell */
.clan-cell{display:flex;align-items:center;gap:12px;padding:14px 16px;}
.clan-flag{width:28px;height:20px;object-fit:contain;flex-shrink:0;opacity:.85;}
.clan-flag-placeholder{width:28px;height:20px;background:var(--dark-border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--text-muted);}
.clan-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text-primary);}
/* Format cell */
.format-cell{padding:14px 16px;text-align:center;}
.format-badge{display:inline-block;padding:4px 12px;background:rgba(79,195,247,.06);border:1px solid rgba(79,195,247,.15);font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--saber-cyan);}
/* Frags cell */
.frags-cell{padding:14px 16px;text-align:center;}
.frags-positive{font-family:'Share Tech Mono',monospace;font-size:14px;font-weight:700;color:var(--win-green);}
.frags-negative{font-family:'Share Tech Mono',monospace;font-size:14px;font-weight:700;color:var(--loss-red);}
.frags-neutral{font-family:'Share Tech Mono',monospace;font-size:14px;color:var(--text-secondary);}
/* Diff cell */
.diff-cell{padding:14px 16px;text-align:center;}
.diff-pos{font-family:'Share Tech Mono',monospace;font-size:13px;color:var(--win-green);}
.diff-neg{font-family:'Share Tech Mono',monospace;font-size:13px;color:var(--loss-red);}
/* Result cell */
.result-cell{padding:14px 16px;text-align:center;}
.result-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 16px;font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.result-badge.win{background:rgba(39,174,96,.1);border:1px solid rgba(39,174,96,.3);color:var(--win-green);}
.result-badge.loss{background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.3);color:var(--loss-red);}
.result-badge.draw{background:rgba(243,156,18,.08);border:1px solid rgba(243,156,18,.2);color:var(--draw-yellow);}
.result-dot{width:5px;height:5px;border-radius:50%;}
.result-dot.win{background:var(--win-green);}
.result-dot.loss{background:var(--loss-red);}
.result-dot.draw{background:var(--draw-yellow);}
/* Barra de frags inline */
.frag-bar-row td{padding:0 16px 12px;background:transparent!important;}
.frag-bar-wrap{display:flex;height:3px;border-radius:2px;overflow:hidden;background:var(--dark-border2);}
.frag-bar-fill-w{height:100%;background:var(--win-green);transition:width .8s ease;}
.frag-bar-fill-l{height:100%;background:var(--loss-red);transition:width .8s ease;}
/* No results */
.no-results{display:none;text-align:center;padding:50px 20px;}
.no-results.visible{display:block;}
.no-results p{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase;}