:root {
    --accent:      #0E3F72;   /* PR Blue */
    --accent-h:    #091e4a;
    --accent-lite: #e8f0ff;
    --gold:        #CE1126;   /* PR Red */
    --gold-h:      #a50e1f;
    --gold-lite:   #fff0f0;
    --sky:         #5BAFD6;
    --sky-lite:    #e8f4fb;
    --dark-bg:     #f7f8fa;
    --card-bg:     #ffffff;
    --card-border: rgba(0,0,0,0.08);
    --text-dark:   #0d1f3c;
    --text-mid:    #3d4f6e;
    --text-soft:   #7a8fa6;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--dark-bg);
    color: var(--text-dark);
    overflow-x: hidden;
}

/* -- NAVBAR ------------------------------------ */
/* nav ? see _event_caribbean_nav.html */

/* -- Language switcher pill -------------------- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    padding: 3px 4px;
    margin-left: 10px;
    flex-shrink: 0;
}
.lang-switch form {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
}
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.6px;
    line-height: 1;
}
.lang-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
    transform: scale(1.05);
}
.lang-btn.lang-active {
    background: rgba(255,255,255,0.22);
    color: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.lang-flag {
    width: 18px !important;
    height: 13px !important;
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
@media (max-width:768px) {
    .lang-switch { margin-left: 6px; }
    .lang-btn    { padding: 4px 7px; font-size: 0.68rem; }
}

/* -- HERO --------------------------------------- */
/* -- HERO --------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    z-index: 1;
}

/* The banner image fills the full width naturally */
.hero-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Unused but kept for JS parallax reference */
.hero-bg  { display: none; }
.hero-overlay { display: none; }

/* CTA strip pinned over the bottom of the image */
.hero-inner {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 28px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}

@keyframes hero-inner-drop {
    0%   { transform: translateY(-22px); opacity: .4; }
    100% { transform: translateY(0);     opacity: 1;  }
}

@media (max-width: 600px) {
    .hero-inner {
        position: relative;
        bottom: auto; left: auto; right: auto;
        background: linear-gradient(135deg, #091e4a 0%, #0E3F72 100%);
        padding: 20px 16px 24px;
        animation: hero-inner-drop 550ms cubic-bezier(.22,1,.36,1) 150ms both;
    }
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 28px;
}

.hero-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

.hero-title {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.75;
    max-width: 580px;
    margin-bottom: 38px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0;
}

/* Hero buttons ? dise?ados para contrastar sobre imagen rojo/verde */
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 10px 22px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.22s ease;
    white-space: nowrap;
    letter-spacing: .02em;
}
/* Bot?n principal: blanco s?lido con texto oscuro ? m?ximo contraste */
.hero-btn-primary {
    background: #fff;
    color: #07101e;
    border-color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.hero-btn-primary:hover {
    background: #CE1126;
    color: #fff;
    border-color: #CE1126;
    box-shadow: 0 8px 28px rgba(206,17,38,0.45);
    transform: translateY(-2px);
    text-decoration: none;
}
/* Bot?n secundario: borde blanco con fondo semitransparente */
.hero-btn-outline {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.hero-btn-outline:hover {
    background: #fff;
    color: #07101e;
    border-color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
/* Bot?n Watch Video: ghost con ?cono circular */
.hero-btn-ghost {
    background: transparent;
    color: rgba(255,255,255,0.88);
    border-color: transparent;
    padding: 12px 16px;
}
.hero-btn-ghost:hover { color: #fff; }
.hero-btn-play-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.2s;
}
.hero-btn-ghost:hover .hero-btn-play-icon {
    background: #CE1126;
    border-color: #CE1126;
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }
    .hero-btn {
        font-size: .78rem;
        padding: 10px 16px;
        gap: 6px;
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-btn-ghost {
        flex: 0 0 auto;
        padding: 10px 16px;
        justify-content: center;
        gap: 8px;
    }
    .hero-btn-play-icon {
        width: 28px; height: 28px; font-size: .72rem;
    }
}

/* -- Scroll-down cue ------------------------------ */
.hero-scroll-cue {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: 20px; text-decoration: none; cursor: pointer;
    opacity: 0; animation: scrollCueFadeIn 1s ease 1.8s forwards;
}
@keyframes scrollCueFadeIn { to { opacity: 1; } }
/* Mobile: always show scroll cue ? override desktop rule AFTER it so cascade wins */
@media (max-width: 600px) {
    .hero-scroll-cue {
        display: flex;
        margin-top: 12px;
        opacity: 0;
        animation: scrollCueFadeIn 800ms ease 1.4s forwards;
    }
    .hero-scroll-cue .hero-scroll-arrow {
        border-color: rgba(255,255,255,.3);
        width: 28px; height: 28px;
    }
}
.hero-scroll-text {
    font-size: .72rem; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    transition: color .2s;
}
.hero-scroll-cue:hover .hero-scroll-text { color: rgba(255,255,255,.9); }
.hero-scroll-arrow {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: rgba(255,255,255,.6);
    animation: scrollBounce 1.8s ease-in-out infinite;
    transition: border-color .2s, color .2s;
}
.hero-scroll-cue:hover .hero-scroll-arrow {
    border-color: rgba(255,255,255,.7);
    color: rgba(255,255,255,.95);
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}
/* Hide scroll cue once user has scrolled */
.scroll-cue-hidden { opacity: 0 !important; pointer-events: none; transition: opacity .5s; }

.btn-primary-ev {
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 30px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s;
}

.btn-primary-ev:hover {
    background: var(--gold-h);
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(14,63,114,0.45);
    color: #fff;
}

.btn-video {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.88);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-video:hover { color: #fff; }

.btn-video-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-video:hover .btn-video-icon {
    background: var(--accent);
    border-color: #0E3F72;
}

/* -- COUNTDOWN ? acoplado al hero ------------ */
.countdown-wrap {
    width: 100%;
    background: #07101e;
    border-top: 3px solid #CE1126;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 48px;
    padding: 20px 32px;
}

/* Left: status + date */
.countdown-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.countdown-status {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.countdown-date-big {
    font-size: 1.15rem;
    font-weight: 900;
    color: #f0c040;
    letter-spacing: .3px;
    line-height: 1.15;
}
.countdown-city {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.38);
    letter-spacing: 1px;
}

/* Divider */
.countdown-divider {
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}
@media (max-width: 600px) { .countdown-divider { display: none; } }

.countdown-boxes {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cd-box {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(206,17,38,0.25);
    border-radius: 10px;
    width: 72px;
    padding: 10px 6px;
    text-align: center;
}

.cd-num {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}

.cd-lbl {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.40);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.cd-sep {
    font-size: 1.6rem;
    color: #CE1126;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 14px;
}

@media (max-width: 600px) {
    .countdown-wrap { padding: 16px 16px; gap: 12px 0; flex-direction: column; align-items: center; text-align: center; }
    .countdown-left { align-items: center; }
    .cd-box { width: 64px; padding: 8px 4px; }
    .cd-num { font-size: 1.6rem; }
}

/* -- SECTIONS BASE ---------------------------- */
.section {
    padding: 90px 48px;
    scroll-margin-top: 72px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Parallax background layer ? each section gets its own subtle BG */
.section::before {
    content: '';
    position: absolute;
    inset: -60px 0;           /* extra height top/bottom for movement */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;  /* native CSS parallax on desktop */
    will-change: transform;
    pointer-events: none;
    z-index: 0;
    opacity: 0;               /* hidden by default; shown via JS per section */
    transition: opacity 0.4s;
}

/* Section parallax activated */
.section.has-parallax::before { opacity: 1; }

/* Per-section parallax images */
#juegos::before {
    background-image:
        radial-gradient(ellipse 900px 500px at 85% -10%, rgba(14,63,114,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 700px 400px at 5% 110%, rgba(206,17,38,0.07) 0%, transparent 60%);
    opacity: 1;
}

#equipos::before {
    background-image:
        radial-gradient(ellipse 700px 500px at 10% 20%, rgba(91,175,214,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 600px 400px at 90% 80%, rgba(206,17,38,0.07) 0%, transparent 55%);
    opacity: 1;
}

#acerca::before {
    background-image:
        radial-gradient(ellipse 800px 500px at 80% 30%, rgba(206,17,38,0.09) 0%, transparent 60%),
        radial-gradient(ellipse 600px 400px at 5% 70%, rgba(14,63,114,0.14) 0%, transparent 55%);
    opacity: 1;
}

#sede::before {
    background-image:
        radial-gradient(ellipse 900px 500px at 50% 0%, rgba(14,63,114,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 600px 400px at 5% 90%, rgba(206,17,38,0.07) 0%, transparent 55%);
    opacity: 1;
}

#video::before {
    background-image:
        radial-gradient(ellipse 800px 400px at 50% 50%, rgba(206,17,38,0.07) 0%, transparent 60%);
    opacity: 1;
}

.section-inner { position: relative; z-index: 1; }

/* Parallax floating orbs ? decorative drifting circles */
.parallax-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

/* Scroll-reveal */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------
   ? EFFECTS ? particles, glows, shimmers, pulses
-------------------------------------------------- */

/* -- Fondos de secci?n ? alternancia tricolor Dorado, Puerto Rico -- */
#juegos      { background: #ffffff; }
#equipos     { background: var(--accent-lite); }   /* tinte navy azul */
#sede        { background: var(--gold-lite); }     /* tinte oro/crema */
#video       { background: #07101e !important; }   /* verde oscuro rico */
#merch       { background: #ffffff; }
#atracciones { background: var(--accent-lite); }   /* tinte navy azul */
#proximos    { background: #ffffff; }
#turismo     { background: var(--gold-lite); }     /* tinte oro/crema */


/* -- Bordes superiores -- Caribbean tricolor stripe -- */
#juegos      { border-top: 4px solid var(--accent); }
#equipos     { border-top: 4px solid var(--sky); }
#sede        { border-top: 4px solid var(--gold); }
#merch       { border-top: 4px solid var(--gold); }
#atracciones { border-top: 4px solid var(--accent); }
#proximos    { border-top: 4px solid var(--gold); }
#turismo     { border-top: 4px solid var(--sky); }

/* -- SECTION EYEBROW: pill-style tag ------------------- */
.section-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 13px 4px 10px;
    border-radius: 999px;
    font-size: .7rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}
.section-eyebrow::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Gold eyebrow pill */
#juegos .section-eyebrow,
#proximos .section-eyebrow,
#merch .section-eyebrow,
#sede .section-eyebrow,
#turismo .section-eyebrow {
    color: #8a5e00 !important;
    background: rgba(206,17,38,.14) !important;
    border: 1px solid rgba(206,17,38,.35) !important;
}
#juegos .section-eyebrow::before,
#proximos .section-eyebrow::before,
#merch .section-eyebrow::before,
#sede .section-eyebrow::before,
#turismo .section-eyebrow::before { background: #CE1126; }

/* Sky blue eyebrow pill */
#equipos .section-eyebrow,
#atracciones .section-eyebrow {
    color: #1a6d9a !important;
    background: rgba(91,175,214,.12) !important;
    border: 1px solid rgba(91,175,214,.32) !important;
}
#equipos .section-eyebrow::before,
#atracciones .section-eyebrow::before { background: #5BAFD6; }

/* Dark sections: white/gold eyebrow pill */
#video .section-eyebrow {
    color: #CE1126 !important;
    background: rgba(206,17,38,.12) !important;
    border: 1px solid rgba(206,17,38,.28) !important;
}
#video .section-eyebrow::before { background: #CE1126; }

/* -- Floating particles ------------------------ */
.particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
}

@keyframes float-up {
    0%   { transform: translateY(0) scale(1);    opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: .5; }
    100% { transform: translateY(-105vh) scale(0.2); opacity: 0; }
}

/* -- Animated section eyebrow ------------------ */
@keyframes eyebrow-shimmer {
    0%, 100% { letter-spacing: 3px; opacity: 1; }
    50%       { letter-spacing: 4.5px; opacity: .75; }
}

.section-eyebrow {
    animation: eyebrow-shimmer 4s ease-in-out infinite;
}

/* -- Hero title animated gradient ------------- */
@keyframes hero-gradient-sweep {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.hero-title {
    /* White dominant with very subtle warmth ? elegant */
    background: linear-gradient(110deg,
        #e8f0ff 0%,
        #ffffff 20%,
        #ffffff 75%,
        #fff0f0 90%,
        #ffffff 100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hero-gradient-sweep 8s ease-in-out infinite alternate;
}

/* -----------------------------------------------------------
   Caribbean World Series 2026 -- DESIGN SYSTEM ENHANCEMENTS
   PR Blue #0E3F72 * PR Red #CE1126 * Sky #5BAFD6 * White #ffffff
----------------------------------------------------------- */

/* -- Section heading: bold navy with gold underline bar -- */
.section-heading {
    position: relative;
    font-weight: 900 !important;
    letter-spacing: -.02em;
    color: var(--text-dark) !important;
    line-height: 1.1;
}
.section-heading .heading-accent {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}
.section-heading::after {
    content: '';
    display: block;
    width: 48px; height: 4px;
    border-radius: 2px;
    margin-top: 12px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--sky) 100%);
}
/* Dark sections: heading in white with gold underline */
#video .section-heading,
.section-dark .section-heading {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
}
#video .section-heading::after,
.section-dark .section-heading::after {
    background: linear-gradient(90deg, #CE1126 0%, #5BAFD6 100%);
}

/* -- Light section heading: gold left bar (existing) enhanced -- */
.section-light .section-heading {
    padding-left: 18px;
    border-left: 5px solid #CE1126;
}
.section-light .section-heading::after { display: none; }

/* -- Section sub-heading style ------------------------------ */
.section-sub {
    color: var(--text-mid) !important;
    font-size: .98rem;
    line-height: 1.6;
    max-width: 600px;
}

/* -- MATCH / GAME CARDS: navy left accent ------------------- */
.match-card {
    border-left: 3px solid var(--accent) !important;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.match-card:hover {
    border-left-color: var(--gold) !important;
    box-shadow: 0 6px 24px rgba(14,63,114,.14) !important;
    transform: translateY(-2px);
}
.match-card.live { border-left-color: var(--gold) !important; }

/* Match card header: navy gradient */
.match-card-header {
    background: linear-gradient(90deg, var(--accent) 0%, #1e3a6e 100%) !important;
}
.match-card-status.live {
    background: var(--gold) !important;
    color: var(--accent) !important;
    font-weight: 900 !important;
}
.match-card-status.final {
    background: rgba(14,63,114,.1) !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
}

/* -- TEAM CARDS: navy border + gold hover accent ------------ */
.team-card {
    border-top: 3px solid var(--accent) !important;
    transition: border-top-color .2s, box-shadow .2s, transform .2s;
}
.team-card:hover {
    border-top-color: var(--gold) !important;
    box-shadow: 0 8px 28px rgba(14,63,114,.15) !important;
    transform: translateY(-3px);
}

/* -- PRICE CARDS: featured gold shimmer -------------------- */
.price-card-featured {
    background: linear-gradient(160deg, #0E3F72 0%, #0d1f3c 100%) !important;
    border: 2px solid rgba(206,17,38,.4) !important;
    box-shadow: 0 12px 40px rgba(14,63,114,.35), 0 0 0 1px rgba(206,17,38,.15) !important;
}
.price-card-featured::before {
    background: linear-gradient(90deg, transparent, rgba(206,17,38,.08), transparent) !important;
}

/* -- STAT NUMBERS: bold gold pulse with sky accent ---------- */
.stat-num {
    font-weight: 900 !important;
    background: linear-gradient(135deg, #CE1126 0%, #f0c040 50%, #CE1126 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: stat-gold-sweep 3s ease-in-out infinite alternate, stat-pulse 3s ease-in-out infinite;
}
@keyframes stat-gold-sweep {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* -- COUNTDOWN NUMBERS: extra bold gold -------------------- */
.countdown-num {
    font-weight: 900 !important;
    color: #CE1126 !important;
    text-shadow: 0 0 20px rgba(206,17,38,.5), 0 2px 8px rgba(0,0,0,.4) !important;
}

/* -- DIVISION GAME TYPE CHIPS ------------------------------ */
.day-game-type.pool    { background: rgba(14,63,114,.12)  !important; color: #0E3F72  !important; font-weight: 700 !important; }
.day-game-type.bracket { background: rgba(206,17,38,.14) !important; color: #8a5e00  !important; font-weight: 700 !important; }
.day-game-type.friendly{ background: rgba(91,175,214,.12)!important; color: #1a6d9a  !important; font-weight: 700 !important; }

/* -- DAY TABS: navy/gold theme ----------------------------- */
.day-tab {
    border-bottom: 2px solid transparent !important;
    transition: color .2s, border-color .2s !important;
}
.day-tab.active {
    color: var(--accent) !important;
    border-bottom-color: var(--gold) !important;
    background: rgba(14,63,114,.06) !important;
    font-weight: 800 !important;
}

/* -- GAME SCHEDULE SECTION: header row gold stripe --------- */
.sched-day-header {
    background: linear-gradient(90deg, rgba(14,63,114,.06), rgba(206,17,38,.06)) !important;
    border-top: 2px solid rgba(206,17,38,.35) !important;
    border-bottom: 1px solid rgba(206,17,38,.15) !important;
}

/* -- PARTNER LOGOS: navy border on hover ------------------- */
.partner-logo-wrap:hover {
    border-color: rgba(14,63,114,.3) !important;
    box-shadow: 0 4px 16px rgba(14,63,114,.12) !important;
}

/* -- MERCH CARDS: gold top bar ----------------------------- */
.merch-card {
    border-top: 3px solid var(--gold) !important;
    transition: box-shadow .3s, transform .3s !important;
}
.merch-card:hover {
    box-shadow: 0 12px 36px rgba(14,63,114,.18) !important;
    transform: translateY(-4px) !important;
}

/* -- ATTR CARDS (attractions/tourism): navy overlay tint ---- */
.attr-card:hover .attr-content .attr-title {
    color: #CE1126;
    transition: color .25s;
}

/* -- VIEW/CTA BUTTONS: navy primary, gold secondary --------- */
.btn-primary-ev {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
}
.btn-primary-ev:hover {
    background: var(--accent-h) !important;
    box-shadow: 0 8px 24px rgba(14,63,114,.35) !important;
    transform: translateY(-2px);
}

/* -- FOOTER: branded navy with gold accent links ------------ */
.ev-footer {
    background: linear-gradient(180deg, #07101e 0%, #040c18 100%) !important;
    border-top: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--accent) 33%, #fff 33% 66%, var(--gold) 66%) 1 !important;
}
.ev-footer a:hover { color: var(--gold) !important; }

/* -- INSTAGRAM SECTION: sky blue pill tags ------------------ */
.fans-tag { border-radius: 8px !important; }
.fans-tag-primary {
    background: rgba(14,63,114,.08) !important;
    border: 1px solid rgba(14,63,114,.18) !important;
    color: var(--accent) !important;
}
.fans-tag-primary:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

/* -- POOL STANDINGS TABLE: navy accent header --------------- */
.standings-tbl thead { background: var(--accent) !important; }
.standings-tbl thead th { color: rgba(255,255,255,.85) !important; }
.standings-tbl tbody tr:nth-child(odd) { background: rgba(14,63,114,.03); }
.standings-tbl .rd-pos { color: #CE1126 !important; font-weight: 800 !important; }

/* -- VENUE PILL: city in sky, state in navy, country in gold -- */
.venue-pill.city    { background: rgba(91,175,214,.15)  !important; border: 1px solid rgba(91,175,214,.40) !important; color: #1a6d9a !important; }
.venue-pill.state   { background: rgba(14,63,114,.12)    !important; border: 1px solid rgba(14,63,114,.30)   !important; color: #0E3F72   !important; }
.venue-pill.country { background: rgba(206,17,38,.12)   !important; border: 1px solid rgba(206,17,38,.30)  !important; color: #8a5e00   !important; }

/* -- LIVE STATUS DOT: gold pulse for Caribbean ------------ */
.live-dot, .status-live {
    background: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(206,17,38,.25) !important;
}

/* -- BACK BUTTON: navy with sky hover ----------------------- */
.back-btn { background: var(--accent) !important; }
.back-btn:hover { background: var(--sky) !important; }


/* -- Section heading glow (dark sections only) -- */
.section-light .section-heading { padding-left: 18px; border-left: 5px solid #CE1126; }

/* -- Stat numbers pulse glow ------------------- */
@keyframes stat-pulse {
    0%,100% { text-shadow: 0 0 8px  rgba(206,17,38,0.4); }
    50%      { text-shadow: 0 0 22px rgba(206,17,38,0.7), 0 0 40px rgba(206,17,38,0.3); }
}

.stat-num { animation: stat-pulse 3s ease-in-out infinite; }

/* -- CTA button pulse ring --------------------- */
@keyframes btn-ring-pulse {
    0%   { opacity: .7; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.5); }
}

.btn-primary-ev {
    position: relative;
    overflow: visible !important;
}

.btn-primary-ev::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(206,17,38,0.7);
    pointer-events: none;
    animation: btn-ring-pulse 2s ease-out infinite;
}

/* -- Card shimmer sweep on hover --------------- */
.merch-card,
.team-card,
.division-game-card,
.attr-card {
    overflow: hidden;
}

.merch-card::before,
.team-card::before,
.division-game-card::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 10;
}

.merch-card:hover::before,
.team-card:hover::before,
.division-game-card:hover::before {
    left: 160%;
}

/* -- Glowing card border on hover -------------- */
.merch-card:hover {
    border-color: rgba(206,17,38,0.6) !important;
    box-shadow: 0 0 0 1px rgba(206,17,38,0.3), 0 20px 60px rgba(14,63,114,0.3), 0 0 80px rgba(206,17,38,0.10) !important;
}

.attr-card:hover {
    box-shadow: 0 20px 60px rgba(14,63,114,0.35), 0 0 100px rgba(206,17,38,0.14) !important;
}

/* -- Animated gradient border on section dividers */
@keyframes border-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.section-heading::after {
    content: '';
    display: block;
    height: 3px;
    width: 80px;
    margin: 14px 0 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #0E3F72, #CE1126, #fff, #0E3F72);
    background-size: 200% auto;
    animation: border-flow 3s linear infinite;
}

.section-light .section-heading::after {
    background: linear-gradient(90deg, #0E3F72, #CE1126, #0E3F72);
    background-size: 200% auto;
    animation: border-flow 3s linear infinite;
}

/* -- Navbar tricolor stripe animated ----------- */
@keyframes tricolor-slide {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.ev-nav::before {
    background: linear-gradient(90deg, #CE1126 0% 20%, #ffffff 20% 40%, #0E3F72 40% 60%, #ffffff 60% 80%, #CE1126 80% 100%);
    background-size: 200% 100%;
    animation: tricolor-slide 6s linear infinite;
}

/* -- Orb animation ----------------------------- */
@keyframes orb-breathe {
    0%,100% { transform: scale(1);    filter: blur(0px); }
    50%      { transform: scale(1.18); filter: blur(2px); }
}

.parallax-orb { animation: orb-breathe 8s ease-in-out infinite; }
.parallax-orb:nth-child(2) { animation-delay: -4s; animation-duration: 10s; }

/* -- Team card glow ---------------------------- */
.team-card:hover {
    border-color: rgba(184,144,26,0.4) !important;
    box-shadow: 0 12px 40px rgba(0,60,30,0.25), 0 0 40px rgba(184,144,26,0.06) !important;
}

/* -- Countdown num glow ------------------------ */
@keyframes cd-glow {
    0%,100% { text-shadow: 0 0 10px rgba(0,200,90,0.4); }
    50%      { text-shadow: 0 0 30px rgba(0,200,90,0.8), 0 0 60px rgba(0,200,90,0.3); }
}

.cd-num { animation: cd-glow 2.5s ease-in-out infinite; }

/* -- Venue hero name glow ---------------------- */
.venue-name {
    text-shadow: 0 0 40px rgba(0,200,90,0.25), 0 2px 6px rgba(0,0,0,0.6);
}

/* -- Particles canvas (JS injected) ----------- */
#particles-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.10;
}

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

.section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #0E3F72;          /* verde logo */
    margin-bottom: 12px;
}

.section-heading {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 48px;
    color: #fff;
}

.section:not(.section-light) .section-heading {
    color: var(--text-dark);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    text-shadow: none;
    padding-left: 20px;
    border-left: 5px solid var(--accent);
}
#equipos   .section-heading { border-left-color: var(--accent); }
#atracciones .section-heading { border-left-color: var(--gold); }
#sede    .section-heading,
#turismo .section-heading { border-left-color: var(--gold); }
#merch   .section-heading { border-left-color: var(--gold); }
#proximos .section-heading { border-left-color: var(--gold); }

.section-light {
    background: #fdf8f0;
    color: #111;
}

.section-light .section-heading {
color: #0d1f3c;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.section-light .section-eyebrow { color: #0E3F72; }

/* -- HERO BASEBALL COMET ---------------------- */
.hero-baseball {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    top: 28%;
    left: -220px;
    width: 200px;
    height: 200px;
    will-change: transform, opacity;
    /* runs ONCE, 2.4s after page load, stays invisible at the end */
    animation: baseball-comet 4.6s cubic-bezier(0.12, 0.0, 0.22, 1.0) 2.0s 1 forwards;
    opacity: 0;  /* hidden before it starts */
}

/* The ball image ? sharp, never blurred */
.hero-baseball img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* glow around the ball edges, no blur on the image */
    filter: drop-shadow(0 0 18px rgba(255,120,20,0.65))
            drop-shadow(0 0 50px rgba(255,70,0,0.40))
            brightness(1.12);
}

/* Wide ambient glow extending left from the flames */
.hero-baseball::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 30%;
    transform: translateY(-50%);
    width: 600px;
    height: 110px;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255,140,10,0.06) 20%,
        rgba(255,90,0,0.22)   50%,
        rgba(255,60,0,0.45)   78%,
        rgba(255,120,10,0.38) 100%);
    border-radius: 50%;
    filter: blur(24px);
    z-index: 1;
}
/* Bright heat-core streak */
.hero-baseball::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translateY(-50%);
    width: 240px;
    height: 14px;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255,220,100,0.18) 30%,
        rgba(255,180,60,0.50)  65%,
        rgba(255,240,180,0.75) 100%);
    border-radius: 50%;
    filter: blur(5px);
    z-index: 1;
}

@keyframes baseball-comet {
    0% {
        opacity: 0;
        transform: translateX(calc(100vw + 200px)) translateY(0px) scale(0.72);
    }
    7% {
        opacity: 0;
        transform: translateX(calc(100vw + 80px)) translateY(-6px) scale(0.82);
    }
    16% {
        opacity: 1;
        transform: translateX(calc(76vw)) translateY(-14px) scale(0.93);
    }
    40% {
        opacity: 1;
        transform: translateX(calc(42vw)) translateY(-26px) scale(1.08);
    }
    64% {
        opacity: 1;
        transform: translateX(calc(16vw)) translateY(-12px) scale(1.0);
    }
    80% {
        opacity: 0.75;
        transform: translateX(calc(-50px)) translateY(5px) scale(0.88);
    }
    90% {
        opacity: 0.15;
        transform: translateX(calc(-170px)) translateY(13px) scale(0.72);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(-260px)) translateY(18px) scale(0.55);
    }
}

/* -- STATS BAR -------------------------------- */
.stats-bar {
    background: var(--accent);
    border-top: none;
    border-bottom: 4px solid var(--gold);
    padding: 32px 48px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

/* Tricolor top stripe inside stats bar */
.stats-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold) 33.3%, #fff 33.3%, #fff 66.6%, var(--accent) 66.6%);
}

.stat-item {
    flex: 1;
    min-width: 160px;
    text-align: center;
    padding: 12px 24px;
    border-right: 1px solid rgba(255,255,255,0.18);
}

.stat-item:last-child { border-right: none; }

.stat-num {
    font-size: 2.1rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 6px;
}

.stat-num span { color: #5BAFD6; }

.stat-label {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

/* -- PRICING ---------------------------------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.price-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
}

.price-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.14);
}

.price-card-featured {
    background: var(--accent);
    color: #fff;
}

.price-card-top {
    padding: 32px 28px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.price-card-featured .price-card-top {
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.price-tag {
    display: inline-block;
    background: rgba(14,63,114,0.1);
    color: #0E3F72;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.price-card-featured .price-tag {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.price-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.price-card-featured .price-name { color: #fff; }

.price-desc {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.5;
}

.price-card-featured .price-desc { color: rgba(255,255,255,0.7); }

.price-body {
    padding: 24px 28px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.price-amount-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 6px;
}

.price-currency {
    font-size: 1.2rem;
    font-weight: 700;
    color: #555;
    padding-bottom: 6px;
}

.price-card-featured .price-currency { color: rgba(255,255,255,0.7); }

.price-number {
    font-size: 3rem;
    font-weight: 900;
    color: #111;
    line-height: 1;
}

.price-card-featured .price-number { color: #fff; }

.price-period {
    font-size: 0.8rem;
    color: #aaa;
    padding-bottom: 8px;
}

.price-card-featured .price-period { color: rgba(255,255,255,0.6); }

.price-divider {
    height: 1px;
    background: rgba(0,0,0,0.07);
    margin: 20px 0;
}

.price-card-featured .price-divider { background: rgba(255,255,255,0.15); }

.price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}

.price-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.875rem;
    color: #555;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.price-features li:last-child { border-bottom: none; }

.price-card-featured .price-features li { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.08); }

.price-features li i {
    font-size: 0.7rem;
    color: #0E3F72;
    margin-top: 5px;
    flex-shrink: 0;
}

.price-card-featured .price-features li i { color: #fff; }

.price-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s;
    text-decoration: none;
    border: none;
}

.price-btn-outline {
    background: transparent;
    border: 2px solid rgba(0,0,0,0.12);
    color: #333;
}

.price-btn-outline:hover {
    background: #f5f5f5;
    border-color: rgba(0,0,0,0.2);
    color: #111;
}

.price-btn-solid {
    background: #fff;
    color: #0E3F72;
}

.price-btn-solid:hover {
    background: #e8f0ff;
    color: var(--accent-h);
}

/* Division table */
.div-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-bottom: 8px;
}

.div-table thead th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #bbb;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.price-card-featured .div-table thead th { color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.15); }

.div-table tbody td {
    padding: 7px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    color: #555;
}

.price-card-featured .div-table tbody td { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.07); }

.div-table tbody td:last-child {
    text-align: right;
    font-weight: 700;
    color: #111;
}

.price-card-featured .div-table tbody td:last-child { color: #fff; }

/* -- TEAMS ------------------------------------ */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.team-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: all 0.22s;
    box-shadow: 0 1px 6px rgba(14,63,114,0.06);
}

.team-card:hover {
    background: var(--accent-lite);
    border-left-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(14,63,114,0.14);
}

.team-logo {
    width: 46px; height: 46px;
    border-radius: 10px;
    background: var(--accent-lite);
    border: 1px solid rgba(14,63,114,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.team-logo img { width: 100%; height: 100%; object-fit: cover; }

.team-initial {
    color: var(--accent);
    font-weight: 900;
    font-size: 1.2rem;
}

.team-name {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.88rem;
    line-height: 1.3;
}

.team-players {
    font-size: 0.72rem;
    color: var(--text-soft);
    margin-top: 3px;
}

.badge-count {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    border: none;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
}

/* -- ABOUT ------------------------------------ */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.about-img-wrap {
    position: relative;
}

.about-img {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

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

.about-img-accent {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px; height: 120px;
    border-radius: 20px;
    background: rgba(19, 32, 64, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 8px 32px rgba(14,63,114,0.35);
}

.about-img-accent-num {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.about-img-accent-lbl {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.about-text {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 0;
}

.about-text p { margin-bottom: 14px; }

/* -- LOCATION --------------------------------- */
.venue-hero {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 32px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
}

.venue-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.venue-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,20,.95) 0%, rgba(10,10,20,.5) 55%, transparent 100%);
}

.venue-hero-content {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 32px;
}

.venue-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.venue-name {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.venue-addr-line {
    font-size: .9rem;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
    margin-bottom: 18px;
}

.venue-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-directions:hover {
    background: var(--gold-h);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14,63,114,.4);
}

.btn-site-web {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: .82rem;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: all .2s;
}

.btn-site-web:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}

/* -- NEW: Gallery + Details split layout -------- */
.venue-gallery-split {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.14);
    margin-bottom: 36px;
    min-height: 520px;
}
@media (max-width: 900px) {
    .venue-gallery-split { grid-template-columns: 1fr; min-height: auto; }
}

/* Gallery side */
.venue-gallery-side {
    display: grid;
    grid-template-rows: 1fr 160px;
    gap: 4px;
    background: #111;
}
.venue-gallery-main {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
.venue-gallery-main-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}
.venue-gallery-main:hover .venue-gallery-main-img { transform: scale(1.04); }
.venue-gallery-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
    pointer-events: none;
    overflow: hidden;
}
/* Cinematic shimmer + subtle grain */
.venue-gallery-main-overlay::before {
    content: '';
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 18% 92%, rgba(206,17,38,0.22) 0%, transparent 55%),
        radial-gradient(circle at 78% 12%, rgba(14,63,114,0.18) 0%, transparent 58%),
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 18%, transparent 36%, transparent 100%);
    transform: translateX(-18%) rotate(8deg);
    opacity: 0.85;
    mix-blend-mode: screen;
    animation: venueOverlayShimmer 7.5s ease-in-out infinite;
}
.venue-gallery-main-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
    opacity: 0.08;
    mix-blend-mode: overlay;
    animation: venueOverlayGrain 2.8s steps(6) infinite;
}
@keyframes venueOverlayShimmer {
    0%   { transform: translateX(-22%) rotate(8deg);   opacity: 0.55; }
    45%  { transform: translateX(8%)   rotate(8deg);   opacity: 0.90; }
    100% { transform: translateX(-22%) rotate(8deg);   opacity: 0.55; }
}
@keyframes venueOverlayGrain {
    0% { transform: translate3d(0,0,0); }
    20% { transform: translate3d(-2%,1%,0); }
    40% { transform: translate3d(1%,-2%,0); }
    60% { transform: translate3d(2%,2%,0); }
    80% { transform: translate3d(-1%,-1%,0); }
    100% { transform: translate3d(0,0,0); }
}
.venue-gallery-tag {
    position: absolute;
    top: 18px; left: 18px;
    background: var(--gold);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
}
.venue-gallery-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.venue-gallery-thumb {
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
    cursor: pointer;
}
.venue-gallery-thumb-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.venue-gallery-thumb:hover .venue-gallery-thumb-img { transform: scale(1.06); }
/* Thumb: map embed overlay */
.venue-gallery-thumb-map {
    width: 100%; height: 100%;
    border: none; display: block;
    pointer-events: none;
}
.venue-gallery-thumb-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 10px;
}

/* Details side */
.venue-details-side {
background: #0E3F72;
    color: #fff;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.venue-details-eyebrow {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.venue-details-eyebrow::before {
    content: '';
    display: block;
    width: 22px; height: 2px;
    background: var(--gold);
}
.venue-details-name {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 14px;
    letter-spacing: -.3px;
}
.venue-detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}
.venue-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3px;
}
.venue-pill.city   { background: rgba(91,175,214,0.30); border: 1px solid rgba(91,175,214,0.55); color: #5BAFD6; }
.venue-pill.state  { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,.85); }
.venue-pill.country{ background: rgba(196,27,44,0.25); border: 1px solid rgba(196,27,44,0.50); color: #fca5a5; }
.venue-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
    flex: 1;
}
.venue-detail-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.venue-detail-icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem;
    color: var(--gold);
    flex-shrink: 0;
}
.venue-detail-lbl {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 2px;
}
.venue-detail-val {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.88);
    line-height: 1.5;
}
.venue-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}
.btn-venue-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gold);
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 14px 18px;
    border-radius: 8px;
    transition: background .2s;
}
.btn-venue-primary:hover { background: var(--gold-h); color: #fff; text-decoration: none; }
.btn-venue-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px 18px;
    border-radius: 8px;
    transition: all .2s;
}
.btn-venue-secondary:hover { background: rgba(255,255,255,0.14); color: #fff; }
.venue-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 8px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* Legacy: keep map-wrap for backward compat */
.venue-split { display: none; }
.venue-map-wrap {
    border-radius: 18px;
    overflow: hidden;
    height: 320px;
    border: 1px solid rgba(0,0,0,0.07);
}
.venue-map-wrap iframe {
    width: 100%; height: 100%;
    border: none; display: block;
}

.venue-info-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.venue-info-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.venue-info-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--accent-lite);
    border: 1px solid rgba(14,63,114,.22);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    color: var(--accent);
    flex-shrink: 0;
}

.venue-info-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 3px;
}

.venue-info-value {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.55;
}

/* Additional sites strip */
.add-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.add-site-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    overflow: hidden;
    transition: all .2s;
}

.add-site-card:hover {
    border-color: rgba(14,63,114,.45);
    transform: translateY(-3px);
}

.add-site-img {
    height: 110px;
    background: var(--accent-lite);
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    font-size: 2rem;
}

.add-site-body {
    padding: 14px 16px;
}

.add-site-name {
    font-size: .92rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.add-site-addr {
    font-size: .77rem;
    color: var(--text-soft);
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Hotel card */
.hotel-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px 1fr;
    transition: all .2s;
}

.hotel-card:hover {
    border-color: rgba(206,17,38,.3);
}

.hotel-photo {
    background: rgba(255,255,255,.04);
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
    min-height: 240px;
    color: rgba(255,255,255,.15);
    font-size: 3rem;
}

.hotel-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotel-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(206,17,38,.08);
    border: 1px solid rgba(206,17,38,.2);
    padding: 5px 12px;
    border-radius: 999px;
    width: fit-content;
}

.hotel-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.15;
}

.hotel-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hotel-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .85rem;
    color: var(--text-mid);
}

.hotel-meta-row i {
    width: 16px;
    text-align: center;
    color: var(--gold);
    margin-top: 2px;
    flex-shrink: 0;
}

.hotel-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-hotel-book {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: #111;
    font-weight: 800;
    font-size: .85rem;
    padding: 11px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: all .2s;
}

.btn-hotel-book:hover {
    background: #e5a800;
    color: #111;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(206,17,38,.35);
}

.btn-hotel-dir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1.5px solid rgba(14,63,114,0.30);
    color: var(--accent);
    font-weight: 600;
    font-size: .82rem;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: all .2s;
}

.btn-hotel-dir:hover {
    background: var(--accent-lite);
    border-color: var(--accent);
    color: var(--accent-h);
}

/* -- VIDEO SECTION ---------------------------- */
/* -- PROMO SPLIT LAYOUT (like reference image) - */
#video {
    padding: 0 !important;
    background: #0E3F72 !important;
}
.promo-split {
    display: grid;
    grid-template-columns: 1fr 340px;
    min-height: 440px;
}
@media (max-width: 768px) {
    .promo-split {
        grid-template-columns: 1fr;
        min-height: unset;
    }
    /* Video/image area: fixed height so it's always a proper viewport-sized panel */
    .promo-media {
        min-height: 56vw;   /* ~16:9 on tablet */
        max-height: 420px;
    }
    .promo-panel {
        border-left: none;
        border-top: 4px solid var(--gold);
        padding: 28px 24px;
    }
    .promo-panel-year  { font-size: 2.4rem; }
    .promo-panel-title { font-size: 1.3rem; }
}
@media (max-width: 480px) {
    .promo-media {
        min-height: 64vw;   /* slightly taller on phones */
        max-height: 300px;
    }
    .promo-panel { padding: 22px 18px; }
    .promo-panel-year  { font-size: 2rem; }
    .promo-panel-title { font-size: 1.1rem; }
    .promo-panel-cta   { padding: 14px 18px; font-size: .72rem; }
}
.promo-media {
    position: relative;
    overflow: hidden;
    background: #000;
}
.promo-media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    opacity: 0.85;
}
.promo-media:hover .promo-media-bg { transform: scale(1.03); }
.promo-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.25) 0%, transparent 50%),
                linear-gradient(to top, rgba(0,0,0,0.50) 0%, transparent 45%);
}
/* Location tag overlay */
.promo-location {
    position: absolute;
    top: 28px; left: 28px;
    z-index: 3;
}
.promo-location-sub {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}
.promo-location-sub i { color: #CE1126; font-size: .8rem; }
.promo-location-city {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
/* Play button centered */
.promo-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 72px; height: 72px;
    background: rgba(255,255,255,0.15);
    border: 3px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
}
.promo-play-btn:hover {
    background: #CE1126;
    border-color: #CE1126;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 8px 32px rgba(196,27,44,0.5);
}
.promo-play-btn i { color: #fff; font-size: 1.5rem; margin-left: 5px; }
/* Embedded video inside (hidden until play) */
.promo-iframe-wrap {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    background: #000;
    animation: promo-fadein 0.4s ease forwards;
}
@keyframes promo-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.promo-iframe-wrap iframe,
.promo-iframe-wrap video {
    width: 100%; height: 100%;
    border: none; display: block;
}
/* Right info panel */
.promo-panel {
    background: linear-gradient(170deg, #07101e 0%, #1e3a6e 100%);
    border-left: 4px solid var(--gold);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
}
.promo-panel::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,63,114,0.25) 0%, transparent 70%);
    pointer-events: none;
}
.promo-panel-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #CE1126;
    margin-bottom: 16px;
}
.promo-panel-eyebrow::before {
    content: '';
    display: block;
    width: 28px; height: 2px;
    background: #CE1126;
    flex-shrink: 0;
}
.promo-panel-year {
    font-size: clamp(2.8rem, 4vw, 4rem);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -2px;
}
.promo-panel-title {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.promo-panel .promo-panel-desc {
    font-size: 0.88rem;
    color: #fff !important;
    line-height: 1.65;
    margin-bottom: 28px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
    display: block;
}
.promo-panel .promo-panel-desc strong { color: #fff !important; font-weight: 800; }
.promo-panel-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: #CE1126;
    color: #fff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px 22px;
    width: 100%;
    transition: background 0.25s;
}
.promo-panel-cta:hover { background: #B8801A; color: #fff; text-decoration: none; }
.promo-panel-cta i { font-size: 1rem; }

/* Old video-wrap (fallback) */
.video-wrap {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/9;
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.video-wrap video,
.video-wrap iframe {
    width: 100%; height: 100%;
    display: block;
    border: none;
}

/* -- PARTNERS SECTION -------------------------- */
.partners-section {
    background: #07101e;
    padding: 80px 0 76px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.partners-heading {
    text-align: center;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 44px;
    color: #fff;
}
.partners-heading span { color: #CE1126; }

/* Sponsors grid ? centered, no scroll */
.partners-track-wrap {
    overflow: hidden;
    position: relative;
    padding: 0 20px;
}
.partners-track-wrap::before,
.partners-track-wrap::after { display: none; }

.partners-track {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    align-items: center;
    justify-content: center;
    animation: none;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

@keyframes partnersScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.partner-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    opacity: 0.70;
    filter: brightness(10) grayscale(20%);
    transition: opacity .25s, filter .25s, transform .25s;
}
.partner-logo:hover {
    opacity: 1;
    filter: brightness(10) grayscale(0%);
    transform: scale(1.1);
}
.partner-logo img {
    max-height: 72px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
    display: block;
}
.partners-track { gap: 24px 40px; }
@media (max-width: 768px) {
    .partners-section { padding: 60px 0 56px; }
    .partner-logo { height: 56px; }
    .partner-logo img { max-height: 56px; max-width: 160px; }
    .partners-track { gap: 20px 28px; }
}
@media (max-width: 480px) {
    .partners-section { padding: 44px 0 40px; }
    .partner-logo { height: 44px; }
    .partner-logo img { max-height: 44px; max-width: 130px; }
    .partners-track { gap: 16px 20px; }
}

/* -- CTA FINAL -------------------------------- */
.cta-section {
    padding: 100px 48px;
    text-align: center;
    background: var(--accent);
    border-top: 6px solid var(--gold);
    position: relative;
    overflow: hidden;
}

/* Textura sutil de diagonales */
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 28px
        );
    pointer-events: none;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--gold) 33.3%, #fff 33.3%, #fff 66.6%, var(--accent) 66.6%);
}

.cta-inner { position: relative; z-index: 1; }

.cta-heading {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 16px;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.20);
}

.cta-sub {
    color: rgba(255,255,255,0.80);
    font-size: 1rem;
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-ghost {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.85);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 30px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s;
}

.btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* -- INSTAGRAM GALLERY ------------------------ */
.instagram-gallery-section {
    padding: 0;
    background: #000;
    width: 100%;
}
.instagram-gallery-header {
    text-align: center;
    margin-bottom: 2px;
    padding: 40px 20px;
    background: #07101e;
}
.instagram-gallery-header h2 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.instagram-gallery-header h2 i {
    font-size: 2.5rem;
    background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.instagram-follow-link {
    display: inline-block;
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}
.instagram-follow-link:hover { color: #b8952a; text-decoration: underline; }
.instagram-gallery-container { width: 100%; overflow: hidden; background: #000; }
.instagram-gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    width: 100%;
    background: #000;
}
.instagram-gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #1a1a1a;
    cursor: pointer;
}
.instagram-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.instagram-gallery-item:hover img { transform: scale(1.1); }
.instagram-gallery-item::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
}
.instagram-gallery-item:hover::after { background: rgba(0,0,0,0.3); }
.instagram-gallery-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#07101e 0%,#0E3F72 100%);
    color: rgba(255,255,255,0.3);
}
.instagram-gallery-placeholder i { font-size: 3rem; opacity: 0.5; }
@media (max-width: 1120px) { .instagram-gallery-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 840px)  { .instagram-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px)  { .instagram-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* -- FOOTER ----------------------------------- */
.ev-footer {
    background: #07101e;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #CE1126 33.3%, #fff 33.3%, #fff 66.6%, #0E3F72 66.6%) 1;
    padding: 24px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
}

.ev-footer a {
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.2s;
}

.ev-footer a:hover { color: rgba(255,255,255,0.85); }

.ev-footer-links { display: flex; gap: 24px; }

/* -- SCROLL-TO-TOP BUTTON ------------------ */
#scrollTopBtn {
    position: fixed;
    bottom: 32px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.30), 0 0 0 3px rgba(206,17,38,0.35);
    z-index: 9999;
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s, box-shadow 0.2s;
    pointer-events: none;
}
#scrollTopBtn.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
#scrollTopBtn:hover {
    background: var(--accent-h);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 4px rgba(206,17,38,0.55);
    transform: translateY(-2px) scale(1.07);
}
#scrollTopBtn:active { transform: scale(0.95); }
@media (max-width: 768px) {
    #scrollTopBtn { bottom: 20px; right: 16px; width: 42px; height: 42px; font-size: 1rem; }
}

/* -- VIDEO MODAL ------------------------------ */
.video-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.video-modal-backdrop.open {
    display: flex;
}

.video-modal-inner {
    width: 100%;
    max-width: 900px;
    position: relative;
}

.video-modal-close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
}

.video-modal-close:hover { color: #fff; }

.video-modal-box {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #000;
}

.video-modal-box video,
.video-modal-box iframe {
    width: 100%; height: 100%;
    border: none;
    display: block;
}

/* -- GAMES / SCHEDULE ------------------------- */
.games-section {
    background:
        radial-gradient(ellipse 900px 500px at 85% -10%, rgba(14,63,114,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 700px 400px at 5% 110%, rgba(206,17,38,0.09) 0%, transparent 60%),
        var(--dark-bg);
}

.games-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
}

.games-status-pill.live {
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.35);
    color: #4ade80;
}

.games-status-pill.soon {
    background: rgba(206,17,38,0.1);
    border: 1px solid rgba(206,17,38,0.3);
    color: var(--gold);
}

.games-status-pill .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.8); }
}

/* Day tabs */
.day-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.day-tab {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    padding: 12px 22px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    color: rgba(255,255,255,0.75);
}

.day-tab:hover {
    background: rgba(255,255,255,0.11);
    color: #fff;
}

.day-tab.active {
    background: var(--accent);
    border-color: #0E3F72;
    color: #fff;
    box-shadow: 0 8px 28px rgba(14,63,114,0.4);
}

.day-tab-num {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 2px;
}

.day-tab-date {
    font-size: 0.92rem;
    font-weight: 800;
}

/* D?as pasados */
.day-tab.day-past {
    opacity: 0.45;
}
.day-tab.day-past .day-tab-num,
.day-tab.day-past .day-tab-date {
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,0.55);
}
.day-tab.day-past.active {
    opacity: 0.7;
}
/* D?a actual ? borde dorado */
.day-tab.day-today {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 1px var(--gold), 0 4px 18px rgba(206,17,38,.25);
}
.day-tab.day-today .day-tab-num::after {
    content: ' ?  HOY';
    color: var(--gold-light);
    font-size: .55rem;
    letter-spacing: 1.5px;
}

.day-panel { display: none; }
.day-panel.active { display: block; animation: fadein-up 0.35s ease; }

@keyframes fadein-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.day-panel-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.day-panel-desc {
    font-size: 0.88rem;
    color: var(--text-mid);
    margin-bottom: 24px;
    line-height: 1.7;
    max-width: 640px;
}

/* Day summary (replaces game cards) */
.day-summary-wrap {
    margin-top: 20px;
}
.day-summary-stats {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.day-stat-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(14,63,114,.07); border: 1px solid rgba(14,63,114,.15);
    border-radius: 10px; padding: 8px 16px;
    font-size: .82rem; font-weight: 700; color: var(--accent);
}
.day-stat-pill i { font-size: .75rem; }
.day-game-list {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px;
}
.day-game-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px; padding: 10px 14px;
    font-size: .8rem; color: var(--text-dark);
    transition: background .15s;
}
.day-game-row:hover { background: rgba(14,63,114,.05); }
.day-game-time {
    font-weight: 800; color: var(--accent); min-width: 42px; flex-shrink: 0;
    font-size: .78rem;
}
.day-game-div {
    flex: 1; font-weight: 600; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-game-venue {
    font-size: .72rem; color: var(--text-soft); flex-shrink: 0;
    display: flex; align-items: center; gap: 4px;
}
.day-game-num {
    font-size: .68rem; font-weight: 700; color: var(--text-soft);
    background: rgba(0,0,0,.06); border-radius: 5px; padding: 2px 6px;
    flex-shrink: 0;
}
.day-game-type {
    font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
    flex-shrink: 0;
}
.day-game-type.pool { background:rgba(99,102,241,.1); color:#6366f1; }
.day-game-type.bracket { background:rgba(245,158,11,.12); color:#d97706; }
.day-game-type.friendly { background:rgba(20,184,166,.1); color:#0d9488; }
.day-view-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff;
    font-size: .8rem; font-weight: 700; padding: 10px 20px;
    border-radius: 10px; text-decoration: none;
    transition: opacity .2s; letter-spacing: .01em;
}
.day-view-btn:hover { opacity: .85; color: #fff; }
.day-view-btn-wrap { margin-top: 4px; }
/* Games-block beneath itinerary */
.day-games-block {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px dashed rgba(14,63,114,.2);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.day-games-block-label {
    font-size: .77rem; font-weight: 700; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
}
@media(max-width:600px) {
    .day-game-venue { display: none; }
    .day-game-div { font-size: .75rem; }
}
/* Past day panel ? visual cue */
.day-panel.day-past .day-panel-title {
    text-decoration: line-through;
    text-decoration-color: rgba(0,0,0,.3);
    opacity: .55;
}
.day-panel.day-past .day-game-row,
.day-panel.day-past .game-slot {
    opacity: .45;
    text-decoration: line-through;
    text-decoration-color: rgba(0,0,0,.25);
}
.day-panel.day-past .day-summary-stats,
.day-panel.day-past .game-timeline { opacity: .5; }
.day-panel.day-past .day-view-btn,
.day-panel.day-past .day-games-block .day-view-btn {
    background: #9ca3af;
    pointer-events: none;
    opacity: .6;
}
/* Itinerary timeline */
.game-timeline {
    position: relative;
    padding-left: 26px;
    border-left: 2px solid rgba(14,63,114,0.35);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.game-slot {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(14,63,114,0.12);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(14,63,114,0.06);
}

.game-slot:hover {
    background: var(--accent-lite);
    border-left-color: var(--accent);
    transform: translateX(5px);
    box-shadow: 0 4px 16px rgba(14,63,114,0.12);
}

.game-slot::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--dark-bg);
    box-shadow: 0 0 0 2px rgba(14,63,114,0.5);
}

.game-slot-time {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--gold);
    min-width: 86px;
    flex-shrink: 0;
}

.game-slot-activity {
    font-size: 0.92rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.5;
}

/* Divisions in play */
.games-divisions-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: 0.3px;
    margin: 56px 0 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.games-divisions-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, rgba(14,63,114,0.25), transparent);
}

/* -- FIFA-STYLE MATCH CARDS -------------------------- */
/* -- Match cards ------------------------------- */
.match-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}
.match-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    transition: transform .22s ease, box-shadow .22s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}
.match-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
}
/* Header ? accent gradient */
.match-card-header {
    background: linear-gradient(135deg, var(--accent) 0%, #081425 100%);
    padding: 12px 16px 10px;
    position: relative;
    overflow: hidden;
}
.match-card-header::after {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
}
.match-card-comp {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.match-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .63rem;
    color: rgba(255,255,255,0.72);
    font-weight: 500;
}
.match-card-meta-row span { display:flex; align-items:center; gap:3px; }
.match-card-meta-row span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-card-date {
    flex-shrink: 0;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.15);
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
/* Card body */
.match-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 16px 18px;
    gap: 10px;
    flex: 1;
}
.match-card-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
a.mc-team-link {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-decoration: none; color: inherit;
    border-radius: 10px; padding: 4px 6px; margin: -4px -6px;
    transition: background .18s;
}
a.mc-team-link:hover { background: rgba(14,63,114,.08); }
a.mc-team-link .team-plink { display:inline-flex; align-items:center; gap:3px; font-size:.58rem; font-weight:700; color:var(--green,#0E3F72); background:rgba(14,63,114,.09); padding:2px 7px; border-radius:20px; border:1px solid rgba(14,63,114,.18); }
.match-card-team-away { align-items: center; }
.match-card-logo {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(14,63,114,.12);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: #f0f9f4;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.match-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.match-card-initial {
    font-size: .85rem;
    font-weight: 900;
    color: var(--accent);
}
.match-card-team-name {
    font-size: .82rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
}
.match-card-team-loc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: .65rem;
    color: #9ca3af;
    text-align: center;
    margin-top: -4px;
}
.match-card-team-loc .fi {
    width: 14px; height: 10px;
    flex-shrink: 0;
}
/* Center column ? time / score */
.match-card-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    min-width: 64px;
}
.match-card-vs {
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #d1d5db;
    text-transform: uppercase;
}
.match-card-time {
    font-size: 1.55rem;
    font-weight: 900;
    color: #111827;
    letter-spacing: -1.5px;
    line-height: 1;
}
.match-card-score {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1.75rem;
    font-weight: 900;
    color: #111827;
    letter-spacing: -1.5px;
    line-height: 1;
}
.match-score-sep { color: #d1d5db; font-weight: 300; }
.match-score-win { color: var(--accent); }
.match-card-status {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}
.match-card-status.final    { background: rgba(14,63,114,.12); color: #0E3F72; }
.match-card-status.live     { background: #CE1126; color: #fff; animation: stat-pulse 1.2s ease-in-out infinite; }
.match-card-status.cancelled{ background: rgba(0,0,0,.06); color: #9ca3af; }
/* Footer */
.match-card-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 16px 11px;
    border-top: 1px solid rgba(0,0,0,0.055);
    background: #fafafa;
}
.match-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    color: #374151;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 3px 9px;
    border-radius: 6px;
}
.match-card-chip.chip-live  { background: rgba(206,17,38,.1); color: #CE1126; }
.match-card-chip.chip-stream{ background: rgba(14,63,114,.1); color: #0E3F72; }
.match-card-chip i { font-size: .6rem; }
/* Streaming ribbon */
.match-stream-ribbon {
    position: absolute;
    top: 12px; right: -22px;
    background: #CE1126;
    color: #fff;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 3px 28px;
    transform: rotate(35deg);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.division-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.division-game-card {
    background: #ffffff;
    border: 1px solid rgba(14,63,114,0.12);
    border-top: 4px solid var(--accent);
    border-radius: 14px;
    padding: 22px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(14,63,114,0.06);
}

.division-game-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--gold), var(--gold));
    opacity: 0;
    transition: opacity 0.25s;
}

.division-game-card:hover {
    background: var(--accent-lite);
    border-color: rgba(14,63,114,0.25);
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(14,63,114,0.14);
}

.division-game-card:hover::before { opacity: 1; }

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

.division-game-name {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.1;
}

.division-game-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.division-status {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.division-status.published {
    background: rgba(14,63,114,0.12);
    border: 1px solid rgba(14,63,114,0.30);
    color: #0E3F72;
}

.division-status.pending {
    background: rgba(206,17,38,0.08);
    border: 1px solid rgba(206,17,38,0.28);
    color: var(--gold);
}

.division-format {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.format-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-lite);
    border: 1px solid rgba(14,63,114,0.22);
    padding: 5px 12px;
    border-radius: 999px;
}

.format-chip i { font-size: 0.68rem; }

.division-game-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-mid);
}

.division-game-meta i {
    width: 18px;
    color: var(--accent);
    text-align: center;
    margin-right: 6px;
}

/* Schedule placeholder */
.schedule-soon-card {
    background: var(--accent-lite);
    border: 2px dashed rgba(14,63,114,0.28);
    border-radius: 20px;
    padding: 56px 32px;
    text-align: center;
}

.schedule-soon-icon {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(14,63,114,0.14);
    border: 1px solid rgba(14,63,114,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #5BAFD6;
}

.schedule-soon-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.schedule-soon-text {
    font-size: 0.9rem;
    color: var(--text-mid);
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.7;
}

/* -- MERCH SECTION --------------------------- */
.merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.merch-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-top: 4px solid var(--accent);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: default;
    box-shadow: 0 2px 12px rgba(14,63,114,0.06);
}

.merch-card:nth-child(2) { border-top-color: var(--gold); }
.merch-card:nth-child(4) { border-top-color: var(--gold); }

.merch-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(14,63,114,0.14);
}

/* Merch image backgrounds ? colores Dorado, Puerto Rico */
.merch-card:nth-child(1) .merch-img { background: linear-gradient(135deg, #d5e2f5 0%, #e0e8f5 100%); }
.merch-card:nth-child(2) .merch-img { background: linear-gradient(135deg, #fce8ea 0%, #ffd4d8 100%); }
.merch-card:nth-child(3) .merch-img { background: linear-gradient(135deg, #d5e2f5 0%, #e0e8f5 100%); }
.merch-card:nth-child(4) .merch-img { background: linear-gradient(135deg, #fdf5de 0%, #fce8b0 100%); }

.merch-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f0f4f8 0%, #e8f0ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    position: relative;
    overflow: hidden;
}

.merch-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(184,144,26,0.12) 0%, transparent 60%);
}

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

.merch-badge {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--gold);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}

/* -- Jersey dual card -- */
.merch-card-jerseys {
    grid-column: span 2;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #07101e 0%, #091e4a 50%, #0a1a38 100%);
    border-top: 3px solid var(--gold);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    transition: transform .3s, box-shadow .3s;
    display: flex; flex-direction: column;
}
.merch-card-jerseys:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(14,63,114,0.25); }
.merch-jerseys-img {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 0; padding: 24px 16px 0; position: relative; min-height: 220px;
    background: linear-gradient(180deg, rgba(14,63,114,0.08) 0%, transparent 100%);
}
.jersey-float {
    width: 45%; max-width: 200px;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.jersey-float.white { animation: floatWhite 3.8s ease-in-out infinite; }
.jersey-float.green { animation: floatGreen 4.2s ease-in-out infinite; margin-left: -24px; }
.merch-card-jerseys:hover .jersey-float.white { transform: translateX(-10px) rotate(-4deg) scale(1.06); }
.merch-card-jerseys:hover .jersey-float.green { transform: translateX(10px) rotate(4deg) scale(1.06); }
@keyframes floatWhite {
    0%,100% { transform: translateY(0px) rotate(-2deg); }
    50%      { transform: translateY(-14px) rotate(-2deg); }
}
@keyframes floatGreen {
    0%,100% { transform: translateY(-8px) rotate(2deg); }
    50%      { transform: translateY(6px) rotate(2deg); }
}
@keyframes floatMerch {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-12px); }
}
.merch-jerseys-body {
    padding: 18px 24px 22px; color: #fff;
}
.merch-jerseys-body .merch-name { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.merch-jerseys-body .merch-desc { font-size: .82rem; color: rgba(255,255,255,.55); margin-bottom: 10px; }
.merch-jerseys-body .merch-avail { font-size: .78rem; color: #5BAFD6; }
.jersey-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; z-index: 3; }
@media(max-width:600px) {
    .merch-card-jerseys { grid-column: span 1; }
    .merch-jerseys-img { min-height: 160px; }
    .jersey-float { width: 46%; }
}
    padding: 20px;
}

.merch-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.merch-desc {
    font-size: .82rem;
    color: var(--text-mid);
    line-height: 1.5;
    margin-bottom: 14px;
}

.merch-avail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .5px;
}

.merch-avail i { font-size: .7rem; }

/* -- ATTRACTIONS SECTION -------------------- */
.attractions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
}

/* Tall funko card ? spans 2 rows on left */
.attr-card.funko-tall {
    grid-column: 1;
    grid-row: span 2;
    min-height: 600px;
    background: #f5f5f5 !important;   /* match funko white bg */
}

/* Compact pair cards on the right */
.attr-card.attr-compact {
    min-height: 270px;
}

.attr-card {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.35s, box-shadow 0.35s;
}

.attr-card:hover { transform: scale(1.015); }
.attr-card:hover .attr-overlay { background: linear-gradient(to top, rgba(7,14,30,0.97) 0%, rgba(0,0,0,.15) 100%); }

.attr-card.full-width {
    grid-column: 1 / -1;
    min-height: 380px;
}

.attr-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.attr-card:hover .attr-bg { transform: scale(1.06); }

.attr-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,14,30,0.88) 0%, rgba(0,0,0,.03) 60%);
    transition: background 0.35s;
}

.attr-content {
    position: relative;
    z-index: 2;
    padding: 28px 30px;
}

.attr-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.attr-badge.green  { background: rgba(14,63,114,0.40); border: 1px solid rgba(14,63,114,0.7); color: #5BAFD6; }
.attr-badge.red    { background: rgba(91,175,214,0.30); border: 1px solid rgba(91,175,214,0.65); color: #5BAFD6; }
.attr-badge.gold   { background: rgba(206,17,38,0.20); border: 1px solid rgba(206,17,38,0.55); color: #b8920a; }

.attr-title {
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 10px;
}

.attr-desc {
    font-size: .85rem;
    color: rgba(255,255,255,.62);
    line-height: 1.6;
    max-width: 520px;
}

.attr-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}

.attr-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: rgba(255,255,255,.75);
    font-weight: 600;
}

.attr-stat i { color: #0E3F72; font-size: .72rem; }

/* -- NEW Funko card effects ----------------------- */
.funko-card { position: relative; background: #070d1e !important; }

.funko-bg {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse at 50% 120%, #0d1f3c 0%, #070d1e 60%);
    animation: funko-bg-pulse 4s ease-in-out infinite alternate;
}
@keyframes funko-bg-pulse {
    from { background: radial-gradient(ellipse at 50% 120%, #0d1f3c 0%, #070d1e 60%); }
    to   { background: radial-gradient(ellipse at 50% 100%, #07101e 0%, #07101e 60%); }
}

/* Spotlight beams */
.funko-beam {
    position: absolute; bottom: 0; z-index: 1;
    width: 180px; height: 85%;
    pointer-events: none;
    opacity: 0.18;
    animation: funko-beam-sway 5s ease-in-out infinite alternate;
}
.funko-beam-l {
    left: 8%;
    background: conic-gradient(from 180deg at 50% 100%, transparent 75deg, rgba(206,17,38,0.9) 90deg, transparent 105deg);
    animation-delay: -2s;
}
.funko-beam-r {
    right: 8%;
    background: conic-gradient(from 0deg at 50% 100%, transparent 75deg, rgba(91,175,214,0.9) 90deg, transparent 105deg);
}
@keyframes funko-beam-sway {
    from { opacity: 0.12; }
    to   { opacity: 0.28; }
}

/* Sparkle stars */
.funko-stars {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.funko-star {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #fff;
    animation: funko-twinkle var(--d, 2s) ease-in-out infinite var(--delay, 0s) alternate;
}
@keyframes funko-twinkle {
    from { opacity: 0.1; transform: scale(0.8); }
    to   { opacity: 0.9; transform: scale(1.4); }
}

/* Figures container ? stacked, one visible at a time */
.funko-figures {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;          /* never clip the image */
    pointer-events: none;
}
.funko-fig {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* vertically centred */
    padding: 16px 16px 52px;   /* bottom space for name-tag + dots */
    opacity: 0;
    transform: translateX(60px) scale(0.88);
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1),
                transform 0.7s cubic-bezier(.4,0,.2,1),
                filter 0.7s ease;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)) brightness(0.75);
}
.funko-fig.funko-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 18px 36px rgba(206,17,38,0.60)) brightness(1.10);
}
.funko-fig.funko-exit {
    opacity: 0;
    transform: translateX(-60px) scale(0.88);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)) brightness(0.75);
}
.funko-fig img {
    width: 72%;                /* fill width, auto height ? always fully visible */
    max-width: 300px;
    height: auto;
    object-fit: contain;
    display: block;
    animation: funko-float-img 3.6s ease-in-out infinite alternate;
}
@keyframes funko-float-img {
    from { transform: translateY(0px); }
    to   { transform: translateY(-16px); }
}
.funko-name-tag {
    margin-top: 10px;
    background: rgba(0,0,0,0.72);
    color: #f0c060;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 4px 14px;
    border-radius: 6px;
    border: 1px solid rgba(206,17,38,0.50);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
    flex-shrink: 0;
}
.funko-fig.funko-active .funko-name-tag {
    opacity: 1;
    transform: translateY(0);
}
/* Counter dots */
.funko-dots {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 5;
    pointer-events: none;
}
.funko-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.30);
    transition: background 0.3s, transform 0.3s;
}
.funko-dot.active {
    background: #f0c060;
    transform: scale(1.4);
}
/* Ground glow */
.funko-glow {
    position: absolute;
    bottom: -10px; left: 50%;
    transform: translateX(-50%);
    width: 300px; height: 80px;
    background: radial-gradient(ellipse, rgba(206,17,38,0.35) 0%, transparent 70%);
    animation: funko-glow-pulse 2.5s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes funko-glow-pulse {
    from { opacity: 0.5; transform: translateX(-50%) scaleX(0.9); }
    to   { opacity: 1;   transform: translateX(-50%) scaleX(1.1); }
}
/* Chips */
.funko-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .62rem; font-weight: 800; letter-spacing: 1px;
    padding: 4px 11px; border-radius: 4px;
}
.funko-chip-gold  { background: rgba(206,17,38,0.25); border: 1px solid rgba(206,17,38,0.50); color: #f0c060; }
.funko-chip-green { background: rgba(91,175,214,0.25);  border: 1px solid rgba(91,175,214,0.50);  color: #5BAFD6; }
.funko-chip-red   { background: rgba(196,27,44,0.20);  border: 1px solid rgba(196,27,44,0.45);  color: #fca5a5; }

/* -- STREAMING CARD ------------------------ */
.stream-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.stream-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(206,17,38,0.35);
    animation: stream-pulse 3s ease-out infinite;
}
.stream-ring-1 { width: 100px; height: 100px; animation-delay: 0s; }
.stream-ring-2 { width: 170px; height: 170px; animation-delay: 0.9s; border-color: rgba(206,17,38,0.20); }
.stream-ring-3 { width: 250px; height: 250px; animation-delay: 1.8s; border-color: rgba(206,17,38,0.10); }
@keyframes stream-pulse {
    0%   { transform: scale(0.7); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}
.stream-play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -60%);
    width: 64px; height: 64px;
    background: rgba(206,17,38,0.22);
    border: 2px solid rgba(206,17,38,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: stream-icon-glow 2.5s ease-in-out infinite alternate;
}
.stream-play-icon i {
    color: rgba(255,255,255,0.90);
    font-size: 1.4rem;
    margin-left: 4px;
}
@keyframes stream-icon-glow {
    from { box-shadow: 0 0 12px rgba(206,17,38,0.30); }
    to   { box-shadow: 0 0 32px rgba(206,17,38,0.70), 0 0 60px rgba(206,17,38,0.20); }
}

/* -- LIVE recording dot -------------------- */
.live-dot-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.live-dot-core {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    display: block;
    position: relative;
    z-index: 2;
    animation: live-blink 1.2s ease-in-out infinite;
}
.live-dot-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.70);
    animation: live-ring-pulse 1.2s ease-out infinite;
}
@keyframes live-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.75); }
}
@keyframes live-ring-pulse {
    0%   { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Funko CSS art (old, kept for compat) */
.funko-art {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #141414 0%, #1a0f0f 100%);
    overflow: hidden;
}

.funko-art::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(14,63,114,0.2) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.funko-figure {
    position: relative;
    width: 140px;
    filter: drop-shadow(0 20px 40px rgba(14,63,114,0.4));
    animation: funko-float 3s ease-in-out infinite alternate;
}

@keyframes funko-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}

/* height label */
.funko-height {
    position: absolute;
    bottom: 28px; right: 28px;
    background: rgba(14,63,114,0.5);
    border: 1px solid rgba(14,63,114,0.8);
    color: #5BAFD6;
    font-size: 1.4rem;
    font-weight: 900;
    padding: 10px 16px;
    border-radius: 16px;
    line-height: 1;
    text-align: center;
}

.funko-height span {
    display: block;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: .8;
    margin-top: 3px;
}

/* -- UPCOMING EVENTS SECTION ---------------- */

/* Section header row with navigation arrows */
.upcoming-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}
.upcoming-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}
.upcoming-nav-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(212,160,23,0.12);
    border: 1.5px solid rgba(212,160,23,0.35);
    color: var(--gold-light);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
    flex-shrink: 0;
}
.upcoming-nav-btn:hover {
    background: rgba(212,160,23,0.28);
    border-color: var(--gold-light);
    transform: scale(1.08);
}
.upcoming-nav-btn:disabled {
    opacity: .3;
    cursor: default;
    transform: none;
}

/* -- Event cards scroll -------------------- */
.upcoming-scroll {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 8px 4px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.upcoming-scroll::-webkit-scrollbar { display: none; }

/* Scroll progress dots */
.upcoming-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
}
.upcoming-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(212,160,23,0.3);
    transition: background .3s, transform .3s;
    cursor: pointer;
}
.upcoming-dot.active {
    background: var(--gold-light);
    transform: scale(1.35);
}

.upcoming-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #0a1a30;
    border: 1.5px solid rgba(255,255,255,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
    cursor: pointer;
}

.upcoming-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 28px 70px rgba(0,0,0,0.65), 0 0 0 2px rgba(212,160,23,0.6);
    border-color: rgba(212,160,23,0.45);
}

/* Shimmer effect on top */
.upcoming-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    transition: left .6s ease;
    z-index: 4;
    pointer-events: none;
}
.upcoming-card:hover::before { left: 150%; }

.upcoming-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.55s ease;
}

.upcoming-card:hover .upcoming-card-bg { transform: scale(1.07); }

.upcoming-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(8,14,10,0.97) 0%,
        rgba(8,14,10,0.6) 40%,
        rgba(0,0,0,0.08) 100%
    );
}

/* Gold top accent bar */
.upcoming-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), transparent);
    z-index: 3;
    opacity: 0;
    transition: opacity .3s;
}
.upcoming-card:hover .upcoming-card-accent { opacity: 1; }

.upcoming-card-content {
    position: relative;
    z-index: 2;
    padding: 22px 20px 20px;
}

.upcoming-age {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(212,160,23,0.18);
    border: 1px solid rgba(212,160,23,0.5);
    color: var(--gold-light);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 11px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.upcoming-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 13px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.upcoming-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    color: #5BAFD6;
    margin-bottom: 8px;
}

.upcoming-location i { font-size: .65rem; color: #5BAFD6; }

.upcoming-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 800;
    color: var(--gold-light);
    text-shadow: 0 0 12px rgba(212,160,23,0.5);
}

.upcoming-dates i { font-size: .65rem; }

.upcoming-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--gold-light);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s, transform .3s;
}
.upcoming-card:hover .upcoming-cta {
    opacity: 1;
    transform: translateY(0);
}

.upcoming-logo {
    position: absolute;
    top: 16px; right: 16px;
    width: 56px; height: 56px;
    border-radius: 12px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    object-fit: contain;
    padding: 5px;
    z-index: 3;
}

/* -- 2027 teaser announcement ------------- */
.teaser-2027 {
    margin-top: 36px;
    border-radius: 24px;
    border: 1.5px solid rgba(212,160,23,0.25);
    background: linear-gradient(145deg, #060e1c 0%, #0a1a30 50%, #081428 100%);
    padding: 48px 40px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Corner glow */
.teaser-2027::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(212,160,23,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.teaser-2027::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(14,63,114,0.18) 0%, transparent 70%);
    pointer-events: none;
}
@keyframes teaser-logo-glow {
    0%   { filter: drop-shadow(0 0 8px rgba(212,160,23,0.15)) drop-shadow(0 6px 24px rgba(212,160,23,0.10)); transform: scale(1); }
    50%  { filter: drop-shadow(0 0 28px rgba(212,160,23,0.55)) drop-shadow(0 8px 40px rgba(212,160,23,0.30)); transform: scale(1.03); }
    100% { filter: drop-shadow(0 0 8px rgba(212,160,23,0.15)) drop-shadow(0 6px 24px rgba(212,160,23,0.10)); transform: scale(1); }
}

.teaser-2027-logo {
    width: 200px;
    max-width: 55%;
    height: auto;
    object-fit: contain;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
    animation: teaser-logo-glow 3s ease-in-out infinite;
    transform-origin: center;
}
.teaser-2027-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 420px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.teaser-2027-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212,160,23,0.45), transparent);
}
.teaser-2027-divider i {
    color: rgba(212,160,23,0.6);
    font-size: .7rem;
}
.teaser-2027-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212,160,23,0.12);
    border: 1px solid rgba(212,160,23,0.4);
    color: #f0c040;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 5px 16px;
    border-radius: 30px;
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.teaser-2027-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.3px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
@media (max-width: 600px) { .teaser-2027-title { font-size: 1.25rem; } }
.teaser-2027-sub {
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.38);
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
@media (max-width: 600px) { .teaser-2027 { padding: 36px 24px 32px; } }

@media (max-width: 600px) {
    .upcoming-card { flex: 0 0 260px; min-height: 380px; }
    .upcoming-header-row { margin-bottom: 20px; }
}
.upcoming-empty {
    padding: 40px;
    text-align: center;
    color: #6b7a94;
    font-style: italic;
    border: 2px dashed rgba(91,175,214,0.25);
    border-radius: 16px;
    width: 100%;
}

/* -- FRONT OFFICE DIRECTORY -------------------- */
#office { background: #fff; border-top: 5px solid var(--accent); }

.office-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 28px;
}
@media (max-width: 1024px) { .office-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .office-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .office-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.office-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: default;
}
.office-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.16);
}

/* Large portrait photo */
.office-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #1a2d4a;
    position: relative;   /* anchor for absolute children */
}
.office-photo img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .5s ease;
}
.office-card:hover .office-photo img { transform: scale(1.04); }

/* Placeholder when no photo */
.office-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #07101e 0%, #0E3F72 100%);
    color: rgba(255,255,255,0.30);
    font-size: 4.5rem;
}
.office-photo-placeholder span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
}

/* Info below photo */
.office-info {
    padding: 16px 18px 18px;
    border-top: 3px solid #f0f0f0;
    text-align: center;
}
.office-name {
    font-size: .92rem;
    font-weight: 900;
    color: #07101e;
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 1.3;
    margin-bottom: 5px;
}
.office-role {
    font-size: .75rem;
    font-weight: 600;
    color: #C41B2C;
    line-height: 1.4;
    margin-bottom: 8px;
}
.office-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}
.office-meta a, .office-meta div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3a4a60;
    font-size: .78rem;
    text-decoration: none;
}
.office-meta a:hover { color: #07101e; text-decoration: underline; }
.office-meta i { color: #0E3F72; font-size: .7rem; }
.office-note {
    margin-top: 8px;
    font-size: .75rem;
    color: #6b7a94;
    line-height: 1.5;
    text-align: center;
}

/* -- TOURISM SECTION ------------------------- */
.tourism-subtitle {
    color: #3a4a60;
    font-size: .95rem;
    max-width: 600px;
    margin: -28px 0 36px;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .tourism-subtitle {
        font-size: .88rem;
        margin: -10px 0 24px;
    }
}

@media (max-width: 576px) {
    .tourism-subtitle {
        font-size: .83rem;
        margin: 0 0 20px;
    }
}

.tourism-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(280px, auto);   /* rows are at least 280px, but grow to fit taller items (e.g. the hero) */
    gap: 16px;
}

.tourism-hero {
    grid-column: 1 / 3;   /* spans 2 columns */
    grid-row: 1;
    min-height: 340px;
}

/* 3rd card in row 1 */
.tourism-grid .tourism-card:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.tourism-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background-color: #07101e;   /* fallback */
    background-size: cover;
    background-position: center;
    min-height: 220px;           /* fallback so card never collapses */
    transition: transform 0.4s cubic-bezier(.22,.61,.36,1), box-shadow 0.4s;
}

/* Real <img> photo layer ? always covers the full card */
.tourism-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transition: transform 0.6s ease;
}
.tourism-card:hover .tourism-img { transform: scale(1.05); }

/* Zoom BG on hover via the element itself */
.tourism-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 2px rgba(206,17,38,0.45);
}

.tourism-card:hover .tourism-overlay {
    background: linear-gradient(to top, rgba(7,14,30,0.97) 0%, rgba(0,0,0,0.10) 100%);
}

/* Shimmer on tourism cards too */
.tourism-card::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transform: skewX(-15deg);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 10;
}
.tourism-card:hover::after { left: 170%; }

.tourism-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,14,30,0.92) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.05) 100%);
    transition: background 0.4s;
    z-index: 1;
}

.tourism-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 24px 24px 22px;
    z-index: 2;
}

.tourism-dist {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.30);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}

.tourism-dist i { font-size: .65rem; color: #f0c060; }

.tourism-wow {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.tourism-name {
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.tourism-desc {
    width: 100%;
    box-sizing: border-box;
    font-size: .82rem;
    color: rgba(255,255,255,.65);
    line-height: 1.55;
    margin-bottom: 12px;
    max-width: 520px;
}

/* Hero card slightly larger text */
.tourism-hero .tourism-name { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.tourism-hero .tourism-desc { font-size: .9rem; max-width: 560px; }

.tourism-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tourism-tags span {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,.8);
    letter-spacing: .3px;
}

/* (old section-sep styles removed ? replaced by .angle-cut) */

/* -- TEXTOS SOBRE FONDOS CLAROS ------------------------------ */
.section h1, .section h2, .section h3, .section h4, .section h5 {
    color: var(--text-dark) !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    background: none !important;
    text-shadow: none !important;
}
.section p, .section li { color: var(--text-mid); }

/* Tarjetas claras ? texto oscuro */
.games-divisions-title { color: var(--text-dark) !important; }
.schedule-soon-title   { color: var(--text-dark) !important; }
.schedule-soon-text    { color: var(--text-mid)  !important; }
.merch-name            { color: var(--text-dark) !important; }
.merch-desc            { color: var(--text-mid)  !important; }
.merch-avail           { color: var(--accent)    !important; }
.add-site-name         { color: var(--text-dark) !important; }
.add-site-addr         { color: var(--text-soft) !important; }
.hotel-name            { color: var(--text-dark) !important; }
.hotel-meta-row, .hotel-meta-row span { color: var(--text-mid) !important; }
.hotel-meta-row i      { color: var(--gold)      !important; }
.venue-info-label      { color: var(--text-soft) !important; }
.venue-info-value      { color: var(--text-dark) !important; }
.venue-info-value a, .add-site-body a { color: var(--accent) !important; }
.game-slot-activity    { color: var(--text-dark) !important; }
.game-slot-time        { color: var(--gold)      !important; }
.about-text, .about-body { color: var(--text-mid) !important; }

/* Texto SOBRE im?genes (overlay) ? blanco */
.venue-name      { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.venue-addr-line { color: rgba(255,255,255,0.82) !important; }
.attr-title, .tourism-name { color: #fff !important; }
.attr-desc    { color: rgba(255,255,255,0.82) !important; }
.tourism-desc { color: rgba(255,255,255,0.78) !important; }
.tourism-tags span { color: rgba(255,255,255,0.85) !important; }

/* stats-bar ? blanco (fondo verde) */
.stat-label { color: rgba(255,255,255,0.7) !important; }

/* Day tabs */
.day-tab { color: var(--accent) !important; background: #fff !important;
           border: 1px solid rgba(14,63,114,0.20) !important;
           box-shadow: 0 1px 5px rgba(14,63,114,0.06); }
.day-tab.active { color: #fff !important; background: var(--accent) !important;
                  border-color: var(--accent) !important;
                  box-shadow: 0 6px 20px rgba(14,63,114,0.28) !important; }

/* Venue & hotel cards */
.venue-info-card { background: #fff !important; color: var(--text-mid) !important;
                   border: 1px solid rgba(14,63,114,0.10) !important;
                   box-shadow: 0 2px 14px rgba(14,63,114,0.06) !important; }
.hotel-card      { background: #fff !important; border: 1px solid rgba(0,0,0,0.08) !important; }
.add-site-card   { background: #fff !important; border: 1px solid rgba(14,63,114,0.12) !important;
                   box-shadow: 0 2px 10px rgba(14,63,114,0.05) !important; }

/* Division tables */
.div-table thead th { color: var(--text-soft) !important; border-bottom-color: rgba(14,63,114,0.12) !important; }
.div-table tbody td { color: var(--text-dark) !important; }

/* Merch cards */
.merch-card { background: #fff !important;
              border: 1px solid rgba(14,63,114,0.10) !important;
              box-shadow: 0 2px 12px rgba(14,63,114,0.06) !important; }
.merch-card:hover { box-shadow: 0 10px 28px rgba(14,63,114,0.14) !important; }

/* site web btn */
.btn-site-web { background: var(--accent-lite) !important;
                border-color: rgba(14,63,114,0.25) !important;
                color: var(--accent) !important; }
.btn-site-web:hover { background: var(--accent) !important; color: #fff !important; }

/* About accent badge */
.about-img-accent { background: rgba(19, 32, 64, 0.72) !important; border-color: rgba(255,255,255,0.18) !important; }
.about-img-accent-num { color: #fff !important; }
.about-img-accent-lbl { color: rgba(255,255,255,0.85) !important; }

/* -- GOLD TEXT UTILITIES -------------------- */

.text-gold {
    color: var(--gold-light);
    text-shadow: 0 0 18px rgba(212,160,23,0.5);
}

/* Eyebrows ? tricolor Dorado, Puerto Rico por secci?n */
#juegos    .section-eyebrow,
#merch     .section-eyebrow,
#proximos  .section-eyebrow,
#equipos   .section-eyebrow,
#atracciones .section-eyebrow { color: var(--accent) !important; opacity: 1; }

#sede      .section-eyebrow,
#turismo   .section-eyebrow { color: var(--gold) !important; opacity: 1; }

/* Gold highlight on key words inside headings */
.heading-gold {
    -webkit-text-fill-color: #CE1126 !important;
    color: #CE1126 !important;
    text-shadow: none;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Gold countdown dots */
.cd-sep { color: var(--gold-light); margin: 0 2px; }

/* Tourism distance chip is already styled gold above */

/* -- HAMBURGER BUTTON -------------------------- */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 8px;
    cursor: pointer;
    padding: 8px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.18); }
.nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
    transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -- MOBILE DRAWER ----------------------------- */
.ev-mobile-menu {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: #07101e;
    border-top: 1px solid rgba(206,17,38,0.35);
    border-bottom: 3px solid #CE1126;
    z-index: 99;
    padding: 12px 16px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.40);
    flex-direction: column;
    gap: 4px;
    animation: slideDown 0.22s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ev-mobile-menu.open { display: flex; }
.ev-mobile-menu a {
    color: rgba(255,255,255,0.88) !important;
    text-decoration: none !important;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 11px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.18s, color 0.18s;
}
.ev-mobile-menu a:hover { background: rgba(255,255,255,0.12); color: #fff !important; }
.ev-mobile-menu a i { width: 18px; text-align: center; color: var(--gold); font-size: .85rem; }
.ev-mobile-menu .mob-divider {
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: 6px 0;
}
.ev-mobile-menu .mob-cta {
    background: var(--gold) !important;
    color: #fff !important;
    border-radius: 8px !important;
    justify-content: center;
    font-weight: 700 !important;
    margin-top: 4px;
}
.ev-mobile-menu .mob-cta:hover { background: var(--gold-h) !important; }
.ev-mobile-menu .mob-back {
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.70) !important;
}
.ev-mobile-menu .mob-back:hover { color: #fff !important; background: rgba(255,255,255,0.10) !important; }
/* Mobile lang switch inside drawer */
.ev-mobile-menu .lang-switch {
    margin: 8px 14px 0;
    align-self: flex-start;
}

/* -- RESPONSIVE ------------------------------- */
@media (max-width: 991px) {
    .ev-nav       { padding: 0 20px; }
    .ev-nav-links { display: none !important; }
    .nav-hamburger { display: flex; }
    .section      { padding: 70px 24px; }
    .pricing-grid { grid-template-columns: 1fr; }
    .about-grid   { grid-template-columns: 1fr; gap: 40px; }
    .location-grid{ grid-template-columns: 1fr; }
    .stats-bar    { padding: 24px; gap: 0; }
    .stat-item    { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); min-width: 50%; }
    .stat-item:last-child { border-bottom: none; }
    .cta-section  { padding: 70px 24px; }
    .ev-footer    { padding: 20px 24px; flex-direction: column; text-align: center; }
    .ev-footer-links { justify-content: center; }
}

@media (max-width: 768px) {
    .attractions-grid { grid-template-columns: 1fr; }
    .attr-card.full-width { grid-column: 1; }
    .attr-card.funko-tall { grid-row: auto; min-height: 460px; }
    .attr-card.attr-compact { min-height: 240px; }
    /* Tourism: 2-col on tablet, hero full-width */
    #turismo { padding-left: 26px; padding-right: 26px; }
    .tourism-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: unset;
        gap: 14px;
        margin: 0;
    }
    .tourism-hero {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 7;
        height: auto;
        min-height: 220px;
    }
    .tourism-grid .tourism-card:not(.tourism-hero) {
        aspect-ratio: 4 / 3;
        min-height: 0;   /* let aspect-ratio (not the 220px fallback) size the card, or it overflows its column */
        height: auto;
    }
    .tourism-grid .tourism-card:nth-child(2) {
        grid-column: auto;
        grid-row: auto;
    }
    .tourism-card { border-radius: 16px; }
    .tourism-content { padding: 16px 18px; }
    .tourism-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .78rem;
        margin-bottom: 7px;
    }
    .tourism-hero .tourism-desc {
        -webkit-line-clamp: 3;
        font-size: .82rem;
        margin-bottom: 8px;
    }
    .tourism-name { font-size: 1rem !important; }
    .tourism-hero .tourism-name { font-size: 1.25rem !important; margin-bottom: 6px; }
    .tourism-tags { gap: 5px; margin-top: 8px; }
    .tourism-tags span { font-size: .62rem; padding: 3px 8px; }
    .tourism-dist { margin-bottom: 5px; }
    .tourism-wow { font-size: .68rem; margin-bottom: 5px; }
}

@media (max-width: 576px) {
    .countdown-boxes { gap: 8px; }
    .cd-box  { width: 72px; padding: 14px 6px; }
    .cd-num  { font-size: 2rem; }
    .hero-title { font-size: 2.2rem; }
    .teams-grid { grid-template-columns: 1fr 1fr; }
    .division-games-grid { grid-template-columns: 1fr; }
    .game-slot { flex-direction: column; align-items: flex-start; gap: 6px; }
    .day-tab { flex: 1; min-width: 110px; }
    .venue-split { grid-template-columns: 1fr; }
    .hotel-card { grid-template-columns: 1fr; }
    .hotel-photo { min-height: 180px; }
    .add-sites-grid { grid-template-columns: 1fr 1fr; }
    .merch-grid { grid-template-columns: 1fr 1fr; }
    .attractions-grid { grid-template-columns: 1fr; }
    .attr-card.full-width { grid-column: 1; }
    .attr-card.funko-tall { grid-row: auto; min-height: 420px; }
    .attr-card.attr-compact { min-height: 220px; }
    /* Tourism: 2-col on small mobile */
    .section { padding: 50px 16px; }
    #turismo { padding-left: 22px; padding-right: 22px; }
    .tourism-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: unset;
        gap: 12px;
        margin: 0;
    }
    .tourism-hero {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 7;
        height: auto;
        min-height: 180px;
    }
    .tourism-grid .tourism-card:not(.tourism-hero) {
        aspect-ratio: 4 / 3;
        min-height: 0;   /* let aspect-ratio (not the 220px fallback) size the card, or it overflows its column */
        height: auto;
    }
    .tourism-grid .tourism-card { min-width: 0; }
    .tourism-grid .tourism-card:nth-child(2) { grid-column: auto; grid-row: auto; }
    .tourism-card { border-radius: 14px; }
    .tourism-content { padding: 10px 12px; }
    .tourism-dist { font-size: .6rem; padding: 3px 8px; margin-bottom: 4px; }
    .tourism-name { font-size: .85rem !important; margin-bottom: 3px; }
    .tourism-hero .tourism-name { font-size: 1.05rem !important; }
    .tourism-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .72rem;
        margin-bottom: 5px;
    }
    .tourism-hero .tourism-desc {
        -webkit-line-clamp: 2;
        font-size: .75rem;
        margin-bottom: 6px;
    }
    .tourism-wow { font-size: .62rem; margin-bottom: 4px; }
    .tourism-tags { gap: 3px; margin-top: 6px; }
    .tourism-tags span { font-size: .58rem; padding: 2px 6px; }
}

/* Extra-small phones (e.g. 412px and below): add more side breathing room */
@media (max-width: 412px) {
    #turismo {
        padding-left: calc(18px + env(safe-area-inset-left));
        padding-right: calc(18px + env(safe-area-inset-right));
    }
    .tourism-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .tourism-hero {
        grid-column: 1;
        aspect-ratio: 16 / 10;
        min-height: 210px;
    }
    .tourism-grid .tourism-card:not(.tourism-hero) {
        aspect-ratio: 16 / 10;
        min-height: 190px;
    }
    .tourism-content { padding: 12px 14px 12px; }
    .tourism-name { font-size: .98rem !important; }
    .tourism-hero .tourism-name { font-size: 1.1rem !important; }
    .tourism-desc {
        -webkit-line-clamp: 2;
        font-size: .74rem;
        margin-bottom: 5px;
    }
    .tourism-hero .tourism-desc {
        -webkit-line-clamp: 3;
        font-size: .76rem;
    }
    .tourism-tags { gap: 4px; margin-top: 5px; }
    .tourism-tags span { font-size: .62rem; padding: 2px 7px; }
}

@media (max-width: 991px) {
    .venue-split { grid-template-columns: 1fr; }
    .hotel-card  { grid-template-columns: 1fr; }
}
/* -- PAGE LOADER ---------------------------------- */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #04100a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transition: opacity .55s ease, visibility .55s ease;
}
#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-logo {
    width: 140px;
    max-width: 50vw;
    height: auto;
    object-fit: contain;
    animation: loader-pulse 1.8s ease-in-out infinite;
}
@keyframes loader-pulse {
    0%,100% { opacity: 1;   filter: drop-shadow(0 0 10px rgba(212,160,23,0.20)); }
    50%      { opacity: .85; filter: drop-shadow(0 0 32px rgba(212,160,23,0.65)); }
}
.loader-bar-wrap {
    width: 180px;
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
}
.loader-bar {
    height: 100%;
    width: 0%;
    border-radius: 10px;
    background: linear-gradient(90deg, #CE1126, #f0c040, #CE1126);
    background-size: 200% 100%;
    animation: loader-fill 1.8s ease-out forwards,
               loader-shine 1s linear infinite;
}
@keyframes loader-fill {
    0%   { width: 0%; }
    60%  { width: 85%; }
    100% { width: 100%; }
}
@keyframes loader-shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes sync-spin-l{to{transform:rotate(360deg)}}
@keyframes sync-bounce-l{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

.about-feature-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.about-feature-card{background:#fff;border:1px solid #e8edf2;border-radius:14px;padding:24px 26px;position:relative;overflow:hidden}
.about-feature-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),#00a86b)}
.about-feature-card.red::before{background:linear-gradient(90deg,#CE1126,#ff4d5e)}
.about-feature-icon{width:38px;height:38px;border-radius:10px;background:var(--accent-lite);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.95rem;margin-bottom:12px}
.about-feature-card.red .about-feature-icon{background:#fff0f1;color:#CE1126}
.about-feature-title{font-size:.95rem;font-weight:800;color:#111;margin-bottom:8px;letter-spacing:-.2px}
.about-feature-body{font-size:.82rem;color:#555;line-height:1.65}
.about-flag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.about-flag-item{display:flex;align-items:center;gap:5px;font-size:.73rem;font-weight:600;color:#444;background:#f4f6f8;border-radius:999px;padding:4px 10px 4px 6px}
.about-flag-item .fi{width:18px;height:13px;border-radius:2px;flex-shrink:0}
@media(max-width:680px){.about-feature-row{grid-template-columns:1fr}}


#ev1-toast-container{position:fixed;top:80px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;width:340px;pointer-events:none}
@media(max-width:480px){#ev1-toast-container{width:calc(100vw - 28px);right:14px;top:70px}}
.ev1-toast{pointer-events:all;position:relative;overflow:hidden;border-radius:18px;background:#0c1525;border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(14,63,114,.25);display:flex;flex-direction:column;transform:translateX(110%) scale(.94);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.ev1-toast.show{transform:translateX(0) scale(1);opacity:1}
.ev1-toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:18px 0 0 18px;background:var(--ev1-accent,#4ade80)}
.ev1-nt-header{display:flex;align-items:center;gap:8px;padding:9px 12px 8px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.ev1-nt-ev-logo{width:26px;height:26px;border-radius:6px;overflow:hidden;flex-shrink:0;background:rgba(14,63,114,.3);border:1px solid rgba(14,63,114,.45);display:flex;align-items:center;justify-content:center}
.ev1-nt-ev-logo img{width:100%;height:100%;object-fit:contain}
.ev1-nt-ev-logo i{font-size:.66rem;color:#4ade80}
.ev1-nt-ev-name{flex:1;font-size:.58rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev1-nt-body-row{display:flex;align-items:center;gap:12px;padding:12px 16px 14px 16px}
.ev1-nt-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.ev1-nt-body{flex:1;min-width:0}
.ev1-nt-title{font-weight:800;font-size:.92rem;color:#f1f5f9;line-height:1.25;margin-bottom:3px}
.ev1-nt-sub{font-size:.78rem;color:rgba(255,255,255,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.ev1-nt-close{background:none;border:none;color:rgba(255,255,255,.22);font-size:.72rem;cursor:pointer;padding:3px 4px;border-radius:6px;flex-shrink:0;line-height:1;transition:all .15s}
.ev1-nt-close:hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.07)}
.ev1-nt-team-logo{width:44px;height:44px;border-radius:10px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.ev1-nt-team-logo img{width:100%;height:100%;object-fit:contain}
.ev1-nt-progress{height:2px;background:rgba(255,255,255,.06)}
.ev1-nt-bar{height:100%;width:100%}
.ev1-toast-score {--ev1-accent:#4ade80} .ev1-toast-score .ev1-nt-icon{background:rgba(34,197,94,.18);color:#4ade80}   .ev1-toast-score .ev1-nt-bar{background:#4ade80} .ev1-toast-score .ev1-nt-title{color:#4ade80}
.ev1-toast-live  {--ev1-accent:#f87171} .ev1-toast-live .ev1-nt-icon{background:rgba(239,68,68,.18);color:#f87171;animation:ev1-p 1.2s ease-in-out infinite} .ev1-toast-live .ev1-nt-bar{background:#f87171}
.ev1-toast-stream{--ev1-accent:#c084fc} .ev1-toast-stream .ev1-nt-icon{background:rgba(168,85,247,.18);color:#c084fc;animation:ev1-p 1.5s ease-in-out infinite} .ev1-toast-stream .ev1-nt-bar{background:#c084fc}
.ev1-toast-warning{--ev1-accent:#fbbf24} .ev1-toast-warning .ev1-nt-icon{background:rgba(234,179,8,.18);color:#fbbf24} .ev1-toast-warning .ev1-nt-bar{background:#fbbf24}
.ev1-toast-final {--ev1-accent:#38bdf8} .ev1-toast-final .ev1-nt-icon{background:rgba(14,165,233,.18);color:#38bdf8}  .ev1-toast-final .ev1-nt-bar{background:#38bdf8}
.ev1-toast-info  {--ev1-accent:#94a3b8} .ev1-toast-info .ev1-nt-icon{background:rgba(148,163,184,.12);color:#94a3b8}
@keyframes ev1-p{0%,100%{opacity:1}50%{opacity:.45}}


.mx-htag{position:fixed;bottom:20px;left:20px;z-index:8000;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;border-radius:999px;background:rgba(14,63,114,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(14,63,114,.45);color:#fff;font-family:'Inter',-apple-system,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.3px;text-decoration:none;box-shadow:0 4px 18px rgba(0,0,0,.30);transition:transform .2s,box-shadow .2s;white-space:nowrap}
.mx-htag:hover{color:#fff;transform:translateY(-3px);box-shadow:0 8px 28px rgba(14,63,114,.35);border-color:rgba(14,63,114,.7)}
@media(max-width:480px){.mx-htag{bottom:14px;left:14px;font-size:.7rem;padding:7px 13px 7px 10px}}