/* ============================================================
   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.otf") format("opentype");
  font-weight:500 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bw Stretch";
  src: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.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}

/* 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}

.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,border-color .25s ease,backdrop-filter .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(5,5,6,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.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 Home (imagem 10 Anos) ---------- */
/* mask-image faz o rodapé da imagem fadear pro preto, eliminando o corte abrupto
   na transição pro próximo bloco. Sem padding-top: imagem começa no topo da
   viewport e o header fica overlay (gradient já garante legibilidade do menu). */
.home-hero{
  background:#000;
}
.home-hero img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 75%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 75%,transparent 100%);
}

/* ---------- 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);
}

/* ---------- 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 (sponsors grid 2x4 — Figma) ---------- */
.sponsors{border-top:1px solid var(--line)}

.sponsor-grid{
  display:grid;
  grid-template-areas:
    "master master parceiro parceiro"
    "apoio institucional media realizacao";
  grid-template-columns:repeat(4,1fr);
  gap:56px 32px;
}
.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{
  display:flex;flex-direction:column;align-items:center;
  gap:22px;text-align:center;
}

.sponsor-label{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.18em;color:var(--gold);font-weight:600;
  font-size:.74rem;
  display:inline-flex;align-items:center;gap:14px;
}
.sponsor-label::before,
.sponsor-label::after{
  content:"";width:32px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
}

.sponsor-cell__logos{
  display:flex;flex-wrap:wrap;gap:28px;
  justify-content:center;align-items:center;
}

.sponsor-cell .sponsor-logo{
  width:auto;height:56px;
  border:none;background:none;padding:0;
}
.sponsor-cell .sponsor-logo img{
  max-height:56px;width:auto;
  filter:none;opacity:.95;
  transition:opacity .18s ease;
}
.sponsor-cell .sponsor-logo:hover img{opacity:1}

/* Hierarquia: Master maior que parceiros (referência visual) */
.sponsor-cell--master .sponsor-logo{height:88px}
.sponsor-cell--master .sponsor-logo img{max-height:88px}
.sponsor-cell--parceiro .sponsor-logo{height:72px}
.sponsor-cell--parceiro .sponsor-logo img{max-height:72px}

/* APOIO: grid 2x2 para os 4 logos (SanDisk, JBL, KaBuM!, PlayStation) */
.sponsor-cell--apoio .sponsor-cell__logos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 28px;
  align-items:center;
  justify-items:center;
}

/* Mobile: tudo em 1 coluna */
@media (max-width:760px){
  .sponsor-grid{
    grid-template-areas:"master" "parceiro" "apoio" "institucional" "media" "realizacao";
    grid-template-columns:1fr;gap:42px;
  }
}

/* ---------- 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:18px;justify-content:center;margin:32px 0 40px;
}
.footer-socials a{
  width:58px;height:58px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#120c02;transition:transform .18s ease;
}
.footer-socials a:hover{transform:translateY(-3px)}
.footer-socials svg{width:26px;height:26px}
.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}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}