:root { color-scheme: dark; --primary:#E10014; --bg:#06080D; --fg:#FFFFFF; --accent:#FFCC00; --radius:24px; }
* { box-sizing: border-box; }
/* 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; } }
body { margin:0; background:var(--bg); color:var(--fg); font-family:Roboto, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
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%, #E1001426 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); }
.ctabox { background:linear-gradient(135deg, #E10014 0%, #E10014cc 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; }
.stat { font-family:Oswald, system-ui, sans-serif; font-weight:900; font-size:48px; color:var(--accent); text-transform:uppercase;font-style:italic; }
.grid3 { display:grid; gap:24px; margin-top:56px; }
.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; }
.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 img { height:34px; 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; }
.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 a:hover { opacity:1; text-decoration:underline; }
.site-footer .lead { margin-left:0; }
.site-footer .fnote { opacity:.4; font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin-top:32px; }

/* 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; }
.ctasplit-marca img { display:block; width:auto; height:clamp(110px,11vw,200px); object-fit:contain; }
.ctasplit-texto { max-width:640px; }
.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; }
.floatcta { 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:#E10014; color:#fff; 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 #E10014cc; 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, #E10014 0%, #E10014 38%, #FFCC0059 50%, #E10014 62%, #E10014 100%);
  background-size:250% 100%; animation:floatglow 3.2s ease-in-out infinite; }
@keyframes floatglow {
  0%   { box-shadow:0 0 18px #E1001459, 0 8px 24px -8px #E1001473; background-position:-150% 0; }
  50%  { box-shadow:0 0 44px #FFCC008c, 0 0 90px #E1001459, 0 10px 30px -6px #E1001480; }
  100% { box-shadow:0 0 18px #E1001459, 0 8px 24px -8px #E1001473; 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%, #06080D4d 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. */
.heroinner { display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; max-width:1560px; margin:0 auto; padding:56px 20px; }
.herolockup img { display:block; width:100%; max-width:210px; height:auto; }
.herocard { background:#E10014e6; border-radius:32px; padding:32px 24px; width:100%; max-width:380px; box-shadow:0 40px 90px -30px #E10014b3; 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:clamp(260px,21vw,540px); }
  .herocard { margin-left:auto; max-width:clamp(340px,26vw,560px); padding:clamp(32px,2.8vw,52px) clamp(28px,2.4vw,48px); }
  .herocard h1 { font-size:clamp(28px,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; }

/* 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%, #06080Da6 28%, #06080Da6 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. */
.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:center; 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; }