.campeonatos-home {
    --camp-amarelo: #ffc400;
    position: relative;
    overflow: hidden;
    min-height: 820px;
    padding: 42px 0 28px;
    background: #02060b url('images/campeonatos-estadio-v1.png') center / cover no-repeat;
    color: #fff;
}
.campeonatos-home::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,3,7,.82),rgba(0,7,15,.2) 48%,rgba(0,3,8,.7)),linear-gradient(0deg,rgba(0,0,0,.6),transparent 42%);
    pointer-events: none;
}
.campeonatos-home .container { position: relative; }
.campeonatos-cabecalho { width: 38%; margin: 0 0 -24px; position: relative; z-index: 5; }
.campeonatos-cabecalho > span { display: none; }
.campeonatos-cabecalho h2 { margin: 0; color: #fff; font-size: clamp(2.25rem,4vw,4.5rem); font-weight: 900; line-height: .88; letter-spacing: -.045em; text-transform: uppercase; }
.campeonatos-cabecalho h2 em { display: block; color: #028E36; font-style: normal; }
.campeonatos-cabecalho p { margin: 16px 0 0; color: #fff; font-size: 1rem; }
.campeonatos-layout { display: grid; grid-template-columns: minmax(0,1fr) 370px; align-items: center; gap: 34px; min-height: 610px; }
.campeonatos-explorador { min-width: 0; }
.bola-palco { position: relative; width: min(100%,680px); aspect-ratio: 1; margin: 0 auto; touch-action: none; user-select: none; cursor: grab; outline: none; }
.bola-palco:active { cursor: grabbing; }
.bola-palco:focus-visible { filter: drop-shadow(0 0 8px var(--camp-amarelo)); }
.bola-futebol-real,.bola-anos { position: absolute; inset: 0; width: 100%; height: 100%; }
.bola-futebol-real { object-fit: contain; transform-origin: center; filter: drop-shadow(0 30px 24px rgba(0,0,0,.62)); transition: transform .08s linear; pointer-events: none; }
.bola-anos { pointer-events: none; }
.bola-ano { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 58px; padding: 0; border: 0; background: transparent; color: #111; font: 800 1.05rem Poppins,sans-serif; text-shadow: 0 1px 1px rgba(255,255,255,.45); cursor: pointer; pointer-events: auto; transition: color .18s,opacity .14s,filter .18s; }
.bola-ano:hover,.bola-ano:focus-visible { outline: 0; color: #bd8c00; filter: drop-shadow(0 0 5px rgba(255,196,0,.9)); }
.bola-ano.ativo { width: 98px; height: 72px; border: 2px solid var(--camp-amarelo); border-radius: 18px; background: rgba(255,255,255,.88); color: #bd8c00; box-shadow: 0 0 18px rgba(255,196,0,.68); font-size: 1.55rem; }
.bola-instrucao { position: absolute; left: -126px; top: 52%; display: grid; grid-template-columns: 54px 155px; align-items: center; color: #fff; pointer-events: none; }
.bola-instrucao i { grid-row: 1 / 3; color: #028E36; font-size: 2.6rem; }
.bola-instrucao strong { color: #028E36; font-size: .9rem; }
.bola-instrucao small { line-height: 1.35; }
.periodos { display: flex; justify-content: center; gap: 7px; min-height: 32px; margin-top: -16px; }
.periodos button,.lista-anos button { border: 0; background: transparent; color: #fff; font: 600 .84rem Poppins,sans-serif; cursor: pointer; }
.periodos button { padding: 6px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; }
.periodos button.ativo { border-color: #028E36; color: #028E36; }
.campeonato-previa { position: relative; min-height: 500px; padding: 27px 24px 24px; border: 1px solid rgba(255,255,255,.45); border-radius: 18px; background: rgba(2,6,10,.88); box-shadow: 0 22px 55px rgba(0,0,0,.52); color: #fff; transition: opacity .16s,transform .16s; backdrop-filter: blur(7px); }
.campeonato-previa::before { content: ""; position: absolute; left: -12px; top: 44%; width: 22px; height: 22px; border-left: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); background: rgba(2,6,10,.94); transform: rotate(45deg); }
.campeonato-previa.trocando { opacity: .3; transform: translateY(6px); }
.previa-etiqueta { color: #028E36; font-size: .82rem; font-weight: 900; letter-spacing: .04em; }
.campeonato-previa h3 { margin: 4px 0 8px; color: #fff; font-size: 1.45rem; }
.campeonato-previa p { margin: 0 0 9px; color: #fff; font-size: .78rem; }
.previa-contagem { display: inline-block; margin-bottom: 13px; color: #cbd1d7; font-size: .72rem; }
.previa-fotos { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.previa-fotos img { display: block; width: 100%; aspect-ratio: 1.2; object-fit: cover; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: #121820; }
.previa-vazia { display: grid; place-items: center; min-height: 230px; padding: 25px; border: 1px dashed rgba(255,255,255,.35); border-radius: 9px; text-align: center; }
.previa-vazia i { color: #028E36; font-size: 2rem; }
.previa-vazia strong,.previa-vazia span { display: block; }
.campeonato-previa .botao { display: inline-flex; width: 100%; margin-top: 18px; padding: 13px 18px; border-color: #028E36; background: #028E36; color: #050505; }
.campeonato-previa .botao:hover { border-color: #ffdc58; background: #ffdc58; }
.campeonatos-navegacao { position: relative; margin-top: -6px; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.35); }
.campeonatos-navegacao-topo { display: flex; align-items: center; gap: 22px; }
.campeonatos-navegacao-topo strong { color: #028E36; font-size: .84rem; }
.campeonatos-navegacao-topo label { position: absolute; right: 0; bottom: calc(100% + 695px); }
.campeonatos-busca { width: 270px; padding: 13px 17px!important; border: 1px solid rgba(255,255,255,.36)!important; border-radius: 11px!important; background: rgba(0,0,0,.34)!important; color: #fff!important; }
.campeonatos-busca::placeholder { color: #fff; }
.lista-anos { display: flex; flex-wrap: wrap; gap: 3px 5px; align-items: center; margin-top: 8px; }
.lista-anos button::after { content: "•"; margin-left: 9px; color: #fff; }
.lista-anos button:last-child::after { display: none; }
.lista-anos button:hover,.lista-anos button.ativo { color: #028E36; }
.campeonatos-sem-js a { color: #028E36; }

.campeonato-single { padding: 60px 0 80px; }
.campeonato-single-cabecalho { max-width: 850px; margin-bottom: 32px; }
.campeonato-single-cabecalho > span { color: #087541; font-weight: 800; }
.campeonato-meta { display: flex; flex-wrap: wrap; gap: 16px; color: #63736b; }
.campeonato-grade-fotos { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.campeonato-grade-fotos a { overflow: hidden; border-radius: 9px; }
.campeonato-grade-fotos img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .3s; }
.campeonato-grade-fotos a:hover img { transform: scale(1.035); }
.campeonato-sem-fotos { padding: 50px; text-align: center; border-radius: 12px; background: #f0f6f2; }

@media(max-width:1180px) {
    .bola-instrucao { left: -45px; top: 60%; grid-template-columns: 42px 130px; }
    .bola-instrucao i { font-size: 2rem; }
}
@media(max-width:950px) {
    .campeonatos-home { min-height: 0; }
    .campeonatos-cabecalho { width: 60%; margin-bottom: 20px; }
    .campeonatos-layout { grid-template-columns: 1fr; }
    .bola-palco { max-width: 630px; }
    .bola-instrucao { left: 0; }
    .campeonato-previa { min-height: 0; }
    .campeonatos-navegacao-topo label { position: static; margin-left: auto; }
    .campeonatos-busca { width: 220px; }
}
@media(max-width:600px) {
    .campeonatos-home { padding-top: 32px; }
    .campeonatos-cabecalho { width: 100%; }
    .campeonatos-cabecalho h2 { font-size: 2.6rem; }
    .bola-palco { width: calc(100% + 20px); margin-left: -10px; }
    .bola-ano { width: 54px; height: 42px; font-size: .72rem; }
    .bola-ano.ativo { width: 72px; height: 54px; font-size: 1rem; }
    .bola-instrucao { left: 16px; top: auto; bottom: 4px; grid-template-columns: 35px 120px; }
    .bola-instrucao small { display: none; }
    .campeonato-previa { padding: 23px 18px; }
    .campeonatos-navegacao-topo { align-items: stretch; flex-direction: column; }
    .campeonatos-navegacao-topo label { margin: 0; }
    .campeonatos-busca { width: 100%; }
    .campeonato-grade-fotos { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) {
    .bola-futebol-real,.campeonato-previa,.campeonato-grade-fotos img { transition: none!important; }
}
