:root { color-scheme: dark; --primary:#d20000; --bg:#000000; --fg:#FFFFFF; --accent:#FFCC00; --radius:24px; }
* { box-sizing: border-box; }
/* Quem edita escreve o texto que quiser, e o português tem palavras longas.
   Uma manchete com "responsabilidade" a 36px desenhava-se 47px para fora da
   sua caixa — a caixa mantinha a largura certa, mas a página ganhava scroll
   horizontal em telemóvel e não havia elemento nenhum a que culpar.
   O break-word só parte a palavra quando ela não cabe de todo; texto normal
   fica exatamente como estava. */
h1, h2, h3, h4, p, li, summary, blockquote, figcaption, a, .stat { overflow-wrap:break-word; }
/* Saltos suaves para as âncoras internas — a seta do hero e os botões que
   apontam para uma secção desta mesma página. Desligado para quem pediu menos
   movimento no sistema. */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
html, body { margin:0; padding:0; }
body { background:var(--bg); color:var(--fg); font-family:Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
/* O topo da página encosta ao vídeo do hero: sem margens no <main> nem no
   primeiro bloco, para nunca aparecer a faixa preta acima do vídeo. */
main { display:block; margin:0; padding:0; }
main > :first-child { margin-top:0; }
.herovideo { margin-top:0; }
h1,h2,h3 { font-family:Oswald, system-ui, sans-serif; font-weight:900; letter-spacing:-0.02em; line-height:1.02; margin:0; text-transform:uppercase;font-style:italic; }
h1 { font-size:clamp(36px,6vw,84px); }
h2 { font-size:clamp(30px,4.5vw,68px); }
h3 { font-size:19px; text-transform:uppercase; }
p { margin:0; }
a { color:inherit; }
/* Num monitor grande, 1152px fixos deixavam o conteúdo apertado ao centro com
   as laterais vazias. A largura e o respiro passam a crescer com o ecrã, com
   tectos para as linhas de texto não ficarem largas demais para se lerem. */
.wrap { max-width:clamp(1152px,88vw,1600px); margin:0 auto; padding:clamp(64px,6vw,140px) clamp(20px,3vw,56px); }
.center { text-align:center; }
.hero { background:radial-gradient(60% 55% at 50% 0%, #d2000026 0%, transparent 70%); }
.eyebrow { color:var(--primary); font-family:Oswald, system-ui, sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; margin-bottom:16px; }
.lead { opacity:.72; font-size:clamp(16px,1.4vw,26px); max-width:clamp(680px,56vw,980px); margin:clamp(18px,1.8vw,34px) auto 0; }
.proof { opacity:.45; font-size:11px; letter-spacing:.25em; text-transform:uppercase; margin-top:30px; }
.ctarow { margin-top:36px; }
.cta { display:inline-block; background:var(--accent); color:var(--bg); padding:clamp(15px,1.3vw,24px) clamp(28px,2.6vw,54px); font-size:clamp(15px,1.25vw,22px); border-radius:16px; font-family:Oswald, system-ui, sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; transition:filter .15s ease, transform .15s ease; }
.cta:hover { filter:brightness(.95); transform:translateY(-1px); }
.linkhead { font-size:clamp(20px,2.2vw,30px); }
.linkrow { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; margin-top:32px; }
.linkbtn { display:inline-flex; align-items:center; gap:10px; }
.linkbtn .linkico { display:inline-flex; }
/* Cada badge fica numa moldura de tamanho igual, para as lojas ficarem
   exatamente com a mesma dimensão e cantos, seja qual for a imagem. */
.storebadge { display:inline-flex; align-items:center; justify-content:center; height:54px; width:180px; border-radius:10px; overflow:hidden; }
.storebadge img { height:100%; width:100%; object-fit:contain; display:block; }
.ctabox { background:linear-gradient(135deg, #d20000 0%, #d20000cc 100%); border-radius:34px; padding:64px 24px; }
.card { background:#FFFFFF0d; border:1px solid #FFFFFF1a; border-radius:var(--radius); padding:28px; }
.card p { opacity:.7; font-size:14px; margin-top:12px; }
.card footer { margin-top:20px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--primary); }
.num { width:48px; height:48px; border-radius:999px; background:var(--primary); color:var(--fg); display:flex; align-items:center; justify-content:center; font-family:Oswald, system-ui, sans-serif; font-weight:900; font-size:18px; margin-bottom:20px; }
/* Este campo é pensado para um número ("98%", "10.000"), mas quem edita pode
   escrever uma frase — e a 48px fixos ela não cabia. Como as células de uma
   grelha não encolhem abaixo do seu conteúdo, a coluna esticava-se e a página
   inteira ganhava scroll horizontal em telemóvel. Tamanho fluido, e palavras
   compridas passam a poder partir. */
.stat { font-family:Oswald, system-ui, sans-serif; font-weight:900; font-size:clamp(28px,6vw,48px); color:var(--accent); overflow-wrap:anywhere; text-transform:uppercase;font-style:italic; }
.grid3 { display:grid; gap:24px; margin-top:56px; }
/* min-width:0 desarma o mínimo automático das células: sem isto, qualquer
   conteúdo largo (uma palavra comprida, uma imagem) alarga a coluna em vez de
   se ajustar a ela, e leva a página atrás. */
.grid3 > *, .stack > * { min-width:0; }
.stack { display:grid; gap:20px; margin-top:56px; }
.faq { display:grid; gap:12px; margin-top:48px; max-width:768px; margin-left:auto; margin-right:auto; }
.faq summary { cursor:pointer; list-style:none; font-family:Oswald, system-ui, sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
@media (min-width:768px) { .grid3 { grid-template-columns:repeat(3,1fr); } }
.alignleft .center { text-align:left; }
.alignleft .lead { margin-left:0; }
.nopad .wrap { padding-top:0; padding-bottom:0; }
.iconrow { display:flex; justify-content:center; margin-bottom:12px; }
.card.nopad { padding:0; overflow:hidden; }
.cardbody { padding:28px; }
.hl { color:var(--primary); font-family:Oswald, system-ui, sans-serif; font-weight:900; font-size:1.4em; line-height:1; }
.hlbig { display:block; margin-top:6px; color:var(--primary); font-family:Oswald, system-ui, sans-serif; font-weight:900; font-size:clamp(34px,4.6vw,56px); line-height:1.05; text-transform:uppercase;font-style:italic; }
.bonuscard .hl, .bonuscard .hlbig { color:#0B0B0B; }
.itemimg.wide { display:block; width:100%; height:160px; object-fit:cover; }
.itemimg.round { display:block; width:96px; height:96px; border-radius:999px; object-fit:cover; margin:0 auto 16px; }
.brandbar { display:flex; align-items:center; padding:22px 24px; max-width:1152px; margin:0 auto; }
.brandbar--left { justify-content:flex-start; }
.brandbar--center { justify-content:center; }
.brandbar--right { justify-content:flex-end; }
/* Logótipo sobreposto ao hero de vídeo: o vídeo cola ao topo e o logo flutua
   por cima, sem faixa preta. */
.brandbar--overlay { position:absolute; top:0; left:0; right:0; z-index:30; margin:0 auto; pointer-events:none; }
.brandbar--overlay img { pointer-events:auto; }
/* A altura do logótipo é uma escolha do Design, não um valor fixo: um lockup
   largo e um símbolo quadrado não se lêem bem à mesma altura. "m" é o que
   sempre esteve aqui, para nenhum site publicado mudar sozinho. */
.brandbar img { height:clamp(58px,6.2vw,104px); width:auto; }
footer.site { text-align:center; padding:48px 24px; opacity:.45; font-size:12px; }
.site-footer { border-top:1px solid #FFFFFF14; margin-top:40px; }
/* O risco de topo na cor da campanha. É um pseudo-elemento e não a borda
   porque o do Mundial esbate-se nas pontas, e uma borda não faz degradados.
   A borda desaparece para os dois não se somarem. */
.site-footer.friscocor { position:relative; border-top-color:transparent; }
/* Um fio de 1px em cor sólida perde-se num fundo preto. O halo por baixo é o
   que o faz ler, e é o mesmo truque do rodapé do Mundial. */
.site-footer.friscocor::before { content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(to right, transparent, #d20000, transparent);
  box-shadow:0 0 24px 2px #d2000040; }
.site-footer.frisconenhum { border-top-color:transparent; }
.site-footer .wrap { padding-block:56px; }
.site-footer .fbrand { font-family:Oswald, system-ui, sans-serif; font-weight:900; font-size:22px; text-transform:uppercase;font-style:italic; }
.site-footer .fbrandimg { display:block; width:auto; height:96px; object-fit:contain; }
.site-footer.fcentro { text-align:center; }
.site-footer.fcentro .fbrandimg { margin-inline:auto; }
.site-footer.fcentro .lead { margin-inline:auto; }
.site-footer .fgrid { display:grid; gap:28px; margin-top:32px; }
@media (min-width:768px) { .site-footer .fgrid { grid-template-columns:repeat(3,1fr); } }
.site-footer .fcol h4 { font-family:Oswald, system-ui, sans-serif; font-size:13px; letter-spacing:.15em; text-transform:uppercase; margin:0 0 8px; opacity:.9; }
.site-footer .fcol p { opacity:.6; font-size:13px; white-space:pre-line; }
.site-footer .fcol span, .site-footer .fcol a { display:block; opacity:.6; font-size:13px; margin-bottom:6px; text-decoration:none; }
.site-footer .fcol .plus18row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.site-footer .fcol .plus18row .plus18 { opacity:1; margin:0; line-height:0; flex:none; }
.site-footer .fcol .plus18txt { display:inline; opacity:.6; font-size:13px; margin:0; text-transform:uppercase; letter-spacing:.08em; }
/* Um link dentro de uma linha de texto continua na linha. Sem isto herdava o
   display:block de cima e cada telefone e cada email saltava para a sua. */
.site-footer .fcol span a { display:inline; margin:0; opacity:1; text-decoration:underline; text-underline-offset:2px; text-decoration-color:#FFFFFF59; }
.site-footer .fcol a:hover { opacity:1; text-decoration:underline; }
.site-footer .fcol span a:hover { text-decoration-color:currentColor; }
.site-footer .lead { margin-left:0; font-size:13px; opacity:.6; max-width:none; margin-top:16px; line-height:1.6; }
.site-footer .fnote { opacity:.4; font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin-top:32px; text-align:center; }
.site-footer .fnoterow { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; opacity:.4; font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin-top:12px; }
.site-footer .fnoterow span:last-child { text-align:right; }

/* CTA em duas colunas: marca à esquerda, mensagem à direita ------------ */
.ctasplit { display:flex; flex-direction:column; align-items:center; gap:clamp(28px,3vw,56px); text-align:center; }
/* Esta secção é baixa — logótipo e texto lado a lado — mas herdava a mesma
   folga vertical das secções altas, e ficava a boiar longe das vizinhas.
   Metade chega para a separar sem a isolar. */
.wrap.ctasplit { padding-block:clamp(24px,2vw,40px); }
.ctasplit-marca img { display:block; width:auto; height:clamp(110px,11vw,200px); object-fit:contain; }
/* O contentor está em coluna com align-items:center, por isso este item toma a
   largura do seu conteúdo em vez de se ajustar à caixa — e num ecrã de 320px
   ficava 51px mais largo do que o espaço disponível. O min() prende-o ao
   contentor sem lhe tirar o limite de leitura nos ecrãs grandes. */
.ctasplit-texto { max-width:min(640px,100%); min-width:0; }
.ctasplit-texto .lead { margin-inline:auto; }
@media (min-width:820px) {
  .ctasplit { flex-direction:row; align-items:center; justify-content:center; text-align:left; }
  .ctasplit-marca { flex:0 0 auto; }
  .ctasplit-texto { flex:1 1 auto; max-width:640px; }
  .ctasplit-texto .lead { margin-inline:0; }
  .ctasplit-texto .ctarow { margin-top:clamp(24px,2vw,36px); }
}

/* Marca própria de um bloco de CTA (ex.: o logótipo da Fantasy) -------- */
.ctamark { display:block; width:auto; height:clamp(84px,7vw,132px); margin:0 auto clamp(20px,2vw,32px); object-fit:contain; }

/* Botão fixo de conversão -------------------------------------------- */
/* O espaço que impede o botão fixo de tapar as últimas linhas vive DENTRO do
   rodapé, não a seguir ao corpo. Como padding do body, ficavam 104px de vazio
   depois do conteúdo acabar: em telemóvel dava para continuar a rolar sobre
   nada, e lia-se como se a página estivesse partida. */
body:has(.floatcta) .site-footer .wrap { padding-bottom:112px; }
body:has(.floatcta) footer.site { padding-bottom:112px; }
/* As cores do botão fixo vêm de variáveis, com fallback para o design. O
   elemento sobrepõe-nas inline quando o utilizador escolhe uma cor. */
.floatcta { --fc-bg:#d20000; --fc-accent:#FFCC00; --fc-text:#fff;
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:50;
  display:inline-block; padding:16px 40px; border-radius:999px; white-space:nowrap;
  background:var(--fc-bg); color:var(--fc-text); text-decoration:none;
  font-family:Oswald, system-ui, sans-serif; font-weight:700; font-size:16px; letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:0 18px 40px -12px var(--fc-bg); transition:transform .2s, filter .2s; }
.floatcta:hover { transform:translateX(-50%) scale(1.05); filter:brightness(1.1); }
/* O mesmo brilho pulsante do site do Mundial: a sombra abre e fecha e um
   reflexo atravessa o botão. Chama a atenção sem o pôr a saltar, que num
   elemento sempre presente cansaria depressa. */
.floatcta { background-image:linear-gradient(100deg, var(--fc-bg) 0%, var(--fc-bg) 38%, color-mix(in srgb, var(--fc-accent) 35%, transparent) 50%, var(--fc-bg) 62%, var(--fc-bg) 100%);
  background-size:250% 100%; animation:floatglow 3.2s ease-in-out infinite; }
@keyframes floatglow {
  0%   { box-shadow:0 0 18px color-mix(in srgb, var(--fc-bg) 35%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--fc-bg) 45%, transparent); background-position:-150% 0; }
  50%  { box-shadow:0 0 44px color-mix(in srgb, var(--fc-accent) 55%, transparent), 0 0 90px color-mix(in srgb, var(--fc-bg) 35%, transparent), 0 10px 30px -6px color-mix(in srgb, var(--fc-bg) 50%, transparent); }
  100% { box-shadow:0 0 18px color-mix(in srgb, var(--fc-bg) 35%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--fc-bg) 45%, transparent); background-position:250% 0; }
}
@media (prefers-reduced-motion:reduce) { .floatcta { animation:none; } }
/* Escondido até o visitante passar o marco. A classe é posta pelo script; sem
   ele o botão fica à vista, que é o pior-caso aceitável para um apelo à ação. */
.floatcta-oculto { opacity:0; pointer-events:none; transform:translate(-50%,16px); }
@media (max-width:480px) { .floatcta { padding:14px 32px; font-size:15px; } }

/* Seta de "continua a ler" ------------------------------------------- */
/* Posicionada em relação à secção, por isso o contentor precisa de ser um
   ponto de referência — as secções normais são estáticas por omissão. */
.secwrap { position:relative; }
.scrollcue { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:10;
  display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
  border:1px solid #FFFFFF4d; background:#FFFFFF1a; color:#FFFFFF;
  backdrop-filter:blur(6px); transition:background .2s, transform .2s; animation:cuebounce 2s infinite; }
.scrollcue:hover { background:#FFFFFF33; }
@keyframes cuebounce { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,-8px); } }
@media (prefers-reduced-motion:reduce) { .scrollcue { animation:none; } }

/* Hero com vídeo de fundo ------------------------------------------- */
.herovideo { position:relative; isolation:isolate; display:flex; align-items:center; min-height:100svh; overflow:hidden; }
.herobg { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.herovid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
/* An iframe cannot be object-fit, so it is sized to always overflow 16:9. */
iframe.herovid { top:50%; left:50%; inset:auto; width:177.78vh; height:56.25vw; min-width:100%; min-height:100%; transform:translate(-50%,-50%); }
.heroscrim { position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, var(--bg) 0%, #0000004d 45%, transparent 100%); pointer-events:none; }
/* Mais largo que o .wrap do resto da página: no hero o lockup e o cartão
   devem respirar para as laterais, em vez de ficarem agrupados ao centro. */
/* Em telemóvel o lockup e o cartão empilham-se: com as medidas de ecrã largo
   somavam mais de 600px de altura e não sobrava vídeo nenhum à vista, que é
   justamente o que o hero existe para mostrar. Aqui ficam contidos, e a media
   query de 768px repõe as medidas grandes assim que passam a estar lado a lado. */
/* Em telemóvel o lockup e o cartão empilham-se e as medidas têm de ser
   contidas, senão não sobra vídeo à vista. A partir dos 768px ficam lado a
   lado, a altura deixa de somar, e passam a crescer com a largura do ecrã em
   vez de pararem num valor fixo — num monitor grande, um lockup de 400px e um
   cartão de 420px ficavam perdidos no meio do vídeo. */
/* Em telemóvel o lockup e o cartão empilham-se e os 20px que aqui estavam
   liam-se como se fossem uma peça só. 48px separa-os de facto, e continua a
   sobrar vídeo à vista por baixo. */
.heroinner { display:flex; flex-direction:column; align-items:center; gap:48px; width:100%; max-width:1560px; margin:0 auto; padding:56px 20px; }
/* A largura de sempre multiplicada pela escala que o bloco escolher. Uma
   largura única não servia: à mesma medida, uma barra deitada quase 3:1
   desenha-se com um terço da altura de um lockup quadrado. */
.herolockup img { display:block; width:100%; max-width:calc(210px * var(--lock,1)); height:auto; }
.herocard { background:#d20000e6; border-radius:32px; padding:32px 24px; width:100%; max-width:380px; box-shadow:0 40px 90px -30px #d20000b3; text-align:center; }
.herocard h1 { font-size:clamp(22px,5.2vw,38px); line-height:1.05; margin-top:24px; }
.herocard .lead { opacity:.9; font-size:15px; }
.herocard .cta { display:block; width:100%; border-radius:16px; margin-top:32px; }
/* Fecho do cartão: o checkbox fica escondido e o label é o X. Sem JavaScript,
   por isso o comportamento sobrevive aos ficheiros publicados por FTP. */
.herocard { position:relative; }
.herocardx { position:absolute; top:16px; right:16px; display:grid; place-items:center;
  width:32px; height:32px; border-radius:999px; background:#FFFFFF33; color:#FFFFFF;
  cursor:pointer; transition:background .2s; }
.herocardx:hover { background:#FFFFFF4d; }
.herocardx:focus-visible { outline:2px solid #FFFFFF; outline-offset:2px; }
.hcx:checked + .herocard { display:none; }
@media (min-width:768px) {
  /* Proporções medidas na página do Mundial: o lockup ocupa cerca de 15% da
     largura e o cartão cerca de 21%, ambos encostados às margens. Com o
     conteúdo limitado a 1560px e centrado, sobrava uma calha vazia dos dois
     lados que os afastava das bordas — daí o max-width:none. */
  /* O afastamento das laterais vive só aqui, no contentor, para o lockup e o
     cartão ficarem à MESMA distância das bordas. Estava um margin-right extra
     no cartão que o empurrava para dentro e desalinhava os dois. */
  .heroinner { flex-direction:row; align-items:center; justify-content:space-between; gap:clamp(24px,3vw,56px); padding:clamp(72px,7vw,120px) clamp(24px,3.4vw,96px); max-width:none; }
  .herolockup img { max-width:calc(clamp(260px,21vw,540px) * var(--lock,1)); }
  /* Trocar o lado é trocar a ordem da fila, não empurrar com margens: o
     espaço entre os dois continua a ser o mesmo gap, e as bordas continuam
     à mesma distância das laterais. Só em ecrã largo — em telemóvel a fila
     é uma coluna e o lockup fica sempre por cima. */
  .heroinner.lockdir { flex-direction:row-reverse; }
  .herocard { margin-left:auto; max-width:clamp(340px,26vw,560px); padding:clamp(32px,2.8vw,52px) clamp(28px,2.4vw,48px); }
  /* O mínimo acompanha o cartão, não é um valor solto. Aos 768px o cartão
     passa de 380px para 340px (-10%) e o título vinha de 38px para 28px
     (-26%): alargava-se o ecrã e a manchete encolhia, e só voltava aos 38px
     lá para os 1400px. 34px é a mesma proporção do cartão. */
  .herocard h1 { font-size:clamp(34px,2.7vw,54px); }
  .herocard .lead { font-size:clamp(15px,1.3vw,24px); margin-top:clamp(14px,1.4vw,28px); }
  .herocard .cta { padding:clamp(14px,1.3vw,24px) clamp(20px,1.9vw,40px); font-size:clamp(14px,1.2vw,21px); }
}
/* Havia aqui um padding-inline:72px fixo que se sobrepunha ao valor fluido
   acima e afastava o lockup e o cartão das margens justamente nos ecrãs onde
   se queria o contrário. O valor fluido já cobre esta largura. */

/* Filme ------------------------------------------------------------- */
.filmewrap { position:relative; margin:clamp(32px,3vw,70px) auto 0; max-width:clamp(960px,80vw,1560px); aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#000; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.filmemedia { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
/* Um vídeo em ficheiro traz a sua própria proporção, e raramente é 16/9 —
   um filme de campanha costuma ser mais largo. Preso a uma caixa de 16/9
   ficava com barras pretas em cima e em baixo, ou perdia as pontas ao cortar.
   Aqui a caixa segue o vídeo em vez do contrário. O YouTube fica na caixa
   fixa, porque um iframe não tem proporção própria para revelar. */
.filmewrap.filmefile { aspect-ratio:auto; }
.filmewrap.filmefile .filmemedia { position:static; width:100%; height:auto; display:block; object-fit:contain; }
/* Vídeo sozinho na secção: sem texto por cima, a folga de topo e a margem do
   vídeo não separam nada — só empilham preto sobre o fundo da secção anterior. */
.filmenu { padding-top:clamp(16px,1.5vw,32px); }
.filmenu .filmewrap { margin-top:0; }
/* O ctarow fica sempre no HTML, mesmo sem botão. Vazio, o gap do flex ainda
   contava, deixando uma faixa morta debaixo do vídeo. */
.filmenu .ctarow:empty { display:none; }

/* Passos sobre imagem (bónus) --------------------------------------- */
/* O fundo fica preso enquanto a secção passa, dando a mesma sensação de
   profundidade que o parallax do Mundial — mas sem depender de JS, para o
   efeito sobreviver aos ficheiros publicados por FTP. Em ecrãs de toque fica
   desligado: o iOS ignora background-attachment e o resultado seria um salto. */
.bonus { position:relative; isolation:isolate; background-size:cover; background-position:center; }
/* Entrada dos cartões: sobem e aparecem quando a secção entra no ecrã, com um
   desfasamento entre eles. O estado escondido só é aplicado quando o script
   marca o documento — sem ele, nada fica invisível à espera de JavaScript que
   pode nunca correr. */
.reveal { transition:opacity .7s ease-out, transform .7s ease-out; transition-delay:var(--reveal-delay,0ms); display:flex; }
.js-reveal .reveal:not(.reveal-on) { opacity:0; transform:translateY(40px); }
@media (prefers-reduced-motion:reduce) {
  .reveal { transition:none; }
  .js-reveal .reveal:not(.reveal-on) { opacity:1; transform:none; }
}

/* Camadas de fundo em ciclo. Cada uma passa 1/n do tempo visível e desvanece
   nas pontas, por isso duas nunca aparecem a cheio ao mesmo tempo. */
.bonuslayers { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.bonuslayer { position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; animation-name:bonusfade; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
/* O desvanecer de uma começa onde a seguinte entra (33% do ciclo, que é
   exactamente o atraso entre camadas), senão haveria um instante com todas
   invisíveis e o fundo da secção aparecia por baixo. */
@keyframes bonusfade {
  0%    { opacity:0; }
  5%    { opacity:1; }
  33%   { opacity:1; }
  38%   { opacity:0; }
  100%  { opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
  .bonuslayer { animation:none; }
  .bonuslayer:first-child { opacity:1; }
}
@media (hover:hover) and (min-width:768px) and (prefers-reduced-motion:no-preference) {
  .bonus { background-attachment:fixed; }
}
/* Véu mais fechado do que o do fundo único: estas imagens são key visuals
   com texto e logótipos já lá dentro, e sem isto o "vamos todos a jogo" da
   imagem competia com o título da secção. Não resolve tudo — ver LEIA-ME. */
.bonusscrim { position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, var(--bg) 0%, #000000a6 28%, #000000a6 72%, var(--bg) 100%); }
.bonusinner h2 { font-size:clamp(34px,5.5vw,78px); }
.bonusinner .eyebrow { color:#FFFFFFb3; margin:14px 0 0; }
.bonusgrid { display:grid; gap:clamp(16px,1.3vw,26px); margin:clamp(40px,4vw,72px) auto 0; max-width:clamp(880px,66vw,1240px); }
@media (min-width:768px) { .bonusgrid { grid-template-columns:repeat(3,1fr); } }
/* Medidas e comportamento copiados do cartão da página do Mundial. O amarelo
   assenta a 90% sobre o fundo, com desfoque por trás — é isso que o faz ler
   como mais escuro em repouso. Ao passar o rato sobe, a sombra abre e a cor
   fecha para 100%, ficando mais clara; ao sair, volta ao tom mais escuro.
   A transição fica no cartão e não no :hover, senão o regresso era seco. */
/* O conteúdo encosta ao topo, não ao centro. Centrado, cada cartão punha o
   seu título a uma altura diferente — quem tivesse o texto mais comprido
   subia — e os três títulos de uma fila nunca começavam na mesma linha.
   Media-se 32px de desvio entre o primeiro e o terceiro. Com o ícone de
   altura fixa acima, encostar ao topo põe todos a arrancar no mesmo sítio. */
.bonuscard { position:relative; background:#FFCC00e6; backdrop-filter:blur(4px); color:#0B0B0B; border-radius:26px; padding:clamp(34px,2.6vw,46px) clamp(20px,1.8vw,34px) clamp(26px,2vw,36px); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:clamp(14px,1.1vw,20px); min-height:clamp(210px,15vw,290px); width:100%;
  box-shadow:0 30px 60px -25px #FFCC0080;
  transition:transform .3s ease-out, box-shadow .3s ease-out, background-color .3s ease-out; }
.bonuscard:hover { transform:translateY(-8px); background:#FFCC00; box-shadow:0 45px 80px -30px #FFCC00b3; }
.bonuscard .bonusicon { transition:transform .3s ease-out; }
.bonuscard:hover .bonusicon { transform:scale(1.1); }
@media (prefers-reduced-motion:reduce) {
  .bonuscard, .bonuscard .bonusicon { transition:none; }
  .bonuscard:hover { transform:none; }
  .bonuscard:hover .bonusicon { transform:none; }
}
.bonuscard h3 { font-size:clamp(24px,2.2vw,38px); text-transform:none; font-style:normal; letter-spacing:-0.01em; line-height:1.15; }
.bonuscard p { font-size:14px; opacity:.75; }
.bonusnum { position:absolute; top:24px; left:24px; width:48px; height:48px; border-radius:12px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:Oswald, system-ui, sans-serif; font-weight:900; font-size:18px; }
.bonusicon { display:flex; align-items:center; justify-content:center; height:clamp(64px,4.4vw,84px); }
img.bonusicon { width:auto; height:clamp(64px,4.4vw,84px); max-width:110px; object-fit:contain; }