/* ╔═══════════════════════════════════════════════════════════════╗
   ║  TEMA COPA DO MUNDO 2026 · CAMADA SOBREPOSTA                    ║
   ║                                                                  ║
   ║  PRINCÍPIO: NÃO toca em cores, fontes, layout ou hover do site. ║
   ║  Apenas ADICIONA elementos Copa (faixa topo + selo flutuante).  ║
   ║  Site continua com identidade Chinato. Modo Copa = camisa do BR. ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* Garante que conteúdo aparece sem depender de IntersectionObserver
   (alguns navegadores embedded/webview falham). */
html.js .reveal { opacity: 1 !important; transform: none !important; }

/* ═══════════════════════════════════════════════════════════════
   FAIXA COPA — fica acima da announce-bar, é a primeira coisa do site
   ═══════════════════════════════════════════════════════════════ */

.copa-faixa-top {
    background: linear-gradient(90deg, #009c3b 0%, #009c3b 33%, #ffdf00 33%, #ffdf00 66%, #002776 66%, #002776 100%);
    background-size: 200% 100%;
    color: #fff;
    text-align: center;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    /* Fixed logo abaixo do header (announce 44 + header 66 = 110) */
    position: fixed;
    top: 110px;
    left: 0;
    right: 0;
    z-index: 99;  /* abaixo do header (100), acima do conteúdo */
    animation: copa-faixa-shimmer 8s ease-in-out infinite;
}

/* Quando a faixa Copa existe, aumenta padding-top do main em ~42px
   (altura da faixa) pra não cobrir conteúdo */
body:has(.copa-faixa-top) main {
    padding-top: 145px !important;  /* 100 padrão + 45 da faixa Copa */
}
@keyframes copa-faixa-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.copa-faixa-top__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.copa-faixa-top__flag {
    font-size: 16px;
    line-height: 1;
}
.copa-faixa-top__cta {
    color: #fff;
    background: rgba(0,0,0,.25);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.4);
    transition: background .2s;
}
.copa-faixa-top__cta:hover {
    background: rgba(0,0,0,.5);
    color: #ffdf00;
}

@media (max-width: 700px) {
    .copa-faixa-top { font-size: 11px; padding: 6px 8px; letter-spacing: 0; }
    .copa-faixa-top__cta { font-size: 10px; padding: 2px 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   SELO FLUTUANTE COPA 2026 — canto inferior esquerdo
   ═══════════════════════════════════════════════════════════════ */

.copa-selo {
    position: fixed;
    bottom: 92px;
    left: 18px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.35), transparent 45%),
        linear-gradient(135deg, #009c3b 0%, #ffdf00 50%, #002776 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: 900;
    font-size: 11px;
    text-align: center;
    line-height: 1;
    box-shadow:
        0 6px 18px rgba(0,39,118,.4),
        inset 0 -4px 10px rgba(0,0,0,.25),
        inset 0 2px 8px rgba(255,255,255,.18);
    z-index: 90;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    text-decoration: none;
    border: 2px solid #ffdf00;
    transition: transform .25s ease;
    cursor: pointer;
}
.copa-selo__top { font-size: 9px; letter-spacing: .1em; opacity: .95; }
.copa-selo__big { font-size: 14px; margin-top: 1px; }
.copa-selo:hover { transform: scale(1.08) rotate(-4deg); }

@media (max-width: 700px) {
    .copa-selo { width: 54px; height: 54px; bottom: 78px; left: 12px; }
    .copa-selo__top { font-size: 8px; }
    .copa-selo__big { font-size: 12px; }
}