/*
 * As peças de campanha do site novo (26/10/2026, docs/vitrine/SITE-NOVO-SPEC.md, seção 5). Uma campanha tem um objeto
 * (arte sem texto, fundo transparente) e o site monta o resto na identidade Azulejo Lusa: fundo verde-floresta, azulejo
 * fraco atrás do texto, friso com as cores do logo, título em Barlow Condensed itálico. O texto é do site (muda sem refazer
 * a arte e acompanha o idioma). Formatos: destaque (23:5 no computador, 8:3 no celular), cartão (16:9) e janela (4:5).
 * Classes .cp-*.
 */
.cp { --verde: #00ff88; --amarelo: #ffd43b; --vermelho: #ff5a5a; --t2: #c7d2cb;
    --titulo: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --azulejo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2300ff88' stroke-width='1.6'%3E%3Cpath d='M0 26A26 26 0 0 0 26 0M74 0A26 26 0 0 0 100 26M100 74A26 26 0 0 0 74 100M26 100A26 26 0 0 0 0 74'/%3E%3Cpath d='M0 14A14 14 0 0 0 14 0M86 0A14 14 0 0 0 100 14M100 86A14 14 0 0 0 86 100M14 100A14 14 0 0 0 0 86'/%3E%3Crect x='31' y='31' width='38' height='38'/%3E%3Crect x='31' y='31' width='38' height='38' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3Cpath d='M50 0Q58 12 50 23Q42 12 50 0M100 50Q88 58 77 50Q88 42 100 50M50 100Q42 88 50 77Q58 88 50 100M0 50Q12 42 23 50Q12 58 0 50'/%3E%3C/g%3E%3C/svg%3E");
    position: relative; isolation: isolate; overflow: hidden; display: block; color: #fff !important; text-decoration: none;
    background: radial-gradient(90% 140% at 82% 55%, #0f3a28 0%, #0a2419 38%, #06120d 78%); border: 1px solid rgba(0, 255, 136, .16); }
.cp::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--azulejo); background-size: 64px 64px; opacity: .07;
    -webkit-mask-image: linear-gradient(90deg, #000 10%, transparent 62%); mask-image: linear-gradient(90deg, #000 10%, transparent 62%); }
.cp::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--vermelho) 0 50%, var(--amarelo) 50% 100%); }

.cp, .cp *, .cp *::before, .cp *::after { box-sizing: border-box; }

/* O objeto: à direita, com o chão de luz embaixo. */
.cp-objeto { position: absolute; z-index: -1; pointer-events: none; }
.cp-objeto img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(0, 255, 136, .16)); }
.cp-objeto::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 16%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 212, 59, .32), rgba(0, 255, 136, .1) 55%, transparent); filter: blur(6px); }

/* O texto. */
.cp-texto { position: relative; display: grid; align-content: center; justify-items: start; gap: 8px; height: 100%; }
.cp-kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); }
.cp-kicker b { color: #ff6b6b; letter-spacing: 0; text-transform: none; font-size: 13px; }
.cp-kicker b span { color: var(--amarelo); }
.cp-kicker i { display: block; width: 26px; height: 1px; background: var(--amarelo); }
.cp-titulo { margin: 0; font-family: var(--titulo); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.005em; text-wrap: balance; }
.cp-titulo em { font-style: italic; color: var(--amarelo); }
.cp-fato { margin: 0; color: var(--t2); line-height: 1.35; }
.cp-fato strong { color: #fff; font-weight: 700; }
.cp-prazo { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
    color: var(--amarelo); background: rgba(255, 212, 59, .12); border: 1px solid rgba(255, 212, 59, .35); }
.cp-botao { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
    font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #06120d; background: var(--verde); box-shadow: 0 0 26px rgba(0, 255, 136, .28); }
.cp:hover .cp-botao, .cp-botao:hover { background: #3dffa5; }
.cp:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }

/* ---------------------------------------------------------------- destaque (topo do início) */
.cp-destaque { border-radius: 16px; aspect-ratio: 23 / 5; }
.cp-destaque .cp-texto { padding: 0 44% 0 56px; gap: 10px; }
.cp-destaque .cp-titulo { font-size: clamp(34px, 3.6vw, 60px); }
.cp-destaque .cp-fato { font-size: 15px; max-width: 52ch; }
.cp-destaque .cp-objeto { right: 5%; top: 4%; bottom: 0; width: 34%; }
@media (max-width: 1023px) {
    .cp-destaque { aspect-ratio: 8 / 3; max-height: 340px; border-radius: 12px; }
    .cp-destaque .cp-texto { padding: 0 40% 0 20px; gap: 6px; }
    .cp-destaque .cp-kicker { font-size: 10px; gap: 6px; }
    /* No celular o nome da casa já está no cabeçalho: o rótulo fica só com o assunto (e o prazo). */
    .cp-destaque .cp-kicker b, .cp-destaque .cp-kicker i { display: none; }
    .cp-destaque .cp-titulo { font-size: clamp(22px, 7vw, 40px); }
    .cp-destaque .cp-fato { font-size: 11.5px; }
    .cp-destaque .cp-botao { height: 30px; padding: 0 14px; font-size: 11px; }
    .cp-destaque .cp-objeto { right: 1%; top: 6%; bottom: 0; width: 42%; }
}
@media (max-width: 420px) {
    .cp-destaque .cp-fato { display: none; }
}

/* ---------------------------------------------------------------- cartão ("Hoje na Lusa") */
.cp-cartao { border-radius: 14px; aspect-ratio: 4 / 3; }
.cp-cartao .cp-texto { align-content: end; padding: 16px 16px 16px 20px; gap: 6px; }
.cp-cartao .cp-titulo { font-size: 26px; max-width: 58%; }
.cp-cartao .cp-fato { font-size: 12.5px; max-width: 58%; }
.cp-cartao .cp-botao { height: 32px; padding: 0 14px; font-size: 11px; }
.cp-cartao .cp-objeto { right: -4%; top: 10%; height: 52%; width: 56%; }
.cp-cartao .cp-prazo { position: absolute; top: 12px; left: 20px; }
/* Na coluna da direita do computador o cartão fica mais baixo: cabem os 4 sem rolar muito. */
.sp-lateral .cp-cartao { aspect-ratio: 16 / 10; }
.sp-lateral .cp-cartao .cp-objeto { top: 8%; height: 58%; width: 48%; }

/* ---------------------------------------------------------------- janela (ao entrar, uma por visita) */
.cp-janela { width: min(400px, 100%); aspect-ratio: 4 / 5; border-radius: 22px; box-shadow: 0 40px 120px rgba(0, 0, 0, .7); }
.cp-janela::after { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 5px; background: linear-gradient(90deg, var(--vermelho) 0 50%, var(--amarelo) 50% 100%); }
.cp-janela::before { -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 60%); mask-image: linear-gradient(180deg, #000 10%, transparent 60%); }
.cp-janela .cp-objeto { left: 20%; right: 20%; top: 5%; height: 36%; }
.cp-janela .cp-texto { align-content: end; justify-items: center; text-align: center; padding: 0 26px 22px; gap: 10px; }
.cp-janela .cp-titulo { font-size: 36px; }
.cp-janela .cp-fato { font-size: 14px; max-width: 34ch; }
.cp-janela .cp-botao { width: 100%; height: 48px; font-size: 15px; }
.cp-janela .cp-agora-nao { background: none; border: 0; color: #9aa59f; font: inherit; font-size: 13px; cursor: pointer; padding: 4px; }
.cp-fechar { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(6, 18, 13, .6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .cp-botao { transition: none; } }

/* ---------------------------------------------------------------- no início */
/* O destaque no carrossel do início: a mesma peça, no lugar do banner. */
.ni-carrossel-campanhas .cp-destaque { flex: 0 0 100%; scroll-snap-align: center; }
@media (max-width: 1023px) { .ni-carrossel-campanhas .ni-car-trilho { gap: 8px; } .ni-carrossel-campanhas .cp-destaque { flex-basis: 90%; } }
.cp-titulo, .cp-fato, .cp-kicker { display: block; }
.cp-kicker { display: flex; }

/* "Hoje na Lusa": no meio (abaixo de 1360 px; no celular rola para o lado) e na coluna da direita do computador largo. */
.ni-hoje { display: grid; gap: 12px; margin: 26px 0 8px; }
.ni-hoje-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ni-hoje-cab h2 { margin: 0; font-size: 18px; font-weight: 800; color: #fff; }
.ni-hoje-cab a { font-size: 13px; font-weight: 700; color: #00ff88; text-decoration: none; }
.ni-hoje-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1023px) {
    .ni-hoje-grade { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .ni-hoje-grade::-webkit-scrollbar { display: none; }
    .ni-hoje-grade > * { scroll-snap-align: start; }
}
.ni-hoje-lateral { margin: 0; }
.ni-hoje-lateral .ni-hoje-grade { grid-template-columns: 1fr; }
@media (min-width: 1360px) { .sp-com-lateral .ni-hoje-meio { display: none; } }

/* As portas no celular da vitrine: 6 à vista (3 fileiras de 2) e o resto em "Todos os produtos". */
.ni-portas-todas { display: none; }
@media (max-width: 760px) {
    .ni-portas-vitrine > .ni-porta:nth-child(n+7) { display: none; }
    .ni-portas-vitrine.ni-portas-abertas > .ni-porta:nth-child(n+7) { display: flex; }
    .ni-portas-todas { display: flex; justify-content: center; margin: 10px 0 0; }
    .ni-portas-todas button { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
    .ni-portas-todas[hidden] { display: none; }
}

/* A janela de campanha sobre a página. */
.cp-janela-fundo { position: fixed; inset: 0; z-index: 1290; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(5, 9, 7, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: cp-entrar .25s ease-out; }
.cp-janela-fundo[hidden] { display: none; }
html.cp-janela-aberta, html.cp-janela-aberta body { overflow: hidden; }
.cp-janela .cp-botao { text-decoration: none; }
@keyframes cp-entrar { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cp-janela-fundo { animation: none; } }

/* ---------------------------------------------------------------- Promoções e novidades e a página da campanha */
.cp-lista-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1023px) { .cp-lista-grade { grid-template-columns: 1fr; } .cp-lista-grade .cp-cartao { aspect-ratio: 16 / 9; } }
.cp-secao { margin: 26px 0 12px; font-size: 18px; font-weight: 800; color: #fff; }
.cp-novidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1023px) { .cp-novidades { grid-template-columns: 1fr; } }
.cp-novidade { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: #1b1f24; border: 1px solid #2a3037; color: #fff !important; text-decoration: none; }
.cp-novidade b { display: block; font-size: 15px; }
.cp-novidade span span { color: #9aa59f; font-size: 13px; }
.cp-novidade-icone { flex: none; }
.cp-pagina { max-width: 1180px; margin: 0 auto; padding: 18px 16px 120px; display: grid; gap: 18px; color: #fff; }
.cp-heroi { aspect-ratio: auto; min-height: 280px; }
.cp-heroi .cp-texto { padding: 32px 44% 32px 56px; }
@media (max-width: 1023px) {
    .cp-heroi { min-height: 340px; max-height: none; }
    .cp-heroi .cp-texto { align-content: end; padding: 18px 20px; }
    .cp-heroi .cp-objeto { left: 30%; right: 4%; top: 4%; bottom: auto; height: 52%; width: auto; }
    .cp-heroi .cp-fato { display: block; font-size: 13px; }
}
.cp-fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cp-fato-caixa { background: #15241d; border: 1px solid #2f5c47; border-radius: 12px; padding: 12px; }
.cp-fato-caixa span { display: block; font-size: 12px; color: #9fc5b1; }
.cp-fato-caixa b { font-size: 17px; }
.cp-bloco { background: #1b1f24; border: 1px solid #2a3037; border-radius: 16px; padding: 18px; }
.cp-bloco h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.cp-bloco ul { margin: 0; padding-left: 18px; color: #b9bec5; font-size: 14px; line-height: 1.6; }
.cp-pe { position: sticky; bottom: 70px; display: none; }
@media (max-width: 1023px) { .cp-pe { display: block; } .cp-pe .cp-botao { display: flex; width: 100%; height: 48px; background: #00ff88; color: #06120d; box-shadow: 0 0 26px rgba(0, 255, 136, .28); } }
.cp-pe .cp-botao, .cp-heroi .cp-botao { text-decoration: none; }
.cp-terminou { color: #b9bec5; }
.cp-terminou a { color: #00ff88; }

/* ---------------------------------------------------------------- nos espaços das outras páginas (lusa-banners.js, estilo "campanha") */
.lb .cp { margin: 0; }
/* O espaço desenha cada peça num slide em flex (lusa-banners.css, esportes.css): a peça ocupa a largura toda. */
.lb-slide > .cp, .sp-vit-rico > .cp { flex: 1 1 auto; min-width: 0; width: 100%; }
.sp-vit-rico > .cp { border: 0; border-radius: 0; }
.cp-largo { aspect-ratio: 5 / 1; max-height: 200px; border-radius: 14px; }
.cp-largo .cp-texto { padding: 0 44% 0 40px; gap: 6px; }
.cp-largo .cp-titulo { font-size: clamp(26px, 2.6vw, 40px); }
.cp-largo .cp-fato { font-size: 13px; }
.cp-largo .cp-botao { height: 34px; padding: 0 16px; font-size: 12px; }
.cp-largo .cp-objeto { right: 6%; top: 4%; bottom: 0; width: 26%; }
@media (max-width: 1023px) {
    .cp-largo { aspect-ratio: 8 / 3; }
    .cp-largo .cp-texto { padding: 0 40% 0 20px; }
    .cp-largo .cp-objeto { right: 1%; width: 42%; }
    .cp-largo .cp-titulo { font-size: clamp(22px, 7vw, 34px); }
}
@media (max-width: 420px) { .cp-largo .cp-fato { display: none; } }
.cp-16x9 { aspect-ratio: 16 / 9; }
.cp-16x9 .cp-titulo { font-size: 24px; }
.cp-baixo { display: flex; align-items: center; min-height: 72px; border-radius: 12px; }
.cp-baixo .cp-objeto { position: relative; flex: none; width: 64px; height: 64px; margin-left: 14px; }
.cp-baixo .cp-objeto::after { display: none; }
.cp-baixo .cp-texto { display: flex; align-items: center; gap: 12px; padding: 8px 14px; flex: 1; }
.cp-baixo .cp-kicker { display: none; }
.cp-baixo .cp-titulo { font-size: 20px; flex: 1; }
.cp-baixo .cp-botao { height: 32px; padding: 0 14px; font-size: 11px; }

/* ---------------------------------------------------------------- onde o público está (26/10/2026) */
/* Depois da aposta: um cartão baixo, acima da barra de baixo no celular e no canto no computador. */
.cp-depois { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.cp-depois[hidden] { display: none; }
.cp-depois .lb { margin: 0; }
.cp-depois .cp { box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
.cp-depois-fechar { position: absolute; z-index: 2; top: -10px; right: -6px; width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2); background: #0f1114; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
@media (min-width: 1024px) { .cp-depois { left: auto; right: 24px; bottom: 24px; width: 400px; } }
/* Topo de Minhas apostas e o jogo do FIFA: a peça larga. */
.nk-banner .lb { margin: 0 0 16px; }
.nj-banner .lb { margin: 16px 0 0; }