.hero { --fila: clamp(170px, 24vh, 240px); --linha: rgba(255, 255, 255, .075); position: relative; isolation: isolate; overflow: hidden; padding-top: var(--topo); }
.hero-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding-top: clamp(40px, 8vh, 88px); padding-bottom: clamp(36px, 6vh, 64px);
}
.hero-marca {
  flex: 0 0 58%; min-width: 0; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em;
  font: 500 120px/.9 var(--f-titulo); letter-spacing: -.02em; white-space: nowrap; user-select: none;
}
.hero-marca span {
  display: inline-block;
  background: linear-gradient(100deg, #F4F4F5 0 40%, #7E8089 47%, #FFFFFF 51%, #F4F4F5 58% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform 1.3s var(--ease);
}
.selo-hero {
  position: relative; width: 168px; height: 168px; flex: none; display: grid; place-items: center; border-radius: 50%;
  color: var(--texto); transition: opacity 1s .35s var(--ease), transform 1s .35s var(--ease);
}
.selo-hero::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px solid var(--borda-2); transition: border-color .4s, background-color .4s; }
.selo-hero:hover::before { border-color: var(--azul-claro); background: rgba(47, 91, 255, .08); }
.selo-texto { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--suave); font: 500 15px var(--f-titulo); letter-spacing: .04em; }
.selo-centro { position: relative; display: grid; place-items: center; transition: transform .6s var(--ease); }
.selo-centro .marca-simbolo { width: 44px; height: 44px; }
.selo-hero:hover .selo-centro { transform: scale(1.1) rotate(-8deg); }
.hero > :not(.raios) { position: relative; z-index: 1; }
.hero-grade {
  border-top: 1px solid var(--linha);
  background: linear-gradient(to right, var(--linha) 1px, transparent 1px) 0 0 / calc(100% / 7) 100%;
}
.hero-linha {
  height: var(--fila); display: flex; align-items: center; justify-content: space-between; gap: 32px;
  border-bottom: 1px solid var(--linha);
}
.hero-tese { display: flex; align-items: center; gap: 24px; transition: opacity 1s .5s var(--ease), transform 1s .5s var(--ease); }
.hero-retrato { position: relative; width: 84px; height: 84px; flex: none; padding: 6px; border-radius: 50%; }
.hero-retrato::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--azul), rgba(47, 91, 255, 0) 35%, var(--azul-claro) 70%, var(--azul));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.hero-foto { width: 100%; height: 100%; }
.hero-cargo { margin-top: 8px; font: 400 15px/1.3 var(--f-titulo); letter-spacing: .02em; color: var(--fraco); }
.hero-botoes { display: flex; align-items: center; gap: 28px; transition: opacity 1s .65s var(--ease), transform 1s .65s var(--ease); }
.hero-tese h1 { font: 400 clamp(20px, 1.75vw, 27px)/1.25 var(--f-titulo); letter-spacing: .02em; }
.hero-painel { position: relative; height: calc(var(--fila) * 2); overflow: hidden; border-bottom: 1px solid var(--linha); background: #0A0A0B; }
.parede { position: absolute; inset: 0; overflow: hidden; perspective: 1800px; }
.parede::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, .6), rgba(8, 8, 8, .12) 35%, rgba(8, 8, 8, .12) 65%, rgba(8, 8, 8, .7)), rgba(8, 8, 8, .2);
}
.parede-plano {
  position: absolute; left: 50%; top: 50%; width: 2300px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px;
  transform: translate(-50%, -50%) rotateX(38deg) rotateZ(-14deg);
  transition: transform 2.2s var(--ease);
}
.coluna { height: 2400px; overflow: hidden; border-radius: 14px; }
.trilho { display: grid; gap: 30px; padding-bottom: 30px; animation: parede var(--dur, 120s) linear infinite; will-change: transform; }
.coluna.sobe .trilho { animation-direction: reverse; }
.trilho img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); }
@keyframes parede { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.celulas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }
.celulas i { position: relative; border-left: 1px solid var(--linha); border-top: 1px solid var(--linha); }
.celulas i:nth-child(-n+7) { border-top: 0; }
.celulas i::before {
  content: ""; position: absolute; inset: 0; opacity: 1;
  -webkit-backdrop-filter: blur(10px) saturate(.75); backdrop-filter: blur(10px) saturate(.75);
  background: rgba(20, 20, 24, .14); transition: opacity 1.2s var(--ease-io);
}
.celulas i.limpa::before { opacity: 0; }
.celulas i.fixa::before { background: rgba(10, 10, 11, .66); }
.celulas i.fixa + i.fixa { border-left-color: transparent; }
.celulas i.fixa + i.fixa::before { display: none; }
.celulas i.fixa:not(.fixa + .fixa)::before { right: calc(-100% - 1px); }
.celulas i::after { content: ""; position: absolute; inset: 0; background: var(--fundo); opacity: 0; transition: opacity .9s var(--ease) var(--d, 0s); }
.painel-texto {
  position: absolute; right: 0; bottom: 0; width: calc(100% / 7 * 2); height: 50%;
  display: flex; align-items: center; padding: 0 clamp(20px, 2.2vw, 36px);
  font: 400 clamp(17px, 1.4vw, 21px)/1.35 var(--f-titulo); letter-spacing: .02em; color: var(--suave);
  transition: opacity 1s 1.1s var(--ease), transform 1s 1.1s var(--ease);
}
.painel-texto b { font-weight: 400; color: var(--texto); }
.janela-moldura {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0;
  border: 1px solid rgba(108, 139, 255, .75); transition: transform 1.1s var(--ease-io), opacity .6s;
}
.janela-tag {
  position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; gap: 8px; pointer-events: none;
  padding: 8px 14px 8px 11px; border-radius: var(--raio-chip); background: rgba(10, 10, 11, .72); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 14px/1 var(--f-titulo); letter-spacing: .02em;
  opacity: 0; transition: transform 1.1s var(--ease-io), opacity .6s;
}
.janela-tag .ico { width: 16px; height: 16px; color: var(--azul-claro); }
.painel-ativo .janela-moldura, .painel-ativo .janela-tag { opacity: 1; }
@keyframes brilho { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.intro:not(.entrou) .hero-marca span { transform: translateY(105%); }
.intro:not(.entrou) .selo-hero,
.intro:not(.entrou) .hero-tese,
.intro:not(.entrou) .hero-botoes { opacity: 0; transform: translateY(16px); }
.intro:not(.entrou) .celulas i::after { opacity: 1; transition: none; }
.intro:not(.entrou) .painel-texto { opacity: 0; transform: translateY(12px); }
.intro:not(.entrou) .parede-plano { transform: translate(-50%, -50%) rotateX(38deg) rotateZ(-14deg) scale(1.18); }
.faixa {
  overflow: hidden; border-block: 1px solid var(--borda); padding-block: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.faixa-trilho { display: flex; align-items: center; gap: 56px; width: max-content; padding-right: 56px; animation: faixa 40s linear infinite; }
.faixa-trilho span { display: inline-flex; align-items: center; gap: 16px; font: 500 clamp(22px, 2.2vw, 34px)/1 var(--f-titulo); letter-spacing: 0; color: var(--suave); white-space: nowrap; }
.faixa-trilho .ico { width: 28px; height: 28px; color: var(--azul-claro); stroke-width: 1.5; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
@keyframes faixa { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-marca span { animation: brilho 9s 2.5s linear infinite; }
  .hero-retrato::before { animation: gira 6s linear infinite; }
  .selo-texto { animation: gira 20s linear infinite; }
}
@media (max-width: 860px) {
  .hero { --fila: 320px; }
  .hero-cabeca { gap: 22px; padding-top: 32px; padding-bottom: 28px; }
  .hero-marca { flex: 1 1 auto; }
  .selo-hero { width: 96px; height: 96px; }
  .selo-hero::before { inset: 13px; }
  .selo-texto { font-size: 17px; }
  .selo-centro .marca-simbolo { width: 28px; height: 28px; }
  .hero-grade { background-size: calc(100% / 4) 100%; }
  .hero-linha { height: auto; flex-direction: column; align-items: stretch; gap: 22px; padding-block: 28px; }
  .hero-tese { gap: 16px; }
  .hero-retrato { width: 60px; height: 60px; padding: 5px; }
  .hero-cargo { font-size: 14px; }
  .hero-botoes { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .hero-botoes .link-seta { align-self: center; }
  .hero-tese h1 { font-size: 22px; }
  .hero-tese h1 br { display: none; }
  .hero-painel { height: auto; }
  .hero-painel .parede, .celulas { bottom: auto; height: var(--fila); }
  .celulas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .celulas i:nth-child(n+9) { display: none; }
  .celulas i:nth-child(n+5) { border-top: 1px solid var(--linha); }
  .parede-plano { width: 1250px; gap: 16px; }
  .trilho { gap: 16px; padding-bottom: 16px; }
  .coluna { height: 1500px; }
  .painel-texto { position: relative; width: auto; height: auto; margin-top: var(--fila); padding: 24px var(--margem) 28px; border-top: 1px solid var(--linha); font-size: 18px; }
  .faixa { padding-block: 16px; }
  .faixa-trilho { gap: 36px; padding-right: 36px; }
  .faixa-trilho .ico { width: 22px; height: 22px; }
  .janela-tag { font-size: 12px; padding: 6px 11px 6px 9px; }
}
.fx-reduzido .trilho { animation: none; }
.fx-reduzido .faixa-trilho { animation: none; }