/* =====================================================================
   ONAPB — Kinetic Arena v3
   Capa de innovación visual sobre kinetic-arena.css (sin tocar colores).
   Carga DESPUÉS de base.css y kinetic-arena.css.
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   01. TOKENS DE MOTION
   ───────────────────────────────────────────────────────────────────── */
:root {
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-power: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-arc: cubic-bezier(0.65, 0.05, 0.36, 1);

    --dur-snap: 140ms;
    --dur-quick: 220ms;
    --dur-base: 360ms;
    --dur-soft: 560ms;
    --dur-stage: 900ms;

    --primary-glow: 0 0 0 0 rgba(194, 0, 0, 0.45);
    --primary-shadow-soft: 0 18px 40px -22px rgba(194, 0, 0, 0.55);
    --kinetic-shadow-deep: 0 40px 80px -30px rgba(26, 18, 8, 0.35);
    --kinetic-shadow-card: 0 22px 45px -28px rgba(26, 18, 8, 0.28);

    --grain-mix: multiply;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   02. SCROLLBAR PERSONALIZADA
   ───────────────────────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--surface-container-low);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--primary-deep));
    border-radius: 999px;
    border: 2px solid var(--surface-container-low);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-deep);
}

/* ─────────────────────────────────────────────────────────────────────
   03. BARRA DE PROGRESO DE LECTURA (top)
   ───────────────────────────────────────────────────────────────────── */
#kinetic-reading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), #ff3232, var(--primary-deep));
    background-size: 200% 100%;
    animation: barShimmer 3s linear infinite;
    z-index: 2000;
    transition: width 0.12s linear;
    box-shadow: 0 0 12px rgba(194, 0, 0, 0.6);
    pointer-events: none;
}

@keyframes barShimmer {
    from {
        background-position: 0% 0;
    }

    to {
        background-position: 200% 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   04. CURSOR PERSONALIZADO (sólo desktop con puntero fino)
   ───────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {

    body.kinetic-cursor-on,
    body.kinetic-cursor-on * {
        cursor: none;
    }

    body.kinetic-cursor-on input,
    body.kinetic-cursor-on textarea,
    body.kinetic-cursor-on select {
        cursor: text;
    }

    .kinetic-cursor-dot,
    .kinetic-cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        will-change: transform;
        /* sin mix-blend-mode: era el responsable de "perder" el cursor en fondos cálidos */
    }

    .kinetic-cursor-dot {
        width: 10px;
        height: 10px;
        background: var(--primary);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        /* Doble anillo: borde negro fino para alto contraste sobre cualquier fondo */
        border: 2px solid #111;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6),
                    0 2px 8px rgba(0, 0, 0, 0.45);
        transition: transform var(--dur-snap) var(--ease-spring),
            width var(--dur-quick), height var(--dur-quick),
            background var(--dur-quick), border-color var(--dur-quick);
    }

    .kinetic-cursor-ring {
        width: 38px;
        height: 38px;
        /* Anillo rojo grueso con outline negro para que se vea sobre claro y oscuro */
        border: 3px solid var(--primary);
        outline: 2px solid #111;
        outline-offset: -1px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5),
                    0 4px 14px rgba(0, 0, 0, 0.35);
        transform: translate(-50%, -50%);
        transition: transform 0.18s var(--ease-out-soft),
            width var(--dur-quick), height var(--dur-quick),
            border-color var(--dur-quick),
            opacity var(--dur-quick);
    }

    .kinetic-cursor-ring.is-hover {
        width: 60px;
        height: 60px;
        border-color: var(--primary-deep);
        background: rgba(194, 0, 0, 0.18);
        outline-color: #000;
    }

    .kinetic-cursor-dot.is-hover {
        width: 6px;
        height: 6px;
        background: #fff;
        border-color: var(--primary-deep);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   05. NAVBAR — efecto glass kinético + indicador animado
   ───────────────────────────────────────────────────────────────────── */
.custom-navbar {
    transition: background-color 0.4s var(--ease-out-soft),
        border-color 0.4s var(--ease-out-soft),
        box-shadow 0.4s var(--ease-out-soft),
        padding 0.3s var(--ease-out-soft) !important;
}

.custom-navbar.is-scrolled {
    background-color: rgba(245, 243, 239, 0.78) !important;
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-bottom-color: rgba(194, 0, 0, 0.15) !important;
    box-shadow: 0 8px 30px -20px rgba(26, 18, 8, 0.18) !important;
    padding: 6px 0 !important;
}

.custom-navbar .navbar-logo {
    transition: transform 0.45s var(--ease-spring), filter 0.4s ease;
}

.custom-navbar .navbar-brand:hover .navbar-logo {
    transform: rotate(-6deg) scale(1.06);
    filter: drop-shadow(0 6px 14px rgba(194, 0, 0, 0.35));
}

.custom-navbar .nav-link {
    overflow: hidden;
}

.custom-navbar .nav-link::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.42s var(--ease-arc);
}

.custom-navbar .nav-link:hover::before,
.custom-navbar .nav-link.active::before {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Cuadrito decorativo en active */
.custom-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 4px;
    height: 4px;
    background: var(--primary);
    display: block !important;
    animation: kineticBlink 1.6s steps(2, jump-none) infinite;
}

@keyframes kineticBlink {
    50% {
        opacity: 0.2;
    }
}

/* Bell de notificaciones */
#notif-bell .bi-bell-fill {
    transition: transform 0.35s var(--ease-spring);
}

#notif-bell:hover .bi-bell-fill {
    animation: bellShake 0.6s var(--ease-out-soft);
}

@keyframes bellShake {

    0%,
    100% {
        transform: rotate(0);
    }

    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    60% {
        transform: rotate(8deg);
    }

    80% {
        transform: rotate(-4deg);
    }
}

#notif-badge {
    box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.7);
    animation: badgeRing 1.8s var(--ease-out-soft) infinite;
}

@keyframes badgeRing {
    0% {
        box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.6);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(194, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(194, 0, 0, 0);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   06. CARDS KINÉTICAS — tilt + spotlight + reveal
   ───────────────────────────────────────────────────────────────────── */
.kinetic-card {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition:
        transform 0.55s var(--ease-out-soft),
        box-shadow 0.55s var(--ease-out-soft),
        border-color 0.45s ease;
}

.kinetic-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
            rgba(194, 0, 0, 0.08),
            transparent 55%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 1;
}

.kinetic-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--primary-deep));
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.5s var(--ease-arc);
    z-index: 2;
}

.kinetic-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--kinetic-shadow-card);
    border-color: rgba(194, 0, 0, 0.3);
}

.kinetic-card:hover::before {
    opacity: 1;
}

.kinetic-card:hover::after {
    transform: scaleY(1);
}

.kinetic-card>* {
    position: relative;
    z-index: 3;
}

/* Variante 3D tilt (activado vía JS con [data-tilt]) */
[data-tilt] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.25s var(--ease-out-soft);
    will-change: transform;
}

[data-tilt].is-tilting {
    transition: transform 0.05s linear;
}

/* ─────────────────────────────────────────────────────────────────────
   07. BOTONES KINÉTICOS — magnético + ripple + sweep
   ───────────────────────────────────────────────────────────────────── */
.btn-kinetic-primary,
.btn,
.btn-admin-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.btn-kinetic-primary {
    transition:
        background-color var(--dur-quick) ease,
        color var(--dur-quick) ease,
        transform var(--dur-quick) var(--ease-spring),
        box-shadow var(--dur-base) var(--ease-out-soft),
        letter-spacing var(--dur-quick) ease !important;
}

.btn-kinetic-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.28) 40%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0.28) 60%,
            transparent 100%);
    transform: translateX(-110%) skewX(-15deg);
    transition: transform 0.65s var(--ease-arc);
    z-index: 1;
    pointer-events: none;
}

.btn-kinetic-primary:hover {
    box-shadow: var(--primary-shadow-soft);
    letter-spacing: 0.16em !important;
    transform: translateY(-2px) !important;
}

.btn-kinetic-primary:hover::after {
    transform: translateX(110%) skewX(-15deg);
}

.btn-kinetic-primary>* {
    position: relative;
    z-index: 2;
}

/* Ripple universal: agrega clase .kinetic-ripple */
.kinetic-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 0.6s var(--ease-out-soft);
    pointer-events: none;
    z-index: 0;
}

@keyframes ripple {
    to {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* Botón magnético */
[data-magnetic] {
    transition: transform 0.22s var(--ease-out-soft);
    will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────────
   08. HERO — text-reveal mask + parallax + CTA elevation
   ───────────────────────────────────────────────────────────────────── */
.hero-title {
    /* Sin overflow: hidden global — el clipping del reveal lo hace cada .word.
       Además agregamos padding-bottom para dar lugar a descenders (p, q, j, g, y). */
    display: inline-block;
    padding-bottom: 0.18em;
    line-height: 1.02 !important;
}

.hero-title .word,
.kinetic-reveal-text .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* Espacio para que los descenders no queden cortados por el overflow:hidden */
    padding-bottom: 0.22em;
    line-height: 1.05;
}

.hero-title .word>span,
.kinetic-reveal-text .word>span {
    display: inline-block;
    /* 130% > 100% + descender (~22%), garantiza ocultarlo completamente al inicio */
    transform: translateY(130%);
    transition: transform 0.95s var(--ease-arc);
}

/* Wrapper general del reveal-text */
.kinetic-reveal-text {
    display: inline-block;
    padding-bottom: 0.18em;
    line-height: 1.05 !important;
}

/* Override global para todos los displays/headings: relajar line-height
   demasiado ajustado del sistema base que recorta descenders. */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6,
.hero-title {
    line-height: 1.05 !important;
    padding-bottom: 0.08em;
}

/* Caso especial Antonio (font display) — necesita un poco más de aire */
.display-1, .display-2, .display-3, .hero-title {
    padding-bottom: 0.12em;
}

.hero-title.is-in .word>span,
.kinetic-reveal-text.is-in .word>span {
    transform: translateY(0);
}

.hero-title.is-in .word:nth-child(2)>span {
    transition-delay: 0.08s;
}

.hero-title.is-in .word:nth-child(3)>span {
    transition-delay: 0.16s;
}

.hero-title.is-in .word:nth-child(4)>span {
    transition-delay: 0.24s;
}

.hero-title.is-in .word:nth-child(5)>span {
    transition-delay: 0.32s;
}

.hero-title.is-in .word:nth-child(6)>span {
    transition-delay: 0.40s;
}

.hero-title.is-in .word:nth-child(7)>span {
    transition-delay: 0.48s;
}

.hero-title.is-in .word:nth-child(8)>span {
    transition-delay: 0.56s;
}

/* Highlight con barrido tras el texto */
.kinetic-highlight {
    position: relative;
    display: inline-block;
    color: var(--primary);
    isolation: isolate;
}

.kinetic-highlight::before {
    content: '';
    position: absolute;
    inset: 8% -4% 8% -4%;
    background: rgba(194, 0, 0, 0.12);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s var(--ease-arc) 0.4s;
    z-index: -1;
    border-radius: 2px;
}

.kinetic-highlight.is-in::before {
    transform: scaleX(1);
}

/* Hero parallax (clip-path) */
.hero-clip,
img.hero-clip {
    transition: clip-path 1.2s var(--ease-arc), transform 6s var(--ease-out-soft);
    will-change: transform;
}

.carousel-item.active img.hero-clip {
    transform: scale(1.04);
}

/* ─────────────────────────────────────────────────────────────────────
   09. REVEAL ON SCROLL — variantes
   ───────────────────────────────────────────────────────────────────── */
.kfx-reveal {
    opacity: 0;
    transition: opacity 0.7s var(--ease-out-soft),
        transform 0.7s var(--ease-out-soft),
        filter 0.7s var(--ease-out-soft),
        clip-path 0.9s var(--ease-arc);
    will-change: transform, opacity;
}

.kfx-reveal[data-fx="up"] {
    transform: translateY(28px);
}

.kfx-reveal[data-fx="down"] {
    transform: translateY(-28px);
}

.kfx-reveal[data-fx="left"] {
    transform: translateX(-28px);
}

.kfx-reveal[data-fx="right"] {
    transform: translateX(28px);
}

.kfx-reveal[data-fx="zoom"] {
    transform: scale(0.92);
}

.kfx-reveal[data-fx="blur"] {
    filter: blur(14px);
    transform: translateY(12px);
}

.kfx-reveal[data-fx="curtain"] {
    clip-path: inset(0 100% 0 0);
}

.kfx-reveal[data-fx="rise"] {
    clip-path: inset(100% 0 0 0);
    transform: translateY(20px);
}

.kfx-reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0);
}

/* Stagger para hijos */
[data-stagger]>* {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s var(--ease-out-soft), transform 0.65s var(--ease-out-soft);
}

[data-stagger].is-in>* {
    opacity: 1;
    transform: none;
}

[data-stagger].is-in>*:nth-child(1) {
    transition-delay: 0.04s;
}

[data-stagger].is-in>*:nth-child(2) {
    transition-delay: 0.10s;
}

[data-stagger].is-in>*:nth-child(3) {
    transition-delay: 0.16s;
}

[data-stagger].is-in>*:nth-child(4) {
    transition-delay: 0.22s;
}

[data-stagger].is-in>*:nth-child(5) {
    transition-delay: 0.28s;
}

[data-stagger].is-in>*:nth-child(6) {
    transition-delay: 0.34s;
}

[data-stagger].is-in>*:nth-child(7) {
    transition-delay: 0.40s;
}

[data-stagger].is-in>*:nth-child(8) {
    transition-delay: 0.46s;
}

[data-stagger].is-in>*:nth-child(9) {
    transition-delay: 0.52s;
}

[data-stagger].is-in>*:nth-child(10) {
    transition-delay: 0.58s;
}

/* Compatibilidad con animate-on-scroll original (mejorado) */
.animate-on-scroll {
    transition:
        opacity 0.75s var(--ease-out-soft),
        transform 0.75s var(--ease-out-soft) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   10. CONTADORES Y MARCADOR LIVE
   ───────────────────────────────────────────────────────────────────── */
.kfx-counter {
    font-family: var(--font-display) !important;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    display: inline-block;
}

.kfx-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(194, 0, 0, 0.08);
    border: 1px solid rgba(194, 0, 0, 0.3);
    border-radius: 999px;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.kfx-live-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.6);
    animation: livePulseRing 1.8s ease-out infinite;
}

@keyframes livePulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.6);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(194, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(194, 0, 0, 0);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   11. MARQUEE / TICKER (ej: sponsors, headlines)
   ───────────────────────────────────────────────────────────────────── */
.kfx-marquee {
    overflow: hidden;
    position: relative;
    --marquee-speed: 40s;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.kfx-marquee__track {
    display: inline-flex;
    gap: 4rem;
    white-space: nowrap;
    animation: marqueeSlide var(--marquee-speed) linear infinite;
}

.kfx-marquee:hover .kfx-marquee__track {
    animation-play-state: paused;
}

@keyframes marqueeSlide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   12. INPUTS — focus glow + label flotante (opcional)
   ───────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    transition:
        border-color 0.25s ease,
        box-shadow 0.3s ease,
        background-color 0.25s ease,
        transform 0.2s ease !important;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 4px rgba(194, 0, 0, 0.10),
        0 8px 22px -16px rgba(194, 0, 0, 0.6) !important;
    transform: translateY(-1px);
}

/* Floating label compatible (envolver con .kfx-float) */
.kfx-float {
    position: relative;
}

.kfx-float>.form-control {
    padding-top: 1.4rem;
    padding-bottom: 0.5rem;
}

.kfx-float>label {
    position: absolute;
    top: 0.85rem;
    left: 0.95rem;
    color: var(--on-surface-muted);
    pointer-events: none;
    transition: transform 0.2s var(--ease-out-soft), color 0.2s ease, font-size 0.2s ease;
    font-size: 0.95rem;
    transform-origin: left center;
}

.kfx-float>.form-control:focus+label,
.kfx-float>.form-control:not(:placeholder-shown)+label {
    transform: translateY(-12px) scale(0.78);
    color: var(--primary);
}

/* ─────────────────────────────────────────────────────────────────────
   13. DIVIDERS Y SECCIONES KINÉTICAS
   ───────────────────────────────────────────────────────────────────── */
.kfx-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-body) !important;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.kfx-section-tag::before {
    content: '';
    width: 32px;
    height: 2px;
    background: var(--primary);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.7s var(--ease-arc);
}

.kfx-section-tag.is-in::before,
.kfx-reveal.is-in .kfx-section-tag::before {
    transform: scaleX(1);
}

.kfx-divider-sweep {
    position: relative;
    height: 1px;
    background: var(--outline-variant);
    overflow: hidden;
    margin: 3rem 0;
}

.kfx-divider-sweep::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: sweep 3.5s ease-in-out infinite;
}

@keyframes sweep {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(220%);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   14. TABLAS — hover slide + zebra suave
   ───────────────────────────────────────────────────────────────────── */
.table tbody tr {
    transition: background 0.2s ease, transform 0.25s var(--ease-out-soft);
}

.table tbody tr:hover {
    background: rgba(194, 0, 0, 0.04);
}

.table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}

.table-dark tbody tr:hover {
    background: rgba(194, 0, 0, 0.18) !important;
}

/* Standings rank top-3 con resaltado */
#standingsCarousel tbody tr:nth-child(1) td:first-child {
    color: #ffd34a !important;
    font-weight: 800;
}

#standingsCarousel tbody tr:nth-child(2) td:first-child {
    color: #d8d8d8 !important;
    font-weight: 700;
}

#standingsCarousel tbody tr:nth-child(3) td:first-child {
    color: #d28a4a !important;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────
   15. BADGES MEJORADOS
   ───────────────────────────────────────────────────────────────────── */
.badge {
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}

.badge:hover {
    transform: scale(1.06);
}

.badge.bg-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
    box-shadow: 0 4px 12px -6px rgba(194, 0, 0, 0.45);
}

/* ─────────────────────────────────────────────────────────────────────
   16. MODALES — entrada elegante
   ───────────────────────────────────────────────────────────────────── */
.modal.fade .modal-dialog {
    transform: translateY(40px) scale(0.96);
    transition: transform 0.45s var(--ease-spring), opacity 0.4s ease !important;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

.modal-backdrop.show {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-content {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius) !important;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
    animation: modalGlow 0.6s ease;
}

@keyframes modalGlow {
    from {
        box-shadow: 0 0 0 rgba(194, 0, 0, 0);
    }

    to {
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
    }
}

.nav-tabs .nav-link {
    position: relative;
    transition: color 0.25s ease;
}

.nav-tabs .nav-link::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -1px;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s var(--ease-arc);
}

.nav-tabs .nav-link.active::after {
    transform: scaleX(1);
}

/* ─────────────────────────────────────────────────────────────────────
   17. SPLASH — cinemático
   ───────────────────────────────────────────────────────────────────── */
#splash-screen {
    background: radial-gradient(ellipse at center, #1a1a18 0%, #0a0a0a 100%);
}

#splash-screen::before {
    content: '';
    position: absolute;
    inset: -50%;
    background:
        repeating-linear-gradient(45deg,
            rgba(194, 0, 0, 0.04) 0,
            rgba(194, 0, 0, 0.04) 1px,
            transparent 1px,
            transparent 12px);
    animation: splashSweep 8s linear infinite;
    pointer-events: none;
}

@keyframes splashSweep {
    from {
        transform: translate(-25%, -25%) rotate(0deg);
    }

    to {
        transform: translate(-25%, -25%) rotate(360deg);
    }
}

#splash-logo {
    position: relative;
    filter: drop-shadow(0 12px 30px rgba(194, 0, 0, 0.55));
}

/* ─────────────────────────────────────────────────────────────────────
   18. PWA banner — refinado
   ───────────────────────────────────────────────────────────────────── */
#pwa-install-banner {
    border-top: 1px solid var(--outline-variant) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: bannerRise 0.5s var(--ease-spring);
}

@keyframes bannerRise {
    from {
        transform: translateY(110%);
    }

    to {
        transform: translateY(0);
    }
}

#pwa-install-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 8px 24px -10px rgba(194, 0, 0, 0.55);
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease !important;
}

#pwa-install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(194, 0, 0, 0.65);
}

/* ─────────────────────────────────────────────────────────────────────
   19. SKELETON / SHIMMER
   ───────────────────────────────────────────────────────────────────── */
.kfx-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-container);
    border-radius: var(--radius-sm);
}

.kfx-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent);
    animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* ─────────────────────────────────────────────────────────────────────
   20. SPONSORS CAROUSEL — fade edges + hover lift
   ───────────────────────────────────────────────────────────────────── */
.sponsor-carousel-container {
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.sponsor-item {
    transition: transform 0.4s var(--ease-out-soft);
}

.sponsor-item:hover {
    transform: translateY(-3px);
}

/* ─────────────────────────────────────────────────────────────────────
   21. FOOTER — refinado
   ───────────────────────────────────────────────────────────────────── */
footer.footer {
    position: relative;
    overflow: hidden;
    background: var(--arena-dark) !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

footer.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: sweep 5s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   22. UTILIDADES INNOVADORAS
   ───────────────────────────────────────────────────────────────────── */

/* Texto con gradiente animado */
.kfx-text-gradient {
    background: linear-gradient(120deg, var(--primary) 0%, #ff3232 35%, var(--primary-deep) 70%, var(--primary) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: textShift 6s ease-in-out infinite;
}

@keyframes textShift {

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

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

/* Borde animado */
.kfx-border-glow {
    position: relative;
    isolation: isolate;
}

.kfx-border-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0%, var(--primary) 25%, transparent 50%);
    animation: borderSpin 4s linear infinite;
    z-index: -1;
}

.kfx-border-glow::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--surface-container-lowest);
    border-radius: inherit;
    z-index: -1;
}

@keyframes borderSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Underline kinético en links */
.kfx-link {
    position: relative;
    text-decoration: none;
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    transition: background-size 0.45s var(--ease-arc), color 0.25s ease;
}

.kfx-link:hover {
    background-size: 100% 1.5px;
    color: var(--primary);
}

/* Imagen con zoom suave en hover y mask reveal */
.kfx-img-cover {
    overflow: hidden;
    position: relative;
}

.kfx-img-cover img {
    transition: transform 0.9s var(--ease-out-soft), filter 0.5s ease;
    will-change: transform;
}

.kfx-img-cover:hover img {
    transform: scale(1.06);
    filter: saturate(1.1) contrast(1.05);
}

.kfx-img-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45));
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.kfx-img-cover:hover::after {
    opacity: 1;
}

/* Spotlight: contenido sobre imagen */
.kfx-img-spotlight {
    position: relative;
    overflow: hidden;
}

.kfx-img-spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%),
            rgba(194, 0, 0, 0.18),
            transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.kfx-img-spotlight:hover::before {
    opacity: 1;
}

/* Etiqueta numerada estilo deportivo */
.kfx-jersey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--arena-dark);
    color: var(--primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px var(--primary);
    transition: transform 0.3s var(--ease-spring);
}

.kfx-jersey:hover {
    transform: rotate(-4deg) scale(1.05);
}

/* Badge dot pulsante */
.kfx-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(194, 0, 0, 0.7);
    animation: badgeRing 1.6s ease-out infinite;
    vertical-align: middle;
}

/* No-grain (en superficies oscuras) */
.no-grain::after {
    display: none !important;
}

/* Página entrada */
@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.content {
    animation: pageIn 0.5s var(--ease-out-soft);
}

/* Fix para evitar que las letras con "pancita" (p, g, y, q) se corten abajo */
.texto-sin-cortar,
h1,
h2,
h3,
h4,
h5,
h6,
.fc-toolbar-title {
    line-height: 1.3 !important;
    padding-bottom: 2px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   23. ADMIN — sidebar premium e interacciones
   ───────────────────────────────────────────────────────────────────── */
.admin-sidebar {
    background:
        linear-gradient(180deg, rgba(194, 0, 0, 0.05), transparent 30%),
        var(--admin-sidebar-bg, #0A0A0A) !important;
}

.admin-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(194, 0, 0, 0.3) 50%, transparent);
    pointer-events: none;
}

.sidebar-link {
    position: relative;
    overflow: hidden;
}

.sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform 0.35s var(--ease-arc);
}

.sidebar-link:hover::before,
.sidebar-link.active::before {
    transform: scaleY(1);
}

.sidebar-link i {
    transition: transform 0.35s var(--ease-spring), color 0.25s ease;
}

.sidebar-link:hover i {
    transform: translateX(3px) scale(1.08);
    color: var(--primary);
}

.sidebar-link.active {
    background:
        linear-gradient(90deg,
            rgba(194, 0, 0, 0.95),
            rgba(138, 0, 0, 0.85)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sidebar-link.active i {
    color: white !important;
    transform: none;
}

/* Stat-card admin: número con tick + glow */
.stat-card {
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a) !important;
    transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s ease;
    overflow: hidden;
    position: relative;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(194, 0, 0, 0.25), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.55);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card .stat-value {
    background: linear-gradient(135deg, #fff, #ffb4b4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Admin card hover */
.admin-card {
    border-radius: 4px !important;
    transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s ease;
}

.admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.18);
}

/* Botones admin con sweep */
.btn-admin-primary {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--ease-spring), box-shadow 0.3s ease, background 0.25s ease !important;
}

.btn-admin-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: translateX(-110%) skewX(-15deg);
    transition: transform 0.6s var(--ease-arc);
}

.btn-admin-primary:hover::after {
    transform: translateX(110%) skewX(-15deg);
}

.btn-admin-primary:hover {
    box-shadow: 0 14px 28px -12px rgba(194, 0, 0, 0.55);
    transform: translateY(-2px);
}

/* Topbar admin con glass */
.admin-topbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Avatar con anillo */
.admin-topbar .bg-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
    box-shadow:
        0 0 0 3px rgba(194, 0, 0, 0.15),
        0 6px 18px -6px rgba(194, 0, 0, 0.5);
    transition: transform 0.3s var(--ease-spring);
}

.admin-topbar .bg-primary:hover {
    transform: rotate(-6deg) scale(1.05);
}

/* Mejor scroll en sidebar (móvil overlay) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Tablas admin con accent */
.kinetic-table tr {
    transition: background 0.2s ease;
}

.kinetic-table tr:hover td {
    background: rgba(194, 0, 0, 0.04);
    box-shadow: inset 3px 0 0 var(--primary);
}

/* ─────────────────────────────────────────────────────────────────────
   24. NOTICIAS / EVENTOS — micro UI
   ───────────────────────────────────────────────────────────────────── */
.kinetic-news-item {
    position: relative;
    transition: background 0.3s var(--ease-out-soft), padding-left 0.3s var(--ease-out-soft);
}

.kinetic-news-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.4s var(--ease-arc);
    transform: translateY(-50%);
}

.kinetic-news-item:hover {
    background: rgba(194, 0, 0, 0.03);
    padding-left: 12px;
}

.kinetic-news-item:hover::before {
    width: 8px;
}

/* Eventos – tarjeta con flecha animada */
.kfx-event-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.kfx-event-cta::after {
    content: '→';
    transition: transform 0.35s var(--ease-arc);
    display: inline-block;
}

.kinetic-card:hover .kfx-event-cta::after {
    transform: translateX(6px);
}

/* ─────────────────────────────────────────────────────────────────────
   25. RESPONSIVE — desactivar efectos pesados en móvil
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .kinetic-card:hover {
        transform: none;
    }

    .kinetic-card::before {
        display: none;
    }

    [data-tilt] {
        transform: none !important;
    }

    .kinetic-cursor-dot,
    .kinetic-cursor-ring {
        display: none !important;
    }

    body.kinetic-cursor-on,
    body.kinetic-cursor-on * {
        cursor: auto;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   26. SELECCIÓN DE TEXTO Y FOCUS GLOBAL
   ───────────────────────────────────────────────────────────────────── */
/* IMPORTANTE: ::selection sólo soporta `color` y `background-color`,
   NO el shorthand `background`. Usar shorthand causa que la regla se ignore
   silenciosamente en Chrome/Edge → quedaba selección invisible (blanco/blanco). */
::selection {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

::-moz-selection {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Override específico para que la selección dentro de modales SweetAlert
   también respete los colores de marca (algunas reglas internas del SWAL
   quedan más específicas y pisan la global). */
.swal2-popup ::selection,
.swal2-popup *::selection {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.swal2-popup ::-moz-selection,
.swal2-popup *::-moz-selection {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   27. SWEETALERT2 — afinado de marca
   ───────────────────────────────────────────────────────────────────── */
.swal2-popup {
    border-radius: var(--radius) !important;
    font-family: var(--font-body) !important;
    border: 1px solid var(--outline-variant);
    box-shadow: 0 25px 60px -25px rgba(26, 18, 8, 0.4) !important;
}

.swal2-title {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.swal2-toast {
    border-left: 4px solid var(--primary) !important;
}

/* Botón CONFIRMAR de SweetAlert.
   SWAL aplica `style="background-color: rgb(...)"` inline desde JS
   (vía confirmButtonColor). Usamos background-color + background-image por
   separado con !important para que el inline NO gane. Antes usábamos
   shorthand `background:` que en algunos casos no se aplicaba como esperado. */
.swal2-styled.swal2-confirm,
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm,
button.swal2-confirm.swal2-styled {
    background-color: var(--primary) !important;
    background-image: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px -8px rgba(194, 0, 0, 0.55);
    transition: transform 0.2s var(--ease-spring), box-shadow 0.25s ease, filter 0.2s ease;
}

.swal2-styled.swal2-confirm:hover,
.swal2-popup .swal2-actions .swal2-styled.swal2-confirm:hover,
button.swal2-confirm.swal2-styled:hover {
    background-color: var(--primary-deep) !important;
    background-image: linear-gradient(135deg, var(--primary-deep), var(--primary)) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(194, 0, 0, 0.65);
    filter: brightness(1.05);
}

.swal2-styled.swal2-confirm:focus,
button.swal2-confirm.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(194, 0, 0, 0.35),
                0 6px 18px -8px rgba(194, 0, 0, 0.55) !important;
    outline: none !important;
}

/* Botón CANCELAR de SweetAlert: gris consistente, texto blanco legible. */
.swal2-styled.swal2-cancel,
.swal2-popup .swal2-actions .swal2-styled.swal2-cancel,
button.swal2-cancel.swal2-styled {
    background-color: #6c757d !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}

.swal2-styled.swal2-cancel:hover,
button.swal2-cancel.swal2-styled:hover {
    background-color: #5a6268 !important;
    color: #ffffff !important;
}

/* Botón DENY (cuando exista) */
.swal2-styled.swal2-deny,
button.swal2-deny.swal2-styled {
    background-color: #b91c1c !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}