/* Warehouse v2: componentes. */

/* `hidden` tem que vencer o display dos componentes: sem isto um container
   escondido pelo JS (cliente inexistente, estado vazio) continuava na tela. */
[hidden] { display: none !important; }

/* ============ topo ============ */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 80;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .8rem var(--gutter);
  transition: background var(--d-media) var(--e-saida), border-color var(--d-media);
  border-bottom: 1px solid transparent;
}
.topo.solido {
  background: rgba(7,9,8,.86);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--linha);
}
.topo__marca { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.topo__marca img { height: 15px; width: auto; }

/* atalhos para as subpaginas, como o mapa pede */
.atalhos { display: flex; align-items: center; gap: .1rem; margin-inline: auto; }
.atalhos a {
  font-family: var(--f-texto); font-size: .875rem; font-weight: 400;
  letter-spacing: -.005em; color: var(--texto-2);
  padding: .8rem .75rem; min-height: 44px;
  display: inline-flex; align-items: center; position: relative;
  transition: color var(--d-curta) var(--e-saida);
}
.atalhos a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .55rem;
  height: 1px; background: var(--brasa);
  scale: 0 1; transform-origin: left center;
  transition: scale var(--d-media) var(--e-saida);
}
.atalhos a:hover, .atalhos a[aria-current="page"] { color: var(--texto); }
.atalhos a:hover::after, .atalhos a[aria-current="page"]::after { scale: 1 1; }

.acao {
  flex: none;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .68rem 1.25rem;
  background: var(--brasa); color: #fff;
  font-family: var(--f-texto); font-size: .875rem; font-weight: 500;
  letter-spacing: -.005em;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  transition: background var(--d-curta) var(--e-saida);
}
.acao:hover { background: var(--ferrugem); }

.burger {
  display: none; width: 44px; height: 44px; padding: 0; flex: none;
  background: none; border: 1px solid var(--linha-forte); color: inherit; cursor: pointer;
}
.burger span { display: block; width: 16px; height: 1px; background: currentColor; margin: 3px auto; }

@media (max-width: 940px) {
  .burger { display: block; margin-left: auto; }
  .acao { display: none; }
  .atalhos {
    position: fixed; inset: 0; margin: 0;
    flex-direction: column; justify-content: center; align-items: stretch;
    gap: 0; padding: 18vh var(--gutter);
    background: rgba(7,9,8,.98);
    opacity: 0; visibility: hidden;
    transition: opacity var(--d-media) var(--e-saida), visibility var(--d-media);
  }
  .atalhos.aberta { opacity: 1; visibility: visible; }
  .atalhos a { font-size: 1.3rem; padding: 1rem 0; border-bottom: 1px solid var(--linha); }
  .atalhos a::after { display: none; }
}

/* ============ PALCO: o fundo vivo de um container ============ */
/* Um item por vez, deriva lenta com crossfade. Sem barra de progresso e sem
   contador: o fundo e ambiente, nao player. O item entra deslocado a direita e
   atravessa o quadro devagar enquanto esta em cena; o que sai continua
   derivando por baixo e ja volta assentado na proxima vez.
   `--brilho` e a unica coisa que muda entre um palco parado e um aceso, e cada
   container define o dele. */
.palco__item {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; translate: 4% 0; scale: 1.14;
  transition: opacity 1.15s var(--e-saida),
              translate 7s linear, scale 7s linear,
              filter var(--d-longa) var(--e-saida);
}
.palco__item.e-agora { opacity: var(--brilho, 1); translate: -3% 0; scale: 1.06; }

/* ============ CONTAINER: a unidade da pagina ============ */
/* Ocupa ~82% da tela e deixa a brecha do proximo aparecendo. */
.container {
  position: relative;
  min-height: var(--altura-container);
  display: grid; grid-template-areas: "c";
  isolation: isolate;
}
.container > * { grid-area: c; min-width: 0; }
.container--cheio { min-height: 100svh; }
/* O container de abertura fica em 82svh; os que vem depois dele sao MENORES,
   senao a pagina inteira e um sequencia de blocos do mesmo peso e a capa deixa
   de ser a capa. A brecha continua valendo: o proximo sempre aparece. */
.container--peca {
  min-height: clamp(400px, 62svh, 660px);
  /* um respiro entre um container e o outro: sao duas fotos sangradas coladas,
     e sem a faixa de preto entre elas a emenda le como erro de corte, nao como
     duas pecas diferentes */
  margin-block: clamp(14px, 2.4svh, 30px);
}

/* O FECHAMENTO NAO E UM CONTAINER DE PESO: e uma despedida.
   Em 82svh ele virava quase uma tela inteira vazia com um botao no pe, e pior:
   como nao tem midia, eram 82svh de preto entre o ultimo trabalho e o rodape.
   Passa a ter a altura do proprio conteudo, com respiro, e o degrade de cor
   fica como assinatura em vez de fundo de container.
   Tambem sai do `data-foco`: escurecer o ultimo bloco da pagina, que e onde
   esta a acao, nao ajuda ninguem. */
.container--fim { min-height: 0; }
.container--fim .container__dentro {
  padding-block: clamp(3.4rem, 9vh, 5.5rem);
  align-content: start;
  gap: 1.1rem;
}
/* o fio que fecha a pagina: o ultimo container de trabalho termina aqui */
.container--fim::before {
  content: ""; position: absolute; z-index: 5;
  top: 0; left: var(--gutter); right: var(--gutter); height: 1px;
  background: var(--linha);
}

.container__fundo { position: relative; overflow: hidden; z-index: 0; }
.container__fundo > video,
.container__fundo > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Emenda pelo material, nao por corte: o fundo se dissolve nas bordas ate a
   cor da pagina, entao um container entra no outro sem parede.
   De motion/transicao-nevoa-whitedesert. */
.container__fundo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--tinta) 0%, rgba(7,9,8,0) 14%),
    linear-gradient(to top,    var(--tinta) 0%, rgba(7,9,8,0) 16%);
}

.container__veu {
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(7,9,8,.60) 0%, rgba(7,9,8,.32) 52%, rgba(7,9,8,.06) 100%),
    linear-gradient(to top,   rgba(7,9,8,.46) 0%, rgba(7,9,8,.16) 46%, rgba(7,9,8,0) 74%);
}

/* Capas interativas: o frame continua sendo o estado de espera; o vídeo só
   ganha presença quando a pessoa aponta ou chega por teclado. O véu nunca
   some por completo, apenas deixa de dominar o quadro em foco. */
.container--video-interativo .container__veu {
  transition: opacity .5s var(--e-saida);
}
.container--video-interativo .palco__item {
  filter: saturate(.38) grayscale(.24) brightness(.46) contrast(1.02);
}
.container--video-interativo .palco__item.e-agora {
  filter: saturate(.58) grayscale(.08) brightness(.62) contrast(1.02);
}
.container--video-interativo.video-em-foco .container__veu { opacity: .42; }
.container--video-interativo.video-em-foco .palco__item:not(.e-agora) {
  filter: saturate(.18) grayscale(.45) brightness(.34);
}
.container--video-interativo.video-em-foco .palco__item.e-agora {
  filter: saturate(1.08) grayscale(0) brightness(1) contrast(1.04);
}

/* O acento do container, na mesma gramatica dos cartoes das frentes: uma cor
   propria subindo do canto, para que dois containers seguidos nao leiam como a
   mesma caixa com a foto trocada. So entra onde `--acento` foi definido. */
.container--acento .container__veu { position: relative; }
@supports (background: color-mix(in srgb, red 30%, transparent)) {
  .container--acento .container__veu::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--acento) 26%, transparent) -14%,
      rgba(7,9,8,0) 56%);
  }
}

.container__foco {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: var(--tinta);
  opacity: var(--foco, 0);
  transition: opacity .55s var(--e-saida);
}
[data-foco] { position: relative; }

.container__dentro {
  z-index: 7;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: clamp(6.5rem, 14vh, 9rem) var(--gutter) clamp(3rem, 7vh, 5rem);
  display: grid; align-content: center; gap: 1.3rem;
}
.container--pe .container__dentro { align-content: end; }

.container__h { font-size: var(--t-titulo); max-width: 20ch; }
.container__texto { color: rgba(255,255,255,.88); font-size: var(--t-sub); max-width: 54ch; }

/* linhas verticais de grade, herdadas da referencia de nevoa: dao estrutura
   em pagina que e quase toda imagem */
.grade-fina {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to right,
    rgba(255,255,255,.045) 0 1px, transparent 1px calc(100% / 6));
  mix-blend-mode: overlay;
}
@media (max-width: 760px) { .grade-fina { display: none; } }

/* ============ A VINHETA ============ */
/* O que ja passou e o que esta por vir ficam levemente desfocados e escuros
   nas duas bordas da tela, e o container que a pessoa esta olhando fica no
   meio, limpo. Pedido do Arthur: dar um spoiler do proximo container sem
   entregar ele inteiro.
   E diferente do FOCO, que mede container por container: a vinheta e da
   JANELA, nao do conteudo, entao ela segue a rolagem sem depender de onde
   comeca ou termina cada secao.
   Fica ABAIXO do topo (z-index 80): a barra tem o blur dela e precisa
   continuar nitida. */
.vinheta { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.vinheta > span {
  position: absolute; left: 0; right: 0;
  height: clamp(64px, 12svh, 150px);
  -webkit-backdrop-filter: blur(7px) saturate(.85);
  backdrop-filter: blur(7px) saturate(.85);
}
/* A mascara faz o desfoque MORRER em direcao ao centro, em vez de terminar
   numa linha reta. Sem ela a vinheta vira duas faixas coladas na tela. */
.vinheta > span:first-child {
  top: 0;
  background: linear-gradient(to bottom, rgba(7,9,8,.62) 0%, rgba(7,9,8,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
.vinheta > span:last-child {
  bottom: 0;
  background: linear-gradient(to top, rgba(7,9,8,.70) 0%, rgba(7,9,8,0) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
  mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}
/* No topo absoluto da pagina nao ha "o que ja passou": a faixa de cima so
   entra depois que a rolagem comeca. Puramente aditivo, a classe vem do JS. */
.vinheta > span:first-child { opacity: 0; transition: opacity .5s var(--e-saida); }
.rolou .vinheta > span:first-child { opacity: 1; }

/* Desfoque de tela inteira custa caro no celular e o ganho e pequeno numa tela
   em que so cabe um container: ali fica so o escurecimento. */
@media (max-width: 760px) {
  .vinheta > span { height: clamp(48px, 9svh, 90px); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vinheta > span { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============ ABERTURA (container principal) ============ */
.abertura {
  min-height: var(--altura-container);
  /* A marca entra em `scale`, e transform estende a area rolavel do documento:
     no celular a entrada em 1.7 empurrava o scrollWidth para 443 num viewport
     de 375. O clip aqui contem a sobra sem criar contexto de rolagem, e nada
     dentro da abertura precisa escapar dela. */
  overflow: clip;
}

/* A imagem nasce do chanfro da marca e cresce ate a tela inteira.
   De motion/mascara-arco-reveal-era. */
.abertura__fundo { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .abertura__fundo { animation: nasceDoChanfro 1.5s var(--e-saida) both; }
}
@keyframes nasceDoChanfro {
  from {
    clip-path: polygon(44% 38%, 56% 38%, 56% 44%, 62% 44%, 62% 62%, 50% 62%, 44% 56%);
    opacity: 0;
  }
  35% { opacity: 1; }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    opacity: 1;
  }
}

.abertura__marca {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: .4rem;
}
.abertura__meta { gap: .8rem; }
/* A MARCA NO LAYOUT, COM A ENTRADA DE UMA ABERTURA
   Historico curto: o wordmark comecou empilhado no eixo da headline e perdia;
   virou chao sangrando pela base e passou a competir por excesso em tela
   larga. A terceira e a certa: ele volta para cima da headline, em tamanho
   claramente subordinado, mas ENTRA grande e assenta. A notoriedade fica no
   tempo, nao no espaco, e a hierarquia parada continua com tres escalas.
   `scale` nao reflui layout, entao a marca pode nascer maior que a caixa dela
   sem empurrar nada; a sobra lateral e cortada pelo overflow-x:clip do body. */
.abertura__wordmark { height: clamp(22px, 2.9vw, 38px); width: auto; }

/* ==========================================================================
   SEQUENCIA DA ABERTURA
   Uma gramatica so: tudo sai de dentro de uma mascara (`revela`), inclusive o
   wordmark. A versao anterior dava a ele um movimento proprio, em escala, que
   destoava do resto e demorava 1,6s sozinho.
   O fundo esmaece JUNTO com as letras, nao antes: o site inteiro se revela no
   mesmo gesto. Teto total ~1,75s, contra 3s da versao anterior.
   ========================================================================== */

.mascara { display: block; overflow: hidden; padding-bottom: .06em; }
.mascara > * { display: block; }

.aguarda-fonte .abertura__wordmark,
.aguarda-fonte .abertura__filete,
.aguarda-fonte .abertura__oficial,
.aguarda-fonte .abertura__h .mascara > span,
.aguarda-fonte .abertura__sub,
.aguarda-fonte .abertura__cta > *,
.aguarda-fonte .abertura .container__fundo,
.aguarda-fonte .brecha,
.aguarda-fonte .topo__marca,
.aguarda-fonte .atalhos a,
.aguarda-fonte .acao { animation-play-state: paused; }

@media (prefers-reduced-motion: no-preference) {

  /* o lugar esmaece junto com a marca, no mesmo gesto */
  .abertura .container__fundo { animation: esmaece .95s var(--e-saida) .1s both; }

  /* a marca usa a MESMA revelacao das linhas da headline */
  .abertura__wordmark { animation: revela .68s var(--mola-suave) .14s both; }

  .abertura__filete  { animation: desenha .5s var(--e-saida) .34s both; }
  .abertura__oficial { animation: revela .58s var(--e-saida) .42s both; }

  .abertura__h .mascara > span { animation: revela .7s var(--mola-suave) both; }
  .abertura__h .mascara:nth-child(1) > span { animation-delay: .52s; }
  .abertura__h .mascara:nth-child(2) > span { animation-delay: .62s; }

  .abertura__sub { animation: sobe .62s var(--e-saida) .76s both; }

  .abertura__cta > * { animation: assenta .55s var(--mola-viva) both; }
  .abertura__cta > *:nth-child(1) { animation-delay: .88s; }
  .abertura__cta > *:nth-child(2) { animation-delay: .96s; }

  /* a interface encosta por ultimo */
  .topo__marca { animation: sobe .48s var(--e-saida) 1.00s both; }
  .atalhos a   { animation: sobe .44s var(--e-saida) both; }
  .atalhos a:nth-child(1) { animation-delay: 1.04s; }
  .atalhos a:nth-child(2) { animation-delay: 1.09s; }
  .atalhos a:nth-child(3) { animation-delay: 1.14s; }
  .atalhos a:nth-child(4) { animation-delay: 1.19s; }
  .atalhos a:nth-child(5) { animation-delay: 1.24s; }
  .acao        { animation: assenta .5s var(--mola-viva) 1.29s both; }
  .brecha      { animation: piscaEntra .55s var(--e-saida) 1.36s both; }
}

@keyframes esmaece  { from { opacity: 0; scale: 1.035; } to { opacity: 1; scale: 1; } }
@keyframes desenha  { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes revela   { from { translate: 0 105%; } to { translate: 0 0; } }
@keyframes sobe     { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes assenta  { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes piscaEntra { from { opacity: 0; } to { opacity: 1; } }

/* Terminada a sequencia a pagina volta ao estado estatico autoral: sem
   animation segurando camada de composicao e sem transform residual.
   O JS so LIMPA; sem ele o fill-mode `both` ja deixa tudo no lugar certo. */
.abertura--pronta .abertura__wordmark,
.abertura--pronta .abertura__filete,
.abertura--pronta .abertura__oficial,
.abertura--pronta .abertura__h .mascara > span,
.abertura--pronta .abertura__sub,
.abertura--pronta .abertura__cta > *,
.abertura--pronta .container__fundo,
.topo--pronto .topo__marca,
.topo--pronto .atalhos a,
.topo--pronto .acao { animation: none; }

.abertura__filete {
  width: 44px; height: 1px; background: var(--brasa);
  transform-origin: left center; flex: none;
}
.abertura__oficial {
  font-family: var(--f-micro); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,.86);
}
.abertura__h { max-width: 15ch; }
.abertura__sub { color: rgba(255,255,255,.88); font-size: var(--t-sub); max-width: 46ch; }
.abertura__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }

/* O PORTAL (.btn): chanfro vivo + brasa esfria.
   Em repouso e a placa de brasa com o chanfro da marca. No hover o chanfro
   morde mais fundo, com mola, e a brasa "esfria" para quase branco, com o
   texto passando a tinta. No clique (portal.js liga `.disparou`) um anel
   branco nasce do ponto do toque, fecha o branco e a seta dispara. */
@property --c { syntax: "<length>"; inherits: false; initial-value: 12px; }
@property --f { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.btn {
  --c: 12px; --f: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.55rem;
  background: color-mix(in oklab, var(--brasa) calc(100% - var(--f)), #fff);
  color: #fff; border: 0; cursor: pointer;
  font-family: var(--f-texto); font-size: .9375rem; font-weight: 500;
  letter-spacing: -.005em; -webkit-tap-highlight-color: transparent;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: --c .5s var(--mola-viva), --f .9s var(--e-saida), color .35s var(--e-saida);
}
.btn svg { flex: none; transition: translate .45s var(--e-saida); }
.btn::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: var(--x, 50%); top: var(--y, 50%); width: 10px; height: 10px; margin: -5px;
  border-radius: 50%; background: #fff; scale: 0;
}
.btn:hover:not(:disabled), .btn:focus-visible { --c: 20px; --f: 72%; color: var(--tinta); }
.btn:hover:not(:disabled) svg, .btn:focus-visible svg { translate: 4px 0; }
.btn.disparou { --f: 100%; color: var(--tinta); }
.btn.disparou::after { animation: portalAnel .6s var(--e-saida) forwards; }
.btn.disparou svg { animation: portalSeta .6s var(--e-saida) .08s forwards; }
@keyframes portalAnel { to { scale: 60; } }
@keyframes portalSeta { 40% { translate: 160% 0; opacity: 0; } 41% { translate: -160% 0; } to { translate: 0 0; opacity: 1; } }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* o vazado continua vidro sobre o video; no hover esfria do mesmo jeito,
   so que partindo do escuro: vira placa branca */
.btn--vazio {
  background: color-mix(in oklab, rgba(7,9,8,.5) calc(100% - var(--f)), #fff);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
  backdrop-filter: blur(8px);
}
.btn--vazio:hover:not(:disabled), .btn--vazio:focus-visible { --f: 92%; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition-duration: .01ms; }
  .btn.disparou::after, .btn.disparou svg { animation: none; }
}

/* a brecha do proximo container, explicita */
.brecha {
  position: absolute; z-index: 8; left: var(--gutter); bottom: 1.2rem;
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--f-micro); font-size: var(--t-micro);
  letter-spacing: .09em; text-transform: uppercase; color: var(--texto-3);
}
.brecha::after {
  content: ""; width: 1px; height: 22px;
  background: linear-gradient(var(--brasa), transparent);
}

/* No celular a abertura continua sendo um container de viewport: a mídia ocupa
   a cena inteira, mas a janela de leitura do vídeo fica quadrada (1:1). O texto
   volta para cima dela; a adaptação está no enquadramento, não na redução da
   importância do hero. */
@media (max-width: 760px) {
  .abertura {
    min-height: var(--altura-container);
    grid-template-areas: "c";
    grid-template-rows: none;
    align-content: stretch;
    background: var(--tinta);
  }
  .abertura > * { grid-area: c; }
  /* o chanfro continua sendo a assinatura do container, agora na cena inteira */
  .abertura .container__fundo {
    grid-area: c; aspect-ratio: auto;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  }
  .abertura .abertura__video {
    inset: 0 auto 0 50%;
    width: max(100%, var(--altura-container));
    max-width: none; height: 100%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    object-fit: cover; object-position: center;
  }
  .abertura .container__veu {
    grid-area: c;
    background:
      linear-gradient(to top, rgba(7,9,8,.92) 0%, rgba(7,9,8,.38) 46%, rgba(7,9,8,.06) 78%),
      linear-gradient(to right, rgba(7,9,8,.26) 0%, rgba(7,9,8,0) 78%);
  }
  .abertura .container__fundo::after {
    background: linear-gradient(to bottom, rgba(7,9,8,.08) 0%, rgba(7,9,8,0) 36%, var(--tinta) 100%);
  }
  .abertura .container__dentro {
    grid-area: c;
    padding: 5.2rem var(--gutter) 3.2rem;
    align-content: end; justify-items: center; text-align: center;
  }
  .abertura .container__foco { grid-area: c; }
  /* no toque nao ha ponteiro para sugerir rolagem, e na grade da abertura
     esta linha dividia celula com o conteudo e caia por cima do CTA */
  .brecha { display: none; }
}

/* ============ FRENTES ============ */
/* O CONTAINER QUE VENDE.
   Enquanto as paginas de setor estiveram no ar, o cartao era uma porta e podia
   ser magro: nome, uma linha, uma seta. Com as paginas desligadas ele deixou de
   levar a lugar nenhum, e passou a ser o UNICO lugar do site onde as quatro
   frentes se apresentam. Entao ele entrega ali mesmo: ~70svh de altura, uma
   headline forte, uma entrega em foco e peca real rodando no fundo.

   Fundo NAO e video: e foto, e ela troca sozinha. Quebra a monotonia de video
   atras de video sem colocar mais um player na pagina.
   De grid-blocos-tipograficos-aspen (a celula e a mascara da palavra, e o fio
   de 1px e o proprio fundo da grade), lista-destaque-scroll-seasats (uma
   capacidade por vez acendendo com as imagens dela) e
   sticky-feature-cards-cerebrium (material de verdade, animando so em cena). */
.frentes {
  position: relative; isolation: isolate; overflow: hidden;
  scroll-margin-top: 4.5rem; background: var(--tinta);
}
.frentes__cabeca {
  position: relative; isolation: isolate;
  min-height: clamp(260px, 42vh, 430px);
  /* A headline fecha a transição e pertence à fileira abaixo: o espaço maior
     fica acima, enquanto o respiro inferior é curto e deliberado. */
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(1.75rem, 4vh, 2.75rem);
  display: grid; place-items: end center; text-align: center;
}
.frentes__cabeca::before {
  content: ""; position: absolute; z-index: -1;
  inset: -18% 50% -8%; width: 108vw; translate: -50% 0;
  background:
    radial-gradient(ellipse 28% 58% at 15% 100%, rgba(252,56,0,.24), transparent 72%),
    radial-gradient(ellipse 28% 58% at 39% 100%, rgba(228,102,12,.18), transparent 72%),
    radial-gradient(ellipse 28% 58% at 64% 100%, rgba(120,180,255,.16), transparent 72%),
    radial-gradient(ellipse 28% 58% at 88% 100%, rgba(120,255,190,.14), transparent 72%);
  filter: blur(42px); opacity: .9; pointer-events: none;
}
.frentes__cabeca::after {
  content: ""; position: absolute; inset: auto 50% 0; width: 100vw;
  height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, #fc3800 0 25%, #e4660c 25% 50%, #78b4ff 50% 75%, #78ffbe 75%);
  opacity: .72;
}
.frentes__h { font-size: var(--t-titulo); max-width: 18ch; text-wrap: balance; }
.frentes__h .mascara { display: block; }
.frentes__h em {
  display: inline-block;
  color: var(--brasa);
  font-style: normal;
  transform-origin: left bottom;
}

/* so aparece no celular, onde a fileira vira carrossel */
.frentes__dica { display: none; }

.frentes__grade {
  display: grid; gap: 1px; background: var(--linha);
  border-block: 1px solid var(--linha);
}
@media (min-width: 720px)  { .frentes__grade { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px) { .frentes__grade { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.frente {
  --acento: var(--brasa);
  /* quanto da foto aparece. o cartao em foco sobe esse valor, e e a unica
     coisa que muda entre um cartao parado e um cartao aceso */
  --brilho: .42;
  position: relative; isolation: isolate;
  /* 70% da tela, que era ~42vh. O cartao deixou de ser item de fileira e
     virou container, no mesmo ritmo dos outros containers da pagina. */
  min-height: clamp(460px, 70svh, 760px);
  display: grid; grid-template-areas: "f";
  overflow: hidden;
  background: var(--tinta-2);
  cursor: default;
  /* o nome da frente e medido contra a LARGURA DO CARTAO, nao contra a da
     tela: em quatro colunas "Desenvolvimento" estourava a celula enquanto
     "Video" sobrava. Com cqi as duas palavras assentam na mesma proporcao. */
  container-type: inline-size;
}
.frente > * { grid-area: f; min-width: 0; }

/* o fio de acento no topo: o sinal de peso do cartao, e o primeiro elemento
   da chegada dele */
.frente::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 4;
  background: var(--acento);
  transform-origin: left center;
}

/* ---- carrossel de fundo ----
   Deriva lenta com crossfade. Sem barra de progresso e sem contador: o fundo e
   ambiente, nao player. A imagem entra deslocada a direita e atravessa o
   quadro devagar enquanto esta em cena; a que sai continua derivando por baixo
   e ja volta assentada na proxima vez. */
.frente__fundo { position: relative; z-index: 0; overflow: hidden; }
.frente .palco__item {
  filter: grayscale(1) contrast(1.08);
  transition: filter .55s var(--e-saida), opacity var(--d-longa) var(--e-saida);
}

.frente:hover, .frente:focus-within, .frente--ativa { --brilho: .74; }
.frente:hover .palco__item.e-agora,
.frente--ativa .palco__item.e-agora { filter: grayscale(0) contrast(1); }

/* cada frente tem sua cor, entao a fileira nao le como quatro caixas iguais */
.frente__cor {
  z-index: 1; pointer-events: none;
  /* O VEU COBRE O CARTAO INTEIRO, nao so a base. Enquanto o texto morava no
     pe do cartao bastava escurecer embaixo; agora ele vai do topo ao pe e a
     foto passa por tras da lista inteira. Mesmo no cartao aceso o ponto mais
     claro fica em .55 de preto, que e o que mantem a lista legivel. */
  background: linear-gradient(to top,
    rgba(7,9,8,.95) 16%, rgba(7,9,8,.80) 52%, rgba(7,9,8,.58) 86%, transparent 132%);
  transition: opacity var(--d-longa) var(--e-saida);
}

@supports (background: color-mix(in srgb, red 30%, transparent)) {
  .frente__cor {
    background:
      linear-gradient(to top,
        rgba(7,9,8,.95) 16%,
        rgba(7,9,8,.80) 52%,
        rgba(7,9,8,.58) 86%,
        color-mix(in srgb, var(--acento) 34%, transparent) 134%);
  }
}

/* ANCORAGEM NO TOPO, e nao na base como nos outros containers.
   Ancorado embaixo, cada cartao terminava numa altura diferente (Video tem
   nove entregas, Eventos tem cinco) e os quatro nomes viravam uma escada. Numa
   secao cujo argumento e "peso igual entre elas", escada le como hierarquia.
   Do topo, os quatro nomes caem na MESMA linha e a diferenca de tamanho de
   lista fica onde nao significa nada: no meio. A prova volta para a base. */
.frente__dentro {
  z-index: 3; padding: clamp(1.6rem, 2.4vw, 2.3rem);
  display: grid; grid-template-rows: auto 1fr; gap: 1rem; align-content: start;
  /* O texto miudo atravessa o cartao inteiro, e a foto passa por tras dele. A
     sombra resolve o trecho claro da foto sem precisar escurecer o veu de
     novo: escurecer mais apagaria a foto, que e o material que faz o cartao
     valer a pena. */
  text-shadow: 0 1px 14px rgba(7, 9, 8, .55);
}

/* o indice: escala de indice, nao de titulo. O fio ao lado e o que da a ele
   presenca sem disputar com o nome da frente. */
.frente__n {
  display: flex; align-items: center; gap: .8rem;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}
.frente__n::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--linha-forte), transparent);
}

.frente__base {
  align-self: stretch; display: grid; gap: .8rem;
  grid-template-rows: auto auto 1fr;
}

.frente__h {
  position: relative; width: max-content; max-width: 100%; isolation: isolate;
  font-size: clamp(1.75rem, 9.4cqi, 3rem);
  line-height: .94; letter-spacing: -.035em;
  text-shadow: 0 0 0 transparent;
  transition: color .35s var(--e-saida), text-shadow .35s var(--e-saida);
}
.frente__h::after {
  content: ""; position: absolute; left: 0; bottom: -.32em;
  width: 46%; height: 2px; background: var(--acento);
  box-shadow: 0 0 14px var(--acento);
  transform-origin: left center;
  animation: assinaFrente 3.8s var(--e-saida) infinite;
}
.frente:hover .frente__h,
.frente:focus-within .frente__h,
.frente--ativa .frente__h {
  color: #fff;
  text-shadow: 0 0 18px color-mix(in srgb, var(--acento) 54%, transparent);
}
.frente__headline {
  color: var(--texto-2);
  font-size: clamp(1rem, 3.5cqi, 1.25rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -.015em;
  max-width: 18ch;
}
.frente__headline em { color: inherit; font-style: normal; }

/* uma entrega por vez: o cartao apresenta o servico em vez de despejar uma
   lista. O texto completo continua disponivel no DOM para leitura assistiva. */
.frente__dinamica {
  align-self: end; display: grid; gap: .55rem;
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-top: 1rem; border-top: 1px solid var(--linha);
}
.frente__entrega-kicker {
  font-family: var(--f-micro); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acento);
}
.frente__entrega-text {
  min-height: 2em; max-width: 13ch;
  font-size: clamp(1.55rem, 7.4cqi, 2.65rem);
  font-weight: 650; line-height: .94; letter-spacing: -.04em;
  text-wrap: balance;
}
.frente__entrega-text--entra { animation: trocaEntrega .62s var(--e-saida) both; }
@keyframes trocaEntrega {
  0% { opacity: 0; translate: 0 .55em; filter: blur(7px); clip-path: inset(100% 0 0); }
  58% { filter: blur(0); }
  to { opacity: 1; translate: 0 0; filter: blur(0); clip-path: inset(0); }
}
@keyframes assinaFrente {
  0%, 65%, 100% { scale: .28 1; opacity: .42; }
  24%, 44% { scale: 1 1; opacity: 1; }
}
@keyframes enfatizaMelhor {
  from {
    opacity: 0; translate: 0 .3em; scale: .9 1;
    filter: blur(5px); clip-path: inset(0 100% 0 0);
  }
  48% { filter: blur(0); }
  to {
    opacity: 1; translate: 0 0; scale: 1 1;
    filter: blur(0); clip-path: inset(0);
  }
}

/* ---- a chegada do cartao ----
   Mesma gramatica da abertura: tudo sai de dentro de uma mascara. Dispara uma
   vez, por observer, e nao pelo scroll: mola que anda para tras quando a
   pessoa sobe a pagina vira quique. A classe `frentes-anima` so existe com JS,
   entao sem JS os cartoes nascem prontos. */
@media (prefers-reduced-motion: no-preference) {
  .frentes__cabeca--espera .frentes__h .mascara > span { translate: 0 110%; }
  .frentes__cabeca--entrou .frentes__h .mascara:nth-child(1) > span {
    animation: revela .75s var(--mola-suave) both;
  }
  .frentes__cabeca--entrou .frentes__h .mascara:nth-child(2) > span {
    animation: revela .75s var(--mola-suave) .24s both;
  }
  .frentes__cabeca--entrou .frentes__h .frentes__linha--final em {
    animation: enfatizaMelhor .7s var(--mola-viva) .58s both;
  }
  .frentes-anima .frente::before { scale: 0 1; }
  .frentes-anima .frente__fundo { opacity: 0; }
  .frentes-anima .mascara > span { translate: 0 105%; }
  .frentes-anima .frente__headline,
  .frentes-anima .frente__dinamica { opacity: 0; }

  .frente--entrou::before      { animation: desenha .75s var(--e-saida) calc(var(--i) * .07s) both; }
  .frente--entrou .frente__fundo { animation: esmaece 1.1s var(--e-saida) calc(var(--i) * .07s) both; }
  .frente--entrou .frente__n .mascara > span { animation: revela .58s var(--mola-suave) calc(.06s + var(--i) * .07s) both; }
  .frente--entrou .frente__h .mascara > span { animation: revela .74s var(--mola-suave) calc(.13s + var(--i) * .07s) both; }
  .frente--entrou .frente__headline { animation: sobeCartao .6s var(--e-saida) calc(.26s + var(--i) * .07s) both; }
  .frente--entrou .frente__dinamica { animation: sobeCartao .65s var(--e-saida) calc(.4s + var(--i) * .07s) both; }

  /* nome proprio de proposito: o `sobe` da abertura e redefinido no bloco de
     scroll-driven sem `to`, e la o estado final passa a ser o do elemento. */
  @keyframes sobeCartao { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .frente__h::after { animation: none; scale: 1 1; }
}

/* ============ CLIENTES ============ */
/* Um cliente por vez em tela cheia, com a previa do proximo entrando por uma
   divisoria curva, exatamente como o mapa 2 desenha. */
.clientes { position: relative; }
.clientes__palco {
  position: relative; overflow: hidden;
  min-height: var(--altura-container);
}
.cliente-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-longa) var(--e-saida), visibility var(--d-longa);
}
.cliente-slide.ativo { opacity: 1; visibility: visible; }
.cliente-slide > video, .cliente-slide > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cliente-slide > video { z-index: 1; }
.cliente-slide > img { z-index: 0; }
.cliente-slide__veu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right, rgba(7,9,8,.78) 0%, rgba(7,9,8,.34) 52%, rgba(7,9,8,.06) 100%),
    linear-gradient(to top, rgba(7,9,8,.70) 0%, rgba(7,9,8,0) 50%);
}
.cliente-slide__dentro {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: clamp(6rem, 13vh, 8.5rem) var(--gutter) clamp(6rem, 13vh, 8rem);
  display: grid; align-content: center; gap: 1.1rem;
  pointer-events: none;
}
.cliente-slide__dentro > * { pointer-events: auto; justify-self: start; }
/* Logo oficial do cliente no lugar do nome em texto.
   SEM filtro: as logos ja vem tratadas para fundo escuro no arquivo. A da
   Ecourbanismo mantem o isotipo verde e teve so o lettering clareado, porque
   o marrom original sumia no preto; achatar tudo em branco matava o isotipo.
   A da Equatorial ja e branca de origem. */
.cliente-slide__marca { margin: 0; }
.cliente-slide__marca img {
  height: clamp(36px, 5.4vw, 66px); width: auto; max-width: min(78vw, 430px);
  object-fit: contain;
  opacity: .98;
}
/* A marca do Villa Reale tem uma proporção mais compacta que as demais e
   precisa de mais altura para ocupar o mesmo peso visual, sem esticar o PNG. */
.cliente-slide--villareale .cliente-slide__marca img {
  height: clamp(81px, 10.5vw, 132px);
}
.cliente-slide__nome { font-size: var(--t-display); line-height: .9; letter-spacing: -.035em; }

/* Previa do proximo cliente como painel de VIDRO.
   A versao anterior recortava por elipse e deixava uma linha dura e feia na
   emenda. Agora o painel e um objeto de vidro de sistema, em tres camadas
   (realce em cima, contraluz embaixo, sombra de separacao), de
   codigos-html/vidro-apple-tres-camadas. O video principal continua rodando
   atras e atravessa o material desfocado; o video do proximo cliente roda
   por cima, tambem desfocado e esmaecido, e so entra em foco no hover.
   A borda nao e uma linha: e uma mascara que dissolve o painel no quadro. */
.proximo {
  position: absolute; z-index: 3; inset: 0 0 0 auto;
  width: clamp(200px, 27vw, 420px);
  overflow: hidden;
  border: 0;

  /* iluminacao: o material deixa o video de tras vazar com cor */
  background: color-mix(in srgb, var(--tinta) 30%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);

  /* realce em cima, contraluz embaixo, sombra separando do quadro */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.26),
    -26px 0 60px -30px rgba(0,0,0,.8);

  /* a emenda dissolve em vez de cortar */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);

  transition: width var(--d-longa) var(--e-saida);
}
.clientes:hover .proximo { width: clamp(230px, 31vw, 470px); }

/* o video do proximo roda por cima do vidro, desfocado e esmaecido */
.proximo__midia {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
}
.proximo__midia > video,
.proximo__midia > img {
  position: absolute; inset: -6%;          /* sobra para o blur nao clarear a borda */
  width: 112%; height: 112%; object-fit: cover;
  filter: blur(6px) saturate(118%);
  opacity: .46;
  transition: filter var(--d-longa) var(--e-saida),
              opacity var(--d-longa) var(--e-saida);
}
.proximo:hover .proximo__midia > video,
.proximo:hover .proximo__midia > img { filter: blur(2px) saturate(125%); opacity: .62; }

.proximo__veu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to left, rgba(7,9,8,.18) 0%, rgba(7,9,8,.55) 100%);
}
.proximo__txt {
  position: absolute; z-index: 3;
  right: clamp(1rem, 2vw, 2rem); bottom: clamp(5.5rem, 12vh, 8rem);
  text-align: right; max-width: 15ch;
}
.proximo__rot {
  font-family: var(--f-micro); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
.proximo__nome {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.45rem); line-height: 1.05;
  color: rgba(255,255,255,.92); margin-top: .3rem;
}
.proximo__marca {
  margin-top: .45rem; margin-left: auto;
  height: clamp(16px, 1.6vw, 24px); width: auto; max-width: 100%;
  object-fit: contain; opacity: .9;
}
.proximo--villareale .proximo__marca {
  height: clamp(22px, 2.2vw, 32px);
}
/* No celular o painel lateral nao cabe, mas o vidro e o momento assinatura
   deste container: vira um cartao de canto, acima dos controles. */
@media (max-width: 760px) {
  .proximo {
    /* no topo: o conteudo do slide e ancorado no pe e o CTA corria por baixo
       do cartao quando ele ficava no canto inferior */
    inset: 0 0 auto auto;
    width: 40vw; max-width: 172px; height: 25vw; max-height: 106px;
    margin: 4.4rem var(--gutter) 0 0;
    -webkit-mask-image: none; mask-image: none;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.3),
      0 14px 34px -18px rgba(0,0,0,.85);
  }
  .proximo__txt {
    right: .6rem; bottom: .5rem; left: .6rem; max-width: none;
  }
  .proximo__rot { font-size: 8.5px; letter-spacing: .1em; }
  .proximo__nome { font-size: .82rem; margin-top: .15rem; }
  .proximo__marca { height: 13px; margin-top: .25rem; }
  .proximo--villareale .proximo__marca { height: 18px; }
  .proximo__midia > video, .proximo__midia > img { filter: blur(4px) saturate(120%); opacity: .5; }
  .proximo__veu { background: linear-gradient(to top, rgba(7,9,8,.72), rgba(7,9,8,.2)); }
}

/* sem suporte a backdrop-filter o painel vira um veu solido, nunca um buraco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .proximo { background: rgba(7,9,8,.72); }
}

.clientes__controles {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 0 var(--gutter) clamp(1.4rem, 3.5vh, 2.4rem);
  display: flex; align-items: center; gap: .9rem;
}
.seta {
  width: 46px; height: 46px; flex: none;
  background: rgba(7,9,8,.45); color: var(--texto);
  border: 1px solid var(--linha-forte); cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(8px);
  transition: border-color var(--d-curta) var(--e-saida), background var(--d-curta) var(--e-saida);
}
.seta:hover:not(:disabled) { border-color: var(--brasa); background: rgba(7,9,8,.82); }
.seta:disabled { opacity: .3; cursor: not-allowed; }
.seta svg { width: 16px; height: 16px; }

.regua { display: flex; gap: .5rem; flex: 1; }
.regua button { flex: 1; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; display: flex; align-items: center; }
.regua i { display: block; width: 100%; height: 2px; background: var(--linha-forte); overflow: hidden; position: relative; }
.regua i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brasa);
}
.regua button[aria-current="true"] i::after { width: var(--p, 0%); }
.indice { font-family: var(--f-micro); font-size: var(--t-micro); color: rgba(255,255,255,.72); letter-spacing: .1em; flex: none; }

/* ============ CONTAINER FINAL (equipe + contato) ============ */
.final { position: relative; }
.final__grade { display: grid; }
@media (min-width: 900px) { .final__grade { grid-template-columns: 1.05fr 1fr; } }

.equipe {
  position: relative; overflow: hidden;
  min-height: clamp(380px, 56vh, 620px);
}
@media (min-width: 900px) {
  /* a divisoria curva do mapa */
  .equipe { clip-path: ellipse(128% 122% at 0% 50%); }
}
.equipe__mosaico { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.equipe__mosaico img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: grayscale(1); }
.equipe__veu { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,9,8,.92) 10%, rgba(7,9,8,.45) 100%); }
.equipe__dentro { position: absolute; inset: auto 0 0 0; padding: clamp(1.6rem, 4vw, 3rem); display: grid; gap: .8rem; }

/* ============ PORTAS PARA OUTROS PROJETOS E EQUIPE ============ */
.portas { padding: clamp(4rem, 9vw, 8rem) 0; background: var(--tinta-2); }
.portas__cabeca {
  position: relative; isolation: isolate;
  min-height: clamp(180px, 25vh, 280px);
  padding: clamp(2.8rem, 6vw, 5rem) var(--gutter) clamp(1.25rem, 3vw, 2rem);
  display: grid; place-items: end center; text-align: center;
  margin-bottom: clamp(.9rem, 2.5vw, 1.75rem);
}
.portas__cabeca::after {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: 0; width: min(8rem, 22vw); height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--brasa) 24%, var(--brasa) 76%, transparent);
  transform-origin: center;
  opacity: .9;
}
.portas__cabeca .container__h { max-width: 16ch; }
@media (prefers-reduced-motion: no-preference) {
  .portas__cabeca--espera .container__h {
    opacity: 0; translate: 26px 10px; clip-path: inset(0 100% 0 0);
  }
  .portas__cabeca--espera::after { scale: 0 1; opacity: 0; }
  .portas__cabeca--entrou .container__h {
    animation: entraPortasTitulo .78s var(--e-saida) .04s both;
  }
  .portas__cabeca--entrou::after {
    animation: desenhaPortasFilete .62s var(--e-saida) .28s both;
  }
  @keyframes entraPortasTitulo {
    from { opacity: 0; translate: 26px 10px; clip-path: inset(0 100% 0 0); }
    to { opacity: 1; translate: 0 0; clip-path: inset(0); }
  }
  @keyframes desenhaPortasFilete {
    from { scale: 0 1; opacity: 0; }
    to { scale: 1 1; opacity: .9; }
  }
}
.portas__grade { display: grid; gap: 1px; background: var(--linha); }
@media (min-width: 760px) { .portas__grade { grid-template-columns: 1fr 1fr; } }
.porta {
  position: relative; min-height: clamp(420px, 62svh, 700px); overflow: hidden;
  isolation: isolate; display: block; background: var(--tinta);
}
.porta__midia {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; scale: 1;
  transform-origin: center;
  transition: scale 2.8s cubic-bezier(.42, 0, 1, 1);
}
.porta__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; translate: 0 -100%;
  transition: translate .95s var(--e-saida), opacity .65s var(--e-saida), filter .45s var(--e-saida);
}
.porta__slide--ativo { z-index: 1; opacity: 1; translate: 0 0; }
.porta__slide--saindo { z-index: 2; opacity: 0; translate: 0 100%; }
.porta__slide--entrando { z-index: 0; opacity: 0; translate: 0 -100%; transition: none; }
.porta__video {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; scale: 1.035; pointer-events: none;
  filter: saturate(.52) brightness(.56) contrast(1.03);
  transition: opacity .42s var(--e-saida), scale 1.2s var(--e-saida),
              filter .55s var(--e-saida);
}
.porta__veu {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top, rgba(7,9,8,.94) 4%, rgba(7,9,8,.15) 72%);
  transition: opacity 2.8s cubic-bezier(.42, 0, 1, 1),
              background 2.8s cubic-bezier(.42, 0, 1, 1);
}
.porta__dentro {
  position: absolute; inset: auto 0 0; z-index: 4;
  padding: clamp(1.5rem, 4vw, 3.2rem); display: grid; gap: .8rem;
  max-width: 42rem; transition: translate .55s var(--e-saida);
}
.porta__dentro strong { font-size: clamp(3rem, 7vw, 7rem); line-height: .9; letter-spacing: -.045em; }
.porta__dentro > span:not(.rotulo):not(.porta__acao) { color: var(--texto-2); max-width: 36ch; }
.porta__acao {
  position: relative; width: fit-content; margin-top: .7rem; min-height: 44px;
  display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem;
  font-weight: 650; text-transform: uppercase; letter-spacing: .08em;
  transition: color .7s var(--e-saida), translate .7s var(--e-saida),
              letter-spacing .7s var(--e-saida);
}
.porta__acao::after {
  content: ""; position: absolute; left: 0; right: 1.45rem; bottom: .42rem;
  height: 2px; background: var(--brasa); scale: 0 1; transform-origin: left center;
  transition: scale .9s var(--e-saida);
}
.porta:focus-visible { outline-offset: -4px; }
@media (hover: hover) { .porta:hover .porta__slide--ativo { scale: 1.035; filter: saturate(1.08); } }
.porta--video-ativo .porta__video {
  opacity: 1; scale: 1; filter: saturate(1.12) brightness(.92) contrast(1.05);
}
.porta--video-ativo .porta__slide--ativo {
  opacity: .1; filter: saturate(.28) brightness(.48);
}
.porta--video-ativo .porta__veu {
  opacity: .58; background: linear-gradient(to top, rgba(7,9,8,.76) 4%, rgba(7,9,8,.06) 72%);
}
.porta--video-ativo .porta__dentro { translate: 0 -6px; }
.porta--video-imersao .porta__midia { scale: 1.045; }
.porta--video-imersao .porta__veu {
  opacity: .7;
  background: linear-gradient(to top, rgba(7,9,8,.68) 4%, rgba(7,9,8,.1) 72%);
}
.porta--video-imersao .porta__video {
  filter: saturate(1.16) brightness(.9) contrast(1.05);
  transition-duration: 2.8s;
  transition-timing-function: cubic-bezier(.42, 0, 1, 1);
}
.porta--video-imersao .porta__acao {
  color: var(--brasa);
  translate: 0 -3px;
  letter-spacing: .105em;
  animation: porta-acao-revela 1.15s cubic-bezier(.16, 1, .3, 1) both;
}
.porta--video-imersao .porta__acao::after { scale: 1 1; }
@keyframes porta-acao-revela {
  0% { opacity: .6; translate: 0 5px; }
  65% { opacity: 1; translate: 0 -4px; }
  100% { opacity: 1; translate: 0 -3px; }
}
@media (prefers-reduced-motion: reduce) {
  .porta__midia, .porta__slide, .porta__video, .porta__veu, .porta__dentro, .porta__acao { transition: none; }
  .porta--video-imersao .porta__acao { animation: none; }
  .porta__slide--entrando { display: none; }
}
.portas .rotulo::before { display: none; }

.contato { padding: clamp(3rem, 8vh, 5.5rem) clamp(1.4rem, 4vw, 3.5rem); display: grid; align-content: center; gap: 1.2rem; }
.form { display: grid; gap: .9rem; max-width: 560px; }
.campo { display: grid; gap: .35rem; }
.campo label { font-family: var(--f-micro); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.campo input, .campo textarea {
  background: var(--tinta-2); border: 1px solid var(--linha-forte);
  color: var(--texto); font: inherit; padding: .8rem 1rem; min-height: 48px; width: 100%;
  transition: border-color var(--d-curta) var(--e-saida);
}
.campo input:focus, .campo textarea:focus { border-color: var(--brasa); outline: none; }
.campo textarea { min-height: 110px; resize: vertical; }
@media (min-width: 620px) { .form__par { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } }
.form__estado { font-family: var(--f-micro); font-size: var(--t-micro); min-height: 1.4em; }
.form__estado[data-tipo="erro"] { color: var(--brasa); }
.form__estado[data-tipo="ok"] { color: #6ee7a8; }

.aviso {
  border: 1px solid var(--linha-forte); background: rgba(7,9,8,.62);
  padding: .9rem 1.1rem; font-size: .9rem; color: rgba(255,255,255,.78);
  position: relative; max-width: 60ch;
}
.aviso::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--brasa); }

/* ============ rodape ============ */
.rodape { border-top: 1px solid var(--linha); padding: 2.5rem 0 2rem; position: relative; z-index: 3; background: var(--tinta); }
.rodape__in { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.rodape img { height: 14px; width: auto; opacity: .8; }
.rodape__nota { font-family: var(--f-micro); font-size: var(--t-micro); color: var(--texto-3); letter-spacing: .06em; }

/* ============ pagina de setor e de cliente ============ */
/* capa da pagina do cliente: a logo substitui o display */
.capa-marca { margin: 0; }
.capa-marca img {
  height: clamp(44px, 6.2vw, 90px); width: auto; max-width: min(84vw, 530px);
  object-fit: contain; opacity: .98;
}

.pergunta {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.3rem, .9rem + 1.4vw, 2rem);
  line-height: 1.12; letter-spacing: -.02em;
  color: rgba(255,255,255,.92); max-width: 26ch;
}
.pergunta em { font-style: normal; color: var(--brasa); }

.peca-dados {
  display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center;
  font-family: var(--f-micro); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.peca-dados span { display: inline-flex; align-items: center; gap: .45rem; }
.peca-dados span::before {
  content: ""; width: 5px; height: 5px; background: var(--brasa);
  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}

.voltar {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-texto); font-size: .875rem; font-weight: 400;
  letter-spacing: -.005em; color: rgba(255,255,255,.80);
  min-height: 44px;
}
.voltar:hover { color: var(--texto); }

.marco {
  padding-block: clamp(3rem, 8vh, 5rem) clamp(.5rem, 2vh, 1.5rem);
  position: relative; z-index: 3;
}
.marco__h { font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); letter-spacing: -.02em; }

/* ============ motion de entrada ============ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sobe { animation: sobe linear both; animation-timeline: view(); animation-range: entry 5% cover 25%; }
    @keyframes sobe { from { opacity: 0; translate: 0 24px; } }
  }
  @view-transition { navigation: auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion changes animation, never the geometry of the containers. */
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .abertura__fundo { clip-path: none; }
  .container__foco { opacity: 0 !important; }
  .grade-fina { display: none; }
}

/* ==========================================================================
   MOBILE
   Tudo abaixo e exclusivo de telas estreitas. Nada aqui altera o desktop.
   ========================================================================== */
@media (max-width: 760px) {

  :root {
    /* svh e a altura sem a barra do navegador: o container fecha certo mesmo
       com a barra recolhendo durante o scroll */
    --altura-container: 82svh;
    /* escala propria: o clamp do desktop chega no celular grande demais para
       titulo de tres palavras e pequeno demais para o corpo */
    --t-display: clamp(2rem, 1rem + 4.5vw, 2.7rem);
    --t-titulo:  clamp(1.4rem, .95rem + 2.3vw, 1.9rem);
    --t-sub:     1rem;
  }

  /* ---- topo ---- */
  /* o menu precisa do CTA: no celular a .acao do topo some e a pessoa ficava
     sem caminho para o contato ate o fim da pagina */
  .atalhos a:last-child {
    margin-top: 1.4rem; border: 0;
    background: var(--brasa); color: #fff;
    justify-content: center; font-family: var(--f-micro);
    font-size: var(--t-micro); letter-spacing: .1em;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  }
  .atalhos a { font-size: 1.1rem; padding: .78rem 0; }

  /* ---- abertura ---- */
  /* A mascara do chanfro foi desenhada para um container de tela cheia. Numa
     faixa de 211px o recorte le como falha de render, e a cascata de entrada
     deixava o texto invisivel por 1,4s. No celular a abertura entra por fade
     curto e o texto vem junto. */
  .abertura__fundo { animation: apareceFundo .7s var(--e-saida) both !important; }
  @keyframes apareceFundo { from { opacity: 0; } to { opacity: 1; } }
  .abertura__filete  { animation-delay: .25s !important; animation-duration: .5s !important; }
  .abertura__oficial { animation-delay: .3s  !important; animation-duration: .5s !important; }
  .abertura__h       { animation-delay: .35s !important; animation-duration: .55s !important; }
  .abertura__sub     { animation-delay: .42s !important; animation-duration: .55s !important; }
  .abertura__cta     { animation-delay: .5s  !important; animation-duration: .55s !important; }

  /* aqui o wordmark FICA: e o unico lugar onde a marca aparece em escala,
     ja que no celular a barra de cima some atras do burger ao rolar */
  .abertura__wordmark { height: 20px; }
  /* no toque a sequencia encurta: ninguem espera 2,3s de coreografia no
     celular, e a barra de cima ja esta visivel desde o primeiro quadro */
  .topo__marca, .atalhos a, .acao { animation: none; }
  .abertura__marca {
    align-items: center; justify-content: center; gap: .7rem;
    max-width: 100%; text-align: center;
  }
  .abertura__meta { flex-direction: column; gap: .55rem; line-height: 1.35; }
  .abertura__filete { margin-inline: auto; }
  .abertura__oficial { flex: 1 1 auto; min-width: 0; max-width: 24ch; line-height: 1.35; }
  .abertura .container__dentro { gap: .72rem; padding: 5.2rem var(--gutter) 3.2rem; }
  .abertura__oficial { font-size: .68rem; letter-spacing: .09em; }
  .abertura__h { max-width: 13ch; text-wrap: balance; }
  .abertura__sub {
    width: 100%; min-width: 0; max-width: 32ch;
    margin-inline: auto; white-space: normal; word-break: normal; overflow-wrap: anywhere;
  }
  .abertura__cta {
    width: min(100%, 22rem); gap: .55rem; margin: .25rem auto 0;
    justify-content: center;
  }
  .abertura__cta .btn { flex: 1 1 100%; padding-inline: 1rem; }

  /* ---- hero das páginas de cliente ---- */
  /* Replica a mesma janela de mídia do hero principal, mas só na capa do
     cliente. Os containers de cada frente continuam menores e independentes. */
  #capa {
    min-height: var(--altura-container);
  }
  #capa .palco__item {
    inset: 0 auto 0 50%;
    width: max(100%, var(--altura-container));
    max-width: none; height: 100%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    object-fit: cover; object-position: center;
  }
  #capa .container__dentro {
    align-content: end; justify-items: center; text-align: center;
  }
  #capa .voltar,
  #capa .container__texto { justify-self: center; }
  #capa .container__texto { margin-inline: auto; }

  /* ---- frentes: carrossel em vez de quatro cards empilhados ---- */
  /* A fileira segue horizontal para o toque, mas cada container conserva o
     peso vertical da versão web. O mobile muda a largura e o gesto, não a
     importância do bloco. */
  .frentes__cabeca {
    min-height: clamp(250px, 34svh, 330px);
    padding-block: 3rem 2rem;
    place-items: end center;
  }
  .frentes__h {
    max-width: 14ch; font-size: clamp(2rem, 7.6vw, 2.55rem);
    line-height: .95;
  }
  .frentes__grade {
    display: flex; gap: 0; background: none; border: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .frentes__grade::-webkit-scrollbar { display: none; }
  .frente {
    flex: 0 0 84%;
    min-height: 70svh;
    scroll-snap-align: start;
    margin-right: 10px;
    border: 1px solid var(--linha);
  }
  .frente:last-child { margin-right: 0; }
  /* No toque nao existe hover: a foto ficaria cinza para sempre. O cartao
     centrado no carrossel recebe .frente--ativa pelo JS e acende. */
  .frente--ativa { border-color: var(--linha-forte); }
  .frente__dentro { padding: 1.1rem; gap: .7rem; }
  .frente__h { font-size: clamp(1.5rem, 6.5vw, 1.85rem); }
  .frente__headline { font-size: 1.05rem; max-width: 24ch; }
  .frente__dinamica { margin-top: clamp(1.6rem, 4vw, 2.8rem); padding-top: .8rem; }
  .frente__entrega-text { font-size: clamp(1.45rem, 7.8vw, 2.05rem); max-width: 13ch; }
  .frente .palco__item { scale: 1.04; }
  .frente .palco__item.e-agora { translate: -1% 0; scale: 1.01; }

  /* dica de que a faixa anda para o lado */
  .frentes__dica {
    display: flex; align-items: center; gap: .5rem;
    padding: .9rem var(--gutter) 0;
    font-family: var(--f-micro); font-size: 10px;
    letter-spacing: .09em; text-transform: uppercase; color: var(--texto-3);
  }
  .frentes__dica::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(to right, var(--linha-forte), transparent);
  }

  /* ---- clientes ---- */
  .clientes__palco { min-height: var(--altura-container); }
  .cliente-slide__dentro {
    padding: 4rem var(--gutter) 4.5rem;
    align-content: end; gap: .65rem;
  }
  .cliente-slide__nome { font-size: clamp(2rem, 8.4vw, 2.55rem); }
  .clientes__controles { padding-bottom: 1.1rem; gap: .6rem; }
  .seta { width: 44px; height: 44px; }  /* 44 e o minimo de alvo de toque */
  .indice { font-size: .68rem; }

  /* ---- container final ---- */
  .equipe { min-height: 260px; clip-path: none; }
  .equipe__mosaico { grid-template-columns: repeat(2, 1fr); }
  /* seis miniaturas em duas colunas viram tiras ilegiveis; quatro respiram */
  .equipe__mosaico img:nth-child(n+5) { display: none; }
  .equipe__dentro { padding: 1.1rem; gap: .55rem; }
  .contato { padding: 2.2rem var(--gutter) 2.6rem; gap: .8rem; }
  .form__par { display: grid; grid-template-columns: 1fr; gap: .9rem; }
  .btn { width: 100%; }
  /* o CTA do slide de cliente nao: largura cheia o fazia passar por baixo do
     cartao de vidro e empurrava a leitura */
  .cliente-slide__dentro .btn { width: auto; }

  /* ---- containers de conteudo em geral ---- */
  /* A pagina de setor tem containers de peça menores que a capa, mas a relação
     continua a mesma do desktop: 62svh, não uma miniatura comprimida. */
  .container--peca { min-height: 62svh; }
  .container--peca .container__dentro { padding: 2.8rem var(--gutter) 1.8rem; }
  .container--peca .container__h { font-size: clamp(1.25rem, 4.8vw, 1.6rem); }

  .container__dentro { padding: 4.1rem var(--gutter) 2.2rem; gap: .8rem; }
  .container__h { max-width: none; }
  .container__texto {
    width: 100%; min-width: 0; max-width: 32ch;
    white-space: normal; word-break: normal; overflow-wrap: anywhere;
  }
  /* capa da pagina do cliente: a logo substitui o display */
.capa-marca { margin: 0; }
.capa-marca img {
  height: clamp(44px, 6.2vw, 90px); width: auto; max-width: min(84vw, 530px);
  object-fit: contain; opacity: .98;
}

  .pergunta { font-size: 1.1rem; max-width: 34ch; }
  .marco { padding-block: 2rem .65rem; }

  /* ---- rodape ---- */
  .rodape { padding: 2rem 0 1.6rem; }
  .rodape__in { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

/* telas bem estreitas */
@media (max-width: 380px) {
  .frente { flex-basis: 86%; }
  .cliente-slide__nome { font-size: 1.95rem; }
  .abertura__wordmark { height: 18px; }
  .abertura__oficial { font-size: .64rem; }
  .frente__headline { font-size: 1rem; }
}

/* ==========================================================================
   PAGINA DE SETOR
   O que tirava a personalidade era as quatro paginas serem o mesmo template
   com o nome trocado. Aqui cada uma carrega seu proprio acento e ganha blocos
   que so existem nela: a tese, o numero, o que a frente nao e, e o processo.
   ========================================================================== */
.setor { --acento: var(--brasa); }
.setor .rotulo::before { background: var(--acento); }
.setor .peca-dados span::before { background: var(--acento); }
.setor .pergunta em { color: var(--acento); }
.setor .btn { background: var(--acento); color: #0b0d0c; }
.setor .btn:hover:not(:disabled) { background: #fff; color: #0b0d0c; }

/* tese: uma frase grande sozinha, sem imagem, para o olho descansar entre
   dois containers de video */
.tese-frente {
  position: relative; z-index: 3;
  /* padding-block, nao padding: o atalho zerava o gutter do .wrap */
  padding-block: clamp(4rem, 11vh, 7.5rem) clamp(2rem, 5vh, 3rem);
}
.tese-frente__frase {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 1rem + 3.4vw, 3.6rem);
  line-height: 1.04; letter-spacing: -.03em;
  max-width: 20ch;
}
.tese-frente__frase span { color: var(--acento); }
.tese-frente__nao {
  margin-top: 1.4rem; padding-left: 1.1rem;
  border-left: 2px solid var(--acento);
  color: var(--texto-2); max-width: 46ch;
  font-weight: 300;
}

/* o numero: uma medida que so faz sentido naquela frente */
.medida {
  display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 5vh, 3.2rem);
  padding-top: 1.4rem; border-top: 1px solid var(--linha);
}
.medida__v {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem);
  line-height: .9; letter-spacing: -.04em; color: var(--acento);
}
.medida__d { color: var(--texto-2); max-width: 32ch; font-weight: 300; }

/* processo: as etapas reais, numeradas, com filete que corre entre elas */
.processo { position: relative; z-index: 3; padding-block: clamp(3rem, 8vh, 5rem); }
.processo__grade { display: grid; gap: 1px; background: var(--linha); margin-top: 2rem; }
@media (min-width: 720px)  { .processo__grade { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .processo__grade { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.etapa {
  background: var(--tinta); padding: 1.6rem 1.4rem 1.8rem;
  display: grid; gap: .6rem; align-content: start;
  position: relative;
  transition: background var(--d-media) var(--e-saida);
}
.etapa:hover { background: var(--tinta-2); }
.etapa::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--acento);
  transition: width var(--d-longa) var(--e-saida);
}
.etapa:hover::before { width: 100%; }
.etapa__n {
  font-size: .75rem; font-weight: 600; letter-spacing: .09em;
  color: var(--acento);
}
.etapa__t {
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.25rem; letter-spacing: -.02em;
}
.etapa__d { color: var(--texto-2); font-size: .92rem; font-weight: 300; }

/* as entregas viram lista com filete, nao chips genericos */
.entregas { display: grid; gap: 0; margin-top: 1.6rem; max-width: 52ch; }
.entregas li {
  list-style: none; padding: .7rem 0; border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; gap: .8rem;
  font-weight: 300; color: rgba(255,255,255,.86);
}
.entregas li::before {
  content: ""; width: 6px; height: 6px; flex: none; background: var(--acento);
  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}

@media (max-width: 760px) {
  .tese-frente { padding-block: 2.8rem 1.4rem; }
  /* a 1.7rem a frase encostava no gutter; quebra por palavra resolve sem
     encolher demais o tipo */
  .tese-frente__frase { font-size: 1.55rem; max-width: none; overflow-wrap: break-word; }
  .medida { margin-top: 1.6rem; }
  .processo { padding-block: 2rem; }
  .processo__grade { margin-top: 1.4rem; }
  .etapa { padding: 1.2rem 1.1rem 1.4rem; }
}

/* ==========================================================================
   A FITA: material vertical dentro de uma tela horizontal
   Usada em vertical.html e em equipe.html. Mecanismo em assets/js/fita.js.

   A TESE. Material 9:16 numa tela 16:9 tem duas saidas preguicosas: encolher
   a peca e encher o resto de preto, ou cortar a vertical em horizontal. A
   primeira transforma a peca num selo no meio de uma parede morta; a segunda
   deixa de ser a peca. A fita faz o contrario das duas: o vazio ao redor e
   preenchido pela PROPRIA PECA, ampliada e desfocada no fundo do container.
   E a mesma regra que o site ja segue em todo lugar (o fundo de um container
   e o trabalho), so que aqui o material que preenche e o mesmo que esta em pe
   na frente. Nao ha parede e nao ha corte: a peca continua no tamanho em que
   foi feita, que e a regra do site.
   ========================================================================== */

/* O veu padrao foi medido contra VIDEO NITIDO sangrando no container. Aqui o
   fundo ja e uma peca desfocada e escurecida pela bruma, e os dois empilhados
   apagavam o material: sobrava um degrade escuro onde deveria estar a cor da
   peca. Este veu segura o contraste do texto e devolve o resto. */
.container--vertical .container__veu {
  background:
    linear-gradient(to right, rgba(7,9,8,.62) 0%, rgba(7,9,8,.34) 52%, rgba(7,9,8,.10) 100%),
    linear-gradient(to top,   rgba(7,9,8,.40) 0%, rgba(7,9,8,.10) 46%, rgba(7,9,8,0) 74%);
}

.container--vertical {
  /* A peca em pe manda na altura. Nos 62svh dos containers de peca uma 9:16
     sai com ~315px de largura num monitor comum, que e miniatura grande e nao
     peca. Aqui a altura e a da capa. */
  min-height: clamp(620px, 88svh, 980px);
  margin-block: clamp(14px, 2.4svh, 30px);
}

/* ---- a bruma ----
   A peca em cena, ampliada e desfocada, preenchendo o container. `scale`
   generoso porque o blur puxa as bordas para dentro e sem ele aparece uma
   moldura clara em volta. O crossfade e feito por duas camadas IRMAS e a troca
   e de classe: reatribuir `src` deixa o navegador pintando a imagem antiga ate
   o arquivo novo baixar. */
.bruma { position: relative; overflow: hidden; }
.bruma > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  scale: 1.3;
  /* `saturate` acima de 1 porque o desfoque achata a cor junto com a forma, e
     e a COR da peca que precisa sobreviver: e ela que amarra o container ao
     material. Medido contra o texto: a `brightness` e o teto que ainda deixa o
     branco passar folgado em AA sobre o quadro mais claro de cada peca. */
  filter: blur(46px) saturate(1.45) brightness(.72);
  opacity: 0;
  transition: opacity 1s var(--e-saida);
}
.bruma > img.e-agora { opacity: 1; }

/* Vertical: o frame continua sendo a textura do container, mas com leitura
   quase monocromática. A cor fica reservada para a peça nítida do carrossel. */
.vertical-selecao .bruma > img {
  filter: blur(42px) grayscale(1) saturate(.04) brightness(.58);
  scale: 1.34;
}
.vertical-selecao.container--acento .container__veu::after { background: transparent; }

/* ---- a grade ----
   Texto e peca lado a lado, e a peca troca de lado a cada bloco. O
   zigue-zague e o que impede a pagina de virar uma coluna de blocos iguais
   com a imagem trocada. */
.vertical__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center; align-content: center;
}
.container--espelhado .vertical__grade { grid-template-columns: auto minmax(0, 1fr); }
.container--espelhado .vertical__texto { order: 2; }
.container--espelhado .fita { order: 1; }

.vertical__texto { display: grid; gap: 1.15rem; align-content: center; min-width: 0; }
.vertical__media { display: grid; gap: .75rem; min-width: 0; align-content: center; }
.vertical__cliente {
  margin: 0; font-size: clamp(1.35rem, 1rem + 1.8vw, 2.4rem);
  line-height: .95; letter-spacing: -.035em; font-weight: 700;
}
.vertical-selecao .vertical__grade { align-items: start; padding-top: clamp(2rem, 6vh, 5rem); }
.vertical-selecao .vertical__media { align-content: start; }
.vertical__marca {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.4rem);
  line-height: .95; letter-spacing: -.035em; font-weight: 700;
  margin: 0; text-wrap: balance;
}
/* A linha que troca junto com a peca em cena. `min-height` porque sem piso a
   linha some quando a peca nao tem titulo e o bloco inteiro pula. */
.vertical__peca {
  font-family: var(--f-micro); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase;
  /* --texto-3 (44%) nao passa em AA sobre a bruma, que e um campo medio e nao
     o preto da pagina. 68% passa com folga e continua lendo como micro. */
  color: var(--texto-2);
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center;
  min-height: 1.4em;
}
.vertical__peca b { font-weight: 500; color: rgba(255,255,255,.82); }
.vertical__peca time { font-variant-numeric: tabular-nums; }

/* ---- a fita ---- */
.fita {
  /* A altura da PECA. Tudo o resto sai dela: a largura e 9/16 disso, e a
     janela e a peca mais a fresta de cima e de baixo. */
  --fita-h: min(62svh, 620px);
  /* A fresta que deixa a proxima peca CORTADA na borda. E o que promete
     continuidade sem precisar de seta nem de ponto. */
  --fresta: clamp(16px, 2.6svh, 30px);
  display: grid; gap: .9rem; min-width: 0;
}

/* A JANELA e um container de rolagem de verdade: roda do mouse, dedo, teclado
   e leitor de tela vem do navegador, sem gesto de mentira e sem sequestrar a
   rolagem da pagina. O snap da o passo de uma peca por vez.
   A altura soma as duas frestas em vez de sair do `padding` de uma caixa 9:16.
   Com padding dentro de uma caixa 9:16 a peca ficaria mais BAIXA que 9:16 na
   mesma largura, e o `object-fit: cover` cortaria o topo e o pe dela. */
.fita__janela {
  position: relative;
  width: calc(var(--fita-h) * 9 / 16);
  max-width: 100%;
  height: calc(var(--fita-h) + var(--fresta) * 2);
  padding-block: var(--fresta);
  margin-inline: auto;
  overflow: hidden auto;
  /* SEM `overscroll-behavior: contain` aqui, de proposito. `contain` impede a
     rolagem de passar para a pagina quando a fita chega ao fim, e ai quem rola
     com o ponteiro em cima dela fica preso: a fita acaba, a pagina nao anda e
     a pessoa precisa tirar o mouse de cima para continuar. O encadeamento
     padrao faz o certo: a fita corre ate o fim e a pagina segue.
     No celular vale o contrario, e esta no bloco de mobile la embaixo. */
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: rgba(0,0,0,.35);
  /* o chanfro do sistema, na escala da peca */
  clip-path: polygon(
    var(--chanfro) 0, 100% 0,
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    0 100%, 0 var(--chanfro));
}
.fita__janela::-webkit-scrollbar { display: none; }
.fita__janela:focus-visible { outline: 2px solid var(--brasa); outline-offset: 4px; }

/* A selecao vertical usa o mesmo eixo lateral dos outros reels.
   Ela avanca sozinha e nao exibe controles de escolha. */
.fita--eixo-y .fita__janela { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.fita--eixo-y .fita__trilho { display: block; }
.fita--eixo-y .fita__peca { width: 100%; height: var(--fita-h); }
.fita--auto .fita__janela { scrollbar-width: none; }

/* A Vertical segue o mesmo carrossel lateral da home. O avanço é automático;
   não há régua nem setas disputando a atenção com o nome do cliente. */
.fita--auto .fita__janela {
  width: 100%; height: var(--fita-h); padding-block: 0;
  padding-inline: max(var(--fresta), calc(50% - var(--fita-h) * 9 / 32));
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; clip-path: none;
}
.fita--auto .fita__trilho { display: flex; height: 100%; }
.fita--auto .fita__peca {
  flex: 0 0 auto; width: calc(var(--fita-h) * 9 / 16);
  max-width: 78vw; height: 100%;
}

.fita__peca {
  position: relative;
  height: var(--fita-h);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.fita__midia {
  width: 100%; height: 100%; object-fit: cover;
  /* a peca que nao esta em cena continua visivel na fresta, mais apagada: e a
     promessa da proxima, nao um item de catalogo */
  opacity: .3;
  transition: opacity .6s var(--e-saida);
}
.fita__peca.e-agora .fita__midia { opacity: 1; }

/* ---- a regua ----
   Barra de progresso da COLECAO, nao do video: diz onde a pessoa esta entre as
   pecas. Numerada, porque em audiovisual saber que faltam duas e informacao
   util. De motion/carrossel-reel-progresso. */
.fita__ui { display: flex; align-items: center; gap: .7rem; }
.fita__regua { display: flex; gap: .4rem; flex: 1; margin: 0; padding: 0; list-style: none; }
.fita__regua li { flex: 1; display: flex; }
.fita__regua button {
  flex: 1; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; gap: .4rem; align-content: center;
  color: var(--texto-3);
  transition: color var(--d-curta) var(--e-saida);
}
.fita__regua button:hover,
.fita__regua button[aria-current="true"] { color: var(--texto); }
.fita__n {
  font-family: var(--f-micro); font-size: .6875rem; font-weight: 500;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.fita__fio { display: block; height: 2px; background: var(--linha-forte); }
.fita__regua button[aria-current="true"] .fita__fio { background: var(--acento, var(--brasa)); }

.fita__seta {
  flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.05); color: var(--texto-2);
  border: 1px solid var(--linha);
  display: grid; place-items: center;
  transition: background var(--d-curta) var(--e-saida), color var(--d-curta) var(--e-saida);
}
.fita__seta:hover:not(:disabled) { background: rgba(255,255,255,.12); color: var(--texto); }
.fita__seta:disabled { opacity: .28; cursor: default; }
.fita__seta svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .fita__midia { opacity: 1; }
}

/* ---- a fita no celular ----
   O EIXO MUDA. Uma janela que rola em Y dentro de uma pagina que tambem rola
   em Y e armadilha: o dedo entra na fita e a pagina para. No celular a fita
   rola em X, que e a mesma decisao que a fileira das frentes ja tomou na home.
   A peca continua em pe; quem deita e o trilho. */
@media (max-width: 760px) {
  /* Piso, e nao a altura do desktop: empilhado, o bloco COM fita ja passa de
     900px por conta propria e nao precisa de minimo. Quem precisa e o bloco
     sem fita (o socio que ainda nao tem making of): sem piso ele encolhia para
     a altura do texto e virava legenda no meio de dois containers de peso. */
  .container--vertical { min-height: clamp(380px, 58svh, 560px); }
  .vertical__grade { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .container--espelhado .vertical__grade { grid-template-columns: minmax(0, 1fr); }
  .container--espelhado .vertical__texto,
  .container--espelhado .fita { order: 0; }

  /* a fita sangra ate as bordas: no celular o gutter em volta de um carrossel
     so rouba largura da peca */
  .fita { --fita-h: min(56svh, 520px); margin-inline: calc(var(--gutter) * -1); }
  .fita__janela {
    width: 100%; height: var(--fita-h);
    padding-block: 0;
    /* A fresta lateral tem que ser META DA SOBRA, e nao um valor fixo: com
       fresta fixa a primeira peca encosta na borda esquerda, porque com
       scrollLeft em zero nao existe nada para centralizar contra. Com esta
       conta ela nasce no meio e as vizinhas espiam dos dois lados. */
    padding-inline: max(var(--fresta), calc(50% - var(--fita-h) * 9 / 32));
    overflow: auto hidden;
    /* `-x: contain` para o swipe lateral no fim da fita nao virar o gesto de
       voltar do navegador; `-y: auto` para o dedo continuar rolando a pagina,
       que e o eixo que a pessoa usa para sair do bloco. */
    overscroll-behavior-x: contain; overscroll-behavior-y: auto;
    scroll-snap-type: x mandatory;
    clip-path: none;
  }
  .fita__trilho { display: flex; height: 100%; }
  .fita__peca {
    flex: 0 0 auto;
    height: 100%; width: calc(var(--fita-h) * 9 / 16); max-width: 78vw;
  }
  .fita__ui { padding-inline: var(--gutter); }

  .fita--eixo-y { margin-inline: 0; }
  .fita--eixo-y .fita__janela {
    width: min(78vw, calc(var(--fita-h) * 9 / 16));
    height: calc(var(--fita-h) + var(--fresta) * 2);
    margin-inline: auto; padding: var(--fresta) 0;
    overflow: hidden auto; overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
  }
  .fita--eixo-y .fita__trilho { display: block; height: auto; }
  .fita--eixo-y .fita__peca {
    display: block; width: 100%; max-width: none; height: var(--fita-h);
    scroll-snap-align: center;
  }
  .fita--eixo-y .fita__ui { padding-inline: 0; }

  /* o desfoque de 46px custa caro numa camada do tamanho da tela, e aqui a
     peca ocupa quase tudo: o fundo aparece pouco e um raio menor basta */
  .bruma > img { filter: blur(26px) saturate(1.4) brightness(.62); scale: 1.45; }
}

/* ==========================================================================
   A PAGINA DA EQUIPE
   ========================================================================== */

/* O UNICO EIXO CENTRAL DO SITE, e e de proposito. A home fala do que a empresa
   entrega e ancora tudo a esquerda; esta capa fala de QUEM entrega, e o eixo
   central trata os dois socios como iguais em vez de enfileirar um embaixo do
   outro. A regra alcanca o bloco inteiro: titulo no eixo com o resto ancorado
   a esquerda le como erro de alinhamento, nao como decisao. */
.capa-equipe .container__dentro { justify-items: center; text-align: center; }
.capa-equipe .rotulo { justify-content: center; }
.capa-equipe .display { max-width: 16ch; }
.capa-equipe .container__texto { max-width: 56ch; }
/* o veu padrao escurece mais a esquerda, que e onde o texto da home fica.
   Com o texto no meio, o escurecimento tambem vai para o meio. */
.capa-equipe .container__veu {
  background:
    radial-gradient(120% 78% at 50% 74%, rgba(7,9,8,.72) 0%, rgba(7,9,8,.30) 52%, rgba(7,9,8,0) 100%),
    linear-gradient(to top, rgba(7,9,8,.52) 0%, rgba(7,9,8,.12) 48%, rgba(7,9,8,0) 76%);
}
.capa-equipe__video {
  z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  opacity: 0; filter: saturate(.58) brightness(.52) contrast(1.02);
  transition: opacity .5s var(--e-saida), filter .7s var(--e-saida);
}
.capa-equipe.video-em-foco .capa-equipe__video {
  opacity: 1; filter: saturate(1.08) brightness(.96) contrast(1.04);
}
@media (prefers-reduced-motion: reduce) { .capa-equipe__video { display: none; } }

/* A capa orienta e sai de cena. O peso pertence aos dois perfis. */
.capa-equipe { min-height: clamp(560px, 76svh, 900px); }
.capa-equipe .display { font-size: clamp(1.8rem, 1.1rem + 3vw, 4.2rem); }
.capa-equipe__marca { display: block; width: min(36vw, 360px); height: auto; }
.capa-equipe__sub {
  max-width: 28ch; margin: .25rem 0 0; color: var(--texto-2);
  font-size: clamp(.92rem, .78rem + .3vw, 1.12rem);
  letter-spacing: .01em;
}
.capa-equipe__portal {
  display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
  min-height: 44px; margin-top: clamp(.7rem, 1.8vh, 1.2rem); padding: .25rem .8rem 0;
  color: var(--texto-2); font-family: var(--f-micro); font-size: .68rem;
  font-weight: 550; letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--d-curta) var(--e-saida);
}
.capa-equipe__portal::after {
  content: ""; width: 1px; height: 1.45rem;
  background: linear-gradient(to bottom, var(--brasa), transparent);
  transform-origin: top center;
  animation: portalPulso 2.8s var(--e-saida) infinite;
}
.capa-equipe__portal svg { transition: translate var(--d-curta) var(--e-saida); }
.capa-equipe__portal:hover, .capa-equipe__portal:focus-visible { color: var(--texto); }
.capa-equipe__portal:hover svg, .capa-equipe__portal:focus-visible svg { translate: 0 3px; }
.capa-equipe .container__texto { display: none; }
.capa-equipe .rotulo { display: none; }
.capa-equipe .brecha { display: none; }

@keyframes portalPulso {
  0%, 100% { opacity: .35; scale: 1 1; }
  50% { opacity: 1; scale: 1 1.28; }
}

#socios { scroll-margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .capa-equipe__portal::after { animation: none; opacity: .7; }
}


/* A EMENDA ENTRE OS DOIS SOCIOS e uma diagonal, e nao uma linha reta.
   E o chanfro da marca levado a escala de secao: o mesmo corte a 45 graus que
   recorta botao, cartao e a janela da fita. O segundo container sobe POR
   DENTRO do primeiro e o corte revela o de baixo na borda, entao os dois se
   apresentam como um par e nao como dois blocos empilhados.
   Mexer aqui: `margin-top` negativo e `--corte` andam juntos; se um sair do
   outro aparece uma faixa da cor da pagina entre os dois. */
.socio--emenda {
  --corte: clamp(38px, 6vw, 96px);
  margin-top: calc(var(--corte) * -1);
  clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%);
}

.socio__lema {
  font-size: clamp(.8rem, .74rem + .38vw, 1.01rem);
  font-weight: 300; font-style: italic;
  color: var(--acento, var(--brasa));
  letter-spacing: -.015em;
  margin-top: -.35rem;
}

/* AS FRENTES DE CADA SOCIO saem dos destaques do perfil dele, entao sao a
   unica lista da pagina que nao foi escrita para o site: e o recorte que o
   proprio fez do proprio trabalho. Por isso ficam coladas na bio, e nao em
   cartao separado, e usam o chanfro da marca em escala minima. */
.socio__frentes {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: .1rem 0 0; padding: 0;
}
.socio__frentes li {
  font-family: var(--f-micro); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-2);
  padding: .42em .78em;
  border: 1px solid color-mix(in srgb, var(--acento, var(--brasa)) 38%, transparent);
  background: color-mix(in srgb, var(--acento, var(--brasa)) 9%, transparent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* A praca vem depois da marca na mesma linha de meta: onde o trabalho
   acontece pesa tanto quanto a assinatura de quem faz. */
.socio__pracas { color: var(--texto-3); }

.socio__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
  font-family: var(--f-micro); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
.socio__perfil {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding-right: .2rem;
  color: var(--texto-2);
  transition: color var(--d-curta) var(--e-saida);
}
.socio__perfil svg { opacity: .7; }
.socio__perfil:hover { color: var(--texto); }
.socio__perfil:hover svg { opacity: 1; }

/* Cada pessoa vira o objeto principal. O palco comum usa os frames do reel
   como contexto, ampliado, quase monocromático e suavemente desfocado, sem
   disputar leitura com as janelas fotográficas dos cards. */
.socios {
  min-height: clamp(700px, 88svh, 1000px);
  margin-block: clamp(14px, 2.4svh, 30px);
  overflow: clip;
}
.socios .container__fundo { overflow: hidden; }
.socios .palco__item {
  filter: saturate(.60) grayscale(.20) brightness(.44) blur(2px);
  scale: 1.035;
}
.socios .container__veu {
  background:
    linear-gradient(to top, rgba(7,9,8,.68), rgba(7,9,8,.28) 65%, rgba(7,9,8,.48));
}
.socios__dentro { align-items: center; justify-items: center; }
.socios__quimica {
  width: min(100%, 38ch); margin: 0 auto clamp(1.3rem, 3vw, 2.4rem);
  color: var(--texto-2); text-align: center;
  font-size: clamp(.9rem, .78rem + .32vw, 1.08rem);
  line-height: 1.28; letter-spacing: -.015em;
}
.socios__quimica::before {
  content: ""; display: block; width: clamp(2.2rem, 5vw, 4.4rem); height: 1px;
  margin: 0 auto .75rem;
  background: linear-gradient(90deg, transparent, var(--brasa), transparent);
  opacity: .85;
}
.socios__quimica strong {
  display: block; margin-top: .2rem;
  color: var(--brasa); font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 650; letter-spacing: -.045em;
}
.socios__cards {
  width: min(1080px, 88vw); display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}
.socio__card {
  position: relative; display: grid; justify-items: center; text-align: center;
  gap: 1.35rem; padding: clamp(1rem, 2vw, 2rem) clamp(.5rem, 1.5vw, 1.5rem);
}
.socio__card::before {
  content: ""; position: absolute; z-index: -1; inset: 28% -14% -8%;
  background: linear-gradient(to bottom, rgba(7,9,8,0), rgba(7,9,8,.88) 42%, rgba(7,9,8,.48));
  filter: blur(18px); opacity: .9;
}
.socio__galeria {
  position: relative; width: min(100%, 430px); aspect-ratio: 4 / 5; margin: 0;
  overflow: hidden; background: var(--tinta-2);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: 0 18px 40px rgba(0,0,0,.36);
}
.socio__galeria::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,9,8,.38), transparent 44%);
}
.socio__galeria img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: saturate(.72) contrast(1.04);
  transition: opacity 1.1s var(--e-saida);
}
.socio__galeria img.e-agora { opacity: 1; }
.socio__conteudo {
  display: grid; justify-items: center; gap: .9rem; align-content: center;
  max-width: 34ch; transition: translate .8s var(--e-saida);
}
.socio__conteudo .container__texto {
  font-size: clamp(.825rem, .71rem + .53vw, 1.05rem);
}
.socio__nome {
  margin: 0; font-size: clamp(1.5rem, 1rem + 2.25vw, 3.45rem);
  line-height: .94; letter-spacing: -.04em;
}
.socios .socio__indice, .socios .vertical__peca { display: none; }

/* Um pequeno pulso dá vida às fotos sem transformar a apresentação em um
   slideshow chamativo. A entrada guiada por view-timeline é progressiva; a
   classe do observer mantém um fallback compreensível nos browsers antigos. */
@media (prefers-reduced-motion: no-preference) {
  .socio__galeria { transition: scale .85s var(--e-saida); }
  .socio__card.socio--em-cena .socio__galeria { scale: 1.018; }
  .socio__card.socio--em-cena .socio__conteudo { translate: 0 -4px; }
  .socio__galeria img.e-agora {
    animation: equipeFotoRespira 3.84s var(--e-saida) both;
  }

  @supports (animation-timeline: view()) {
    .socio__galeria {
      animation: equipeGaleriaEntra linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
    .socio__conteudo {
      animation: equipeTextoEntra linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 42%;
    }
  }
}

@keyframes equipeFotoRespira {
  from { scale: 1; }
  to { scale: 1.035; }
}
@keyframes equipeGaleriaEntra {
  from { opacity: .72; translate: 0 28px; scale: .965; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes equipeTextoEntra {
  from { opacity: .72; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

/* Socio sem making of: o container continua inteiro, so que em uma coluna.
   Nenhum aviso de "em breve": um bloco que se desculpa le pior do que um
   bloco que simplesmente apresenta a pessoa. */
.vertical__grade--solo { grid-template-columns: minmax(0, 1fr); }
.container--espelhado .vertical__grade--solo { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 760px) {
  .socio--emenda { --corte: clamp(24px, 9vw, 54px); }
  .capa-equipe .display { max-width: none; }
  .capa-equipe { min-height: 70svh; }
  .capa-equipe__marca { width: min(68vw, 300px); }
  .socios { min-height: auto; }
  .socios__dentro { padding-block: clamp(4rem, 12vw, 6rem); }
  .socios__cards { width: min(100%, 430px); grid-template-columns: 1fr; gap: 3rem; }
  .socio__card { gap: 1.35rem; padding: 1rem 1rem 1.35rem; }
  .socio__galeria { width: min(100%, 340px); aspect-ratio: 4 / 5; }
  .socio__nome { font-size: clamp(1.6rem, 7.5vw, 2.55rem); }
}

@media (prefers-reduced-motion: reduce) {
  .socio__conteudo, .socio__galeria { transition: none; }
  .socio__galeria img.e-agora { animation: none; }
}

/* ============ ABERTURA: TELA DE BOAS-VINDAS ============
   Marca no centro e, logo abaixo, a frase que antes era sub-headline agora
   vira parte do logotipo: uma palavra por vez entre aspas, passando da
   direita para a esquerda com blur de movimento. Tudo centralizado. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.abertura .abertura__dentro {
  align-content: center; justify-items: center; text-align: center;
  gap: clamp(1.1rem, 2.4vh, 1.6rem);
}
.abertura__dentro .abertura__marca { justify-content: center; margin: 0; font: inherit; }
.abertura__dentro .abertura__wordmark { height: clamp(34px, 6.2vw, 84px); }

.abertura__giro {
  display: inline-flex; align-items: baseline; gap: .15em;
  font-family: var(--f-micro); font-size: clamp(.9rem, 1.5vw, 1.25rem);
  letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,.9);
}
.abertura__palavras {
  display: inline-grid; justify-items: start;
  /* a largura acompanha a palavra atual, com transicao, sem pular */
  overflow: hidden; padding-inline: .6em;
  transition: width .6s var(--e-saida);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 .6em, #000 calc(100% - .6em), transparent);
          mask-image: linear-gradient(to right, transparent, #000 .6em, #000 calc(100% - .6em), transparent);
}
.abertura__palavras > span {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; translate: 60% 0; filter: blur(8px);
  transition: opacity .55s var(--e-saida), translate .7s var(--e-saida), filter .6s var(--e-saida);
}
.abertura__palavras > span.is-on  { opacity: 1; translate: 0 0; filter: blur(0); }
.abertura__palavras > span.is-off { opacity: 0; translate: -60% 0; filter: blur(8px); }
.abertura__palavras > span.is-reset { transition: none; }
/* no lugar das aspas: o filete brasa da marca, sob a palavra, esticando e
   encolhendo junto com ela. Some quando a caixa esvazia no fim do loop. */
.abertura__palavras { position: relative; padding-bottom: .55em; }
.abertura__palavras::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1.4em; height: 2px; background: var(--brasa);
  translate: -50% 0; transition: scale .5s var(--e-saida), opacity .4s;
}
.abertura__palavras.is-vazio::after { scale: 0 1; opacity: 0; }
.abertura__giro--topo .abertura__palavras { padding-bottom: 0; }
.abertura__giro--topo .abertura__palavras::after { display: none; }

.abertura__dentro .abertura__cta { justify-content: center; margin-top: clamp(.6rem, 2vh, 1.4rem); }

@media (prefers-reduced-motion: no-preference) {
  .abertura__giro { animation: sobe .6s var(--e-saida) .45s both; }
}
.aguarda-fonte .abertura__giro { animation-play-state: paused; }
.abertura--pronta .abertura__giro { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .abertura__palavras > span { transition: opacity .3s linear; translate: 0 0; filter: none; }
}
@media (max-width: 760px) {
  .abertura .abertura__dentro { align-content: center; padding-top: 6rem; }
  .abertura__dentro .abertura__wordmark { height: clamp(26px, 8vw, 40px); }
  .abertura__giro { letter-spacing: .16em; }
}

/* Topo: a sigla WH no lugar do wordmark, que ja ocupa o centro da abertura */
.topo__marca img { height: 22px; }

/* Abertura: mesmo tratamento dos containers do cliente. O video perde um pouco
   de cor e ganha um veu preto uniforme, sem apagar a cena; a marca e a frase
   ganham uma sombra curta so para leitura. */
.abertura .abertura__video { filter: none; }
/* Vidro preto translucido: sem desfoque (o `respira` com blur saiu a pedido do
   Arthur em 2026-09-21), so uma lamina escura uniforme e leve que da leitura a
   marca e a frase sem apagar a cena. */
.abertura .container__veu {
  background:
    radial-gradient(ellipse 58% 42% at 50% 50%, rgba(7,9,8,.30), rgba(7,9,8,0) 100%),
    linear-gradient(rgba(7,9,8,.44), rgba(7,9,8,.44)),
    linear-gradient(to top, rgba(7,9,8,.58) 0%, rgba(7,9,8,0) 50%);
}
.abertura__dentro .abertura__wordmark { filter: drop-shadow(0 2px 14px rgba(0,0,0,.45)); }
.abertura__giro { text-shadow: 0 1px 10px rgba(0,0,0,.55); }

/* Topo: navegacao no centro real da tela. Com a sigla WH na esquerda, mais
   estreita que o botao da direita, o margin auto deslocava os atalhos.
   Tres colunas, as laterais iguais. E ~20% mais baixo. */
@media (min-width: 941px) {
  .topo { display: grid; grid-template-columns: 1fr auto 1fr; padding-block: .35rem; }
  .topo .atalhos { margin-inline: 0; }
  .topo .acao { justify-self: end; min-height: 38px; padding-block: .5rem; }
  .topo .atalhos a { min-height: 38px; padding-block: .6rem; }
  .topo .atalhos a::after { bottom: .4rem; }
  .topo .topo__marca { min-height: 38px; }
}
.topo__marca img { height: 19px; }

/* ==========================================================================
   OUTROS PROJETOS: o triptico vertical.
   Tres pecas em pe no tamanho em que foram feitas. A que esta em cena cresce
   (a altura manda, a largura sai do 9:16) e toca ate o fim; as outras ficam
   apagadas no quadro delas. O fundo e a peca em cena desfocada, quase sem cor:
   a cor fica reservada para a peca nitida.
   ========================================================================== */
.pv {
  min-height: max(100svh, 680px);
  --pv-h: min(70svh, 700px);       /* altura da peca em cena */
  --pv-h-apoio: calc(var(--pv-h) * .7);
  --pv-gap: clamp(.6rem, 1.2vw, 1.1rem);
}
/* Fundo em duas camadas: a bruma (poster da peca, estatico) e o eco (a peca
   tocando, ao vivo). Desfoque leve: o fundo precisa ser lido como material em
   movimento, nao como mancha. Quem segura o texto e o veu, nao o blur. */
.pv .bruma > img {
  filter: blur(14px) saturate(.8) brightness(.55);
  scale: 1.12;
}
@media (prefers-reduced-motion: no-preference) {
  .pv .bruma > img { animation: pv-deriva 22s ease-in-out infinite alternate; }
}
@keyframes pv-deriva {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}
.pv__eco {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  filter: blur(10px) saturate(.9) brightness(.6);
  scale: 1.08; opacity: 0;
  transition: opacity 1.2s var(--e-saida);
}
.pv__eco.e-agora { opacity: 1; }
.pv .container__veu {
  background:
    linear-gradient(to right, rgba(7,9,8,.72) 0%, rgba(7,9,8,.34) 48%, rgba(7,9,8,.12) 100%),
    linear-gradient(to top, rgba(7,9,8,.5) 0%, rgba(7,9,8,0) 50%);
}
.pv__grade {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: clamp(5.5rem, 12vh, 8rem);
}
.pv__texto { display: grid; gap: 1.15rem; align-content: center; min-width: 0; }
.pv__h {
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.8rem);
  line-height: .95; letter-spacing: -.035em; font-weight: 700;
  margin: 0; max-width: 11ch; text-wrap: balance;
}
.pv__texto .container__texto { max-width: 40ch; font-size: var(--t-corpo); color: var(--texto-2); }

/* A legenda da peca em cena: marca em tipo grande, dados em micro e a barra
   com a duracao real. Separada do texto por um fio, como uma ficha. */
.pv__legenda {
  margin-top: clamp(.8rem, 3vh, 2rem);
  padding-top: 1.1rem; border-top: 1px solid var(--linha);
  display: grid; gap: .55rem; max-width: 26rem;
}
.pv__marca {
  margin: 0; font-size: clamp(1.6rem, 1rem + 1.9vw, 2.7rem);
  line-height: 1; letter-spacing: -.035em; font-weight: 700;
  min-height: 1em;
}
.pv__meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  font-family: var(--f-micro); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2);
  min-height: 1.4em;
}
.pv__meta b { font-weight: 500; color: rgba(255,255,255,.86); }
.pv__meta time, .pv__meta span { font-variant-numeric: tabular-nums; }
.pv__progresso { height: 2px; background: var(--linha); overflow: hidden; }
.pv__progresso span {
  display: block; height: 100%; background: var(--brasa);
  transform-origin: left; scale: 0 1; transition: scale .3s linear;
}
.pv--parado .pv__progresso { display: none; }

/* ---- o triptico ---- */
.pv__triptico {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--pv-gap);
  height: var(--pv-h);
}
.pv__item { position: relative; display: grid; }
.pv__quadro {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  height: var(--pv-h-apoio); aspect-ratio: 9 / 16;
  background: var(--tinta-3); overflow: hidden;
  clip-path: polygon(
    var(--chanfro) 0, 100% 0,
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    0 100%, 0 var(--chanfro));
  transition: height .8s var(--e-saida);
}
.pv__poster, .pv__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: filter .8s var(--e-saida), opacity .6s var(--e-saida);
}
.pv__poster { filter: grayscale(.85) brightness(.45); }
.pv__video { opacity: 0; }
.pv__item.e-agora .pv__quadro { height: var(--pv-h); cursor: default; }
.pv__item.e-agora .pv__poster { filter: none; }
.pv__item.e-agora .pv__video { opacity: 1; }
@media (hover: hover) {
  .pv__item:not(.e-agora) .pv__quadro:hover .pv__poster { filter: grayscale(.2) brightness(.75); }
}
.pv__quadro:focus-visible { outline: none; }
.pv__item:has(.pv__quadro:focus-visible)::after {
  content: ""; position: absolute; inset: -5px; border: 2px solid var(--brasa); pointer-events: none;
}
.pv__n {
  position: absolute; left: .7rem; bottom: .6rem; z-index: 2; pointer-events: none;
  font-family: var(--f-micro); font-size: var(--t-micro); letter-spacing: .1em;
  color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums;
  transition: opacity .4s;
}
.pv__item.e-agora .pv__n { opacity: 0; }

/* Tier intermediario (tablet deitado, notebook pequeno): o arranjo lado a
   lado continua, as pecas de apoio encolhem para o texto manter ~300px, que e
   onde o titulo ainda quebra em tres linhas sem virar coluna de palavra. */
@media (max-width: 1180px) {
  .pv { --pv-h: min(62svh, 620px); --pv-h-apoio: calc(var(--pv-h) * .55); }
  .pv__grade { gap: 2.2rem; }
}
/* Abaixo de ~900px nao ha largura para os dois: o triptico vem PRIMEIRO,
   porque a peca e o argumento da pagina, e reproporciona em vez de empilhar.
   A altura sai da LARGURA disponivel para as tres caberem sem rolagem
   lateral: a peca em cena ocupa ~50% da linha e as de apoio ~21% cada. */
@media (max-width: 900px) {
  .pv {
    min-height: 0;
    --pv-h: min(calc((100vw - 2 * var(--gutter)) * .5 * 16 / 9), 60svh);
    --pv-h-apoio: calc(var(--pv-h) * .42);
    --pv-gap: .5rem;
  }
  .pv__grade { grid-template-columns: minmax(0, 1fr); padding-top: 5.5rem; gap: 1.8rem; }
  .pv__triptico { order: -1; justify-content: center; }
  .pv__texto { justify-items: center; text-align: center; }
  .pv__h, .pv__texto .container__texto { margin-inline: auto; }
  .pv__legenda { width: 100%; max-width: 30rem; justify-items: center; }
  .pv__meta { justify-content: center; }
  .pv__progresso { width: 100%; }
  .pv__texto .voltar { display: none; }
  .pv__n { left: .35rem; bottom: .3rem; font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pv__quadro, .pv__poster, .pv__video { transition: none; }
}

/* ============ ABERTURA: OPCAO B (aprovada em 2026-09-21) ============
   Composicao editorial so no desktop: marca, "Somos a", palavra girando e CTAs
   ancorados no canto inferior esquerdo; o veu escurece so esse lado e a cena
   fica limpa a direita. Animacoes da abertura intactas; so muda o alinhamento.
   No celular continua centralizado. */
@media (min-width: 761px) {
  .abertura .abertura__dentro {
    align-content: end; justify-items: start; text-align: left;
  }
  .abertura__dentro .abertura__marca { justify-content: flex-start; }
  .abertura__dentro .abertura__wordmark { height: clamp(30px, 4.6vw, 64px); }
  /* a caixa da palavra tem .6em de respiro para a mascara; puxa de volta para
     a palavra alinhar com a borda da marca, e o filete vai junto */
  .abertura__giro .abertura__palavras { margin-left: -.6em; }
  .abertura__palavras::after { left: .6em; translate: 0 0; }
  .abertura .container__veu {
    background:
      linear-gradient(to right, rgba(7,9,8,.74) 0%, rgba(7,9,8,.42) 40%, rgba(7,9,8,0) 70%),
      linear-gradient(to top, rgba(7,9,8,.5) 0%, rgba(7,9,8,0) 45%);
  }
}

/* ============ EMENDAS DA HOME (2026-09-21) ============
   Abertura -> frentes: com a opcao B a headline desceu para o pe da abertura e
   o preto ate o titulo das frentes passou de 290px. A cabeca perde a altura
   minima e fica ~38% mais curta; no lugar do preto chapado, o fundo sobe do
   preto para um grafite antes do titulo. */
.frentes {
  background: linear-gradient(to bottom, var(--tinta) 0, #161817 clamp(160px, 22vh, 240px), var(--tinta) 100%);
}
.frentes__cabeca {
  min-height: 0;
  padding-top: clamp(2.5rem, 6vh, 4rem);
}
/* Frentes -> clientes e cabeca de "Mais da Warehouse": mesma gramatica da
   cabeca das frentes. Preto com respiro alto e o brilho das quatro cores
   subindo difuso da base, em vez de faixa cinza chapada. */
.clientes {
  padding-top: clamp(150px, 24vh, 230px);
  background: var(--tinta);
  isolation: isolate; overflow-x: clip;
}
.clientes::before,
.portas__cabeca::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; width: 108vw; translate: -50% 0;
  background:
    radial-gradient(ellipse 28% 58% at 15% 100%, rgba(252,56,0,.22), transparent 72%),
    radial-gradient(ellipse 28% 58% at 39% 100%, rgba(228,102,12,.16), transparent 72%),
    radial-gradient(ellipse 28% 58% at 64% 100%, rgba(120,180,255,.14), transparent 72%),
    radial-gradient(ellipse 28% 58% at 88% 100%, rgba(120,255,190,.12), transparent 72%);
  filter: blur(42px); opacity: .9;
}
.clientes::before { top: 0; height: clamp(150px, 24vh, 230px); }
.portas__cabeca::before { inset-block: -18% -8%; }
.portas { background: var(--tinta); overflow-x: clip; }
.portas__cabeca { overflow: visible; }
.clientes__palco { isolation: isolate; }
.clientes__palco::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: 4;
  height: clamp(90px, 14vh, 160px); pointer-events: none;
  background: linear-gradient(to bottom, rgba(7,9,8,.75) 0%, rgba(7,9,8,0) 100%);
}
/* Clientes -> "Mais da Warehouse": o vao ate o titulo cai pela metade
   (278px -> ~140px em 1440x900). */
.portas { padding-top: clamp(1.5rem, 3vw, 3rem); }
.portas__cabeca { min-height: 0; padding-top: clamp(3rem, 6vw, 5.5rem); }

/* Clientes ganham titulo visivel ("Quem ja passou por aqui"), com a mesma
   cabeca das frentes; o respiro e o brilho passam a vir dela. */
.clientes { padding-top: 0; }
.clientes::before { display: none; }
.clientes__cabeca { overflow: visible; }