/* ============================================================
   Matamonos eSports — tema de marca
   Paleta extraída del histograma de logo.png:
     azul  #052DA7 · dorado #FEC200 · blanco #FFFFFF · perla #C5CAE9
   Los nombres de las variables son semánticos, no cromáticos.
   ============================================================ */
:root {
    --brand-primary: #052DA7;        /* azul del logo   */
    --brand-primary-dark: #031b66;
    --brand-accent: #FEC200;         /* dorado del logo */
    --brand-accent-dark: #d9a500;
    --brand-pearl: #C5CAE9;          /* anillo interior */
    --brand-ink: #e8ecf8;            /* texto claro     */
    --brand-bg: #060c1f;             /* fondo general   */
    --brand-surface: #0b1330;        /* tarjetas        */
    --brand-surface-2: #101a40;
    --brand-line: rgba(197, 202, 233, 0.14);
}

html, body {
    background-color: var(--brand-bg);
    color: var(--brand-ink);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- utilidades de color ---------- */
.text-brand-gold  { color: var(--brand-accent) !important; }
.text-brand-pearl { color: var(--brand-pearl) !important; }

/* ---------- navbar ---------- */
.navbar-brand-mm {
    background: linear-gradient(180deg, var(--brand-primary-dark), var(--brand-bg));
    border-bottom: 2px solid var(--brand-accent);
}
.navbar-brand-mm .navbar-brand,
.navbar-brand-mm .nav-link { color: var(--brand-ink); }
.navbar-brand-mm .nav-link:hover,
.navbar-brand-mm .nav-link.active { color: var(--brand-accent); }
.brand-name { letter-spacing: 0.02em; }
.brand-logo { filter: drop-shadow(0 0 6px rgba(254, 194, 0, 0.35)); }
.navbar-brand-mm .navbar-toggler {
    border-color: var(--brand-line);
}
.navbar-brand-mm .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(254,194,0,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- botones ---------- */
.btn-brand-gold {
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-dark));
    border: none;
    color: #1a1400;
    font-weight: 700;
}
.btn-brand-gold:hover, .btn-brand-gold:focus {
    background: linear-gradient(135deg, #ffd53a, var(--brand-accent));
    color: #1a1400;
    box-shadow: 0 0 18px rgba(254, 194, 0, 0.35);
}
.btn-outline-brand {
    border: 1px solid var(--brand-accent);
    color: var(--brand-accent);
}
.btn-outline-brand:hover {
    background: var(--brand-accent);
    color: #1a1400;
}

/* ---------- hero ---------- */
.hero-mm {
    padding: 4.5rem 0 3.5rem;
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(5, 45, 167, 0.55), transparent 60%),
        radial-gradient(800px 400px at 10% 110%, rgba(254, 194, 0, 0.10), transparent 60%),
        var(--brand-bg);
    border-bottom: 1px solid var(--brand-line);
}
.hero-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 6px 24px rgba(5, 45, 167, 0.8));
}
.hero-title { color: #fff; }
.hero-tagline { color: var(--brand-pearl); }

/* ---------- tarjetas ---------- */
.card-mm {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: 0.9rem;
    color: var(--brand-ink);
}
.card-mm .card-header { color: var(--brand-pearl); }
.card-active { border-left: 4px solid var(--brand-accent); }
.tournament-card:hover {
    border-color: var(--brand-accent);
    transform: translateY(-2px);
    transition: all 0.15s ease-in-out;
}
.feature-card, .step-card { text-align: left; }
.feature-icon {
    font-size: 1.9rem;
    color: var(--brand-accent);
    margin-bottom: 0.6rem;
}
.step-number {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #1a1400;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-dark));
}

/* ---------- secciones ---------- */
.section-title { color: #fff; }
.page-head {
    background:
        radial-gradient(900px 300px at 50% -20%, rgba(5, 45, 167, 0.5), transparent 70%),
        var(--brand-bg);
    border-bottom: 1px solid var(--brand-line);
}

/* ---------- stats strip ---------- */
.stat-box {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-radius: 0.9rem;
    padding: 1.25rem 0.75rem;
}
.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-accent);
    line-height: 1.1;
}
.stat-label {
    color: var(--brand-pearl);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- tablas ---------- */
.table-mm { color: var(--brand-ink); }
.table-mm thead th {
    background: var(--brand-surface-2);
    color: var(--brand-pearl);
    border-bottom: 2px solid var(--brand-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.table-mm tbody td { border-color: var(--brand-line); }
.table-mm tbody tr:hover { background: rgba(5, 45, 167, 0.18); }
.row-top3 td { background: rgba(254, 194, 0, 0.06); }

/* ---------- badges ---------- */
.badge-live {
    background: linear-gradient(135deg, #ff4d4d, #c92a2a);
    color: #fff;
    animation: pulse-live 1.6s ease-in-out infinite;
    font-weight: 700;
    letter-spacing: 0.05em;
}
@keyframes pulse-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); }
}
.badge-record {
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-line);
    color: var(--brand-ink);
}
.badge-map {
    background: rgba(5, 45, 167, 0.55);
    color: var(--brand-pearl);
}
.badge-status-done {
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-dark));
    color: #1a1400;
    font-weight: 700;
}
.badge-status-live {
    background: linear-gradient(135deg, #2f9e44, #1e6b30);
    color: #fff;
    font-weight: 700;
}
.badge-status-pending {
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-line);
    color: var(--brand-pearl);
}
.badge-status-lost {
    background: linear-gradient(135deg, #e03131, #a61e1e);
    color: #fff;
    font-weight: 700;
}

/* ---------- enlaces ---------- */
.link-brand { color: var(--brand-accent); }
.link-brand:hover { color: #ffd53a; }

/* ---------- videos ---------- */
.video-card { overflow: hidden; }
.video-thumb { cursor: pointer; display: block; position: relative; }
.video-thumb img { border-radius: 0.9rem 0.9rem 0 0; }
.video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 3rem;
    color: var(--brand-accent);
    background: rgba(6, 12, 31, 0.35);
    opacity: 0.9;
    transition: opacity 0.15s;
}
.video-thumb:hover .video-play { opacity: 1; }
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- en vivo ---------- */
.border-live {
    border: 1px solid rgba(255, 77, 77, 0.65) !important;
    box-shadow: 0 0 22px rgba(255, 77, 77, 0.18);
}
.navbar-live {
    text-decoration: none;
    padding: 0.45rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.75rem;
}

/* ---------- footer ---------- */
.footer-mm {
    background: linear-gradient(180deg, var(--brand-bg), var(--brand-primary-dark));
    border-top: 2px solid var(--brand-accent);
}
.footer-heading {
    color: var(--brand-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}
.footer-links a { color: var(--brand-pearl); text-decoration: none; }
.footer-links a:hover { color: var(--brand-accent); }