/* PED Mundial 2026 — estilos de la portada especial */

.m26 { color: #eaf1ff; font-family: inherit; }
.m26 * { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ============ BARRA DE NAVEGACIÓN (reemplaza al header del tema) ============ */
.m26-nav {
    position: sticky; top: 0; z-index: 999;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    /* barra a todo el ancho, contenido centrado a máx. 1300px */
    padding: 10px max(28px, calc((100% - 1300px) / 2));
    background: rgba(7, 13, 31, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 2px solid #e11d48;
}
.m26-nav-logo img {
    height: 44px; width: auto; display: block;
    background: #fff; border-radius: 8px; padding: 5px 12px;
}
.m26-nav-links { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.m26-nav-links a {
    color: #fff !important; font-size: 13px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; text-decoration: none !important;
    padding: 9px 2px 7px; border-bottom: 3px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.m26-nav-links a:hover { border-bottom-color: rgba(225, 29, 72, 0.55); }
.m26-nav-links a.m26-nav-activo { border-bottom-color: #e11d48; }

/* Dropdowns (Programas / Podcast) */
.m26-nav-item { position: relative; }
.m26-nav-item > a { display: inline-block; }
.m26-caret { font-size: 9px; opacity: 0.7; }
.m26-sub {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: #0c1730; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
    min-width: 260px; max-height: 65vh; overflow: auto; padding: 8px 0;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); z-index: 1000;
}
.m26-nav-item:hover .m26-sub,
.m26-nav-item:focus-within .m26-sub { display: block; }
.m26-sub a {
    display: block; padding: 9px 18px; font-size: 11px !important;
    letter-spacing: 1px; white-space: nowrap; border-bottom: none !important;
}
.m26-sub a:hover { background: rgba(225, 29, 72, 0.18); }

@media (max-width: 860px) {
    /* logo a la izquierda y menú a la derecha, en una sola barra */
    .m26-nav { gap: 10px; padding: 8px 12px; }
    .m26-nav-logo img { height: 40px; padding: 4px 9px; }
    .m26-nav-links { gap: 4px 12px; justify-content: flex-end; }
    .m26-nav-links a { font-size: 10.5px; letter-spacing: 0.8px; padding: 5px 2px 4px; }
}

/* Full-bleed dentro de contenedores boxed del tema + franjas de césped */
.m26-full {
    width: 100vw; position: relative; left: 50%; margin-left: -50vw;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.013) 0 110px, rgba(255, 255, 255, 0) 110px 220px),
        #070d1f;
}

/* ============ HERO ============ */
.m26-hero {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='2.5'%3E%3Crect x='30' y='30' width='1140' height='640' rx='4'/%3E%3Cline x1='600' y1='30' x2='600' y2='670'/%3E%3Ccircle cx='600' cy='350' r='100'/%3E%3Ccircle cx='600' cy='350' r='4'/%3E%3Crect x='30' y='170' width='180' height='360'/%3E%3Crect x='30' y='265' width='70' height='170'/%3E%3Crect x='990' y='170' width='180' height='360'/%3E%3Crect x='1100' y='265' width='70' height='170'/%3E%3Cpath d='M210 290 A100 100 0 0 1 210 410'/%3E%3Cpath d='M990 290 A100 100 0 0 0 990 410'/%3E%3Cpath d='M30 50 A20 20 0 0 0 50 30'/%3E%3Cpath d='M1150 30 A20 20 0 0 0 1170 50'/%3E%3Cpath d='M50 670 A20 20 0 0 0 30 650'/%3E%3Cpath d='M1170 650 A20 20 0 0 0 1150 670'/%3E%3C/g%3E%3C/svg%3E") center 60% / 1400px auto no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 110px, rgba(255, 255, 255, 0) 110px 220px),
        radial-gradient(1100px 500px at 80% -10%, rgba(0, 173, 255, 0.22), transparent 60%),
        radial-gradient(900px 480px at 10% 110%, rgba(225, 29, 72, 0.14), transparent 60%),
        linear-gradient(160deg, #0a1530 0%, #0c1c42 55%, #081127 100%);
    padding: 56px 20px 0;
    position: relative;
}
.m26-hero-inner {
    max-width: 1140px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center;
    padding-bottom: 48px;
    position: relative; z-index: 1;
}

/* ===== FONDO DINÁMICO: luces de estadio ===== */

/* Barrido de reflector que cruza el hero */
.m26-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(140, 200, 255, 0.06) 46%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(140, 200, 255, 0.06) 54%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 280% 100%;
    animation: m26sweep 9s ease-in-out infinite;
}
@keyframes m26sweep {
    0%   { background-position: 130% 0; opacity: 0; }
    12%  { opacity: 1; }
    55%  { background-position: -30% 0; opacity: 1; }
    65%  { background-position: -30% 0; opacity: 0; }
    100% { background-position: -30% 0; opacity: 0; }
}

/* Flashes de cámaras en las tribunas (ráfagas en posiciones distintas) */
.m26-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    background-image:
        radial-gradient(2px circle at 6% 10%, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(1.5px circle at 15% 30%, rgba(220, 240, 255, 0.9), transparent),
        radial-gradient(2.5px circle at 24% 8%, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(1.5px circle at 33% 22%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2px circle at 44% 12%, rgba(220, 240, 255, 0.9), transparent),
        radial-gradient(1.5px circle at 55% 26%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2.5px circle at 63% 7%, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(1.5px circle at 72% 18%, rgba(220, 240, 255, 0.85), transparent),
        radial-gradient(2px circle at 81% 30%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2.5px circle at 90% 10%, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(1.5px circle at 96% 22%, rgba(220, 240, 255, 0.9), transparent),
        radial-gradient(2px circle at 38% 35%, rgba(255, 255, 255, 0.85), transparent);
    animation: m26flash 7s linear infinite;
}
@keyframes m26flash {
    0%, 100% { opacity: 0; background-position: 0 0; }
    3%, 5%   { opacity: 1; background-position: 0 0; }
    8%       { opacity: 0; }
    24%, 26% { opacity: 0.9; background-position: 6% 4%; }
    29%      { opacity: 0; background-position: 6% 4%; }
    47%, 49% { opacity: 1; background-position: -5% 2%; }
    52%      { opacity: 0; background-position: -5% 2%; }
    73%, 75% { opacity: 0.8; background-position: 3% -3%; }
    78%      { opacity: 0; background-position: 3% -3%; }
}

/* Pulso de brillo en los números del countdown */
.m26-t-box { animation: m26glow 3.2s ease-in-out infinite; }
@keyframes m26glow {
    0%, 100% { box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
    50%      { box-shadow: 0 0 16px rgba(74, 222, 128, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
    .m26-hero::before, .m26-hero::after, .m26-t-box, .m26-dot, .m26-pen-valla-track { animation: none !important; }
}
.m26-kicker {
    display: inline-block; background: rgba(0, 173, 255, 0.15); border: 1px solid rgba(0, 173, 255, 0.45);
    color: #6fd3ff; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.m26-h1 {
    margin: 0 0 14px !important; color: #fff !important; font-size: clamp(40px, 6vw, 68px) !important;
    line-height: 0.95 !important; font-weight: 900 !important; letter-spacing: 1px;
    text-shadow: 0 4px 30px rgba(0, 173, 255, 0.35);
}
.m26-sub { color: #9fb0d0; font-size: 17px; line-height: 1.6; margin: 0 0 26px; max-width: 420px; }
.m26-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.m26-btn {
    display: inline-block; padding: 13px 26px; border-radius: 8px; font-weight: 800; font-size: 14px;
    letter-spacing: 0.5px; text-decoration: none !important; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.m26-btn:hover { transform: translateY(-2px); }
.m26-btn-red { background: linear-gradient(135deg, #e11d48, #be123c); color: #fff !important; box-shadow: 0 8px 24px rgba(225, 29, 72, 0.35); }
.m26-btn-green { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff !important; box-shadow: 0 8px 24px rgba(22, 163, 74, 0.3); }
.m26-btn-outline { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.4); color: #fff !important; }
.m26-btn-sm { padding: 9px 18px; font-size: 12px; }

/* Player / placeholder */
.m26-hero-media { min-width: 0; }
.m26-player { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); background: #000; }
.m26-player-frame { position: relative; padding-bottom: 56.25%; height: 0; }
.m26-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m26-live-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: #e11d48; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px;
    padding: 5px 12px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px;
}
.m26-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; animation: m26pulse 1.2s infinite; }
@keyframes m26pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.m26-unmute {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
    background: rgba(0, 0, 0, 0.75); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 800; cursor: pointer;
    backdrop-filter: blur(4px); transition: background 0.15s ease, transform 0.15s ease;
}
.m26-unmute:hover { background: #e11d48; border-color: #e11d48; transform: translateX(-50%) scale(1.05); }

/* ============ JUEGO DE PENALES (cuando no hay transmisión) ============ */
.m26-badge-off { background: #475569; }
.m26-penales {
    position: relative; aspect-ratio: 16 / 9; user-select: none; -webkit-user-select: none;
    background-color: #0a1228;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230a1228'/%3E%3Cstop offset='1' stop-color='%2313234d'/%3E%3C/linearGradient%3E%3ClinearGradient id='grass' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231b6b3a'/%3E%3Cstop offset='0.6' stop-color='%2315803d'/%3E%3Cstop offset='1' stop-color='%2314532d'/%3E%3C/linearGradient%3E%3CradialGradient id='vig' cx='0.5' cy='0.42' r='0.75'%3E%3Cstop offset='0.6' stop-color='%23000000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0.38'/%3E%3C/radialGradient%3E%3Cpattern id='crowd' width='26' height='16' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='6' cy='5' r='2.4' fill='%23cdd9ff' opacity='0.16'/%3E%3Ccircle cx='19' cy='12' r='2.4' fill='%239fb6ff' opacity='0.10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23sky)'/%3E%3Crect y='30' width='1600' height='140' fill='%23101c3c'/%3E%3Crect y='30' width='1600' height='140' fill='url(%23crowd)'/%3E%3Crect y='170' width='1600' height='12' fill='%230a1228'/%3E%3Crect y='182' width='1600' height='148' fill='%230e1936'/%3E%3Crect y='182' width='1600' height='148' fill='url(%23crowd)'/%3E%3Crect y='330' width='1600' height='16' fill='%230a1228'/%3E%3Cellipse cx='220' cy='40' rx='340' ry='130' fill='%23bcd6ff' opacity='0.08'/%3E%3Cellipse cx='1380' cy='40' rx='340' ry='130' fill='%23bcd6ff' opacity='0.08'/%3E%3Crect y='346' width='1600' height='554' fill='url(%23grass)'/%3E%3Cpolygon points='0,450 440,450 0,900' fill='%23062c18' opacity='0.30'/%3E%3Cpolygon points='1160,450 1600,450 1600,900' fill='%23062c18' opacity='0.30'/%3E%3Cpolygon points='440,450 530,450 200,900 0,900' fill='%23062c18' opacity='0.35'/%3E%3Cpolygon points='620,450 710,450 600,900 400,900' fill='%23062c18' opacity='0.35'/%3E%3Cpolygon points='800,450 890,450 1000,900 800,900' fill='%23062c18' opacity='0.35'/%3E%3Cpolygon points='980,450 1070,450 1400,900 1200,900' fill='%23062c18' opacity='0.35'/%3E%3Crect x='80' y='508' width='1440' height='9' rx='4' fill='%23ffffff' opacity='0.55'/%3E%3Cpath d='M370 513 L290 660 L1310 660 L1230 513' fill='none' stroke='%23ffffff' stroke-width='7' opacity='0.45' stroke-linejoin='round'/%3E%3Cellipse cx='800' cy='845' rx='30' ry='8' fill='%23ffffff' opacity='0.42'/%3E%3Crect width='1600' height='900' fill='url(%23vig)'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    touch-action: manipulation;
}
.m26-pen-top {
    position: absolute; top: 10px; right: 12px; z-index: 5; display: flex; gap: 10px;
    font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #cbd5e1;
}
.m26-pen-top b { color: #4ade80; }
.m26-pen-top span { background: rgba(0, 0, 0, 0.45); padding: 5px 10px; border-radius: 6px; }
/* Valla LED animada (detrás de la portería, con césped de por medio = profundidad) */
.m26-pen-valla {
    position: absolute; top: 35.5%; left: 0; right: 0; height: 9%; z-index: 1;
    background: linear-gradient(180deg, #1a0407, #2b070d 55%, #15030a);
    border-top: 2px solid rgba(255, 255, 255, 0.16);
    border-bottom: 3px solid #07020a;
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    display: flex; align-items: center;
}
.m26-pen-valla-track {
    display: flex; white-space: nowrap; will-change: transform;
    animation: m26valla 16s linear infinite;
}
.m26-pen-valla-track span {
    font-size: clamp(11px, 2.4vw, 21px); font-weight: 800; font-style: italic;
    letter-spacing: 3px; color: #ffd9e0; line-height: 1;
    text-shadow: 0 0 6px rgba(255, 45, 85, 0.9), 0 0 14px rgba(255, 45, 85, 0.5);
}
@keyframes m26valla {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* malla de píxeles LED */
.m26-pen-valla::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
}

/* Portería: marco y red POR DELANTE de la valla (profundidad) */
.m26-pen-goal {
    position: absolute; top: 14%; left: 50%; transform: translateX(-50%); z-index: 2;
    width: 73%; height: 43%;
    border: 5px solid #f8fafc; border-bottom: none; border-radius: 5px 5px 0 0;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.45));
}
.m26-pen-goal::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 6.5%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 13%);
}
.m26-pen-area { position: absolute; inset: 0; z-index: 4; cursor: crosshair; }
.m26-pen-mira {
    position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 5;
    border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.55), inset 0 0 6px rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
.m26-pen-keeper {
    position: absolute; bottom: -2px; left: 50%; width: 24%; height: 88%;
    transform: translateX(-50%); transition: transform 0.38s cubic-bezier(.3,1.4,.6,1); z-index: 3;
    display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
}
.m26-pen-keeper svg { width: 100%; height: 100%; }
.m26-pen-ball {
    position: absolute; bottom: 6.5%; left: 50%; z-index: 4;
    width: clamp(36px, 8%, 54px);
    transform: translateX(-50%);
    transition: transform 0.45s cubic-bezier(.2,.7,.3,1);
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}
.m26-pen-ball svg { display: block; width: 100%; height: auto; }
.m26-pen-msg {
    position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; z-index: 5;
    color: #fff; font-size: clamp(13px, 3vw, 17px); font-weight: 800; letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.m26-pen-again {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6;
    background: linear-gradient(135deg, #e11d48, #be123c); color: #fff; border: none; cursor: pointer;
    font-size: 15px; font-weight: 800; letter-spacing: 1px; padding: 13px 26px; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.m26-pen-again:hover { transform: translate(-50%, -50%) scale(1.06); }

/* Botón oculto del reto de penales + modal */
.m26-pen-toggle {
    position: fixed; bottom: 96px; right: 16px; z-index: 9990;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(7, 13, 31, 0.75); border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
    opacity: 0.35; transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.m26-pen-toggle:hover { opacity: 1; transform: scale(1.12) rotate(15deg); }
.m26-pen-modal {
    position: fixed; inset: 0; z-index: 99990;
    background: rgba(3, 6, 16, 0.82);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.m26-pen-modal[hidden] { display: none; }
.m26-pen-modal-card { position: relative; width: min(680px, 96vw); }
.m26-pen-modal-card .m26-player { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.m26-pen-cerrar {
    position: absolute; top: -14px; right: -14px; z-index: 7;
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: #e11d48; color: #fff; font-size: 20px; font-weight: 800; line-height: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.m26-pen-cerrar:hover { transform: scale(1.1); }

/* ============ FRANJA DE CÉSPED (divisor inferior) ============ */
.m26-campo {
    position: relative; height: 64px; overflow: hidden;
    background: linear-gradient(180deg, rgba(22, 101, 52, 0.30), rgba(20, 83, 45, 0.55));
    border-top: 2px solid rgba(255, 255, 255, 0.18);
    border-bottom: 2px solid rgba(255, 255, 255, 0.10);
}
.m26-campo::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 70px, transparent 70px 140px);
}

/* ============ COUNTDOWN BAR ============ */
.m26-countdown-bar {
    max-width: 1140px; margin: 0 auto; transform: translateY(50%);
    background: linear-gradient(135deg, #101b38, #0b1430); border: 1px solid rgba(0, 173, 255, 0.3);
    border-radius: 16px; padding: 22px 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    display: block;
}
.m26-countdown-bar .m26-block { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.m26-vs { display: flex; align-items: center; gap: 14px; font-size: 19px; color: #fff; }
.m26-vs-team { display: inline-flex; align-items: center; gap: 10px; }
.m26-vs-team b { font-weight: 800; }
.m26-vs-x { color: #6fd3ff; font-weight: 900; font-size: 14px; }
.m26-cd-meta { color: #9fb0d0; font-size: 14px; font-weight: 600; }
.m26-cd-score { font-size: 34px; font-weight: 900; color: #fff; }
.m26-cd-empty { color: #9fb0d0; text-align: center; width: 100%; }

.m26-timer { display: flex; gap: 10px; }
.m26-t-box {
    background: rgba(22, 163, 74, 0.16); border: 1px solid rgba(22, 163, 74, 0.5); border-radius: 10px;
    min-width: 64px; padding: 8px 10px; text-align: center; display: inline-flex; flex-direction: column;
}
.m26-t-box b { font-size: 24px; font-weight: 900; color: #4ade80; line-height: 1.1; }
.m26-t-box i { font-style: normal; font-size: 10px; letter-spacing: 1.5px; color: #9fb0d0; font-weight: 700; }

/* ============ SECCIONES ============ */
.m26-body {
    max-width: 1140px; margin: 0 auto; padding: 90px 20px 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2.5'%3E%3Crect x='30' y='30' width='1140' height='640' rx='4'/%3E%3Cline x1='600' y1='30' x2='600' y2='670'/%3E%3Ccircle cx='600' cy='350' r='100'/%3E%3Ccircle cx='600' cy='350' r='4'/%3E%3Crect x='30' y='170' width='180' height='360'/%3E%3Crect x='30' y='265' width='70' height='170'/%3E%3Crect x='990' y='170' width='180' height='360'/%3E%3Crect x='1100' y='265' width='70' height='170'/%3E%3Cpath d='M210 290 A100 100 0 0 1 210 410'/%3E%3Cpath d='M990 290 A100 100 0 0 0 990 410'/%3E%3C/g%3E%3C/svg%3E") center 120px / 1100px auto no-repeat;
}
.m26-section { margin-bottom: 48px; }
.m26-h2 {
    color: #fff !important; font-size: 24px !important; font-weight: 900 !important; margin: 0 0 20px !important;
    text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 12px;
}
.m26-h2::before { content: ""; width: 6px; height: 24px; background: linear-gradient(180deg, #00adff, #e11d48); border-radius: 3px; }

.m26-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.m26-match {
    background: linear-gradient(160deg, #101b38, #0c1530); border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px; padding: 14px 16px;
}
.m26-match-pan { border-color: rgba(0, 173, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 173, 255, 0.25), 0 10px 30px rgba(0, 173, 255, 0.08); }
.m26-match-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.m26-etapa { color: #6fd3ff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.m26-pill {
    font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #9fb0d0;
    background: rgba(255, 255, 255, 0.07); padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
}
.m26-pill-live { background: #e11d48; color: #fff; }
.m26-match-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m26-team { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: 15px; min-width: 0; }
.m26-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m26-score { font-size: 21px; font-weight: 900; color: #fff; white-space: nowrap; }
.m26-score-hora { color: #4ade80; font-size: 16px; }

.m26-crest { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.m26-vs .m26-crest { width: 34px; height: 34px; }
.m26-crest-txt {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    background: rgba(255, 255, 255, 0.12); border-radius: 50%; font-size: 9px; font-weight: 800; color: #fff;
}
.m26-empty { color: #9fb0d0; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 26px; text-align: center; }
.m26-ver-todos { text-align: center; margin-top: 20px; }
.m26-fecha {
    color: #9fb0d0 !important; font-size: 14px !important; font-weight: 800 !important;
    text-transform: uppercase; letter-spacing: 1.5px; margin: 28px 0 14px !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 920px) {
    .m26-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .m26-hero { padding-top: 40px; }
    .m26-sub { max-width: none; }
    .m26-countdown-bar { transform: none; margin: 0 16px; }
    .m26-countdown-bar .m26-block { justify-content: center; text-align: center; }
    .m26-body { padding-top: 40px; }
}
@media (max-width: 560px) {
    .m26-vs { font-size: 16px; flex-wrap: wrap; justify-content: center; }
    .m26-t-box { min-width: 54px; }
    .m26-t-box b { font-size: 19px; }
    .m26-grid { grid-template-columns: 1fr; }
}