/* ============================================================
   Camada de design premium — animações e efeitos visuais.
   Carregada APÓS site.css e events.css. Não altera layout base.
   Respeita: prefers-reduced-motion e body.site-motion--off.
   ============================================================ */

/* ── 1. Fundo vivo: aurora e grão de luz ─────────────────── */
.site-atmosphere::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(38% 30% at 18% 8%, rgba(167, 77, 255, .075), transparent 70%),
        radial-gradient(32% 28% at 84% 16%, rgba(46, 230, 166, .055), transparent 70%),
        radial-gradient(40% 34% at 70% 88%, rgba(229, 9, 20, .05), transparent 70%);
    filter: blur(26px);
    animation: dznAurora 22s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
@keyframes dznAurora {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1);   opacity: .75; }
    50%  { transform: translate3d(2%, 1.5%, 0) scale(1.06); opacity: 1; }
    100% { transform: translate3d(-1%, 2%, 0) scale(1.02); opacity: .8; }
}

/* Faixa do topo vira um gradiente em movimento */
.site-strip {
    background: linear-gradient(90deg, var(--accent, #e50914), #a44ddb 30%, #2ee6a6 60%, var(--accent, #e50914)) !important;
    background-size: 220% 100% !important;
    animation: dznStripFlow 7s linear infinite;
}
@keyframes dznStripFlow {
    from { background-position: 0% 50%; }
    to   { background-position: 220% 50%; }
}

/*建筑工程: brilho atrás do logo */
.site-brand .site-logo--banner img,
.site-logo img {
    transition: filter .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.site-brand:hover .site-logo--banner img,
.site-logo:hover img {
    filter: drop-shadow(0 0 12px #9f3edea8) drop-shadow(0 0 34px #2ee6a64d) brightness(1.06);
}

/* ── 2. Conteúdo: entrada em cascata ─────────────────────── */
.app-shell {
    animation: dznPageIn .55s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes dznPageIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Cards entram em sequência (o JS adiciona .dzn-in) */
.dzn-obs {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    transition:
        opacity .5s ease var(--dzn-delay, 0ms),
        transform .55s cubic-bezier(.2, .7, .2, 1) var(--dzn-delay, 0ms);
}
.dzn-obs.dzn-in {
    opacity: 1;
    transform: none;
}

/* ── 3. Cards de evento: hover vivo ──────────────────────── */
.ev-card {
    position: relative;
    transition:
        transform .28s cubic-bezier(.2, .7, .2, 1),
        border-color .28s ease,
        box-shadow .28s ease;
}
.ev-card::before {
    /* brilho que acompanha o mouse (--mx/--my via design.js) */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .12), transparent 65%);
    transition: opacity .3s ease;
    z-index: 2;
}
.ev-card:hover::before,
.ev-card:focus-visible::before { opacity: 1; }

.ev-card:hover,
.ev-card:focus-visible {
    transform: translateY(-5px) scale(1.012);
    border-color: rgba(255, 255, 255, .32);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(255, 255, 255, .06) inset,
        0 0 34px color-mix(in srgb, var(--accent, #e50914) 26%, transparent);
    z-index: 2;
}

/* brilho diagonal ao passar o mouse */
.ev-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
    transform: translateX(-120%);
    transition: transform .0s;
}
.ev-card:hover::after,
.ev-card:focus-visible::after {
    animation: dznSheen .85s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes dznSheen { to { transform: translateX(120%); } }

/* escudos dão zoom no hover do card */
.ev-cover__match .ev-crest {
    transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .32s ease;
}
.ev-card:hover .ev-cover__match .ev-crest:first-child { transform: translateX(-4px) scale(1.09); }
.ev-card:hover .ev-cover__match .ev-crest:last-child  { transform: translateX(4px) scale(1.09); }

/* card AO VIVO respira em verde/vermelho */
.ev-card .ev-pill--live {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ev-card .ev-pill--live::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-110%);
    animation: dznLiveSweep 2.6s ease-in-out infinite;
}
@keyframes dznLiveSweep {
    0%, 55% { transform: translateX(-110%); }
    100%    { transform: translateX(110%); }
}

/* ── 4. Tiles de categoria: gradiente em movimento ───────── */
.ev-cat {
    background-size: 130% 130% !important;
    animation: dznCatPan 12s ease-in-out infinite alternate;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .3s ease;
    /* Promote only while interacting; permanent layers waste GPU memory on
       long agendas and make scrolling less fluid. */
    will-change: auto;
}
.ev-cat:hover,
.ev-cat:focus-visible {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .45);
    border-color: rgba(255, 255, 255, .34) !important;
}
.ev-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .2) 50%, transparent 60%);
    transform: translateX(-130%);
}
.ev-cat:hover::after,
.ev-cat:focus-visible::after { animation: dznSheen .8s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes dznCatPan {
    from { background-position: 0% 20%; }
    to   { background-position: 100% 80%; }
}

/* seta/flecha de chamada nos tiles */
.ev-cat strong { transition: letter-spacing .3s ease, text-shadow .3s ease; }
.ev-cat:hover strong {
    letter-spacing: .02em;
    text-shadow: 0 0 18px rgba(255, 255, 255, .35);
}

/* ── 5. Títulos de seção com energia ─────────────────────── */
.ev-title {
    background-image: linear-gradient(180deg, #fff 55%, rgba(255, 255, 255, .72));
    -webkit-background-clip: text;
    background-clip: text;
}
.ev-section .ev-title {
    position: relative;
}
.ev-section .ev-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: min(120px, 30%);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent, #e50914), transparent);
    animation: dznTitleGlow 3.2s ease-in-out infinite alternate;
}
@keyframes dznTitleGlow {
    from { opacity: .55; transform: scaleX(.85); }
    to   { opacity: 1;   transform: scaleX(1.05); }
}

/* ── 6. Canais: hover saltitante ─────────────────────────── */
.ev-channel {
    transition: transform .26s cubic-bezier(.34, 1.56, .64, 1), border-color .26s ease, box-shadow .26s ease;
}
.ev-channel:hover,
.ev-channel:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
}
.ev-channel__logo img,
.ev-channel__logo .ev-channel__ph {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.ev-channel:hover .ev-channel__logo img,
.ev-channel:hover .ev-channel__logo .ev-channel__ph {
    transform: scale(1.12) rotate(-2deg);
}

/* ── 7. Navegação ────────────────────────────────────────── */
.site-nav a.site-nav__link {
    position: relative;
    transition: color .2s ease, background-color .2s ease;
}
.site-nav a.site-nav__link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent, #e50914), #a44ddb);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.site-nav a.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav a.site-nav__link.on::after {
    transform: scaleX(1);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #e50914) 65%, transparent);
}

/* botão principal com brilho deslizante */
.site-cta,
.site-nav__renew {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, filter .2s ease;
}
.site-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
    transform: translateX(-120%);
}
.site-cta:hover::before { animation: dznSheen .7s ease forwards; }
.site-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--accent, #e50914) 40%, transparent);
}

/* barra de busca acende ao focar */
.site-search input { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.site-search input:focus {
    border-color: color-mix(in srgb, var(--accent, #e50914) 60%, #fff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e50914) 25%, transparent);
}

/* ── 8. Carrossel destaque: zoom sutil (Ken Burns) ───────── */
.ev-feature__slide .ev-feature__teams .ev-crest {
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
.ev-feature__slide.is-active .ev-feature__teams .ev-crest {
    animation: dznCrestBob 4.2s ease-in-out infinite alternate;
}
@keyframes dznCrestBob {
    from { transform: translateY(0); }
    to   { transform: translateY(-7px); }
}
.ev-feature__versus {
    animation: dznVsPulse 2.4s ease-in-out infinite;
}
@keyframes dznVsPulse {
    0%, 100% { text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
    50%      { text-shadow: 0 0 4px rgba(255, 255, 255, .75), 0 2px 22px rgba(0, 0, 0, .85); }
}

/* badge AO VIVO do destaque com halo pulsante */
.ev-feature__badge.is-live::before {
    animation: dznRing 1.6s ease-out infinite;
}
@keyframes dznRing {
    0%   { box-shadow: 0 0 0 0 rgba(255, 69, 88, .5); }
    75%  { box-shadow: 0 0 0 9px rgba(255, 69, 88, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 88, 0); }
}

/* ── 9. Scrollbar e detalhes finos ───────────────────────── */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #070b10; }
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid #070b10;
    background: linear-gradient(180deg, var(--accent, #e50914), #6a3bd4);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #e50914) 80%, #fff), #7d4ce0);
}

/* seleção de texto na cor do site */
::selection {
    background: color-mix(in srgb, var(--accent, #e50914) 55%, transparent);
    color: #fff;
}

/* links "ver todos" enxergam o hover com deslocamento */
.ev-section__head a,
.ev-quick-filter a {
    transition: color .2s ease, gap .2s ease;
}
.ev-section__head a:hover,
.ev-quick-filter a:hover { color: var(--accent, #e50914); }

/* ── 10. Acessibilidade e controles globais ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .site-atmosphere::after,
    .site-strip,
    .dzn-obs,
    .app-shell,
    .ev-cat,
    .ev-card .ev-pill--live::before,
    .ev-feature__slide.is-active .ev-feature__teams .ev-crest,
    .ev-feature__versus,
    .ev-feature__badge.is-live::before,
    .ev-section .ev-title::after { animation: none !important; }
    .dzn-obs { opacity: 1 !important; transform: none !important; transition: none !important; }
}
body.site-motion--off .site-atmosphere::after,
body.site-motion--off .site-strip,
body.site-motion--off .dzn-obs,
body.site-motion--off .app-shell,
body.site-motion--off .ev-cat,
body.site-motion--off .ev-card,
body.site-motion--off .ev-card:hover,
body.site-motion--off .ev-card:focus-visible,
body.site-motion--off .ev-channel,
body.site-motion--off .ev-card .ev-pill--live::before,
body.site-motion--off .ev-feature__slide.is-active .ev-feature__teams .ev-crest,
body.site-motion--off .ev-feature__versus,
body.site-motion--off .ev-section .ev-title::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}
body.site-motion--off .dzn-obs { opacity: 1 !important; }

/* ============================================================
   POP-UP DA OFERTA — repaginado
   ============================================================ */

/* Cortina: fundo escuro com blur e vinheta */
.sale {
    background:
        radial-gradient(60% 50% at 50% 40%, rgba(10, 30, 20, .45), transparent 75%),
        rgba(2, 6, 9, .82);
    backdrop-filter: blur(10px) saturate(1.2);
    animation: dznSaleCurtain .28s ease both;
}
@keyframes dznSaleCurtain { from { opacity: 0; } }

/* Caixa: borda luminosa dupla e entrada com spring */
.sale__box {
    border-color: rgba(182, 255, 92, .34);
    box-shadow:
        0 34px 110px rgba(0, 0, 0, .82),
        0 0 0 1px rgba(255, 255, 255, .05) inset,
        0 0 70px rgba(120, 255, 90, .17);
    animation: dznSaleBox .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes dznSaleBox {
    from { opacity: 0; transform: translateY(26px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
/* filete que acompanha o topo da caixa */
.sale__box::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--sale-lime, #b6ff5c), #35d0ff 38%, #a44ddb 62%, var(--sale-lime, #b6ff5c));
    background-size: 220% 100%;
    animation: dznStripFlow 6s linear infinite;
    pointer-events: none;
}

/* Botão fechar: mais convidativo */
.sale__close {
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(4, 10, 13, .72);
    font-size: 13px;
    font-weight: 800;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), background-color .2s ease, border-color .2s ease;
}
.sale__close:hover,
.sale__close:focus-visible {
    transform: rotate(90deg) scale(1.08);
    background: rgba(229, 9, 20, .75);
    border-color: rgba(255, 255, 255, .4);
}

/* ── HERO: fundo repaginado — foto de estádio + camadas ──── */
.sale__hero {
    /* Foto base (Pexels 37578663, licença livre p/ uso comercial)
       + degradês que garantem contraste do texto e clima do site */
    background:
        linear-gradient(100deg, rgba(3, 20, 28, .88) 0%, rgba(4, 30, 34, .62) 34%, rgba(4, 36, 26, .58) 58%, rgba(3, 24, 16, .38) 100%),
        radial-gradient(230px 160px at 6% -8%, rgba(182, 255, 92, .3), transparent 70%),
        radial-gradient(300px 200px at 96% 2%, rgba(53, 208, 255, .18), transparent 70%),
        radial-gradient(360px 240px at 55% 112%, rgba(31, 224, 133, .24), transparent 72%),
        linear-gradient(165deg, rgba(6, 32, 46, .5), rgba(8, 48, 58, .45) 34%, rgba(9, 70, 46, .48) 68%, rgba(12, 88, 50, .55) 100%),
        url('/assets/images/sale-popup-stadium.jpg') center 38% / cover no-repeat,
        linear-gradient(165deg, #06202e 0%, #08303a 34%, #0b4f33 68%, #0e6b3c 100%);
    isolation: isolate;
}
/* brisa de luz cruzando o hero */
.sale__hero::before {
    content: "";
    position: absolute;
    inset: -30% -20%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .09) 48%, rgba(182, 255, 92, .12) 50%, rgba(255, 255, 255, .09) 52%, transparent 58%);
    animation: dznHeroBreeze 9s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
@keyframes dznHeroBreeze {
    from { transform: translate3d(-7%, -3%, 0) rotate(-1deg); }
    to   { transform: translate3d(7%, 3%, 0) rotate(1deg); }
}
/* linha do meio do campo: ganha vida com micro brilho */
.sale__hero::after {
    border-color: rgba(255, 255, 255, .34);
    box-shadow: 0 0 26px rgba(140, 255, 106, .12);
    animation: dznChalkGlow 5s ease-in-out infinite alternate;
}
@keyframes dznChalkGlow {
    from { opacity: .75; }
    to   { opacity: 1; }
}

/* ── Celular: flutua e a tela "transmite" ────────────────── */
.sale__phone {
    border: 0;
    background: linear-gradient(150deg, #414c58 0%, #10151b 45%, #05080b 100%);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, .68),
        0 0 0 1px rgba(255, 255, 255, .16),
        0 0 44px color-mix(in srgb, var(--sale-lime, #b6ff5c) 24%, transparent);
    animation: dznPhoneBob 5.5s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes dznPhoneBob {
    from { transform: rotate(-6deg) translateY(0); }
    to   { transform: rotate(-4.5deg) translateY(-9px); }
}
.sale__screen {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 26px rgba(57, 224, 145, .16) inset;
}
/* sinal ao vivo pulsa */
.sale__screen-live {
    animation: dznLiveBadge 1.8s ease-in-out infinite;
}
@keyframes dznLiveBadge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 69, 88, .55); }
    55%      { box-shadow: 0 0 0 8px rgba(255, 69, 88, 0); }
}
/* escudos do celular respiram */
.sale__crest {
    animation: dznScreenCrest 3.6s ease-in-out infinite alternate;
}
.sale__screen-team:last-child .sale__crest { animation-delay: -1.8s; }
@keyframes dznScreenCrest {
    from { transform: translateY(-2px); }
    to   { transform: translateY(3px); }
}
/* tiles acendem em sequência */
.sale__screen-tiles i {
    transition: background-color .2s ease;
    animation: dznTileGlow 4.5s ease-in-out infinite;
}
.sale__screen-tiles i:nth-child(2) { animation-delay: .35s; }
.sale__screen-tiles i:nth-child(3) { animation-delay: .7s; }
@keyframes dznTileGlow {
    0%, 100% { background-color: rgba(255, 255, 255, .08); }
    40%      { background-color: color-mix(in srgb, var(--sale-lime, #b6ff5c) 22%, rgba(255, 255, 255, .08)); }
}

/* ── Confronto real no celular: escudos + nomes ──────────── */
.sale__screen-match {
    align-items: flex-start;
}
.sale__screen-team {
    display: flex;
    min-width: 0;
    max-width: 66px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.sale__crest {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--crest-a, #26323d), var(--crest-b, #10171e));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 4px 14px rgba(0, 0, 0, .4);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
}
.sale__crest img {
    width: 76%;
    height: 76%;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
}
.sale__crest-name {
    max-width: 66px;
    overflow: hidden;
    color: #d7e3e8;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
}

/* ── Pitch: título com energia ───────────────────────────── */
.sale__box h2 {
    background: linear-gradient(180deg, #fff 62%, rgba(255, 255, 255, .78));
    -webkit-background-clip: text;
    background-clip: text;
}
.sale__box h2 em {
    background: linear-gradient(180deg, #eaffc2 0%, var(--sale-lime, #b6ff5c) 55%, #7fd425 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--sale-lime, #b6ff5c) 35%, transparent));
}
/* preço com brilho variável */
.sale__price {
    animation: dznPriceGlow 2.8s ease-in-out infinite alternate;
}
@keyframes dznPriceGlow {
    from { text-shadow: 0 0 8px rgba(182, 255, 92, .25); }
    to   { text-shadow: 0 0 22px rgba(182, 255, 92, .55), 0 0 46px rgba(182, 255, 92, .2); }
}

/* ── CTA: botão-hero ─────────────────────────────────────── */
.sale__cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 14px;
    box-shadow:
        0 12px 34px color-mix(in srgb, var(--sale-lime, #b6ff5c) 36%, transparent),
        0 0 0 1px rgba(255, 255, 255, .22) inset;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, filter .2s ease;
}
.sale__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
    transform: translateX(-140%);
}
.sale__cta::after {
    /* halo que chama atenção de tempo em tempo */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .4), transparent 55%);
    animation: dznCtaHalO 2.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes dznCtaHalO {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
.sale__cta:hover,
.sale__cta:focus-visible {
    transform: translateY(-3px) scale(1.015);
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--sale-lime, #b6ff5c) 48%, transparent),
        0 0 0 1px rgba(255, 255, 255, .3) inset;
    filter: brightness(1.06);
}
.sale__cta:hover::before,
.sale__cta:focus-visible::before { animation: dznSheen .75s ease forwards; }

/* ── Benefícios: filete que cresce no hover ──────────────── */
.sale__benefits {
    background: rgba(255, 255, 255, .02);
}
.sale__benefits li {
    position: relative;
    transition: background-color .2s ease;
}
.sale__benefits li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sale-lime, #b6ff5c), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.sale__benefits li:hover {
    background: rgba(182, 255, 92, .06);
}
.sale__benefits li:hover::before {
    transform: scaleX(1);
}

/* ── Acessibilidade: desligar tudo do pop-up ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .sale, .sale__box, .sale__close,
    .sale__hero::before, .sale__hero::after,
    .sale__phone, .sale__screen-live,
    .sale__screen-match i, .sale__screen-tiles i,
    .sale__price, .sale__box::before,
    .sale__cta::after { animation: none !important; }
}
body.site-motion--off .sale,
body.site-motion--off .sale__box,
body.site-motion--off .sale__close,
body.site-motion--off .sale__box::before,
body.site-motion--off .sale__hero,
body.site-motion--off .sale__hero::before,
body.site-motion--off .sale__hero::after,
body.site-motion--off .sale__phone,
body.site-motion--off .sale__screen-live,
body.site-motion--off .sale__screen-match i,
body.site-motion--off .sale__screen-tiles i,
body.site-motion--off .sale__price,
body.site-motion--off .sale__cta::after {
    animation: none !important;
}

/* ============================================================
   CARD DE JOGO — estilo "transmissão de TV"
   (mesma linguagem do pop-up: petróleo + lima, em vez do roxo/dourado)
   ============================================================ */

.ev-card {
    --dzn-lime: #b6ff5c;
    overflow: hidden;
    border-radius: 18px;
    border-color: rgba(255, 255, 255, .12);
    background: #0a1017;
}

/* ── Capa: estádio em destaque com auroras dos times ─────── */
.ev-card .ev-cover {
    height: 172px;
    gap: 8px;
    padding: 12px 14px 0;
    background:
        radial-gradient(200px 150px at 0% 62%, color-mix(in srgb, var(--ev-home, #166534) 62%, transparent), transparent 76%),
        radial-gradient(200px 150px at 100% 62%, color-mix(in srgb, var(--ev-away, #0f3d2e) 62%, transparent), transparent 76%),
        radial-gradient(320px 130px at 50% 118%, rgba(182, 255, 92, .22), transparent 74%),
        linear-gradient(180deg, rgba(3, 10, 20, .42), rgba(2, 14, 10, .1)),
        url('/assets/images/football-stadium-card.svg') center 46% / cover no-repeat,
        linear-gradient(165deg, #06202e 0%, #07303c 42%, #0a4a30 100%);
}

/* nome da competição: selo "broadcast" no topo */
.ev-card .ev-cover__comp {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(4, 10, 16, .66);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: none;
    backdrop-filter: blur(4px);
}

/* confronto central mais presente */
.ev-card .ev-cover__match { gap: 18px; margin-top: 10px; }
.ev-card .ev-crest {
    width: 82px;
    height: 82px;
    padding: 7px;
    background: rgba(4, 9, 14, .8);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .3),
        0 0 0 5px rgba(255, 255, 255, .06),
        0 12px 26px rgba(0, 0, 0, .55);
}
.ev-card .ev-vs {
    font-size: 38px;
    background: linear-gradient(180deg, #f2ffdc 0%, var(--dzn-lime, #b6ff5c) 58%, #7fd425 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65)) drop-shadow(0 0 16px color-mix(in srgb, var(--dzn-lime, #b6ff5c) 40%, transparent));
}

/* ── Corpo escuro: nomes, liga e horário ─────────────────── */
.ev-card .ev-card__body {
    position: relative;
    gap: 8px;
    padding: 15px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(180px 90px at 0% 130%, rgba(182, 255, 92, .1), transparent 72%),
        #0a1017;
}
/* filete lima à esquerda do corpo */
.ev-card .ev-card__body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--dzn-lime, #b6ff5c), rgba(182, 255, 92, .15));
    pointer-events: none;
}
.ev-card .ev-card__title {
    font-family: var(--site-display, "Barlow Condensed", Inter, Arial, sans-serif);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: .015em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.ev-card .ev-card__comp {
    color: #9fc0d8;
    font-weight: 700;
    letter-spacing: .04em;
}
.ev-card .ev-card__time {
    color: var(--dzn-lime, #b6ff5c);
    font-family: var(--site-display, "Barlow Condensed", Inter, Arial, sans-serif);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    text-shadow: 0 0 12px rgba(182, 255, 92, .3);
}

/* registro do AO VIVO acompanha o corpo */
.ev-card .ev-pill--live {
    border-radius: 999px;
    border-color: rgba(255, 69, 88, .5);
    background: rgba(151, 18, 34, .8);
    font-size: 10px;
    letter-spacing: .08em;
}

/* hover mantém os efeitos existentes e acende a borda lima */
.ev-card:hover,
.ev-card:focus-visible {
    border-color: color-mix(in srgb, var(--dzn-lime, #b6ff5c) 45%, rgba(255, 255, 255, .25));
}

/* ============================================================
   FUNDO DO SITE — estádio real (foto noturna) + Ken Burns
   ============================================================ */

body::before {
    /* foto noturna de estádio (Pexels 35120075, 1920x1080, licença livre)
       + velhas degradês que garantem contraste do conteúdo */
    background:
        linear-gradient(180deg, rgba(2, 4, 8, .28) 0%, rgba(2, 4, 8, .46) 36%, rgba(2, 4, 8, .74) 72%, rgba(5, 6, 8, .95) 100%),
        linear-gradient(90deg, rgba(2, 4, 8, .26), transparent 35%, transparent 66%, rgba(2, 4, 8, .30)),
        url('/assets/images/site-stadium-bg.jpg') center 40% / cover no-repeat,
        #050608;
    transform: scale(1.04);
    /* animação de fundo mais perceptível: leve pan + zoom lento */
    animation: siteBackgroundDrift 46s ease-in-out infinite alternate;
}

/* versão mais cinematográfica do drift */
@keyframes siteBackgroundDrift {
    from { transform: scale(1.04) translate3d(-1.2%, 0, 0); }
    to   { transform: scale(1.12) translate3d(1.2%, -.6%, 0); }
}

/* preserva os toggles de acessibilidade/admin */
body.site-background--off::before {
    background: #050608;
    animation: none;
}
body.site-motion--off::before {
    animation: none;
}

/* ── Acessibilidade (reduzir movimento) ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ev-card .ev-cover::before { animation: none !important; }
    body::before, body::after, .site-atmosphere::before,
    .site-atmosphere__crest, .site-atmosphere__orbit { animation: none !important; }
}
body.site-motion--off .ev-card .ev-cover::before { animation: none !important; }

/* Long agendas stay responsive without changing visual quality. Browsers
   skip paint/layout for sections far below the fold and keep a stable
   placeholder height until they approach the viewport. */
.ev-section {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
}

/* Keep hover promotion short-lived instead of reserving a compositor layer
   for every category tile. */
@media (hover: hover) and (pointer: fine) {
    .ev-cat:hover,
    .ev-cat:focus-visible { will-change: transform; }
}

/* ============================================================
   ÍCONES DE MODALIDADE + TEMA POR ESPORTE
   ============================================================ */

/* ícone + cor por esporte (definidos uma vez, usados em tiles e cards)
   Obs.: padronizar SVGs de Tabler (MIT) e imagens recortadas enviadas pelo usuário */
.ev-card {
    --dzn-sport: var(--accent, #8be28b);
}
.ev-cat--futebol, .ev-card--futebol {
    --dzn-icon: url('/assets/images/icons/futebol.png');
    --dzn-sport: #43d78b;
}
.ev-cat--lutas, .ev-card--lutas {
    --dzn-icon: url('/assets/images/icons/lutas.png');
    --dzn-sport: #ff6c76;
}
.ev-cat--nfl, .ev-card--nfl {
    --dzn-icon: url('/assets/images/icons/nfl.png');
    --dzn-sport: #93b4ff;
}
.ev-cat--nba, .ev-card--nba {
    --dzn-icon: url('/assets/images/icons/nba.png');
    --dzn-sport: #ffb66b;
}
.ev-cat--voleibol, .ev-card--voleibol {
    --dzn-icon: url('/assets/images/icons/voleibol.png');
    --dzn-sport: #66dbe8;
}
.ev-cat--canais {
    --dzn-icon: url('/assets/images/icons/canais.avif');
    --dzn-sport: #7dc4ff;
}

/* ── Tiles de categoria: selo circular com o ícone no topo ── */
.ev-cat::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background-color: rgba(255, 255, 255, .12);
    background-image: var(--dzn-icon, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, box-shadow .3s ease;
}
.ev-cat:hover::before,
.ev-cat:focus-visible::before {
    transform: scale(1.12) rotate(-4deg);
    background-color: color-mix(in srgb, var(--dzn-sport, #8be28b) 30%, rgba(255, 255, 255, .1));
    box-shadow: 0 0 16px color-mix(in srgb, var(--dzn-sport, #8be28b) 55%, transparent);
}
@media (max-width: 700px) {
    .ev-cat::before { top: 10px; right: 10px; width: 27px; height: 27px; background-size: 17px; }
}

/* ── Card: selo do esporte dentro do chip da competição ──── */
.ev-card .ev-cover__comp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ev-card .ev-cover__comp::before {
    content: "";
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background: var(--dzn-icon, none) center / contain no-repeat;
    opacity: .95;
}

/* ── Card: paleta própria por esporte ────────────────────── */
/* o filete, o horário, o VS e o hover passam a seguir a cor do esporte */
.ev-card .ev-cover__match { gap: 18px; }
.ev-card .ev-vs {
    background: linear-gradient(180deg, #fff 8%, var(--dzn-sport, #b6ff5c) 62%, color-mix(in srgb, var(--dzn-sport, #b6ff5c) 62%, #000) 100%);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65)) drop-shadow(0 0 16px color-mix(in srgb, var(--dzn-sport, #b6ff5c) 42%, transparent));
}
.ev-card .ev-card__body::before {
    background: linear-gradient(180deg, var(--dzn-sport, #b6ff5c), color-mix(in srgb, var(--dzn-sport, #b6ff5c) 18%, transparent));
}
.ev-card .ev-card__time {
    color: var(--dzn-sport, #b6ff5c);
    text-shadow: 0 0 12px color-mix(in srgb, var(--dzn-sport, #b6ff5c) 35%, transparent);
}
.ev-card .ev-card__body {
    background:
        radial-gradient(180px 90px at 0% 130%, color-mix(in srgb, var(--dzn-sport, #b6ff5c) 11%, transparent), transparent 72%),
        #0a1017;
}
.ev-card:hover,
.ev-card:focus-visible {
    border-color: color-mix(in srgb, var(--dzn-sport, #b6ff5c) 48%, rgba(255, 255, 255, .22));
}

/* fundo da capa por esporte */
.ev-card--lutas .ev-cover {
    background:
        radial-gradient(200px 150px at 0% 62%, color-mix(in srgb, var(--ev-home, #be2430) 62%, transparent), transparent 76%),
        radial-gradient(200px 150px at 100% 62%, color-mix(in srgb, var(--ev-away, #f59440) 62%, transparent), transparent 76%),
        radial-gradient(320px 130px at 50% 118%, rgba(255, 108, 118, .2), transparent 74%),
        linear-gradient(180deg, rgba(22, 6, 10, .42), rgba(18, 4, 6, .1)),
        url('/assets/images/football-stadium-card.svg') center 46% / cover no-repeat,
        linear-gradient(165deg, #250a10 0%, #3d1016 42%, #6b1a12 100%);
}
.ev-card--nfl .ev-cover {
    background:
        radial-gradient(200px 150px at 0% 62%, color-mix(in srgb, var(--ev-home, #4669b8) 62%, transparent), transparent 76%),
        radial-gradient(200px 150px at 100% 62%, color-mix(in srgb, var(--ev-away, #c64925) 62%, transparent), transparent 76%),
        radial-gradient(320px 130px at 50% 118%, rgba(147, 180, 255, .2), transparent 74%),
        linear-gradient(180deg, rgba(5, 12, 26, .42), rgba(4, 10, 22, .1)),
        url('/assets/images/football-stadium-card.svg') center 46% / cover no-repeat,
        linear-gradient(165deg, #0a1428 0%, #14213d 42%, #1d3a66 100%);
}
.ev-card--nba .ev-cover {
    background:
        radial-gradient(200px 150px at 0% 62%, color-mix(in srgb, var(--ev-home, #e67330) 62%, transparent), transparent 76%),
        radial-gradient(200px 150px at 100% 62%, color-mix(in srgb, var(--ev-away, #2e5dae) 62%, transparent), transparent 76%),
        radial-gradient(320px 130px at 50% 118%, rgba(255, 182, 107, .2), transparent 74%),
        linear-gradient(180deg, rgba(24, 10, 4, .45), rgba(20, 8, 3, .12)),
        url('/assets/images/football-stadium-card.svg') center 46% / cover no-repeat,
        linear-gradient(165deg, #241109 0%, #3d1c0e 42%, #6b3415 100%);
}
.ev-card--voleibol .ev-cover {
    background:
        radial-gradient(200px 150px at 0% 62%, color-mix(in srgb, var(--ev-home, #1889a0) 62%, transparent), transparent 76%),
        radial-gradient(200px 150px at 100% 62%, color-mix(in srgb, var(--ev-away, #4f6dc6) 62%, transparent), transparent 76%),
        radial-gradient(320px 130px at 50% 118%, rgba(102, 219, 232, .2), transparent 74%),
        linear-gradient(180deg, rgba(4, 18, 26, .42), rgba(3, 14, 20, .1)),
        url('/assets/images/football-stadium-card.svg') center 46% / cover no-repeat,
        linear-gradient(165deg, #062430 0%, #0a3a4a 42%, #0f5f6b 100%);
}

/* Oferta X-Sports: mesma identidade violeta do cabeçalho e da vitrine. */
.sale__box{--sale-lime:#d69bff;border-color:#bd78ed80;background:#130d1f;box-shadow:0 30px 100px #000c,0 0 64px #a247dc3b}
.sale__box::before{background:linear-gradient(90deg,#7834b5,#dc9bff 48%,#8651d9 82%,#7834b5)}
.sale__hero{background:linear-gradient(100deg,#130b20ed 0%,#231034d9 45%,#36174dc4 100%),radial-gradient(ellipse at 78% 20%,#a24de073,transparent 60%),url('/assets/images/sale-popup-stadium.jpg') center 38%/cover no-repeat,#190e28}

/* ============================================================
   CONFRONTO EM DESTAQUE — paleta dos dois times no gramado
   ============================================================ */
.ev-card {
    --team-home: var(--ev-home, #1c6fd1);
    --team-home-alt: var(--ev-home-alt, #b9e3ff);
    --team-away: var(--ev-away, #ad2434);
    --team-away-alt: var(--ev-away-alt, #ffd1d8);
}

.ev-card .ev-cover {
    isolation: isolate;
    background:
        radial-gradient(125% 132% at -22% 104%, color-mix(in oklch, var(--team-home) 86%, transparent), transparent 58%),
        radial-gradient(125% 132% at 122% 104%, color-mix(in oklch, var(--team-away) 86%, transparent), transparent 58%),
        linear-gradient(90deg, color-mix(in oklch, var(--team-home) 42%, #07111b) 0%, rgba(7, 17, 27, .32) 43%, rgba(7, 17, 27, .32) 57%, color-mix(in oklch, var(--team-away) 42%, #07111b) 100%),
        linear-gradient(180deg, rgba(3, 10, 19, .24), rgba(3, 10, 19, .62)),
        url('/assets/images/football-stadium-card.svg') center 46% / cover no-repeat,
        #08111c;
    background-blend-mode: screen, screen, normal, normal, luminosity, normal;
}

/* Faixas de cor dão identidade ao confronto sem esconder o estádio. */
.ev-card .ev-cover::before {
    inset: 0;
    opacity: .82;
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--team-home-alt) 76%, transparent), transparent 24%, transparent 76%, color-mix(in oklch, var(--team-away-alt) 76%, transparent)),
        linear-gradient(90deg, transparent 49.55%, rgba(255,255,255,.72) 49.75%, rgba(255,255,255,.72) 50.25%, transparent 50.45%),
        repeating-linear-gradient(0deg, transparent 0 29px, rgba(255,255,255,.08) 30px 31px);
    mix-blend-mode: screen;
}

.ev-card .ev-cover::after {
    z-index: 0;
    opacity: .72;
    background: linear-gradient(108deg, transparent 37%, rgba(255,255,255,.23) 49%, rgba(255,255,255,.07) 52%, transparent 63%);
}

.ev-card .ev-cover__comp,
.ev-card .ev-cover__match { z-index: 1; }

/* Mantém o "VS" nítido: navegadores não devem transformar o texto em bloco de gradiente. */
.ev-card .ev-vs {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #f8fbff;
    color: #f8fbff;
    text-shadow: 0 2px 8px rgba(0,0,0,.76), 0 0 16px color-mix(in oklch, var(--team-home-alt) 40%, var(--team-away-alt));
    filter: none;
}

.ev-card .ev-crest:first-child {
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--team-home-alt) 82%, #fff), 0 0 0 6px color-mix(in oklch, var(--team-home) 42%, transparent), 0 14px 28px rgba(0,0,0,.56);
}
.ev-card .ev-crest:last-child {
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--team-away-alt) 82%, #fff), 0 0 0 6px color-mix(in oklch, var(--team-away) 42%, transparent), 0 14px 28px rgba(0,0,0,.56);
}

.ev-card .ev-card__body {
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--team-home) 20%, transparent), transparent 42%, color-mix(in oklch, var(--team-away) 20%, transparent)),
        #0a1017;
}
.ev-card .ev-card__body::before {
    width: 4px;
    background: linear-gradient(180deg, var(--team-home-alt), color-mix(in oklch, var(--team-home) 45%, var(--team-away) 55%), var(--team-away-alt));
}
.ev-card .ev-card__time {
    /* Horário segue o padrão global dos cards, independentemente das cores dos times. */
    color: var(--dzn-lime, #b6ff5c);
    font-family: var(--site-display, "Barlow Condensed", Inter, Arial, sans-serif);
    font-weight: 800;
    letter-spacing: .03em;
    text-shadow: 0 0 12px rgba(182, 255, 92, .3);
}
.ev-card:hover,
.ev-card:focus-visible {
    border-color: color-mix(in oklch, var(--team-home) 46%, var(--team-away));
    box-shadow: 0 18px 38px rgba(0,0,0,.54), 0 0 26px color-mix(in oklch, var(--team-home) 50%, var(--team-away));
}

@media (prefers-reduced-motion: reduce) {
    .ev-card .ev-cover::before { animation: none !important; transform: none; }
}
.sale__hero::before{background:linear-gradient(115deg,transparent 42%,#e8c3ff12 48%,#d795ff30 50%,#e8c3ff12 52%,transparent 58%)}
.sale__hero::after{border-color:#ddafff55;box-shadow:0 0 26px #c47cff40}
.sale__phone{background:linear-gradient(150deg,#8a66a4,#241832 48%,#090710);box-shadow:0 30px 60px #000b,0 0 0 1px #e9c9ff55,0 0 44px #af5de254}
.sale__screen{background:linear-gradient(180deg,#140d21,#271239);box-shadow:inset 0 0 25px #a457dc2c}
.sale__screen-tiles i{background:#c996eb28}
.sale__box h2 em{background:linear-gradient(180deg,#f6e7ff,#d69bff 62%,#a95be0);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px #b864ef77)}
.sale__price{color:#e2b2ff}
@keyframes dznPriceGlow{from{text-shadow:0 0 8px #b56de256}to{text-shadow:0 0 22px #c67af5a3,0 0 46px #a64bde57}}
.sale__cta{background:linear-gradient(180deg,#f3d9ff,#c885f2 64%,#aa5cdb);color:#1d0b2d;box-shadow:0 12px 34px #a754d369,0 0 0 1px #fff6 inset}
.sale__cta:hover,.sale__cta:focus-visible{box-shadow:0 18px 44px #ae5bd18c,0 0 0 1px #fff8 inset}
.sale__benefits{background:#180f25;border-top-color:#d293ef44}
.sale__benefits strong{color:#e3b2ff}
.sale__benefits li::before{background:linear-gradient(90deg,#d69bff,transparent)}
.sale__benefits li:hover{background:#d69bff13}

/* ── Renovação: peça promocional leve, sem autoplay ou áudio ── */
.renewal-promo{position:relative;display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.4fr);align-items:stretch;gap:0;min-height:230px;margin:0 0 22px;overflow:hidden;border:1px solid #bd78ed66;border-radius:20px;background:linear-gradient(115deg,#11091fe8,#211034ed 56%,#32154ddd),url('/assets/images/sale-popup-stadium.jpg') center/cover no-repeat;box-shadow:0 20px 55px #0006,0 0 38px #a754d326}
.renewal-promo::before{content:"";position:absolute;inset:-35%;background:linear-gradient(105deg,transparent 42%,#f1d8ff16 49%,#d69bff36 50%,#f1d8ff16 51%,transparent 58%);transform:translateX(-48%);animation:renewalPromoSweep 7s ease-in-out infinite;pointer-events:none}
.renewal-promo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 55%,#d69bff24,transparent 34%),linear-gradient(90deg,transparent 36%,#0a0611aa 100%);pointer-events:none}
.renewal-promo__visual,.renewal-promo__copy{position:relative;z-index:1}
.renewal-promo__visual{display:flex;align-items:center;justify-content:center;min-height:230px;overflow:hidden;background:radial-gradient(circle at 50% 52%,#d69bff2e,transparent 42%)}
.renewal-promo__score{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 25px;border:1px solid #ecd8ff44;border-radius:16px;background:#0d0719bd;box-shadow:inset 0 1px #fff2,0 16px 30px #0007;transform:translateY(0);animation:renewalPromoFloat 4s ease-in-out infinite}
.renewal-promo__score strong{font-family:var(--site-display,"Barlow Condensed",sans-serif);font-size:29px;letter-spacing:.06em;color:#fff;text-shadow:0 3px 14px #000;white-space:nowrap}
.renewal-promo__score>span:last-child{color:#e8ccff;font-size:11px;font-weight:800;letter-spacing:.09em;white-space:nowrap}
.renewal-promo__live{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:#a3142a;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em}
.renewal-promo__live i{width:7px;height:7px;border-radius:50%;background:#ff8290;box-shadow:0 0 0 4px #ff829033;animation:renewalPromoPulse 1.5s ease-in-out infinite}
.renewal-promo__ball{position:absolute;right:12%;bottom:-6px;font-size:68px;filter:drop-shadow(0 9px 12px #0009);animation:renewalPromoBall 5s ease-in-out infinite}
.renewal-promo__light{position:absolute;width:120px;height:120px;border-radius:50%;filter:blur(30px);opacity:.45;pointer-events:none}
.renewal-promo__light--one{top:-20px;left:10%;background:#bc70ff;animation:renewalPromoOrb 6s ease-in-out infinite}
.renewal-promo__light--two{right:8%;bottom:-35px;background:#5b87ff;animation:renewalPromoOrb 7s ease-in-out -2s infinite reverse}
.renewal-promo__copy{display:flex;flex-direction:column;justify-content:center;padding:30px 34px}
.renewal-promo__eyebrow{color:#d69bff;font-size:11px;font-weight:800;letter-spacing:.16em}
.renewal-promo__copy h2{max-width:520px;margin:7px 0 5px;font-family:var(--site-display,"Barlow Condensed",sans-serif);font-size:clamp(30px,4vw,48px);line-height:.98;letter-spacing:.01em;color:#fff;text-transform:uppercase}
.renewal-promo__copy p{max-width:560px;margin:0;color:#e0d8e7;font-size:14px;line-height:1.55}
.renewal-promo__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.renewal-promo__chips span{padding:7px 10px;border:1px solid #ffffff24;border-radius:999px;background:#fff1;color:#f7effc;font-size:11px;font-weight:700}
.renewal-promo__offer{margin-top:15px;color:#e7bdff;font-size:13px;letter-spacing:.02em}
.renewal-promo__cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:max-content;min-width:190px;min-height:42px;margin-top:13px;padding:0 18px;border:1px solid #ff9aa8;border-radius:11px;background:linear-gradient(180deg,#ff334c,#e5092d);box-shadow:0 10px 24px #e5092d42,0 0 0 1px #fff3 inset;color:#fff;font-size:14px;font-weight:800;text-decoration:none;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.renewal-promo__cta span{font-size:18px;line-height:1}
.renewal-promo__cta:hover,.renewal-promo__cta:focus-visible{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 30px #e5092d66,0 0 0 1px #fff5 inset}
.renewal-promo__cta:active{transform:translateY(0)}
@keyframes renewalPromoSweep{0%,28%{transform:translateX(-48%)}65%,100%{transform:translateX(48%)}}
@keyframes renewalPromoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes renewalPromoPulse{0%,100%{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes renewalPromoBall{0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}50%{transform:translate3d(-7px,-8px,0) rotate(8deg)}}
@keyframes renewalPromoOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-12px,0) scale(1.12)}}
@media(max-width:760px){
    .renewal-promo{grid-template-columns:1fr;min-height:0}
    .renewal-promo__visual{min-height:170px}
    .renewal-promo__copy{padding:22px 20px 24px}
    .renewal-promo__copy h2{font-size:36px}
    .renewal-promo__cta{width:100%}
    .renewal-promo__score{padding:16px 19px}
    .renewal-promo__score strong{font-size:25px}
    .renewal-promo__ball{right:11%;font-size:52px}
}
@media(prefers-reduced-motion:reduce){
    .renewal-promo::before,.renewal-promo__score,.renewal-promo__live i,.renewal-promo__ball,.renewal-promo__light{animation:none}
}
body.site-motion--off .renewal-promo::before,
body.site-motion--off .renewal-promo__score,
body.site-motion--off .renewal-promo__live i,
body.site-motion--off .renewal-promo__ball,
body.site-motion--off .renewal-promo__light{animation:none}