/* Braslev v0.8 — abertura com BraslevIdent, encerramento fotográfico, scroll natural */
/* trilho sem mix-blend-mode (caro em cada frame de scroll): a cor segue o tema da secção */
.trilho li b { border-color: #fff; } .trilho-linha { background: rgba(255,255,255,.3); } .trilho-linha i { background: #fff; } .trilho li span { color: #fff; }
body[data-tema="claro"] .trilho li b { border-color: var(--tinta); background: var(--papel); }
body[data-tema="claro"] .trilho li.ativo b { background: var(--tinta); }
body[data-tema="claro"] .trilho-linha { background: rgba(18,19,22,.2); } body[data-tema="claro"] .trilho-linha i { background: var(--tinta); }
body[data-tema="claro"] .trilho li span { color: var(--tinta); }
.trilho li b { background: var(--noite); }

/* ---- abertura ---- */
.hero { position: relative; min-height: 100svh; height: auto; background: var(--noite); color: var(--branco); overflow: hidden; display: flex; align-items: center; justify-content: center; padding-top: 64px; }
.hero-palco { position: relative; width: min(100%, calc((100svh - 64px) * 16 / 9)); }
.hero-tela { position: relative; aspect-ratio: 16 / 9; background: var(--noite);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
.hero-video, .hero-final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-video { opacity: 1; transition: none; }
.hero-final[hidden] { display: none; }
.hero-replay { position: absolute; left: 3%; bottom: 6%; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(15,16,18,.55); backdrop-filter: blur(6px); cursor: pointer; display: grid; place-items: center; transition: background .3s, opacity .6s; z-index: 3; }
.hero-replay[hidden] { display: none; }
.hero-replay:hover, .hero-replay:focus-visible { background: var(--amarelo); border-color: var(--amarelo); }
.hero-replay i { width: 0; height: 0; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hero-replay:hover i, .hero-replay:focus-visible i { border-left-color: var(--tinta); }
/* desktop: o título nasce por baixo do logótipo quando o vídeo termina; o CTA fica no canto livre */
.hero-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-kicker { display: block; font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.hero-titulo { max-width: none; font-size: clamp(26px, 3.6vw, 62px); font-weight: 830; font-stretch: 62%; line-height: .95; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3em; }
.hero-titulo .amarelo { color: var(--amarelo); }
.hero-cta { position: absolute; right: 3%; bottom: 4%; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.js .hero-texto .m > span { transform: translateY(110%); }
.js .hero-texto .hero-kicker { opacity: 0; }
.js .hero-cta { opacity: 0; }
.hero.revelado .hero-texto .m > span { transform: none; transition: transform 1.1s var(--ease); }
.hero.revelado .hero-texto .m:nth-child(2) > span { transition-delay: .12s; }
.hero.revelado .hero-texto .hero-kicker { opacity: 1; transition: opacity 1s .1s; }
.hero.cta-pronto .hero-cta { opacity: 1; transition: opacity .9s; }
.hero-texto .m { display: block; overflow: hidden; padding-bottom: .08em; }

/* ---- encerramento ---- */
.fecho { position: relative; z-index: 2; min-height: min(100svh, 920px); background: var(--noite); color: var(--branco); overflow: hidden; display: flex; align-items: flex-end; }
.fecho-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; transform-origin: 70% 50%; }
.fecho-veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,12,.86) 0%, rgba(10,11,12,.5) 38%, rgba(10,11,12,0) 62%), linear-gradient(0deg, var(--noite) 0%, rgba(15,16,18,.55) 14%, rgba(15,16,18,0) 38%), linear-gradient(180deg, rgba(15,16,18,.5) 0%, rgba(15,16,18,0) 22%); }
.fecho-conteudo { position: relative; padding: clamp(100px, 14vw, 200px) var(--gut) clamp(72px, 9vw, 130px); max-width: 1500px; width: 100%; margin: 0 auto; }
.fecho .eyebrow { color: var(--amarelo); }
.fecho h2 { font-size: clamp(50px, 5.6vw, 96px); font-weight: 830; font-stretch: 62%; line-height: .9; letter-spacing: -0.015em; margin: 18px 0 34px; max-width: 7em; }
.fecho h2 .amarelo { color: var(--amarelo); }
.rodape { margin-top: -1px; }

/* ===================== telemóvel ===================== */
@media (max-width: 900px) {
  .hero { align-items: flex-start; justify-content: flex-start; }
  .hero-palco { width: 100%; }
  .hero-tela { -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
  .hero-cta { position: static; }
  .hero-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 26px var(--gut) 0; text-align: left; }
  .hero-kicker { display: none; }
  .hero-titulo { font-size: clamp(42px, 13.2vw, 72px); justify-content: flex-start; line-height: .92; }
  .hero-cta { padding: 26px var(--gut) 34px; display: grid; grid-template-columns: 1fr; }
  .hero-cta .btn { justify-content: center; padding: 17px 20px; }
  .hero-replay { left: 10px; bottom: 10px; width: 40px; height: 40px; }
  .js .hero-texto .m > span { transform: none; } .js .hero-texto .hero-kicker, .js .hero-cta { opacity: 1; }
  .fecho { min-height: 92svh; }
  .fecho-img { object-position: 72% 50%; }
  .fecho-veu { background: linear-gradient(0deg, var(--noite) 0%, rgba(10,11,12,.9) 34%, rgba(10,11,12,.2) 62%, rgba(10,11,12,.45) 100%); }
  .fecho h2 { font-size: clamp(46px, 14vw, 76px); }
}
@media (max-width: 900px) and (max-height: 700px) { .hero-titulo { font-size: 38px; } .hero-texto { padding-top: 16px; } .hero-cta { padding-block: 16px 24px; } }
@media (prefers-reduced-motion: reduce) { .js .hero-texto .m > span { transform: none; } .js .hero-texto .hero-kicker, .js .hero-cta { opacity: 1; } }