:root {
    --purple: #30005f;
    --purple2: #4b1788;
    --pink: #ff2a86;
    --teal: #24d1b0;
    --bg: #efefef;
    --text: #2d2442;
    --muted: #7c7393;
    --card: #ffffff;
    --line: #ddd6eb;
    --shadow: 0 10px 28px rgba(34,16,68,.10);
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0
}

body {
    font-family: Arial,Helvetica,sans-serif;
    background: var(--bg);
    color: var(--text)
}

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

img {
    display: block;
    max-width: 100%
}

.page-wrap {
    overflow-x: hidden
}

.container {
    width: min(1700px, calc(100% - 24px));
    margin: 0 auto
}

.section-gap {
    margin-top: 18px
}

.section-gap-sm {
    margin-top: 10px
}

/* Header */
.site-header {
    position: relative;
    background: #fff;
    padding-bottom: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,.03)
}

.header-top {
    background-image: url(../img/header-top.png);
    background-size: 100%;
    width: 100%;
    height: 95px;
    background-repeat: no-repeat;
}

.top-wave-pink {
    top: 18px;
    background: var(--pink);
    height: 22px;
    clip-path: polygon(0 0,100% 0,100% 35%,86% 63%,71% 45%,52% 67%,34% 43%,14% 71%,0 49%);
    opacity: .95
}

.nav-row {
    position: relative;
    z-index: 1;
    margin: -30px 0 0 0;
    padding: 8px 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    background-image: url(../img/logo.png);
    background-size: cover;
}

.brand-icon {
    width: 160px;
    height: 46px;
    border-radius: 6px;
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: 26px;
}

.brand-name {
    font-weight: 900;
    font-size: 34px;
    line-height: .9;
    color: var(--purple)
}

.brand-sub {
    font-size: 11px;
    color: #555;
    margin-top: 2px
}

.main-nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 11px;
    text-transform: uppercase;
    color: #7a7287;
    font-weight: 700;
    letter-spacing: .04em
}

    .main-nav a {
        padding: 6px 2px;
        border-bottom: 2px solid transparent
    }

        .main-nav a.active,
        .main-nav a:hover {
            color: var(--pink);
            border-color: var(--pink)
        }


.sport-code {
    color: #000000;
    border-radius: 999px;
    padding: 2px 6px;
    font-weight: 800;
}

.badge {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid transparent;
    letter-spacing: .03em
}

    .badge.final {
        background: #edf9f3;
        color: #127c4a;
        border-color: #bfe8d1
    }

    .badge.pending {
        background: #fff4e8;
        color: #9a5b00;
        border-color: #ffd5ad
    }

.game-date {
    margin-left: auto;
    color: #5f5770
}

.game-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid #f2ecfb
}

    .game-row:first-of-type {
        border-top: 0
    }

.team-name {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #382d51
}

.team-score {
    font-size: 20px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    background-color: #b400ff;
    padding: 5px;
    border-radius: 6px;
}

.game-foot {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px
}

.chip {
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 999px;
    background: #f2ecfb;
    color: #5a4780;
    font-weight: 700
}

    .chip.ghost {
        background: #fff;
        border: 1px solid #e6deef
    }

/* Hero */
.hero-banner {
    margin-top: 14px;
    height: 320px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(0,0,0,.08), rgba(0,0,0,.45)), radial-gradient(circle at 20% 40%, #ff8f3d 0 10%, transparent 11%), radial-gradient(circle at 30% 35%, #ff6f2d 0 8%, transparent 9%), radial-gradient(circle at 70% 30%, #222f60 0 16%, transparent 17%), linear-gradient(180deg,#76a8dc 0 40%, #df8a34 40% 100%);
    box-shadow: var(--shadow)
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,0,0,.35) 0 45%, rgba(0,0,0,.1) 75%)
}

.hero-content {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
    padding: 20px
}

    .hero-content h1 {
        font-size: 28px;
        margin: 0 0 10px;
        font-weight: 800;
        text-shadow: 0 2px 12px rgba(0,0,0,.35)
    }

    .hero-content p {
        margin: 0 0 16px;
        opacity: .95;
        font-size: 14px
    }

.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--teal),var(--pink));
    font-weight: 800;
    color: #fff;
    letter-spacing: .04em;
    box-shadow: 0 10px 20px rgba(255,42,134,.25)
}

/* News grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.news-card {
    background: #fff;
    box-shadow: var(--shadow);
    border-radius: 2px;
    overflow: hidden
}

.news-thumb {
    height: 120px
}

    .news-thumb.gradient-1 {
        background: linear-gradient(135deg,#11d1c1,#3f0c8c)
    }

    .news-thumb.gradient-2 {
        background: linear-gradient(135deg,#ff4aa2,#6f2dff)
    }

    .news-thumb.gradient-3 {
        background: linear-gradient(135deg,#2c5acb,#a63cff)
    }

    .news-thumb.gradient-4 {
        background: linear-gradient(135deg,#ff9a34,#ff2a86)
    }

.news-body {
    padding: 14px 12px 15px
}

    .news-body h3 {
        font-size: 16px;
        line-height: 1.15;
        margin: 0 0 8px;
        color: #ec2c86;
        font-weight: 800
    }

    .news-body p {
        font-size: 12px;
        color: #7b7589;
        margin: 0
    }

/* =========================================================
   Sports strip (TILES) - LIMPO + HOVER "SALTO"
   sobe e abre 10px de largura (5px cada lado)
   ========================================================= */
.sports-strip {
    margin-top: 18px;
    background: #efefef;
    overflow: visible;
}

.sports-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0;
    overflow: visible;
}

.sport-tile {
    position: relative;
    height: 340px;
    overflow: visible;
    z-index: 1;
    isolation: isolate;
    background: #999;
}

    /* Imagem do tile */
    .sport-tile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        z-index: 0;
        border-radius: 0;
        will-change: top,left,width,height;
        transition: top .5s cubic-bezier(.2,.8,.2,1), 
            left .5s cubic-bezier(.2,.8,.2,1), 
            width .5s cubic-bezier(.2,.8,.2,1), 
            height .5s cubic-bezier(.2,.8,.2,1), 
            border-radius .5s ease, 
            box-shadow .5s ease, 
            filter .5s ease;
    }

    /* Sombra/overlay sobre a imagem */
    .sport-tile .shade {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: linear-gradient(180deg,transparent 30%, rgba(0,0,0,.58) 100%);
        pointer-events: none;
        transition: top .5s cubic-bezier(.2,.8,.2,1), 
            left .5s cubic-bezier(.2,.8,.2,1), 
            width .5s cubic-bezier(.2,.8,.2,1), 
            height .5s cubic-bezier(.2,.8,.2,1), 
            border-radius .5s ease, 
            box-shadow .5s ease, 
            filter .5s ease;
    }

/* Conteúdo do tile */
.sport-tile-content {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    color: #fff;
    z-index: 2;
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}

    .sport-tile-content h4 {
        margin: 0 0 6px;
        font-size: 18px;
        line-height: 1.05;
        font-weight: 800;
        text-shadow: 0 2px 8px rgba(0,0,0,.35);
        transition: text-shadow .22s ease;
    }

    .sport-tile-content a {
        font-size: 11px;
        font-weight: normal;
        opacity: .95;
        transition: opacity .22s ease, transform .22s ease;
    }

    .sport-tile-content a:hover {
        color: gray;
    }

/* Fallbacks de fundo */
.tile-1 {
    background: linear-gradient(120deg,#19d1b5,#2c735e)
}

.tile-2 {
    background: linear-gradient(120deg,#8e2d8f,#2b182e)
}

.tile-3 {
    background: linear-gradient(120deg,#ff5f6d,#582c78)
}

.tile-4 {
    background: linear-gradient(120deg,#3a82ff,#273559)
}

.tile-5 {
    background: linear-gradient(120deg,#ffb347,#7a1f5c)
}

.tile-6 {
    background: linear-gradient(120deg,#2fbf71,#1d4b3a)
}

.tile-7 {
    background: linear-gradient(120deg,#3f7bff,#1f2b5a)
}

.tile-8 {
    background: linear-gradient(120deg,#6d52ff,#2e205c)
}

.tile-9 {
    background: linear-gradient(120deg,#00b6d6,#1f5560)
}

.tile-10 {
    background: linear-gradient(120deg,#a08f7a,#453b30)
}

/* Imagens */
.tile-1::before {
    background-image: url('../img/carousel/basq.jpeg')
}

.tile-2::before {
    background-image: url('../img/carousel/futebol.jpeg')
}

.tile-3::before {
    background-image: url('../img/carousel/futsal.jpeg')
}

.tile-4::before {
    background-image: url('../img/carousel/hand.jpeg')
}

.tile-5::before {
    background-image: url('../img/carousel/natacao.jpeg')
}

.tile-6::before {
    background-image: url('../img/carousel/rugby.jpeg')
}

.tile-7::before {
    background-image: url('../img/carousel/tenis.jpeg')
}

.tile-8::before {
    background-image: url('../img/carousel/tenis-mesa.jpeg')
}

.tile-9::before {
    background-image: url('../img/carousel/volei.jpeg')
}

.tile-10::before {
    background-image: url('../img/carousel/xadrez.jpeg')
}

/* HOVER / FOCUS: "salto" (sobe e alarga 10px = 5px por lado) */
.sport-tile:hover,
.sport-tile:focus-within {
    z-index: 20;
    bottom: 5px;
}

    .sport-tile:hover::before, .sport-tile:focus-within::before {
        top: -5px;
        left: -12px;
        width: calc(110% + 10px);
        height: calc(100% + 5px);
        box-shadow: 0px 4px 4px rgb(0 0 0 / 15%);
        filter: saturate(1.08) contrast(1.03);
    }

    .sport-tile:hover .shade,
    .sport-tile:focus-within .shade {
        top: -5px;
        left: -12px;
        width: calc(110% + 10px);
        height: calc(100% + 5px);
        background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.52) 100%);
    }

    .sport-tile:hover .sport-tile-content,
    .sport-tile:focus-within .sport-tile-content {
        transform: translateY(-8px);
    }

        .sport-tile:hover .sport-tile-content h4,
        .sport-tile:focus-within .sport-tile-content h4 {
            text-shadow: 0 6px 18px rgba(0,0,0,.46);
        }

        .sport-tile:hover .sport-tile-content a,
        .sport-tile:focus-within .sport-tile-content a {
            opacity: 1;
            transform: translateX(2px);
        }

/* Mobile: desliga efeito pesado de hover */
@media (hover:none) {
    .sport-tile::before,
    .sport-tile .shade,
    .sport-tile-content,
    .sport-tile-content h4,
    .sport-tile-content a {
        transition: none;
    }

    .sport-tile:hover::before,
    .sport-tile:focus-within::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        filter: none;
    }

    .sport-tile:hover .shade,
    .sport-tile:focus-within .shade {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .sport-tile:hover .sport-tile-content,
    .sport-tile:focus-within .sport-tile-content {
        transform: none;
    }

        .sport-tile:hover .sport-tile-content a,
        .sport-tile:focus-within .sport-tile-content a {
            transform: none;
        }
}

/* Videos */
.videos-section h2 {
    margin: 0 0 10px;
    color: #f03b94;
    font-size: 18px
}

.videos-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 5px;
}

.video-feature,
.video-list {
    background: #fff;
    box-shadow: var(--shadow)
}

.video-hero {
    height: 350px;
    position: relative;
    background: linear-gradient(160deg,#5396d8 0 55%,#35537d 55% 100%), radial-gradient(circle at 40% 60%, rgba(255,255,255,.3) 0 8%, transparent 9%);
    overflow: hidden
}

.video-hero::before {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    top: 45%;
    height: 10px;
    background: rgba(235,220,180,.9);
    transform: skewY(-3deg)
}

.videos-layout.video-ui .video-feature {
    height: 520px;
}

.videos-layout.video-ui .video-hero {
    height: 520px;
}

    .videos-layout.video-ui .video-hero iframe,
    .videos-layout.video-ui .video-hero video {
        width: 100%;
        height: 520px;
        display: block;
    }

/* lateral acompanha a altura do destaque */
.videos-layout.video-ui .video-list {
    max-height: 520px;
    overflow: auto;
}

/* opcional: scroll mais “liso” */
.videos-layout.video-ui .video-list {
    scrollbar-width: thin;
}

/* mobile: não deixa gigante */
@media (max-width: 980px) {
  .videos-layout.video-ui .video-feature,
  .videos-layout.video-ui .video-hero {
      height: 320px;
  }

      .videos-layout.video-ui .video-hero iframe,
      .videos-layout.video-ui .video-hero video {
          height: 320px;
      }

  .videos-layout.video-ui .video-list {
      max-height: none;
      overflow: visible;
  }
}

.play-btn {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%,-50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(3px);
    border: 4px solid rgba(83,28,127,.65);
    color: #fff;
    font-size: 34px;
    text-indent: 3px
}

.video-title {
    position: absolute;
    left: 20px;
    bottom: 18px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,.45)
}

.video-list {
    padding: 10px
}

.video-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: center;
    background: #f3f1f7;
    border: 1px solid #e3ddec;
    padding: 8px;
    margin-bottom: 8px
}

.video-item p {
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #3c3155;
    line-height: 1.2
}

.duration {
    display: inline-block;
    background: #101010;
    color: #fff;
    font-size: 11px;
    border-radius: 3px;
    padding: 2px 5px;
    font-weight: 700
}

/* Large banner */
.large-banner {
    height: 200px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg,#1ad3b7,#5d2093 45%, #ff2a86), radial-gradient(circle at 20% 40%,rgba(255,255,255,.2) 0 15%,transparent 16%);
    box-shadow: var(--shadow)
}

.large-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18))
}

.large-banner-content {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    text-align: center;
    align-content: center;
}

    .large-banner-content h2 {
        margin: 0;
        font-size: 18px;
        text-shadow: 0 2px 8px rgba(0,0,0,.35)
    }

/* Lower columns */
.lower-columns {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 30px;
    background: #f5f3f7;
    padding: 18px 18px 28px;
    border-radius: 0
}

.hidden-section{
    display: none !important;
}

    .lower-columns .col h3 {
        margin: 0 0 10px;
        color: #ef2d86
    }

.about-col p,
.about-col li {
    font-size: 12px;
    color: #756e84;
    line-height: 1.5
}

.about-col ul {
    margin: 8px 0 0 18px;
    padding: 0
}

.cta-list {
    display: grid;
    gap: 12px;
    margin-top: 10px
}

    .cta-list a {
        background: #fff;
        border-radius: 999px;
        padding: 10px 14px;
        color: #5e5480;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px #e8e0f0
    }

/* ===========================
   FOOTER (idêntico ao print)
   usa /assets/img/footer.png + logo-branco.png
   =========================== */

.site-footer.ndu-footer {
    margin-top: 10;
}

    /* barra verde */
    .site-footer.ndu-footer .social-bar {
        background: #2fd2b5;
        height: 62px;
        display: flex;
        align-items: center;
    }

    .site-footer.ndu-footer .social-icons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

        .site-footer.ndu-footer .social-icons .soc {
            width: 34px;
            height: 34px;
            border-radius: 6px;
            display: grid;
            place-items: center;
            color: #fff;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.18);
            transition: transform .15s ease, background .15s ease;
        }

            .site-footer.ndu-footer .social-icons .soc:hover {
                transform: translateY(-2px);
                background: rgba(255,255,255,.22);
            }

        .site-footer.ndu-footer .social-icons svg {
            width: 18px;
            height: 18px;
        }

    /* fundo com imagem inteira */
    .site-footer.ndu-footer .footer-main.footer-image-bg {
        position: relative;
        color: #fff;
        background-image: url('../img/footer.png');
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        padding: 26px 0 130px;
        overflow: hidden;
    }

    /* some com ondas antigas se ainda existirem em outras páginas */
    .site-footer.ndu-footer .footer-wave-green,
    .site-footer.ndu-footer .footer-wave-pink,
    .site-footer.ndu-footer .footer-brand {
        display: none !important;
    }

    /* grid do menu (no “miolo” roxo) */
    .site-footer.ndu-footer .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr 1.4fr 1fr .9fr 1fr;
        gap: 18px;
        position: relative;
        z-index: 2;
        padding-top: 10px;
    }

        .site-footer.ndu-footer .footer-grid h5 {
            font-size: 11px;
            margin: 0 0 8px;
            text-transform: uppercase;
            letter-spacing: .06em;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(255,255,255,.28);
        }

        .site-footer.ndu-footer .footer-grid a {
            display: block;
            font-size: 11px;
            line-height: 1.45;
            margin: 2px 0;
            color: rgba(255,255,255,.92);
            opacity: .95;
        }

            .site-footer.ndu-footer .footer-grid a:hover {
                opacity: 1;
                text-decoration: underline;
                text-underline-offset: 3px;
            }

    /* logo branco inferior direita */
    .site-footer.ndu-footer .footer-logo {
        position: absolute;
        right: 60px;
        bottom: 26px;
        width: 210px;
        max-width: 44vw;
        height: auto;
        z-index: 3;
    }

/* responsivo */
@media (max-width: 980px) {
    .site-footer.ndu-footer .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .site-footer.ndu-footer .footer-logo {
        right: 18px;
        bottom: 18px;
        width: 170px;
    }
}

@media (max-width: 520px) {
    .site-footer.ndu-footer .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   CONTAINER FIXO (não fluido)
   =========================== */
.container {
    width: min(1240px, calc(100% - 0px));
}

.page-wrap {
    overflow-x: clip;
}

/* Evita seções estourando a tela inteira */
main > section,
.site-header > .container,
.footer-main > .container,
.social-bar > .container {
    max-width: 1240px;
    margin-inline: auto;
}

/* Se alguma regra antiga estiver usando 100vw, isso corrige */
.hero-banner,
.news-grid,
.videos-section,
.large-banner,
.lower-columns {
    width: auto;
    max-width: 1240px;
    margin-inline: auto;
}

/* ===========================
   CARD ROXO PARA JOGO FUTURO
   =========================== */
.game-card.is-upcoming {
    background: linear-gradient(180deg, #5c2bbd 0%, #3a167c 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: 0 16px 32px rgba(58, 22, 124, 0.28);
}

    .game-card.is-upcoming .team-name,
    .game-card.is-upcoming .game-date,
    .game-card.is-upcoming .sport-code {
        color: #fff;
    }

    .game-card.is-upcoming .team-score {
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
    }

    .game-card.is-upcoming .chip {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.18);
    }

        .game-card.is-upcoming .chip.ghost {
            background: rgba(255, 255, 255, 0.08);
        }

.badge.badge-upcoming {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
}

/* ===========================
   BARRA FIXA DO TOPO (SCROLL)
   =========================== */
.ndu-quickbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(90deg, #2b0b59 0%, #8b2dc2 65%, #97045f 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(35, 10, 78, 0.22);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
}

    .ndu-quickbar.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

.quickbar-inner {
    min-height: 68px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.quickbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
}

.brand-icon.small {
    width: 150px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 0;
    font-weight: 800;
    color: #fff;
    background-image: url(../img/logo-branco.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.quickbar-brand .brand-name {
    font-weight: 800;
    letter-spacing: .4px;
}

.quickbar-center {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 450px;
}

.quickbar-nextgame {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    justify-content: center;
}

.q-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    margin-right: 2px;
    flex: 0 0 auto;
}

.q-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    padding: 2px;
    flex: 0 0 24px;
}

.q-team {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #fff;
    opacity: .95;
    font-size: .92rem;
}

.q-score {
    min-width: 22px;
    text-align: center;
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    padding: 2px 6px;
    line-height: 1.1;
}

.q-vs {
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    color: rgba(255,255,255,.8);
    margin: 0 4px;
}

.quickbar-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    justify-content: center;
}

.q-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    padding: 3px 10px;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.q-text {
    color: rgba(255,255,255,.88);
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quickbar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

    .quickbar-nav a {
        color: rgba(255,255,255,.92);
        text-decoration: none;
        font-size: .86rem;
        font-weight: 600;
        padding: 6px 8px;
        border-radius: 6px;
        transition: background-color .15s ease, color .15s ease;
    }

        .quickbar-nav a:hover {
            background: rgba(255,255,255,.10);
            color: #fff;
        }

/* Menu do topo vai sumindo ao rolar */
.site-header .nav-row {
    transition: transform .28s ease, opacity .28s ease;
}

body.is-scrolled .site-header .nav-row {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Compensa a barra fixa quando ela aparece */
body.has-quickbar {
    padding-top: 64px;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width:1300px) {
    .sports-grid {
        grid-template-columns: repeat(5,1fr)
    }

    .sport-tile {
        height: 280px;
    }


    .tile-1::before, .tile-2::before, .tile-3::before, .tile-4::before, .tile-5::before, .tile-6::before, .tile-7::before, .tile-8::before {
        background-position: center top;
    }

    .news-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:1200px) {
    .quickbar-inner {
        grid-template-columns: auto 1fr
    }

    .quickbar-nav {
        display: none
    }
}

@media (max-width:980px) {
    .main-nav {
        display: none
    }

    .videos-layout {
        grid-template-columns: 1fr
    }

    .video-hero {
        height: 260px
    }

    .lower-columns {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .social-icons {
        gap: 34px
    }

    .quickbar-inner {
        grid-template-columns: 1fr;
        gap: 6px;
        padding-block: 8px;
    }

    .quickbar-brand {
        display: none
    }

    .quickbar-nextgame {
        justify-content: flex-start;
        overflow: hidden;
    }

    .quickbar-meta {
        justify-self: start;
        flex-wrap: wrap;
        white-space: normal;
    }

    .q-team {
        max-width: 90px
    }
}

@media (max-width:900px) {
    .q-team {
        max-width: 90px
    }
}

@media (max-width:700px) {
    .games-carousel {
        grid-template-columns: 36px 1fr 36px
    }

    .game-card {
        min-width: 210px;
        max-width: 210px
    }

    .hero-content h1 {
        font-size: 20px
    }

    .news-grid {
        grid-template-columns: 1fr
    }

    .sports-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .container {
        width: calc(100% - 0px)
    }
}


    .post-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 36px rgba(15,23,42,.14);
    }


.post-info {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    color: #fff;
    z-index: 1;
    text-shadow: 0px 1.3px #00000091;
}

    .post-info h3 {
        margin: 0 0 6px;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.1;
        text-shadow: 0 2px 10px rgba(0,0,0,.35);
    }

    .post-info p {
        margin: 0 0 10px;
        font-size: 12px;
        font-weight: 700;
        opacity: .92;
        line-height: 1.25;
        max-height: 2.6em;
        overflow: hidden;
    }

.posts-empty {
    background: #fff;
    border: 1px dashed rgba(0,0,0,.14);
    border-radius: 6px;
    padding: 18px;
    color: #667;
    font-weight: 800;
}

.posts-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 12px;
}

    .posts-section-head h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 900;
        color: var(--purple);
        letter-spacing: .2px;
    }


.promo-banner {
    position: relative;
    width: 100%;
    height: 115px;
    border-radius: 6px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
}

.promo-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
    background-size: cover;
    background-position: center center;
}

.promo-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 15, 32, .08), rgba(8, 15, 32, .18));
}

.promo-slide.is-active {
    opacity: 1;
}

.promo-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 1;
    display: grid;
    gap: 3px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

.promo-caption strong {
    font-size: 15px;
    font-weight: 900;
}

.promo-caption span {
    font-size: 12px;
    font-weight: 700;
}

.highlights-carousel{
        display:grid;
        gap:12px;
    }
    
    .highlights-track{
        position:relative;
        overflow:hidden;
        border-radius:0px;
    }
    
    .highlights-slide{
        display:none;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
    
    .highlights-slide.is-active{
        display:grid;
    }
    
    .highlight-card{
        position:relative;
        min-height:405px;
        border-radius:0;
        overflow:hidden;
        background:#111;
        display:block;
        color:#fff;
        text-decoration:none
    }
    
    .highlight-card-placeholder{
        visibility:hidden
    }
    
    .highlight-thumb,.highlight-overlay{
        position:absolute;
        inset:0
    }
    
    .highlight-thumb{
        background-size:cover;
        background-position:center center;
        transform:scale(1);
        transition:transform .35s ease
    }
    
    .highlight-card:hover .highlight-thumb{
        transform:scale(1.05)
    }
    
    .highlight-overlay{
        background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 20%,rgba(0,0,0,.62) 100%)
    }
    
    .highlight-chip {
        position: absolute;
        left: 20px;
        top: 18px;
        z-index: 1;
        color: #ff6fee;
        font-size: 15px;
        font-weight: 900;
        letter-spacing: .02em;
    }
    
    .highlight-scoreline {
        position: absolute;
        left: 20px;
        top: 20px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 7px 14px;
        border-radius: 0px;
        background: rgb(92 92 92 / 50%);
        color: #fff;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: .02em;
    }
    
    .highlight-content {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 22px;
        z-index: 1;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    }
    
    .highlight-content h3 {
        margin: 0 0 6px;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.20;
        text-transform: uppercase;
    }
    
    .highlight-content p{
        margin:0;font-size:16px;
        font-weight:700;
        line-height:1.35;
        max-width:90%
    }
    
    .highlights-dots{
        display:flex;
        justify-content:center;
        gap:10px
    }
    
    .highlights-dots button{
        width:11px;
        height:11px;
        border:none;
        border-radius:999px;
        background:rgba(100,116,139,.45);
        cursor:pointer;
        transition:transform .18s ease,background-color .18s ease
    }
    
    .highlights-dots button.is-active {
        background: linear-gradient(90deg, #521387, #8c2cbe, #8f20a2);
        transform: scale(1.18);
        box-shadow: 0 0 0 4px rgb(144 26 149 / 18%);
    }
    
    @media(max-width:980px){.highlights-slide{grid-template-columns:1fr}.highlight-card,.highlight-card-placeholder{min-height:330px}.highlight-content h3{font-size:20px}.highlight-content p{font-size:14px;max-width:100%}}@media(max-width:640px){.promo-banner{border-radius:0px}.highlight-card,.highlight-card-placeholder{min-height:275px}.highlight-chip{font-size:12px;left:14px;top:14px}.highlight-scoreline{left:14px;bottom:88px;font-size:13px;min-height:32px;padding:6px 10px}.highlight-content{left:14px;right:14px;bottom:16px}.highlight-content h3{font-size:16px}.highlight-content p{font-size:12px}}

/* grade */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    padding: 10px;
    background-color: white;
    border-radius: 0px;
}

/* card */
.post-card {
    position: relative;
    height: 260px;
    border-radius: 0;
    overflow: hidden;
    background: #111;
    border: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.post-card:hover {
    transform: translateY(-4px);
}

/* imagem ocupa 80% */
.post-thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform .35s ease;
}

.post-card:hover .post-thumb {
    transform: scale(1.06);
}

/* remove overlay antigo (se existir no HTML antigo) */
.post-overlay {
    display: none !important;
}

/* COLE NO style.css (pode ser perto do .lower-columns / .cta-list) */

.cta-accordion {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(34,16,68,.08);
    overflow: hidden;
}

.acc-item + .acc-item {
    border-top: 1px solid rgba(0,0,0,.06);
}

.acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border: 0;
    background: linear-gradient(90deg, rgba(48,0,95,.06), rgba(255,42,134,.05));
    color: var(--purple);
    cursor: pointer;
    font-weight: 900;
    letter-spacing: .2px;
    text-align: left;
}

    .acc-btn:hover {
        background: linear-gradient(90deg, rgba(48,0,95,.10), rgba(255,42,134,.08));
    }

.acc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.acc-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(48,0,95,.08);
    color: var(--purple);
    transition: transform .18s ease, background-color .18s ease;
    flex: 0 0 auto;
}

.acc-panel {
    padding: 0 14px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
}

.acc-panel-inner {
    padding: 12px 0 14px;
}

.acc-panel p {
    margin: 0 0 10px;
    color: #5b556a;
    font-size: 12px;
    line-height: 1.55;
}

.acc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 11px;
    color: var(--pink);
}

.acc-item.is-open .acc-icon {
    transform: rotate(180deg);
    background: rgba(255,42,134,.12);
}

.acc-item.is-open .acc-panel {
    opacity: 1;
    transform: translateY(0);
}

/* opcional: respira melhor no mobile */
@media (max-width: 700px) {
    .acc-btn {
        padding: 12px 12px;
    }

    .acc-panel {
        padding: 0 12px;
    }
}

/* faixa roxa nos últimos 20% */
.post-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    padding: 10px 12px;
    background: linear-gradient(0deg, #212121, #0000004f);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

    .post-footer h3 {
        margin: 0;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.05;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .post-footer p {
        margin: 0;
        font-size: 11px;
        font-weight: 700;
        opacity: .92;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.post-cta {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    opacity: .95;
}

/* responsivo */
@media (max-width: 1300px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width: 900px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 520px) {
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .post-card {
        height: 240px
    }
}

.ndu-quickbar {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* SECTION DE VIDEOS */

.video-ui .video-hero iframe,
.video-ui .video-hero video {
    width: 100%;
    height: 100%;
    display: block;
}

.video-ui .video-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.10) 60%);
    pointer-events: none;
}

.video-ui .play-btn {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%,-50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(3px);
    border: 4px solid rgb(255 255 255);
    color: #fff;
    font-size: 34px;
    text-indent: 3px;
    pointer-events: none;
}

.video-ui .video-title {
    position: absolute;
    left: 20px;
    bottom: 18px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
    pointer-events: none;
}

.video-ui .video-list {
    padding: 10px;
}

.video-ui .video-item {
    width: 100%;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: center;
    background: #f3f1f7;
    border: 1px solid #e3ddec;
    padding: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    text-align: left;
}

    .video-ui .video-item:hover {
        background: #efeaf7;
    }

.video-ui .thumb-mini {
    height: 60px;
    background-size: cover;
    background-position: center;
}

.video-ui .duration {
    display: inline-block;
    background: #101010;
    color: #fff;
    font-size: 11px;
    border-radius: 3px;
    padding: 2px 5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.video-ui .vmeta p {
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #3c3155;
    line-height: 1.2;
}

.video-ui .video-hero::before {
    display: none;
}

/* destaque do vídeo: player não pode ficar “solto” */
.videos-layout.video-ui .video-hero {
    position: relative;
    overflow: hidden;
}

    /* MP4: sempre sem barra (corta/cover) */
    .videos-layout.video-ui .video-hero video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* IFRAME: centralizado (o JS vai dimensionar maior/menor) */
    .videos-layout.video-ui .video-hero iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border: 0;
    }

/* barra do botão “modo foco” */
.video-focusbar {
    background: #fff;
    padding: 10px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(0,0,0,.08);
}

/* força a barra roxa sempre visível */
.ndu-quickbar {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
}

/* ===========================
   QUICKBAR DROPDOWN (moderno)
   =========================== */

.quickbar-nav {
    position: relative;
}

.quickbar-nav .q-link {
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 600;
    padding: 12px 10px;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
}

.quickbar-nav .q-link:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
}

.quickbar-nav .q-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.quickbar-nav .q-caret {
    font-size: .78em;
    opacity: .9;
    transform: translateY(1px);
    transition: transform .15s ease, opacity .15s ease;
}

/* Menu dropdown */
.quickbar-nav .q-dd-menu {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    min-width: 240px;
    padding: 8px;
    border-radius: 6px;
    background: linear-gradient(45deg, #41058385, #960766ab);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    z-index: 10050;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

/* setinha do dropdown */
.quickbar-nav .q-dd-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 16px;
    width: 12px;
    height: 12px;
    background: linear-gradient(134deg, #000000, #ffffff00, #ffffff00);
    border-left: 1px solid rgb(0 0 0 / 14%);
    border-top: 1px solid rgb(0 0 0 / 14%);
    transform: rotate(45deg);
}

/* itens */
.quickbar-nav .q-dd-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 6px;
    color: rgba(255,255,255,.92);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s ease, transform .12s ease;
}

.quickbar-nav .q-dd-menu a:hover {
    background: rgba(255,255,255,.10);
    transform: translateX(2px);
    color: #fff;
}

/* abrir por hover/focus no desktop */
.quickbar-nav .q-item.has-dd:hover .q-dd-menu,
.quickbar-nav .q-item.has-dd:focus-within .q-dd-menu,
.quickbar-nav .q-item.has-dd.is-open .q-dd-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.quickbar-nav .q-item.has-dd:hover .q-caret,
.quickbar-nav .q-item.has-dd.is-open .q-caret {
    transform: translateY(1px) rotate(180deg);
    opacity: 1;
}

/* evita o dropdown sair da tela à direita */
.quickbar-nav .q-item.has-dd:last-child .q-dd-menu {
    left: auto;
    right: 0;
}

.quickbar-nav .q-item.has-dd:last-child .q-dd-menu::before {
    left: auto;
    right: 16px;
}

/* ===========================
   LARGE BANNER COM IMAGEM + FILTRO
   =========================== */
.large-banner.ndu-banner-img {
    background-image: linear-gradient(120deg, rgba(26,211,183,.18), rgba(93,32,147,.28) 45%, rgba(255,42,134,.28) ), var(--banner-img);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

    /* mantém o “filtro” por cima da imagem (overlay) */
    .large-banner.ndu-banner-img .large-banner-overlay {
        background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
    }

/* ===========================
   PARCEIROS
   =========================== */
.partners {
    background: #ffffff;
    padding: 18px 18px 6px;
    margin-bottom: 10px;
}

.partners-row {
    --row-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--row-cols), minmax(0,1fr));
    gap: 22px;
    padding: 8px 0 18px;
}

.partner-group {
    text-align: center;
}

.partner-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 4px 0 12px;
    color: rgba(30, 30, 35, .55);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .partner-title::before,
    .partner-title::after {
        content: "";
        height: 1px;
        background: rgba(0,0,0,.18);
        flex: 1;
    }

    .partner-title span {
        white-space: nowrap;
    }

.partner-grid {
    --cols: 4;
    --h: 64px;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0,1fr));
    gap: 16px 22px;
    align-items: center;
    justify-items: center;
}

.partner-logo {
    display: grid;
    place-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    transition: transform .16s ease, filter .16s ease, opacity .16s ease;
    filter: grayscale(1);
    opacity: .86;
}

    .partner-logo:hover {
        transform: translateY(-3px) scale(1.02);
        filter: grayscale(0);
        opacity: 1;
    }

    .partner-logo img {
        max-height: var(--h);
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

/* responsivo */
@media (max-width: 1100px) {
    .partners-row {
        grid-template-columns: 1fr !important;
    }

    .partner-grid {
        grid-template-columns: repeat(min(var(--cols), 4), minmax(0,1fr));
    }
}

@media (max-width: 700px) {
    .partner-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

/* player sempre dentro do bloco */
.videos-layout.video-ui .video-hero {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 520px !important;
    background: #000 !important;
}

    .videos-layout.video-ui .video-hero iframe,
    .videos-layout.video-ui .video-hero video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        transform: none !important;
    }

    .videos-layout.video-ui .video-hero video {
        object-fit: contain !important; /* mantém bonito com barras pretas */
        background: #000 !important;
    }

/* overlay não pode bloquear clique */
.video-ui .video-hero-overlay,
.video-ui .play-btn,
.video-ui .video-title {
    pointer-events: none !important;
}

/* play some quando estiver tocando */
.video-ui .video-hero.is-playing .play-btn {
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (max-width: 980px) {
    .highlights-slide {
        grid-template-columns: 1fr;
    }

    .highlight-card,
    .highlight-card-placeholder {
        min-height: 330px;
    }

    .highlight-content h3 {
        font-size: 20px;
    }

    .highlight-content p {
        font-size: 14px;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .promo-banner {
        border-radius: 6px;
    }

    .highlight-card,
    .highlight-card-placeholder {
        min-height: 275px;
    }

    .highlight-chip {
        font-size: 12px;
        left: 14px;
        top: 14px;
    }

    .highlight-scoreline {
        left: 14px;
        bottom: 88px;
        font-size: 13px;
        min-height: 32px;
        padding: 6px 10px;
        display: block;
        height: 30px;
    }

    .highlight-content {
        left: 14px;
        right: 14px;
        bottom: 16px;
    }

    .highlight-content h3 {
        font-size: 16px;
    }

    .highlight-content p {
        font-size: 12px;
    }
}

/* =========================================================
   Modalidades em carrossel - mosaico
   Mantém o hover de expansão/salto e usa as imagens de assets/img/mosaico
   ========================================================= */
.sports-strip {
    margin-top: 18px;
    padding-bottom: 12px;
    background: #efefef;
    overflow: hidden;
}

.sports-carousel {
    --sports-visible: 10;
    position: relative;
    margin: 0 -46px;
    padding: 12px 46px 46px;
    overflow: hidden;
}

.sports-viewport {
    position: relative;
    overflow: visible;
}

.sports-carousel .sports-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    transform: translate3d(0, 0, 0);
    transition: transform .62s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.sports-carousel.is-dragging .sports-grid {
    transition: none;
    cursor: grabbing;
}

.sports-carousel .sport-tile {
    flex: 0 0 calc(100% / var(--sports-visible));
    height: 340px;
    min-width: 0;
    cursor: pointer;
    transform: translateY(0) scale(1);
    transition: transform .36s cubic-bezier(.2,.8,.2,1), box-shadow .36s ease;
}

.sports-carousel .sport-mosaic-tile::before {
    background-image: var(--sport-bg);
    background-position: center center;
    background-size: cover;
}

.sports-carousel .sport-tile:hover,
.sports-carousel .sport-tile:focus-within {
    z-index: 30;
    bottom: auto;
    transform: translateY(-6px) scale(1.025);
}

.sports-carousel .sport-tile:hover::before,
.sports-carousel .sport-tile:focus-within::before {
    top: -4px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 10px);
    box-shadow: 0 18px 34px rgba(0,0,0,.24);
    filter: saturate(1.1) contrast(1.04);
}

.sports-carousel .sport-tile:hover .shade,
.sports-carousel .sport-tile:focus-within .shade {
    top: -4px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 10px);
    background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.66) 100%);
}

.sports-carousel .sport-tile-content {
    left: 18px;
    right: 14px;
    bottom: 18px;
}

.sports-carousel .sport-tile-content h4 {
    font-size: 18px;
    line-height: 1.02;
    max-width: 96%;
}

.sports-carousel .sport-tile-content a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    letter-spacing: .02em;
}

.sports-nav {
    position: absolute;
    top: 50%;
    z-index: 40;
    width: 38px;
    height: 58px;
    border: 0;
    border-radius: 6px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    background: rgba(255,255,255,.90);
    color: #3a0b5f;
    font-size: 36px;
    line-height: 1;
    box-shadow: 0 12px 30px rgba(15,23,42,.16);
    cursor: pointer;
    transition: transform .22s ease, background .22s ease, color .22s ease, opacity .22s ease;
}

.sports-nav:hover {
    transform: translateY(-50%) scale(1.06);
    background: #3a0b5f;
    color: #fff;
}

.sports-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.sports-prev {
    left: 8px;
}

.sports-next {
    right: 8px;
}

.sports-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateX(-50%);
}

.sports-dots button {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: rgba(58,11,95,.28);
    cursor: pointer;
    transition: width .24s ease, background .24s ease, transform .24s ease;
}

.sports-dots button.is-active {
    width: 28px;
    background: #3a0b5f;
}

.sports-dots button:hover {
    transform: translateY(-1px);
    background: #3a0b5f;
}

/* CARROSSEL DE MODALIDADES */

/* Correção final das setas do carrossel de modalidades */
[data-sports-carousel] {
  position: relative !important;
}

[data-sports-carousel] [data-sports-track] {
  will-change: transform;
  touch-action: pan-y;
}

[data-sports-carousel]:not(.is-dragging) [data-sports-track] {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[data-sports-carousel].is-dragging [data-sports-track] {
  transition: none !important;
  cursor: grabbing;
}

[data-sports-prev], [data-sports-next], .sports-nav, .sports-carousel__arrow {
    position: absolute !important;
    top: 45% !important;
    z-index: 9999 !important;
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    color: #ffffff !important;
    background: rgb(58 11 95 / 2%) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(10px);
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

[data-sports-prev] svg,
[data-sports-next] svg,
.sports-nav svg,
.sports-carousel__arrow svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

[data-sports-prev]:hover,
[data-sports-next]:hover,
.sports-nav:hover,
.sports-carousel__arrow:hover {
  background: rgba(97, 0, 134, 0.96) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

[data-sports-prev],
.sports-prev,
.sports-carousel__arrow--prev {
  left: 55px !important;
  right: auto !important;
}

[data-sports-next],
.sports-next,
.sports-carousel__arrow--next {
  right: 55px !important;
  left: auto !important;
}

[data-sports-prev]:disabled,
[data-sports-next]:disabled,
.sports-nav:disabled,
.sports-carousel__arrow:disabled {
  display: none !important;
}

[data-sports-dots],
.sports-dots,
.sports-carousel__dots {
  z-index: 9998 !important;
}

/* Mobile: exibir 3 modalidades por vez */
@media (max-width: 768px) {
  [data-sports-carousel] {
    --sports-visible: 3 !important;
    overflow: hidden !important;
  }

  [data-sports-carousel] [data-sports-track] {
    display: flex !important;
  }

  [data-sports-carousel] .sport-tile {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    min-width: 33.333333% !important;
    max-width: 33.333333% !important;
  }

  [data-sports-carousel] .sport-tile img,
  [data-sports-carousel] .sport-card img,
  [data-sports-carousel] .modalidade-card img,
  [data-sports-carousel] picture img {
    object-fit: cover !important;
    object-position: center top !important;
  }

  [data-sports-carousel] .sport-tile,
  [data-sports-carousel] .sport-card,
  [data-sports-carousel] .modalidade-card {
    background-position: center top !important;
  }

  [data-sports-carousel] .sport-tile h3,
  [data-sports-carousel] .sport-tile .sport-title,
  [data-sports-carousel] .sport-tile strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  [data-sports-carousel] .sport-tile span,
  [data-sports-carousel] .sport-tile small,
  [data-sports-carousel] .sport-tile .sport-link {
    font-size: 10px !important;
  }

  [data-sports-prev],
  [data-sports-next],
  .sports-nav,
  .sports-carousel__arrow {
    width: 36px !important;
    height: 36px !important;
  }

  [data-sports-prev] svg,
  [data-sports-next] svg,
  .sports-nav svg,
  .sports-carousel__arrow svg {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 768px) {
  [data-sports-prev],
  [data-sports-next],
  .sports-nav,
  .sports-carousel__arrow {
    width: 40px !important;
    height: 40px !important;
  }

  [data-sports-prev] svg,
  [data-sports-next] svg,
  .sports-nav svg,
  .sports-carousel__arrow svg {
    width: 22px !important;
    height: 22px !important;
  }

  [data-sports-prev],
  .sports-prev,
  .sports-carousel__arrow--prev {
    left: 15px !important;
  }

  [data-sports-next],
  .sports-next,
  .sports-carousel__arrow--next {
    right: 15px !important;
  }
}

@media (max-width: 1480px) {
    .sports-carousel {
        --sports-visible: 8;
    }
}

@media (max-width: 1180px) {
    .sports-carousel {
        --sports-visible: 5;
    }

    .sports-carousel .sport-tile {
        height: 300px;
    }
}



@media (max-width: 780px) {
    .sports-carousel {
        --sports-visible: 3;
        margin: 0 -20px;
        padding: 10px 20px 42px;
    }

    .sports-nav {
        width: 34px;
        height: 48px;
        border-radius: 6px;
        font-size: 30px;
    }

    .sports-prev {
        left: 4px;
    }

    .sports-next {
        right: 4px;
    }

    .sports-carousel .sport-tile {
        height: 260px;
    }

    .sports-carousel .sport-tile-content {
        left: 14px;
        right: 12px;
        bottom: 14px;
    }

    .sports-carousel .sport-tile-content h4 {
        font-size: 13px;
    }
}

@media (max-width: 520px) {
    .sports-carousel {
        --sports-visible: 1;
        margin: 0 -14px;
        padding: 10px 44px 42px;
    }

    .sports-carousel .sport-tile {
        height: 310px;
    }
}

@media (hover:none) {
    .sports-carousel .sport-tile:hover,
    .sports-carousel .sport-tile:focus-within {
        transform: none;
    }
}