*,::before,::after {
box-sizing:border-box;
margin:0;
padding:0
}

html,body {
height:100%
}

body {
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
background:#050608;
color:#f9fafb;
line-height:1.6
}

a {
color:inherit;
text-decoration:none
}

a:hover {
text-decoration:none
}

.mision-card {
background:#111;
border:1px solid #222;
padding:14px;
border-radius:10px;
margin-bottom:10px
}

.mision-progress {
font-size:13px;
color:#aaa
}

.mision-ok {
color:#2ecc71;
font-weight:700
}

.logo a {
display:flex;
align-items:center;
gap:8px;
font-size:18px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.18em;
color:#fef2f2
}

.logo a::before {
content:"SWC";
font-size:11px;
background:#ef4444;
color:#111827;
padding:4px 9px;
border-radius:999px
}

.btn-primario {
background:#ef4444;
padding:7px 16px;
border-radius:999px;
font-size:11px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.12em;
box-shadow:0 0 25px #ef4444bf
}

.btn-primario:hover {
background:#fb7185
}

main {
min-height:calc(100vh - 70px)
}

.contenedor-page {
max-width:1200px;
margin:32px auto 48px;
padding:0 20px
}

.hero-wrapper {
width:100%;
padding:32px 20px 0;
background:radial-gradient(circle at 0% -10%,#ef444459 0,#020617 40%,#020617 100%)
}

.hero-inner {
max-width:1200px;
margin:0 auto
}

.hero {
background:radial-gradient(circle at top left,#f8717140 0,#020617 55%);
border-radius:26px;
padding:48px 56px;
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
gap:32px;
align-items:center;
border:1px solid #94a3b84d;
box-shadow:0 18px 40px #000000d9;
position:relative;
overflow:hidden
}

.hero::before {
content:"";
position:absolute;
inset:-3px;
border-radius:30px;
border:1px solid #f8717166;
box-shadow:0 0 60px #ef444466;
opacity:.4;
pointer-events:none
}

.hero-text {
position:relative;
z-index:1
}

.hero-eyebrow {
font-size:11px;
letter-spacing:.24em;
text-transform:uppercase;
color:#fecaca;
margin-bottom:10px
}

.hero h1 {
font-size:42px;
text-transform:uppercase;
letter-spacing:.08em;
margin-bottom:12px
}

.hero-subtitle {
font-size:14px;
color:#e5e7eb;
max-width:480px;
margin-bottom:20px
}

.hero-cta {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:10px
}

.btn-secondary {
padding:7px 16px;
border-radius:999px;
border:1px solid #94a3b899;
font-size:11px;
text-transform:uppercase;
letter-spacing:.12em;
background:#0f172ae6
}

.btn-secondary:hover {
background:#1e40afe6
}

.hero-links {
display:flex;
flex-wrap:wrap;
gap:10px;
font-size:11px;
color:#9ca3af;
margin-top:6px
}

.hero-links a {
color:#e5e7eb
}

.hero-links .separator {
opacity:.6
}

.hero-aside {
position:relative;
z-index:1;
display:flex;
justify-content:center
}

.hero-card {
width:100%;
max-width:320px;
border-radius:20px;
padding:18px 20px;
background:radial-gradient(circle at top,#111827 0,#020617 60%);
border:1px solid #ef4444b3;
box-shadow:0 0 35px #ef4444b3
}

.hero-card-header {
display:flex;
justify-content:space-between;
align-items:center;
font-size:11px;
text-transform:uppercase;
letter-spacing:.16em;
color:#e5e7eb;
margin-bottom:10px
}

.hero-tag {
font-size:10px;
padding:4px 8px;
border-radius:999px;
border:1px solid #f8fafc4d
}

.hero-card-body p {
font-size:13px;
margin-bottom:4px;
color:#e5e7eb
}

.hero-card-body strong {
color:#fef2f2
}

.hero-countdown {
font-size:12px;
color:#9ca3af;
margin-top:6px
}

.section-title {
margin-top:32px;
margin-bottom:6px;
font-size:16px;
text-transform:uppercase;
letter-spacing:.2em;
color:#e5e7eb;
display:inline-flex;
align-items:center;
gap:10px
}

.section-title::before {
content:"";
width:42px;
height:2px;
border-radius:999px;
background:#ef4444
}

.section-subtitle {
font-size:13px;
color:#9ca3af;
margin-bottom:16px
}

.radar-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px;
margin-top:12px
}

.radar-card {
background:#020617;
border-radius:16px;
padding:18px 18px 20px;
border:1px solid #1f2933;
box-shadow:0 12px 30px #000000d9;
position:relative;
overflow:hidden
}

.radar-card::before {
content:"";
position:absolute;
inset:-35%;
background:radial-gradient(circle at bottom right,#ef444440 0,transparent 55%);
opacity:.7;
pointer-events:none
}

.radar-label {
font-size:11px;
text-transform:uppercase;
letter-spacing:.18em;
color:#9ca3af;
margin-bottom:4px
}

.radar-value {
font-size:32px;
font-weight:700;
margin-bottom:2px
}

.radar-text {
font-size:12px;
color:#e5e7eb
}

.tarjetas-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px;
margin-top:10px
}

.tarjeta {
position:relative;
background:radial-gradient(circle at top left,#ef44441f 0,#020617 60%);
border-radius:18px;
padding:18px 18px 20px;
border:1px solid #111827;
box-shadow:0 14px 35px #000000e6;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}

.tarjeta:hover {
transform:translateY(-4px);
border-color:#ef4444d9;
box-shadow:0 0 30px #ef444499
}

.tarjeta h3 {
font-size:18px;
margin-bottom:6px
}

.tarjeta h3 a {
color:#f9fafb
}

.tarjeta h3 a:hover {
color:#fb7185
}

.tarjeta p {
font-size:13px;
color:#e5e7eb;
margin-bottom:4px
}

.tarjeta small {
font-size:11px;
color:#9ca3af
}

.noticias-carousel {
display:flex;
gap:20px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:10px
}

.noticia-slide {
position:relative;
min-width:320px;
height:200px;
border-radius:14px;
overflow:hidden;
scroll-snap-align:start;
background:#111;
text-decoration:none
}

.noticia-slide img {
width:100%;
height:100%;
object-fit:cover
}

.tarjeta.tarjeta-noticia .noticia-img-grande {
width:100%;
max-height:380px;
display:flex;
justify-content:center;
align-items:center;
background:#0c0c0c;
border-radius:16px;
overflow:hidden;
margin-bottom:16px
}

.auth-wrapper {
min-height:calc(100vh - 120px);
display:flex;
justify-content:center;
align-items:center
}

.auth-card {
width:100%;
max-width:420px;
padding:28px;
border-radius:18px;
background:linear-gradient(135deg,#12060b,#050814);
box-shadow:0 0 0 1px #ffffff0d 0 0 40px #ff282826
}

.auth-card h2 {
color:#fff;
margin-bottom:8px;
font-size:26px;
text-align:center
}

.auth-card p.auth-subtitle {
color:#aaa;
font-size:14px;
text-align:center;
margin-bottom:22px
}

.auth-card label {
display:block;
color:#ccc;
font-size:13px;
margin-bottom:6px
}

.auth-card input {
width:100%;
padding:12px 14px;
border-radius:10px;
border:1px solid #ffffff1a;
background:#0b0f1c;
color:#fff;
outline:none;
margin-bottom:16px;
transition:border .2s,box-shadow .2s
}

.auth-card input:focus {
border-color:#ff2a2a;
box-shadow:0 0 0 2px #ff2a2a40
}

.auth-card button {
width:100%;
padding:12px;
border-radius:999px;
border:none;
background:linear-gradient(135deg,#ff2a2a,#f55);
color:#fff;
font-weight:600;
cursor:pointer;
transition:transform .15s ease,box-shadow .15s ease
}

.auth-card button:hover {
transform:translateY(-1px);
box-shadow:0 8px 25px #ff2a2a66
}

.auth-links {
margin-top:18px;
text-align:center;
font-size:13px
}

.auth-links a {
color:#ff6a6a;
text-decoration:none
}

.auth-links a:hover {
text-decoration:underline
}

.auth-msg {
padding:12px 14px;
border-radius:10px;
font-size:14px;
margin-bottom:16px
}

.record-box {
margin-top:14px;
padding:12px;
border-radius:12px;
background:linear-gradient(135deg,#0b0f1c,#050814);
box-shadow:inset 0 0 0 1px #ffffff0d
}

.gp-badge {
display:inline-block;
margin-top:6px;
padding:4px 10px;
font-size:11px;
font-weight:700;
letter-spacing:.5px;
border-radius:999px;
background:linear-gradient(135deg,#fc0,#ff7b00);
color:#000;
text-transform:uppercase
}

.badges-combate {
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:8px
}

.badge-titulo {
padding:4px 10px;
font-size:11px;
font-weight:700;
border-radius:999px;
background:linear-gradient(135deg,#d4af37,#b8860b);
color:#000
}

.badge-titulo-historial {
display:inline-block;
margin-left:6px;
padding:3px 8px;
font-size:11px;
border-radius:12px;
background:linear-gradient(90deg,#d4af37,#b8860b);
color:#000;
font-weight:700
}

.badge-campeon-p4p {
margin-left:6px;
padding:3px 8px;
font-size:11px;
font-weight:700;
border-radius:12px;
background:linear-gradient(135deg,#c9a227,#e6c75a);
color:#000;
box-shadow:0 0 6px #ffd70066
}

.badge-bmf {
background:linear-gradient(135deg,#8b0000,red);
color:#fff;
padding:4px 8px;
border-radius:12px;
font-weight:700;
font-size:12px
}

.trades-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:20px
}

.trade-form {
max-width:500px;
margin:auto
}

.trade-box {
margin-bottom:18px
}

.trade-box h3 {
margin-bottom:6px;
font-size:14px;
opacity:.9
}

.trade-box select {
width:100%;
padding:10px;
border-radius:8px;
background:#111;
color:#fff;
border:1px solid #333
}

.notifications-list {
display:flex;
flex-direction:column;
gap:12px;
margin-top:20px
}

.notification-card {
display:flex;
align-items:center;
gap:14px;
padding:14px 18px;
border-radius:14px;
background:linear-gradient(135deg,#0b1020,#060914);
box-shadow:inset 0 0 0 1px #ffffff0d;
transition:all .25s ease
}

.notification-card.unread {
border-left:4px solid #fc0;
background:linear-gradient(135deg,#10182f,#080c1a)
}

.notification-card.read {
opacity:.65
}

.notification-card:hover {
transform:translateY(-2px);
box-shadow:0 0 18px #ffcc0026
}

.notification-icon {
font-size:26px;
width:40px;
text-align:center
}

.notification-content {
flex:1
}

.notification-content p {
margin:0;
font-weight:600;
color:#fff
}

.notification-content span {
font-size:12px;
color:#aaa
}

#notif-bell {
position:fixed;
bottom:25px;
right:25px;
background:#111;
color:#fff;
font-size:26px;
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
box-shadow:0 5px 15px #0000004d;
z-index:9999
}

.top-nav {
position:sticky;
top:0;
z-index:1000;
background:linear-gradient(180deg,#020617,#000);
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 24px;
border-bottom:1px solid #111827
}

.top-nav .logo {
display:flex;
align-items:center
}

.main-nav {
display:flex;
align-items:center;
gap:18px
}

.main-nav a {
font-size:13px;
font-weight:500;
opacity:.9
}

.main-nav a:hover {
opacity:1
}

.menu-toggle {
display:none
}

.main-nav a {
position:relative;
color:#cbd5e1;
font-weight:500;
letter-spacing:.08em;
text-transform:uppercase;
transition:color .25s ease,transform .25s ease
}

.top-nav {
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 24px
}

.main-nav {
display:flex;
align-items:center;
gap:22px
}

.menu-toggle {
display:none
}

.main-nav a::after {
content:"";
position:absolute;
left:50%;
bottom:-6px;
width:0;
height:2px;
background:linear-gradient(90deg,#ef4444,#fb7185);
border-radius:999px;
transform:translateX(-50%);
transition:width .25s ease
}

.main-nav a:hover {
color:#fff;
transform:scale(1.06)
}

.main-nav a:hover::after {
width:70%
}

@media (max-width: 768px) {
body {
font-size:15px
}

.contenedor-page {
padding:12px
}

h1,h2 {
font-size:1.3em
}

.btn {
width:100%;
padding:14px;
font-size:16px
}

input,select,textarea {
width:100%;
font-size:16px;
padding:12px
}

label {
font-size:14px
}

.notification-card,.trade-card {
flex-direction:column;
align-items:flex-start;
gap:10px
}

.notification-icon {
font-size:22px
}

#notif-bell {
width:48px;
height:48px;
font-size:22px;
bottom:15px;
right:15px
}
}

#notif-count {
position:absolute;
top:-6px;
right:-6px;
background:red;
color:#fff;
font-size:12px;
font-weight:700;
width:22px;
height:22px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center
}

@media (max-width: 768px) {
.hero {
padding:22px 18px;
gap:20px
}

.hero h1 {
font-size:26px;
line-height:1.2;
letter-spacing:.05em
}

.hero-subtitle {
font-size:14px;
max-width:100%
}

.hero-cta {
flex-direction:column
}

.hero-cta .btn-primary,.hero-cta .btn-secondary {
width:100%;
text-align:center
}

.hero-aside {
margin-top:10px
}

.btn-primary,.btn-secondary,.btn-mini {
padding:14px;
font-size:15px;
border-radius:14px
}

.trade-actions {
flex-direction:column
}

.trade-actions a {
width:100%;
text-align:center
}

.tarjeta,.notification-card,.trade-card {
padding:16px
}

section[id="noticias"],.section-noticias {
min-height:auto;
padding:36px 0
}

.notification-content p {
font-size:14px
}

.notification-content span {
font-size:11px
}

.section-title {
letter-spacing:.12em
}

.hero-eyebrow,.radar-label {
font-size:10px
}
}

* {
scroll-behavior:smooth
}

a,button {
transition:background-color .2s ease,color .2s ease,transform .15s ease
}

.menu-toggle span:nth-child(1) {
top:0
}

.menu-toggle span:nth-child(2) {
top:10px
}

.menu-toggle span:nth-child(3) {
top:20px
}

.menu-toggle.active span:nth-child(1) {
transform:rotate(45deg);
top:10px
}

.menu-toggle.active span:nth-child(2) {
opacity:0
}

.menu-toggle.active span:nth-child(3) {
transform:rotate(-45deg);
top:10px
}

@media (max-width: 768px) {
body {
overflow-x:hidden
}

.contenedor-page {
padding:12px
}

.tabla {
display:block;
width:100%;
overflow-x:auto;
white-space:nowrap;
-webkit-overflow-scrolling:touch;
border-radius:10px
}

.tabla table {
min-width:720px
}

.tabla thead th {
font-size:12px;
padding:8px
}

.tabla td {
font-size:12px;
padding:8px;
vertical-align:middle
}

.tabla td:first-child {
min-width:220px
}

.tabla td:nth-child(2) {
min-width:140px
}

.tabla td:nth-child(3) {
min-width:200px
}

.tabla td:nth-child(4) {
min-width:100px;
text-align:center
}

.tabla td:nth-child(5) {
min-width:80px;
text-align:center
}

.tabla span[class^="badge"] {
display:inline-block;
white-space:nowrap
}

.historial-tabs {
display:flex;
gap:8px;
margin-bottom:12px
}

.tab-btn {
flex:1;
font-size:13px;
padding:10px 0
}

.tabla::after {
content:"⬅ Desliza ➡";
display:block;
text-align:center;
font-size:11px;
opacity:.6;
padding:6px 0
}
}

.notification-card.empty {
text-align:center;
opacity:.7
}

.btn-mini {
background:#fc0;
color:#000;
padding:6px 10px;
border-radius:8px;
font-size:12px;
font-weight:700;
text-decoration:none;
transition:.2s
}

.btn-mini:hover {
background:#ffd633
}

.alert {
padding:12px;
border-radius:8px;
margin-bottom:16px;
font-weight:700
}

.alert.success {
background:#1b5e20;
color:#a5ffb0
}

.alert.error {
background:#5e1b1b;
color:#ffb3b3
}

.btn-secondary {
background:#222;
color:#fff;
padding:8px 14px;
border-radius:999px;
text-decoration:none
}

.trade-card {
background:#0b1020;
border-radius:14px;
padding:16px;
border:1px solid #1f2a44
}

.trade-users {
text-align:center;
margin-bottom:10px;
font-weight:700
}

.trade-cards {
display:flex;
align-items:center;
justify-content:space-between
}

.trade-card-box {
text-align:center;
width:40%
}

.trade-card-box img {
width:100%;
max-width:120px;
border-radius:8px
}

.trade-arrow {
font-size:24px
}

.trade-status {
text-align:center;
margin-top:10px
}

.trade-actions {
display:flex;
gap:10px;
margin-top:12px
}

.trade-top-actions {
display:flex;
justify-content:flex-end;
margin-bottom:20px
}

.btn-primary {
background:linear-gradient(135deg,#ff9800,#ff5722);
color:#000;
padding:10px 16px;
border-radius:999px;
font-weight:700;
text-decoration:none;
transition:transform .15s ease,box-shadow .15s ease
}

.badge {
padding:4px 10px;
border-radius:12px;
font-size:12px;
font-weight:700
}

.badge-gp-round {
background:linear-gradient(135deg,#fc0,#f80);
color:#000;
font-weight:700;
padding:3px 7px;
border-radius:6px;
font-size:11px;
margin-left:6px
}

.badge-gp-win {
background:linear-gradient(135deg,#0fc,#0a8);
color:#002b26;
padding:4px 8px;
border-radius:8px;
font-size:12px;
font-weight:700;
margin-left:6px
}

.badge-interino {
background:linear-gradient(135deg,#b71c1c,#e53935);
color:#fff;
font-size:11px;
font-weight:700;
padding:3px 7px;
border-radius:4px;
margin-left:6px;
letter-spacing:.5px;
box-shadow:0 0 6px #e5393599
}

.badge-gp-loss {
background:#3a1f1f;
color:#f66;
padding:4px 8px;
border-radius:8px;
font-size:12px;
margin-left:6px
}

.grand-prix-box {
margin-top:10px;
background:linear-gradient(135deg,#fc0,#f80);
color:#000;
font-weight:700;
padding:10px 14px;
border-radius:10px;
text-align:center;
box-shadow:0 0 12px #ffb40066
}

.badge-mma {
background:#c62828;
color:#fff
}

.badge-muay {
background:#2e7d32;
color:#fff
}

.fantasy-header {
display:flex;
justify-content:space-between;
align-items:center
}

.btn-primary:hover {
transform:translateY(-1px);
box-shadow:0 4px 12px #ff980059
}

.badge {
padding:4px 10px;
border-radius:999px;
font-size:12px
}

.badge-pending {
background:#ffc107;
color:#000
}

.badge-accepted {
background:#28a745
}

.badge-rejected {
background:#dc3545
}

.badge-cancelled {
background:#6c757d
}

.trade-card.status-accepted {
border-color:#28a745
}

.trade-card.status-rejected {
border-color:#dc3545
}

.badge-campeon {
background:linear-gradient(90deg,#ffd700,#ffb300);
color:#000;
padding:3px 8px;
border-radius:12px;
font-size:11px;
font-weight:700;
margin-left:6px
}

.p4p-top1 {
background:linear-gradient(90deg,#3b2a00,#6d4c00);
box-shadow:inset 0 0 0 1px #ffd70059
}

.badge-p4p-king {
margin-left:8px;
padding:3px 8px;
font-size:11px;
font-weight:700;
border-radius:12px;
background:linear-gradient(135deg,gold,orange);
color:#000
}

.badge-campeon-p4p {
margin-left:6px;
padding:3px 7px;
font-size:11px;
border-radius:10px;
background:#d4af37;
color:#000;
font-weight:700
}

.badge-defensa {
background:#1e90ff;
color:#fff;
padding:3px 8px;
border-radius:12px;
font-size:11px;
margin-left:6px
}

.badge-perdio-titulo {
background:#b22222;
color:#fff;
padding:3px 8px;
border-radius:12px;
font-size:11px;
margin-left:6px
}

.badge-titulo.interino {
background:linear-gradient(135deg,#c0392b,#e74c3c);
color:#fff
}

.tabla-p4p tr {
background:linear-gradient(90deg,#2b0000,#000814)
}

.rank-p4p td:first-child {
color:#ffd700;
font-weight:700
}

.badge-disciplina {
margin-left:8px;
padding:3px 8px;
font-size:11px;
border-radius:999px;
font-weight:600;
letter-spacing:.5px
}

.fight-card.gp {
border:2px solid #ffb300
}

.badge-disciplina.mma {
background:#ff3c3c26;
color:#ff4d4d;
border:1px solid #ff3c3c66
}
.badge-disciplina.muay {
    background: linear-gradient(135deg, #c2410c, #f97316);
    color: #fff;

    font-weight: 800;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 999px;

    border: 1px solid #fb923c;
    box-shadow: 0 0 8px #f9731680;
}


.historial-tabs {
display:flex;
gap:10px;
margin-bottom:12px
}

.tab-btn {
padding:8px 16px;
border-radius:999px;
border:1px solid #ffffff26;
background:#0b0f1c;
color:#ccc;
cursor:pointer;
font-size:13px;
transition:all .2s ease
}

.tab-btn:hover {
color:#fff
}

.tab-btn.active {
background:linear-gradient(135deg,#ff2a2a,#f55);
color:#fff;
border-color:transparent
}

.record-box h4 {
margin:0 0 6px;
font-size:14px;
color:#fff
}

.record-box.mma h4 {
color:#ff4d4d
}

.record-box.muay h4 {
color:orange
}

.record-main {
font-size:20px;
font-weight:700;
color:#fff
}

.record-sub {
font-size:13px;
color:#bbb
}

.auth-msg.success {
background:#28c8781f;
color:#7dffb7;
border:1px solid #28c8784d
}

.auth-msg.error {
background:#ff3c3c1f;
color:#ff8a8a;
border:1px solid #ff3c3c4d
}

@media (max-width: 600px) {
.auth-card {
margin:0 14px;
padding:22px
}
}

.tarjeta.tarjeta-noticia .noticia-img-grande img {
width:auto!important;
height:auto!important;
max-width:100%;
max-height:380px;
object-fit:contain!important;
display:block
}

@media (max-width: 768px) {
.noticia-img-grande {
max-height:260px
}

.noticia-img-grande img {
max-height:260px
}
}

.noticia-placeholder {
width:100%;
height:100%;
background:linear-gradient(135deg,#222,#111);
display:flex;
align-items:center;
justify-content:center;
color:#777;
font-size:14px
}

.noticia-overlay {
position:absolute;
bottom:0;
width:100%;
padding:14px;
background:linear-gradient(to top,#000000d9,transparent)
}

.noticia-overlay h3 {
color:#fff;
margin:0;
font-size:16px
}

.noticia-sub {
color:#ccc;
font-size:13px;
margin-top:4px
}

.noticias-carousel img {
width:100%;
height:100%;
object-fit:cover
}

.slide-overlay {
position:absolute;
bottom:0;
width:100%;
padding:15px;
background:linear-gradient(to top,#000000d9,transparent)
}

.slide-overlay h3,.slide-overlay p {
color:#fff;
margin:0
}

.tarjeta-evento {
border-left:3px solid #ef4444
}

.tarjeta-noticia {
border-left:3px solid #f97316
}

.card-reveal {
opacity:0;
transform:scale(0.6) rotateX(45deg);
transition:opacity .4s ease,transform .6s cubic-bezier(.2,.8,.2,1)
}

.card-reveal.show {
opacity:1;
transform:scale(1) rotateX(0)
}

.card-common.show {
animation:popIn .4s ease
}

@keyframes popIn {
from {
transform:scale(.8)
}

to {
transform:scale(1)
}
}

.card-rare::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent 30%,#50a0ff99,transparent 70%);
transform:translateX(-120%)
}

.card-rare.show::after {
animation:shine 1s ease forwards
}

@keyframes shine {
to {
transform:translateX(120%)
}
}

.card-epic.show {
animation:epicPulse 1.2s ease
}

@keyframes epicPulse {
0% {
transform:scale(.85)
}

50% {
transform:scale(1.08)
}

100% {
transform:scale(1)
}
}

.card-legendary {
box-shadow:0 0 30px #ffd70099 0 0 80px #ff8c0066;
animation:legendaryGlow 1.6s infinite alternate
}

.card-legendary.show {
animation:legendaryEnter .9s ease-out,legendaryGlow 1.6s infinite alternate
}

@keyframes legendaryEnter {
0% {
transform:scale(0.5) rotate(-6deg);
opacity:0;
filter:brightness(0.4)
}

60% {
transform:scale(1.12) rotate(2deg);
opacity:1;
filter:brightness(1.6)
}

100% {
transform:scale(1) rotate(0);
filter:brightness(1.2)
}
}

@keyframes legendaryGlow {
from {
box-shadow:0 0 20px #ffd70080 0 0 50px #ff8c004d
}

to {
box-shadow:0 0 45px #ffd700e6 0 0 110px #ff8c0099
}
}

.legendary-burst {
position:absolute;
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(circle,#ffd70099,#ff8c004d,transparent 70%);
animation:burst .8s ease-out;
pointer-events:none
}

@keyframes burst {
from {
transform:scale(0.2);
opacity:1
}

to {
transform:scale(1.4);
opacity:0
}
}

.menu-extra:hover {
color:#ffd27d;
transform:scale(1.05)
}

#quiz-box {
margin-top:30px;
padding:28px;
border-radius:20px;
background:radial-gradient(circle at top left,#ef44442e,#020617 65%);
border:1px solid #ef444499;
box-shadow:0 0 25px #ef444459 0 20px 50px #000000e6;
animation:quizFadeIn .6s ease
}

@keyframes quizFadeIn {
from {
opacity:0;
transform:translateY(10px) scale(.98)
}

to {
opacity:1;
transform:none
}
}

#quiz-box h2 {
font-size:22px;
text-transform:uppercase;
letter-spacing:.12em;
margin-bottom:22px;
color:#fef2f2
}

.quiz-answer {
display:block;
width:100%;
margin-bottom:14px;
padding:14px 18px;
border-radius:14px;
background:linear-gradient(135deg,#0b0f1c,#050814);
border:1px solid #ffffff1a;
color:#e5e7eb;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:all .25s ease;
position:relative;
overflow:hidden
}

.quiz-answer:hover {
transform:scale(1.04);
border-color:#ef4444;
color:#fff;
box-shadow:0 0 18px #ef444499
}

.quiz-answer::after {
content:"";
position:absolute;
bottom:0;
left:-100%;
width:100%;
height:2px;
background:#ef4444;
transition:left .35s ease
}

.quiz-answer:hover::after {
left:0
}

.quiz-correct {
color:#2ecc71;
font-size:26px;
font-weight:800;
text-shadow:0 0 10px #2ecc71b3;
animation:correctPop .6s ease
}

@keyframes correctPop {
0% {
transform:scale(.8);
opacity:0
}

60% {
transform:scale(1.15)
}

100% {
transform:scale(1);
opacity:1
}
}

.quiz-wrong {
color:#e74c3c;
font-size:26px;
font-weight:800;
text-shadow:0 0 10px #e74c3cb3;
animation:wrongShake .5s ease
}

@keyframes wrongShake {
0% {
transform:translateX(0)
}

25% {
transform:translateX(-6px)
}

50% {
transform:translateX(6px)
}

75% {
transform:translateX(-4px)
}

100% {
transform:translateX(0)
}
}

#startQuiz {
padding:16px 28px;
font-size:16px;
letter-spacing:.15em;
text-transform:uppercase;
border-radius:999px;
background:linear-gradient(135deg,#ef4444,#fb7185);
color:#111827;
font-weight:800;
border:none;
cursor:pointer;
box-shadow:0 0 25px #ef4444cc;
transition:all .25s ease
}

#startQuiz:hover {
transform:scale(1.06);
box-shadow:0 0 40px #ef4444ff
}

@media (max-width: 600px) {
#quiz-box {
padding:22px
}

#quiz-box h2 {
font-size:18px
}

.quiz-answer {
font-size:14px;
padding:12px 14px
}
}

.quiz-ranking-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin-top:14px
}

.quiz-rank-card {
background:radial-gradient(circle at top,#ef44442e,#020617 60%);
border-radius:16px;
padding:18px;
border:1px solid #1f2933;
box-shadow:0 10px 28px #000000bf;
text-align:center;
transition:transform .2s ease,box-shadow .2s ease
}

.hero-quiz-ranking {
margin-top:28px;
padding-top:18px;
border-top:1px solid #ffffff1a
}

.quiz-card {
max-width:600px;
margin:auto;
padding:30px;
border-radius:18px;
background:linear-gradient(135deg,#120b14,#020617);
box-shadow:0 0 40px #e5091440
}

.quiz-top {
display:flex;
justify-content:space-between;
margin-bottom:20px
}

.quiz-combo {
color:#f39c12;
font-weight:800;
font-size:18px;
animation:pulse 1s infinite
}

.quiz-timer {
color:#e74c3c;
font-weight:700
}

.quiz-question {
margin-bottom:20px
}

.quiz-combo {
margin-bottom:12px;
color:#ff4757;
font-weight:700;
font-size:18px;
animation:pulse .6s ease
}

.shop-container {
max-width:1200px;
margin:40px auto;
padding:0 20px
}

.shop-header {
text-align:center;
margin-bottom:30px
}

.shop-header h1 {
font-size:28px;
letter-spacing:.12em;
text-transform:uppercase
}

.shop-header p {
color:#9ca3af;
font-size:14px;
margin-top:6px
}

.shop-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:22px
}

.shop-card {
position:relative;
background:radial-gradient(circle at top,#0b1020 0,#020617 70%);
border-radius:18px;
padding:16px 16px 18px;
text-align:center;
border:1px solid #ffffff14;
box-shadow:0 12px 30px #000000d9;
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
overflow:hidden
}

.shop-card:hover {
transform:translateY(-4px) scale(1.02)
}

.shop-card img {
width:100%;
max-height:160px;
object-fit:contain;
margin-bottom:12px;
transition:transform .3s ease
}

.shop-card:hover img {
transform:scale(1.05)
}

.shop-card h3 {
font-size:15px;
margin-bottom:6px;
color:#fff
}

.shop-price {
font-size:14px;
font-weight:700;
margin:6px 0;
color:#facc15
}

.shop-stock {
font-size:12px;
color:#9ca3af;
margin-bottom:10px
}

.shop-card button {
width:100%;
padding:10px 0;
border-radius:999px;
border:none;
cursor:pointer;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
font-size:11px;
transition:all .2s ease
}

.pred-card {
background:linear-gradient(180deg,#0f1320,#090b12);
border-radius:16px;
padding:22px;
margin-bottom:28px;
box-shadow:0 0 25px #0009;
border:1px solid #ffffff0d
}

.pred-fight {
text-align:center;
font-size:20px;
font-weight:700;
margin-bottom:18px
}

.pred-fight .vs {
margin:0 10px;
color:#aaa;
font-weight:400
}

.pred-options {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px
}

.pred-option {
background:#ffffff08;
border-radius:14px;
padding:18px;
text-align:center;
transition:transform .2s ease,box-shadow .2s ease
}

.pred-option:hover {
transform:translateY(-3px);
box-shadow:0 0 15px #ffffff14
}

.pred-option.red {
border:1px solid #e74c3c66
}

.pred-option.blue {
border:1px solid #3498db66
}

.pred-name {
font-size:16px;
font-weight:700;
margin-bottom:6px
}

.pred-odds {
font-size:14px;
color:#f1c40f;
margin-bottom:12px
}

.pred-option .btn {
width:100%;
padding:10px;
border-radius:999px;
font-weight:700;
background:linear-gradient(135deg,#ff9800,#ff5722);
color:#000;
border:none;
cursor:pointer
}

.pred-option .btn:hover {
opacity:.9
}

.pred-form {
margin-top:16px;
background:#ffffff0a;
padding:16px;
border-radius:12px;
text-align:center
}




.hero-wrapper {
position:relative;
z-index:1;
margin-top:-40px
}



.pred-user-points {
background:linear-gradient(135deg,#1c1f2b,#111);
border-radius:12px;
padding:14px 20px;
margin:20px auto 30px;
max-width:400px;
text-align:center;
font-size:18px;
font-weight:700;
color:#f1c40f;
box-shadow:0 0 15px #0009
}

.select-bet:disabled {
background:#444!important;
color:#aaa!important;
cursor:not-allowed;
box-shadow:none
}

.pred-input {
width:100%;
padding:10px;
margin:10px 0;
border-radius:8px;
border:none;
background:#111;
color:#fff
}

.pred-win {
color:#2ecc71;
font-weight:600;
margin-bottom:10px
}

@media (max-width: 768px) {
.pred-options {
grid-template-columns:1fr
}
}

.shop-card button:not(:disabled) {
background:linear-gradient(135deg,#ff9800,#ff5722);
color:#000
}

.shop-card button:not(:disabled):hover {
transform:translateY(-1px);
box-shadow:0 6px 18px #ff980073
}

.shop-card button:disabled {
background:#333;
color:#777;
cursor:not-allowed
}

.shop-card.rarity-common {
border-color:#c8c8c833
}

.shop-card.rarity-rare {
border-color:#3c78ff80;
box-shadow:0 0 18px #3c78ff40
}

.shop-card.rarity-epic {
border-color:#a03cff99;
box-shadow:0 0 22px #a03cff59
}

.shop-card.rarity-legendary {
border-color:#ffd700e6;
box-shadow:0 0 25px #ffd70099 0 0 60px #ffa50059;
animation:legendaryPulse 1.8s infinite alternate
}

@keyframes legendaryPulse {
from {
transform:scale(1);
filter:brightness(1.05)
}

to {
transform:scale(1.04);
filter:brightness(1.25)
}
}

.shop-badge {
position:absolute;
top:12px;
right:12px;
padding:4px 10px;
font-size:10px;
border-radius:999px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase
}

.shop-card.rarity-common .shop-badge {
background:#6b7280
}

.shop-card.rarity-rare .shop-badge {
background:linear-gradient(135deg,#2563eb,#60a5fa)
}

.shop-card.rarity-epic .shop-badge {
background:linear-gradient(135deg,#7c3aed,#c084fc)
}

.shop-card.rarity-legendary .shop-badge {
background:linear-gradient(135deg,#facc15,#f59e0b);
color:#000
}

.shop-reset {
margin-top:20px;
font-size:13px;
color:#9ca3af;
text-align:center
}

@media (max-width: 768px) {
.shop-grid {
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:16px
}

.shop-card img {
max-height:130px
}

.shop-card h3 {
font-size:14px
}
}

@keyframes pulse {
0% {
transform:scale(1)
}

50% {
transform:scale(1.15)
}

100% {
transform:scale(1)
}
}

.quiz-answer {
width:100%;
margin:8px 0
}

.quiz-correct {
color:#2ecc71
}

.quiz-fail {
color:#e74c3c
}

@keyframes pulse {
0% {
transform:scale(1)
}

50% {
transform:scale(1.15)
}

100% {
transform:scale(1)
}
}

.quiz-ranking-mini {
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:10px
}

.quiz-mini-card {
background:#00000059;
border:1px solid #ffffff14;
border-radius:10px;
padding:10px 14px;
font-size:13px;
display:flex;
gap:6px;
align-items:center;
transition:transform .2s ease
}

.quiz-mini-card:hover {
transform:translateY(-2px)
}

.quiz-mini-card .pos {
font-size:16px
}

.quiz-rank-card:hover {
transform:translateY(-4px);
box-shadow:0 0 26px #ef444499
}

.quiz-rank-pos {
font-size:26px;
margin-bottom:6px
}

.quiz-rank-user {
font-weight:700;
font-size:16px;
margin-bottom:6px
}

.quiz-rank-score {
font-size:14px;
color:#facc15;
font-weight:700
}

.quiz-rank-correct {
font-size:12px;
color:#9ca3af
}

.fila-campeon {
background:linear-gradient(90deg,#1c1c1c,#510000);
font-weight:700;
font-size:1.15em;
color:#fff
}

.champion-badge {
background:linear-gradient(135deg,#ffd700,#f90);
color:#000;
font-weight:900;
padding:4px 10px;
border-radius:8px;
box-shadow:0 0 12px #ffc80099
}

.event-badge {
display:inline-block;
padding:4px 10px;
border-radius:999px;
font-size:11px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase
}

.hero-socials {
margin-top:14px;
font-size:13px;
opacity:.85
}

.hero-socials .social-link {
color:#fff;
text-decoration:none;
transition:opacity .2s ease
}

.hero-socials .social-link:hover {
opacity:1
}

.hero-socials .separator {
margin:0 8px;
color:#888
}

.logo-link {
display:flex;
align-items:center;
gap:12px;
text-decoration:none
}

.legendary-effect {
animation:legendaryPulse 1.6s infinite alternate;
will-change:transform
}

.legendary-effect:hover {
transform:none!important
}

@keyframes legendaryPulse {
from {
box-shadow:0 0 25px #ffd70099 0 0 60px #ffa50066 0 0 120px #f003;
filter:brightness(1.15)
}

to {
box-shadow:0 0 35px #ffd700e6 0 0 80px #ffa50099 0 0 160px #ff000059;
filter:brightness(1.4)
}
}

.radar-aside {
margin-top:24px;
padding:20px;
border-radius:16px;
background:linear-gradient(135deg,#0b0f1a,#12091a);
border:1px solid #ffffff0d;
animation:fadeUp .6s ease both
}

@keyframes fadeUp {
from {
opacity:0;
transform:translateY(10px)
}

to {
opacity:1;
transform:translateY(0)
}
}

.radar-aside .radar-grid {
display:grid;
grid-template-columns:1fr;
gap:12px
}

.radar-aside .radar-card {
padding:14px 16px
}

.radar-aside .radar-value {
font-size:28px
}

.aside-title {
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
color:#aaa;
margin-bottom:16px
}

.awards-wrap {
max-width:1200px;
margin:0 auto;
padding:28px 18px
}

.awards-hero {
margin:18px 0 34px;
border-radius:18px;
overflow:hidden;
border:1px solid #ffffff0f;
background:linear-gradient(135deg,#78000040,#0a0a14f2)
}

.awards-hero-inner {
padding:26px 22px
}

.awards-hero h1 {
font-size:34px;
margin:0 0 10px
}

.awards-hero p {
margin:0;
color:#cfcfe6;
max-width:900px
}

.awards-hero-meta {
margin-top:14px;
display:flex;
gap:10px;
flex-wrap:wrap
}

.pill {
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
font-size:13px;
border:1px solid #ffffff1a;
text-decoration:none
}

.pill.ok {
background:#0078282e;
color:#d6ffe3
}

.pill.warn {
background:#a078002e;
color:#ffe8b8
}

.pill.ghost {
background:#ffffff0a;
color:#e9e9ff
}

.award-block {
margin:22px 0 30px;
padding:18px;
border-radius:18px;
background:#06080eb8;
border:1px solid #ffffff0f
}

.award-head {
display:flex;
justify-content:space-between;
gap:14px;
align-items:flex-start;
margin-bottom:14px
}

.award-head h2 {
margin:0 0 6px;
font-size:22px
}

.muted {
color:#aeb0c7
}

.tiny {
font-size:12px
}

.badge {
display:inline-block;
padding:6px 10px;
border-radius:999px;
font-size:12px;
border:1px solid #ffffff1a
}

.badge.open {
background:#c8000033;
color:#ffd2d2
}

.badge.closed {
background:#ffffff0f;
color:#ddd
}

.nom-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:14px
}

.nom-card {
border-radius:16px;
overflow:hidden;
border:1px solid #ffffff12;
background:#0a0c16cc;
transition:transform .15s ease,border-color .15s ease
}

.nom-card:hover {
transform:translateY(-2px);
border-color:#ff505059
}

.nom-card.selected {
border-color:#ff3c3ca6;
box-shadow:0 0 0 2px #ff3c3c1a inset
}

.nom-media {
background:#0b0e17;
min-height:160px;
display:flex;
align-items:center;
justify-content:center
}

.nom-media .placeholder {
color:#777;
font-size:14px
}

.nom-media .thumb {
width:100%;
height:180px;
object-fit:cover
}

.nom-media .yt {
width:100%;
height:180px
}

.nom-media .vid {
width:100%;
height:180px
}

.nom-body {
padding:14px
}

.nom-body h3 {
margin:0 0 6px;
font-size:16px
}

.nom-actions {
margin-top:10px;
display:flex;
gap:10px;
align-items:center
}

.btn {
cursor:pointer;
border:0;
border-radius:12px;
padding:10px 12px;
font-weight:700;
font-size:13px;
background:linear-gradient(135deg,#ff2d2d,#b10000);
color:#fff;
width:100%
}

.btn:hover {
filter:brightness(1.06)
}

.btn.disabled {
background:#ffffff14;
color:#bbb;
cursor:not-allowed
}

.btn.loading {
opacity:.75
}

.results-locked {
padding:14px;
border-radius:14px;
background:#ffffff0d;
color:#cfcfe6
}

.results-list {
display:flex;
flex-direction:column;
gap:10px
}

.result-row {
display:grid;
grid-template-columns:1.2fr 2fr .8fr;
gap:12px;
align-items:center;
padding:12px;
border-radius:14px;
background:#ffffff0a;
border:1px solid #ffffff0f
}

.result-row.winner {
border-color:#ffd25a59;
background:#ffd25a14
}

.result-title {
color:#f1f2ff;
font-weight:800
}

.result-bar {
height:10px;
border-radius:999px;
background:#ffffff14;
overflow:hidden
}

.result-bar .bar {
height:100%;
background:linear-gradient(90deg,#ff2d2d,#ffb13b)
}

.result-meta {
color:#cfcfe6;
text-align:right
}

.legendary-text {
margin:20px 0;
font-size:28px;
font-weight:700;
color:#ffd700;
text-shadow:0 0 10px #ffd700e6 0 0 30px #ffa50099;
animation:legendaryText 1.2s infinite alternate
}

@keyframes legendaryText {
from {
opacity:.7
}

to {
opacity:1
}
}

.badge-finalizada {
color:#2ecc71;
font-weight:700
}

.chat-swc {
background:#0b0f1a;
border:1px solid #222;
border-radius:14px;
padding:16px;
max-width:420px
}

#chat-box {
height:220px;
overflow-y:auto;
margin-bottom:10px
}

.chat-msg {
margin-bottom:8px;
font-size:13px
}

.chat-msg strong {
color:#ff4040
}

.ganador {
color:#ffd700;
text-shadow:0 0 6px #ffd70099
}

.pelea-division {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}


.badge-titulo {
display:inline-block;
margin-top:6px;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:700
}

.pelea-nombres {
font-size:15px;
font-weight:600
}

.resultado {
font-weight:700
}

.resultado.empate {
color:#d4a017
}

.tarjeta-noticia img {
width:100%;
height:180px;
object-fit:cover;
border-radius:10px;
margin-bottom:12px
}

.noticia-img {
overflow:hidden
}

.resultado.nc {
color:#c0392b
}

.resultado strong {
color:#2ecc71
}

.pelea-division {
font-size:13px;
opacity:.85;
margin-top:4px
}

.rank-interino {
background:linear-gradient(90deg,#2b1b00,#000);
border-left:4px solid #ffd700
}

.rank-icon {
margin-left:6px;
font-size:14px
}

.rank-up {
background:#00ff000d
}

.rank-down {
background:#ff00000d
}

.rank-new {
background:#ffd70014
}

.rank-stay {
opacity:.9
}

.badge-interino {
background:#ffd700;
color:#000;
font-size:11px;
padding:2px 6px;
border-radius:6px;
margin-left:6px;
font-weight:700
}

.pelea-resultado {
margin-top:8px;
font-weight:600;
color:#f5c842
}

.pelea-programada {
margin-top:8px;
opacity:.7;
font-style:italic
}

.pelea-titulo {
border:2px solid #d4af37;
box-shadow:0 0 12px #d4af3759
}

.badge-titulo.indiscutido {
background:linear-gradient(90deg,#d4af37,#fc0);
color:#000
}

.badge-titulo.interino {
background:linear-gradient(90deg,#bbb,#eee);
color:#000
}

.pelea-titulo {
box-shadow:0 0 0 2px #d4af37
}

.resultado {
margin-top:6px;
font-weight:600
}

.chat-msg em {
font-size:10px;
color:#888;
margin-left:6px
}

#chat-form {
display:flex;
gap:6px
}

#chat-input {
flex:1;
padding:6px;
border-radius:6px;
border:none
}

.win {
color:#2ecc71;
font-weight:700
}

.foro-meta {
font-size:12px;
opacity:.7
}

.foro-tema {
padding:12px 0;
border-bottom:1px solid #ffffff14
}

.tarjeta h3 a {
color:#e10600;
text-decoration:none
}

.tarjeta h3 a:hover {
text-decoration:underline
}

.loss {
color:#e74c3c;
font-weight:700
}

.logo-img {
height:50px;
width:auto;
display:block;
filter:drop-shadow(0 0 6px #f006)
}

.estado.activo {
color:#2ecc71
}

.estado.lesionado {
color:#f39c12
}

.estado.suspendido {
color:#e74c3c
}

.estado.retirado {
color:#7f8c8d
}

.duplicate-msg {
margin-top:10px;
font-weight:700;
color:#f5c542;
text-shadow:0 0 8px #f5c54299
}

.logo-link:hover .logo-img {
filter:drop-shadow(0 0 6px #f009)
}

.fight-type.main_event {
color:#ffd700;
font-weight:700
}

.fight-type.co_main {
color:silver;
font-weight:700
}

.logo-text {
font-weight:600;
letter-spacing:1px;
color:#fff;
font-size:14px
}

.event-fight-night {
background:#ff3c3c26;
color:#ff4d4d;
border:1px solid #ff3c3c66;
box-shadow:0 0 12px #ff3c3c40
}

.event-numerado {
background:#ffc80026;
color:#ffd24d;
border:1px solid #ffc80080;
box-shadow:0 0 14px #ffc80059
}

.champion-box {
background:linear-gradient(90deg,#e0b805,#c47601);
padding:16px;
color:#fff;
border-radius:10px;
margin-bottom:14px;
display:flex;
align-items:center;
justify-content:space-between
}

.shop-container {
max-width:1000px;
margin:60px auto;
padding:20px;
color:#fff
}

.shop-title {
font-size:36px;
margin-bottom:8px;
font-weight:700
}

.shop-subtitle {
font-size:16px;
color:#aaa;
margin-bottom:30px
}

.points-box {
background:#111;
border:1px solid #d32f2f;
padding:15px;
border-radius:8px;
width:fit-content;
margin-bottom:30px
}

.points-label {
font-size:16px;
margin-right:10px
}

.points-value {
font-size:22px;
color:#f44;
font-weight:700
}

.packs-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px
}

.pack-card {
background:#0d0d0d;
padding:20px;
border-radius:10px;
border:1px solid #222;
text-align:center;
transition:.2s
}

.pack-card:hover {
transform:translateY(-5px);
border-color:#d32f2f
}

.pack-card h2 {
font-size:22px;
font-weight:700;
margin-bottom:10px
}

.pack-card p {
color:#bbb;
font-size:14px;
min-height:60px
}

.pack-price {
background:#111;
padding:8px;
margin:15px 0;
border-radius:6px;
font-weight:700;
color:#fff
}

.btn-pack {
background:#d32f2f;
color:#fff;
padding:10px 16px;
border-radius:6px;
text-decoration:none;
transition:.2s;
display:inline-block
}

.menu-extra {
color:#ffb347;
font-weight:700
}

.admin-table {
width:100%;
border-collapse:collapse;
margin-top:15px;
background:#151821;
color:#fff;
border-radius:8px;
overflow:hidden
}

.admin-table th {
background:#20242f;
padding:14px;
text-align:left;
font-weight:700;
color:#ddd
}

.admin-table td {
padding:12px;
border-bottom:1px solid #2a2f3a
}

.admin-table tr:hover {
background:#1d2029
}

.btn-admin-primary {
background:#e63946;
padding:10px 16px;
color:#fff;
border-radius:6px;
text-decoration:none;
font-weight:700;
transition:.2s
}

.btn-admin-primary:hover {
background:#ff4d5a
}

.btn-admin-small {
padding:6px 12px;
background:#2d6cdf;
color:#fff;
border-radius:5px;
text-decoration:none
}

.btn-admin-danger {
padding:6px 12px;
background:#c71c1c;
color:#fff;
border-radius:5px;
text-decoration:none
}

.btn-admin-danger:hover {
background:#e12222
}

.rarity-tag {
padding:4px 10px;
border-radius:6px;
color:#fff;
font-weight:700
}

.rarity-common {
background:#6c7884
}

.rarity-rare {
background:#3478f6
}

.rarity-epic {
background:#a335ee
}

.rarity-legendary {
background:#fb3;
color:#000
}

.admin-title {
font-size:28px;
margin-bottom:20px
}

.admin-btn {
padding:8px 14px;
border-radius:6px;
display:inline-block;
text-decoration:none;
font-weight:700
}

.admin-btn.primary {
background:#4e8cff;
color:#fff
}

.admin-btn.danger {
background:#d93636;
color:#fff
}

.admin-btn.small {
padding:4px 8px;
font-size:14px
}

.admin-table {
width:100%;
border-collapse:collapse;
margin-top:20px
}

.admin-table th,.admin-table td {
padding:10px;
border-bottom:1px solid #222
}

.card-thumb {
width:60px;
border-radius:6px
}

.rarity.common {
color:#bfbfbf
}

.rarity.rare {
color:#4e8cff
}

.rarity.epic {
color:#a93aff
}

.rarity.legendary {
color:#f7c843
}

.btn-pack:hover {
background:#f44
}

.card-animation {
opacity:0;
transform:scale(0.7);
transition:all 1.2s ease-out
}

.card-animation.show {
opacity:1;
transform:scale(1)
}

.rarity-common {
box-shadow:0 0 20px #fff
}

.rarity-rare {
box-shadow:0 0 25px blue
}

.rarity-epic {
box-shadow:0 0 30px purple
}

.rarity-legendary {
box-shadow:0 0 35px #ffd700
}

.cards-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:24px;
margin-top:30px
}

.card-item {
position:relative;
background:#0c0f16;
border-radius:14px;
padding:12px;
text-align:center;
transition:transform .2s
}

.card-item:hover {
transform:scale(1.05)
}

.card-item img {
max-width:100%;
border-radius:10px
}

.card-name {
margin-top:10px;
font-weight:700;
color:#fff
}

.card-count {
position:absolute;
top:10px;
right:10px;
background:#000000d9;
color:#fff;
font-weight:700;
padding:6px 10px;
border-radius:999px;
font-size:14px;
box-shadow:0 0 10px #ffffff4d
}

.rarity-common {
box-shadow:0 0 10px #aaa
}

.rarity-rare {
box-shadow:0 0 15px #2e8bff
}

.rarity-epic {
box-shadow:0 0 20px #a020f0
}

.rarity-legendary {
box-shadow:0 0 25px #ffd700
}

.pack-bronze {
border-top:4px solid #8c6239
}

.pack-silver {
border-top:4px solid silver
}

.pack-gold {
border-top:4px solid #d4af37
}

.pack-elite {
border-top:4px solid #6a00ff
}

.champion-label {
font-weight:700;
font-size:18px;
letter-spacing:1px;
text-transform:uppercase
}

.champion-name {
font-size:20px;
font-weight:700;
color:#fff
}

.champion-record {
font-size:16px;
opacity:.9
}

.tabla {
width:100%;
border-collapse:collapse;
margin-top:12px;
font-size:13px;
background:#020617;
border-radius:16px;
overflow:hidden;
box-shadow:0 18px 40px #000000e6
}

.tabla thead {
background:#020617
}

.tabla th,.tabla td {
padding:10px 12px;
border-bottom:1px solid #111827
}

.tabla th {
font-size:11px;
text-transform:uppercase;
letter-spacing:.18em;
color:#9ca3af;
text-align:left
}

.tabla tbody tr:nth-child(odd) td {
background:#020617
}

.tabla tbody tr:nth-child(even) td {
background:#050816
}

.tabla tbody tr:hover td {
background:#111827
}

.formulario {
max-width:480px;
margin-top:10px;
margin-bottom:24px;
display:flex;
flex-direction:column
}

.formulario label {
font-size:12px;
text-transform:uppercase;
letter-spacing:.16em;
color:#9ca3af;
margin-bottom:4px
}

.formulario input,.formulario textarea,.formulario select {
margin-bottom:12px;
padding:8px 10px;
border-radius:10px;
border:1px solid #374151;
background:#020617;
color:#f9fafb;
font-size:14px
}

.formulario textarea {
resize:vertical;
min-height:80px
}

.formulario input:focus,.formulario textarea:focus,.formulario select:focus {
outline:none;
border-color:#ef4444;
box-shadow:0 0 0 1px #ef4444cc
}

.formulario button {
margin-top:4px;
padding:10px 0;
border:none;
border-radius:999px;
background:#ef4444;
color:#111827;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.18em;
cursor:pointer;
box-shadow:0 0 25px #ef4444d9
}

.formulario button:hover {
background:#fb7185
}

.mensaje-error,.mensaje-ok {
padding:8px 10px;
border-radius:10px;
font-size:13px;
margin-bottom:12px
}

.mensaje-error {
background:#7f1d1d66;
border:1px solid #ef4444;
color:#fecaca
}

.mensaje-ok {
background:#16a34a66;
border:1px solid #22c55e;
color:#bbf7d0
}

.footer {
text-align:center;
padding:18px 0 14px;
border-top:1px solid #111827;
font-size:12px;
color:#9ca3af;
background:#020617
}

@media (max-width: 900px) {
.hero {
grid-template-columns:minmax(0,1fr);
padding:28px 22px 24px
}

.hero-aside {
justify-content:flex-start
}
}

.nav-item {
position:relative
}

.nav-link {
cursor:pointer;
user-select:none
}

@media (max-width: 768px) {
.has-dropdown .dropdown {
position:static;
display:none;
box-shadow:none;
background:#ffffff0d;
margin-top:6px
}

.has-dropdown .dropdown.open {
display:block
}
}

.has-dropdown .dropdown {
position:absolute;
top:100%;
left:0;
min-width:180px;
background:#0a0f1ef2;
border-radius:14px;
box-shadow:0 20px 40px #0009;
padding:8px;
display:none;
z-index:999
}

.has-dropdown:hover .dropdown {
display:block
}

.dropdown a {
display:block;
padding:10px 14px;
border-radius:10px;
font-size:14px;
color:#fff
}

.dropdown a:hover {
background:#ffffff14
}

@media (min-width: 769px) {
.main-nav {
position:static;
display:flex;
flex-direction:row;
height:auto;
background:transparent;
padding:0
}

.menu-overlay {
display:none
}
}

.hof-wrapper {
max-width:1400px;
margin:0 auto;
padding:80px 24px;
color:#f1f1f1;
background:radial-gradient(circle at top,#d4af3714,transparent 60%)
}

.hof-title {
text-align:center;
font-size:64px;
font-weight:900;
letter-spacing:4px;
color:#d4af37;
margin-bottom:12px;
text-transform:uppercase
}

.hof-subtitle {
text-align:center;
font-size:16px;
color:#cfcfcf;
margin-bottom:70px
}

.hof-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:40px
}

.hof-card {
position:relative;
background:linear-gradient(180deg,#0b0d12 0%,#141824 100%);
border-radius:20px;
overflow:hidden;
border:1px solid #d4af3759;
box-shadow:0 20px 40px #0009 inset 0 0 0 1px #ffffff05;
transition:transform .3s ease,box-shadow .3s ease
}

.hof-card:hover {
transform:translateY(-6px);
box-shadow:0 30px 60px #000c 0 0 30px #d4af3726
}

.hof-legend {
position:relative;
border-radius:22px
}

.hof-legend::before {
content:"";
position:absolute;
inset:-2px;
border-radius:inherit;
background:linear-gradient(120deg,#3b2d00,#d4af37,#f7e08c,#d4af37,#3b2d00);
background-size:300% 300%;
animation:hofGlow 6s linear infinite;
z-index:0
}

.tabla {
width:100%;
border-collapse:collapse
}

.tabla th,.tabla td {
padding:12px;
border-bottom:1px solid #222;
text-align:center
}

.tabla th {
color:#f5c542
}

.tabla tr.gold {
background:linear-gradient(90deg,#3a2a00,#5a4100);
color:#ffd700;
font-weight:700
}

.pred-countdown {
text-align:center;
font-weight:600;
margin:6px 0 10px;
color:#f5c542
}

.pred-countdown.closed {
color:#ff4d4d
}

.apostar-btn.disabled {
opacity:.5;
cursor:not-allowed
}

.user-points {
margin:12px 0 24px;
font-size:16px;
color:#f5c46c;
text-align:center
}

.fighter-name {
margin:0 0 6px;
font-size:28px;
font-weight:900;
letter-spacing:.5px
}

.fighter-nickname {
margin:0 0 14px;
opacity:.8;
font-weight:600
}

.hof-legend::after {
content:"";
position:absolute;
inset:2px;
background:linear-gradient(180deg,#0b0d12,#141824);
border-radius:20px;
z-index:1
}

.hof-legend > * {
position:relative;
z-index:2
}

@keyframes hofGlow {
0% {
background-position:0 50%
}

50% {
background-position:100% 50%
}

100% {
background-position:0 50%
}
}

.hof-legend:hover::before {
filter:brightness(1.3)
}

.hof-card img {
width:100%;
height:auto;
max-height:600px;
object-fit:contain;
background:radial-gradient(circle,#111 0%,#000 70%)
}

.hof-card::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,#0000 30%,#000000d9 85%);
pointer-events:none
}

.hof-card > :not(img) {
position:relative;
z-index:2
}

.hof-card h2 {
font-size:34px;
font-weight:900;
margin:24px 24px 4px;
color:#f5d36b;
text-transform:uppercase
}

.hof-card h3 {
font-size:20px;
margin:0 24px 6px;
color:#fff
}

.hof-role {
margin:0 24px 16px;
font-size:14px;
font-weight:700;
letter-spacing:1.5px;
color:#d4af37;
text-transform:uppercase
}

.hof-desc {
margin:0 24px 18px;
font-size:14px;
color:#d6d6d6;
line-height:1.6
}

.hof-achievements {
list-style:none;
margin:0 24px 28px;
padding:0
}

.hof-achievements li {
padding-left:22px;
margin-bottom:8px;
position:relative;
font-size:14px;
color:#f0e6b2
}

.hof-achievements li::before {
content:"★";
position:absolute;
left:0;
color:#d4af37
}

.hall-of-famer-badge {
display:inline-block;
margin:14px 0;
padding:8px 22px;
font-size:13px;
font-weight:900;
letter-spacing:2px;
text-transform:uppercase;
color:#2b2100;
background:linear-gradient(135deg,#f7e08c,#d4af37,#b8922c);
border-radius:999px;
box-shadow:0 4px 12px #d4af3799 inset 0 0 0 1px #ffffff73;
text-align:center
}

@media (max-width: 600px) {
.hof-title {
font-size:42px
}

.hof-card img {
height:300px
}
}

@media (max-width: 768px) {
.menu-toggle {
display:block;
position:relative;
z-index:1300;
background:none;
border:none;
width:32px;
height:24px;
cursor:pointer
}

.menu-toggle span {
position:absolute;
left:0;
width:100%;
height:3px;
background:#fff;
border-radius:3px;
transition:all .35s ease
}

.menu-toggle span:nth-child(1) {
top:0
}

.menu-toggle span:nth-child(2) {
top:10px
}

.menu-toggle span:nth-child(3) {
top:20px
}

.menu-toggle.active span:nth-child(1) {
transform:rotate(45deg);
top:10px
}

.menu-toggle.active span:nth-child(2) {
opacity:0
}

.menu-toggle.active span:nth-child(3) {
transform:rotate(-45deg);
top:10px
}

.main-nav {
position:fixed;
top:0;
right:-100%;
width:280px;
height:100vh;
background:#020617;
padding:90px 22px 30px;
display:flex;
flex-direction:column;
gap:18px;
transition:right .35s ease;
z-index:1200;
overflow-y:auto;
flex-direction:column;
pointer-events:auto
}

.main-nav.active {
right:0
}

.menu-overlay {
position:fixed;
inset:0;
background:#000000a6;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
z-index:1100
}

.menu-overlay.active {
opacity:1;
pointer-events:auto
}
}

@media (max-width: 640px) {
.hero-wrapper {
padding:20px 14px 0
}

.contenedor-page {
padding:0 14px
}

.hero h1 {
font-size:30px
}

.section-title {
font-size:14px
}
}

@media (max-width: 768px) {
header.top-nav {
position:relative;
z-index:1200
}

.main-nav {
position:fixed!important;
top:0;
right:-280px;
width:280px;
height:100vh;
background:#020617;
padding:90px 22px 30px;
display:flex;
flex-direction:column;
gap:18px;
transition:right .35s ease;
z-index:1150;
overflow-y:auto
}

.main-nav.active {
right:0
}

.menu-toggle {
display:block;
z-index:1300
}

.menu-overlay {
position:fixed;
inset:0;
background:#000000a6;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
z-index:1100
}

.menu-overlay.active {
opacity:1;
pointer-events:auto
}

.tabla thead {
display:none
}

.tabla,.tabla tbody {
display:block;
width:100%;
background:none;
box-shadow:none
}

.tabla tbody tr {
margin-bottom:14px;
border-radius:16px;
background:linear-gradient(135deg,#0b1020,#050814);
border:1px solid #ffffff14;
box-shadow:0 10px 26px #000000b3;
overflow:hidden
}

.tabla tbody tr .fight-head {
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 16px;
cursor:pointer;
user-select:none
}

.tabla tbody tr .fight-head h4 {
font-size:14px;
font-weight:800;
margin:0;
color:#fff
}

.tabla tbody tr .fight-sub {
font-size:12px;
color:#9ca3af;
margin-top:4px
}

.tabla tbody tr .arrow {
font-size:18px;
transition:transform .25s ease;
opacity:.7
}

.tabla tbody tr .fight-body {
display:none;
padding:12px 16px 16px;
border-top:1px solid #ffffff14;
font-size:13px
}

.fight-row {
display:flex;
justify-content:space-between;
margin-bottom:6px
}

.fight-row span:first-child {
color:#9ca3af;
font-size:11px;
text-transform:uppercase;
letter-spacing:.12em;
font-weight:700
}

.tabla tbody tr.open .fight-body {
display:block
}

.tabla tbody tr.open .arrow {
transform:rotate(180deg)
}

.tabla thead {
display:none!important
}

.tabla,.tabla tbody {
display:block!important;
width:100%!important;
background:none!important;
box-shadow:none!important
}

.tabla tbody tr {
display:block!important;
margin-bottom:14px!important;
padding:12px 14px!important;
border-radius:16px!important;
background:linear-gradient(135deg,#0b1020,#050814)!important;
border:1px solid #ffffff14!important;
box-shadow:0 8px 22px #000000a6!important
}

.tabla tbody tr td {
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
gap:10px!important;
padding:6px 0!important;
border:none!important;
background:none!important;
white-space:normal!important;
font-size:13px!important;
text-align:left!important
}

.tabla tbody tr td:nth-child(1) {
font-size:18px!important;
font-weight:900!important;
color:#ffd700!important
}

.tabla tbody tr td:nth-child(2) {
flex-direction:column!important;
align-items:flex-start!important;
gap:6px!important;
font-size:14px!important;
font-weight:700!important;
color:#fff!important
}

.tabla tbody tr td:nth-child(3),.tabla tbody tr td:nth-child(4) {
font-size:13px!important;
color:#cbd5f5!important
}

.tabla .badge-interino,.tabla .badge-campeon-p4p,.tabla .badge-p4p-king {
margin-top:6px!important;
display:inline-block!important
}

.tabla-p4p tbody tr:first-child {
border:2px solid #ffd700!important;
box-shadow:0 0 30px #ffd70073!important
}

.champion-box {
flex-direction:column!important;
align-items:center!important;
gap:8px!important;
text-align:center!important;
padding:16px!important
}

.champion-label {
font-size:13px!important;
letter-spacing:2px!important
}

.champion-name {
font-size:18px!important;
font-weight:900!important
}

.champion-record {
font-size:14px!important;
opacity:.9!important
}
}

.historial-list {
display:none!important
}

.historial-list.active {
display:block!important
}

.historial-list.mma:not(.active),.historial-list.muay:not(.active) {
display:none!important
}

.historial-tabs {
display:flex;
gap:10px;
margin-bottom:14px
}

.historial-tabs .tab-btn {
flex:1;
padding:10px 0;
border-radius:999px;
border:1px solid #ffffff26;
background:#0b0f1c;
color:#aaa;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:all .2s ease
}

.historial-tabs .tab-btn.active {
background:linear-gradient(135deg,#ff2a2a,#f55);
color:#fff;
border-color:transparent
}

@media (max-width: 768px) {
.tabla {
width:100%;
border-radius:16px;
overflow:hidden;
background:none;
box-shadow:none
}

.tabla thead {
display:none
}

.tabla tbody {
display:block
}

.tabla tbody tr {
margin-bottom:14px;
border-radius:16px;
background:linear-gradient(135deg,#0b1020,#050814);
border:1px solid #ffffff14;
box-shadow:0 10px 26px #000000b3;
overflow:hidden
}

.tabla tbody tr td {
display:flex;
justify-content:space-between;
gap:10px;
padding:10px 14px;
border:none;
background:none;
white-space:normal;
font-size:13px;
text-align:left
}

.tabla tbody tr td:nth-child(1) {
flex-direction:column;
align-items:flex-start;
gap:6px;
font-weight:800;
color:#fff;
border-bottom:1px solid #ffffff14
}

.tabla tbody tr td:nth-child(4),.tabla tbody tr td:nth-child(5) {
display:none
}
}
/* =========================
   HISTORIAL – CATEGORÍA
========================= */
.badge-division {
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:999px;
  background:linear-gradient(135deg,#1e293b,#020617);
  color:#38bdf8;
  border:1px solid #38bdf84d;
  box-shadow:0 0 8px #38bdf826;
}

/* Mobile: que baje de línea y respire */
@media (max-width: 768px) {
  .badge-division {
    margin-top:6px;
    margin-left:0;
  }
}
/* =========================
   ADMIN – EDITAR DIVISIÓN
========================= */
.btn-edit-division{
  margin-left:8px;
  font-size:11px;
  padding:4px 8px;
  border-radius:8px;
  background:#ffffff14;
  border:1px solid #ffffff26;
  color:#facc15;
  cursor:pointer
}
.btn-edit-division:hover{
  background:#facc1533
}

.modal-division{
  position:fixed;
  inset:0;
  background:#000000b3;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000
}
.modal-division.open{display:flex}

.modal-content{
  background:#020617;
  padding:22px;
  border-radius:16px;
  width:100%;
  max-width:320px;
  box-shadow:0 20px 50px #000
}
.modal-content h3{
  margin-bottom:14px;
  text-align:center
}
.modal-content select{
  width:100%;
  padding:10px;
  border-radius:10px;
  background:#0b0f1c;
  color:#fff;
  border:1px solid #ffffff26;
  margin-bottom:16px
}
.modal-actions{
  display:flex;
  gap:10px
}
/* ===========================
   BADGES POR DIVISIÓN
=========================== */

/* ================================
   PESO LIGERO PS5 — FIX DEFINITIVO
================================ */
.division-peso-ligero-ps5 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 6px 14px;
    border-radius: 999px;

    background: linear-gradient(135deg, #ffffff, #dbeafe) !important;
    color: #000000 !important; /* 🔥 NEGRO FORZADO */

    font-weight: 900 !important;
    font-size: 11px !important;
    letter-spacing: .12em;
    text-transform: uppercase;

    opacity: 1 !important;
    text-shadow: none !important;

    border: 2px solid #2563eb;
    box-shadow:
        inset 0 0 0 1px #ffffff,
        0 0 10px #2563eb66;

    filter: none !important;
}

.fighter-photo-wrapper {
    width: 220px;
    height: 220px;
    margin: 0 auto 16px;
    position: relative;
}
.fighter-photo-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(135deg, #ef4444, #fb7185);
    box-shadow: 0 0 30px #ef444480;
    overflow: hidden; /* 🔥 AQUÍ sí */
}

.photo-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: gold;
    color: #000;
    font-size: 18px;
    font-weight: 900;
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 0 12px #ffd700;
    z-index: 10;
}


.fighter-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #020617;
    border: 3px solid #020617;
}

@media (max-width: 640px) {
    .fighter-photo-wrapper {
        width: 160px;
        height: 160px;
    }
}




/* Peso Welter PS5 → negro / azul */
.division-peso-welter-ps5 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #020617, #0b3c7d);
    color: #e5edff;
    border: 1px solid #2563eb;
    box-shadow: 0 0 10px #2563eb80;
}

/* Peso Ligero Xbox → verde */
.division-peso-ligero-xbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    color: #eaffea;
    border: 1px solid #4caf50;
    box-shadow: 0 0 10px #4caf5080;
}
/* 🔒 FORZAR OCULTACIÓN REAL POR DISCIPLINA (MÓVIL Y DESKTOP) */
#tablaHistorial tr.hidden-by-discipline {
    display: none !important;
}

/* Por si en móvil usas cards */
@media (max-width: 768px) {
    #tablaHistorial tr.hidden-by-discipline {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}
/* ================= NEWS BOX ================= */
/* Recuadro noticias */
/* ================= NEWS CARDS ================= */

.news-wrapper {
  max-width: 1280px;
  margin: 32px auto;
  padding: 0 16px;
}

.news-box {
  background: #05070f;
  border-radius: 16px;
  padding: 16px 18px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.06);
}

.news-header h2 {
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
  letter-spacing: .5px;
}

/* Carrusel */
.news-carousel {
  position: relative;
  overflow: hidden;
}

/* Tarjeta */
.news-card {
  display: none;
  gap: 14px;
  align-items: center;
}
.badge-programada{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  opacity:.9;
  border:1px solid rgba(255,255,255,.18);
}

.news-card.active {
  display: flex;
  animation: fadeSlide .6s ease;
}
.tarjeta-evento a { text-decoration: none; }
.tarjeta-evento a:hover { text-decoration: underline; }

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.badge-olimpiadas{
  display:inline-block;
  margin-left:10px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.35);
}

/* Imagen */
.news-image {
  width: 160px;
  height: 100px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* Texto */
.news-content h3 {
  font-size: 15px;
  margin: 0 0 4px;
  color: #fff;
}

.news-content p {
  font-size: 13px;
  color: #b5b7c2;
  margin-bottom: 6px;
}

.news-link {
  font-size: 13px;
  color: #ef4444;
  text-decoration: none;
  font-weight: 600;
}

.news-link:hover {
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 640px) {
  .news-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-image {
    width: 100%;
    height: 140px;
  }
}