/* ============================================================
   PRÊMIO eSPORTS BRASIL — PEB26
   Site oficial · edição 2026 · design conforme Figma
   ============================================================ */

/* ---------- Fonte de marca: Bw Stretch ---------- */
@font-face{
  font-family:"Bw Stretch";
  src:url("../fonts/BwStretch-Medium.woff2") format("woff2"),
      url("../fonts/BwStretch-Medium.otf") format("opentype");
  font-weight:500 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bw Stretch";
  src:url("../fonts/BwStretch-Bold.woff2") format("woff2"),
      url("../fonts/BwStretch-Bold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bw Stretch";
  src:url("../fonts/BwStretch-Black.woff2") format("woff2"),
      url("../fonts/BwStretch-Black.otf") format("opentype");
  font-weight:800 900;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --bg:#000000;
  --bg-soft:#0b0b0d;
  --bg-card:rgba(255,255,255,.03);
  --gold:#EEBA6D;
  --gold-light:#F4D58D;
  --gold-deep:#A87A35;
  --white:#FFFFFF;
  --text:#FFFFFF;
  --text-soft:rgba(255,255,255,.74);
  --text-faint:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.12);
  --gold-line:rgba(238,186,109,.32);
  --radius:21px;
  --radius-sm:12px;
  --maxw:1280px;
  --header-h:84px;
  --font-display:"Bw Stretch","Saira Condensed",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- Utilitários ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.section{padding:96px 0;position:relative}
.section--tight{padding:64px 0}

/* Big numbers — a década em métricas (logo após o hero da home) */
/* Fundo: ELEMENTOS DO KV (asset oficial) com drift lento + mask nas bordas.
   Números em Bw Stretch Black com sheen dourado sutil. */
.section--numbers{
  position:relative;
  padding:104px 0 84px;
  background:#000;
  overflow:hidden;
}
.section--numbers::before{
  content:"";
  position:absolute;inset:-6%;
  z-index:0;
  background:url("../img/elementos-kv.svg") center center / cover no-repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
  animation:kvDrift 20s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kvDrift{
  0%   { transform:translate3d(-1.6%,0,0) scale(1.04); }
  100% { transform:translate3d(1.6%,0,0) scale(1.10); }
}
.section--numbers .wrap{ position:relative; z-index:1; }
.numbers-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  text-align:center;
  align-items:start;
}
.number-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:0 12px;
}
/* stagger do fade-in: cada bloco entra com leve atraso */
.numbers-grid .number-block:nth-child(1){ transition-delay:0s; }
.numbers-grid .number-block:nth-child(2){ transition-delay:.14s; }
.numbers-grid .number-block:nth-child(3){ transition-delay:.28s; }
.number-block__big{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3.4rem, 8vw, 6.2rem);
  line-height:.92;
  letter-spacing:.005em;
  /* gradiente dourado largo + sheen animado (background-position) */
  background:linear-gradient(105deg,
    var(--gold-deep) 0%, var(--gold) 28%, var(--gold-light) 46%,
    #FCEBC2 52%, var(--gold-light) 58%, var(--gold) 74%, var(--gold-deep) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          color:transparent;
  filter:drop-shadow(0 3px 18px rgba(238,186,109,.20));
  animation:numberSheen 7s ease-in-out infinite;
}
@keyframes numberSheen{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
.number-block__label{
  position:relative;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:clamp(.98rem,1.5vw,1.22rem);
  color:#fff;
  max-width:260px;
  line-height:1.35;
  padding-top:18px;
}
/* detalhe dourado acima de cada label, dando estrutura e destaque */
.number-block__label::before{
  content:"";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:46px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-deep));
}

@media (max-width: 720px){
  .section--numbers{ padding:64px 0 40px; }
  .numbers-grid{ grid-template-columns:1fr; gap:44px; }
  .number-block__label{ max-width:300px; }
}

/* Seção com background LINHAS prismático (ELEMENTOS DO KV — asset oficial) */
/* Mask-image faz a imagem ir desaparecendo gradualmente nas bordas superior e inferior,
   criando uma transição totalmente suave com as seções vizinhas em vez de corte abrupto. */
.section--linhas{
  position:relative;
}
.section--linhas::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:#000 url("../img/linhas-bg-kv.png") center top/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%);
}
.section--linhas::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.45) 100%);
}
.section--linhas>*{position:relative;z-index:1}

/* Segunda seção da /decada — linha iridescente vibrante no lugar do linhas-bg-kv
   padrão, pra preencher a área escura abaixo do hero. cover (sem distorção) e
   overlay um pouco mais forte pra manter o texto legível. */
.section--decada-intro{ padding-top:120px; padding-bottom:120px; }
/* filtro preto NA MESMA camada da imagem (gradiente listado primeiro fica por
   cima da imagem em multi-background) — escurece de verdade, dando contraste ao texto */
.section--decada-intro::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.74) 45%,rgba(0,0,0,.85) 100%),
    url("../img/linhas-decada-intro.jpg") center center / cover no-repeat;
  background-color:#000;
}
/* título multi-linha precisa de respiro (base .heading usa line-height 1.02) */
.section--decada-intro .heading{ line-height:1.14; }
@media (max-width:720px){
  .section--decada-intro{ padding:72px 18px; }
  .section--decada-intro .heading{ font-size:1.7rem; }   /* ~27px: título longo elegante/legível no mobile */
  .section--decada-intro .prose p{ font-size:1rem; line-height:1.62; }
}

.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:.82rem;color:var(--gold);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:46px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
}
.eyebrow--center{justify-content:center}

.heading{
  font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;
  line-height:1.02;letter-spacing:.005em;
}
.heading--xl{font-size:clamp(2.6rem,6vw,5rem)}
.heading--lg{font-size:clamp(2rem,4.4vw,3.4rem)}
.heading--md{font-size:clamp(1.5rem,2.6vw,2.1rem)}

.lead{color:var(--text-soft);font-size:1.05rem;max-width:62ch}
.lead p+p{margin-top:1.1em}

.gold-rule{
  width:96px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-deep));
}

/* botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;
  padding:14px 30px;border-radius:var(--radius);
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.btn--gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#1a1205}
.btn--gold:hover{transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--gold-line);color:var(--gold);background:rgba(0,0,0,.2)}
.btn--ghost:hover{border-color:var(--gold);background:rgba(238,186,109,.08)}

/* ---------- Header ---------- */
/* M1 — degradê escuro reforçado no topo para legibilidade sobre hero movimentado */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 55%,rgba(0,0,0,0) 100%);
  transition:background .25s ease,backdrop-filter .25s ease;
}
.site-header.is-scrolled{
  background:rgba(5,5,6,.92);
  backdrop-filter:blur(12px);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center}
.brand img{height:38px;width:auto;display:block}

.main-nav ul{display:flex;align-items:center;gap:34px}
.main-nav a{
  font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;font-size:.95rem;
  color:var(--text-soft);transition:color .18s ease;position:relative;
  padding:6px 0;
}
.main-nav a:hover{color:var(--white)}
.main-nav a.is-active{color:var(--gold)}
.main-nav a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);border-radius:2px;
}

.header-actions{display:flex;align-items:center;gap:14px}
.nav-cta{
  font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;font-size:.86rem;
  color:var(--white);
  padding:11px 22px;border-radius:var(--radius);
  border:1px solid var(--gold-line);
  background:rgba(238,186,109,.06);
  transition:border-color .18s ease,background .18s ease;
}
.nav-cta:hover{border-color:var(--gold);background:rgba(238,186,109,.14)}
.nav-cta-mobile{display:none}

.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;
  justify-content:center;align-items:center;gap:5px}
.nav-toggle span{width:24px;height:2px;background:var(--gold);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero base ---------- */
.hero{
  position:relative;min-height:88vh;
  display:flex;align-items:center;
  padding:calc(var(--header-h) + 60px) 0 90px;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.78) 60%,#000 100%);
}

/* Hero da década — foto da montagem em evidência. Desloca a imagem pra baixo
   (object-position no topo) pra não cortar rostos, e clareia o overlay pro
   banner ganhar protagonismo (mantém base escura só pra legibilidade do texto). */
.hero--decada .hero-bg img{ object-position:center top; transform-origin:center center; will-change:transform; }
.hero--decada .hero-bg::after{
  background:linear-gradient(180deg,
    rgba(0,0,0,.28) 0%,
    rgba(0,0,0,.34) 45%,
    rgba(0,0,0,.72) 82%,
    #000 100%);
}

/* ---------- Hero Home (imagem 10 Anos + vídeo de lançamento) ---------- */
/* Imagem é o poster instantâneo (LCP rápido). Vídeo fica posicionado absoluto
   sobre a imagem e faz crossfade in (opacity 0→1) quando JS adiciona
   .is-video-ready (disparado pelo evento canplay). Ambos mantêm o mask-image
   que fadeia o rodapé pro preto, eliminando corte com o próximo bloco. */
.home-hero{
  background:#000;
  position:relative;
  overflow:hidden;
  min-height:100vh;       /* fallback */
  min-height:100dvh;      /* moderno: já desconta a barra do mobile */
}
.home-hero__poster,
.home-hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
}
.home-hero__poster{
  display:block;
  z-index:1;
  transition:opacity 800ms ease;
}
.home-hero__video{
  z-index:2;
  opacity:0;
  transition:opacity 800ms ease;
  pointer-events:none;
}
.home-hero.is-video-ready .home-hero__video{ opacity:1; }
/* Some o poster quando o vídeo entra — evita ghost da imagem aparecendo
   por baixo do vídeo na região do mask-fade (ambos ficam semi-transparentes
   na faixa 78-100% e o poster vaza visualmente) */
.home-hero.is-video-ready .home-hero__poster{ opacity:0; }

/* Botão de unmute — só aparece depois do vídeo entrar */
/* bottom 28px no desktop; subido pra 96px no mobile pra não brigar com o
   consent banner (fixed bottom 16px, ~180px de altura quando visível) */
.home-hero__sound{
  position:absolute;
  right:24px;bottom:28px;
  z-index:10;
  width:48px;height:48px;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  cursor:pointer;
  z-index:5;
  padding:0;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  transition:background 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.home-hero__sound:hover{
  background:rgba(0,0,0,.85);
  border-color:var(--gold,#c9a24a);
  transform:scale(1.06);
}
.home-hero__sound:focus-visible{
  outline:2px solid var(--gold,#c9a24a);
  outline-offset:3px;
}
.home-hero.is-video-ready .home-hero__sound{ display:flex; }
.home-hero__sound svg{ width:22px; height:22px; }
.home-hero__sound-icon--on{ display:none; }
.home-hero__sound[aria-pressed="true"] .home-hero__sound-icon--muted{ display:none; }
.home-hero__sound[aria-pressed="true"] .home-hero__sound-icon--on{ display:block; }

/* Botão "girar pro fullscreen" — mobile only, fica acima do botão de som.
   Click dispara requestFullscreen no vídeo + lock landscape (Android) ou
   webkitEnterFullscreen (iOS native player com rotação automática). */
.home-hero__fullscreen{
  position:absolute;
  right:24px;bottom:88px;
  z-index:10;
  width:48px;height:48px;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  cursor:pointer;
  padding:0;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  transition:background 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.home-hero__fullscreen:hover{
  background:rgba(0,0,0,.85);
  border-color:var(--gold,#c9a24a);
  transform:scale(1.06);
}
.home-hero__fullscreen:focus-visible{
  outline:2px solid var(--gold,#c9a24a);
  outline-offset:3px;
}
.home-hero__fullscreen svg{ width:22px; height:22px; }
/* Só aparece no mobile e quando o vídeo já carregou */
@media (max-width: 720px){
  .home-hero.is-video-ready .home-hero__fullscreen{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  .home-hero__video{ transition:none; }
  .home-hero__poster{ transition:none; }
}

@media (max-width: 720px){
  .home-hero__sound{ bottom:96px; right:16px; width:44px; height:44px; }
  .home-hero__sound svg{ width:20px; height:20px; }
  .home-hero__fullscreen{ bottom:152px; right:16px; width:44px; height:44px; }
  .home-hero__fullscreen svg{ width:20px; height:20px; }
}

/* ---------- Hero centralizada (História / Superjúri) ---------- */
.hero-center{text-align:center}
.hero-center .wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.hero-kicker{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.2em;color:var(--gold);font-weight:600;font-size:1rem;
}
.hero-title{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,6rem);line-height:1;
}
.hero-subtitle{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.05em;color:var(--gold-light);font-weight:600;
  font-size:clamp(1.05rem,2.4vw,1.7rem);
}

/* Hero da década — escudo PEB como máscara; um gradiente cônico gira por baixo
   e, revelado só na forma do escudo, vira um brilho que percorre o contorno em
   loop ("brilho passando sobre as linhas"). A linha fica sempre sutil (base dim)
   e o facho de luz varre por cima. O wrapper (.hero-shield) também recebe o
   parallax/fade de scroll via setupHeroZoom (translateY + opacity). */
.hero-shield{
  display:block;
  width:clamp(190px,30vw,340px);
  aspect-ratio:657 / 595;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  will-change:transform,opacity;
  -webkit-mask:url(../img/escudo-peb-branco.png) center / contain no-repeat;
          mask:url(../img/escudo-peb-branco.png) center / contain no-repeat;
}
.hero-shield::before{
  content:"";
  position:absolute;
  inset:-65%;                 /* maior que o container pra rotação cobrir tudo */
  background:conic-gradient(from 0deg,
    rgba(255,255,255,.12) 0deg,
    rgba(255,255,255,.12) 250deg,
    rgba(255,255,255,.62) 318deg,
    rgba(255,255,255,.12) 360deg);
  animation:shieldShine 16s linear infinite;
  will-change:transform;
}
@keyframes shieldShine{
  to{ transform:rotate(360deg); }
}

/* ---------- Bloco imagem + texto (card panel, conforme Figma) ---------- */
/* Card banner: alterna texto/imagem. Cards semi-transparentes para o padrão LINHAS
   do background (.features-bg) atravessar e dar o efeito prismático visto no Figma. */
.feature{
  display:grid;grid-template-columns:1fr 1.3fr;gap:0;align-items:stretch;
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(4px);
  border:1px solid var(--gold-line);
  border-radius:var(--radius);
  overflow:hidden;
  min-height:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.feature--reverse .feature-media{order:2}
.feature-body{padding:48px 56px;display:flex;flex-direction:column;justify-content:center}
.feature-media{
  position:relative;
  background:#000;
  overflow:hidden;
}
.feature-media img{
  width:100%;height:100%;object-fit:cover;display:block;object-position:center;
}
.feature-media--right img{object-position:right center}
.feature-media--left img{object-position:left center}
.feature-media .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:var(--text-faint);
  text-align:center;padding:24px;
}
.feature-media .ph svg{width:46px;height:46px;opacity:.5}
.feature-media .ph span{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.12em;font-size:.78rem;
}
.feature-body .heading{margin:14px 0 20px}

/* ---------- Duas colunas (Superjúri / Edições) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.duo-col .heading{margin:14px 0 16px}

/* ---------- Texto institucional centralizado ---------- */
.prose{max-width:880px;margin:0 auto;text-align:center}
.prose .gold-rule{margin:20px auto 28px}
.prose p{color:var(--text-soft);font-size:1.12rem}
.prose p+p{margin-top:1.3em}

/* ---------- Wrapper Vencedores (background LINHAS prismático único e harmônico) ---------- */
/* Uma única imagem KV fixa no viewport (parallax) cobrindo toda a área de vencedores.
   Sem overlays por categoria — composição contínua e unificada. */
.vencedores-stage{
  position:relative;
  background:#000 url("../img/linhas-bg-kv.png") center center/cover no-repeat;
  background-attachment:fixed;
}
.vencedores-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.5) 0%,
    rgba(0,0,0,.35) 12%,
    rgba(0,0,0,.32) 50%,
    rgba(0,0,0,.5) 88%,
    rgba(0,0,0,.85) 100%);
}
.vencedores-stage>*{position:relative;z-index:1}

/* Linha dourada decorativa abaixo dos títulos de categoria */
.vencedores-stage .year-panel .heading--lg{position:relative}
.vencedores-stage .year-panel .heading--lg::after{
  content:"";display:block;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-deep));
  margin:18px auto 0;
}

/* Fallback para mobile (background-attachment fixed tem mau desempenho em mobile) */
@media (max-width:760px){
  .vencedores-stage{background-attachment:scroll;background-position:center top}
}

/* ---------- Seletor de anos (Figma: 5 em cima, 4 embaixo) ---------- */
.years{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  max-width:780px;margin:0 auto;
}
.year-pill{
  font-family:var(--font-display);font-weight:600;
  font-size:1.35rem;letter-spacing:.04em;
  color:var(--text-soft);
  padding:12px 34px;border-radius:var(--radius);
  border:1px solid var(--gold-line);
  background:rgba(0,0,0,.2);
  transition:all .18s ease;
}
.year-pill:hover{color:var(--white);border-color:var(--gold)}
.year-pill.is-active{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#1a1205;border-color:var(--gold);
}

/* ---------- Carrossel ---------- */
.carousel{position:relative;margin-top:36px}
.carousel-track{
  display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;
  padding:8px 4px 20px;scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none}

/* Quando todos os cards cabem (sem overflow), centraliza e esconde setas */
.carousel--no-overflow .carousel-track{justify-content:center;overflow-x:visible}
.carousel--no-overflow .carousel-arrow{display:none}
.carousel-arrow{
  position:absolute;top:42%;z-index:5;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);border:1px solid var(--gold-line);
  color:var(--gold);transition:all .18s ease;
}
.carousel-arrow:hover{background:var(--gold);color:#1a1205}
.carousel-arrow--prev{left:-12px}
.carousel-arrow--next{right:-12px}
.carousel-arrow svg{width:20px;height:20px}

/* ---------- Card vencedor ---------- */
.winner-card{flex:0 0 270px;text-align:center}
.winner-photo{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--gold-line);
  aspect-ratio:1/1;
  background:linear-gradient(135deg,rgba(238,186,109,.14),rgba(10,10,12,.95));
  display:flex;align-items:center;justify-content:center;
}
/* C3 — biasar foco para parte superior (rostos em fotos de cerimônia) */
.winner-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
/* opt-in: zoom para fotos onde a pessoa fica pequena no centro do palco */
.winner-photo--zoom img{transform:translateY(-12%) scale(1.5);transform-origin:center 30%}
/* opt-in: imagens de times/jogos (CS2, FURIA, etc.) que devem caber inteiras */
.winner-photo--contain{
  background:#050507 !important;
}
.winner-photo.winner-photo--contain img{
  object-fit:contain !important;
  object-position:center !important;
  padding:22px;
  /* monocromo branco — todo o logo vira branco puro pra ler em qualquer fundo */
  filter:brightness(0) invert(1) !important;
}
.winner-photo .ph-ico{width:54px;height:54px;color:var(--text-faint);opacity:.5}
.winner-name{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.5rem;margin-top:16px;letter-spacing:.02em;
}
.winner-cat{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.1em;color:var(--gold);font-size:.92rem;font-weight:600;
}

/* ---------- Filtros de categoria (Superjúri) ---------- */
.cat-filter{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:48px}
.cat-chip{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.86rem;color:var(--text-soft);
  padding:12px 28px;border-radius:var(--radius);
  border:1px solid var(--gold-line);background:rgba(0,0,0,.2);
  transition:all .18s ease;
}
.cat-chip:hover{color:var(--white);border-color:var(--gold)}
.cat-chip.is-active{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#1a1205;border-color:var(--gold);
}

/* ---------- Grid de jurados ---------- */
.jury-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
.jury-card{text-align:center}
.jury-photo{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--gold-line);aspect-ratio:3/4;
  background:linear-gradient(180deg,rgba(238,186,109,.12),rgba(10,10,12,.96));
  display:flex;align-items:flex-end;justify-content:center;
}
.jury-photo img{width:100%;height:100%;object-fit:cover}
.jury-photo .ph-ico{width:48px;height:48px;color:var(--text-faint);opacity:.45;margin-bottom:30%}
.jury-name{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.25rem;margin-top:14px;
}
.jury-role{
  font-family:var(--font-body);color:var(--text-faint);
  font-size:.85rem;
}

/* ---------- Régua de marca no topo (Master + Parceiros) ---------- */
.sponsor-strip{padding:42px 0 36px;border-bottom:1px solid var(--line);background:#000}
.sponsor-strip__tier{
  display:flex;flex-wrap:wrap;gap:42px;justify-content:center;align-items:center;
}
.sponsor-strip__tier--master{margin-bottom:26px}
.sponsor-strip__tier .sponsor-logo{
  width:auto;height:46px;border:none;background:none;padding:0;
}
.sponsor-strip__tier .sponsor-logo img{
  max-height:46px;width:auto;
  filter:brightness(0) invert(1);opacity:.85;
  transition:opacity .2s ease;
}
.sponsor-strip__tier .sponsor-logo:hover img{opacity:1}
.sponsor-logo--master{height:74px !important}
.sponsor-logo--master img{max-height:74px !important;opacity:1 !important}

/* ---------- Blocos full-bleed (imagem inteira + texto sobreposto) ---------- */
/* As imagens trofeu-figma e consagracao-figma já são banners com área escura para o texto
   e as linhas coloridas prismáticas embutidas — sem card panel separado. */
.feature-bleed{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  display:block;
  background:#000;
}
.feature-bleed__img{
  display:block;width:100%;height:auto;
}
.feature-bleed__text{
  position:absolute;top:50%;
  width:58%;
  transform:translateY(-50%);
  padding:0 72px;
}
.feature-bleed__text--left{left:0}
.feature-bleed__text--right{right:0}
.feature-bleed__text .heading{margin:14px 0 20px}

/* ---------- Timeline (página História) ---------- */
.timeline-section{position:relative;padding:60px 0 80px}
.timeline{
  position:relative;list-style:none;padding:40px 0;margin:0;
  max-width:1180px;margin-left:auto;margin-right:auto;
}
/* linha vertical central */
.timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent 0%,var(--gold-deep) 5%,var(--gold) 50%,var(--gold-deep) 95%,transparent 100%);
  transform:translateX(-50%);opacity:.55;
  box-shadow:0 0 12px rgba(238,186,109,.3);
}
.timeline__item{
  position:relative;margin-bottom:80px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;
}
.timeline__item:last-child{margin-bottom:0}

/* override do .reveal genérico — item não move, animação fica nos filhos */
.timeline__item.reveal{opacity:1;transform:none;transition:none}

/* marker central — "medalha" com edição + ano */
.timeline__marker{
  grid-column:2;
  width:118px;height:118px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.4) 0%,transparent 35%),
    radial-gradient(circle at 70% 80%,rgba(0,0,0,.18) 0%,transparent 50%),
    linear-gradient(140deg,var(--gold-light) 0%,var(--gold) 40%,var(--gold-deep) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;z-index:2;
  border:1.5px solid rgba(255,235,200,.5);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(0,0,0,.2),
    0 0 0 4px rgba(0,0,0,.6),
    0 0 0 6px rgba(238,186,109,.25),
    0 0 0 14px rgba(238,186,109,.08),
    0 0 40px rgba(238,186,109,.35);
  /* default visível — animação só roda quando o item está em estado .reveal:not(.is-visible) */
  transform:scale(1);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1);
}
.timeline__item.reveal:not(.is-visible) .timeline__marker{transform:scale(0)}
.timeline__marker--dual{width:130px;height:130px}
.timeline__marker--current{
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.6) 0%,transparent 40%),
    radial-gradient(circle at 70% 80%,rgba(168,122,53,.3) 0%,transparent 55%),
    linear-gradient(140deg,#fff 0%,var(--gold-light) 35%,var(--gold) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -2px 6px rgba(0,0,0,.15),
    0 0 0 4px rgba(0,0,0,.6),
    0 0 0 6px rgba(238,186,109,.35),
    0 0 0 16px rgba(238,186,109,.12),
    0 0 60px rgba(238,186,109,.55);
  animation:pulse-current 2.4s ease-in-out infinite;
}
@keyframes pulse-current{
  0%,100%{filter:drop-shadow(0 0 12px rgba(238,186,109,.4))}
  50%{filter:drop-shadow(0 0 24px rgba(238,186,109,.7))}
}
.timeline__ed{
  font-family:var(--font-display);font-weight:700;
  font-size:.74rem;line-height:1;letter-spacing:.18em;
  color:#1a1205;text-transform:uppercase;
  padding:3px 10px;border-radius:99px;
  background:rgba(26,18,5,.18);
  margin-bottom:6px;
}
.timeline__marker--dual .timeline__ed{font-size:.62rem;padding:3px 8px}
.timeline__year{
  font-family:var(--font-display);font-weight:800;
  font-size:1.75rem;line-height:1;color:#1a1205;text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.timeline__marker--dual .timeline__year{font-size:1rem}

/* card de conteúdo */
.timeline__card{
  padding:30px 34px;
  background:rgba(8,8,10,.78);backdrop-filter:blur(6px);
  border:1px solid var(--gold-line);
  border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.timeline__eyebrow{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold);font-weight:600;
  font-size:.78rem;margin-bottom:10px;
}
.timeline__title{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.15;margin-bottom:14px;
}
.timeline__card p{color:var(--text-soft);font-size:.96rem;line-height:1.6}
.timeline__highlight{
  position:relative;
  margin-top:22px;padding:18px 20px 18px 56px;
  border:1px solid var(--gold-line);
  background:
    radial-gradient(ellipse 80% 100% at 0% 50%,rgba(238,186,109,.18),transparent 70%),
    linear-gradient(135deg,rgba(238,186,109,.06),rgba(8,8,10,.4));
  border-radius:14px;
}
/* ícone de troféu */
.timeline__highlight::before{
  content:"";
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEBA6D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9a6 6 0 0 0 12 0V3H6v6z'/><path d='M6 5H3a1 1 0 0 0-1 1v2a4 4 0 0 0 4 4'/><path d='M18 5h3a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4'/><path d='M10 15v4h4v-4'/><path d='M8 21h8'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgba(238,186,109,.5));
}
.timeline__highlight-label{
  display:block;
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold);font-weight:600;
  font-size:.7rem;margin-bottom:4px;
}
.timeline__highlight strong{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;color:var(--white);margin-bottom:6px;letter-spacing:.01em;
}
.timeline__highlight span{color:var(--text-soft);font-size:.88rem;line-height:1.55;display:block}

/* alterna lado: ímpar vai pra esquerda, par vai pra direita */
/* default visível — animação só quando .reveal:not(.is-visible) */
.timeline__item:nth-child(odd) .timeline__card{
  grid-column:1;text-align:right;
  opacity:1;transform:translateX(0);
  transition:opacity .7s ease .2s,transform .7s ease .2s;
}
.timeline__item:nth-child(even) .timeline__card{
  grid-column:3;text-align:left;
  opacity:1;transform:translateX(0);
  transition:opacity .7s ease .2s,transform .7s ease .2s;
}
.timeline__item.reveal:not(.is-visible):nth-child(odd) .timeline__card{
  opacity:0;transform:translateX(-40px);
}
.timeline__item.reveal:not(.is-visible):nth-child(even) .timeline__card{
  opacity:0;transform:translateX(40px);
}
/* item ímpar: card à esquerda, texto alinhado à direita — troféu vai pro lado direito */
.timeline__item:nth-child(odd) .timeline__highlight{
  padding:18px 56px 18px 20px;
  background:
    radial-gradient(ellipse 80% 100% at 100% 50%,rgba(238,186,109,.18),transparent 70%),
    linear-gradient(225deg,rgba(238,186,109,.06),rgba(8,8,10,.4));
}
.timeline__item:nth-child(odd) .timeline__highlight::before{
  left:auto;right:18px;
}

/* Mobile: linha vai pro canto, cards empilham */
@media (max-width:880px){
  .timeline::before{left:32px}
  .timeline__item{
    grid-template-columns:64px 1fr;gap:24px;margin-bottom:50px;
  }
  .timeline__marker{
    grid-column:1;width:64px;height:64px;
  }
  .timeline__marker--dual{height:74px}
  .timeline__year{font-size:1.05rem}
  .timeline__marker--dual .timeline__year{font-size:.78rem}
  .timeline__item:nth-child(odd) .timeline__card,
  .timeline__item:nth-child(even) .timeline__card{
    grid-column:2;text-align:left;transform:translateX(20px);
  }
  .timeline__item:nth-child(odd) .timeline__highlight{
    border-right:none;border-left:3px solid var(--gold);
    background:linear-gradient(90deg,rgba(238,186,109,.08),rgba(238,186,109,0));
    border-radius:0 8px 8px 0;
  }
  .timeline__card{padding:22px 24px}
}

/* ---------- Pilares (Por que o PEB importa) ---------- */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:20px;
}
.pillar{
  padding:36px 30px;
  background:rgba(8,8,10,.72);backdrop-filter:blur(4px);
  border:1px solid var(--gold-line);border-radius:var(--radius);
  text-align:left;position:relative;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease;
}
.pillar:hover{transform:translateY(-4px);border-color:var(--gold)}
.pillar__num{
  font-family:var(--font-display);font-weight:800;
  font-size:3rem;line-height:1;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:14px;
}
.pillar__title{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.4rem;letter-spacing:.04em;color:var(--white);
  margin-bottom:12px;
}
.pillar p{color:var(--text-soft);font-size:.95rem;line-height:1.6}

@media (max-width:880px){
  .pillars{grid-template-columns:1fr;gap:20px}
  .pillar{padding:28px 24px}
  .pillar__num{font-size:2.5rem}
}

/* ---------- Régua de marcas (2 em cima + 4 embaixo, centralizada) ---------- */
/* Hierarquia de peso visual por categoria (slots fixos):
   1 Master > 2 Parceiro > 3 Apoio > 4 Institucional > 5 Media > 6 Realização
   Layout como no footer antigo: metade/metade no topo; 4 blocos embaixo. */
.sponsors{border-top:1px solid var(--line);padding:56px 0 48px}
.sponsors .wrap{max-width:980px;margin:0 auto;padding:0 24px}

.sponsor-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "master master parceiro parceiro"
    "apoio institucional media realizacao";
  gap:48px 36px;
  align-items:start;
  justify-items:stretch;
}
.sponsor-cell--master{grid-area:master}
.sponsor-cell--parceiro{grid-area:parceiro}
.sponsor-cell--apoio{grid-area:apoio}
.sponsor-cell--institucional{grid-area:institucional}
.sponsor-cell--media{grid-area:media}
.sponsor-cell--realizacao{grid-area:realizacao}

.sponsor-cell{
  --logo-h:40px;
  --logo-max-w:110px;
  display:flex;flex-direction:column;align-items:center;
  gap:16px;text-align:center;
  min-width:0;
  width:100%;
}

/* Escala de importância */
.sponsor-cell--master{--logo-h:72px;--logo-max-w:168px}
.sponsor-cell--parceiro{--logo-h:58px;--logo-max-w:140px}
.sponsor-cell--apoio{--logo-h:46px;--logo-max-w:92px}
.sponsor-cell--institucional{--logo-h:38px;--logo-max-w:120px}
.sponsor-cell--media{--logo-h:34px;--logo-max-w:110px}
.sponsor-cell--realizacao{--logo-h:48px;--logo-max-w:140px}

.sponsor-label{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold);font-weight:600;
  font-size:.62rem;
  white-space:nowrap;
  display:flex;align-items:center;gap:8px;
  width:100%;
}
.sponsor-label::before,
.sponsor-label::after{
  content:"";height:1px;border-radius:2px;
  flex:1 1 0;min-width:12px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
}

.sponsor-cell__logos{
  display:flex;flex-wrap:nowrap;gap:14px;
  justify-content:center;align-items:center;
  min-height:var(--logo-h);
  width:100%;
}

/* APOIO: 2x2 como no site antigo */
.sponsor-cell--apoio .sponsor-cell__logos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  align-items:center;
  justify-items:center;
  min-height:0;
  height:auto;
}

.sponsor-cell .sponsor-logo{
  display:flex;align-items:center;justify-content:center;
  width:auto;
  height:var(--logo-h);
  max-width:var(--logo-max-w);
  border:none;background:transparent;padding:0;
}
.sponsor-cell .sponsor-logo img{
  display:block;
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  filter:none;
  opacity:.95;
  transition:opacity .18s ease;
}
.sponsor-cell .sponsor-logo:hover img{opacity:1}

@media (max-width:760px){
  .sponsor-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "master"
      "parceiro"
      "apoio"
      "institucional"
      "media"
      "realizacao";
    gap:36px;
  }
}

/* ---------- Patrocinadores (legacy — restos da versão antiga, mantido só por segurança) ---------- */
.sponsor-tier{margin-bottom:44px;text-align:center}
.sponsor-tier:last-child{margin-bottom:0}
.sponsor-tier h3{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.16em;color:var(--gold);font-weight:600;
  font-size:.82rem;margin-bottom:20px;
}
.sponsor-row{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:center;
}
/* M3 — uniformizar logos: caixa maior + monocromo branco com filtro CSS para peso visual consistente */
.sponsor-logo{
  width:190px;height:96px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  display:flex;align-items:center;justify-content:center;
  padding:18px 22px;
  font-family:var(--font-display);letter-spacing:.18em;
  color:var(--text-faint);font-size:.85rem;
  transition:border-color .2s ease,background .2s ease;
}
.sponsor-logo img{
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.82;
  transition:opacity .2s ease,filter .2s ease;
}
.sponsor-logo:hover{border-color:var(--gold-line);background:rgba(238,186,109,.04)}
.sponsor-logo:hover img{opacity:1}
/* opt-out: caso o time queira preservar a cor de algum logo específico */
.sponsor-logo--keep-color img{filter:none;opacity:1}

/* ---------- CTA faixa ---------- */
.cta-band{
  border:1px solid var(--gold-line);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(238,186,109,.1),rgba(10,10,12,.7));
  padding:48px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}

/* ---------- Cards "Conheça / Reveja" ---------- */
.link-cards{display:grid;grid-template-columns:1fr;gap:28px;max-width:620px;margin:0 auto}
.link-card{
  border:1px solid var(--gold-line);border-radius:var(--radius);
  padding:38px;background:var(--bg-card);
  transition:transform .2s ease,border-color .2s ease;
}
.link-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.link-card .heading{margin:10px 0 14px}
.link-card .lead{margin-bottom:22px}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;padding:80px 0 40px;
  border-top:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(0,0,0,.4),#000),
    url("../img/peb-bg-poster.jpg") center/cover;
}
.footer-hash{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(4rem,13vw,11rem);line-height:1;text-align:center;
  letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.4));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.footer-socials{
  display:flex;gap:16px;justify-content:center;margin:32px 0 40px;
}
.footer-socials a{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1.5px solid var(--gold);
  color:var(--gold);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.footer-socials a:hover{
  transform:translateY(-3px);
  background:var(--gold);
  color:#120c02;
}
.footer-socials svg{width:19px;height:19px}
.footer-meta{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line);
  color:var(--text-faint);font-size:.85rem;
}
.footer-meta nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-meta nav a{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;font-size:.82rem;color:var(--text-soft);
}
.footer-meta nav a:hover{color:var(--gold)}

/* ---------- Contato — boxes Press Release + Contato Comercial (Figma) ---------- */
.contact-boxes{
  display:flex;flex-wrap:wrap;gap:96px;justify-content:center;
  margin-top:64px;
}
.contact-box{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  text-align:center;color:var(--white);
  transition:transform .2s ease;
}
.contact-box:hover{transform:translateY(-4px)}
.contact-box__icon{
  width:96px;height:96px;border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  background:rgba(238,186,109,.04);
  transition:background .2s ease,box-shadow .2s ease;
}
.contact-box__icon svg{width:42px;height:42px}
.contact-box:hover .contact-box__icon{
  background:rgba(238,186,109,.12);
  box-shadow:0 0 0 6px rgba(238,186,109,.08);
}
.contact-box__label{
  font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.05;
}

/* ---------- Página Contato (legacy form layout — restos) ---------- */
/* M4 — equilibrar colunas: 3 cards distribuem altura, formulário fica do tamanho do conteúdo + textarea cresce */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px;align-items:stretch}
.contact-col{display:flex;flex-direction:column;gap:20px;min-height:100%}
.contact-col>.contact-card{
  flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;
}
.contact-col>form{
  flex:1;display:flex;flex-direction:column;
}
.contact-col>form .field:has(textarea){flex:1;display:flex;flex-direction:column}
.contact-col>form textarea{flex:1;min-height:160px}
.contact-card{
  border:1px solid var(--gold-line);border-radius:var(--radius);
  padding:32px;background:var(--bg-card);
}
.contact-card h3{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;color:var(--gold);font-size:1.1rem;margin-bottom:8px;
}
.contact-card a{color:var(--white);font-size:1.05rem}
.contact-card a:hover{color:var(--gold)}
.contact-card p{color:var(--text-soft);font-size:.95rem}
.field{margin-bottom:18px}
.field label{
  display:block;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;font-size:.78rem;color:var(--gold);margin-bottom:7px;
}
.field input,.field textarea{
  width:100%;padding:13px 16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--white);font-family:var(--font-body);font-size:.95rem;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:120px}

/* ---------- Banner de consentimento (LGPD) ---------- */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:300;
  max-width:560px;margin:0 auto;
  border:1px solid var(--gold-line);border-radius:var(--radius);
  background:rgba(8,8,10,.97);backdrop-filter:blur(12px);
  padding:22px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  display:none;
}
.consent.is-visible{display:block}
.consent h4{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;color:var(--gold);font-size:.95rem;margin-bottom:8px;
}
.consent p{color:var(--text-soft);font-size:.88rem;margin-bottom:16px}
.consent p a{color:var(--gold);text-decoration:underline}
.consent-actions{display:flex;gap:12px;flex-wrap:wrap}
.consent-actions .btn{padding:11px 24px;font-size:.82rem}
.consent-actions .btn--text{
  background:none;color:var(--text-faint);
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;font-size:.82rem;padding:11px 14px;
}
.consent-actions .btn--text:hover{color:var(--white)}

/* ---------- Animação de entrada ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Acessibilidade ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
.skip-link{
  position:absolute;left:-999px;top:8px;z-index:200;
  background:var(--gold);color:#000;padding:10px 18px;border-radius:8px;
  font-family:var(--font-display);font-weight:600;
}
.skip-link:focus{left:16px}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:980px){
  .feature,.feature--reverse{grid-template-columns:1fr;gap:30px}
  .feature--reverse .feature-media{order:0}
  .duo{grid-template-columns:1fr;gap:38px}
  .link-cards{grid-template-columns:1fr}
  .jury-grid{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr}
  /* feature-bleed em mobile: imagem em cima, texto embaixo (sem sobreposição) */
  .feature-bleed{overflow:visible}
  .feature-bleed__img{border-radius:var(--radius) var(--radius) 0 0}
  .feature-bleed__text{
    position:static;
    width:100%;
    padding:28px 24px;
    background:#000;
    transform:none;          /* resetar translateY(-50%) do desktop */
    border-radius:0 0 var(--radius) var(--radius);
    border:1px solid var(--gold-line);
    border-top:none;
  }
  .feature-bleed__text--left,
  .feature-bleed__text--right{
    left:auto;right:auto;margin:0;
  }
}

@media (max-width:760px){
  .wrap{padding:0 20px}
  .section{padding:64px 0}
  .nav-toggle{display:flex}
  .header-actions .nav-cta{display:none}
  .main-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    background:rgba(5,5,6,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .3s ease;
    padding:24px 0;
  }
  .main-nav.is-open{transform:translateY(0)}
  .main-nav ul{flex-direction:column;gap:4px;align-items:stretch}
  .main-nav a{padding:14px 24px;font-size:1.05rem}
  .main-nav .nav-cta-mobile{
    margin:14px 24px 0;text-align:center;display:block;
  }
  .jury-grid{grid-template-columns:repeat(2,1fr)}
  .footer-meta{flex-direction:column;text-align:center}
  .cta-band{padding:32px 22px}
  .link-card{padding:28px}
}

@media (max-width:440px){
  .jury-grid{grid-template-columns:1fr 1fr;gap:16px}
  .winner-card{flex-basis:230px}
  .year-pill{padding:10px 22px;font-size:1.1rem}
}

/* ---------- Votação 2026 — barra de passos (Figma 5118:1158) ---------- */

/* Fundo do banner em toda a página */
#indicacao-publica,
#voto-concluido,
#super-juri,
#super-juri-single{
  position:relative;
  isolation:isolate;
  background:#000;
}
#indicacao-publica .peb26-page-bg,
#voto-concluido .peb26-page-bg,
#super-juri .peb26-page-bg,
#super-juri-single .peb26-page-bg{
  position:absolute;
  top:0;left:0;right:0;
  z-index:-1;
  pointer-events:none;
  line-height:0;
}
#indicacao-publica .peb26-page-bg img,
#voto-concluido .peb26-page-bg img,
#super-juri .peb26-page-bg img,
#super-juri-single .peb26-page-bg img{
  display:block;
  width:100%;
  height:auto;
  object-position:center top;
}
#indicacao-publica .peb26-page-bg::after,
#voto-concluido .peb26-page-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.45) 40%,
    rgba(0,0,0,.72) 100%);
}
/* Superjúri: fundo limpo como no Figma — sem overlay escuro */
#super-juri .peb26-page-bg::after,
#super-juri-single .peb26-page-bg::after{display:none}
#indicacao-publica .hero--votacao,
#voto-concluido .hero--votacao,
#super-juri .hero--superjuri,
#super-juri-single .hero--superjuri{
  background:transparent;
  overflow:visible;
}

/* Banner Superjúri lista / single (Figma 5118:968) */
#super-juri .hero--superjuri,
#super-juri-single .hero--superjuri{
  min-height:auto;
  padding:calc(var(--header-h) + 72px) 0 80px;
}
#super-juri-single .hero--superjuri-single{
  padding-bottom:48px;
}
#super-juri .hero--superjuri .wrap,
#super-juri-single .hero--superjuri .wrap{
  gap:12px;
  max-width:920px;
}
#super-juri .hero--superjuri .hero-title,
#super-juri-single .hero--superjuri .hero-title{
  font-size:clamp(3rem,8vw,5.5rem);
  color:#fff;
}
#super-juri .hero--superjuri .hero-subtitle,
#super-juri-single .hero--superjuri .hero-subtitle{
  margin-bottom:28px;
  color:var(--gold);
  font-size:clamp(1rem,2vw,1.35rem);
  letter-spacing:.04em;
}
#super-juri-single .hero--superjuri-single .hero-subtitle{
  margin-bottom:0;
}
#super-juri .hero--superjuri__copy{
  max-width:760px;
}
#super-juri .hero--superjuri__copy p{
  color:#fff;
  font-size:clamp(1rem,1.6vw,1.2rem);
  line-height:1.55;
  font-weight:400;
}
#super-juri .hero--superjuri__copy p+p{
  margin-top:1.15em;
}
#super-juri #banner_superjuri,
#super-juri #super-juri-categoria,
#super-juri .site-footer,
#super-juri-single #banner_home_superjuri_individual,
#super-juri-single .superjuri-single-content,
#super-juri-single .site-footer{
  position:relative;
  z-index:1;
}

/* Redes sociais do jurado — círculo com borda */
#super-juri-single .superjuri-single-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--gold,#EFBB6E);
  color:var(--gold,#EFBB6E);
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
#super-juri-single .superjuri-single-social:hover{
  transform:scale(1.08);
  background:rgba(238,186,109,.12);
  color:#fff;
  border-color:#fff;
}
#super-juri-single .superjuri-single-social svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

/* Setas do swiper de categorias — acima dos ícones */
#super-juri .swiper-categoria-prev,
#super-juri .swiper-categoria-next{
  position:relative;
  z-index:30;
  pointer-events:auto;
  cursor:pointer;
  color:var(--gold,#EFBB6E);
  fill:currentColor;
}

/* Fundo da listagem de jurados — não ocupa fluxo */
#super-juri .superjuri-lista{
  position:relative;
  isolation:isolate;
  min-height:677px;
  padding:48px 0 80px;
}
#super-juri .superjuri-lista__bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  line-height:0;
}
#super-juri .superjuri-lista__bg img{
  position:absolute !important;
  inset:0 !important;
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
}
#voto-concluido .section,
#voto-concluido .peb26-vote-sticky{
  position:relative;
  z-index:1;
}

/* conteúdo da votação acima do fundo da página (sem sobrescrever sticky) */
#indicacao-publica section[data-step-content],
#indicacao-publica form{
  position:relative;
  z-index:1;
}

.peb26-vote-sticky{
  position:sticky;top:var(--header-h);z-index:10;
  background:transparent;padding:12px 16px 20px;
  margin-bottom:64px;
}

/* categorias: borda inferior + padding (sem o traço amarelo do título) */
#indicacao-publica section[data-step-content] > .container{
  padding-bottom:64px;
  border-bottom:1px solid rgba(255,255,255,.40);
}
.peb26-vote-bar{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  max-width:872px;
  margin:0 auto;
  padding:16px 32px 16px 36px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  
}
.peb26-vote-bar__label{
  margin:0;flex-shrink:0;
  font-family:var(--font-display);font-weight:700;
  font-size:2.375rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--white);
  white-space:nowrap;line-height:1;
}
.peb26-steps{
  display:flex;align-items:center;gap:0;
  flex:1;max-width:240px;min-width:160px;
}
/* círculos — inativo: outline; ativo: JS preenche background/color */
.peb26-steps [data-step-mark].peb26-step__dot{
  width:44px;height:44px;flex-shrink:0;
  border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.55);
  background:transparent;
  color:var(--white);
  font-family:var(--font-display);font-weight:700;
  /* Figma: tinta do dígito ~20px → Bw Stretch precisa de ~24–26px (cap-height 0.8) */
  font-size:1.5rem; /* 24px */
  line-height:1;position:relative;z-index:1;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
/* ativo: script adiciona .is-active (+ inline bg/color legado) */
.peb26-steps [data-step-mark].peb26-step__dot.is-active{
  border-color:transparent;
  background:var(--gold);
  color:#000;
}
.peb26-steps [data-step-mark].peb26-step__line.is-active{
  background:var(--gold);
}
.peb26-steps [data-step-mark].peb26-step__line{
  display:block;height:1.5px;flex:1;
  background:rgba(255,255,255,.35);
  transition:background .25s ease;
}

/* ---------- Votação 2026 — sticky inferior (Figma 5118:1151) ---------- */
.peb26-vote-footer{
  position:sticky;
  bottom:0;
  z-index:5;
  padding:16px 16px 20px;
  background:transparent;
}
.peb26-vote-footer__bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  max-width:872px;
  margin:0 auto;
  padding:14px 28px;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.peb26-vote-footer__label{
  margin:0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.5vw,2.375rem);
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--white);line-height:1;white-space:nowrap;
}
.peb26-vote-footer__btn{
  justify-self:center;
  min-width:200px;min-height:52px;
  padding:12px 40px;
  border:none;border-radius:999px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;
  font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;
  color:#1a1205;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  transition:transform .18s ease,filter .18s ease;
}
.peb26-vote-footer__btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.peb26-vote-footer__count{
  justify-self:end;text-align:right;
}
.peb26-vote-footer__nums{
  margin:0;
  display:flex;align-items:baseline;justify-content:flex-end;gap:6px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.75rem,3vw,2.5rem);
  color:var(--white);line-height:1;text-transform:uppercase;
}
.peb26-vote-footer__sep{opacity:.7;font-weight:500}
.peb26-vote-footer__hint{
  margin:4px 0 0;
  font-family:var(--font-display);font-weight:300;
  font-size:.85rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);
}

/* Decoração inferior da fase 1 — fundo, sem ocupar altura no fluxo */
#indicacao-publica section[data-step-content="1"]{
  position:relative;
  padding-bottom:7.75rem; /* 124px */
}
.peb26-vote-phase-bg{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:0;
  pointer-events:none;
  line-height:0;
  overflow:hidden;
}
.peb26-vote-phase-bg img{
  display:block;
  width:100%;
  height:600px;
  object-fit:cover;
  object-position:center -34px;
}

/* checkbox: texto também marca; fundo dourado só no quadrado */
#indicacao-publica .custom-checkbox:checked ~ label:not(.peb26-check-box){
  background:transparent;
}

@media (max-width:640px){
  #indicacao-publica section[data-step-content] > .container{
    padding-bottom:2rem; /* 32px */
  }
  #indicacao-publica .peb26-page-bg img{
    min-height:70vh;
    object-fit:cover;
  }
  .peb26-vote-footer{position:relative}
  .peb26-vote-bar{
    flex-direction:column;gap:14px;
    border-radius:24px;padding:16px 20px;
    max-width:100%;
  }
  .peb26-steps{max-width:100%;width:100%}
  .peb26-vote-footer__bar{
    grid-template-columns:1fr;
    justify-items:center;text-align:center;
    border-radius:24px;gap:12px;padding:16px 20px;
  }
  .peb26-vote-footer__label{font-size:1.5rem}
  .peb26-vote-footer__count{justify-self:center;text-align:center}
  .peb26-vote-footer__nums{justify-content:center}
  .peb26-vote-footer__btn{width:100%;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  /* exceção: os big numbers mantêm o fade-in com stagger mesmo em reduced-motion,
     pois é uma animação de destaque pedida explicitamente (acompanha o count-up) */
  .numbers-grid .number-block.reveal{
    opacity:0;transform:translateY(28px);
    transition:opacity .7s ease,transform .7s ease;
  }
  .numbers-grid .number-block.reveal.is-visible{opacity:1;transform:none}
  .peb26-steps [data-step-mark]{transition:none}
}