/* ============================================================
   HAIKAI — Home
   Estilos de componente e layout. Tokens em haikai-tokens.css.
   ============================================================ */

/* Fontes de marca da newnew — com a fusão entre as duas empresas em
   andamento, a Haikai passa a usar o mesmo par tipográfico. Servidas pelo
   CDN da newnew (não há arquivo local); nenhuma das duas tem peso leve nem
   itálico verdadeiro — ver .hero-title-light abaixo. */
@font-face {
  font-family: 'Polymath';
  src: url('https://cdn.prod.website-files.com/669ffd9f3e133b92450238ce/66aa527e996e97f452dad336_Polymath-Bold.woff2') format('woff2'),
       url('https://cdn.prod.website-files.com/669ffd9f3e133b92450238ce/66aa527eb536ba06741a47fb_Polymath-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Europa Grotesk Nr 2 Sb';
  src: url('https://cdn.prod.website-files.com/669ffd9f3e133b92450238ce/66aa5241b21ab6c5b1740b99_EuropaGroteskNr2SB-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Europa Grotesk Nr 2 Sb';
  src: url('https://cdn.prod.website-files.com/669ffd9f3e133b92450238ce/66aa5241dd3a29554fe5d914_EuropaGroteskNr2SB-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x:hidden por si só faz o navegador computar overflow-y:auto (regra
   de pareamento da spec CSS Overflow), o que quebra position:sticky na
   página inteira — por isso "clip", que corta sem virar contêiner de scroll. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--haikai-offwhite);
  color: var(--gray-900);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

section { position: relative; }

.eyebrow {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--haikai-blue-ink);
  margin: 0 0 12px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  margin: 0;
  color: var(--haikai-black);
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

.section-title {
  font-size: var(--fs-display-l);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  max-width: 18ch;
}
.section-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--gray-600);
  max-width: 60ch;
  margin-top: var(--space-4);
  text-wrap: pretty;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============ BOTÕES ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--motion-base) var(--easing-default),
              color var(--motion-base) var(--easing-default),
              transform var(--motion-base) var(--easing-default),
              border-color var(--motion-base) var(--easing-default);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {
  background: var(--haikai-blue);
  color: var(--haikai-black);
}

@media (hover: hover) and (pointer: fine) {
.btn-primary:hover{ background: var(--haikai-black); color: var(--haikai-offwhite); }
}

.btn-dark {
  background: var(--haikai-black);
  color: var(--haikai-offwhite);
}

@media (hover: hover) and (pointer: fine) {
.btn-dark:hover{ background: var(--haikai-blue); color: var(--haikai-black); }
}

.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(245,247,250,.7);
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
.btn-outline:hover{ background: rgba(245,247,250,.12); }
}

.btn-outline-dark {
  background: transparent;
  border: 1.5px solid var(--haikai-black);
  color: var(--haikai-black);
}

@media (hover: hover) and (pointer: fine) {
.btn-outline-dark:hover{ background: var(--haikai-black); color: var(--haikai-offwhite); }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--haikai-blue-ink);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--motion-base), gap var(--motion-base);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--motion-base); flex: none; }

@media (hover: hover) and (pointer: fine) {
.link-arrow:hover{ border-color: currentColor; }
}

@media (hover: hover) and (pointer: fine) {
.link-arrow:hover svg{ transform: translateX(3px); }
}

/* ============ FOCO (acessibilidade) ============ */
a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xxs);
}
.btn:focus-visible,
.nav-burger:focus-visible,
.rodape-social a:focus-visible { border-radius: var(--radius-pill); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.link-arrow--light { color: var(--haikai-offwhite); }

/* ============ NAVEGAÇÃO ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(245,247,250,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-base), box-shadow var(--motion-base), padding var(--motion-base), background-color var(--motion-slow) ease;
}
.nav.is-scrolled {
  border-bottom-color: var(--hairline);
  box-shadow: var(--shadow-soft);
}
.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | links centralizados no espaço que sobra | ações. Com 6 links, o esquema
    antigo (1fr auto 1fr, links no centro exato da barra) espremia o logo */
  align-items: center;
  gap: var(--space-5);
  transition: padding var(--motion-base) var(--easing-default);
}
.nav.is-scrolled .nav-inner { padding-top: 9px; padding-bottom: 9px; }

.nav-logo { display: flex; align-items: center; justify-self: start; flex: none; }
.nav-inner > nav { justify-self: center; }
.nav-cta { justify-self: end; }

.nav-logo .logo-full {
  display: block;
  height: 36px; /* +40% sobre os 26px originais */
  width: auto;
  transition: filter var(--motion-slow) ease;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  white-space: nowrap;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--gray-900);
  padding: 6px 2px;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--haikai-blue);
  transition: right var(--motion-base) var(--easing-default);
}

@media (hover: hover) and (pointer: fine) {
.nav-links a:hover::after{ right: 0; }
}

/* Nav sobre um hero escuro (até rolar): fundo translúcido escuro, logo e links
   brancos; ao rolar, main.js põe .is-scrolled e a barra volta ao tema claro.
   Ativado por <body class="nav-over-dark"> (home e página do AI Comms). */
.nav-over-dark .nav:not(.is-scrolled):not(.menu-open) { background: rgba(16,17,20,.45); }
.nav-over-dark .nav:not(.is-scrolled):not(.menu-open) .logo-full { filter: brightness(0) invert(1); }
.nav-over-dark .nav:not(.is-scrolled):not(.menu-open) .nav-links a { color: #fff; }
.nav-over-dark .nav:not(.is-scrolled):not(.menu-open) .nav-social a { color: rgba(255,255,255,.72); }

@media (hover: hover) and (pointer: fine) {
.nav-over-dark .nav:not(.is-scrolled):not(.menu-open) .nav-social a:hover{ color: var(--haikai-blue); }
}
.nav-over-dark .nav:not(.is-scrolled):not(.menu-open) .nav-lang-trigger { color: #fff; }

.nav-over-dark .nav:not(.is-scrolled):not(.menu-open) .nav-lang.is-open .nav-lang-trigger { color: var(--haikai-blue); }
@media (hover: hover) and (pointer: fine) {
.nav-over-dark .nav:not(.is-scrolled):not(.menu-open) .nav-lang-trigger:hover{ color: var(--haikai-blue); }
}

.nav-cta { display: flex; align-items: center; gap: var(--space-4); }
.nav-cta .btn { padding: 12px 22px; font-size: 14.5px; }

/* Ícones sociais (LinkedIn, Instagram, Substack, e-mail/contato) — mesmos
   traçados do rodapé, só que em tom neutro pra combinar com o cabeçalho
   claro. Padding negativo (via margin) só aumenta a área de toque sem
   mudar o tamanho visual do ícone. */
.nav-social { display: flex; align-items: center; gap: 6px; }
.nav-social a {
  display: flex;
  padding: 6px;
  margin: -6px;
  color: var(--gray-400);
  transition: color var(--motion-fast);
}

@media (hover: hover) and (pointer: fine) {
.nav-social a:hover{ color: var(--haikai-blue); }
}
.nav-social svg { width: 17px; height: 17px; }

/* Seletor de idioma — só o hover por enquanto, sem tradução nem destino
   (isso vem depois). Botões (não links) porque não levam a lugar nenhum
   ainda, então não precisam de href. */
/* Separado do grupo de ícones sociais por uma divisória (mesmo tom de azul
   da divisória do EN/ES antiga) + tom mais escuro por padrão — sem isso,
   o PT-BR ficava lido como só mais um ícone na fileira, em vez de um
   controle à parte. */
.nav-lang {
  position: relative;
  padding-left: var(--space-4);
  margin-left: 2px;
  border-left: 1.5px solid rgba(28,167,255,.3);
}
.nav-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: 12.5px;
  letter-spacing: var(--ls-label);
  color: var(--haikai-blue-ink);
  cursor: pointer;
  transition: color var(--motion-fast);
}

.nav-lang-trigger:focus-visible,
.nav-lang.is-open .nav-lang-trigger { color: var(--haikai-blue); outline: none; }
@media (hover: hover) and (pointer: fine) {
.nav-lang-trigger:hover{ color: var(--haikai-blue); outline: none; }
}
.nav-lang-globe { width: 15px; height: 15px; flex: none; }
.nav-lang-chevron { width: 12px; height: 12px; flex: none; transition: transform var(--motion-base) var(--easing-default); }
.nav-lang.is-open .nav-lang-chevron { transform: rotate(180deg); }
/* Dropdown — abre pra baixo no cabeçalho; no menu mobile (perto do rodapé
   do painel) abre pra cima, ver .nav-mobile-extra abaixo. */
.nav-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  min-width: 116px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--motion-base) var(--easing-default),
    transform var(--motion-base) var(--easing-default), visibility var(--motion-base);
}
.nav-lang.is-open .nav-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-lang-option {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-xxs);
  font-family: var(--font-text);
  font-size: 13.5px;
  color: var(--haikai-black);
  cursor: pointer;
  transition: background-color var(--motion-fast);
}

.nav-lang-option:focus-visible { background: var(--haikai-blue-soft); outline: none; }
@media (hover: hover) and (pointer: fine) {
.nav-lang-option:hover{ background: var(--haikai-blue-soft); outline: none; }
}
a.nav-lang-option { display: block; text-decoration: none; white-space: nowrap; }
/* idiomas no rodapé */
.rodape-lang { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--space-5); }
.rodape-lang a { font-size: 13px; color: #8a909b; transition: color var(--motion-fast); }
 .rodape-lang a[aria-current="true"] { color: var(--haikai-offwhite); }
@media (hover: hover) and (pointer: fine) {
.rodape-lang a:hover{ color: var(--haikai-offwhite); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-lang-menu, .nav-lang-chevron { transition: none; }
}

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--white);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ''; display: block; width: 16px; height: 2px; background: var(--haikai-black);
  transition: transform var(--motion-base), opacity var(--motion-base);
}
.nav-burger span::before { transform: translateY(-6px); }
.nav-burger span::after { transform: translateY(6px); }
.nav-burger span { position: relative; }
.nav-burger span::before, .nav-burger span::after { position: absolute; top: 0; left: 0; }
.nav.menu-open .nav-burger span { background: transparent; }
.nav.menu-open .nav-burger span::before { transform: rotate(45deg); }
.nav.menu-open .nav-burger span::after { transform: rotate(-45deg); }

/* ============ MENU MOBILE ============ */
.nav-mobile {
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--haikai-offwhite);
  z-index: 150;
  padding: 100px var(--gutter) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--motion-slow) var(--easing-default), opacity var(--motion-slow);
}
.nav-mobile.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.nav-mobile a {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 32px;
  letter-spacing: var(--ls-heading);
  color: var(--haikai-black);
}
.nav-mobile .btn { align-self: flex-start; }
.nav-mobile-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.nav-mobile-extra .nav-social svg { width: 20px; height: 20px; }
.nav-mobile-extra .nav-lang-trigger { font-size: 14px; }
.nav-mobile-extra .nav-lang-globe { width: 17px; height: 17px; }
/* Perto do fim do painel — abre pra cima, senão o menu nasce fora da tela. */
.nav-mobile-extra .nav-lang-menu { top: auto; bottom: calc(100% + 10px); }

/* ============ HERO ============
   Estrutura em duas camadas: .hero é a seção "alta" que dá espaço de rolagem
   extra (só quando a classe .hero--scrolly está presente); .hero-pin é o
   miolo fixo (sticky) de 100vh que some das custom properties abaixo para
   animar. Sem JS ou em telas estreitas, tudo fica em fluxo normal e visível
   — o texto aparece em sequência, sem depender da animação. */
.hero {
  position: relative;
  color: var(--haikai-offwhite);
}
.hero-pin {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  padding: 140px var(--gutter) 40px;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(28,167,255,.35), transparent 60%),
    linear-gradient(155deg, #14151a 0%, #101114 55%, #0b0c0e 100%);
  overflow: hidden;
}
/* Altura real definida via JS (hero.style.height), que soma o pin (100vh) +
   a entrada + a descida do texto — ver setupHeroScrollytelling em main.js.
   Este valor é só um teto de segurança antes do JS calcular o real. */
.hero--scrolly { height: var(--hero-scroll-height, 195vh); }
.hero--scrolly .hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 88vh;
}
.hero-video {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* sobra extra embaixo (--hero-video-overscan, definida via JS) para que o
     deslocamento para cima na fase de "tesoura" nunca exponha o fundo da
     caixa por trás — sem essa folga, aparece uma tarja escura na base. */
  height: calc(100% + var(--hero-video-overscan, 0px));
  width: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.1s linear;
}
.hero-video#hero-video-a { opacity: 1; } /* estado inicial antes do JS assumir o controle */
.hero--scrolly .hero-video {
  transform: translateY(var(--hero-video-shift, 0));
  will-change: transform;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(28,167,255,.32), transparent 60%),
    linear-gradient(190deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,.4) 45%, rgba(11,12,14,.82) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
/* Linha azul: sai de cena acompanhando a rolagem 1:1 (como um elemento comum
   que rola para fora da tela), em vez de só sumir parada no lugar — some
   por opacidade um pouco antes de sair da área visível do hero. Não usa a
   escala do título (evita o descolamento visual entre os dois). */
.hero-eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  color: var(--haikai-blue);
  margin: 0 auto 18px;
  max-width: var(--hero-eyebrow-width, 22ch); /* largura da 1ª linha do título, medida via JS */
}
.hero--scrolly .hero-eyebrow {
  opacity: var(--hero-eyebrow-opacity, 1);
  transform: translateY(var(--hero-eyebrow-shift, 0));
  will-change: transform;
}
.hero-title {
  font-size: var(--fs-display-xl);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  color: var(--haikai-offwhite);
  margin: 0 auto var(--space-5);
}
.hero-title-blue { color: var(--haikai-blue); }
.hero--scrolly .hero-title {
  transform: translateY(var(--hero-title-shift, 0)) scale(var(--hero-title-scale, 1));
  transform-origin: center bottom;
  will-change: transform;
}
.hero-title-light {
  /* Polymath só existe em 700 e sem itálico — troca para a fonte de texto
     (Europa Grotesk 400), que ao menos tem um peso regular de verdade. */
  font-family: var(--font-text);
  font-weight: 400;
  font-style: italic;
  letter-spacing: normal;
}

/* .hero-swap: hero-sub e hero-abertura só se sobrepõem (crossfade) quando a
   rolagem animada está ativa; a altura fixa evita que o link abaixo pule de
   lugar quando um substitui o outro. Sem essa classe, os dois ficam em fluxo
   normal, um abaixo do outro, sempre visíveis. Acompanha o mesmo deslocamento
   do título (--hero-title-shift) para subir junto, como um único bloco. */
.hero-swap { position: relative; margin: 0 auto var(--space-7); }
.hero--scrolly .hero-swap {
  height: var(--hero-swap-height, auto);
  transform: translateY(var(--hero-title-shift, 0));
  will-change: transform;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.4;
  color: #bcdcf7; /* tom azulado claro, teste — antes era um cinza neutro (#cfd3da) */
  max-width: 52ch;
  margin: 0 auto var(--space-5);
}
.hero--scrolly .hero-sub {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  opacity: var(--hero-sub-opacity, 1);
}
.hero-abertura {
  max-width: 640px; /* mais estreita e centralizada, ecoando a largura do título */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  text-align: left;
}
.hero-abertura p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--haikai-offwhite);
  margin: 0;
}
.hero--scrolly .hero-abertura {
  position: absolute;
  inset: 0;
  opacity: var(--hero-abertura-opacity, 0);
  transform: translateY(var(--hero-abertura-shift, 28px));
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
/* Botão menor que o padrão .btn aqui — no hero, em cima do vídeo, o
   tamanho base (16px/30px de padding) ficava grandalhão demais. */
.hero-actions .btn {
  padding: 13px 25px;
  font-size: 14.5px;
}
.hero--scrolly .hero-actions {
  opacity: var(--hero-actions-opacity, 1);
  transform: translateY(calc(var(--hero-title-shift, 0px) + var(--hero-actions-shift, 0px)));
  will-change: transform;
}
/* Setinha "continue rolando" — só faz sentido depois que o botão chegou, no
   fim da sequência presa; some por padrão para não competir com a seta do
   topo do hero enquanto o conteúdo ainda está entrando. */
.hero-continue-cue {
  display: none;
  color: rgba(245,247,250,.65);
}
.hero--scrolly .hero-continue-cue {
  display: block;
  opacity: var(--hero-actions-opacity, 0);
}
.hero-continue-cue svg { width: 18px; height: 22px; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero--scrolly .hero-continue-cue svg { animation: scrollCue 2.2s ease-in-out infinite; }
}

/* ============ CLIENTES ============ */
.clientes {
  /* z-index próprio (não só position:relative) pra abrir um contexto de
     empilhamento inteiro acima do Hero — sem isso, o robô/mãos que furam
     pra cima do topo desta seção (.clientes-easter, bottom:100%) ficavam
     atrás do .hero-pin (sticky sempre cria seu próprio contexto). */
  position: relative;
  z-index: 1;
  padding: 38px var(--gutter); /* faixa de parede reduzida (era 57px de cada lado,
    depois 28px) só no estado fechado — +10px pedidos pra dar mais respiro aos
    logos. A seção expandida restaura o padding-top original logo abaixo
    (`.clientes:has(#clientes-more.is-expanded)`) */
  transition: padding-top .6s var(--easing-default), padding-bottom .6s var(--easing-default);
  /* sem isso, o padding (via :has()) muda instantaneamente ao clicar, enquanto o
     #clientes-more leva .6s pra encolher — o robô "pulava" alguns pixels de
     repente no exato momento do clique, antes da animação suave começar */
  background: var(--white) url('../assets/Haikai_wall.webp') center/cover no-repeat;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
/* ---- Easter egg: dupla de robôs nascendo atrás da parede ----
   `.clientes-easter` ancora no topo de `.clientes` (bottom:100% encosta
   exatamente na costura Hero→Clientes). `.clientes-easter-bodies` é a
   janela por onde os corpos (sem mãos, ver haikai-body-*.png) aparecem:
   overflow:hidden mascara o robô até ele subir (transição [data-reveal]
   padrão do site — translateY(28px)+fade uma vez só, e PARA — nada de
   animação contínua). `.clientes-easter-hands` fica por cima, sempre na
   mesma posição, sem animação — as 4 mãos (2 por robô) são fixas na linha
   da parede. Tudo decorativo — pointer-events:none — e fica bem pequeno e
   centralizado no mobile, ver media query mais abaixo. */
.clientes-easter {
  position: absolute;
  left: clamp(20px, 7vw, 130px);
  bottom: 100%;
  z-index: 3;
  pointer-events: none;
}
.clientes-easter-bodies {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  /* Esconde atrás da parede a parte do robô empurrada abaixo da costura
     (o scroll controla isso via translateY em main.js) — sem isso eles
     ficam na frente da parede/logos em vez de atrás. */
  overflow: hidden;
}
.clientes-easter-char { display: block; height: auto; }
.clientes-easter-char-1 { width: 176px; }
.clientes-easter-char-2 { width: 150px; }
.clientes-easter-hands {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.clientes-easter-hand {
  position: absolute;
  bottom: -23px;
  width: 65px;
  height: auto;
}
@media (max-width: 1080px) {
  /* Bem pequenininhos e centralizados — no desktop eles ficam na margem
     esquerda, mas aí não sobra espaço, então centraliza embaixo do texto
     "Marcas e clientes" e encolhe tudo junto (corpo, mãos e o gap entre
     os dois robôs), mantendo as mesmas proporções. */
  .clientes-easter { left: 50%; transform: translateX(-50%); }
  .clientes-easter-bodies { gap: 3px; }
  .clientes-easter-char-1 { width: 80px; }
  .clientes-easter-char-2 { width: 68px; }
  .clientes-easter-hand { width: 29px; bottom: -10px; }
  .clientes-easter-hand:nth-of-type(1) { left: 5px !important; }
  .clientes-easter-hand:nth-of-type(2) { left: 46px !important; }
  .clientes-easter-hand:nth-of-type(3) { left: 82px !important; }
  .clientes-easter-hand:nth-of-type(4) { left: 116px !important; }
}
.clientes-label {
  /* display:table (não inline-block) pra margin:0 auto conseguir centralizar
     de verdade — vira uma "tag" com contorno hugging o texto, em vez do
     texto solto ocupando a largura inteira do bloco. */
  display: table;
  margin: 0 auto var(--space-6);
  padding: 6px 15px;
  border: 1.5px solid var(--haikai-blue);
  border-radius: var(--radius-pill);
  background: transparent;
  text-align: center;
  font-family: var(--font-display); /* teste: fonte do título (normalmente reservada
    pra headings) */
  font-size: var(--fs-label); /* era 17px — grande demais pra um eyebrow */
  font-weight: var(--fw-semibold);
  /* line-height:1 — sem isso herda o 1.5 do body, e a folga extra do
     line-box (que não se distribui simetricamente acima/abaixo do texto,
     por causa da métrica da fonte) empurrava o texto visualmente pra cima
     dentro do padding, mesmo com padding-top/bottom iguais. Mesmo ajuste
     já usado em .btn e .ai-office-tag. */
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: #0d2233; /* azul ainda mais escuro (era --haikai-blue-ink) — mesmo tom
    usado na legenda "reservamos este espaço..." */
}
.clientes-row {
  max-width: calc(var(--container-max) * .75); /* mais estreito, pra sobrar respiro
    nas laterais agora que os logos encolheram */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  --logo-scale: .75; /* -25% no grupo todo de logos (soma-se aos ajustes individuais
    de --lw/--lh já feitos em alguns clientes específicos) */
  row-gap: calc(40px * var(--logo-scale)); /* gaps proporcionais ao --logo-scale —
    mantém a mesma relação visual entre o tamanho dos logos e a distância entre eles */
  column-gap: calc(48px * var(--logo-scale));
}
/* Cada logo tem width/height inline (px), calculados por área visual
   equivalente — não por altura fixa — pra que uma marca quase quadrada
   (Accor) e uma extensa (Coca-Cola) tenham o mesmo peso na hierarquia.
   Ver assets/clientes/_sizes.json. */
.cliente-logo {
  position: relative;
  flex: none;
  width: calc(var(--lw) * var(--logo-scale, 1));
  height: calc(var(--lh) * var(--logo-scale, 1));
}
.cliente-logo img,
.cliente-logo .logo-cor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.cliente-logo .logo-cor {
  opacity: 0;
  transition: opacity var(--motion-slow) var(--easing-default);
}
.cliente-logo .logo-azul {
  opacity: 1;
  transition: opacity var(--motion-slow) var(--easing-default);
}

@media (hover: hover) and (pointer: fine) {
.cliente-logo:hover .logo-cor{ opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
.cliente-logo:hover .logo-azul{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cliente-logo img, .cliente-logo .logo-cor { transition: none; }
}
/* Hover dos logos escuros: o logo inteiro vira uma cor sólida (azul da marca,
   vermelho só na Coca-Cola). Usa um filtro SVG inline (#tint-blue/#tint-red,
   no topo do HTML) que preenche com a cor e recorta pelo alpha do próprio PNG.
   Antes era mask-image + background-color, mas o Chrome bloqueia mask-image por
   CORS quando a página abre direto do disco (file://) — o logo sumia no hover. */
.logo-cor--tint { filter: url(#tint-blue); }
.logo-cor--tint-red { filter: url(#tint-red); }

/* ---- "Veja mais clientes" — segunda leva colapsável ---- */
.clientes-more {
  max-width: calc(var(--container-max) * .75); /* acompanha a largura mais estreita
    de .clientes-row, pro respiro lateral ficar consistente entre as duas linhas */
  margin: 0 auto;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .6s var(--easing-default), opacity .45s var(--easing-default),
    margin-top .6s var(--easing-default);
  /* margin-top precisa estar na lista — sem isso, ele pulava de 40px pra 0
     instantaneamente ao colapsar (antes do max-height sequer começar a encolher),
     causando o "bugzinho" de o robô subir de repente no clique */
}
.clientes-more.is-expanded {
  max-height: 2400px;
  opacity: 1;
  margin-top: 40px; /* == .clientes-row row-gap, some espaço só quando aberto */
}
.clientes-row--extra { padding-top: 2px; } /* evita cortar o hover-scale/outline no topo */
/* Robô "sua marca" + chão. O robô fica num quadro estreito (420px)
   centralizado; a legenda usa position:relative+top pra poder descer um
   tanto A MAIS que o robô sem empurrá-lo junto (deslocamento visual, não
   soma ao fluxo). O robô sobe/desce só pelo margin-top do wrap (71px =
   os 56px originais +15px pedidos). O chão agora é um elemento normal do
   fluxo (não mais sobreposto): ocupa a largura inteira via margin-left:50%
   + translateX(-50%) — o mesmo truque de full-bleed, só que sem
   position:absolute, então ele EMPURRA o botão "ver menos clientes" pra
   baixo, criando de verdade o espaço de "chão" que antes era parede. Uma
   margin-top negativa pequena encosta ele na linha dos pés (o PNG do robô
   guarda ~10,5% de margem transparente embaixo deles). */
.clientes-suamarca-wrap {
  position: relative;
  z-index: 2; /* o chão tem transform:translateX(-50%) permanente (full-bleed), o
    que o trata como um elemento posicionado z-index:0 — sem isso aqui, durante a
    animação de entrada [data-reveal] (que também usa transform/opacity), o robô
    empata nesse nível e, por vir antes no HTML, aparece atrás do chão */
  max-width: 420px;
  margin: 6px auto 0; /* 71px anterior - 65px (sobe robô, chão e texto juntos) */
}
.clientes-suamarca-caption {
  position: relative;
  top: 35px; /* + os 15px herdados do wrap acima = 50px de deslocamento total */
  z-index: 1;
  max-width: 205px;
  margin: 0 auto var(--space-4);
  text-align: center;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  color: #0d2233;
}
.clientes-suamarca {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.clientes-suamarca-floor {
  display: none; /* só existe em fluxo normal com a seção expandida — mora fora do
    #clientes-more (que tem overflow:hidden pra animar o collapse) pra não ter o
    full-bleed cortado nas laterais em telas mais largas que --container-max */
  width: 100vw;
  max-width: 100vw; /* sobrepõe o reset global `img { max-width:100% }`,
    que travava isso em 100% do quadro de 420px em vez da tela inteira */
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: -35px; /* -25px original + 10px pedidos, sobrepondo o robô */
  height: 70px; /* faixa de chão reduzida pela metade (era 140px) */
  object-fit: cover;
  object-position: center top;
}
#clientes-more.is-expanded ~ .clientes-suamarca-floor {
  display: block;
}
.clientes:has(#clientes-more.is-expanded) {
  /* com a seção expandida, a seção termina junto com o chão — sem sobrar
     o padding-bottom (parede) padrão abaixo dele */
  padding-bottom: 0;
  padding-top: var(--space-9); /* restaura o padding-top original (a redução de
    30px acima é só para o estado fechado) */
}
.clientes-toggle-wrap {
  position: relative;
  top: -6px; /* nudge visual pra cima — equilibra o espaço em branco acima/abaixo do
    botão (só no estado fechado; a seção expandida reseta isso logo abaixo, já que
    lá ele usa position:absolute com bottom próprio) */
  z-index: 1;
  text-align: center;
  margin-top: var(--space-6); /* +20px de um pedido anterior, -20px agora (pedido
    pra reduzir a folga entre os logos e o botão) — volta ao valor base. Só no
    estado fechado — a seção expandida sobrescreve margin-top pra 0 logo abaixo */
}
#clientes-more.is-expanded ~ .clientes-toggle-wrap {
  /* fora do fluxo normal (position:absolute), senão a margem negativa que sobrepõe
     o chão "rouba" a altura calculada da seção e o chão vaza pra seção seguinte */
  position: absolute;
  top: auto; /* reseta o nudge de -6px do estado fechado — com position:absolute e
    bottom já definido, top:0 esticaria o elemento; auto mantém a altura pelo
    conteúdo, só posicionado via bottom */
  left: 0;
  right: 0;
  bottom: 33px; /* recalculado pro chão de 70px (era 58px com 140px de chão) —
    mantém o botão perto dos pés do robô, no topo da faixa de chão */
  margin-top: 0;
  z-index: 2;
}
#clientes-more.is-expanded ~ .clientes-toggle-wrap .clientes-toggle {
  transform: translate(5px, 15px); /* x: 10px - 5px pedidos de volta (o
    text-align:center do wrap centraliza o bloco texto+seta, o que visualmente
    parece jogar o texto pra esquerda). y: +15px pedidos pra descer */
}
.clientes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--haikai-blue-ink);
  background: none;
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 1px 1px 2px; /* reduzido — encolhe a faixa do anel de foco (box-shadow
    global de button:focus-visible), que ficava grande demais */
  cursor: pointer;
  transition: border-color var(--motion-base);
}

@media (hover: hover) and (pointer: fine) {
.clientes-toggle:hover{ border-color: currentColor; }
}
.clientes-toggle:focus-visible {
  /* anel de foco mais fino que o padrão do site (só pra esse botão) — a versão
     global (--shadow-focus, 3px) deixava a faixa alta demais aqui */
  box-shadow: 0 0 0 1.5px rgba(28, 167, 255, .35);
}
.clientes-toggle-icon {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--motion-base) var(--easing-default);
}
.clientes-toggle[aria-expanded="true"] .clientes-toggle-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .clientes-more, .clientes-toggle-icon { transition: none; }
}

/* ============ AI OFFICE ============
   Seção logo após os clientes — reaproveita o fundo em vídeo + satélite da
   Metodologia (.metodologia-video/-overlay, classe .satellite-window pra
   acionar setupSatellites em main.js) e o diagrama de Venn dos Serviços
   (.servicos-diagram, mesmo seletor genérico usado em setupServicosVenn),
   só que numa segunda instância com ids de gradiente/filtro próprios (evita
   colisão de id com a seção Serviços mais abaixo). Sem expand/colapso —
   texto e diagrama sempre visíveis, lado a lado. */
.ai-office {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: var(--space-9) var(--gutter);
  background: linear-gradient(155deg, #0d2233 0%, #101114 60%);
  color: var(--haikai-offwhite);
}
/* Esmaece o vídeo de fundo pro preto sólido (#101114, mesmo tom do
   carrossel de Destaques logo abaixo) nos últimos ~160px da seção — sem
   isso, o vídeo+overlay (ainda com ~12% de transparência no fundo, ver
   .metodologia-video-overlay) batia direto no preto 100% opaco do
   carrossel, criando uma costura visível em vez de transição suave. */
.ai-office::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(16,17,20,0) 0%, #101114 100%);
  pointer-events: none;
}
.ai-office-inner {
  /* position+z-index explícitos: sem isso, o conteúdo (estático, sem
     position) pintava ANTES do ::after da seção (a sombra em degradê que
     esmaece o vídeo pro preto — ver regra acima), mesmo o ::after vindo
     depois no DOM — ::after é sempre positioned (z-index:0), então some
     "acima" de conteúdo não-positioned por padrão. O botão "Veja como
     atuamos", que mora na faixa de baixo da seção (ver .ai-office-cta),
     ficava escurecido por baixo dessa sombra. */
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 145px .68fr 1.32fr;
  grid-template-rows: auto auto;
  gap: var(--space-7);
  align-items: center;
}
.ai-office-head { grid-column: 2; grid-row: 1; text-align: left; }
/* Botão num grid-row próprio (ver comentário no HTML) — span de 2 linhas
   no diagrama (coluna 3) pra continuar ocupando a mesma altura total das
   colunas 1-2 somadas, exatamente como antes da separação. */
.ai-office-cta { grid-column: 2; grid-row: 2; }
.ai-office-diagram { grid-column: 3; grid-row: 1 / 3; }
/* Eyebrow curto e discreto, no mesmo espírito do .hero-eyebrow — uma tag
   pequena não compete com o título, só o situa. */
.ai-office-tag {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--haikai-blue);
  color: var(--haikai-black);
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}
/* Título com escala própria, mais contida que o .section-title padrão do
   site (pensado pra seções de largura cheia) — aqui ele divide a linha
   com o diagrama, então precisa de mais contenção pra não pesar. Largura
   limitada força a quebra em duas linhas, mais compacta que as três que
   saíam do tamanho cheio. */
.ai-office-head .section-title {
  color: var(--haikai-offwhite);
  max-width: 15ch;
  font-size: clamp(1.9rem, 1.55rem + 1.4vw, 2.6rem);
  line-height: 1.1;
}
.ai-office-head .section-lead {
  color: #b9bdc6;
  margin-top: var(--space-4);
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.55;
}

/* Botão "Veja como atuamos" — três bolinhas + bisnaga, em repouso tudo
   azul (contorno). No hover, cada bolinha assume a cor de uma frente
   (mesma ordem visual do diagrama: laranja/verde/violeta) e a bisnaga
   inverte pra fundo preto, mantendo contorno e texto azuis. */
.ai-office-reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
}
.ai-office-reveal-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-pill); }
.aiorb-dots { display: inline-flex; align-items: center; gap: 8px; }
.aiorb-dot {
  width: 21.6px;
  height: 21.6px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--haikai-blue);
  transition: background-color var(--motion-slow) ease, border-color var(--motion-slow) ease;
}
.aiorb-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5.5px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--haikai-blue);
  background: var(--haikai-blue);
  color: var(--haikai-black);
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: 12.6px;
  transition: background-color var(--motion-slow) ease, color var(--motion-slow) ease;
}
.aiorb-pill svg { width: 13.5px; height: 13.5px; flex: none; }

.ai-office-reveal-btn:focus-visible .aiorb-dot--1,
.ai-office-reveal-btn[aria-expanded="true"] .aiorb-dot--1 { background: #f0883a; border-color: #f0883a; }
@media (hover: hover) and (pointer: fine) {
.ai-office-reveal-btn:hover .aiorb-dot--1{ background: #f0883a; border-color: #f0883a; }
}

.ai-office-reveal-btn:focus-visible .aiorb-dot--2,
.ai-office-reveal-btn[aria-expanded="true"] .aiorb-dot--2 { background: #34d399; border-color: #34d399; }
@media (hover: hover) and (pointer: fine) {
.ai-office-reveal-btn:hover .aiorb-dot--2{ background: #34d399; border-color: #34d399; }
}

.ai-office-reveal-btn:focus-visible .aiorb-dot--3,
.ai-office-reveal-btn[aria-expanded="true"] .aiorb-dot--3 { background: #a78bfa; border-color: #a78bfa; }
@media (hover: hover) and (pointer: fine) {
.ai-office-reveal-btn:hover .aiorb-dot--3{ background: #a78bfa; border-color: #a78bfa; }
}

.ai-office-reveal-btn:focus-visible .aiorb-pill,
.ai-office-reveal-btn[aria-expanded="true"] .aiorb-pill { background: var(--haikai-black); color: var(--haikai-blue); }
@media (hover: hover) and (pointer: fine) {
.ai-office-reveal-btn:hover .aiorb-pill{ background: var(--haikai-black); color: var(--haikai-blue); }
}

/* Painel expandido — mesmo conteúdo dos cards de hover do diagrama (ver
   SERVICOS_AIO em main.js, que também preenche este painel), só que fixo
   e lado a lado em 3 colunas, sem precisar passar o mouse em cada bola. */
.ai-office-reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .6s var(--easing-default), opacity .45s var(--easing-default),
    margin-top .6s var(--easing-default);
}
.ai-office-reveal.is-expanded {
  max-height: 900px;
  opacity: 1;
  margin-top: var(--space-9);
}
.ai-office-reveal-nav {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.ai-office-reveal-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  flex: 1;
  min-width: 0;
}
/* Setas escondidas por padrão (desktop/tablet mostram as 3 colunas lado a
   lado, sem precisar navegar) — só aparecem no carrossel mobile, ver
   @media (max-width: 560px) mais abaixo. */
.ai-office-reveal-arrow {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,247,250,.3);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: border-color var(--motion-base) ease, opacity var(--motion-base) ease;
}
.ai-office-reveal-arrow svg { width: 16px; height: 16px; }

.ai-office-reveal-arrow:focus-visible { outline: none; border-color: rgba(245,247,250,.7); }
@media (hover: hover) and (pointer: fine) {
.ai-office-reveal-arrow:hover{ outline: none; border-color: rgba(245,247,250,.7); }
}
.ai-office-reveal-arrow:disabled{
  /* no limite (primeiro/último cartão): cinza, sem hover, sem clique */
  opacity: 1;
  color: #5d636e;
  border-color: rgba(93,99,110,.45);
  background: rgba(93,99,110,.12);
  cursor: not-allowed;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.ai-office-reveal-arrow:disabled:hover{
  /* no limite (primeiro/último cartão): cinza, sem hover, sem clique */
  opacity: 1;
  color: #5d636e;
  border-color: rgba(93,99,110,.45);
  background: rgba(93,99,110,.12);
  cursor: not-allowed;
  pointer-events: none;
}
}
.ai-office-reveal-card { border-top: 2px solid var(--col); padding-top: var(--space-4); }
.aiorc-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.aiorc-icon { flex: none; width: 22px; height: 22px; color: var(--col); }
.ai-office-reveal-card h3 {
  color: var(--col);
  font-size: var(--fs-h3);
  margin: 0;
}
.ai-office-reveal-card .aiorc-promise {
  color: var(--haikai-offwhite);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.ai-office-reveal-card .aiorc-desc {
  color: #b9bdc6;
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
/* Uma linha por frente/produto — nome + descrição curtinha, em vez dos
   chips lado a lado (que continuam no card de hover, mais rápido de ler
   de relance). Aqui, no painel fixo e no fallback de toque, dá pra
   explicar cada um em uma linha. Sem escopo em .ai-office-reveal-card
   de propósito — reaproveitado também dentro de .sfl-item (fallback),
   que define seu próprio --col por item. */
.aiorc-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.aiorc-tags li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 9px 0;
  border-top: 1px solid rgba(245,247,250,.12);
}
.aiorc-tags li:last-child { padding-bottom: 0; }
.aiorc-tag-name {
  flex: none;
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  color: var(--col);
}
.aiorc-tag-desc {
  font-size: 12.5px;
  color: #9aa1ad;
  line-height: 1.4;
}
/* Botão de fechar no fim do painel expandido — mesma seta que existe em
   outros toggles do site, só que animada: os dois traços giram/deslizam
   para formar um X quando a seção está maximizada, e voltam a formar a
   seta pra baixo quando fechada. Aciona o mesmo toggleReveal() do botão
   do topo e das bolas do diagrama — os três ficam sempre sincronizados. */
.ai-office-close-btn {
  position: relative;
  width: 34px;
  height: 34px;
  margin: var(--space-8) auto 0;
  display: block;
  border-radius: 50%;
  border: 1.5px solid rgba(245,247,250,.3);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--motion-base) ease;
}

.ai-office-close-btn:focus-visible {
  outline: none;
  border-color: rgba(245,247,250,.7);
}
@media (hover: hover) and (pointer: fine) {
.ai-office-close-btn:hover{
  outline: none;
  border-color: rgba(245,247,250,.7);
}
}
.aiocb-leg {
  /* Centralizado pela caixa de conteúdo (34px - 2×1.5px de borda = 31px,
     com box-sizing:border-box), não pelos 34px inteiros do botão — senão
     o X/seta nasce 1,5px deslocado do centro visual e fica torto. */
  position: absolute;
  top: 14.75px;
  left: 11px;
  width: 9px;
  height: 1.5px;
  background: #ffffff;
  border-radius: 1px;
  transition: transform var(--motion-slow) var(--easing-default);
}
.aiocb-leg--l { transform: translateX(-3px) rotate(45deg); }
.aiocb-leg--r { transform: translateX(3px) rotate(-45deg); }
.ai-office-close-btn[aria-expanded="true"] .aiocb-leg--l { transform: translateX(0) rotate(45deg); }
.ai-office-close-btn[aria-expanded="true"] .aiocb-leg--r { transform: translateX(0) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .ai-office-reveal { transition: none; }
  .aiocb-leg { transition: none; }
  .ai-office-reveal-inner { scroll-behavior: auto; }
}
/* Diagrama proporcional ao texto contido ao lado — grande o bastante pra
   ler bem, sem dominar a composição. Centralizado verticalmente com o
   texto (align-items: center acima) em vez de alinhado pelo topo, que
   deixava sobras de espaço vazio quando as alturas não fechavam exatas. */
.ai-office-diagram { max-width: 530px; margin: 0 auto; position: relative; left: -40px; top: 15px; }
/* Bolas brancas/acinzentadas por padrão, cada rótulo na cor da própria
   frente (--col, igual ao padrão já usado nos pilares da Metodologia). No
   hover/toque (.sv-group.up, setado em main.js), o círculo inteiro vira a
   cor sólida e o texto passa a branco — mesma lógica de troca de contraste
   do componente .step, só que aplicada às bolas do Venn. */
.ai-office-diagram .sv-fill {
  transition: opacity var(--motion-slow) ease, filter var(--motion-slow) ease, fill var(--motion-slow) ease;
}
.ai-office-diagram .sv-label {
  font-size: 26px;
  fill: var(--col);
  transition: fill var(--motion-slow) ease;
}
.ai-office-diagram .sv-icon {
  fill: none;
  stroke: var(--col);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke var(--motion-slow) ease;
}
.ai-office-diagram .sv-group.up .sv-fill { fill: var(--col); fill-opacity: 1; stroke-opacity: 0; }
.ai-office-diagram .sv-group.up .sv-label { fill: #ffffff; }
.ai-office-diagram .sv-group.up .sv-icon { stroke: #ffffff; }
/* Anéis concêntricos decorativos atrás do diagrama — contorno branco vazado,
   cada anel 15% menos opaco que o anterior (--o, setado por anel), com uma
   bolinha orbitando dentro do próprio traçado (gira a <g> em torno do centro
   do Venn; a bolinha, deslocada por cx, desenha o círculo). */
.ai-office-orbits { pointer-events: none; }
.ai-office-orbit-ring { opacity: var(--o); }
.ai-office-orbit { fill: none; stroke: #ffffff; stroke-width: 1.2; }
.ai-office-orbit-dot { fill: #ffffff; }
.ai-office-orbit-dot-wrap { transform-origin: 400px 378px; }
@media (prefers-reduced-motion: no-preference) {
  .ai-office-orbit-dot-wrap {
    animation-name: aioOrbit;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}
@keyframes aioOrbit { to { transform: rotate(360deg); } }
.ai-office .servicos-list-fallback { margin-top: var(--space-8); }
.ai-office .servicos-list-fallback .sfl-item { border-top-color: rgba(245,247,250,.16); }
.ai-office .servicos-list-fallback .sfl-item h3 { color: var(--haikai-offwhite); }
.ai-office .servicos-list-fallback .sfl-promise { color: var(--haikai-offwhite) !important; }
.ai-office .servicos-list-fallback .sfl-desc { color: #b9bdc6; }

/* ============ AI OFFICE — ESTRUTURA (dentro de "Sobre a Haikai") ============
   Cabeçalho centralizado + o mesmo diagrama de 4 pilares em fita da
   Metodologia (.metodologia-graphic/.step/.step-tip), reaproveitado com ids
   próprios (gradAio/cshadowAio/ribbonAio) e conteúdo novo — ícones, nomes
   (agora frases, por isso o "name" quebra em tspans/duas ou três linhas) e
   o texto longo no tooltip de hover. Hoje vive em .sobre-estrutura. */
.ai-office-sub {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-9);
  text-align: center;
}
.ai-office-sub h3 {
  color: var(--haikai-black);
  font-size: var(--fs-h2);
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.ai-office-sub p {
  color: var(--gray-600);
  font-size: var(--fs-lead);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 56ch;
}
#ribbonAio { filter: drop-shadow(0 10px 26px rgba(28,167,255,.28)); }

/* ============ DESTAQUES (CARROSSEL) ============
   Carrossel de verdade, não uma janela mascarada: os banners vizinhos
   espiam pelas bordas (flex-basis <100% + padding lateral no track), e a
   rolagem é nativa (overflow-x + scroll-snap), igual ao carrossel mobile
   do painel do AI Office — scrollIntoView({inline:'center'}) centraliza
   o slide ativo tanto por clique/toque quanto via JS. Setas e bolinhas
   ficam sobrepostas ao próprio banner (position:absolute), não numa
   barra de controles separada abaixo. Avança sozinho a cada alguns
   segundos (ver setupDestaquesCarousel em main.js), pausa no hover/foco,
   e nunca avança sozinho com prefers-reduced-motion (só manual). Nada de
   color-mix() aqui: já testado nesse projeto e não suportado no motor
   usado pra verificar — gradiente usa só var(--col) e um neutro fixo. */
/* Mesmo fundo escuro onde a gradiente do AI Office termina de assentar
   (#101114) — faz o carrossel parecer uma continuação da seção anterior,
   não uma seção nova cortando o preto com branco no meio do caminho. */
.destaques { padding: var(--space-6) 0 var(--space-9); background: #101114; }
.destaques-inner { max-width: var(--container-max); margin: 0 auto; }
/* Largura do banner em foco: 78% da janela, mas nunca mais que 900px — em
   monitores grandes (27"+) o banner crescia junto com a tela e a foto e o
   texto se esticavam. Acima disso os vizinhos só espiam mais pelas laterais. */
.destaques-carousel { --dest-w: min(78vw, 900px); }

/* Full-bleed: quebra pra fora do container-max (mesma técnica de
   .clientes-suamarca-floor) — sem isso, o vizinho espiando pela lateral
   batia numa borda arbitrária no meio da página (a borda do container),
   bem antes da borda real da tela, parecendo um corte quebrado em vez de
   intencional. Agora o corte só acontece perto da borda real da janela,
   suavizado pela sombra em degradê (::before/::after) que esmaece os
   vizinhos antes do corte. */
.destaques-carousel {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.destaques-carousel::before,
.destaques-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 14%;
  z-index: 1;
  pointer-events: none;
}
.destaques-carousel::before { left: 0; background: linear-gradient(90deg, #101114 0%, rgba(16,17,20,0) 100%); }
.destaques-carousel::after { right: 0; background: linear-gradient(270deg, #101114 0%, rgba(16,17,20,0) 100%); }
.destaques-track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 calc((100% - var(--dest-w)) / 2);
}
.destaques-track::-webkit-scrollbar { display: none; }
/* Cópias decorativas nas pontas (só para "espiar"): nunca são ponto de
   encaixe, senão o deslize podia parar em cima de uma cópia não clicável. */
.destaque-peek { scroll-snap-align: none; }
.destaques-track { overscroll-behavior-x: contain; }
.destaque-banner {
  position: relative;
  overflow: hidden;
  /* translateZ(0) sozinho (layer de composição própria) não bastou — ainda
     sobrava uma friesta de 1px mal-antialiased no recorte do border-radius
     (visível como um "detalhe branco" no contorno, principalmente no fundo
     roxo da AIBP). clip-path com o mesmo raio faz o corte como parte da
     renderização em vez de uma máscara de overflow sobre um layer composto
     à parte — não sofre desse artefato de sub-pixel. */
  clip-path: inset(0 round var(--radius-l));
  transform: translateZ(0);
  flex: 0 0 var(--dest-w);
  min-width: 0;
  scroll-snap-align: center;
  display: block;
  min-height: 180px;
  border-radius: var(--radius-l);
  color: #ffffff;
}
/* Só o banner central (o que está em foco no carrossel) fica em brilho
   pleno — os vizinhos escurecem num degradê suave, reforçando o que está
   "em foco" sem precisar de nenhuma borda ou moldura. Um overlay escuro
   (opacity) faz esse escurecimento, não filter:brightness() no elemento —
   animar filter num elemento que também tem clip-path+transform (acima,
   o fix da borda arredondada) deixava uma linha branca passageira no
   recorte enquanto a transição rodava, some de novo quando assenta. Opacity
   não mexe com o layer de composição do clip-path, não tem esse artefato. */
.destaque-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity var(--motion-slow) var(--easing-default);
}
.destaque-banner:not(.is-active)::after { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .destaque-banner::after { transition: none; }
}
.destaque-banner-img {
  /* width:575px + right:0 deixava a foto só numa "janela" fixa à direita —
     com o banner mais largo que isso, sobrava uma faixa chapada só com a
     cor sólida à esquerda (sem foto nenhuma por trás pra misturar), em vez
     do degradê absorvendo a própria foto como antes. Voltando a cobrir o
     banner inteiro (100%) — o enquadramento de cada foto vem de variáveis
     inline no HTML, porque o assunto de cada uma está numa altura diferente:
       --img-pos     object-position (onde fica o recorte dentro da foto)
       --img-h       altura da caixa da imagem, em % da altura do banner —
                     >100% dá um "zoom" guiado pela ALTURA (o assunto fica no
                     mesmo ponto vertical em qualquer largura de tela)
       --img-pos-m / --img-zoom-m / --img-origin-m   o mesmo, no card mobile */
  position: absolute;
  top: 0;
  left: var(--img-left, 0%);
  z-index: 0;
  width: calc(100% - var(--img-left, 0%));
  height: var(--img-h, 100%);
  object-fit: cover;
  object-position: var(--img-pos, top);
  border-radius: inherit;
  /* --img-left empurra a foto pra direita (a caixa começa a X% do banner) e
     --img-fade esfuma a borda esquerda dela até a opacidade total em X% da
     largura da própria foto — sem corte seco entre o degradê e a imagem. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--img-fade, 0%));
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--img-fade, 0%));
}
/* Foto de palco (Palestras): escala guiada pela ALTURA do banner, não pela largura.
   A foto é retrato; com object-fit:cover numa caixa larga ela crescia junto com a janela
   e a pessoa saía do quadro. Aqui a imagem tem altura fixa em % da altura do banner
   (--img-hh) e a pessoa fica no mesmo ponto vertical (--img-top) em qualquer largura:
   cabeça e pés sempre dentro do banner. Só acima do breakpoint mobile (card empilhado). */
@media (min-width: 561px) {
  .destaque-banner-img--h {
    left: auto;
    right: var(--img-right, 0%);
    width: auto;
    max-width: none;
    height: var(--img-hh, 284%);
    top: var(--img-top, -125%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
    mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  }
}
/* Sombra em degradê saindo do preto (onde o texto mora, à esquerda) até
   transparente perto da borda direita (onde a foto aparece inteira) — o
   mesmo princípio dos banners do Substack. mix-blend-mode:multiply em vez
   de um preto chapado faz a sombra "absorver" os tons da própria foto por
   baixo (desfocado, por ser um degradê largo); o --col de cada destaque
   entra no meio do degradê pra puxar um pouco da paleta de cada frente
   também, não só preto. */
.destaque-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* cor do destaque escurecida: uma camada preta (55%) por cima do degradê, sem
     color-mix (ver nota do carrossel). Tira a faixa clara/saturada no meio. */
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,0) 74%),
    linear-gradient(90deg, var(--haikai-black) 0%, var(--col) 34%, transparent 74%);
  mix-blend-mode: multiply;
}
.destaque-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 100%;
  max-width: 55%;
  /* Esquerda maior que a direita de propósito: desloca o bloco de texto um
     pouco pra dentro do banner (não centralizado) — a seta "anterior" fica
     sobreposta logo na borda esquerda, e com o texto começando rente a ela
     ficava apertado/sobreposto. */
  padding: 24px var(--space-5) 24px calc(var(--space-7) + 28px);
}
/* Mesmo estilo da bisnaga "Veja como atuamos" do AI Office (pill sólida,
   12.6px, semibold), só que colorida com o --col de cada banner em vez de
   azul fixo — "cores variadas" acompanhando a identidade de cada destaque. */
.destaque-banner-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5.5px 14px;
  border-radius: var(--radius-pill);
  background: var(--col);
  color: var(--haikai-black);
  font-size: 12.6px;
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.destaque-banner h3 {
  font-size: 28px;
  line-height: 1.15;
  color: #ffffff;
  max-width: 20ch;
}
.destaque-banner p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  max-width: 40ch;
  margin: 0;
  text-wrap: pretty;
}
/* CTA em ícone circular + rótulo caixa-alta, mesma linguagem do "LEIA AS
   ÚLTIMAS" de referência — substitui o link de texto com seta inline. */
.destaque-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.destaque-banner-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--haikai-black);
  transition: transform var(--motion-base), background-color var(--motion-base), color var(--motion-base);
}
.destaque-banner-cta-icon svg { width: 15px; height: 15px; }
.destaque-banner-cta-label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

.destaque-banner:focus-visible .destaque-banner-cta-icon {
  transform: translateX(4px);
  /* O "satélite" (círculo do CTA) acompanha a cor de identidade do
     próprio banner (--col) no hover, em vez de ficar sempre branco. */
  background: var(--col);
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
.destaque-banner:hover .destaque-banner-cta-icon{
  transform: translateX(4px);
  /* O "satélite" (círculo do CTA) acompanha a cor de identidade do
     próprio banner (--col) no hover, em vez de ficar sempre branco. */
  background: var(--col);
  color: #ffffff;
}
}
.destaque-banner:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }

/* Mesmo estilo de repouso das bolinhas do botão "Veja como atuamos"
   (.aiorb-dot): círculo oco, contorno branco, sem preenchimento — só
   preenche (branco) no hover/foco, ecoando o mesmo padrão de interação. */
.destaques-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85);
  /* Fundo sempre com um pouco de opacidade + blur — sem isso a seta
     (contorno branco, sem preenchimento) ficava praticamente invisível
     quando caía sobre a parte clara de uma foto por baixo. */
  background: rgba(16,17,20,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--motion-base) ease, border-color var(--motion-base) ease, color var(--motion-base) ease;
}
 .destaques-arrow:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--haikai-black);
}
@media (hover: hover) and (pointer: fine) {
.destaques-arrow:hover{
  background: #ffffff;
  border-color: #ffffff;
  color: var(--haikai-black);
}
}
.destaques-arrow--prev { left: calc((100% - var(--dest-w)) / 2 + 14px); }
.destaques-arrow--next { right: calc((100% - var(--dest-w)) / 2 + 14px); }
.destaques-arrow svg { width: 18px; height: 18px; }
.destaques-arrow:focus-visible { outline: none; }

.destaques-dots {
  position: static;
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.destaques-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.5);
  padding: 0;
  cursor: pointer;
  transition: background-color var(--motion-base) ease, transform var(--motion-base) ease;
}
.destaques-dot.is-active { background: #ffffff; transform: scale(1.3); }
.destaques-dot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

@media (prefers-reduced-motion: reduce) {
  .destaques-track { scroll-behavior: auto; }
}

/* Vídeo de fundo (loop por crossfade, ver main.js) — atrás das listras e
   do overlay escuro, que seguram o contraste do texto branco por cima. */
.metodologia-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s linear;
}
.metodologia-video#fundador-video-a { opacity: 1; } /* estado inicial antes do JS assumir */
.metodologia-video-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg, rgba(13,34,51,.78) 0%, rgba(16,17,20,.88) 60%);
}
@media (prefers-reduced-motion: reduce) {
  .metodologia-video { display: none; } /* sem crossfade rodando, evita ficar num frame estático estranho */
}
/* ---- Satelitezinho que persegue o mouse (só dentro desta seção) ----
   Posição é controlada via JS (setupMetodologiaSatellite, main.js): segue o
   cursor globalmente (não só dentro da seção) com "lag" suave (lerp) + balanço
   senoidal (flutuar) + uma leve rotação de acordo com a velocidade horizontal
   (efeito de "curva"/freio). Sem fade — o `.metodologia { overflow:hidden }` já
   clipa ele de verdade nas bordas da seção, então ele literalmente desaparece
   atrás da "parede" ao sair, sem opacity de transição nenhuma. */
.metodologia-satellite-wrap {
  /* carrega o translate+rotate (via JS) — o olho (span à parte, ver abaixo)
     mora dentro dele pra girar junto com a imagem e continuar alinhado
     com a lente mesmo quando o satélite inclina. */
  position: absolute;
  top: 0;
  left: 0;
  width: 105px; /* 75px + ~20px de altura (50→70), largura escalada na mesma proporção */
  height: 70px;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}
.metodologia-satellite {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.45)); /* sombra projetada sobre o
    conteúdo por baixo, pra dar sensação de estar flutuando de verdade */
}
.metodologia-satellite-eye {
  /* brilho azul sobre a lente da câmera, "acende" (via .is-lit, JS) ao passar
     o mouse sobre os cards dos pilares — posição calibrada pra cair em cima
     da lente na imagem-fonte (haikai_satellite.png). */
  position: absolute;
  left: 61%;
  top: 45%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70,180,255,.95) 0%, rgba(70,180,255,.55) 45%, rgba(70,180,255,0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .25s ease;
}
.metodologia-satellite-eye.is-lit { opacity: 1; }
/* Cor do brilho combinando com a frente sob o mouse nas bolas do Venn
   (AI Office) — troca só o gradiente, mantendo blend/opacidade acima. */
.metodologia-satellite-eye.eye-color-orange { background: radial-gradient(circle, rgba(240,136,58,.95) 0%, rgba(240,136,58,.55) 45%, rgba(240,136,58,0) 72%); }
.metodologia-satellite-eye.eye-color-green { background: radial-gradient(circle, rgba(52,211,153,.95) 0%, rgba(52,211,153,.55) 45%, rgba(52,211,153,0) 72%); }
.metodologia-satellite-eye.eye-color-violet { background: radial-gradient(circle, rgba(167,139,250,.95) 0%, rgba(167,139,250,.55) 45%, rgba(167,139,250,0) 72%); }
.metodologia-satellite-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  z-index: 3;
  pointer-events: none;
  opacity: .53; /* -30% pedidos (era .75), mais sutil */
  box-shadow: 0 0 5px 1px rgba(255,255,255,.65);
  will-change: transform;
}
.metodologia-satellite-particle--big {
  width: 4.8px; /* +20% */
  height: 4.8px;
  opacity: .58; /* +10% em cima do .53 */
}
.metodologia-satellite-particle--back {
  z-index: 2; /* atrás do satélite (z-index:3), numa camada própria */
}
.metodologia-satellite-particle--back-20 {
  width: 3.2px; /* -20% em cima do 4px base */
  height: 3.2px;
  opacity: .42; /* -20% em cima do .53 base */
}
.metodologia-satellite-particle--back-30 {
  width: 2.8px; /* -30% em cima do 4px base */
  height: 2.8px;
  opacity: .37; /* -30% em cima do .53 base */
}
/* Qualquer outra "janela escura" da página pode receber o mesmo satélite
   (ver setupSatellites em main.js) só marcando o contêiner com esta classe —
   `overflow:hidden` é o que faz ele desaparecer de verdade atrás da borda. */
.satellite-window { position: relative; overflow: hidden; }
/* Diagrama dos 4 pilares — fita em gradiente com 4 círculos ao longo dela.
   Cada círculo tem seu ícone/número/nome (sempre visíveis) e um tooltip
   (foreignObject, escondido por padrão) que aparece no :hover do próprio
   grupo — sem depender de JS, mesmo padrão de transição das outras cores. */
.metodologia-graphic {
  position: relative;
  z-index: 2; /* acima do cabeçalho, para o tooltip nunca ficar por baixo */
  max-width: var(--container-max);
  margin: 0 auto;
}
.metodologia-graphic svg { width: 100%; height: auto; display: block; overflow: visible; }
#ribbonMeto { filter: drop-shadow(0 10px 26px rgba(28,167,255,.28)); }
/* No mobile (≤860px) o diagrama vira 2x2 (um círculo de verdade passando
   atrás dos 4 círculos, junção escondida atrás de um deles) em vez da
   fileira horizontal — que ficava pequena/apertada demais na tela. Ver
   .metodologia-graphic-mobile-svg no HTML. */
.metodologia-graphic svg.metodologia-graphic-mobile-svg { display: none; }
.metodologia-graphic-mobile-svg path { filter: drop-shadow(0 10px 26px rgba(28,167,255,.28)); }
@media (max-width: 860px) {
  .metodologia-graphic svg.metodologia-graphic-desktop-svg { display: none; }
  .metodologia-graphic svg.metodologia-graphic-mobile-svg { display: block; max-width: 420px; margin: 0 auto; }
}
/* Traço de luz que percorre o path do círculo continuamente — bem mais
   perceptível que o shimmer sutil do gradiente (mesma ideia da fita
   desktop, só que aqui via stroke-dashoffset, direto no path). */
.meto-ribbon-flow {
  fill: none;
  stroke: #eaf6ff;
  stroke-width: 10;
  stroke-linecap: round;
  opacity: .85;
  stroke-dasharray: 70 1032.72; /* trecho aceso + resto da circunferência (~1102.72) */
  animation: metoRibbonFlow 4.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .meto-ribbon-flow { animation: none; opacity: 0; }
}
@keyframes metoRibbonFlow {
  to { stroke-dashoffset: -1102.72; }
}

.metodologia-graphic .step { cursor: pointer; }
.metodologia-graphic .step:focus-visible { outline: none; }
.metodologia-graphic .step:focus-visible .step-tip {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.metodologia-graphic .step .face2 { fill: var(--white); transition: fill var(--motion-slow) ease; }
.metodologia-graphic .step .num { fill: var(--col); font-family: var(--font-display); font-weight: var(--fw-bold); transition: fill var(--motion-slow) ease; }
.metodologia-graphic .step .name { fill: var(--haikai-black); font-family: var(--font-text); font-weight: var(--fw-semibold); transition: fill var(--motion-slow) ease; }
.metodologia-graphic .step .ico { fill: none; stroke: var(--col); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--motion-slow) ease; }

.metodologia-graphic .step.is-active .face2 { fill: var(--col); }
@media (hover: hover) and (pointer: fine) {
.metodologia-graphic .step:hover .face2{ fill: var(--col); }
}

.metodologia-graphic .step.is-active .num,
.metodologia-graphic .step.is-active .name { fill: var(--haikai-offwhite); }
@media (hover: hover) and (pointer: fine) {
.metodologia-graphic .step:hover .num,.metodologia-graphic .step:hover .name{ fill: var(--haikai-offwhite); }
}

.metodologia-graphic .step.is-active .ico { stroke: var(--haikai-offwhite); }
@media (hover: hover) and (pointer: fine) {
.metodologia-graphic .step:hover .ico{ stroke: var(--haikai-offwhite); }
}

.step-tip-fo { overflow: visible; pointer-events: none; }
.step-tip {
  position: relative;
  opacity: 0;
  transform: translateY(10px) scale(.92);
  transform-origin: center bottom;
  transition: opacity .32s cubic-bezier(.34,1.56,.64,1),
              transform .32s cubic-bezier(.34,1.56,.64,1);
  height: calc(100% - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--haikai-black);
  color: var(--haikai-offwhite);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  padding: 16px 20px;
  border-radius: var(--radius-m);
  border-top: 2px solid var(--col);
  box-shadow: 0 16px 36px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
/* setinha apontando para o círculo — mesmo tom de fundo, borda combinando */
.step-tip::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  width: 13px; height: 13px;
  background: var(--haikai-black);
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transform: translateX(-50%) rotate(45deg);
}

.metodologia-graphic .step.is-active .step-tip {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-timing-function: cubic-bezier(.34,1.56,.64,1);
}
@media (hover: hover) and (pointer: fine) {
.metodologia-graphic .step:hover .step-tip{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-timing-function: cubic-bezier(.34,1.56,.64,1);
}
}

/* ============ SERVIÇOS ============ */
/* ---- Diagrama de Venn — três frentes + fluência no centro ----
   Adaptado do protótipo "Site-Haikai-Fluence-Ano2": três círculos com
   mix-blend-mode:multiply, sobem/apagam no hover uns dos outros, leve
   flutuação de fundo, e um card preso ao mouse com o texto de cada
   frente. Paleta trocada para tons de azul/índigo/violeta da marca
   (as mesmas cores dos 4 pilares da Metodologia). Sem max-width: ocupa
   toda a coluna, bem próximo da borda da seção, como pedido. */
.servicos-diagram {
  width: 100%;
}
.servicos-diagram svg { width: 100%; height: auto; display: block; overflow: visible; user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  .servicos-diagram svg { animation: sv-floaty 6.5s ease-in-out infinite; }
}
@keyframes sv-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.sv-group { cursor: pointer; }
.sv-group:focus,
.sv-group:focus-visible { outline: none; }
.sv-circle { transition: opacity var(--motion-slow) ease, filter var(--motion-slow) ease; transform-origin: center; transform-box: fill-box; }

.sv-group.is-active .sv-fill { filter: saturate(1.18) brightness(1.05); }
@media (hover: hover) and (pointer: fine) {
.sv-group:hover .sv-fill{ filter: saturate(1.18) brightness(1.05); }
}
.sv-group.dim .sv-fill { opacity: .30 !important; }
.sv-group.up .sv-fill { opacity: .96 !important; }
.sv-label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 27px;
  fill: #fff;
  pointer-events: none;
}
.sv-center { cursor: default; }
.sv-center-pulse {
  transform-origin: center;
  transform-box: fill-box;
}
@media (prefers-reduced-motion: no-preference) {
  .sv-center-pulse { animation: sv-pulse 2.6s ease-in-out infinite; }
}
@keyframes sv-pulse { 0%, 100% { opacity: .20; } 50% { opacity: .5; } }

/* Tooltip preso ao mouse — só a "promessa" curta da frente sob o cursor
   (título e descrição completa já vivem no próprio círculo do diagrama e
   no painel "Veja como atuamos"; isso aqui é complemento rápido, não um
   card cheio de informação). */
.servico-card-float {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
  background: var(--haikai-black);
  color: var(--haikai-offwhite);
  border-radius: var(--radius-m);
  padding: 12px 16px;
  max-width: 240px;
  box-shadow: 0 22px 54px -16px rgba(14,23,38,.55);
}
.servico-card-float.show { opacity: 1; transform: translateY(0); }
.servico-card-float .scf-promise {
  font-weight: var(--fw-semibold);
  font-size: 13.5px;
  line-height: 1.4;
  color: #fff;
  text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) {
  .servico-card-float { transition: none; }
}

/* Sem mouse de verdade (touch), o card não tem posição pra seguir. A lista
   estática (.servicos-list-fallback, 2000px+ de texto aberto no celular) fica
   sempre escondida: no toque vale o botão "Veja como atuamos" + painel, que
   abre fechado e navega de lado (carrossel no celular, 3 colunas no tablet).
   A lista continua no HTML (escondida) só como texto de apoio. */
.servicos-list-fallback { display: none; }
@media (hover: none), (pointer: coarse) {
  .servico-card-float { display: none; }
}

/* ============ SOBRE ============ */
/* ============ SOBRE A HAIKAI — cena com rolagem ============
   A seção prende a tela (sticky) por ~1 tela de rolagem. Fundo off-white; barras azuis de 15px
   nascem em pontos diferentes e se abrem para os lados, cada uma na sua velocidade; quando cobrem
   tudo, um bloco azul sólido fecha o fundo e o texto vira branco (JS: setupSobreScene). O texto existe em duas camadas: a escura
   (normal) e uma cópia branca recortada pelas mesmas barras (#sobreInkClip), então cada letra
   troca de cor exatamente quando o azul chega nela. O monumento flutua o tempo todo. */
.sobre-inner { max-width: var(--container-max); margin: 0 auto; }
.sobre { --sobre-blue: #0b80cf; position: relative; background: var(--sobre-blue); }
.sobre-scene { position: relative; background: var(--haikai-offwhite); }
/* distância de rolagem em que a seção fica presa à tela (a altura da seção cresce sozinha quando o "Veja mais" abre) */
.sobre-scene::after { content: ''; display: block; height: 80vh; }
/* tudo à mostra deixa a cena mais alta que a tela: aí ela não prende, só rola (JS marca .is-flow) */
.sobre-scene.is-flow::after { display: none; }
.sobre-scene.is-flow .sobre-sticky { position: relative; min-height: 0; }
.sobre-sticky { position: sticky; top: 0; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 72px 0 20px; }
/* bloco azul sólido que fecha o fundo depois que as faixas terminam */
.sobre-solid { position: absolute; inset: 0; background: var(--sobre-blue); opacity: 0; transition: opacity .8s ease; }
.is-solid .sobre-solid { opacity: 1; }
.sobre-bars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sobre-grid {
  position: relative; z-index: 2; width: 100%;
  max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--space-8); align-items: center;
}
.sobre-mono { position: relative; width: 58%; margin: 0 auto; }
.sobre-mono img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 46px 44px rgba(16,17,20,.24)) drop-shadow(0 8px 14px rgba(16,17,20,.12));
  animation: sobreFloat 9s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sobreFloat {
  0%   { transform: translate3d(0, 10px, 0) rotate(-1.2deg); }
  50%  { transform: translate3d(8px, -16px, 0) rotate(.6deg); }
  100% { transform: translate3d(-6px, -30px, 0) rotate(1.4deg); }
}
.sobre-textwrap { position: relative; max-width: 620px; }
.sobre-text .eyebrow { margin-bottom: var(--space-3); }
.sp-title { font-size: clamp(1.6rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.08; margin-bottom: var(--space-3); color: var(--haikai-black); }
.sp-lead { font-size: .95rem; line-height: 1.55; color: var(--gray-600); margin: 0; max-width: 56ch; }
.sp-row { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); padding: 9px 0; border-top: 1px solid var(--hairline); }
.sp-num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.15rem; line-height: 1.2; color: var(--haikai-blue); }
.sp-row h3 { font-size: 1.02rem; line-height: 1.2; margin-bottom: 4px; color: var(--haikai-black); }
.sp-row p { font-size: .88rem; line-height: 1.5; color: var(--gray-600); margin: 0; }
/* os 3 tópicos: lado a lado, no topo do bloco que o "Veja mais" abre (acima dos 4 círculos) */
.sobre-topicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-bottom: var(--space-4); }
.sobre-topicos .sp-row { grid-template-columns: 30px minmax(0, 1fr); gap: 0; padding: var(--space-3) 0 0; }
.sobre-topicos .sp-num { font-size: .95rem; }
.sobre-topicos .sp-row h3 { font-size: .98rem; }
.sobre-topicos .sp-row p { font-size: .82rem; line-height: 1.45; }
/* camada clara: mesma caixa, por cima, recortada pelas barras */
/* durante a animação o corpo do texto passa por cima do azul: cinza-claro some, então vai em quase preto */
.sp-lead, .sp-row p { color: #1b2230; }
/* texto: escuro enquanto as faixas abrem, branco depois que o azul cobre a seção (um texto só) */
.sobre-text .eyebrow, .sp-title, .sp-lead, .sp-row h3, .sp-row p, .sp-num, .sp-row { transition: color .6s ease, border-color .6s ease; }
.is-blue .sobre-text .eyebrow, .is-blue .sp-num, .is-blue .sp-title, .is-blue .sp-row h3 { color: #fff; }
/* só a cor muda: mesmo peso e mesma largura nos dois estados, para as quebras de linha nunca saltarem */
.is-blue .sp-lead, .is-blue .sp-row p { color: #fff; }
.is-blue .sp-row { border-top-color: rgba(255,255,255,.5); }
@media (max-width: 860px) {
  .sobre-scene::after { display: none; }
  .sobre-sticky { position: relative; height: auto; min-height: 0; display: block; padding: 104px 0 var(--space-9); }
  .sobre-grid { grid-template-columns: 1fr; gap: var(--space-5); height: auto; }
  .sobre-mono { margin: 0 auto; width: min(78%, 340px); }
  .sobre-textwrap { max-width: none; }
  .sobre-estr .ai-office-sub { flex-direction: column; gap: var(--space-2); }
  .sobre-topicos { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .sobre-mono img { animation: none; } }

/* Estrutura do AI Office: faz parte da mesma tela da cena. Entra (fade) quando o azul sólido assume o fundo. */
.sobre-estr { position: relative; z-index: 2; width: 100%; max-width: 1160px; margin: var(--space-5) auto 0; padding: 0 var(--gutter); }
/* os círculos encolhem conforme a altura da tela, para a cena inteira caber numa tela só */
.sobre-estr .metodologia-graphic { max-width: clamp(480px, calc((100vh - 610px) * 4.27), 1000px); }
@media (min-width: 861px) and (max-height: 780px) {
  .sobre-mono { width: 50%; }
  .sp-title { font-size: 1.5rem; }
  .sp-lead { font-size: .9rem; }
}
.sobre-estr .ai-office-sub { max-width: none; margin: 0 0 var(--space-2); text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-7); padding-top: var(--space-3); border-top: 1px solid var(--hairline); transition: border-color .6s ease; }
.sobre-estr .ai-office-sub h3 { font-size: 1.15rem; line-height: 1.2; margin: 0; flex: none; color: var(--haikai-black); transition: color .6s ease; }
.sobre-estr .ai-office-sub p { color: #1b2230; font-size: .92rem; line-height: 1.45; margin: 0; max-width: 52ch; transition: color .6s ease; }
/* na cena presa à tela, o subtítulo repete o item 01 e ocupa a altura que falta: fica só o título */
@media (min-width: 861px) { .sobre-scene:not(.is-flow) .sobre-estr .ai-office-sub p { display: none; } }
.is-blue .sobre-estr .ai-office-sub { border-top-color: rgba(255,255,255,.4); }
.is-blue .sobre-estr .ai-office-sub h3 { color: #fff; }
.is-blue .sobre-estr .ai-office-sub p { color: rgba(255,255,255,.94); }
/* fita: azul sobre o claro; branca quando o azul sólido assume o fundo */
.sobre-estr #gradAio stop, .sobre-estr #gradAioMobile stop { transition: stop-color .8s ease; }
.is-solid .sobre-estr #gradAio stop:nth-child(odd), .is-solid .sobre-estr #gradAioMobile stop:nth-child(odd) { stop-color: #fff; }
.is-solid .sobre-estr #gradAio stop:nth-child(even), .is-solid .sobre-estr #gradAioMobile stop:nth-child(even) { stop-color: #d6ecfb; }
.is-solid .sobre-estr #ribbonAio, .is-solid .sobre-estr .metodologia-graphic-mobile-svg path { filter: drop-shadow(0 12px 26px rgba(3,52,98,.32)); }
.is-solid .sobre-estr .meto-ribbon-flow { stroke: #7cc6f3; }

/* ============ FUNDADOR ============
   Seção própria, escura, com o mesmo vídeo de fundo (crossfade em loop, ver
   main.js) por trás de um overlay que segura o contraste do texto claro. */
.fundador {
  position: relative;
  z-index: 0; /* contexto de empilhamento próprio: o vídeo (z-index:-1) fica atrás
                 só do conteúdo desta seção, sem escapar pra trás da página */
  padding: var(--space-10) var(--gutter);
  background: linear-gradient(155deg, #0d2233 0%, #101114 60%);
  color: var(--haikai-offwhite);
  overflow: hidden;
}
.fundador-inner { position: relative; max-width: var(--container-max); margin: 0 auto; }

.sobre-fundador {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
  justify-content: center;
}
/* Foto integrada à seção: sem moldura, esmaecida nas bordas (embaixo e à direita) e com
   brilho azul atrás, em vez de um retângulo recortado sobre o fundo. As etiquetas e os arcos
   seguem desenhados por cima, na mesma posição do slide "Quem é o Cauê?" do Speaker Kit
   (posições em %, arcos no viewBox em EMU do slide; fonte acompanha a largura da foto, cqw). */
.fundador-photo {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  margin: 0 0 0 8%;
}
/* Bolas de fundo: círculos brancos translúcidos que descem a correnteza pela seção inteira
   (posição calculada em JS, devagar, entrando e saindo com fade nas bordas). */
.fundador-balls { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fb { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle at 32% 28%, #fff, #eef4fb 58%, #d3e1f1); }
.fb1 { width: clamp(150px, 17vw, 250px); height: clamp(150px, 17vw, 250px); }
.fb2 { width: clamp(220px, 26vw, 380px); height: clamp(220px, 26vw, 380px); }
.fb3 { width: clamp(80px, 9vw, 130px);  height: clamp(80px, 9vw, 130px); }
.fb4 { width: clamp(50px, 5.5vw, 80px); height: clamp(50px, 5.5vw, 80px); }
.fb5 { width: clamp(100px, 12vw, 170px); height: clamp(100px, 12vw, 170px); }
.fb6 { width: clamp(34px, 3.4vw, 50px); height: clamp(34px, 3.4vw, 50px); }
.fundador-text, .fundador-bio { position: relative; z-index: 2; }
.fundador-photo { z-index: 1; }
.fundador-photo-frame, .fundador-callouts { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .fb { opacity: .35; } .fb1 { left: 4%; top: 14%; } .fb2 { left: 72%; top: 40%; } .fb3 { left: 40%; top: 70%; } .fb4, .fb5, .fb6 { display: none; } }
.fundador-photo-frame {
  position: absolute; inset: 0; z-index: 1;
  /* recorte redondo: círculo do tamanho da largura da foto, centrado no tronco (52% da altura) */
  clip-path: circle(35cqw at 44cqw 50cqw);
  will-change: translate;
}
.fundador-photo-frame img {
  position: absolute; left: 9cqw; top: 15cqw; width: 70cqw; height: 70cqw;
  object-fit: cover; display: block;
  transform: scale(1.06); transform-origin: 50% 42%;
  transition: transform 1.4s var(--easing-default);
}
.fundador-photo-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 44% 50%, transparent 62%, rgba(10,24,38,.3) 100%); }

@media (hover: hover) and (pointer: fine) {
.fundador-photo:hover .fundador-photo-frame img{ transform: scale(1.12); }
}
/* Ressonância: anéis finos nascem do círculo quando o mouse se move pela seção (criados em JS)
   e se abrem devagar, como ondas em água parada. */
.fundador-ring {
  position: absolute; z-index: 0; pointer-events: none;
  left: 9cqw; top: 15cqw; width: 70cqw; height: 70cqw; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); opacity: 0;
  animation: fRipple 10s cubic-bezier(.25,.1,.25,1) forwards;
}
@keyframes fRipple { 0% { transform: scale(1); opacity: 0; } 12% { opacity: var(--o, .3); } 100% { transform: scale(1.55); opacity: 0; } }
.fundador-callouts { position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: translate; }
.fundador-arcs {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: #79c9fa;
  stroke-width: .78;
  stroke-linecap: butt;
}
.fundador-arc { transition: stroke var(--motion-base), stroke-width var(--motion-base); }
.fundador-arc.is-hot { stroke: #fff; stroke-width: 1.3; }
.fundador-tags { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fundador-tags li {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: max(12px, 2.85cqw);
  line-height: 1.32;
  color: var(--haikai-black);
  pointer-events: auto;
  cursor: default;
  transition: transform var(--motion-base) var(--easing-default), filter var(--motion-base);
}
.fundador-tags li span { background: #79c9fa; padding: 0 .3em; white-space: nowrap; transition: background var(--motion-base); }
 .fundador-tags li:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
.fundador-tags li:hover{ outline: none; }
}
 .fundador-tags li:focus-visible span { background: #fff; }
@media (hover: hover) and (pointer: fine) {
.fundador-tags li:hover span{ background: #fff; }
}

/* Entrada: arcos se desenham e as etiquetas sobem em sequência quando a foto aparece
   (a classe .is-visible vem do observador de scroll). Sem movimento reduzido: tudo visível direto. */
@media (prefers-reduced-motion: no-preference) {
  .fundador-photo[data-reveal] .fundador-arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .fundador-photo[data-reveal] .fundador-tags li { opacity: 0; translate: 0 10px; }
  .fundador-photo.is-visible .fundador-arc { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--easing-default) calc(.5s + var(--arc-i, 0) * .12s), stroke var(--motion-base), stroke-width var(--motion-base); }
  .fundador-photo.is-visible .fundador-tags li { opacity: 1; translate: 0 0; transition: opacity .5s var(--easing-default) calc(.35s + var(--i, 0) * .12s), translate .5s var(--easing-default) calc(.35s + var(--i, 0) * .12s), transform var(--motion-base) var(--easing-default), filter var(--motion-base); }
  .fundador-arc[data-arc="0"] { --arc-i: 0; } .fundador-arc[data-arc="4"] { --arc-i: 1; } .fundador-arc[data-arc="6"] { --arc-i: 2; }
  .fundador-arc[data-arc="3"] { --arc-i: 3; } .fundador-arc[data-arc="5"] { --arc-i: 4; } .fundador-arc[data-arc="1"] { --arc-i: 5; } .fundador-arc[data-arc="2"] { --arc-i: 6; }
}

.fundador-text .eyebrow { color: var(--haikai-blue); }
.fundador-hero {
  color: var(--haikai-offwhite);
  font-size: clamp(3rem, 1.6rem + 4.4vw, 6rem);
  line-height: .98;
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-4);
}
.fundador-sub {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.65rem);
  line-height: 1.25;
  color: var(--haikai-blue);
  margin: 0 0 var(--space-6);
  max-width: 28ch;
}
.fundador-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fundador-toggle, .fundador-in {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 22px 0 8px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(245,247,250,.35);
  background: transparent; color: var(--haikai-offwhite);
  font: inherit; font-size: 14.5px; font-weight: var(--fw-semibold);
  cursor: pointer; text-decoration: none;
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base);
}
.fundador-in { padding: 0 22px 0 14px; }
/* o texto da fonte da marca assenta ~1,5px acima do centro óptico: compensa para ficar alinhado aos ícones */
.fundador-toggle-lbl, .fundador-in > span { line-height: 1; position: relative; top: 1.5px; }
.fundador-in svg { width: 18px; height: 18px; }
.fundador-toggle-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--haikai-blue); color: var(--haikai-black);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--motion-slow) var(--easing-default);
}
.fundador-toggle-ico svg { width: 15px; height: 15px; }
.fundador-toggle[aria-expanded="true"] .fundador-toggle-ico { transform: rotate(135deg); }
 .fundador-toggle:focus-visible, .fundador-in:focus-visible {
  background: rgba(245,247,250,.1); border-color: var(--haikai-blue); outline: none;
}
@media (hover: hover) and (pointer: fine) {
.fundador-toggle:hover,.fundador-in:hover{
  background: rgba(245,247,250,.1); border-color: var(--haikai-blue); outline: none;
}
}
.fundador-bio {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--easing-default), margin-top .5s var(--easing-default);
}
.fundador-bio.is-open { grid-template-rows: 1fr; margin-top: var(--space-9); }
.fundador-bio-inner {
  overflow: hidden; min-height: 0;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-10);
  border-top: 1px solid rgba(245,247,250,.14); padding-top: var(--space-8);
}
.fundador-bio p { font-size: 1rem; color: #aab2bf; line-height: 1.75; margin: 0 0 var(--space-5); max-width: 52ch; }
.fundador-bio strong { color: var(--haikai-offwhite); font-weight: var(--fw-medium); }
.fb-quote {
  font-family: var(--font-display); font-weight: var(--fw-bold) !important;
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem) !important; line-height: 1.2 !important;
  color: var(--haikai-offwhite) !important; margin: 0 0 var(--space-7) !important; max-width: 20ch !important;
}
.fb-quote span { color: var(--haikai-blue); }
.fb-clientes-lbl { margin-top: var(--space-7) !important; margin-bottom: var(--space-3) !important; font-size: .85rem !important; color: #8f98a6 !important; }
.fb-clientes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 52ch; }
.fb-clientes li { border: 1px solid rgba(245,247,250,.22); border-radius: var(--radius-pill); padding: 5px 14px; font-size: 13px; color: #d5dae2; transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base); }

@media (hover: hover) and (pointer: fine) {
.fb-clientes li:hover{ background: var(--haikai-blue); border-color: var(--haikai-blue); color: var(--haikai-black); }
}
@media (prefers-reduced-motion: reduce) { .fundador-bio, .fundador-toggle-ico { transition: none; } }

/* Espelho d'água: sobre tudo da seção há um véu de brilho que se move devagar, uma lente suave
   que segue o mouse (só um halo de luz) e gotas que abrem ondas onde o mouse passa. */
.fundador-water, .fundador-lens, .fundador-drop { position: absolute; pointer-events: none; }
.fundador-water {
  inset: 0; z-index: 3; opacity: .55; mix-blend-mode: soft-light;
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(50% 45% at 80% 65%, rgba(160,210,255,.14), transparent 70%),
    radial-gradient(40% 30% at 55% 15%, rgba(255,255,255,.10), transparent 70%);
  background-size: 140% 140%; animation: waterDrift 28s ease-in-out infinite alternate;
}
@keyframes waterDrift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 60%; } }
.fundador-lens {
  left: 0; top: 0; width: 240px; height: 240px; margin: -120px 0 0 -120px; z-index: 4; border-radius: 50%;
  opacity: 0; transition: opacity .9s ease; will-change: transform;
  /* só um halo de luz que acompanha o mouse: sem desfoque, para não atrapalhar a leitura */
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 45%, transparent 70%);
}
.fundador-lens.is-on { opacity: 1; }
.fundador-drop {
  z-index: 4; border-radius: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 0 18px rgba(255,255,255,.12), inset 0 0 14px rgba(255,255,255,.08);
  animation: dropRipple 6.5s cubic-bezier(.2,.5,.3,1) forwards;
}
@keyframes dropRipple { 0% { transform: scale(.4); opacity: 0; } 14% { opacity: .55; } 100% { transform: scale(8); opacity: 0; } }
@media (hover: none), (prefers-reduced-motion: reduce) { .fundador-lens, .fundador-drop { display: none; } .fundador-water { animation: none; } }

/* ============ NEWSLETTER ============ */
.newsletter {
  padding: var(--space-11) var(--gutter);
  background: var(--white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.newsletter h2 {
  font-size: var(--fs-display-l);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--space-5);
}
.newsletter p.lead {
  font-size: var(--fs-lead);
  color: var(--gray-600);
  line-height: 1.55;
  margin: 0 0 var(--space-7);
  max-width: 54ch;
}

/* ============ CONTATO ============
   Texto à esquerda (com atalhos de WhatsApp e e-mail), formulário à direita num cartão limpo:
   campos só com linha embaixo e o assunto escolhido em etiquetas (inclui Imprensa). */
.contato {
  position: relative; overflow: hidden;
  padding: var(--space-11) var(--gutter);
  background: var(--haikai-offwhite);
}
/* círculos azuis bem leves, flutuando devagar atrás do conteúdo */
.contato-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contato-orbs i { position: absolute; display: block; border-radius: 50%; animation: orbFloat var(--d, 16s) ease-in-out infinite alternate; will-change: transform; }
.contato-orbs i:nth-child(1) { width: 340px; height: 340px; left: -90px; top: 6%;  --d: 19s; background: radial-gradient(circle at 32% 28%, rgba(28,167,255,.20), rgba(28,167,255,.05) 62%, transparent 72%); }
.contato-orbs i:nth-child(2) { width: 120px; height: 120px; left: 38%;   top: 14%; --d: 13s; background: radial-gradient(circle at 32% 28%, rgba(28,167,255,.22), rgba(28,167,255,.06) 70%, transparent 74%); animation-delay: -4s; }
.contato-orbs i:nth-child(3) { width: 260px; height: 260px; right: -70px; top: 38%; --d: 22s; background: radial-gradient(circle at 32% 28%, rgba(97,114,232,.18), rgba(97,114,232,.05) 62%, transparent 72%); animation-delay: -9s; }
.contato-orbs i:nth-child(4) { width: 70px;  height: 70px;  left: 12%;   bottom: 12%; --d: 11s; background: radial-gradient(circle at 32% 28%, rgba(28,167,255,.28), rgba(28,167,255,.07) 70%, transparent 76%); animation-delay: -2s; }
.contato-orbs i:nth-child(5) { width: 180px; height: 180px; right: 14%;  bottom: -50px; --d: 17s; background: radial-gradient(circle at 32% 28%, rgba(28,167,255,.18), rgba(28,167,255,.05) 64%, transparent 72%); animation-delay: -6s; }
.contato-orbs i:nth-child(6) { width: 46px;  height: 46px;  right: 33%;  top: 8%;  --d: 9s;  background: radial-gradient(circle at 32% 28%, rgba(28,167,255,.30), rgba(28,167,255,.08) 70%, transparent 78%); animation-delay: -5s; }
@keyframes orbFloat { 0% { transform: translate3d(0, 14px, 0); } 100% { transform: translate3d(14px, -22px, 0); } }
@media (prefers-reduced-motion: reduce) { .contato-orbs i { animation: none; } }
@media (max-width: 860px) { .contato-orbs i:nth-child(1) { width: 220px; height: 220px; left: -80px; } .contato-orbs i:nth-child(3) { width: 180px; height: 180px; } }
.contato-inner {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--space-10);
  align-items: start;
}
.contato-inner > * { min-width: 0; }
.contato-text .section-title { font-size: clamp(1.7rem, 1.15rem + 1.4vw, 2.4rem); line-height: 1.1; max-width: 18ch; }
.contato-text p.lead {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: var(--space-4) 0 var(--space-6);
  max-width: 44ch;
}
.contato-canais { list-style: none; margin: 0; padding: 0; max-width: 420px; border-top: 1px solid var(--hairline); }
.contato-canais li { border-bottom: 1px solid var(--hairline); }
.contato-canais a { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: var(--space-3); padding: 13px 2px; color: var(--haikai-black); transition: color var(--motion-base), padding var(--motion-base); }
.contato-canais .cc-lbl { font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--gray-400); }
.contato-canais .cc-val { font-size: .95rem; font-weight: var(--fw-medium); }
.contato-canais svg { width: 18px; height: 18px; color: var(--haikai-blue-ink); transition: transform var(--motion-base); }

@media (hover: hover) and (pointer: fine) {
.contato-canais a:hover{ color: var(--haikai-blue-ink); }
}

@media (hover: hover) and (pointer: fine) {
.contato-canais a:hover svg{ transform: translateX(4px); }
}

.form-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-7) var(--space-8);
  box-shadow: var(--shadow-card);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.field { margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
.field label, .field legend {
  display: block;
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .03em;
  color: var(--gray-600);
  margin-bottom: 4px;
  padding: 0;
}
.field .opt { font-weight: var(--fw-regular); color: var(--gray-400); letter-spacing: 0; }
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: .95rem;
  color: var(--haikai-black);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--hairline);
  border-radius: 0;
  padding: 10px 0 12px;
  transition: border-color var(--motion-base);
}
.field input::placeholder, .field textarea::placeholder { color: var(--gray-400); }
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--haikai-blue); }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: none; border-bottom-color: var(--haikai-blue); }
/* assunto: lista suspensa no mesmo estilo dos campos (só linha embaixo), com seta própria */
.select-wrap { position: relative; }
.field select {
  width: 100%; appearance: none; -webkit-appearance: none;
  font-family: var(--font-text); font-size: .95rem; color: var(--haikai-black);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--hairline); border-radius: 0;
  padding: 9px 28px 11px 0; cursor: pointer;
  transition: border-color var(--motion-base);
}
.field select:invalid { color: var(--gray-400); }
.field select option { color: var(--haikai-black); }
.field select:focus { outline: none; border-bottom-color: var(--haikai-blue); }
.select-wrap svg { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -9px; color: var(--haikai-blue-ink); pointer-events: none; }
.form-submit { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-7); flex-wrap: wrap; }
.form-submit .btn svg { width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; }
.form-note {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-s);
  background: var(--haikai-blue-soft);
  color: var(--haikai-blue-ink);
  font-size: 14px;
  display: none;
}
.form-note.is-visible { display: block; }
.form-note.is-error { background: #fdecea; color: #9b1c1c; }
/* campo-isca anti-spam do Netlify Forms: fora da tela e fora do foco */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Barras da marca: três linhas contínuas de ponta a ponta da tela, passando por trás do formulário.
   Crescem da esquerda quando o bloco entra na tela e depois um brilho percorre cada uma. */
.contato-bars { position: absolute; z-index: 0; left: 50%; width: 100vw; margin-left: -50vw; bottom: 64px; display: grid; gap: 12px; pointer-events: none; }
.form-card { position: relative; z-index: 1; }
.contato-bars i {
  display: block; width: 100%; height: 15px; border-radius: 2px; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(100deg, #1ca7ff 0%, #1ca7ff 38%, #7ccbff 50%, #1ca7ff 62%, #1ca7ff 100%); background-size: 260% 100%;
}
.form-card.is-visible ~ .contato-bars i { animation: cbGrow 1.4s var(--easing-default) forwards, cbShine 7s ease-in-out 1.6s infinite; }
.form-card.is-visible ~ .contato-bars i:nth-child(2) { animation-delay: .2s, 2.3s; }
.form-card.is-visible ~ .contato-bars i:nth-child(3) { animation-delay: .4s, 3s; }
@keyframes cbGrow { to { transform: scaleX(1); } }
@keyframes cbShine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .contato-bars i { transform: none; animation: none !important; } }
@media (max-width: 1080px) {
  /* uma coluna só: as barras voltam para o fluxo, entre o texto e o formulário */
  .contato-bars { position: static; left: auto; width: auto; margin: 0; max-width: 420px; order: 1; }
  .contato-text { order: 0; }
  .form-card { order: 2; }
}

/* ============ EM QUAL ESTÁGIO (CTA final) ============ */
.estagio-cta { padding: 0 var(--gutter) var(--space-11); }
.estagio-cta-card {
  position: relative;
  overflow: hidden;
  max-width: var(--container-max);
  margin: 0 auto;
  background: linear-gradient(135deg, #101114, #15243d);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-7);
  text-align: center;
}
.estagio-cta-card::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28,167,255,.35), transparent 70%);
  top: -140px; right: -100px;
  pointer-events: none;
}
.estagio-cta-card h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-l);
  line-height: 1.1;
  color: var(--haikai-offwhite);
  max-width: 20ch;
  margin: 0 auto var(--space-5);
}
.estagio-cta-card p {
  position: relative;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: #b9c6d9;
  max-width: 52ch;
  margin: 0 auto var(--space-7);
}
.estagio-cta-card .btn { position: relative; }
.estagio-cta-note { position: relative; font-size: 13.5px; color: #8a94a8; margin: var(--space-4) auto 0; max-width: 44ch; }

/* ============ RODAPÉ ============ */
.rodape {
  background: var(--haikai-black);
  color: var(--haikai-offwhite);
  /* folga embaixo = altura da barra fixa da newsletter (~55-70px): sem ela a
     barra cobria as últimas linhas do texto legal no fim da página */
  padding: var(--space-10) var(--gutter) calc(var(--space-6) + 72px);
}
.rodape-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-9);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(245,247,250,.12);
}
.rodape-brand img { height: 120px; width: auto; margin-bottom: var(--space-4); }
.rodape-brand p {
  color: #b9bdc6;
  font-size: 15px;
  line-height: 1.5;
  max-width: 32ch;
  margin: 0;
}
.rodape-brand p em { font-style: italic; }
.rodape-col h4 {
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #8a909b;
  margin-bottom: var(--space-4);
}
.rodape-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* Navegação quebra em duas colunas (o link mais comprido decide a altura
   de cada uma), preenchendo de cima pra baixo antes de passar pra próxima. */
.rodape-col-nav ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  column-gap: var(--space-5);
}
.rodape-col a { color: #dfe2e8; font-size: 14.5px; transition: color var(--motion-fast); }

@media (hover: hover) and (pointer: fine) {
.rodape-col a:hover{ color: var(--haikai-blue); }
}

.rodape-bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  /* O botão flutuante da newsletter (.nlb-reopen, fixo a 24px da esquerda e
     52px de largura) cai bem em cima desta linha quando a página chega no
     fim — a folga empurra os ícones (e o texto legal, quando empilham no
     mobile) pra fora da área dele. */
  padding-left: 72px;
}
.rodape-social { display: flex; gap: 12px; }
.rodape-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(245,247,250,.2);
  color: var(--haikai-offwhite);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base);
}
.rodape-social a svg { width: 16px; height: 16px; }

@media (hover: hover) and (pointer: fine) {
.rodape-social a:hover{ background: var(--haikai-blue); border-color: var(--haikai-blue); color: var(--haikai-black); }
}
.rodape-legal { font-size: 12.5px; color: #8a909b; }
.rodape-legal a { color: #8a909b; }

@media (hover: hover) and (pointer: fine) {
.rodape-legal a:hover{ color: var(--haikai-offwhite); }
}
.rodape-cookies { background: none; border: 0; padding: 0; font: inherit; color: #8a909b; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
.rodape-cookies:hover{ color: var(--haikai-offwhite); }
}

/* ============ BARRA FIXA — NEWSLETTER ============
   Presa no rodapé da TELA (position:fixed), diferente do <footer class="rodape">
   acima (rodapé do conteúdo). Os títulos no meio vêm do RSS do Substack via
   JS (setupNewsletterBar em main.js); se a busca falhar, o carrossel some
   e a barra segue funcional só com marca + CTA. */
.newsletter-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 210;
  background: var(--white);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 30px -12px rgba(16,17,20,.12);
  transition: transform var(--motion-reveal) var(--easing-default);
}
.newsletter-bar.is-hidden { transform: translateY(100%); }
.nlb-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nlb-brand { display: flex; align-items: center; flex: none; }
.nlb-brand-logo { display: block; height: 40px; width: auto; }
.nlb-tagline {
  flex: none;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--gray-600);
  white-space: nowrap;
  border-left: 1px solid var(--hairline);
  padding-left: var(--space-5);
}
.nlb-ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--hairline);
  padding-left: var(--space-5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
/* Letreiro horizontal contínuo (tipo chamada de TV): a track tem os 5
   títulos duplicados em sequência (ver JS) e desliza de 0 a -50% da sua
   própria largura — como a segunda metade é idêntica à primeira, o ponto
   de reinício do loop é invisível. */
.nlb-ticker-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  white-space: nowrap;
  animation: nlb-marquee var(--nlb-marquee-duration, 25s) linear infinite;
}

@media (hover: hover) and (pointer: fine) {
.nlb-ticker:hover .nlb-ticker-track{ animation-play-state: paused; }
}
@keyframes nlb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.nlb-ticker-item {
  flex: none;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  color: var(--haikai-blue-ink);
}

@media (hover: hover) and (pointer: fine) {
.nlb-ticker-item:hover{ text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  .nlb-ticker-track { animation: none; }
}
.nlb-cta { flex: none; padding: 9px 18px; font-size: 13.5px; }
.nlb-close {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400);
  transition: background var(--motion-base), color var(--motion-base);
}
.nlb-close svg { width: 16px; height: 16px; }

@media (hover: hover) and (pointer: fine) {
.nlb-close:hover{ background: var(--haikai-blue-soft); color: var(--haikai-blue-ink); }
}
/* Estado minimizado — só o cubo flutuando; o texto de assinatura vira
   tooltip no hover/foco, igual ao padrão dos pilares da Metodologia. */
.nlb-reopen {
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 210;
  width: 52px; height: 52px;
  padding: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  transition: transform var(--motion-base);
}
.nlb-reopen img { width: 68%; height: 68%; object-fit: contain; }
 .nlb-reopen:focus-visible { transform: translateY(-2px); }
@media (hover: hover) and (pointer: fine) {
.nlb-reopen:hover{ transform: translateY(-2px); }
}
.nlb-reopen[hidden] { display: none; }
.nlb-reopen-tip {
  position: absolute;
  left: calc(100% + 14px);
  bottom: 0;
  width: 240px;
  background: var(--haikai-black);
  color: var(--haikai-offwhite);
  font-size: 13px;
  line-height: 1.45;
  font-weight: var(--fw-medium);
  padding: 12px 14px;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--motion-base) ease, transform var(--motion-base) ease;
  pointer-events: none;
}

.nlb-reopen:focus-visible .nlb-reopen-tip { opacity: 1; transform: translateX(0); }
@media (hover: hover) and (pointer: fine) {
.nlb-reopen:hover .nlb-reopen-tip{ opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nlb-reopen, .nlb-reopen-tip { transition: none; }
}

/* ============ ENTRADA POR SCROLL ============
   Assinatura de movimento do design system: fadeIn/slideInBottom para blocos,
   growIn (escala) para marcadores e ícones — 0,5s, sem deslocamento agressivo.
   Estado inicial só existe se o visitante aceitar movimento. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--motion-reveal) var(--easing-default),
                transform var(--motion-reveal) var(--easing-default);
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  [data-reveal-scale] {
    opacity: 0;
    transform: scale(.86);
    transition: opacity var(--motion-reveal) var(--easing-default),
                transform var(--motion-reveal) var(--easing-default);
  }
  [data-reveal-scale].is-visible { opacity: 1; transform: none; }

  [data-reveal-group] > * { transition-delay: calc(var(--reveal-i, 0) * 80ms); }
  [data-reveal-group] > *:nth-child(1) { --reveal-i: 0; }
  [data-reveal-group] > *:nth-child(2) { --reveal-i: 1; }
  [data-reveal-group] > *:nth-child(3) { --reveal-i: 2; }
  [data-reveal-group] > *:nth-child(4) { --reveal-i: 3; }
  [data-reveal-group] > *:nth-child(5) { --reveal-i: 4; }
  [data-reveal-group] > *:nth-child(6) { --reveal-i: 5; }
}

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  color: rgba(245,247,250,.7);
  z-index: 2;
}
/* Some assim que o usuário começa a rolar, para não competir com a
   setinha "continue rolando" que aparece junto do botão no fim da sequência. */
.hero--scrolly .scroll-cue {
  opacity: var(--hero-cue-opacity, 1);
  transition: opacity var(--motion-base) var(--easing-default);
}
.scroll-cue svg { width: 20px; height: 26px; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: scrollCue 2.2s ease-in-out infinite; }
}
@keyframes scrollCue {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ============ PÁGINAS INTERNAS (Metodologia / Serviços) ============
   Compartilham o mesmo cabeçalho/rodapé/barra de newsletter do site
   principal — só o miolo muda. */
.pagina-hero {
  padding: calc(var(--space-12) + 20px) var(--gutter) var(--space-9);
  background: var(--haikai-offwhite);
  text-align: center;
}
.pagina-hero-inner { max-width: var(--container-narrow); margin: 0 auto; }
.pagina-hero .section-title { margin: 0 auto var(--space-5); }
.pagina-hero .section-lead { margin: 0 auto; max-width: 56ch; }
/* Frase de ligação entre a promessa (section-lead) e o CTA — menor e mais
   neutra que o lead, pra não competir com ele na hierarquia do hero. */

.wrap-narrow { max-width: var(--container-narrow); margin: 0 auto; }

/* ---- Corpo de leitura das páginas de Destaques (artigo) ----
   Reaproveitado nas 4 páginas do carrossel (AI Comms Operations, Palestras,
   AIBP, IA sem culpa) — mesma estrutura de leitura corrida de blog/artigo,
   coluna estreita, só o conteúdo muda. Fecha sempre com o mesmo cartão
   escuro de CTA já usado em Serviços (.estagio-cta-card). */
.artigo { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-9) var(--gutter) var(--space-10); }
.artigo h2 { font-size: var(--fs-h2); line-height: 1.2; margin: var(--space-9) 0 var(--space-4); }
.artigo > h2:first-child { margin-top: 0; }
.artigo p { font-size: var(--fs-body-l); line-height: 1.7; color: var(--gray-600); margin: 0 0 var(--space-5); }
.artigo p strong { color: var(--haikai-black); font-weight: var(--fw-semibold); }
.artigo ul { margin: 0 0 var(--space-5); padding-left: 1.1em; }
.artigo li { font-size: var(--fs-body-l); line-height: 1.7; color: var(--gray-600); margin-bottom: 8px; }
.artigo-destaque {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--haikai-black);
  line-height: 1.3;
  border-left: 3px solid var(--haikai-blue);
  padding-left: var(--space-5);
  margin: var(--space-7) 0;
}

/* ---- Grade de formatos (página Palestras) ---- */

/* ---- Diagrama dos 4 pilares (página Metodologia) ----
   Mesmo desenho/cores do trecho da home, mas os círculos SELECIONAM
   (não soltam ao clicar fora) um pilar e preenchem o painel de detalhe
   abaixo — ver setupPilaresPagina em main.js. */

.pilares-diagram { position: relative; max-width: var(--container-max); margin: 0 auto; }
.pilares-diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.pilares-diagram .step { cursor: pointer; }
.pilares-diagram .step:focus,
.pilares-diagram .step:focus-visible { outline: none; }
.pilares-diagram .step .face2 { fill: var(--white); transition: fill var(--motion-slow) ease; }
.pilares-diagram .step .num { fill: var(--col); font-family: var(--font-display); font-weight: var(--fw-bold); transition: fill var(--motion-slow) ease; }
.pilares-diagram .step .name { fill: var(--haikai-black); font-family: var(--font-text); font-weight: var(--fw-semibold); transition: fill var(--motion-slow) ease; }
.pilares-diagram .step .ico { fill: none; stroke: var(--col); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--motion-slow) ease; }

.pilares-diagram .step.is-active .face2 { fill: var(--col); }
@media (hover: hover) and (pointer: fine) {
.pilares-diagram .step:hover .face2{ fill: var(--col); }
}

.pilares-diagram .step.is-active .num, .pilares-diagram .step.is-active .name { fill: var(--haikai-offwhite); }
@media (hover: hover) and (pointer: fine) {
.pilares-diagram .step:hover .num,.pilares-diagram .step:hover .name{ fill: var(--haikai-offwhite); }
}
 .pilares-diagram .step.is-active .ico { stroke: var(--haikai-offwhite); }
@media (hover: hover) and (pointer: fine) {
.pilares-diagram .step:hover .ico{ stroke: var(--haikai-offwhite); }
}

/* No mobile (≤860px) o diagrama vira 2x2, mesmo desenho/animação da home
   (ver .metodologia-graphic acima) — só que os círculos aqui SELECIONAM um
   pilar em vez de abrir um tooltip. */
.pilares-diagram svg.metodologia-graphic-mobile-svg { display: none; }
@media (max-width: 860px) {
  .pilares-diagram svg.metodologia-graphic-desktop-svg { display: none; }
  .pilares-diagram svg.metodologia-graphic-mobile-svg { display: block; max-width: 420px; margin: 0 auto; }
}

/* Anel que "faz ping" ao redor do círculo selecionado — o indicador de que
   aquele clique liga com o quadro de detalhe logo abaixo (junto com a dica
   dinâmica em .metodologia-graphic-hint e a rolagem até o quadro, ver
   setupPilaresPagina em main.js). */
.pilares-diagram .step .step-ring {
  fill: none;
  stroke: var(--col);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.pilares-diagram .step.is-active .step-ring {
  animation: stepRingPing 1.8s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes stepRingPing {
  0% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .pilares-diagram .step.is-active .step-ring { animation: none; opacity: .35; }
}

.metodologia-graphic-hint {
  text-align: center;
  font-size: 13.5px;
  color: var(--gray-400);
  margin-top: var(--space-3);
}
.metodologia-graphic-hint strong { color: var(--hint-col, var(--haikai-blue)); font-weight: var(--fw-semibold); }

/* Reforça a troca de conteúdo ao clicar num pilar/serviço (ver render() em
   main.js, que reaplica esta classe a cada clique para reiniciar a
   animação, já que o innerHTML é todo recriado). */
.pd-anim { animation: pdReveal .45s var(--easing-default); }
@keyframes pdReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pd-anim { animation: none; }
}
/* align-items:center alinha as CAIXAS de linha, não o texto — como o
   "PILAR 0X" (11.5px) e o nome do pilar (17px, bold, colorido) têm alturas
   bem diferentes, centralizar a caixa deixava o texto maior visualmente
   "flutuando" mais baixo que o menor. Alinhar pela linha de base (baseline)
   resolve o texto; o ponto, que não tem baseline própria, fica com
   align-self:center à parte, senão ele desceria junto com o texto. */
.pd-head { display: flex; align-items: baseline; gap: 12px; padding: var(--space-6) var(--space-7) 0; }
.pd-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; align-self: center; background: var(--pd-col, var(--haikai-blue)); }
.pd-eyebrow { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .1em; color: var(--gray-400); }
.pd-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 17px; color: var(--pd-col, var(--haikai-blue)); }
.pd-body { padding: var(--space-6) var(--space-7) var(--space-7); }
/* 460px (não 26ch) porque em ch a quebra ficava sortida por pilar: alguns
   taglines caíam em 2 linhas bem equilibradas, outros em 3 linhas bem
   desproporcionais (ex.: Naturalidade, a mais longa). Testado nas 4 frases
   reais — 460px é a largura onde todas quebram em só 2 linhas, sem viúva. */
.pd-tagline { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 24px; line-height: 1.25; color: var(--haikai-black); max-width: 460px; margin-bottom: var(--space-4); }
.pd-chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--pd-col, var(--haikai-blue)); background: var(--haikai-offwhite); padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: var(--space-5); }
.pd-desc { font-size: 16px; line-height: 1.6; color: var(--gray-600); max-width: 62ch; margin-bottom: var(--space-5); }
.pd-objetivo { background: var(--haikai-offwhite); border-left: 3px solid var(--pd-col, var(--haikai-blue)); border-radius: var(--radius-s); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); }
.pd-objetivo p { font-size: 15px; line-height: 1.6; color: var(--gray-600); max-width: 58ch; }
.pd-objetivo strong { color: var(--haikai-black); font-weight: var(--fw-semibold); }
.pd-diag { list-style: none; margin-bottom: var(--space-6); }
.pd-diag li { font-size: 14px; line-height: 1.6; color: var(--gray-600); padding-left: 18px; position: relative; margin-bottom: 8px; }
.pd-diag li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); }
.pd-eixos-label { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); margin-bottom: var(--space-4); }
.pd-eixos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
.pd-eixo { background: var(--haikai-offwhite); border-radius: var(--radius-s); padding: var(--space-5); }
/* Empilhado (não lado a lado) porque o rótulo qualitativo ("Apoio
   complementar") é bem mais longo que o antigo "2/4" — num card de 1/3 da
   largura do quadro, colocar os dois na mesma linha com space-between
   espremia e quebrava o texto de forma feia. */
.pd-eixo-top { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
.pd-eixo-nome { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 14px; color: var(--pd-col, var(--haikai-blue)); }
.pd-eixo-nome::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pd-col, var(--haikai-blue)); flex: none; }
.pd-eixo-lvl { font-size: 12px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .03em; color: var(--pd-col, var(--haikai-blue)); opacity: .8; }
.pd-eixo p { font-size: 13.5px; line-height: 1.55; color: var(--gray-600); margin-bottom: 14px; }
.pd-eixo-bar { height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.pd-eixo-bar-fill { height: 100%; border-radius: 999px; background: var(--pd-col, var(--haikai-blue)); }
.pd-list-label { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); margin-bottom: var(--space-4); }
.pd-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
.pd-list li { font-size: 14px; line-height: 1.5; color: var(--gray-600); padding-left: 18px; position: relative; }
.pd-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--pd-col, var(--haikai-blue)); }

/* ---- Moldura escura do quadro de detalhe (só página Metodologia) ----
   Mesmo clipe de vídeo da seção Metodologia da home, em loop por
   crossfade (ver main.js), com leve parallax no scroll. O card branco
   `.pilar-detalhe` vira transparente dentro dessa moldura — por isso os
   overrides de cor do `.pd-*` abaixo ficam escopados aqui, sem afetar o
   card branco que a página Serviços reaproveita com as mesmas classes. */
.pilar-detalhe-frame {
  position: relative;
  margin-top: var(--space-6);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: linear-gradient(155deg, #0d2233 0%, #101114 60%);
  border-top: 3px solid var(--pd-col, var(--haikai-blue));
  transition: border-color var(--motion-slow) ease;
}
.pilar-detalhe-video {
  position: absolute;
  inset: -6%;
  z-index: 0;
  width: 112%;
  height: 112%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s linear;
  will-change: transform;
}
.pilar-detalhe-video#pilar-video-a { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pilar-detalhe-video { display: none; }
}

.pilar-detalhe-frame .pd-eyebrow,
.pilar-detalhe-frame .pd-eixos-label,
.pilar-detalhe-frame .pd-list-label { color: rgba(255,255,255,.55); }
.pilar-detalhe-frame .pd-tagline,
.pilar-detalhe-frame .pd-objetivo strong { color: var(--haikai-offwhite); }
.pilar-detalhe-frame .pd-desc,
.pilar-detalhe-frame .pd-objetivo p,
.pilar-detalhe-frame .pd-diag li,
.pilar-detalhe-frame .pd-eixo p,
.pilar-detalhe-frame .pd-list li { color: #c7cbd3; }
.pilar-detalhe-frame .pd-objetivo { background: rgba(255,255,255,.07); }
.pilar-detalhe-frame .pd-diag li::before { background: rgba(255,255,255,.4); }
.pilar-detalhe-frame .pd-eixo { background: rgba(255,255,255,.07); }
.pilar-detalhe-frame .pd-eixo-bar { background: rgba(255,255,255,.15); }

/* ---- Por que não avança (reconhecimento do problema) ---- */

/* ---- Antes e depois ---- */

/* ---- Cabeçalho + legenda de benefícios do diagrama ----
   Fica antes do SVG (que continua intocado) pra associar cada pilar ao seu
   benefício sem poluir o desenho — ver item 4 do briefing. */

/* ---- Entregáveis ---- */
.entregaveis-pagina { padding: 0 var(--gutter) var(--space-9); background: var(--white); }
.entregaveis-head { max-width: var(--container-max); margin: 0 auto var(--space-8); text-align: center; }
.entregaveis-grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

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

/* ---- Premissas ---- */

/* Cada card é uma pequena "janela" escura recortada no fundo claro da
   seção (mesma linguagem visual do quadro de detalhe acima) — e, como toda
   janela escura do site, o satelitezinho pode atravessá-la (ver
   .satellite-window / .satellite-window--small e setupSatellites em
   main.js). O conteúdo precisa ficar acima do satélite (z-index) e a cor
   do texto muda pro par claro, igual ao quadro de detalhe. */

/* ---- Diagrama de Venn (página Serviços) ----
   Mesmas classes .sv-* do trecho da home (CSS já é global), só o
   wrapper muda — aqui os círculos SELECIONAM um serviço e preenchem
   o painel de detalhe abaixo, em vez de abrir o card preso ao mouse. */

.servicos-venn-pagina { max-width: 620px; margin: 0 auto; }
.servicos-venn-pagina svg { width: 100%; height: auto; display: block; overflow: visible; user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  .servicos-venn-pagina svg { animation: sv-floaty 6.5s ease-in-out infinite; }
}

/* ============ RESPONSIVO ============ */
@media (max-width: 1080px) {
  .ai-office-inner { grid-template-columns: 1fr; grid-template-rows: none; text-align: center; }
  .ai-office-head,
  .ai-office-cta,
  .ai-office-diagram { grid-column: auto; grid-row: auto; }
  /* Empilhado em 1 coluna aqui: texto, depois o diagrama, e só então o
     botão "Veja como atuamos" — pedido explícito pro mobile, onde ler o
     diagrama antes do CTA faz mais sentido do que no desktop (lado a
     lado). `order` funciona em item de grid também, não só flex. */
  .ai-office-head { order: 1; }
  .ai-office-diagram { order: 2; }
  .ai-office-cta { order: 3; margin-top: var(--space-6); justify-self: center; }
  /* O nudge de -40px (ver regra base) é só pro layout de 2 colunas do
     desktop, equilibrando o diagrama contra o texto ao lado — empilhado
     em 1 coluna aqui, esse deslocamento só jogava o diagrama pra fora do
     centro. */
  .ai-office-diagram { left: 0; }
  .ai-office-head { text-align: center; }
  .ai-office-head .section-title { margin-left: auto; margin-right: auto; }
  .ai-office-head .section-lead { margin-left: auto; margin-right: auto; }
  .ai-office-reveal-inner { grid-template-columns: 1fr; text-align: left; }
  
  
  .contato-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .form-card { padding: var(--space-6); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .rodape-inner { grid-template-columns: 1fr 1fr; }

  .hero-pin { padding-bottom: 130px; } /* mesmo respiro extra do mobile — os
    robozinhos (.clientes-easter) já encolhem/centralizam nesse breakpoint
    (1080px), então o botão precisa do mesmo espaço aqui, não só em 860px,
    senão sobrepõem na faixa "tablet" entre os dois breakpoints */
  .scroll-cue { display: none; }
}

@media (max-width: 1080px) and (min-width: 561px) {
  /* Nessa faixa "tablet", com --logo-scale ainda no valor desktop (.75), o
     flex-wrap natural deixava sobrar 1 logo sozinho numa linha (ex.: CEIA
     sozinho depois de 5 na linha de cima) — grid de 3 colunas fixas garante
     sempre linhas completas (2 de 3, em vez de 5+1). Só nessa faixa: o
     mobile (≤560px) mantém o flex-wrap natural, que já cabe bem 2 por linha. */
  .clientes-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    row-gap: calc(40px * var(--logo-scale));
    column-gap: calc(48px * var(--logo-scale));
  }
}

/* Barra do cabeçalho em degraus, para os textos do menu seguirem na tela o maior tempo possível:
   1) abaixo de ~1180px os links encolhem com a largura da tela (fonte e espaços fluidos);
   2) abaixo de ~1120px saem os ícones sociais; 3) abaixo de ~900px sai o seletor de idioma;
   4) só abaixo de ~820px vira hambúrguer. O que sai segue no menu mobile (.nav-mobile-extra) e no rodapé. */
@media (max-width: 1180px) {
  .nav-inner { gap: var(--space-4); }
  .nav-links { gap: clamp(10px, 2vw - 6px, 18px); }
  .nav-links a { font-size: clamp(12.5px, .7vw + 5.6px, 14px); }
  .nav-cta .btn { padding: 11px 20px; font-size: 14px; }
}
@media (max-width: 1120px) {
  .nav-cta .nav-social { display: none; }
}
@media (max-width: 900px) {
  .nav-cta .nav-lang { display: none; }
  .nav-cta .btn { padding: 10px 16px; font-size: 13.5px; }
}
@media (max-width: 820px) {
  .nav-inner { grid-template-columns: auto auto auto; justify-content: space-between; }
  .nav-links, .nav-cta .btn-outline-dark { display: none; }
  .nav-burger { display: flex; }
  .nav-cta .btn-primary { padding: 10px 18px; font-size: 13.5px; }
}

@media (max-width: 860px) {
  .hero-pin { padding: 120px 20px 130px; }
  /* padding-bottom (130px) já vem do bloco @media 1080px acima — repetido aqui
     só porque o padding-top também precisa mudar nesse breakpoint mais estreito.
     align-items continua flex-end (herdado da regra base) — com o scrollytelling
     agora ativo no mobile, o pin fica sticky e alto (100vh via .hero--scrolly
     .hero-pin), e flex-start deixava um vão enorme de fundo/vídeo vazio abaixo
     do botão; min-height:auto também foi removido pelo mesmo motivo (a regra
     .hero--scrolly .hero-pin já define a altura certa com prioridade maior). */
  .hero-title { font-size: clamp(2.4rem, 8vw, 3.4rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .hero-actions .link-arrow { width: 100%; justify-content: center; }

  .hero-abertura { grid-template-columns: 1fr; gap: var(--space-6); max-width: 320px; }
  .sobre-haikai, .sobre-fundador { grid-template-columns: 1fr; }
  .sobre-haikai { gap: var(--space-4); margin-bottom: var(--space-9); }
  .sobre-pilares { grid-template-columns: 1fr; gap: var(--space-7); padding-bottom: var(--space-10); margin-bottom: var(--space-10); }
  .sobre-pilar h3 { max-width: none; min-height: 0; }
  .sobre-fundador { text-align: left; }
  /* O recorte redondo da foto fica em 44% da largura do quadro (sobra espaço
     à direita para as etiquetas no desktop); centralizar o QUADRO deixava o
     círculo ~6% da foto para a esquerda. Aqui o quadro é deslocado para o
     CENTRO DO CÍRCULO cair no centro da tela. */
  .fundador-photo { width: 72%; max-width: 400px; margin: 0 0 0 calc(50% - min(72%, 400px) * .44); }
  .fundador-bio-inner { grid-template-columns: 1fr; gap: var(--space-7); }

  .form-row { grid-template-columns: 1fr; }
  .rodape-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .rodape-bottom { flex-direction: column; align-items: flex-start; padding-left: 0; } /* o recuo de 72px (desvio do botão flutuante da newsletter) só vale no desktop; no celular a folga fica embaixo do rodapé */

  .nlb-ticker { display: none; }
  .nlb-tagline { display: none; }
  .nlb-inner { gap: var(--space-4); padding: 10px var(--gutter); }
  .nlb-close { margin-left: auto; } /* com o ticker/tagline (que tinha flex:1)
    escondidos, nada mais empurrava o X pra direita — ele ficava colado no
    botão Assinar em vez de na ponta da barra */

  
  .pd-list { grid-template-columns: 1fr 1fr; }
  .pd-eixos { grid-template-columns: 1fr; }
  .pd-tagline { font-size: 21px; }

  .destaque-banner { min-height: 240px; flex-basis: 86%; }
  .destaque-banner-content { padding: var(--space-6) var(--space-5) var(--space-6) calc(var(--space-6) + 24px); max-width: 62%; }
  .destaque-banner h3 { font-size: 26px; }
  .destaques-track { padding: 0 7%; }
  .destaques-arrow--prev { left: 9%; }
  .destaques-arrow--next { right: 9%; }
  .destaques-carousel::before, .destaques-carousel::after { width: 7%; }
}

@media (max-width: 560px) {
  /* As 3 colunas do painel expandido cortavam nessa largura (cada uma
     precisa de espaço pra respirar, com título + promessa + descrição +
     lista de tags) — vira carrossel horizontal com scroll-snap, navegado
     pelas setas que só aparecem nessa faixa (ver .ai-office-reveal-arrow
     acima, escondida por padrão). */
  /* Cartão em largura total (setas ao lado o comprimiam para ~240px e o
     texto ficava altíssimo); as setas vão numa linha centralizada ACIMA do
     cartão (cartão alto: setas embaixo ficariam longe de quem está lendo). */
  .ai-office-reveal-nav { flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-5); }
  .ai-office-reveal-inner { order: 1; flex: 0 0 100%; }
  .ai-office-reveal-arrow { display: flex; order: 0; width: 40px; height: 40px; }
  .ai-office-reveal.is-expanded { max-height: 2200px; margin-top: var(--space-7); }
  .ai-office-reveal-inner {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* pan-y: deixa o gesto vertical (rolar a página) livre e entrega o
       horizontal pro JS (ver setupServicosVenn em main.js, arraste via
       Pointer Events) — sem isso, um arraste na diagonal brigava entre
       rolar a página e arrastar o carrossel. */
    touch-action: auto; /* toque rola de lado nativamente (com snap); o arrasto por JS só vale para mouse */
    overscroll-behavior-x: contain;
    cursor: grab;
  }
  .ai-office-reveal-inner:active { cursor: grabbing; }
  .ai-office-reveal-inner::-webkit-scrollbar { display: none; }
  .ai-office-reveal-card { flex: 0 0 100%; scroll-snap-align: start; }

  /* Mobile: grade de 3 por linha; as sobras ficam em linhas de 2 centralizadas (5 = 3+2;
     19 = 5 linhas de 3 + 2 de 2). Nunca uma linha com um logo só. */
  .clientes-row {
    --logo-scale: .48;
    display: grid; grid-template-columns: repeat(6, 1fr);
    justify-items: center; align-items: center; column-gap: 10px; row-gap: 26px;
  }
  .clientes-row .cliente-logo { grid-column: span 2; }
  .clientes-row:not(.clientes-row--extra) .cliente-logo:nth-child(4),
  .clientes-row--extra .cliente-logo:nth-child(16),
  .clientes-row--extra .cliente-logo:nth-child(18) { grid-column: 2 / 4; }
  .clientes-row:not(.clientes-row--extra) .cliente-logo:nth-child(5),
  .clientes-row--extra .cliente-logo:nth-child(17),
  .clientes-row--extra .cliente-logo:nth-child(19) { grid-column: 4 / 6; }
  .clientes-more.is-expanded { margin-top: 16px; } /* era 40px fixo — não acompanhava
    o --logo-scale menor do mobile, então ficava desproporcional (vão maior entre as
    duas fileiras do que o gap interno de cada uma) */
  section { padding-left: 20px; padding-right: 20px; }
  .fundador, .contato { padding-top: var(--space-9); padding-bottom: var(--space-9); }

  .nlb-brand-logo { height: 30px; }
  .nlb-cta { padding: 8px 14px; font-size: 13px; }
  .nlb-reopen { left: 16px; bottom: 16px; }
  .nlb-reopen-tip { width: 200px; font-size: 12.5px; }

  
  .pd-list { grid-template-columns: 1fr; }
  .pd-head, .pd-body { padding-left: var(--space-5); padding-right: var(--space-5); }

  /* No mobile o texto desce pra baixo da imagem (card empilhado), em vez
     de sobreposto por cima dela — a foto vira um bloco normal no topo
     (altura fixa), sem precisar da sombra em degradê (::before some, já
     que não há mais texto por cima da foto pra proteger). */
  .destaque-banner { display: flex; flex-direction: column; min-height: auto; flex-basis: 88%; }
  .destaque-banner-img { position: relative; inset: auto; left: auto; width: 100%; height: 170px; flex: none; -webkit-mask-image: none; mask-image: none; object-position: var(--img-pos-m, var(--img-pos, top)); transform: scale(var(--img-zoom-m, 1)); transform-origin: var(--img-origin-m, 50% 0); }
  /* Sem o degradê de texto por cima da foto, o ::before vira o contorno do
     cartão: o bloco de texto (preto) tinha a mesma cor do fundo da seção e a
     borda de baixo arredondada sumia (mais evidente no AIBP, de foto clara). */
  .destaque-banner::before { inset: 0; z-index: 4; background: none; mix-blend-mode: normal; border: 1px solid rgba(255,255,255,.14); border-radius: inherit; pointer-events: none; }
  .destaque-banner-content { position: relative; height: auto; max-width: none; padding: var(--space-5); background: var(--haikai-black-soft); }
  .destaque-banner p { max-width: none; }
  .destaque-banner h3 { font-size: 22px; max-width: none; }
  .destaques-track { padding: 0 6%; gap: var(--space-4); }
  .destaques-carousel::before, .destaques-carousel::after { width: 5%; }
  /* Setas ancoradas no topo (sobre a foto, não mais sobre texto) */
  .destaques-arrow { top: 22px; transform: none; width: 38px; height: 38px; left: auto; right: auto; }
  .destaques-arrow--prev { left: 8px; }
  .destaques-arrow--next { right: 8px; }
  .destaques-arrow svg { width: 16px; height: 16px; }
}

/* ============ POLÍTICA DE PRIVACIDADE ============
   Documento de leitura: índice fixo à esquerda, seções numeradas numa coluna estreita. */
.legal-date { margin: var(--space-3) 0 0; font-size: .85rem; color: var(--gray-400); }
.legal { padding: 0 var(--gutter) var(--space-11); }
.legal-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-9); align-items: start; }
.legal-toc { position: sticky; top: 96px; }
.legal-toc-h { margin: 0 0 var(--space-3); font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--hairline); }
.legal-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: .86rem; line-height: 1.35; color: var(--gray-600); transition: color var(--motion-base), border-color var(--motion-base); }

@media (hover: hover) and (pointer: fine) {
.legal-toc a:hover{ color: var(--haikai-blue-ink); border-left-color: var(--haikai-blue); }
}
.legal-cookies { margin-top: var(--space-5); padding: 0; background: none; border: 0; font: inherit; font-size: .86rem; font-weight: var(--fw-semibold); color: var(--haikai-blue-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.legal-sec { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; padding: var(--space-6) 0; border-top: 1px solid var(--hairline); scroll-margin-top: 96px; }
.legal-sec:first-child { border-top: 0; padding-top: 0; }
.legal-sec > * { grid-column: 2; }
.legal-n { grid-column: 1 !important; font-size: .8rem; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--haikai-blue); }
.legal-sec h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 var(--space-3); color: var(--haikai-black); }
.legal-sec p { font-size: .95rem; line-height: 1.7; color: var(--gray-600); margin: 0 0 var(--space-3); max-width: 66ch; }
.legal-sec ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; max-width: 66ch; border-bottom: 1px solid var(--hairline); }
.legal-sec li { font-size: .95rem; line-height: 1.65; color: var(--gray-600); padding: 10px 0; border-top: 1px solid var(--hairline); }
@media (max-width: 860px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .legal-toc { position: static; }
  .legal-toc ol { grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); border-left: 0; }
  .legal-toc a { padding-left: 0; border-left: 0; margin-left: 0; }
  .legal-sec { grid-template-columns: 2rem minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .legal-toc ol { grid-template-columns: minmax(0, 1fr); }
}

/* ============ AVISO DE COOKIES ============
   Cartão discreto no canto, acima da barra da newsletter. Dois botões de mesmo peso. */
.cookie-banner {
  position: fixed; left: 16px; bottom: 88px; z-index: 450; width: min(420px, calc(100vw - 32px));
  padding: 20px 22px; border-radius: var(--radius-m);
  background: var(--haikai-black); color: var(--haikai-offwhite);
  box-shadow: 0 18px 48px -12px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  opacity: 0; transform: translateY(16px); visibility: hidden;
  transition: opacity .5s var(--easing-default), transform .5s var(--easing-default), visibility 0s .5s;
}
.cookie-banner.is-visible { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.cookie-banner h2 { font-size: 1rem; line-height: 1.25; margin: 0 0 6px; color: #fff; }
.cookie-banner p { margin: 0 0 var(--space-4); font-size: .86rem; line-height: 1.55; color: #c3c8d2; }
.cookie-banner p a { color: var(--haikai-blue); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { padding: 10px 18px; font-size: .88rem; }
.cookie-actions .btn-outline { border-color: rgba(245,247,250,.4); color: var(--haikai-offwhite); }
@media (max-width: 560px) { .cookie-banner { left: 12px; right: 12px; width: auto; bottom: 84px; padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* ============ ACESSIBILIDADE / NAVEGAÇÃO ============
   Link "Pular para o conteúdo": invisível até receber foco pelo teclado. */
.skip-link {
  position: fixed; left: 12px; top: -64px; z-index: 1000;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--haikai-black); color: var(--haikai-offwhite);
  font-size: .9rem; font-weight: var(--fw-semibold);
  transition: top var(--motion-base);
}
.skip-link:focus { top: 12px; }

/* ============ QUEBRAS DE LINHA ============
   Reforço nativo às regras manuais (&nbsp; entre as últimas palavras): títulos com linhas equilibradas e
   parágrafos sem última linha curta, quando o navegador oferece (Chrome/Edge/Safari recentes). */
h1, h2, h3, h4, .acx-lema, .pls-head, .sp-title, .section-title, .hero-title, .fundador-sub { text-wrap: balance; }
p, li, dd, .lead, .section-lead { text-wrap: pretty; }

/* Celular com pouca altura útil (barras do navegador abertas, iPhone SE etc.):
   o bloco do hero é alinhado embaixo e mede ~490px; com 120px de reserva em
   cima e 130px embaixo ele não cabia e a linha azul subia para trás do menu.
   Aqui a reserva diminui e o título acompanha a altura da tela. Fica no fim
   do arquivo para vencer as regras de 860px/1080px de mesma especificidade. */
@media (max-width: 860px) and (max-height: 760px) {
  .hero-pin { padding: 96px 20px 70px; }
  .hero-title { font-size: min(clamp(2.4rem, 8vw, 3.4rem), 5.2vh); }
}
@media (max-width: 860px) and (max-height: 620px) {
  .hero-pin { padding: 90px 20px 60px; }
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-title { margin-bottom: var(--space-3); }
}

/* CTA escuro (Serviços e páginas internas): no celular o título de 44px não
   cabia no cartão — "continuar evoluindo." (preso por &nbsp;) saía cortado. */
@media (max-width: 560px) {
  .estagio-cta-card { padding: var(--space-8) var(--space-5); }
  .estagio-cta-card h2 { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
}