/* ============================================================
   LP — Estilos específicos por seção
   ============================================================ */

/* Section base */
.s {
  padding-block: var(--pad-y);
  position: relative;
}

/* Reveal utility fallback (GSAP toma controle quando disponível) */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============ CURSOR CUSTOM ============ */

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  mix-blend-mode: difference;
  transition: width .3s var(--ease-out), height .3s var(--ease-out), background .3s ease;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  margin-left: -4px;
  margin-top: -4px;
}
.cursor.is-hover {
  width: 40px; height: 40px;
  margin-left: -20px; margin-top: -20px;
}

/* ============ 01 · HERO ============ */

:root {
  --hero-m: 16px;
  --hero-r: var(--r-media); /* a hero é a âncora do padrão (ver tokens.css) */
}
@media (max-width: 640px) {
  /* telas pequenas pedem raio menor pro mesmo desenho — o token acompanha,
     e com ele todos os cards e imagens da página */
  :root { --hero-m: 8px; --r-media: 18px; }
}

/* A .hero é só o palco: ocupa a tela inteira, é transparente e NÃO tem
   arredondamento. Quem é o card arredondado é o .hero-card (80% da altura);
   os 20% restantes ficam livres pro lockup, e a órbita transborda por cima
   da divisa entre os dois. */
.hero {
  /* Altura do card arredondado. Ponto único de ajuste da proporção. */
  --hero-card-h: 80%;

  position: relative;
  /* ORDEM IMPORTA: vh primeiro (fallback p/ browsers antigos), svh depois —
     svh é a altura visível COM a barra do navegador aparecendo, então em
     mobile o conteúdo nunca fica escondido atrás dela. */
  height: calc(100vh - (var(--hero-m) * 2));
  height: calc(100svh - (var(--hero-m) * 2));
  margin: var(--hero-m);
  display: grid;
  grid-template-rows: var(--hero-card-h) 1fr;
  /* recorta só lateralmente (a órbita sai pela direita); o arredondamento
     de verdade acontece no .hero-card.
     clip e não hidden: com `hidden` o navegador ignora o `visible` do outro
     eixo e recortava o lockup assim que ele saía da hero rumo à seção do
     vídeo. `clip` respeita os dois eixos de forma independente. */
  overflow-x: clip;
  overflow-y: visible;
  color: #FFFFFF;
  background: transparent;
}

/* O card: recorta a foto no formato arredondado, nos 4 cantos */
.hero-card {
  position: relative;
  grid-row: 1;
  overflow: hidden;
  border-radius: var(--hero-r);
  background: #1A1613;
  /* Uma única linha: a headline centraliza no card INTEIRO. Antes o card
     tinha duas linhas (logo + conteúdo) e a headline centralizava só na
     segunda, o que a jogava abaixo do centro real. O logo agora é
     sobreposto (position:absolute) e não ocupa espaço no fluxo. */
  display: grid;
  grid-template-rows: 1fr;
  will-change: transform, border-radius;
}

/* Sobreposto ao card, fora do fluxo — assim não desloca a headline do centro */
.hero-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  padding-block: clamp(20px, 2.5vw, 40px);
}
.hero-top__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  opacity: 0;
  animation: hero-foot-in 1s var(--ease-out) forwards;
  animation-delay: .3s;
}
/* sv-mark-color.png: lockup completo (mark colorida + wordmark branca "São
   Vicente Curitiba"), fundo transparente. Sem crop — mostra tudo. */
.hero-logo {
  display: block;
  height: clamp(32px, 3.4vw, 46px);
}
.hero-logo img {
  display: block;
  height: 100%;
  width: auto;
}

/* A foto preenche o card inteiro (o card é que tem 80% da altura da hero) */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
  will-change: opacity;
}
.hero-img--mulher { animation: hero-fade-a 16s ease-in-out infinite; animation-delay: .6s; }
.hero-img--homem  { opacity: 0; animation: hero-fade-b 16s ease-in-out infinite; animation-delay: .6s; }
@keyframes hero-fade-a { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hero-fade-b { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }

.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,0.10);
  pointer-events: none;
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.05) 22%,
      rgba(0,0,0,0)    50%,
      rgba(0,0,0,0.15) 78%,
      rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative; z-index: 2;
  grid-row: 1;
  align-self: center;
  width: 100%;
}
.hero-content__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
}
.hero-headline {
  font-family: var(--font-body);
  font-weight: 200;
  /* −15% em relação ao original (36/5.4vw/86) */
  font-size: clamp(31px, 4.6vw, 73px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
  text-wrap: balance;
  margin: 0;
}
.hero-headline b { font-weight: 600; }
/* Com a fonte 15% menor a frase da esquerda passou a caber em uma linha só;
   o limite de medida devolve as duas linhas ("Para a vida" / "continuar,"),
   pareando com a frase da direita. */
.hero-headline--l { max-width: 11ch; }
.hero-headline--r { text-align: right; }
.hero-headline span {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: hero-word-in .9s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 200ms);
}
@keyframes hero-word-in { to { opacity: 1; transform: translateY(0); } }

/* Ocupa a faixa clara inteira e centraliza o lockup nela (vertical).
   grid-template-columns explícito é necessário: sem ele o .wrap-inner
   (que tem margin-inline:auto) vira um grid item de largura automática e
   se centraliza, empurrando o lockup pra dentro. Com 1fr ele volta a
   ocupar a linha toda e mantém o alinhamento original à esquerda. */
.hero-foot {
  position: relative;
  grid-row: 2;              /* faixa branca, fora do card */
  z-index: 4;               /* acima da órbita, que transborda por ali */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-block: 0;
}
.hero-foot__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  /* width explícito: como grid item, o margin-inline:auto do .wrap-inner
     absorveria o espaço livre e encolheria o bloco (foi o que deslocou o
     lockup pra dentro). Com 100% ele volta a ocupar a linha inteira, e o
     max-width do .wrap-inner segue valendo em telas largas. */
  width: 100%;
  opacity: 0;
  animation: hero-foot-in 1s var(--ease-out) forwards;
  animation-delay: 1.2s;
}
@keyframes hero-foot-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* O lockup que faz a viagem hero → seção do vídeo. position:fixed em
   coordenadas de tela, fora de qualquer ancestral transformado. */
.lockup-voo {
  position: fixed;
  top: 0; left: 0;
  z-index: 50;
  transform-origin: left top;
  pointer-events: none;
  will-change: transform;
}
.lockup-voo[hidden] { display: none; }

/* CTA + lockup na mesma linha da faixa branca (posição do Figma).
   align-items:center e não stretch: o botão não deve esticar até a altura
   do lockup, que é definida pela barra de assinatura. */
.hero-foot__left {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  min-width: 0;
}
/* Medidas tiradas do Figma (nó 6:711): Barlow 18px, padding 24/40,
   sem letter-spacing e em caixa mista. O #1f263a do arquivo é exatamente
   o token --ink, que a classe .btn já aplica. */
.hero-cta {
  flex: 0 0 auto;
  padding: 24px 40px;
  font-size: 18px;
  /* 16.8/18 = a entrelinha do Figma, como razão pra valer também no mobile.
     Sem isso o botão herdava a entrelinha do corpo de texto e ficava 10px
     mais alto que o do arquivo. */
  line-height: 0.933;
  letter-spacing: normal;
  text-transform: none;
}

.hero-lockup { display: flex; align-items: stretch; gap: 20px; }
.hero-sig {
  width: 4px; min-height: 68px;
  border-radius: 2px;
  /* barra vertical → gradiente vertical (o .sig-bar base é horizontal) */
  background: var(--grad-brand-v);
  transform-origin: top;
  animation: hero-sig-grow 1s var(--ease-out) forwards;
  animation-delay: 1.4s;
  transform: scaleY(0);
  align-self: stretch; height: auto;
}
@keyframes hero-sig-grow { to { transform: scaleY(1); } }
.hero-lockup__text { display: flex; flex-direction: column; justify-content: center; }
/* Lockup e indicador agora vivem sobre a faixa clara → tinta azul-marinho */
.hero-lockup__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.15; color: var(--ink); margin: 0;
  letter-spacing: -0.005em;
}
.hero-lockup__sub {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(16px, 1.7vw, 22px);
  line-height: 1.3; color: var(--ink-2);
  margin: 6px 0 0;
}

.hero-scroll {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.hero-scroll__line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--ink-muted) 0%, rgba(110,112,128,0) 100%);
  animation: hero-scroll-pulse 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hero-scroll-pulse {
  0%, 100% { transform: scaleY(1); opacity: 0.75; }
  50%      { transform: scaleY(0.55); opacity: 1; }
}

/* No desktop, "rolar" fica colado ao lado direito do lockup — no vão
   branco entre o texto e a galeria orbital, não solto no meio da faixa
   nem grudado na borda direita. A coluna do lockup passa a ser
   auto-dimensionada (em vez de 1fr, que a esticava até preencher tudo) e
   "rolar" ocupa a coluna seguinte com justify-self:start, flush no início
   dela — ou seja, logo depois do gap de 24px que já separa as colunas.
   Só acima de 900px: no mobile a base (--hero-foot__grid vira 1 coluna)
   mantém "rolar" empilhado e alinhado à esquerda, como já era. */
@media (min-width: 901px) {
  .hero-foot__grid { grid-template-columns: auto 1fr; }
  .hero-scroll { justify-self: start; margin-left: 60px; }
}

/* ============ 01b · GALERIA ORBITAL 3D (hero) ============ */
/* Anel de fotos girando em profundidade no canto inferior direito da hero.
   Toda a posição/tamanho vem das custom properties abaixo — são o painel de
   ajuste do efeito (raio, tamanho do card e deslocamento do centro). O JS
   (ORBIT_CONFIG em main.js) controla velocidade e resposta ao mouse. */

.orbit {
  --orbit-w: 54%;              /* largura da área da órbita, relativa à hero */
  --orbit-h: 62%;              /* altura da área da órbita */
  --orbit-offset-x: -12%;      /* quanto o centro do anel sai pela direita */
  /* Sobe o anel: o centro fica acima da divisa card/branco (que está a 20%
     do rodapé), então os cards cruzam a borda do card sem serem cortados
     pelo limite inferior da hero.
     centro = offset + (altura/2)  →  offset = 28% − 31% = −3% */
  --orbit-offset-y: -3%;
  --orbit-card-w: clamp(130px, 13vw, 196px);
  --orbit-card-ratio: 0.8;     /* 5:4 (paisagem) — altura = largura × isto */
  --orbit-perspective: 1500px;

  position: absolute;
  right: var(--orbit-offset-x);
  bottom: var(--orbit-offset-y);
  width: var(--orbit-w);
  height: var(--orbit-h);
  z-index: 3;   /* por cima do card, para transbordar sobre a divisa */
  perspective: var(--orbit-perspective);
  /* Só os cards capturam ponteiro — o resto da área continua "vazado" pra
     não roubar hover/clique do conteúdo da hero embaixo. */
  pointer-events: none;
}

.orbit__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.orbit__card {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--orbit-card-w);
  height: calc(var(--orbit-card-w) * var(--orbit-card-ratio));
  /* margens negativas centram o card no eixo do anel antes do transform 3D */
  margin-left: calc(var(--orbit-card-w) / -2);
  margin-top: calc(var(--orbit-card-w) * var(--orbit-card-ratio) / -2);
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--r-media);
  overflow: hidden;
  cursor: zoom-in;
  pointer-events: auto;
  /* transform/opacity/filter são escritos a cada frame pelo ticker do GSAP */
  will-change: transform, opacity, filter;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 18px 40px -18px rgba(15, 13, 10, 0.55);
}
.orbit__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.orbit__card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Enquanto arrasta no touch, o cursor vira "grabbing" e o snap some */
.orbit.is-dragging .orbit__card { cursor: grabbing; }

/* ============ LIGHTBOX ============ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 64px);
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 8, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out;
}
.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  will-change: transform, opacity;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-media);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
}
.lightbox__caption {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.78);
  text-align: center;
  max-width: 56ch;
}
.lightbox__close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  transition: background .3s ease, transform .3s var(--ease-out);
}
.lightbox__close:hover { background: rgba(255,255,255,0.18); transform: scale(1.06); }
.lightbox__close svg {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; fill: none;
}
.lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Navegação entre as fotos da galeria */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff; cursor: pointer;
  transition: background .25s, transform .25s;
}
.lightbox__nav--prev { left: clamp(12px, 3vw, 40px); }
.lightbox__nav--next { right: clamp(12px, 3vw, 40px); }
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }
.lightbox__nav svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox__nav[hidden] { display: none; }

.lightbox__counter {
  position: absolute;
  bottom: clamp(16px, 3vw, 32px);
  left: 0; right: 0;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
}

/* ============ 02 · VÍDEO INSTITUCIONAL (círculo → retângulo) ============
   Os valores abaixo são o ESTADO FINAL da coreografia. O JS parte de um
   estado inicial reduzido e converge pra cá, então sem JS (ou com
   prefers-reduced-motion) a seção já aparece pronta e legível. */

.s-vintro {
  /* espaço de scroll do pin é calculado pelo ScrollTrigger; a seção em si
     é só o palco de uma tela */
  background: var(--paper);
}
.vintro__stage {
  height: 100vh;
  height: 100svh;
  display: grid;
  /* linhas em auto (não 1fr): com uma linha flexível no meio, o vídeo era
     empurrado pro centro de um espaço enorme e a composição se descolava
     do título em telas altas. Com auto + align-content:center o bloco
     inteiro fica junto, centralizado. */
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  gap: clamp(20px, 3vh, 40px);
  padding: clamp(32px, 6vh, 72px) var(--pad-x);
  text-align: center;
}
.vintro__head { display: grid; justify-items: center; gap: 18px; }
/* Mesmo lockup da hero, só que maior no estado final. A escala inicial
   (que o iguala ao tamanho que ele tem na hero) é calculada em runtime
   por main.js — aqui fica só o destino. */
.vintro__lockup { text-align: left; }
.vintro__sig {
  /* a .hero-sig tem uma animação de entrada com delay de 1.4s; aqui a barra
     já chega pronta, senão sumiria durante a viagem */
  animation: none;
  transform: scaleY(1);
  width: 5px;
}
.vintro__lockup .hero-lockup__title { font-size: clamp(26px, 3.4vw, 46px); }
.vintro__lockup .hero-lockup__sub   { font-size: clamp(18px, 2.2vw, 28px); }
.vintro__label { color: var(--ink-muted); }

/* .vintro__media é o tamanho FINAL do vídeo; o frame filho é quem sofre o
   clip-path e a escala, e o play fica fora dele pra não ser recortado. */
.vintro__media {
  position: relative;
  /* o terceiro termo limita a largura pela ALTURA disponível — sem ele, em
     telas baixas o 16/9 estouraria o palco de uma tela */
  width: min(1080px, 100%, calc((100svh - 300px) * 16 / 9));
  aspect-ratio: 16 / 9;
  align-self: center;
}
.vintro__frame {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #0F0D0A;
  border-radius: var(--r-media); /* fallback sem JS; o JS usa clip-path */
  will-change: transform, clip-path;
}
.vintro__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}

/* Play — sempre no centro do vídeo, escala própria (não acompanha a
   abertura do círculo, senão ficaria minúsculo no início). */
.vintro__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(64px, 7vw, 92px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.vintro__play svg {
  position: relative; z-index: 2;
  width: 38%; height: 38%;
  fill: currentColor;
  margin-left: 6%; /* compensa o peso visual do triângulo */
}
.vintro__play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.08); }
.vintro__play:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

/* Pulso: dois anéis defasados saindo do botão */
.vintro__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.75);
  animation: vintro-pulse 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
.vintro__pulse--2 { animation-delay: 1.3s; }
@keyframes vintro-pulse {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* Player em tela cheia */
.vbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 64px);
}
.vbox[hidden] { display: none; }
.vbox__backdrop { position: absolute; inset: 0; background: rgba(10,8,6,0.92); }
.vbox__inner {
  position: relative; z-index: 1;
  width: min(1280px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-media);
  overflow: hidden;
  background: #000;
}
.vbox__video { width: 100%; height: 100%; display: block; }
.vbox__close {
  position: absolute; top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px);
  z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff; cursor: pointer;
  transition: background .25s, transform .25s;
}
.vbox__close:hover { background: rgba(255,255,255,0.2); transform: scale(1.06); }
.vbox__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.vbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .vintro__pulse { animation: none; opacity: .5; }
}

/* ============ 03 · MANIFESTO (limpo, sem malha) ============ */

.s-manifesto {
  padding-block: clamp(160px, 20vw, 260px);
  background: var(--paper);
}
.s-manifesto__inner {
  text-align: center;
  max-width: 1100px;
}
.s-manifesto__inner .t-label { display: inline-block; margin-bottom: 40px; }
.s-manifesto__h {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(38px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0 auto 48px;
}
.s-manifesto__h b { font-weight: 600; }
.s-manifesto__sub {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5; color: var(--ink-2);
  max-width: 60ch; margin: 0 auto;
}

/* ============ 03 · CONSTELLATION (números orbitando texto central) ============ */
/* SEM pin — a seção rola normalmente. Fica alta o bastante (min-height) pra dar
   espaço às orbitais + ao efeito de saída (blur/scale) tratado em main.js. */

.s-constellation {
  background: var(--paper);
  position: relative;
  overflow: clip;
}
.constel-inert {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(80px, 12vw, 160px);
}
.constel-eyebrow {
  position: relative; z-index: 3;
  margin-bottom: 24px;
}
.constel-headline {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  position: relative; z-index: 3;
  max-width: 18ch;
}
.constel-headline b { font-weight: 600; }

/* Orbitais — .orbital ancora a posição (top/left/etc, nunca transformado).
   .orbital__tilt recebe TODAS as animações (tilt 3D, parallax, scale, blur)
   — separar os dois evita que o GSAP brigue com o posicionamento absoluto. */
.orbital {
  position: absolute;
  z-index: 2;
  perspective: 700px;
}
.orbital__tilt {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  will-change: transform, filter;
}
.orbital__card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 250px;
  box-shadow: 0 24px 60px -20px rgba(31,38,58,0.18);
  border-radius: var(--r-media);
}
.orbital__num {
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.95;
  color: var(--ink);
}
.orbital__num--sm { font-size: clamp(32px, 3.6vw, 50px); }
.orbital__lbl {
  font-family: var(--font-body); font-weight: 200;
  font-size: 14px; line-height: 1.4;
  color: var(--ink-2);
}
.orbital__tilt > img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-media);
  display: block;
  box-shadow: 0 30px 70px -20px rgba(31,38,58,0.28);
}

/* Posições finais das orbitais (em torno do centro) — cards e fotos maiores */
.orbital--11        { top:  6%; left:  4%; }
.orbital--8         { top: 10%; right: 5%; }
.orbital--87        { bottom: 10%; left: 7%; }
.orbital--ona       { bottom: 8%; right: 3%; }

.orbital--photo-1   { top:  2%; left: 40%; width: 210px; height: 260px; }
.orbital--photo-2   { bottom: 4%; left: 38%; width: 235px; height: 170px; }
.orbital--photo-3   { top: 40%; right: 0%; width: 170px; height: 220px; }

/* ============ 04 · WALKTHROUGH (sticky media + texto rotativo) ============ */

.s-walk {
  /* Sem altura fixa em vh — o ScrollTrigger (pin + pinSpacing automático em
     main.js) cria o espaço de scroll certo com base no nº de slides, em
     qualquer resolução. min-height é só fallback antes do JS rodar. */
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper-2);
  position: relative;
}
.walk-sticky {
  /* Pinado via ScrollTrigger (main.js) — sempre exatamente a altura visível
     enquanto pinado. place-items:center garante centralização do grid inteiro
     (vertical e horizontal) sem depender de cadeia de align-items. */
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.walk-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  width: 100%;
}

.walk-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.walk-media__stack {
  /* Altura vem do viewport (min(...)), largura deriva do aspect-ratio.
     Antes era o contrário (largura da coluna → altura), o que em monitores
     largos-e-baixos (ex.: 1920x1080) fazia a foto ficar mais alta que o
     espaço vertical disponível, cortando de forma assimétrica dentro do
     100vh e dando a impressão de conteúdo "deslocado". Travando pela altura,
     nunca estoura o viewport em nenhuma resolução. */
  position: relative;
  aspect-ratio: 4/5;
  height: min(76vh, 760px);
  width: auto;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-media);
  box-shadow: 0 40px 80px -30px rgba(31,38,58,0.3);
}
.walk-img {
  /* Todas as camadas ficam empilhadas (absolute) o tempo todo — só o autoAlpha
     via GSAP timeline controla o que aparece. Nada de toggle de position via
     classe (era a causa da sobreposição intermitente). */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: opacity, transform;
  visibility: hidden;
  opacity: 0;
}
.walk-img.is-active { visibility: visible; opacity: 1; }
.walk-progress {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: center;
}
.walk-progress span {
  display: block;
  width: 24px; height: 2px;
  background: var(--rule);
  transition: background .5s ease, width .5s ease;
}
.walk-progress span.is-active {
  background: var(--ink);
  width: 40px;
}

.walk-text {
  /* Grid stacking no lugar de position:absolute + min-height fixo.
     Antes, os slides eram absolutos dentro de um container de altura fixa
     (320px): o container nunca refletia a altura real do conteúdo, então
     o texto não ficava centralizado junto com a foto — e um slide mais
     longo simplesmente vazava pra fora. Aqui a linha 2 do grid ganha
     automaticamente a altura do MAIOR slide, e a centralização passa a ser
     exata em qualquer resolução. */
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
}
.walk-text .t-label {
  grid-row: 1; grid-column: 1;
  display: block; margin-bottom: 28px;
}
.walk-slide {
  /* Todos os slides ocupam a MESMA célula (row 2 / col 1) — ficam empilhados
     sem tirar ninguém do fluxo. autoAlpha via GSAP decide o que aparece. */
  grid-row: 2; grid-column: 1;
  will-change: opacity, transform;
  visibility: hidden;
  opacity: 0;
}
.walk-slide.is-active { visibility: visible; opacity: 1; }
.walk-h {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}
.walk-h b { font-weight: 600; }
.walk-body {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 42ch;
  margin: 0;
}

/* ============ 05 · PERCURSO ARQUITETÔNICO ============ */

.s-percurso {
  /* Sem altura fixa em vh — ScrollTrigger (pin + pinSpacing, main.js) cria
     o espaço de scroll certo em qualquer resolução. */
  min-height: 100vh;
  position: relative;
  background: var(--paper); /* a moldura branca ao redor do card */
}
.s-percurso__sticky {
  /* Pinado via ScrollTrigger (main.js). É o palco: uma tela cheia de papel,
     com a margem que vira a moldura. */
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  padding: var(--hero-m);
}
/* O card em si — mesmo desenho da hero: cantos no raio padrão, imagem
   recortada dentro. Cresce com o scroll (main.js). */
.s-percurso__frame {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: var(--r-media);
  background: #0F0D0A;
  will-change: transform, border-radius;
}
.s-percurso__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.s-percurso__fallback {
  /* Fallback mobile/reduced-motion: vídeo simples em loop (ver main.js) */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.s-percurso__scrim {
  /* Degradê único, suave, só na base — só o necessário pra dar contraste
     ao texto sem escurecer o resto do frame. */
  position: absolute; inset: 0;
  /* Reforçado: com a sequência invertida o trecho final mostra o piso claro,
     e o texto branco sumia sobre ele. */
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 38%,
    rgba(0,0,0,0.30) 68%,
    rgba(0,0,0,0.68) 100%);
  pointer-events: none;
}
.s-percurso__content {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(48px, 8vw, 120px);
  color: #FFFFFF;
}
.s-percurso__h {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #FFFFFF; margin: 12px 0 16px;
}
.s-percurso__sub {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4; color: rgba(255,255,255,0.85);
  max-width: 40ch; margin: 0;
}

/* ============ 06 · PILARES (galeria com rolagem horizontal) ============ */

.s-pillars {
  /* quase branco: só o contraste necessário pra o card branco se destacar */
  background: #F9F8F6;
  padding-block: 0;
  overflow: hidden; /* a faixa é mais larga que a tela */
}
.horiz-gallery-wrapper { padding-block: clamp(72px, 9vw, 128px); }
.s-pillars__head { margin-bottom: clamp(36px, 4vw, 64px); }
.s-pillars__h { margin-top: 20px; }

/* A faixa: uma linha só, mais larga que a tela. O JS desloca ela em x
   enquanto a seção fica pinada (ver data-horiz-gallery em main.js).
   No mobile o mesmo markup vira swipe nativo — ver bloco responsivo. */
.horiz-gallery-strip {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 1.8vw, 28px);
  padding-inline: var(--pad-x);
  width: max-content;
}

.pillar {
  flex: 0 0 auto;
  /* 520px: em 1920 entram 3 cards inteiros + ~38% do quarto, que é o que
     sinaliza que a faixa continua. (3x520 + 3x28 de gap + 80 de padding
     = 1724; sobram 196px do quarto card.) */
  width: min(86vw, 520px);
  background: #FFFFFF;
  /* outline fino e claro + sombra discreta: o card flutua sobre o cinza
     sem peso visual */
  border: 0.5px solid var(--rule);
  border-radius: var(--r-media);
  box-shadow:
    0 1px 2px rgba(31, 38, 58, 0.04),
    0 10px 30px rgba(31, 38, 58, 0.06);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(31, 38, 58, 0.05),
    0 18px 44px rgba(31, 38, 58, 0.10);
}

.pillar__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
/* Ícone Lucide no topo esquerdo — sem selo, só o traço colorido.
   Cada card recebe UMA cor sólida da paleta (não um degradê aplicado ao
   ícone). São 6 cores oficiais para 8 cards, então as duas primeiras
   reaparecem no fim, mantendo a leitura do espectro. */
.pillar__icon {
  display: block;
  color: var(--ink);
  flex: 0 0 auto;
}
.pillar__icon svg {
  width: 32px; height: 32px;
  stroke-width: 1.7;
}
.horiz-gallery-strip .pillar:nth-child(1) .pillar__icon { color: var(--c-magenta); }
.horiz-gallery-strip .pillar:nth-child(2) .pillar__icon { color: var(--c-coral); }
.horiz-gallery-strip .pillar:nth-child(3) .pillar__icon { color: var(--c-orange); }
.horiz-gallery-strip .pillar:nth-child(4) .pillar__icon { color: var(--c-yellow); }
.horiz-gallery-strip .pillar:nth-child(5) .pillar__icon { color: var(--c-violet); }
.horiz-gallery-strip .pillar:nth-child(6) .pillar__icon { color: var(--c-indigo); }
.horiz-gallery-strip .pillar:nth-child(7) .pillar__icon { color: var(--c-magenta); }
.horiz-gallery-strip .pillar:nth-child(8) .pillar__icon { color: var(--c-coral); }
.pillar__num {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-muted); text-transform: uppercase;
}
.pillar__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
  text-wrap: balance;
}
.pillar__body {
  font-family: var(--font-body); font-weight: 200;
  font-size: 16px; line-height: 1.5;
  color: var(--ink-2); margin: 0;
}
.pillar__img {
  margin-top: auto;
  width: 100%; height: 150px;
  object-fit: cover;
  display: block;
  /* raio aninhado: o raio interno correto é o externo menos o padding,
     senão a curva da imagem "briga" com a curva do card */
  border-radius: calc(var(--r-media) - 14px);
}

/* ============ 07 · GALERIA (mosaico) ============ */

.s-gallery { background: var(--paper-2); }
.s-gallery .wrap-inner { margin-bottom: 56px; }
.s-gallery__h { margin-top: 20px; }

/* UM grid de 4 colunas x 2 linhas; cada foto ocupa uma área por coordenada:
     a a b b
     a a c d
   Altura explícita no container — sem ela a proporção da foto alta ditava o
   tamanho de tudo e o mosaico crescia muito além da tela. */
.s-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1.12fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  height: clamp(420px, 64vh, 680px);
}
.gitem--a { grid-area: 1 / 1 / 3 / 3; }
.gitem--b { grid-area: 1 / 3 / 2 / 5; }
.gitem--c { grid-area: 2 / 3 / 3 / 4; }
.gitem--d { grid-area: 2 / 4 / 3 / 5; }

/* .gitem é <button>: a foto abre no lightbox da página ao clique.
   Reset do botão + o mesmo raio e o mesmo zoom suave de antes. */
.gitem {
  margin: 0; padding: 0;
  border: 0;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  cursor: zoom-in;
  /* min-* zerados: em grid, o tamanho mínimo automático de um item é o do
     conteúdo — era o que fazia a foto furar a célula e invadir a vizinha */
  min-width: 0; min-height: 0;
  width: 100%; height: 100%;
  transition: box-shadow .5s var(--ease-out);
}
.gitem img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.gitem:hover img { transform: scale(1.05); }
.gitem:hover { box-shadow: 0 16px 40px rgba(31, 38, 58, 0.14); }
.gitem:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Blocos extras, revelados pelo botão. O espelhado inverte a coluna alta;
   o trio fecha a sequência com três fotos em faixa. */
.s-gallery__grid--flip { margin-top: clamp(12px, 1.4vw, 20px); }
.s-gallery__grid--flip .gitem--a { grid-area: 1 / 3 / 3 / 5; }
.s-gallery__grid--flip .gitem--b { grid-area: 1 / 1 / 2 / 3; }
.s-gallery__grid--flip .gitem--c { grid-area: 2 / 1 / 3 / 2; }
.s-gallery__grid--flip .gitem--d { grid-area: 2 / 2 / 3 / 3; }

.s-gallery__grid--trio {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  height: clamp(220px, 32vh, 340px);
  margin-top: clamp(12px, 1.4vw, 20px);
}
.s-gallery__grid--trio .gitem { grid-area: auto; }

/* O atributo hidden vale display:none, mas vem da folha do navegador e perde
   para .s-gallery__grid { display: grid }. Sem esta regra os blocos extras
   já apareciam de saída, e o botão não tinha o que revelar. */
.s-gallery__grid[hidden] { display: none; }

.s-gallery__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 56px);
}

/* 08 · o vídeo institucional virou a seção 02 (.s-vintro, no topo do arquivo) */

/* ============ 09 · EQUIPE ============ */

/* A seção ocupa uma tela inteira, com o conteúdo centrado nela. */
.s-team {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(56px, 8vh, 110px);
}
/* Duas colunas: título + descrição à esquerda, pilha à direita.
   A esquerda em minmax(0,1fr) pode encolher; a direita tem piso e teto
   para a pilha nunca ficar estreita nem dominar a linha. */
.s-team__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(442px, 598px);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  width: 100%;
}
/* Título em três linhas, uma por span — o gradiente fica só em "Muitas mãos" */
.s-team__h {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 20px 0 0;
}
.s-team__h span { display: block; }
.s-team__h .grad-text { font-weight: 600; }
.s-team__desc {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin: clamp(24px, 3vh, 40px) 0 0;
}

/* ---- Pilha animada de áreas ----
   O palco tem altura fixa e recorta: os cards que saem por cima somem sem
   empurrar o resto da página. O gradiente nas pontas dissolve a entrada e a
   saída no fundo em vez de cortar reto. */
.s-team__stack {
  position: relative;
  width: 100%;
  height: clamp(390px, 52vh, 520px);
  overflow: hidden;
  cursor: grab;
  /* none e não pan-y: o arrasto AQUI é vertical, então o gesto tem que ser
     nosso. A página continua rolando normalmente fora da pilha. */
  touch-action: none;
  /* sem isto o arrasto vira seleção de texto e o gesto morre no meio */
  user-select: none;
  -webkit-user-select: none;
}
.s-team__stack.is-dragging { cursor: grabbing; }
.s-team__stack::before,
.s-team__stack::after {
  content: '';
  position: absolute; inset-inline: 0;
  height: 22%;
  pointer-events: none;
  z-index: 6;
}
.s-team__stack::before { top: 0; background: linear-gradient(180deg, var(--paper) 10%, transparent); }
.s-team__stack::after  { bottom: 0; background: linear-gradient(0deg, var(--paper) 10%, transparent); }

.team-list {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  height: 100%;
}

/* Cada card é posicionado por transform (topo do palco + deslocamento),
   não pelo fluxo: assim a pilha reordena sem reflow a cada quadro. */
.team-item {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 2.1vw, 29px);
  padding: clamp(21px, 2.3vw, 29px) clamp(23px, 2.6vw, 34px);
  background: #FFFFFF;
  border: 0.5px solid var(--rule);
  border-radius: var(--r-media);
  box-shadow:
    0 1px 2px rgba(31, 38, 58, 0.04),
    0 10px 30px rgba(31, 38, 58, 0.06);
  will-change: transform, opacity;
}
.team-item__icon {
  display: grid; place-items: center;
  width: 55px; height: 55px;
  flex: 0 0 auto;
  color: var(--ink);
}
.team-item__icon svg { width: 31px; height: 31px; }
/* uma cor da paleta por área, na ordem do espectro */
.team-item:nth-child(1) .team-item__icon { color: var(--c-magenta); }
.team-item:nth-child(2) .team-item__icon { color: var(--c-coral); }
.team-item:nth-child(3) .team-item__icon { color: var(--c-orange); }
.team-item:nth-child(4) .team-item__icon { color: var(--c-yellow); }
.team-item:nth-child(5) .team-item__icon { color: var(--c-violet); }
.team-item:nth-child(6) .team-item__icon { color: var(--c-indigo); }
.team-item:nth-child(7) .team-item__icon { color: var(--c-magenta); }
.team-item:nth-child(8) .team-item__icon { color: var(--c-coral); }

.team-item__name {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(21px, 1.75vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  min-width: 0;
}
.team-item__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(31px, 3.1vw, 44px);
  line-height: 1;
  color: var(--rule);
  flex: 0 0 auto;
}

/* Sem JS (ou com reduced-motion) a pilha vira uma lista comum e legível */
.s-team__stack:not(.is-live) {
  height: auto; overflow: visible; cursor: default;
  width: 100%;
}
.s-team__stack:not(.is-live)::before,
.s-team__stack:not(.is-live)::after { display: none; }
.s-team__stack:not(.is-live) .team-list { height: auto; display: grid; gap: 10px; }
.s-team__stack:not(.is-live) .team-item { position: relative; }

/* ============ 10 · DEPOIMENTO ============ */

/* ============================================================
   MENU FIXO DO TOPO (.navbar)
   Só aparece depois que a rolagem começa (a classe is-visivel vem do JS).
   Fora do smooth-wrapper — position:fixed quebra sob transform.
   Vidro: branco a ~16% + blur. Fica claro sobre as seções em papel e
   ainda define a barra sobre as seções escuras (rodapé, vídeo de fundo).
   ============================================================ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  /* visibility (e não só opacity) tira os botões da ordem de tabulação
     enquanto a barra está escondida */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity .32s var(--ease-out),
              transform .38s var(--ease-out),
              visibility 0s linear .38s;
}
.navbar.is-visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .32s var(--ease-out),
              transform .38s var(--ease-out),
              visibility 0s;
}
.navbar__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}
.navbar__logo { display: block; flex: none; }
.navbar__logo img {
  display: block;
  height: clamp(26px, 2.4vw, 32px);
  width: auto;
}

.navbar__acoes { display: flex; align-items: center; gap: 10px; }

/* ---- Botão compacto (usado só na barra fixa) ---- */
.btn--sm {
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: 0.06em;
  gap: 8px;
}

/* ---- Botão do WhatsApp ---- */
.btn--wpp {
  background: #25D366;          /* verde oficial do WhatsApp */
  color: #fff;
}
/* O .btn base varre um gradiente da marca no hover; no botão do WhatsApp
   isso apagaria justamente a cor que identifica o canal. */
.btn--wpp::after { background: #1EBE5A; }
.btn__ico { width: 17px; height: 17px; flex: none; }
.btn--sm .btn__ico { width: 15px; height: 15px; }

/* ---- Ações do CTA final ---- */
.s-cta__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

@media (max-width: 900px) {
  /* Aperta antes de esconder rótulo: nowrap porque "Fale com o Hospital"
     quebrando em duas linhas engorda a barra inteira. */
  .navbar__acoes .btn { padding: 11px 15px; font-size: 10px; white-space: nowrap; }
}
@media (max-width: 620px) {
  /* Aqui os rótulos não cabem mais de jeito nenhum: os dois viram botão
     redondo só com o ícone. O aria-label de cada <a> mantém o nome para
     leitores de tela. */
  .navbar__acoes .btn__txt { display: none; }
  .navbar__acoes .btn { padding: 12px; border-radius: 100px; }
  .navbar__logo img { height: 24px; }
}
@media (max-width: 720px) {
  .s-cta__acoes { flex-direction: column; align-items: stretch; }
  .s-cta__acoes .btn { justify-content: center; }
}

/* ============================================================
   09b · CORPO CLÍNICO
   Fundo cinza da paleta com cards brancos — a inversão do resto da
   página, para o bloco se destacar como "diretório" e não como texto
   corrido. Cada especialidade carrega uma cor da marca em --esp, usada
   no ícone, no rótulo e no filtro: é o que dá leitura de grupo antes de
   ler o rótulo. Clicar no card abre o currículo em .mbox.
   ============================================================ */
.s-corpo {
  background: var(--paper-2);
  padding-block: var(--pad-y);
}
.s-corpo__h {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* +50px de respiro entre o título e o filtro */
  margin: 20px 0 calc(clamp(28px, 3.4vh, 40px) + 50px);
  max-width: 20ch;
}
.s-corpo__h .grad-text { font-weight: 600; }

/* ---- Filtros ---- */
.s-corpo__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(24px, 3vh, 36px);
}
.filtro {
  --esp: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s, border-color .2s, background-color .2s;
}
.filtro:hover { border-color: var(--esp); color: var(--esp); }
.filtro:focus-visible { outline: 2px solid var(--esp); outline-offset: 2px; }
/* Contagem: some no estado ativo — ali o próprio grid já responde quantos são */
.filtro__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  transition: color .2s;
}
.filtro.is-ativo {
  background: var(--esp);
  border-color: var(--esp);
  color: #fff;
}
.filtro.is-ativo .filtro__n { color: rgba(255,255,255,.75); }

/* ---- Grade ---- */
.s-corpo__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.s-corpo__vazio {
  font-family: var(--font-body); font-weight: 200;
  color: var(--ink-muted);
  margin: 32px 0 0;
}

/* ---- Card ----
   Vertical (retrato em cima, nome embaixo): com 4 por linha o card fica
   perto de 300px e um layout horizontal quebrava nomes longos em três
   linhas. Na vertical o nome usa a largura inteira do card. */
.medico { display: flex; }
.medico[hidden] { display: none; }
.medico__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  /* Branco puro, e não --paper: sobre o --paper-2 da seção o off-white da
     paleta quase não separava, e o pedido era o card se destacar. */
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-media);
  padding: clamp(18px, 1.8vw, 24px);
  cursor: pointer;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.medico__btn:hover {
  border-color: var(--esp);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(31, 38, 58, .09);
}
.medico__btn:focus-visible { outline: 2px solid var(--esp); outline-offset: 3px; }

.medico__foto {
  width: clamp(56px, 4.4vw, 66px);
  aspect-ratio: 1;
  border-radius: calc(var(--r-media) * 0.62);
  background: var(--esp-tint);
  color: var(--esp);
  display: grid;
  place-items: center;
  margin-bottom: clamp(16px, 1.6vw, 20px);
  flex: none;
}
.medico__foto svg { width: 54%; height: auto; }
/* Quando a foto real chegar, ela substitui o span e ocupa o mesmo quadrado */
img.medico__foto { object-fit: cover; display: block; }

.medico__nome {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.medico__esp {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.3;
  color: var(--esp);
  margin-top: 8px;
}
.medico__crm {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  margin-top: 8px;
}
/* Afordância de clique: o card inteiro é o botão, mas sem isso nada indica
   que existe conteúdo atrás dele. */
.medico__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--esp);
  margin-top: clamp(14px, 1.4vw, 18px);
  opacity: .55;
  transition: opacity .22s;
}
.medico__btn:hover .medico__link { opacity: 1; }

/* ---- Cores por especialidade ---- */
.medico--onco-clinica,   .filtro--onco-clinica   { --esp: var(--c-coral);   --esp-tint: rgba(242, 109, 63, .11); }
.medico--cirurgia-onco,  .filtro--cirurgia-onco  { --esp: var(--c-indigo);  --esp-tint: rgba(59, 74, 159, .11); }
.medico--hematologia,    .filtro--hematologia    { --esp: var(--c-violet);  --esp-tint: rgba(123, 79, 158, .11); }
.medico--cabeca-pescoco, .filtro--cabeca-pescoco { --esp: var(--c-magenta); --esp-tint: rgba(233, 64, 124, .11); }
.medico--mastologia,     .filtro--mastologia     { --esp: var(--c-orange);  --esp-tint: rgba(245, 160, 42, .13); }

@media (max-width: 1240px) { .s-corpo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 940px)  { .s-corpo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  {
  .s-corpo__grid { grid-template-columns: 1fr; }
  .s-corpo__h { max-width: none; }
  .filtro { font-size: 13px; padding: 10px 15px; }
}

/* ============================================================
   MODAL DE CURRÍCULO (.mbox)
   Fora do smooth-wrapper — position:fixed não funciona sob transform.
   ============================================================ */
.mbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.mbox[hidden] { display: none; }
.mbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 38, 58, .58);
  backdrop-filter: blur(3px);
}
.mbox__inner {
  position: relative;
  width: min(620px, 100%);
  max-height: min(760px, 88vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: var(--r-media);
  padding: clamp(28px, 3.4vw, 44px);
}
.mbox__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-muted);
  transition: color .2s, background-color .2s;
}
.mbox__close:hover { color: var(--ink); background: var(--paper-2); }
.mbox__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.mbox__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 1.8vw, 22px);
  padding-right: 44px;   /* não passar por baixo do botão de fechar */
}
.mbox__foto {
  width: clamp(64px, 6vw, 78px);
  aspect-ratio: 1;
  border-radius: calc(var(--r-media) * 0.62);
  background: var(--esp-tint, var(--paper-2));
  color: var(--esp, var(--ink-muted));
  display: grid;
  place-items: center;
}
.mbox__foto svg { width: 54%; height: auto; }
.mbox__ident { min-width: 0; }
.mbox__nome {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.mbox__esp {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(14px, 1.15vw, 15.5px);
  color: var(--esp, var(--ink-2));
  margin: 7px 0 0;
}
.mbox__crm {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  margin: 7px 0 0;
}
.mbox__bio { margin-top: clamp(24px, 3vh, 32px); }
.mbox__bio ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.mbox__bio li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.5;
  color: var(--ink-2);
}
.mbox__bio li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--esp, var(--ink-muted));
}
.medico__bio-vazio,
.mbox__bio .medico__bio-vazio {
  font-family: var(--font-body); font-weight: 200;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0;
}

.s-quote { background: var(--paper-2); }
/* Espaçamento simétrico: é o que deixa o bloco de texto centralizado na
   altura da seção. O retrato encosta na base transbordando o espaçamento
   de baixo com margem negativa (ver .s-quote__portrait img). */
.s-quote { overflow: hidden; }
.s-quote__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;  /* o retrato encosta na base; o texto se centraliza sozinho */
}
/* O retrato é um recorte sem fundo: sem moldura, sem raio, sem recorte.
   A imagem encosta na base da seção — daí o padding-bottom zerado na coluna
   e o align-self:end no grid. */
.s-quote__portrait {
  margin: 0;
  align-self: end;
  display: flex;
  justify-content: center;
}
.s-quote__portrait img {
  display: block;
  width: auto;
  max-width: 100%;
  /* +35% sobre os 62vh anteriores: corta mais na cintura e mostra mais
     dos braços para cima */
  height: clamp(580px, 84vh, 918px);
  /* desce até encostar na base da seção, atravessando o espaçamento */
  margin-bottom: calc(var(--pad-y) * -1);
  object-fit: contain;
  object-position: bottom center;
}
/* Texto, nome e cargo centralizados no meio da seção. O padding-bottom
   compensa o padding-bottom zerado da seção (que existe para o retrato
   encostar na base), devolvendo o depoimento ao centro óptico. */
/* Texto alinhado à direita; o bloco todo é que fica centralizado na
   altura da seção (align-self:center vence o align-items:end do grid,
   que existe para o retrato encostar na base). */
.s-quote__body {
  margin: 0;
  text-align: right;
  align-self: center;
  padding-bottom: 0;
}
.s-quote__text {
  font-family: var(--font-body); font-weight: 200;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 32px;
  text-wrap: balance;
}
.s-quote__cite {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end; /* nome e cargo acompanham o texto, à direita */
  font-style: normal;
}
.s-quote__cite-name {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink);
}
.s-quote__cite-role {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-muted); text-transform: uppercase;
}

/* ============ 11 · VISÃO DE FUTURO (vídeo de fundo) ============ */

.s-vision {
  min-height: 100vh;
  position: relative;
  background: var(--paper); /* a moldura branca ao redor do card */
  padding-block: 0;
}
.s-vision__sticky {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  padding: var(--hero-m);
}
/* Mesmo desenho da hero e do percurso: card no raio padrão, mídia recortada
   dentro. Cresce com o scroll (main.js). */
.s-vision__frame {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: var(--r-media);
  background: #0F0D0A;
  will-change: transform, border-radius;
}
.s-vision__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Camada preta de 20% — o contraste que o texto branco precisa */
.s-vision__veil {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
}
.s-vision__content {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: #FFFFFF;
}
.s-vision__label {
  color: rgba(255,255,255,0.85);
  margin-bottom: clamp(20px, 3vh, 36px);
}
/* menor que antes (chegava a 96px): aqui divide espaço com o vídeo */
.s-vision__h {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #FFFFFF;
  max-width: 20ch;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.s-vision__h b { font-weight: 600; }
/* o degradê some aqui: sobre o vídeo, o branco cheio lê melhor */
.s-vision__h .grad-text {
  background: none;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}

/* ============ 12 · CTA ============ */

.s-cta {
  padding-block: clamp(80px, 10vw, 140px);
  background: #F1EFEC; /* cinza clarinho, para o box branco se destacar */
}
.s-cta__frame {
  /* outline cinza de 1px a 10% de opacidade */
  border: 1px solid rgba(110, 112, 128, 0.1);
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 64px);
  text-align: center;
  background: #FFFFFF;
  /* sem max-width próprio: acompanha a largura de conteúdo da página,
     definida pelo .wrap-inner que o envolve */
  width: 100%;
  border-radius: var(--r-media);
}
.s-cta__tag {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink); margin: 0 0 24px;
}
.s-cta__h {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.s-cta__sub {
  font-family: var(--font-body); font-weight: 200;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ink-2); margin: 0 0 40px;
}

/* ============ 13 · FOOTER ============ */

.s-footer {
  /* azul-marinho da identidade (mesma tinta dos títulos, aplicada ao fundo) */
  background: var(--ink);
  color: #FFFFFF;
  padding-block: clamp(48px, 6vw, 88px);
}
.s-footer__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.s-footer__logo { display: block; width: clamp(180px, 15vw, 240px); margin-bottom: 16px; }
.s-footer__logo img { width: 100%; height: auto; }
.s-footer__tag {
  font-family: var(--font-body); font-weight: 600;
  font-size: 15px; color: #FFFFFF; margin: 0 0 12px;
}
/* rótulos e textos invertidos para contrastar com o marinho */
.s-footer .t-label { color: rgba(255,255,255,0.65); }
.s-footer__bar { width: 60px; }
.s-footer__col > * + * { margin-top: 8px; }
.s-footer__body {
  font-family: var(--font-body); font-weight: 200;
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82);
  margin: 12px 0 0;
}
.s-footer__meta { text-align: right; }
.s-footer__mini {
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1.6; color: rgba(255,255,255,0.55);
  margin: 0;
}

/* ============ RESPONSIVO ============ */

@media (max-width: 900px) {
  /* HERO */
  /* width: 100% é obrigatório aqui — .hero-content virou grid (abaixo) e o
     .wrap-inner tem margin-inline:auto, então como grid item ele encolhe até
     a largura do conteúdo (o max-width de 13ch da headline) e se centraliza,
     desalinhando o texto da marca no topo. */
  .hero-content__grid { grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .hero-headline--r { text-align: left; }
  .hero-headline { font-size: clamp(28px, 6.6vw, 42px); }
  /* Limite de medida em ambas as colunas → 4 linhas no total
     ("Para a vida" / "continuar," / "o cuidado" / "precisa evoluir.").
     13ch (~208px na fonte atual) fica na janela entre a maior linha que
     precisa caber inteira, "precisa evoluir." (182px), e a frase mais curta
     que precisa quebrar, "Para a vida continuar," (256px). */
  .hero-headline--l,
  .hero-headline--r { max-width: 13ch; }

  /* Ancoragem paramétrica: em vez de um deslocamento fixo, o bloco de texto
     ocupa do topo do card até 20px antes dos cards da órbita e encosta na
     base desse espaço. --orbit-cards-top é publicada por js/main.js a cada
     medição, então isso se ajusta sozinho em qualquer tela. */
  .hero-content {
    --headline-gap: 20px;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(var(--orbit-cards-top, 60%) - var(--headline-gap));
    transform: none;
    display: grid;
    align-content: end;
  }
  /* Lockup maior e deslocado pra baixo, ocupando melhor a faixa branca
     (sobrava um vazio considerável embaixo). */
  .hero-foot { align-content: end; padding-bottom: clamp(18px, 5vw, 34px); }
  .hero-foot__grid { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  /* PILARES — no touch a faixa é swipe nativo, não pin+scrub (o JS não
     monta a galeria horizontal em ponteiro grosso, ver main.js) */
  .horiz-gallery-strip {
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    /* sem isto o snap encostava o card na borda da tela, desalinhado do
       título e do texto da seção */
    scroll-padding-inline-start: var(--pad-x);
  }
  .pillar { scroll-snap-align: start; width: 78vw; }
  .pillar__img { height: 130px; }

  /* VÍDEO INSTITUCIONAL — a viagem do lockup já está desativada no mobile
     (ver main.js), então o título "Novo Centro de Oncologia" que aparecia
     aqui era uma repetição estática do que já está na hero. Some, e sobra
     só o rótulo "Vídeo institucional" acima do vídeo. */
  .vintro__lockup { display: none; }
  /* sobe o vídeo pra ficar logo abaixo do texto da hero — sem o bloco do
     título, o topo e o gap generosos do desktop deixavam tudo longe demais.
     align-content:start (em vez de center) é o que realmente aproxima: com
     center, um palco de 100svh quase vazio (só rótulo + vídeo) sobra
     folga igual em cima e embaixo, e o vídeo aparece bem mais abaixo do
     que o topo da tela onde a hero termina. */
  .vintro__stage {
    /* height:auto é o que realmente fecha o espaço — a base fixa 100svh
       (uma tela inteira) INDEPENDENTE do conteúdo. Como o vídeo (16:9) e o
       rótulo não enchem uma tela inteira, e o conteúdo fica alinhado no
       topo (align-content:start), sobrava uma faixa em branco vazia
       dentro do PRÓPRIO palco, entre o vídeo e a base da seção — era isso
       que parecia "espaço gigantesco até a próxima seção", não um
       espaçamento entre seções de verdade. Com altura pelo conteúdo, a
       seção termina logo depois do rótulo. */
    height: auto;
    align-content: start;
    padding: clamp(16px, 3vh, 32px) var(--pad-x);
    gap: clamp(10px, 1.6vh, 18px);
  }
  .vintro__media { width: 100%; }

  /* MANIFESTO — o padding-block próprio (160-260px) é generoso demais numa
     tela de 375px; em 20vw dá só 75px, então quem manda é o mínimo de
     160px dos dois lados — 320px de espaço em branco entre o vídeo e a
     próxima dobra. O topo cai pros ~25px pedidos (o vídeo, sem pin, já não
     deixa mais o vão do spacer que havia antes); a base mantém o padrão
     de seção da página. */
  .s-manifesto { padding-top: 25px; padding-bottom: var(--pad-y); }

  /* o botão sai no mobile (pedido do Bruno): na faixa branca estreita ele
     competia com o lockup pelo pouco espaço que sobra */
  .hero-cta { display: none; }
  .hero-foot__left {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .hero-lockup { order: 1; }
  /* proporcionalmente menor que os 18/24/40 do Figma — em 375px o botão
     cheio ocuparia largura demais na faixa branca */
  .hero-cta { order: 2; padding: 18px 32px; font-size: 16px; }

  .hero-lockup__title { font-size: clamp(23px, 6vw, 30px); }
  .hero-lockup__sub { font-size: clamp(17px, 4.6vw, 22px); }
  .hero-sig { width: 5px; }

  .hero-scroll { flex-direction: row; align-items: center; }
  .hero-scroll__line {
    width: 40px; height: 1px;
    /* sobre a faixa branca: mesma tinta do texto, não branco */
    background: linear-gradient(90deg, var(--ink-muted) 0%, rgba(110,112,128,0) 100%);
    transform-origin: left;
    animation-name: hero-scroll-pulse-h;
  }
  @keyframes hero-scroll-pulse-h {
    0%, 100% { transform: scaleX(1); opacity: 0.75; }
    50%      { transform: scaleX(0.55); opacity: 1; }
  }

  /* CONSTELLATION — layout stack simples, sem tilt/parallax (JS já pula pin+tilt no isCompact).
     Fotos saem de cena no mobile — só os cards de número (pedido explícito). */
  .constel-inert { min-height: auto; display: block; padding-block: 64px; }
  .constel-headline { margin-bottom: 48px; } /* respiro entre o título e o 1º card */
  .orbital { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 14px auto; display: block; max-width: 320px; perspective: none; }
  .orbital__tilt { transform: none !important; filter: none !important; }
  .orbital--photo-1, .orbital--photo-2, .orbital--photo-3 { display: none !important; }

  /* WALKTHROUGH — continua pinado + com crossfade no mobile também (mesmo
     efeito do desktop), só o layout muda pra empilhado (foto em cima, texto
     embaixo) cabendo na altura visível.
     ORDEM IMPORTA: vh antes de svh — svh desconta a barra do navegador. */
  .s-walk { min-height: 100vh; min-height: 100svh; }
  .walk-sticky {
    height: 100vh;
    height: 100svh;
    padding-block: 24px;
    place-items: center;
  }
  .walk-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vh, 34px);
    align-content: center;
  }
  .walk-media__stack {
    /* Foto bem maior no mobile (era 36vh) — o conteúdo de texto embaixo é
       curto, então sobra altura pra dar destaque à imagem. */
    height: min(46vh, 420px);
    width: auto;
    margin-inline: auto;
  }
  .walk-text { text-align: center; justify-items: center; }
  .walk-text .t-label { margin-bottom: 14px; }
  .walk-h { font-size: clamp(26px, 7.5vw, 36px); margin-bottom: 12px; }
  .walk-body { font-size: clamp(15px, 4vw, 17px); max-width: 36ch; margin-inline: auto; }
  .walk-progress { margin-top: 18px; }

  /* PERCURSO — canvas de sequência desativado, usa o <video> fallback */
  .s-percurso { min-height: auto; }
  .s-percurso__sticky { position: relative; height: 80vh; }
  .s-percurso__canvas { display: none; }
  .s-percurso__fallback { display: block; }
  .s-vision__sticky { position: relative; height: 80vh; }

  /* GALERIA — o mosaico de duas colunas vira uma pilha: em telas estreitas
     a foto alta e as duas pequenas ficariam pequenas demais lado a lado. */
  /* GALERIA — o mosaico vira 2x3: a foto principal ocupa a linha inteira e
     as outras três se dividem abaixo. Altura automática (as proporções de
     cada item mandam), já que a altura fixa do desktop não faz sentido aqui. */
  .s-gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    height: auto;
  }
  .gitem--a { grid-area: 1 / 1 / 2 / 3; aspect-ratio: 4 / 3; }
  .gitem--b { grid-area: 2 / 1 / 3 / 3; aspect-ratio: 16 / 9; }
  .gitem--c { grid-area: 3 / 1 / 4 / 2; aspect-ratio: 1 / 1; }
  .gitem--d { grid-area: 3 / 2 / 4 / 3; aspect-ratio: 1 / 1; }

  /* Os blocos extras precisam das MESMAS coordenadas empilhadas: as regras
     do desktop têm especificidade maior (.grid--flip .gitem--a) e venceriam,
     jogando itens em colunas que não existem aqui — as fotos colapsavam. */
  .s-gallery__grid--flip .gitem--a { grid-area: 1 / 1 / 2 / 3; aspect-ratio: 4 / 3; }
  .s-gallery__grid--flip .gitem--b { grid-area: 2 / 1 / 3 / 3; aspect-ratio: 16 / 9; }
  .s-gallery__grid--flip .gitem--c { grid-area: 3 / 1 / 4 / 2; aspect-ratio: 1 / 1; }
  .s-gallery__grid--flip .gitem--d { grid-area: 3 / 2 / 4 / 3; aspect-ratio: 1 / 1; }

  .s-gallery__grid--trio {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .s-gallery__grid--trio .gitem--e { grid-area: 1 / 1 / 2 / 3; aspect-ratio: 16 / 9; }
  .s-gallery__grid--trio .gitem--f { grid-area: 2 / 1 / 3 / 2; aspect-ratio: 1 / 1; }
  .s-gallery__grid--trio .gitem--g { grid-area: 2 / 2 / 3 / 3; aspect-ratio: 1 / 1; }

  /* setas menores e mais próximas da borda na tela estreita */
  .lightbox__nav { width: 42px; height: 42px; }

  /* EQUIPE */
  /* as três colunas viram três blocos empilhados */
  .s-team__inner { grid-template-columns: 1fr; gap: 28px; }
  .s-team { min-height: auto; padding-block: var(--pad-y); }
  .s-team__stack {
    height: clamp(360px, 49vh, 460px);
    /* a rolagem da página volta a ser do dedo: o arrasto vertical nos cards
       atrapalhava a navegação (pedido do Bruno) */
    touch-action: auto;
    cursor: default;
  }
  .team-item { gap: 16px; padding: 18px 21px; }
  .team-item__icon { width: 44px; height: 44px; }
  .team-item__icon svg { width: 27px; height: 27px; }
  .team-item__name { font-size: 19px; }
  .team-item__num { font-size: 29px; }

  /* DEPOIMENTO */
  .s-quote__grid { grid-template-columns: 1fr; }
  /* no mobile o retrato vem depois do depoimento e continua encostando na base */
  .s-quote__grid { grid-template-columns: 1fr; justify-items: center; }
  .s-quote__portrait { order: 2; }
  .s-quote__portrait img { height: clamp(405px, 62vh, 567px); }
  /* texto, nome e cargo centralizados — e o bloco também */
  .s-quote__body { order: 1; text-align: center; padding-bottom: 32px; }
  .s-quote__cite { align-items: center; }

  /* FOOTER — tudo centralizado: texto, logo e a barrinha colorida */
  .s-footer__grid { grid-template-columns: 1fr 1fr; text-align: center; justify-items: center; }
  .s-footer__brand { grid-column: 1 / -1; }
  .s-footer__meta { text-align: center; grid-column: 1 / -1; }
  .s-footer__logo, .s-footer__bar { margin-inline: auto; }

  /* GALERIA ORBITAL — no mobile o anel é CENTRALIZADO e mais largo que a
     tela, então é cortado igualmente nos dois lados. A largura extra também
     aumenta o raio, que é o que dá o afastamento entre os cards (antes eles
     se atropelavam: a circunferência era menor que a soma das larguras).
     Continua girando e arrastável; o toque abre o lightbox. */
  /* No mobile o card ocupa 70% e a faixa branca 30% — encaixa melhor com o
     lockup e o anel na tela estreita. */
  .hero { --hero-card-h: 70%; }

  .orbit {
    --orbit-w: 124%;          /* menos largo que antes → cards mais próximos */
    --orbit-h: 30%;
    --orbit-offset-x: -12%;   /* (124−100)/2 → sobra igual de cada lado */
    /* Acima da divisa (30% do rodapé): centrar o anel exatamente nela fazia os
       cards descerem sobre o lockup, que também vive nessa faixa. Subindo,
       eles ainda cruzam a borda do card mas liberam o texto. */
    --orbit-offset-y: 21%;
    --orbit-card-w: clamp(88px, 24vw, 116px);
    --orbit-perspective: 900px;
    right: auto;
    left: var(--orbit-offset-x);
  }

  /* Cursor custom desativa em mobile */
  .cursor { display: none !important; }
}

@media (max-width: 560px) {
  .s-footer__grid { grid-template-columns: 1fr; }
}

/* Motion reduzido */
@media (prefers-reduced-motion: reduce) {
  .hero-img--mulher, .hero-img--homem { animation: none; }
  .hero-img--homem { opacity: 0; }
  .hero-headline span, .hero-foot__grid, .hero-sig, .hero-scroll__line, .hero-top__grid {
    animation: none; opacity: 1; transform: none;
  }
  .s-percurso { min-height: auto; }
  .s-percurso__sticky { position: relative; height: 80vh; }
  .s-percurso__canvas { display: none; }
  .s-percurso__fallback { display: block; }
  video[autoplay] { animation: none; }
  .cursor { display: none !important; }
  .s-walk { min-height: auto; }
  .walk-sticky { position: relative; height: auto; padding: 96px 0; display: block; }
  .orbital { opacity: 1 !important; transform: none !important; filter: none !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 12px auto; }
  /* Sem animação: os slides deixam de ficar empilhados na mesma célula do
     grid e passam a fluir um abaixo do outro (grid-row auto). */
  .walk-text { display: block; }
  .walk-slide { grid-row: auto !important; grid-column: auto !important; }
  .walk-slide + .walk-slide { margin-top: 48px; }
  .walk-slide, .walk-img { opacity: 1 !important; visibility: visible !important; position: relative !important; inset: auto; }
  .walk-media__stack .walk-img + .walk-img { display: none; }
}