/*
Theme Name: Mofo Workspaces
Theme URI: https://mofo.ws
Author: Angelica Camargo
Description: Tema custom do Mofo Workspaces. Paginas de marketing codadas (fidelidade total ao design) + blog nativo gerenciado pelo painel do WordPress. Ambiente de teste.
Version: 0.1.6
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: mofo-workspaces
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Sem isso, o Safari/WebKit "infla" o tamanho do texto sozinho em
   colunas estreitas (efeito de autosizing pra leitura mobile) —
   ignora o font-size/line-height do CSS e é bem provável que seja
   a causa do entrelinha estranho na legenda do card, que fica numa
   coluna de só 168px. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root {
  --coral: #FE7763;
  --blue: #0173BC;
  --pink: #F9A6E2;
  --yellow: #E6DB35;
  --mint: #8DD3DB;
  --mint-dark: #6FB8C2;

  --ink: #42423C;
  --ink-soft: #5A5A54;
  --ink-light: #707070;

  /* #F4EFE6 removido — cream-yellow é o único creme de fundo do site */
  --cream-yellow: #FFFEEF;
  --cream-dark: #F2F0D2;
  --white: #FFFFFF;

  --line: #D0D0C3;
  --line-strong: #42423C;

  --font-primary: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

  --radius-nav: 6px;
  --radius-btn: 8px;
  --radius-card: 16px;
  --radius-pill: 30px;

  --shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 20px 50px rgba(30, 25, 15, 0.18);

  --header-h: 77px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-primary);
  background: var(--cream-yellow);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  transition: all .15s;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: #e8604f; transform: translateY(-1px); }
.btn-outline-ink {
  background: var(--cream-yellow);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-outline-ink:hover { background: #fff; transform: translateY(-1px); }

/* ================================================================
   HEADER — adaptativo (positivo/negativo)
   ================================================================ */
.mofo-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .3s ease;
}
.mofo-nav .nav-inner {
  position: relative;
  z-index: 2; /* fica acima do .dropdown — logo/nav/ícones nunca somem atrás do painel */
  width: 100%;
  /* margem real do grid do Figma (node 208:808): 52px de cada lado,
     canvas de referência 1728px — mesma fórmula do .dropdown-inner,
     pra logo/ícones sempre alinharem com o conteúdo do dropdown */
  max-width: 1728px;
  margin: 0 auto;
  padding: 0 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}
.mofo-nav .nav-logo { justify-self: start; position: relative; display: inline-flex; align-items: center; height: 42px; }
.mofo-nav .nav-logo img { height: 42px; width: auto; display: block; }
.mofo-nav .nav-logo .logo-negativo { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s ease; }
.mofo-nav .nav-logo .logo-positivo { opacity: 1; transition: opacity .3s ease; }
.mofo-nav.is-dark .nav-logo .logo-positivo { opacity: 0; }
.mofo-nav.is-dark .nav-logo .logo-negativo { opacity: 1; }

.mofo-nav .nav-links { justify-self: center; display: flex; align-items: center; gap: 4px; list-style: none; }
.mofo-nav .nav-links > li { position: relative; }
.mofo-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.32px;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--radius-nav);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  transition: color .3s ease, background .15s;
}
.mofo-nav .nav-link.has-dropdown { letter-spacing: -0.48px; }
.mofo-nav .nav-link:hover, .mofo-nav .nav-link:focus, .mofo-nav .nav-link:active { background: transparent; outline: none; }
.mofo-nav .nav-link:not(.has-dropdown):hover { color: var(--coral) !important; }
.mofo-nav .nav-link .chevron { transform: rotate(180deg); transition: transform .2s ease; flex-shrink: 0; color: currentColor; }
/* itens com dropdown ficam coral + seta pra cima já no hover — o JS
   adiciona .open no mouseenter, então hover e clique usam o mesmo estado */
.mofo-nav .nav-links > li.open .nav-link.has-dropdown { color: var(--coral) !important; }
.mofo-nav .nav-links > li.open .nav-link .chevron { transform: rotate(0deg); }

.mofo-nav .nav-actions { justify-self: end; display: flex; align-items: center; gap: 13px; }
.mofo-nav .nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform .15s;
}
.mofo-nav .nav-icon-btn:hover { transform: scale(1.06); }
/* Ícones do lado direito (hambúrguer/conta) — regra do Figma:
   positivo = círculo branco 100% opaco + glifo ink; negativo = círculo
   branco a 50% de opacidade + glifo branco. Diferente do que eu tinha
   assumido antes (achava que não mudavam entre os temas). */
/* contorno 1px nos círculos: ink no normal, branco no tema escuro —
   mesma lógica de troca que o glifo já tinha. Usa fill-opacity (não
   opacity) pro esmaecido do tema escuro: "opacity" no elemento inteiro
   deixava o CONTORNO branco também a 50%, meio sumido em cima do
   coral — com fill-opacity só o miolo branco esmaece, o contorno
   continua 100% opaco nos dois temas. */
.mofo-nav .nav-icon-btn svg .icon-btn-circle { fill: #fff; fill-opacity: 1; stroke: var(--ink); stroke-width: 1; transition: fill-opacity .3s ease, stroke .3s ease; }
.mofo-nav .nav-icon-btn svg .icon-btn-glyph { stroke: var(--ink); transition: stroke .3s ease; }
.mofo-nav.is-dark .nav-icon-btn svg .icon-btn-circle { fill-opacity: .5; stroke: #fff; }
.mofo-nav.is-dark .nav-icon-btn svg .icon-btn-glyph { stroke: #fff; }

/* Tema NEGATIVO — quando a seção atrás do header é escura/foto.
   Só o texto do nav inverte; os botões de ícone (círculo branco +
   ícone ink) ficam iguais nos dois temas, é assim no Figma. */
.mofo-nav.is-dark .nav-link { color: #fff; }

/* Enquanto um dropdown está aberto, o header inteiro vira creme sólido
   e o texto vira ink — assim ele se funde com o painel do dropdown
   embaixo, sem costura (comportamento real do Happly: o header e o
   painel do dropdown formam um bloco único cor creme).
   TODO: cor exata em revisão — Angélica vai passar o hex certo (ela
   notou um tom com leve carga de preto em baixa opacidade por cima do
   creme, não um creme 100% chapado). Usando --cream-yellow por ora. */
/* o header em si continua transparente — quem vira cream é a CAIXA
   (::before), que cresce. Antes a barra inteira ficava cream de ponta
   a ponta, o que brigava com o formato de pílula/caixa flutuante. */
.mofo-nav:has(.nav-links > li.open) { background: transparent; }
.mofo-nav:has(.nav-links > li.open) .nav-link { color: var(--ink); }
.mofo-nav:has(.nav-links > li.open) .nav-links > li.open .nav-link.has-dropdown { color: var(--coral) !important; }
/* Logo e ícones também precisam virar positivo junto — antes só o texto
   do nav virava, a logo e os ícones ficavam "presos" no estado is-dark. */
.mofo-nav:has(.nav-links > li.open) .nav-logo .logo-positivo { opacity: 1 !important; }
.mofo-nav:has(.nav-links > li.open) .nav-logo .logo-negativo { opacity: 0 !important; }
.mofo-nav:has(.nav-links > li.open) .nav-icon-btn svg .icon-btn-circle { fill-opacity: 1 !important; stroke: var(--ink) !important; }
.mofo-nav:has(.nav-links > li.open) .nav-icon-btn svg .icon-btn-glyph { stroke: var(--ink) !important; }

/* ================================================================
   MENU EM PÍLULA FLUTUANTE — node 208:1534 (negativo) / 208:1646
   (positivo). Agora em TODOS os breakpoints (era só desktop antes).
   O fundo vira uma pílula (corner-radius total) com respiro das
   bordas: cream sólido sobre seção clara, ink a 50% de opacidade +
   borda ink sobre seção escura/foto (sem blur — só a cor, como no
   Figma). Some quando um dropdown abre (o header inteiro já vira
   cream sólido nesse caso, comportamento que já existia) e também no
   Hero e no Footer, por pedido — essas duas seções ficam sem
   container nenhum no menu (classe .no-pill, setada via JS). */
/* Geometria da pílula por breakpoint — medida 1:1 nos frames
   "menu - positivo" de cada largura (1728 / 1440 / 810 / 390).
   As margens laterais são as do Figma. Já o respiro vertical não: nos
   frames de 1440/810 a pílula encosta no topo (top 0 e 1), porque ali
   o frame É só a barra do menu — na página real isso deixava o
   container colado na borda da tela. Então usei o mesmo respiro do
   1728 (8px em cima, ~8 embaixo), ajustando a altura pra fechar a
   conta dentro do header de 77px. */
:root { --pill-top: 8px; --pill-h: 60px; --pill-gap: 24px; }  /* 1728 */
@media (max-width: 1727px) { :root { --pill-top: 8px; --pill-h: 61px; --pill-gap: 20px; } }
@media (max-width: 1023px) { :root { --pill-top: 8px; --pill-h: 61px; --pill-gap: 11px; } }
@media (max-width: 767px)  { :root { --pill-top: 12px; --pill-h: 42px; --pill-gap: 12px; } }

.mofo-nav::before {
  content: '';
  position: absolute;
  /* tamanho do Figma (header 77px): pílula com 60px de altura, 8px de
     respiro no topo, 24px de margem lateral. Quando um dropdown abre,
     é ESTA caixa que cresce pra virar o painel (a altura extra vem da
     var --dd-h, medida em JS) — o dropdown não é mais um painel
     separado passando por trás do header. */
  top: var(--pill-top);
  height: calc(var(--pill-h) + var(--dd-h, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - var(--pill-gap) * 2), 1680px);
  z-index: 1; /* atrás do .nav-inner (2) */
  /* raio = METADE da altura da pílula. Visualmente é idêntico a 999px
     (num box de 60px, 30px já é pílula perfeita), mas evita a
     "engasgada": com 999px o raio real era limitado por altura/2 e
     ia crescendo junto com a caixa, criando um segundo movimento por
     cima do primeiro. Saindo de 30px, o raio só precisa ir até 40px e
     percorre isso com a MESMA duração e curva da altura — um
     movimento só. */
  border-radius: calc(var(--pill-h) / 2);
  border: 1px solid var(--ink);
  background: var(--cream-yellow);
  transition: height .55s cubic-bezier(.22,1,.36,1),
              border-radius .55s cubic-bezier(.22,1,.36,1),
              background-color .3s ease, border-color .3s ease, opacity .2s ease;
  pointer-events: none;
}
.mofo-nav.is-dark::before { background: rgba(66, 66, 60, .5); }
.mofo-nav.no-pill::before { opacity: 0; }
/* dropdown aberto: a pílula vira caixa — fundo sempre cream sólido
   (mesmo no tema escuro) e sempre visível (mesmo nas seções .no-pill).
   ABRINDO: o raio vai pra 40px logo no início (.15s, sem delay), então
   o resto do movimento é só a caixa descendo. */
.mofo-nav:has(.nav-links > li.open)::before,
.mofo-nav.no-pill:has(.nav-links > li.open)::before {
  border-radius: 40px;
  background: var(--cream-yellow);
  opacity: 1;
}

/* Dropdowns — nodes 190:444 / 182:14. O painel NÃO tem fundo próprio nem
   largura de viewport: ele ocupa exatamente a área interna da pílula
   (mesma margem de 24px, mesmo teto de 1680px), e quem desenha o fundo
   e a borda é o ::before do header, que cresce. O conteúdo só aparece
   (fade + leve descida) enquanto a caixa se expande. */
.mofo-nav .dropdown {
  /* FIXED, não absolute: o <li> pai tem position:relative (pro chevron),
     então um absolute se mediria contra o ITEM do menu (~120px de
     largura) em vez do header — era o que espremia o conteúdo numa
     coluna estreita no meio da caixa. Com fixed o bloco de referência
     é a viewport, igual à pílula. */
  position: fixed;
  top: calc(var(--pill-top) + var(--pill-h));
  /* left+right (em vez de width:100vw) porque 100vw inclui a barra de
     rolagem e a pílula não — assim os dois ficam sempre alinhados. Com
     os dois lados fixados, width:auto e max-width, as margens auto
     centralizam o bloco. */
  left: var(--pill-gap);
  right: var(--pill-gap);
  width: auto;
  max-width: 1680px;
  margin: 0 auto;
  z-index: 2; /* mesma camada do .nav-inner — não passa mais por trás dele */
  background: transparent;
  border: none;
  /* RECORTE: o conteúdo fica em tamanho natural aqui dentro e é a
     ALTURA deste bloco que anima (0 → --dd-h, a mesma medida que faz o
     ::before crescer). Com overflow:hidden o conteúdo é revelado de
     cima pra baixo, junto com a caixa — antes ele já aparecia inteiro
     fora da caixa enquanto ela ainda estava crescendo. */
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: height .55s cubic-bezier(.22,1,.36,1), visibility 0s linear .55s;
}
.mofo-nav .nav-links > li.open > .dropdown {
  height: var(--dd-h, auto);
  visibility: visible;
  pointer-events: auto;
  transition: height .55s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
}
/* padding interno alinha o conteúdo com a logo: a logo fica a 52px da
   borda da tela e a caixa começa em 24px, então 28px aqui dentro. O
   padding-top compensa os 9px entre a base da pílula e o antigo topo
   do painel, pra o conteúdo cair na mesma altura de antes. */
.dropdown-inner {
  max-width: none; margin: 0; padding: 41px 28px 44px;
  display: flex; gap: 64px; align-items: flex-start;
  /* o conteúdo tem fade próprio, separado da altura da caixa — é o que
     faz a troca entre "para você" e "para sua empresa" ter transição
     em vez de o conteúdo simplesmente trocar de uma vez */
  opacity: 0;
  transition: opacity .18s ease;
}
.mofo-nav .nav-links > li.open > .dropdown .dropdown-inner {
  opacity: 1;
  /* pequeno atraso: o conteúdo novo entra depois que o anterior sumiu */
  transition: opacity .28s ease .1s;
}
/* Troca entre dois dropdowns já abertos: a altura dos PAINÉIS troca na
   hora (o antigo não precisa encolher e o novo não precisa crescer —
   quem faz o movimento é a caixa, que morfa de uma altura pra outra),
   sobrando só o crossfade do conteúdo. Sem isso via-se um painel
   encolhendo e outro crescendo ao mesmo tempo. */
.mofo-nav.dd-switching .dropdown { transition: none; }
.dropdown-list { display: flex; flex-direction: column; gap: 18px; min-width: 260px; }
.dropdown-list a { color: var(--ink); }
.dropdown-list .item-title {
  display: flex; align-items: center; gap: 10px;
  /* Figma 190:444 / 182:14: 25px Bold, tracking -2% */
  font-size: 25px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; transition: color .12s;
}
.dropdown-list a:hover .item-title { color: var(--coral); }
/* seta: em repouso é uma bolinha com seta cinza discreta bem colada no
   texto; no hover vira bolinha coral com seta branca — a seta é um SVG
   (não mais glifo de texto "→"), stroke-width 2.5, pra ficar
   visivelmente mais espessa nos dois estados (node 208:589 do Figma —
   mesma interação do link "Endereço Fiscal") */
.dropdown-list .item-title::after,
.comparativo-list .item-title::after,
.comparativo-sublist .item-title::after {
  content: '';
  display: inline-flex; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342423C' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
  transform: translateX(3px);
  transition: background-color .15s ease, transform .15s ease, width .15s ease, height .15s ease;
}
.dropdown-list a:hover .item-title::after,
.comparativo-list a:hover .item-title::after,
.comparativo-sublist a:hover .item-title::after {
  background-color: var(--coral);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E");
  width: 29px; height: 29px; background-size: 15px 15px; transform: translateX(0);
}
/* tamanho FIXO em repouso e no hover (só muda cor/ícone de fundo) —
   se o tamanho da bolinha mudasse no hover, a linha inteira mudava de
   altura e todo o submenu "pulava" (o entrelinha parecia mudar).
   O transform (posição) é redeclarado de novo mais abaixo, depois da
   regra genérica do .comparativo-list — aqui só o tamanho mesmo. */
.comparativo-sublist .item-title::after,
.comparativo-sublist a:hover .item-title::after {
  width: 16px; height: 16px; background-size: 10px 10px;
}
.dropdown-list .item-sub { display: block; font-size: 14px; line-height: 1.3; color: #707070; font-weight: 500; margin-top: 0; }
.dropdown-list .submenu-group { font-size: 25px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; color: var(--ink); margin-bottom: 0; }
.dropdown-list--salas { min-width: 250px; gap: 0; }
.dropdown-list--salas a { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; margin-left: 20px; }
/* sub-itens de "salas": 20px Bold, tracking -2% (Figma 190:444) */
.dropdown-list--salas .item-title { font-size: 20px; letter-spacing: -0.4px; line-height: 1.2; }
.dropdown-list--salas .item-sub { display: inline; margin-top: 0; line-height: 1.3; font-size: 14px; }
/* Card da foto = quadradinho de 1 coluna do grid (168px), gap entre os
   dois cards = 1 gutter (40px), acompanhando o espaçamento das colunas.
   Sem moldura interna: contorno de 1px em ink encostado direto na foto. */
.dropdown-cards { display: flex; gap: 40px; margin-left: auto; }
.dropdown-card { display: block; width: 168px; border-radius: 12px; overflow: hidden; }
.dropdown-card .card-photo {
  display: block; width: 168px; height: 168px; border-radius: 12px;
  border: 1px solid var(--ink); overflow: hidden;
}
.dropdown-card .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "para sua empresa" também ganhou 2 fotos lado a lado, igual "para
   você" — as duas usam o mesmo card 377×377, sem versão reduzida. */
/* legenda: 12px, semibold (600), tracking -0.24px, leading normal — ela
   corrigiu no Figma (estava herdando line-height "auto"/1.6 do body,
   por isso ficava enorme; agora é 12px semibold com leading apertado) */
.dropdown-card .card-caption { display: block; font-size: 12px; font-weight: 600; letter-spacing: -0.24px; color: var(--ink); margin-top: 12px; margin-bottom: 10px; line-height: 14px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* "para sua empresa" (dropdown--pj): todos os hovers e o botão ativo
   usam blue em vez de coral. Os demais dropdowns/itens continuam coral. */
.dropdown--pj .dropdown-list a:hover .item-title { color: var(--blue); }
.dropdown--pj .dropdown-list a:hover .item-title::after { background-color: var(--blue); }
/* os sub-itens do grupo "salas" (uso avulso/recorrente/fixo) seguem o
   mesmo blue dos demais itens do "para sua empresa" — herdam da regra
   acima, sem exceção. (A exceção em ink vale só pra tabela do
   comparativo, lá embaixo, que é outro componente.) */
.mofo-nav .nav-links > li:has(.dropdown--pj).open .nav-link.has-dropdown,
.mofo-nav:has(.nav-links > li.open) .nav-links > li:has(.dropdown--pj).open .nav-link.has-dropdown {
  color: var(--blue) !important;
}

/* ================================================================
   RESPONSIVO — Menu / Dropdown / Side Menu (portado do mofo-menu.html)
   Frames do Figma (node 146:2), breakpoints tablet ≤1023, mobile ≤767.
   O tema negativo (is-dark) continua automático: estas regras só mexem
   em tamanho/quebra, as cores invertidas seguem pelo sistema existente.
   ================================================================ */
.lbl-short { display: none; }

/* ---------- DESKTOP 1440 (1024–1727) ----------
   frame "menu - positivo 1440": pílula começa em 20px e a logo em 40px,
   ou seja 20px de respiro interno (no 1728 são 52-24 = 28px). */
@media (max-width: 1727px) and (min-width: 1024px) {
  .mofo-nav .nav-inner { padding: 0 40px; }
}

/* ---------- TABLET (≤1023) ---------- */
@media (max-width: 1023px) {
  /* unidades + cultura saem da barra (ficam no side menu) */
  .mofo-nav .nav-links > li.nav-only-desktop { display: none; }
  /* frame 810: logo a 31px da borda da tela (20 de respiro interno
     a partir da pílula, que começa em 11) */
  .mofo-nav .nav-inner { padding: 0 31px; }
  /* dropdown pode quebrar linha: no "para empresa" os cards descem */
  .dropdown-inner { flex-wrap: wrap; gap: 40px 48px; padding: 28px 24px 36px; }
  .dropdown-cards { margin-left: auto; }
  .mofo-nav:has(.nav-links > li.open)::before { border-radius: 32px; }
}

/* ---------- MOBILE (≤767) ---------- */
@media (max-width: 767px) {
  /* 66px (o frame do Figma tem 50): a barra precisou crescer pra
     comportar a pílula de 42px COM respiro real de 12px em cima e
     embaixo — num header de 50 não sobrava margem nenhuma */
  :root { --header-h: 66px; }

  /* padding interno aumentado (era 16): no frame 390 a logo começa a
     20px da borda da tela e os ícones terminam a 19px */
  .mofo-nav .nav-inner { padding: 0 20px; column-gap: 10px; }
  .mofo-nav .nav-logo { height: 26px; }
  .mofo-nav .nav-logo img { height: 26px; }
  /* raio da caixa aberta: 50 → 25 */
  .mofo-nav:has(.nav-links > li.open)::before { border-radius: 25px; }

  /* troca label completo pelo abreviado */
  .lbl-full { display: none; }
  .lbl-short { display: inline; }

  .mofo-nav .nav-links { gap: 2px; }
  /* 10px no frame 390 (era 13) */
  .mofo-nav .nav-link,
  .mofo-nav .nav-link.has-dropdown { font-size: 10px; padding: 6px 6px; gap: 4px; letter-spacing: -0.2px; }
  .mofo-nav .nav-link .chevron { width: 10px; height: 6px; }

  .mofo-nav .nav-actions { gap: 8px; }
  /* 30px (era 34): com a pílula de 38px os ícones de 34 encostavam nas
     bordas dela — agora sobram 4px de respiro em cima e embaixo */
  .mofo-nav .nav-icon-btn,
  .mofo-nav .nav-icon-btn svg { width: 30px; height: 30px; }

  /* dropdown = coluna única dentro da caixa (que cresce) */
  .dropdown-inner {
    flex-direction: column; flex-wrap: nowrap;
    gap: 22px; padding: 18px 20px 26px;
    max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto;
  }
  .dropdown-list { min-width: 0; gap: 14px; }
  .dropdown-list .item-title { font-size: 20px; letter-spacing: -0.4px; }
  /* "salas" (título do grupo) no mesmo tamanho dos títulos tipo "endereço fiscal" */
  .dropdown-list .submenu-group { font-size: 20px; letter-spacing: -0.4px; }
  /* subitens de salas mais juntinhos */
  .dropdown-list--salas { min-width: 0; gap: 6px; }
  .dropdown-list--salas a { margin-bottom: 0; }
  .dropdown-list--salas .item-title { font-size: 17px; }

  /* 2 fotos lado a lado, largura total */
  .dropdown-cards { margin-left: 0; width: 100%; gap: 14px; }
  .dropdown-cards .dropdown-card { flex: 1 1 0; width: auto; }
  .dropdown-card .card-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; }

  /* side menu ocupa a tela toda */
  .drawer { width: 100vw; max-width: 100vw; border: none; border-radius: 0; }
}

/* Floating CTA — removido por hora (a pedido da Angélica, 27/07).
   Regra mantida comentada caso volte a ser usado depois.
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  background: var(--cream-yellow);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-dropdown);
  border: 1.5px solid var(--ink);
}
.floating-cta:hover { background: #fff; }
*/

/* Side menu (☰) — node 225:857 (atualizado). Container ocupa 100% da
   altura da página, sem scroll — as linhas e zonas usam flex-grow
   proporcional às medidas do Figma (base 1080px) pra sempre caber
   inteiro. Divisórias de ponta a ponta, encostando na borda do
   container (sem margem lateral nas bordas da caixa). */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: all .2s; z-index: 200; }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0;
  /* largura fluida: 25–30% da tela / 2–3 colunas do grid (medido no
     Figma: 533px num canvas de 1728px = 30.8%) */
  width: clamp(420px, 30vw, 534px);
  max-width: 100vw;
  height: 100vh;
  background: var(--cream-yellow);
  border: 1px solid var(--ink);
  border-right: none;
  border-radius: 15px 0 0 15px;
  z-index: 201;
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 21px 26px 0; }
.drawer-head .drawer-logo img { height: 35.1px; display: block; } /* -10% dos 39px originais */
.drawer-close { width: 42px; height: 42px; background: transparent; border: none; padding: 0; cursor: pointer; }
.drawer-close img { width: 42px; height: 42px; display: block; }
/* Os dois badges (serviços/institucional) ficam colados 17px acima da
   divisória de baixo, não centralizados — o espaço sobrando vai sempre
   pra cima (align-items: flex-end). */
.drawer-badge-zone { flex: 0 0 auto; display: flex; align-items: flex-end; padding: 14.7px 26px 17.85px; border-bottom: 1px solid var(--ink); } /* padding topo/base +5% (14→14.7 / 17→17.85) */
.drawer-badge-zone--flex { flex: 2.33 1 0; padding-top: 0; }
.drawer-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #444; border-radius: var(--radius-pill);
  padding: 7px 14px 7px 10px; font-size: 10px; line-height: 1.2; font-weight: 600;
  letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink);
}
.drawer-badge .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.drawer-badge.serv .dot { background: var(--coral); }
.drawer-badge.inst .dot { background: var(--blue); }
/* Proporções recalculadas no node 225:857 atualizado: no canvas de
   1080px cada linha simples (título+sub, sem subitens) mede 54px —
   essa é a unidade-base (flex:1). Daí: sala de reunião (com subitens)
   =96px=1.78un, zona do badge institucional =126px=2.33un, espaçador
   final =158px=2.93un. Tudo isso soma exatamente 920px (1080 menos os
   160px fixos do header+badge serviços), então escala 100% fluido em
   qualquer altura de tela sem cortar nem sobrar espaço. */
/* Salvaguarda: em telas mais baixas (janela do navegador com pouca
   altura livre depois da barra de endereço/abas), 20 unidades de
   54px em cima de um viewport curto ficavam menores que o próprio
   texto — daí título e subtítulo colavam um no outro. Com min-height
   cada linha nunca fica menor que o conteúdo precisa; se ainda assim
   não couber tudo, .drawer-rows rola por dentro (em vez de
   sobrepor texto) — em telas normais isso nunca é acionado. */
.drawer-rows { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.drawer-row {
  flex: 1 1 0;
  min-height: 46px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8px 26px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  transition: background-color .15s ease;
}
/* padding vertical maior (18px em vez do 8px herdado) + min-height
   maior pra caber: só empurrar pra baixo (padding-top) sem dar mais
   espaço fez "uso recorrente" bater na linha de baixo — agora tem
   respiro simétrico nas duas bordas */
.drawer-row--group { flex: 1.78 1 0; min-height: 104px; padding-top: 18px; padding-bottom: 18px; }
.drawer-row .item-group { display: block; color: var(--ink); }
.drawer-row .item-title { font-size: 16px; line-height: 1.15; font-weight: 700; color: var(--ink); letter-spacing: -0.32px; display: block; transition: color .15s ease; }
.drawer-row .item-sub { font-size: 10px; line-height: 1.3; color: var(--ink-light); margin-top: 2px; display: block; transition: color .15s ease; }
.drawer-row .item-group + .item-group { margin-top: 10px; }
/* entrelinha no "normal" e sem padding extra no li — o espaçamento
   grande de antes era o li padding somado a um line-height solto */
.drawer-subitems { list-style: none; margin-top: 6px; padding-left: 47px; }
.drawer-subitems li { padding: 0; }
/* já eram links de verdade (href próprio pra uso avulso/recorrente),
   só faltava deixar claro que são clicáveis: mais área de toque
   (padding vertical) e sublinhado no hover, sem depender só da cor
   herdada do hover da linha inteira */
.drawer-subitems a { display: block; padding: 3px 0; font-size: 14px; line-height: normal; font-weight: 700; letter-spacing: -0.42px; color: var(--ink); text-decoration: none; transition: color .15s ease; }
/* hover: linha vira coral, título e descrição ficam brancos, e os
   subitens (uso avulso/recorrente) ficam em gray-100 pra manter a
   hierarquia visual */
.drawer-row:hover { background: var(--coral); }
.drawer-row:hover .item-title,
.drawer-row:hover .item-sub { color: #fff; }
.drawer-row:hover .drawer-subitems a { color: #F5F5F5; }
/* mas o hover do subitem em si (uso avulso/recorrente) vira ink, sem
   sublinhado — precisa ser mais específico que a regra acima pra
   ganhar dela */
.drawer-row:hover .drawer-subitems a:hover { color: var(--ink); text-decoration: none; }
/* espaçador final agora com os ícones sociais grudados na base (node
   282:112 do Figma) — mesmos links do footer, mas aqui a cor é ink
   em repouso e coral no hover (lá no footer é branco/ink) */
.drawer-spacer { flex: 2.93 1 0; display: flex; align-items: flex-end; padding-bottom: 24px; }
.drawer-social { display: flex; gap: 20px; padding: 0 26px; }
.drawer-social-icon { position: relative; display: block; width: 22px; height: 22px; }
.drawer-social-icon img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .15s; }
.drawer-social-icon img.is-hover { opacity: 0; }
.drawer-social-icon:hover img.is-base { opacity: 0; }
.drawer-social-icon:hover img.is-hover { opacity: 1; }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%;
  object-fit: cover; object-position: center 30%; will-change: transform;
  /* 120%/-10% dão folga pro parallax (JS, translateY no scroll) sem
     mostrar borda */
}
/* foco da foto de fundo muda por breakpoint — no Figma o crop não é
   centralizado, ele se desloca pra manter a pessoa/laptop enquadrados
   conforme a proporção da tela estreita. Valores extraídos direto do
   imageTransform de cada frame (Mobile 390 / Tablet 810). */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-bg img { object-position: 12.7% 50%; }
}
@media (max-width: 767px) {
  .hero-bg img { object-position: 13.7% center; }
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,12,.15) 0%, rgba(20,18,12,.10) 45%, rgba(20,18,12,.55) 100%);
}
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 28px 72px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .03em; text-transform: capitalize; color: var(--ink);
  background: #fff; border: 1px solid var(--ink-light); padding: 7px 14px 7px 10px; border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.hero-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }
.hero h1 {
  font-size: clamp(55px, 36px + 4.9vw, 120px);
  line-height: .975; /* 117px no tamanho máximo de 120px, igual ao H1 do Figma */
  letter-spacing: -0.025em; /* -3px no tamanho máximo, igual ao H1 do Figma */
  font-weight: 600;
  max-width: 1240px;
}
.hero h1 .w-light { font-weight: 300; }
.hero h1 .w-medium { font-weight: 500; }
.hero h1 .w-semibold { font-weight: 600; }
.hero h1 .w-bold { font-weight: 700; }
.hero h1 .w-black { font-weight: 900; }

/* ============================================================
   TEXTO VARIÁVEL ANIMADO (.vw-word / .vw-letter)
   Estilo reutilizável — não é exclusivo do hero. Onda que percorre
   a palavra letra a letra (claro/estreito → encorpado/largo →
   claro/estreito de novo), usando dois eixos variáveis da fonte:
   font-weight (eixo "wght") e font-stretch (eixo "wdth" — é o jeito
   padrão do CSS de mexer na largura de uma variable font). Cai bem
   em qualquer fallback do stack mesmo sem os dois eixos disponíveis.
   Referência: variable.mp4.

   Como usar em qualquer lugar do site:
   <span class="vw-word">
     <span class="vw-letter" style="--i:0">c</span><span class="vw-letter" style="--i:1">h</span>...
   </span>
   Cada letra precisa do seu próprio <span class="vw-letter" style="--i:N">
   (N = posição da letra, começando em 0) — é o --i que cria o
   efeito de onda viajando de uma letra pra outra via animation-delay.

   Ajustes disponíveis via CSS custom properties no .vw-word (ou
   inline no elemento):
   --vw-min          peso mais claro do ciclo (padrão 300)
   --vw-max          peso mais encorpado do ciclo (padrão 900)
   --vw-width-min    largura mais estreita do ciclo (padrão 85%)
   --vw-width-max    largura mais larga do ciclo (padrão 120%)
   --vw-duration     duração de 1 ciclo completo (padrão 2.1s)
   --vw-stagger      defasagem entre uma letra e a próxima (padrão .09s)
   ============================================================ */
@keyframes vw-wave {
  0%, 100% { font-weight: var(--vw-min, 300); font-stretch: var(--vw-width-min, 85%); }
  50% { font-weight: var(--vw-max, 900); font-stretch: var(--vw-width-max, 120%); }
}
.vw-word { display: inline; white-space: nowrap; }
.vw-letter {
  display: inline-block;
  animation: vw-wave var(--vw-duration, 2.1s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * var(--vw-stagger, .09s));
}
@media (prefers-reduced-motion: reduce) {
  .vw-letter { animation: none; font-weight: 600; font-stretch: 100%; }
}
.hero .sub {
  /* estilo "olho-foto" do Figma, nessa instância: 25px, peso 400, entrelinha 36px */
  font-size: clamp(16px, 12.5px + 0.87vw, 25px);
  font-weight: 400;
  max-width: 900px;
  margin-top: 24px;
  line-height: 1.44;
  color: #fff;
}

/* ================================================================
   ESCALA TIPOGRÁFICA — estilos de texto do Figma (node 205:49,
   atualizado por ela). Tamanho / entrelinha / tracking / peso de
   cada estilo nomeado, extraídos direto das instâncias reais da
   página (não do valor "base" do estilo, que às vezes difere um
   pouco do que é usado de fato). Todos com font-size fluido via
   clamp() pra não quebrar em telas menores — o valor entre
   parênteses é o tamanho máximo (desktop), igual ao Figma.

   .h1            120px · lh 117px (.975)  · tracking -2.5% · peso 600
   .h2             85px · lh 106.2px(1.249)· tracking -2.08px· peso 600
   .h3             70px · lh 86.2px (1.231)· tracking -2.08px· peso 600
   .h4             35px · lh normal        · tracking -2%    · peso 600
   .h5-bold        20px · lh 21.333px(1.067)· tracking 0     · peso 700
   .body           16px · lh 26px (1.625)  · tracking 0      · peso 300
   .eyebrow-photo  26px · lh 36px (1.385)  · tracking 0      · peso 300 (era "olho-foto", texto claro sobre foto)
   .timeline-date  12px · Courier New      · tracking .36px  · peso 700 · uppercase
   .btn-label      16px · lh normal        · tracking 0      · peso 600
   ================================================================ */
.h1 { font-size: clamp(55px, 36px + 4.9vw, 120px); line-height: .975; letter-spacing: -0.025em; font-weight: 600; }
.h2 { font-size: clamp(35px, 20px + 3.8vw, 75px); line-height: 1.2; letter-spacing: -2.08px; font-weight: 600; }
.h3 { font-size: clamp(35px, 22px + 3.3vw, 70px); line-height: 1.231; letter-spacing: -2.08px; font-weight: 600; }
.h4 { font-size: clamp(20px, 8px + 1.7vw, 35px); line-height: normal; letter-spacing: -0.02em; font-weight: 600; }
.h5-bold { font-size: 20px; line-height: 1.067; letter-spacing: 0; font-weight: 700; }
.body-text { font-size: 16px; line-height: 1.625; letter-spacing: 0; font-weight: 400; }
.eyebrow-photo { font-size: clamp(16px, 12px + 0.9vw, 26px); line-height: 1.385; letter-spacing: 0; font-weight: 300; }
.timeline-date { font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: 0.36px; font-weight: 700; text-transform: uppercase; }
.btn-label { font-size: 16px; line-height: normal; letter-spacing: 0; font-weight: 600; }

/* ================================================================
   BOTÕES — botão cheio (coral) e outline, reaproveitados em várias
   seções (sobre, stats, comparativo etc.)
   ================================================================ */
.btn-fill, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  /* varredura 27/07: altura 65→58, padding lateral 28→50 (medido nas
     instâncias reais — texto sempre 50px do início/fim do botão),
     fonte 16→14, todos 1:1 com as instâncias atuais do Figma */
  height: 58px; padding: 14px 50px; border-radius: 8px;
  font-size: 14px; font-weight: 600; line-height: normal;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  text-transform: lowercase; /* pedido: texto de botão sempre em caixa baixa */
  transition: background-color .15s ease, color .15s ease;
}
.btn-fill { background: var(--coral); color: #fff; border: none; }
.btn-fill:hover { background: var(--ink); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ================================================================
   SOBRE — node 208:585 · "mofo workspaces / coworking, cultura e
   lazer" — texto à esquerda, foto grande arredondada à direita.
   ================================================================ */
.sobre { padding: 100px 52px; background: var(--cream-yellow); }
.sobre-inner {
  /* 50/50 exato — a foto ocupa metade da página, igual ao Figma
     (foto começa bem perto do centro do canvas: 890px de 1728px) */
  max-width: 1728px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.sobre-heading { position: relative; }
.sobre-heading-row { display: inline-flex; align-items: flex-start; }
.sobre-heading .mofo-mascot {
  /* no Figma o mascote tem 107px de altura ao lado do "mofo" de
     85px — proporção de 1.26× o tamanho da fonte. Em em/height
     ele escala junto com o clamp() do .h2, em qualquer tela. */
  height: 1.26em; width: auto; margin-left: .06em; margin-top: -.2em;
}
/* o texto fica SEMPRE centrado verticalmente em relação ao vídeo.
   Precisa ser no próprio item porque no tablet o grid usa
   align-items:stretch (pro vídeo preencher a altura da linha) — sem
   isto o texto ficava grudado no topo enquanto o vídeo descia. */
.sobre-text { align-self: center; }
.sobre-text .h2 { margin: 0; }
.sobre-text .h4 { margin: 16px 0 0; }
.sobre-text .body-text { margin: 20px 0 0; max-width: 480px; color: var(--ink); }
.sobre-text .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.sobre-photo {
  /* 4:5 (era 8:9). As legendas do vídeo ficam a ~80% da altura dele;
     no formato antigo o corte de cima/baixo passava raspando nelas.
     Em 4:5 sobra folga confortável e o bloco não fica alto demais. */
  border-radius: 25px; border: 1px solid var(--ink); overflow: hidden;
  aspect-ratio: 4 / 5; width: 100%;
  position: relative; /* âncora dos controles */
}
.sobre-photo img,
.sobre-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----------------------------------------------------------------
   BOTÃO "ATIVE O SOM" — node 415:244
   Círculo cream de 138px centrado no vídeo, ícone de volume por cima
   e o rótulo embaixo. Some de vez depois que o som é ligado.
   O vídeo entra mudo (exigência dos navegadores pra poder dar play
   sozinho) — o clique aqui é o gesto do usuário que libera o áudio.
   ---------------------------------------------------------------- */
.sobre-video-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 138px; height: 138px; border-radius: 50%;
  background: var(--cream-yellow); color: var(--ink);
  border: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  font-family: inherit;
  box-shadow: 0 4px 20px rgba(66,66,60,.18);
  transition: opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.sobre-video-btn:hover { background: #fff; }
.sobre-video-btn svg { width: 62px; height: 62px; display: block; }
.sobre-video-btn .lbl {
  font-size: 12px; font-weight: 800; letter-spacing: -0.05em;
  text-transform: uppercase; line-height: 1;
}
/* estado "som ligado": o botão grande sai de cena e dá lugar aos
   controles pequenos no canto */
.sobre-photo.som-on .sobre-video-btn {
  opacity: 0; transform: translate(-50%, -50%) scale(.85); pointer-events: none;
}

/* ---- barra de tempo (arrastável) ---- */
.sobre-video-bar {
  position: absolute; left: 20px; right: 20px; bottom: 74px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease .1s, transform .25s ease .1s;
}
.sobre-photo.som-on .sobre-video-bar { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* range nativo (arrasta e clica de graça, e é acessível por teclado),
   só re-skinado pra parecer a barra do Figma */
.sobre-video-bar input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer; display: block; margin: 0;
}
.sobre-video-bar input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 99px;
  background: linear-gradient(to right, var(--cream-yellow) var(--prog,0%), rgba(255,254,239,.35) var(--prog,0%));
}
.sobre-video-bar input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 99px; background: rgba(255,254,239,.35);
}
.sobre-video-bar input[type="range"]::-moz-range-progress {
  height: 5px; border-radius: 99px; background: var(--cream-yellow);
}
.sobre-video-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%; margin-top: -4.5px;
  background: var(--cream-yellow); border: 1px solid var(--ink);
  box-shadow: 0 1px 4px rgba(66,66,60,.35);
}
.sobre-video-bar input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink);
  background: var(--cream-yellow); box-shadow: 0 1px 4px rgba(66,66,60,.35);
}
.sobre-video-bar .tempo {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 600; color: #fff; margin-top: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  font-variant-numeric: tabular-nums;
}

/* ---- controles permanentes (play/pause + som) ---- */
.sobre-video-controls {
  position: absolute; right: 20px; bottom: 20px;
  display: flex; gap: 10px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease .1s, transform .25s ease .1s;
}
.sobre-photo.som-on .sobre-video-controls { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sobre-video-controls button {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream-yellow); color: var(--ink);
  border: 1px solid var(--ink); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(66,66,60,.2);
  transition: background-color .15s ease, transform .15s ease;
}
.sobre-video-controls button:hover { background: #fff; transform: translateY(-1px); }
.sobre-video-controls svg { width: 20px; height: 20px; }
/* Um ícone por vez, mostrando sempre a AÇÃO do clique (não o estado):
   rodando → ícone de pausa; pausado → ícone de play.
   Com som → ícone de mudo; mudo → ícone de som.
   (o "display" fica só aqui; tirei do seletor de tamanho acima porque
   ele era mais específico e mantinha os dois ícones visíveis) */
.sobre-video-controls .ico-pause { display: block; }
.sobre-video-controls .ico-play  { display: none; }
.sobre-photo.is-paused .sobre-video-controls .ico-pause { display: none; }
.sobre-photo.is-paused .sobre-video-controls .ico-play  { display: block; }

.sobre-video-controls .ico-mudo { display: block; }
.sobre-video-controls .ico-som  { display: none; }
.sobre-photo.is-muted .sobre-video-controls .ico-mudo { display: none; }
.sobre-photo.is-muted .sobre-video-controls .ico-som  { display: block; }
@media (max-width: 767px) {
  .sobre-video-controls { right: 14px; bottom: 14px; gap: 8px; }
  .sobre-video-controls button { width: 38px; height: 38px; }
  .sobre-video-controls svg { width: 17px; height: 17px; }
  .sobre-video-bar { left: 14px; right: 14px; bottom: 62px; }
  .sobre-video-bar .tempo { font-size: 10px; }
}
@media (max-width: 1023px) {
  .sobre-video-btn { width: 118px; height: 118px; gap: 5px; }
  .sobre-video-btn svg { width: 52px; height: 52px; }
  .sobre-video-btn .lbl { font-size: 11px; }
}
@media (max-width: 767px) {
  .sobre-video-btn { width: 100px; height: 100px; gap: 4px; }
  .sobre-video-btn svg { width: 44px; height: 44px; }
  .sobre-video-btn .lbl { font-size: 10px; }
}
/* TABLET (≤1023): mantém 2 colunas, foto preenche a altura da coluna */
@media (max-width: 1023px) {
  .sobre { padding: 64px 40px; }
  /* volta pro centro: com o vídeo em 4:5 fixo não faz mais sentido
     esticar a coluna (o esticar era pra foto preencher a altura) */
  .sobre-inner { gap: 40px; align-items: center; }
  .sobre-photo { aspect-ratio: 4 / 5; height: auto; min-height: 0; }
}
/* MOBILE (≤767): empilha — texto em cima, foto full-width embaixo */
@media (max-width: 767px) {
  .sobre { padding: 48px 20px; }
  .sobre-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  /* 9:16 no mobile: o vídeo é vertical, então nessa proporção ele
     aparece quase inteiro, sem cortar em cima e embaixo */
  .sobre-photo { aspect-ratio: 9 / 16; height: auto; min-height: 0; }
}

/* ================================================================
   STATS — node 208:584 · bento grid com números/prova social do Mofo.
   Card alto (porta) à esquerda ocupando as duas linhas; à direita,
   duas linhas com proporções diferentes (30/70 em cima, ~50/50 embaixo)
   — é o jeito "bento" mesmo, cada linha com sua própria divisão.
   ================================================================ */
.stats { padding: 40px 52px 100px; background: var(--cream-yellow); }
.stats-grid { max-width: 1728px; margin: 0 auto; display: flex; gap: 40px; align-items: stretch; }
.stats-card {
  background: #fff; border: 1px solid var(--ink); border-radius: 25px;
  position: relative; overflow: hidden; padding: 32px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.stats-card--tall { flex: 0 0 clamp(260px, 21.8vw, 377px); }
.stats-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.stats-row { display: flex; gap: 40px; }
.stats-row .stats-card { flex: 1; min-height: 260px; }
.stats-row--top .stats-card:first-child { flex: 0 0 31%; }
.stats-row--top .stats-card:last-child { flex: 1; }

/* tamanhos atualizados conforme node 208:584 (2ª revisão): labels
   caíram de 35px pra 30px, quote de 50px pra 45px. Número "3" e os
   demais números mantêm 90/128px medium. */
.stats-num { position: relative; z-index: 2; font-size: clamp(48px, 5.2vw, 90px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); line-height: normal; }
.stats-label { position: relative; z-index: 2; font-size: clamp(18px, 1.8vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.167; color: var(--ink); margin-top: 4px; }

.stats-card--tall .stats-num { font-size: clamp(64px, 7.4vw, 128px); letter-spacing: -0.02em; }
.stats-card--tall .stats-label { font-size: clamp(18px, 1.8vw, 30px); font-weight: 600; line-height: 1.167; margin-top: 8px; }

/* porta: 215x301 dentro do card 377x752, não centralizada — 36.9% da
   esquerda, 3.1% do topo (medido no Figma, node 225:858) */
.stats-door {
  position: absolute; top: 3.1%; left: 36.9%;
  width: 57%; border-radius: 12px; overflow: hidden;
  z-index: 2;
}
.stats-door img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* grafismos reais (arquivos da Angélica) — já vêm com a curva certa,
   sem precisar de rotate via CSS */
.stats-blob-teal {
  position: absolute; left: 18%; top: 32%; width: 30%; max-width: 113px; z-index: 1;
}
.stats-blob-pink {
  position: absolute; right: 8.75%; bottom: 5.3%; width: 25.2%; max-width: 95px; z-index: 0;
}

/* colagem: 319x274 dentro do card 800x356 — não cobre a altura toda,
   fica no topo-direita (node 240:974) */
.stats-collage {
  position: absolute; top: 3.4%; right: 1.5%; width: 39.9%; height: 77%;
  pointer-events: none; overflow: hidden;
}
.stats-collage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* avatares: posições reais medidas no Figma (não são um stack simétrico) */
.stats-avatars { position: absolute; inset: 0; pointer-events: none; }
.stats-avatars img {
  position: absolute; width: 15.3%; aspect-ratio: 1; border-radius: 50%;
  border: 4px solid var(--cream-yellow); object-fit: cover;
}
.stats-avatars img:nth-child(1) { left: 50.2%; top: 13.4%; }
.stats-avatars img:nth-child(2) { left: 64.1%; top: 13.4%; }
.stats-avatars img:nth-child(3) { left: 77.8%; top: 12.6%; z-index: 1; }
.stats-stars { position: absolute; left: 62.2%; top: 44.4%; width: 31.1%; }

.stats-quote {
  font-size: clamp(22px, 2.7vw, 45px); font-weight: 500; letter-spacing: -0.04em;
  line-height: 1.111; text-align: center; color: var(--ink); margin: auto 0;
}
.stats-quote em { font-style: italic; font-weight: 500; text-decoration: underline; text-decoration-skip-ink: none; }
.stats-quote-card { justify-content: center; }

/* TABLET + DESKTOP ESTREITO (768–1199): mantém o bento, só encolhe.
   Vai até 1199 (não 1023) porque entre 1024–1200 os boxes ficam
   estreitos demais pro tamanho cheio de desktop — aqui fica compacto. */
@media (min-width: 768px) and (max-width: 1199px) {
  .stats { padding: 32px 40px 64px; }
  .stats-grid { gap: 20px; }
  .stats-card--tall { flex: 0 0 22%; }
  .stats-right { gap: 20px; }
  .stats-row { gap: 20px; }
  .stats-row .stats-card { min-height: 172px; }
  .stats-card { padding: 22px; }
}
/* MOBILE (≤767): bento reorganizado — achata os wrappers (display:contents)
   e usa grid-areas. Card alto à esquerda (2 linhas), 2016 e +370
   empilhados à direita, depois 2.200+ e a citação em largura cheia. */
@media (max-width: 767px) {
  .stats { padding: 24px 20px 56px; }
  .stats-grid {
    display: grid; gap: 14px;
    grid-template-columns: 1fr 1.55fr;
    grid-template-areas:
      "tall  year"
      "tall  rating"
      "emp   emp"
      "quote quote";
  }
  .stats-right, .stats-row { display: contents; }
  .stats-card--tall { grid-area: tall; flex: initial; }
  .stats-card--year { grid-area: year; }
  .stats-card--rating { grid-area: rating; }
  .stats-card--emp { grid-area: emp; }
  .stats-quote-card { grid-area: quote; }
  .stats-card, .stats-row .stats-card { min-height: 0; padding: 18px 20px; border-radius: 16px; }
  /* colagem do 2.200+ inteira dentro do card, sem cortar */
  .stats-collage { top: 8%; right: 3%; width: 46%; height: 82%; }
  .stats-collage img { object-fit: contain; object-position: right center; }
  /* avatares mais juntos (empilhados) e borda fina, sem invadir o texto */
  .stats-avatars img { border-width: 2px; width: 17%; }
  .stats-avatars img:nth-child(1) { left: 54%; top: 7%; }
  .stats-avatars img:nth-child(2) { left: 65%; top: 7%; }
  .stats-avatars img:nth-child(3) { left: 76%; top: 6%; }
}

/* ================================================================
   UNIDADES — node 208:587 · data-nav-theme="dark" (fotos escuras,
   precisa nav claro/branco em cima)

   Comportamento replicado do b-showcase do gethapply.com (inspecionado
   via devtools: track alto position:relative → janela sticky de 1
   viewport → itens empilhados absolute dentro dela, cobrindo um ao
   outro por z-index). Track = 3 viewports de altura (um por unidade),
   janela gruda no topo o tempo todo, e um JS pequeno (final do arquivo)
   troca o z-index do item ativo conforme o scroll passa por cada terço
   do track — sem isso o "sticky" sozinho não segura nada, porque cada
   item ocuparia exatamente sua própria altura no fluxo (zero folga pra
   grudar).
   ================================================================ */
.unidades-head { padding: 100px 52px 64px; background: var(--cream-yellow); text-align: center; }

/* ----------------------------------------------------------------
   SUBTÍTULO EM PILL — nodes 424:276 (unidades) e 424:291 (depoimentos)
   Cápsula branca, contorno 1px, ícone colorido à esquerda e texto
   11px semibold em caixa alta com tracking de 3%.
   ---------------------------------------------------------------- */
.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 30px;
  background: #fff; border: 1px solid #444;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink); line-height: 14px;
  white-space: nowrap;
}
.pill-eyebrow svg { display: block; flex-shrink: 0; height: 14px; width: auto; }
@media (max-width: 767px) {
  .pill-eyebrow { font-size: 9px; padding: 6px 11px; gap: 6px; }
  .pill-eyebrow svg { height: 12px; }
}
.unidades-head .h2 { margin: 0 auto; max-width: 1000px; }
.unidades-head .body-text-lg {
  font-size: clamp(16px, 12.5px + 0.87vw, 25px); font-weight: 458; line-height: 1.44;
  color: var(--ink); max-width: 1073px; margin: 20px auto 0;
}

.unidades-track { position: relative; height: 300vh; } /* 3 unidades x 100vh */
.unidades-pin { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; }
.unidade-item {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 40px) 52px 6%;
  will-change: transform;
  /* posição de repouso é setada via JS a cada scroll (translateY),
     por isso não tem transition aqui — é 1:1 com o scroll, uma
     transition ia deixar "chicote" no movimento */
}
/* item 1 sempre embaixo da pilha, os seguintes vão cobrindo por
   cima (z-index crescente); quem controla se aparece ou não é o
   translateY, setado via JS conforme o scroll passa pelo terço
   do track que pertence a cada unidade */
.unidade-item:nth-child(1) { z-index: 1; }
.unidade-item:nth-child(2) { z-index: 2; }
.unidade-item:nth-child(3) { z-index: 3; }
.unidade-item::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  /* sombra plana e homogênea (40% ink) em vez do degradê direcional
     antigo — escurece a foto inteira por igual, não só cantos/bordas */
  background: rgba(66, 66, 60, .4);
}
.unidade-item img.unidade-bg {
  position: absolute; top: -8%; left: 0; width: 100%; height: 122%; object-fit: cover; z-index: -1;
  will-change: transform;
  /* folga assimétrica: 8% em cima, 14% embaixo — o parallax (JS) só
     sobe a foto (translateY negativo), então a folga extra tem que
     estar toda embaixo pra nunca abrir uma barra preta ali, mesmo
     na última unidade (Portal), que fica parada no dwell máximo por
     mais tempo de scroll que as outras duas. */
}
.unidade-item > * { position: relative; z-index: 1; }

/* linha vertical: do número do slide (topo) até a base do texto —
   elemento próprio, não mais um border do bloco de baixo, porque
   antes ela só cobria a altura do bloco inferior */
.unidade-divider {
  position: absolute; top: calc(var(--header-h) + 40px); bottom: 6%; right: 27%;
  width: 1px; background: rgba(255,255,255,.5); z-index: 1;
}

.unidade-top-row, .unidade-bottom-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.unidade-title {
  font-weight: 600; letter-spacing: -2.08px; line-height: 1; color: #fff; margin: 0;
}
.unidade-title .line1 { display: block; font-size: clamp(30px, 3.6vw, 70px); }
.unidade-title .line2 { display: block; font-size: clamp(32px, 3.9vw, 75px); }

.unidade-count {
  font-weight: 400; letter-spacing: -2.08px; white-space: nowrap; flex-shrink: 0;
  font-size: clamp(30px, 3.9vw, 75px); color: #fff;
}
.unidade-count span { font-size: 0.43em; font-weight: 500; color: #c7c7c7; }

.unidade-bottom-row { align-items: flex-end; }
.unidade-left-bottom { max-width: 620px; }
.unidade-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #444; border-radius: 30px;
  padding: 7px 14px; margin-bottom: 20px;
}
/* ícone da unidade (casa / xícara / escola). Mesmo truque de contorno
   externo das pills: traço de 2px desenhado ATRÁS do preenchimento,
   sobrando 1px pra fora. */
.unidade-badge svg { display: block; flex-shrink: 0; height: 15px; width: auto; }
.unidade-badge span { font-size: 12px; font-weight: 600; letter-spacing: .36px; color: var(--ink); white-space: nowrap; }
.unidade-sub { font-size: clamp(16px, 12.5px + 0.87vw, 25px); font-weight: 458; line-height: 1.44; margin: 0; }

.unidade-right-bottom {
  max-width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding-left: 56px; justify-content: flex-end;
}
.unidade-desc { font-size: 16px; font-weight: 700; line-height: 1.625; margin: 0; }
.unidade-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 58px; padding: 14px 50px; border-radius: 8px;
  background: #f2f0d2; border: 2px solid var(--ink); color: var(--ink);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  text-transform: lowercase;
  transition: background-color .15s ease, color .15s ease;
}
.unidade-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* TABLET + MOBILE (≤1023): desliga o pin/scroll-travado e empilha as 3
   unidades como cards de tela cheia (uma tela cada), sem sobreposição.
   O JS updateUnidadesStack também trava abaixo de 1024. */
@media (max-width: 1023px) {
  .unidades-track { height: auto; }
  .unidades-pin { position: static; height: auto; min-height: 0; overflow: visible; }
  .unidade-item { position: relative; inset: auto; height: 100vh; min-height: 560px; transform: none !important; }
  .unidade-item img.unidade-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none !important; }
  .unidade-divider { display: none; }
}
/* TABLET (768–1023): foco de cada foto, igual ao crop de cada frame
   no Figma — não é centralizado, cada unidade tem um deslocamento
   próprio pra manter o assunto da foto enquadrado. */
@media (min-width: 768px) and (max-width: 1023px) {
  .unidade-bg[src*="unidade-casa"] { object-position: 11.6% 50%; }
  .unidade-bg[src*="unidade-galpao"] { object-position: 3% center; }
  .unidade-bg[src*="unidade-portal"] { object-position: 12.5% 50%; }
}
/* MOBILE (≤767): empilha o bottom-row */
@media (max-width: 767px) {
  .unidade-item { padding: 80px 20px 32px; }
  .unidade-top-row { gap: 16px; }
  .unidade-bottom-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .unidade-right-bottom { border-left: none; padding-left: 0; max-width: 100%; }
  .unidade-divider { display: none; }
  /* mesma lógica de foco por foto, valores do frame Mobile (390) */
  .unidade-bg[src*="unidade-casa"] { object-position: 9.5% center; }
  .unidade-bg[src*="unidade-galpao"] { object-position: 9.5% center; }
  .unidade-bg[src*="unidade-portal"] { object-position: 11.1% center; }
}

/* ================================================================
   EMPRESAS — node 205:188 · carrossel de logos infinito, mesma
   técnica clássica de marquee: track com o conjunto de logos
   duplicado 2x, translateX 0→-50% em loop linear (looping perfeito
   porque as duas metades são idênticas), com fade nas bordas e
   pausa no hover.
   ================================================================ */
.empresas { padding: 100px 52px; background: var(--cream-yellow); }
.empresas-card {
  max-width: 1728px; margin: 0 auto; background: var(--mint);
  border-radius: 25px; padding: 0 52px 48px; text-align: center;
}
/* bloco de texto+CTAs com folga generosa em cima/embaixo, pra área
   verde-água ficar quase full height, igual ao Figma (o card lá tem
   quase 1000px de altura, bem mais respiro que só os itens pedem) */
.empresas-intro { padding: clamp(76px, 11.4vw, 152px) 0 clamp(45px, 6.46vw, 90px); }
.empresas-card .h3 { max-width: 900px; margin: 0 auto; color: var(--ink); }
/* varredura 27/07: o botão "falar no whatsapp" aqui dentro usa o mesmo
   cream fosco (#f2f0d2) do botão das unidades, não o cream-yellow
   padrão — contrasta melhor em cima do card mint */
.empresas-card .btn-fill-cream { background: #f2f0d2; }
.empresas-lead {
  font-size: 16px; font-weight: 700; line-height: 1.625; color: var(--ink);
  max-width: 660px; margin: 24px auto 0;
}
.empresas-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.btn-fill-ink { background: var(--ink); color: #fff; border: none; }
.btn-fill-ink:hover { background: var(--coral); }
.btn-fill-cream { background: var(--cream-yellow); color: var(--ink); border: 1.5px solid var(--ink); }
.btn-fill-cream:hover { background: var(--ink); color: #fff; }

.logos-strip {
  position: relative; overflow: hidden; margin-top: 20px;
  border-radius: 12px; padding: 28px 0;
}
.logos-strip::before, .logos-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.logos-strip::before { left: 0; background: linear-gradient(to right, var(--mint), rgba(141,211,219,0)); }
.logos-strip::after { right: 0; background: linear-gradient(to left, var(--mint), rgba(141,211,219,0)); }
.logos-track {
  display: flex; align-items: center; gap: 64px; width: max-content;
  animation: logos-marquee 32s linear infinite;
}
.logos-strip:hover .logos-track { animation-play-state: paused; }
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-item { height: 36px; display: flex; align-items: center; flex-shrink: 0; }
.logo-item.logo-item--split { gap: 6px; }
.logo-item img { height: 100%; width: auto; max-width: 140px; object-fit: contain; opacity: .8; transition: opacity .2s; }
.logos-strip:hover .logo-item img { opacity: 1; }
/* logo Mundo Revalida: a arte original tem gradiente azul + fills brancos
   internos — em vez de <img>, usamos spans vazios com mask-image (a arte
   vira só uma máscara de forma) + background-color: var(--ink), assim
   a logo fica realmente monocromática em ink, não só "meio azul". */
.logo-item--mono .mono-icon,
.logo-item--mono .mono-word {
  display: block; height: 100%; background-color: var(--ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .8; transition: opacity .2s;
}
.logos-strip:hover .logo-item--mono .mono-icon,
.logos-strip:hover .logo-item--mono .mono-word { opacity: 1; }
.logo-item--mono .mono-icon {
  width: 55px;
  -webkit-mask-image: url("assets/logos/mundorevalida-icon.svg");
  mask-image: url("assets/logos/mundorevalida-icon.svg");
}
.logo-item--mono .mono-word {
  width: 140px;
  -webkit-mask-image: url("assets/logos/mundorevalida-word.svg");
  mask-image: url("assets/logos/mundorevalida-word.svg");
}

/* TABLET (≤1023): aperta respiro, mantém centralizado e CTAs lado a lado */
@media (max-width: 1023px) {
  .empresas { padding: 64px 40px; }
  .empresas-card { padding: 0 40px 40px; }
  .empresas-intro { padding: clamp(56px, 9vw, 100px) 0 clamp(32px, 5vw, 60px); }
  .empresas-lead { font-size: 12px; line-height: 19px; }
  .empresas-intro { padding: clamp(95px, 15.3vw, 170px) 0 clamp(32px, 5vw, 60px); }
}
/* MOBILE (≤767): CTAs empilhados e respiro menor */
@media (max-width: 767px) {
  .empresas { padding: 40px 16px; }
  .empresas-card { padding: 0 20px 28px; border-radius: 20px; }
  .empresas-intro { padding: 158px 0 28px; } /* topo com bastante respiro (título → borda) */
  .empresas-ctas { flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
  .empresas-lead { font-size: 11px; line-height: 18px; margin-top: 14px; }
  /* logos 25% menores */
  .logo-item { height: 27px; }
  .logo-item img { max-width: 105px; }
  .logo-item--mono .mono-icon { width: 41px; }
  .logo-item--mono .mono-word { width: 105px; }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}

/* ================================================================
   COMUNIDADE — node 208:588 · título com movimento ATRELADO AO
   SCROLL da página (não é mais uma animação contínua em @keyframes):
   o track desliza translateX conforme a seção passa pela tela, via
   JS (mesmo padrão rAF-throttled do parallax do hero/unidades — ver
   updateComunidadeMarquee no <script>). O h2 fica FORA do padding
   lateral do .comunidade-head de propósito, pra o movimento ignorar
   as margens da página e ir de fato de ponta a ponta (full-bleed).
   ================================================================ */
.comunidade { padding: 100px 0; background: var(--cream-yellow); overflow: hidden; }
.comunidade-head { text-align: center; padding: 0 52px; }
.comunidade-lead {
  font-size: clamp(16px, 12.5px + 0.87vw, 25px); font-weight: 458; line-height: 1.44;
  color: var(--ink); max-width: 1073px; margin: 24px auto 0;
}

.marquee-heading { overflow: hidden; white-space: nowrap; margin: 0; width: 100%; text-align: center; }
.marquee-track { display: inline-flex; width: max-content; will-change: transform; }
.marquee-item {
  font-size: clamp(32px, 4.3vw, 75px); font-weight: 600; letter-spacing: -2.08px;
  line-height: 1.2; color: var(--ink); white-space: nowrap; padding-right: 48px;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { transform: none !important; }
}

.comunidade-grid {
  max-width: 1728px; margin: 64px auto 0; padding: 0 52px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.comunidade-card {
  background: #fff; border: 1px solid var(--ink); border-radius: 25px;
  padding: 16px; display: flex; flex-direction: column;
}
.comunidade-photo {
  border: 1px solid var(--ink); border-radius: 15px; overflow: hidden;
  aspect-ratio: 345 / 410; margin-bottom: 16px;
}
.comunidade-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comunidade-name { font-size: 20px; font-weight: 700; letter-spacing: -0.15px; color: var(--ink); margin: 0 0 2px; }
.comunidade-role { font-size: 14px; font-weight: 400; line-height: 1.035; color: var(--ink-light); margin: 0 0 12px; }
.comunidade-since { color: var(--ink-light); }

.comunidade-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 64px 52px 0; }

/* TABLET (≤1023): mantém 4 colunas menores, cantos 15, textos dos membros menores */
@media (max-width: 1023px) {
  .comunidade { padding: 64px 0; }
  .comunidade-head { padding: 0 40px; }
  .comunidade-grid { margin-top: 40px; padding: 0 40px; gap: 20px; }
  .comunidade-card { border-radius: 15px; padding: 10px; }
  .comunidade-photo { border-radius: 10px; margin-bottom: 10px; }
  .comunidade-name { font-size: 11px; }
  .comunidade-role { font-size: 8px; margin-bottom: 6px; }
  .comunidade-since { font-size: 7px; }
  .marquee-item { font-size: 50px; }
}
/* MOBILE (≤767): 2 colunas */
@media (max-width: 767px) {
  .comunidade-head { padding: 0 20px; }
  .comunidade-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px; gap: 14px; }
  .comunidade-ctas { margin: 40px 20px 0; flex-wrap: nowrap; gap: 8px; }
  .marquee-item { font-size: 35px; }
}
/* DESKTOP (≥1024): tokens do 1440 pros textos dos membros e título marquee.
   O marquee é o H2 da comunidade, então segue o token de H2 (60 no 1440). */
@media (min-width: 1024px) {
  .comunidade-name { font-size: 16px; }
  .comunidade-role { font-size: 12px; }
  .comunidade-since { font-size: 10px; }
  .marquee-item { font-size: 60px; }
}
/* ≥1728: tokens do frame de 1728 (member-name 20/24, role 14, since 12) */
@media (min-width: 1728px) {
  .comunidade-name { font-size: 20px; line-height: 24px; }
  .comunidade-role { font-size: 14px; }
  .comunidade-since { font-size: 12px; }
  .marquee-item { font-size: 65px; }
}

/* ================================================================
   COMPARATIVO — node 208:589 · PF vs PJ, com a mesma seta hover
   (bolinha coral + seta branca) que o dropdown "para sua empresa"
   ================================================================ */
.comparativo { background: var(--cream-yellow); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.comparativo-grid { max-width: 1728px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; }
.comparativo-col { padding: 64px 52px; }
.comparativo-col + .comparativo-col { border-left: 1px solid var(--ink); }
.comparativo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.comparativo-head .h4 { margin: 0; max-width: 340px; }
.comparativo-icon { width: clamp(56px, 5.4vw, 94px); height: auto; flex-shrink: 0; }
.comparativo-sub { font-size: 16px; font-weight: 400; line-height: 1.625; letter-spacing: 0; color: var(--ink); margin: 24px 0 0; max-width: 380px; }

/* margem de ~10% à esquerda (como no Figma) mas continua alinhado à
   esquerda dentro dela — não centralizado.
   align-items:flex-start é o que resolve de vez a seta "longe do
   texto": sem isso, cada <a> (item flex filho de uma coluna) esticava
   pra largura inteira do bloco por padrão (stretch), então o "right:0"
   da seta ficava ancorado na borda direita do BLOCO INTEIRO, não no
   fim do texto de cada item — daí ela aparecer sempre no mesmo lugar,
   longe, não importa o tamanho do texto. Com flex-start cada item
   encolhe pro tamanho do próprio texto, e a seta (ancorada nele) fica
   coladinha em cada item, curto ou longo. */
.comparativo-list { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin: 32px 0 0 10%; }
.comparativo-list a { color: var(--ink); }
.comparativo-list .item-title {
  display: flex; align-items: center;
  font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 1.067; transition: color .12s;
  /* a seta some do fluxo (position:absolute) — não empurra o item de
     cima/baixo da lista. Com o align-items:flex-start do pai (ver
     acima), esse padding-right agora reserva espaço logo depois do
     PRÓPRIO texto do item, não da largura inteira do bloco — por isso
     a seta finalmente fica coladinha em cada item. No hover ela desliza
     mais perto ainda (translateX 0), um movimento pequeno e visível. */
  position: relative;
  /* 34px porque a bolinha cresce pra 29px no hover — com menos que
     isso ela invadia o próprio texto do item (o "l" de "Fiscal"
     ficava atrás dela) */
  padding-right: 34px;
}
.comparativo-list a:hover .item-title { color: var(--coral); }
.comparativo-list .item-title::after {
  position: absolute; top: 50%; right: 0;
  transform: translateY(-50%) translateX(14px);
}
.comparativo-list a:hover .item-title::after {
  transform: translateY(-50%) translateX(0);
}

/* "Salas" + a lista de modalidades viram UM item só dentro do
   .comparativo-list (mesmo gap de 18px em relação aos vizinhos), e
   por dentro usam 10px — igual ao espaçamento entre os próprios
   subitens, como ela pediu. */
.comparativo-group { display: flex; flex-direction: column; gap: 10px; }
/* "Salas" não é link — só o título, sem seta e sem cor de hover */
.comparativo-list .item-title--static::after { display: none; }
/* mesmo motivo do .comparativo-list acima: flex-start pra seta de
   cada subitem (uso avulso/recorrente/fixo) ficar perto do seu texto,
   não esticada até a borda do bloco. */
.comparativo-sublist { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-left: 28px; }
.comparativo-sublist .submenu-group { font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 1.067; color: var(--ink); margin-bottom: 2px; }
.comparativo-sublist a { display: flex; align-items: baseline; gap: 8px; color: var(--ink); }
.comparativo-sublist a:hover .item-title { color: var(--coral); }
/* padding-right menor que o da lista principal (34px) porque a
   bolinha do subitem é só 16px, não 29px — com 34px reservado sobrava
   espaço demais e a seta (deslocada) acabava invadindo o item-sub
   vizinho ("sala por hora"). E o transform é fixo nos dois estados
   (repouso/hover), redeclarado aqui DEPOIS da regra genérica da lista
   principal pra não herdar o translateX(14px/0) dela — sem isso a
   seta empurrava pra cima do texto ao lado mesmo sem hover. */
.comparativo-sublist .item-title { font-size: 15px; letter-spacing: 0; line-height: 1.2; padding-right: 20px; }
.comparativo-sublist .item-title::after,
.comparativo-sublist a:hover .item-title::after {
  transform: translateY(-50%) translateX(2px);
}
.comparativo-sublist .item-sub { font-size: 14px; line-height: 1.3; color: var(--ink-light); font-weight: 500; }

/* ================================================================
   COMPARATIVO — formato TABELA (frames Figma node 320:2831 / 322:653 /
   339:158). Cada coluna vira uma tabela: linhas com borda, a 1ª
   destacada em coral (serviço principal daquele público), seta à
   direita, e um botão "conheça os serviços" embaixo. Desktop/tablet
   2 colunas com divisória central; mobile empilha.
   (As regras antigas .comparativo-list / -sublist / -group acima
   ficaram sem uso — a marcação nova não usa mais essas classes.)
   ================================================================ */
.comparativo-col { display: flex; flex-direction: column; align-items: flex-start; }
.comparativo-head { width: 100%; }
.comparativo-sub { max-width: 400px; }

/* tabela alinhada à largura do texto de cima (não ocupa o box inteiro),
   com respiro. Todas as linhas transparentes; o coral é só no hover. */
.comparativo-table {
  width: 100%; max-width: 400px; margin: 36px 0 0;
  border: 1px solid var(--ink); border-radius: 10px; overflow: hidden;
}
.comparativo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; color: var(--ink);
  border-top: 1px solid var(--ink);
  transition: background-color .15s ease, color .15s ease;
}
.comparativo-row:first-child { border-top: none; }
.comparativo-row .row-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.comparativo-row .row-opts { font-size: 13px; font-weight: 500; color: var(--ink-light); margin-left: 8px; white-space: nowrap; }
.comparativo-row .row-arrow { flex-shrink: 0; display: inline-flex; color: currentColor; }
.comparativo-row .row-arrow svg { display: block; transition: transform .15s ease; }
/* hover: a linha inteira vira coral, texto e seta brancos */
.comparativo-row:hover { background: var(--coral); color: #fff; }
.comparativo-row:hover .row-name { color: #fff; }
.comparativo-row:hover .row-arrow svg { transform: translateX(3px); }

/* Salas (para empresa): sub-opções clicáveis. Em repouso cinza; com a
   linha em coral ficam brancas; o item sob o mouse vira ink. */
.comparativo-row--salas .row-opts a { color: var(--ink-light); text-decoration: none; transition: color .15s ease; }
.comparativo-row--salas:hover .row-opts a { color: #fff; }
.comparativo-row--salas .row-opts a:hover { color: var(--ink); }

.comparativo-cta { margin-top: 28px; }

/* coluna "pra empresas & equipes": hover da tabela e o botão usam blue
   em vez de coral (só essa coluna — a de pessoa física continua coral) */
.comparativo-col--empresa .comparativo-row:hover { background: var(--blue); }
.comparativo-col--empresa .comparativo-row--salas:hover .row-opts a { color: #fff; }
.comparativo-col--empresa .comparativo-cta.btn-fill { background: var(--blue); }
/* o hover em ink do .btn-fill estava sendo vencido pela regra de blue
   acima (mais específica), então o botão dessa coluna não reagia */
.comparativo-col--empresa .comparativo-cta.btn-fill:hover { background: var(--ink); }
/* item "salas" sob o mouse direto: sempre ink, mesmo com a linha toda
   em blue por baixo (a regra acima tem mais especificidade que o
   ":hover" direto do link e ganhava por engano — !important resolve) */
.comparativo-row--salas .row-opts a:hover { color: var(--ink) !important; }

/* TABLET (≤1023): mantém 2 colunas, só aperta o respiro */
@media (max-width: 1023px) {
  .comparativo-col { padding: 44px 32px; }
}
/* MOBILE (≤767): colunas empilham, divisória vira horizontal */
@media (max-width: 767px) {
  .comparativo-grid { grid-template-columns: 1fr; }
  .comparativo-col + .comparativo-col { border-left: none; border-top: 1px solid var(--ink); }
  .comparativo-col { padding: 40px 24px; }
  .comparativo-table { max-width: 100%; }
  .comparativo-row { padding: 14px 16px; }
}

/* ================================================================
   DEPOIMENTOS — node 212:4
   ================================================================ */
.depoimentos { padding: 100px 52px; background: var(--cream-yellow); }
.depoimentos-head {
  max-width: 1728px; margin: 0 auto; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 32px; flex-wrap: wrap;
}
.depoimentos-head .h2 { margin: 0; }
.depoimentos-eyebrow { font-size: 20px; font-weight: 700; color: #bdbdbd; margin: 0 0 12px; }
.depoimentos-rating { text-align: right; flex-shrink: 0; }
.depoimentos-rating .num {
  font-size: clamp(48px, 5.2vw, 80px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
/* Figma: 80px no frame 1440, 90px no 1728 */
@media (min-width: 1024px) { .depoimentos-rating .num { font-size: 80px; } }
@media (min-width: 1728px) { .depoimentos-rating .num { font-size: 90px; } }
.depoimentos-rating .stars { width: clamp(90px, 9vw, 150px); margin-top: 8px; margin-left: auto; }

.depoimentos-grid {
  max-width: 1728px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.depo-card {
  position: relative; background: #fff; border: 1px solid var(--ink); border-radius: 12px;
  padding: 32px; overflow: hidden;
}
/* aspas.svg em fluxo normal, não mais posicionado em absolute — assim
   a margem de segurança pro topo e pra lateral do card é a mesma (o
   padding uniforme de 32px do .depo-card já cuida disso), e o espaço
   até o texto (32px) fica igual ao espaço do texto até a linha
   divisória antes do autor (também 32px, via .depo-author margin-top) */
.depo-quote { display: block; width: 40px; height: auto; margin: 0 0 32px auto; }
.depo-text { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0; max-width: 670px; }
.depo-text em { font-style: italic; }
.depo-author {
  display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--line, #D0D0C3);
}
.depo-photo {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: #F2F0D2; border: 1px dashed var(--ink);
}
.depo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.depo-name { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.15px; }
.depo-role { font-size: 12px; color: #888; margin: 2px 0 0; }

.depoimentos-ctas { display: flex; justify-content: center; margin-top: 48px; }

/* TABLET (≤1023): 2 cards ainda lado a lado, só menores; textos nos tokens */
@media (max-width: 1023px) {
  .depoimentos { padding: 64px 40px; }
  .depoimentos-grid { gap: 20px; margin-top: 32px; }
  .depo-card { padding: 22px; }
  .depoimentos-eyebrow { font-size: 15px; }
  .depoimentos-rating .num { font-size: 50px; }
  .depo-quote { width: 30px; margin-bottom: 20px; }
  .depo-text { font-size: 12px; line-height: 1.55; }
  .depo-author { margin-top: 22px; padding-top: 16px; }
  .depo-name { font-size: 15px; }
  .depo-role { font-size: 9px; }
}
/* MOBILE (≤767): cards empilhados */
@media (max-width: 767px) {
  .depoimentos { padding: 40px 20px; }
  .depoimentos-grid { grid-template-columns: 1fr; gap: 14px; }
  .depoimentos-eyebrow { font-size: 10px; }
  .depoimentos-rating .num { font-size: 36px; }
  .depo-text { font-size: 11px; }
  .depoimentos-ctas { margin-top: 32px; }
  /* nº de avaliações + estrelas encostados na direita: no mobile o
     .depoimentos-head empilha (flex-wrap), então o bloco do rating
     precisa ocupar a linha inteira pra o text-align:right valer */
  .depoimentos-rating { width: 100%; text-align: right; }
  .depoimentos-rating .stars { margin-left: auto; margin-right: 0; }
}

/* ================================================================
   PLACEHOLDER — seções ainda não recebidas
   ================================================================ */
.section-placeholder {
  padding: 120px 28px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, #e5e0d2, #e5e0d2 2px, var(--cream-yellow) 2px, var(--cream-yellow) 22px);
  color: var(--ink-light);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ================================================================
   CHAMADA FINAL — "vem pro mofo!" + colagem de fotos
   ================================================================ */
.cta-final {
  position: relative;
  height: 100%;
  background: var(--cream-yellow);
  /* agora vive dentro do .finale-pin (100vh, overflow:hidden) — usa
     flex pra centralizar o conteúdo verticalmente dentro dessa altura
     fixa, em vez de depender só do padding pra "empurrar" o texto pro
     meio. Padding-top maior que o resto ainda ajuda a dar espaço de
     sobra pras fotos que espalham pra cima (fy negativo) não baterem
     no teto e parecerem cortadas. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 220px 28px;
  overflow: hidden;
  text-align: center;
}
.cta-final__images { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* scatter-on-scroll: todo card começa empilhado bem no centro do
   palco (left/top 50% + translate -50%/-50%) — o JS soma um translate
   extra em % (data-fx/data-fy) e uma rotação (data-fr), interpolados
   de 0 (empilhado) a 1 (posição final) conforme o scroll avança. */
.cta-final__image {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  overflow: hidden;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cta-final__image img { display: block; width: 100%; height: auto; }

.cta-final__content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.cta-final h2 {
  /* "vem pro mofo!" usa o estilo H1 no Figma (120px), não H2 */
  font-size: clamp(40px, 7.5vw, 120px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: .975;
  color: var(--ink);
  margin: 0;
}
.cta-final .sub {
  /* "Passe pra um café sem compromisso." usa o estilo H4 (35px) */
  font-size: clamp(18px, 2vw, 35px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: normal;
  color: var(--ink);
  margin: 18px 0 0;
}
.cta-final .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
/* quebra de linha que só existe no mobile — deixa "vem pro / mofo!" e
   "Passe pra um café / sem compromisso." sempre nessas duas linhas */
.br-mobile { display: none; }
@media (max-width: 767px) { .br-mobile { display: inline; } }

/* CHAMADA FINAL + FINALE (chamada + footer) — responsivo. Os frames da
   chamada mostram só texto+botões (a colagem é do desktop), então no
   tablet/mobile a colagem some e o reveal travado (finale-pin) é
   desligado: chamada e footer empilham normalmente. */
@media (max-width: 1023px) {
  .cta-final { padding: 80px 40px; height: auto; min-height: 100vh; }
  .cta-final h2 { font-size: 73px; }
  .cta-final .sub { font-size: 20px; }
  .finale-track { height: auto; }
  .finale-pin { position: static; height: auto; min-height: 0; overflow: visible; transform: none !important; }
  .site-footer { height: auto; }
  .footer-art { flex: 0 0 auto; height: auto; margin-top: 40px; }
  .footer-art img { height: auto; width: 100%; object-fit: contain; }
}
@media (max-width: 767px) {
  /* padding lateral +20% (20px → 24px) e o palco mais alto (78vh →
     100vh) — dá mais espaço vertical pro espalhamento das fotos sem
     cortar nas bordas do overflow:hidden */
  .cta-final { padding: 64px 24px; min-height: 100vh; }
  .cta-final h2 { font-size: 55px; }
  .cta-final .sub { font-size: 18px; margin-top: 12px; }
  .cta-final .ctas { flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
  /* colagem volta a aparecer no mobile, só menor (as fotos têm width
     fixo em px no inline style — precisa !important pra sobrepor) */
  .cta-final__image { width: 40vw !important; }
}
/* "vem pro mofo!" NÃO segue o H1 — no Figma é 100px nos dois frames
   (só a entrelinha muda: 110 no 1440, 107 no 1728), e o sub é 30px */
@media (min-width: 1024px) {
  .cta-final h2 { font-size: 100px; line-height: 110px; }
  .cta-final .sub { font-size: 30px; line-height: 35px; }
}
@media (min-width: 1728px) {
  .cta-final h2 { font-size: 100px; line-height: 107px; }
  .cta-final .sub { font-size: 30px; line-height: 35px; }
}

/* ================================================================
   page-content: wrapper estrutural (hero→depoimentos), sem estilo
   próprio. As duas tentativas anteriores do reveal do footer (margin
   negativo+z-index, depois um track solo com translateY) tinham o
   mesmo problema de fundo: o footer não fazia parte do MESMO scroll
   contínuo da seção anterior, então sobrava um vão em branco antes
   dele "acordar". A solução certa é replicar a pilha da seção
   unidades por completo: chamada final + footer viram dois painéis
   sticky dentro do MESMO track (.finale-track/.finale-pin, mesmo
   padrão de .unidades-track/.unidades-pin), com o footer deslizando
   por cima da chamada final via translateY — ver updateFinaleStack
   no <script> e os comentários perto do HTML do finale-track.
   ================================================================ */
.finale-track { position: relative; height: 200vh; }
.finale-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* ================================================================
   FOOTER — node 261:1142 · fundo coral, 4 colunas (marca+fala aí /
   unidades / serviços / institucional — no ajuste mais recente do
   Figma o "fala aí" saiu de coluna própria e virou um bloco embaixo
   da marca, e o link de políticas de privacidade migrou pra dentro
   da lista de institucional), colagem decorativa e barra inferior
   de copyright. O sticky/translateY vive no .finale-pin que envolve
   o footer (ver acima) — aqui só o visual.
   ================================================================ */
.site-footer {
  height: 100%;
  background: var(--coral); color: #fff; padding: 110px 65px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.footer-top {
  max-width: 1728px; margin: 0 auto; width: 100%;
  /* coluna da marca encolhida (1.5fr → 1.1fr): ela tinha espaço vazio
     sobrando, e reduzir ela puxa unidades/serviços/institucional todas
     mais pra esquerda de uma vez (as 3 proporções entre si continuam
     as mesmas de antes) */
  display: grid; grid-template-columns: 1.1fr 1fr 0.56fr 0.32fr; gap: 32px;
}
/* tagline usa Bold mas no tamanho do body-text (16px/1.625), não os
   20px do h5-bold das colunas — por isso sobrescreve os dois aqui */
.footer-tagline.h5-bold { font-size: 16px; line-height: 1.625; font-weight: 700; color: #fff; margin: 0; }
/* texto de apoio: 12px Regular com tracking, não os 16px do .body-text
   global — max-width subiu de 280 pra 340 porque em 280 a frase
   "Desde 2016 · Sorocaba - SP" quebrava no meio (·/Sorocaba), criando
   uma 3ª linha indesejada além do <br> proposital depois de "chato." */
.footer-text.body-text { font-size: 12px; line-height: 1.667; letter-spacing: .36px; font-weight: 400; color: #fff; margin: 12px 0 0; max-width: 340px; }
/* bloco "fala aí" agora dentro da coluna da marca — no Figma o gap
   entre o fim do texto e o início desse bloco ficou bem maior (~65px)
   que o resto dos respiros do footer */
.footer-contact { margin-top: 65px; }

/* título das listas: 20px (h5-bold global) → 16px só aqui no footer;
   o line-height (1.067, herdado do h5-bold) é uma razão, não px fixo,
   então já acompanha a redução automaticamente */
.footer-heading.h5-bold { font-size: 16px; color: var(--coral-light, #FAC8B5); margin: 0 0 16px; }
.footer-unit {
  display: block; margin-bottom: 20px; text-decoration: none;
}
.footer-unit-name { font-size: 14px; font-weight: 600; line-height: 1.733; color: #fff; margin: 0; transition: color .15s; }
.footer-unit-address { font-size: 12px; font-weight: 400; line-height: 1.667; color: #F5F5F5; margin: 4px 0 0; max-width: 230px; transition: color .15s; }
/* hover muda só a cor (pro ink), nunca sublinha */
.footer-unit:hover .footer-unit-name,
.footer-unit:hover .footer-unit-address { color: var(--ink); }
.footer-privacy { color: #fff; }
.footer-privacy:hover { color: var(--ink); }

/* gap das listas de serviços/institucional: 24px → 10px → 6px → 2px;
   itens: 15px → 14px (line-height 1.733 é razão, acompanha sozinho) */
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.footer-links > li > a { display: block; font-size: 14px; font-weight: 600; line-height: 1.733; color: #fff; text-decoration: none; transition: color .15s; }
.footer-links > li > a:hover { color: var(--ink); }
/* subitens de "sala de reunião" mais colados nela: menos margem acima,
   menos gap entre os dois, e entrelinha bem mais fechada (1.667→1.2) */
.footer-sublinks { list-style: disc; margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.footer-sublinks a { font-size: 12px; font-weight: 400; line-height: 1.2; color: #F5F5F5; text-decoration: none; transition: color .15s; }
.footer-sublinks a:hover { color: var(--ink); }

.footer-email { font-size: 12px; font-weight: 400; line-height: 1.667; color: #F5F5F5; margin: 0 0 14px; }
.footer-social { display: flex; gap: 16px; }
/* ícones com hover de cor: em vez de mask-image (que sumiu em alguns
   navegadores), cada ícone é um par de <img> empilhado (branco +
   versão ink) e o hover só troca o opacity de um pro outro — técnica
   mais simples e à prova de navegador. */
.footer-social-icon {
  position: relative; display: block; width: 18px; height: 18px;
}
.footer-social-icon img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .15s; }
.footer-social-icon img.is-hover { opacity: 0; }
.footer-social-icon:hover img.is-base { opacity: 0; }
.footer-social-icon:hover img.is-hover { opacity: 1; }

/* altura travada (não mais só "height:auto" pela largura) — com o
   footer inteiro agora fixo em 100vh, a arte precisa caber no
   orçamento vertical que sobra. Agora full-bleed de verdade: em vez
   da sangria de -22px (que só ia até quase a borda), quebra o padding
   lateral do .site-footer inteiro e vai de ponta a ponta da viewport
   (truque clássico width:100vw + margin negativo). object-fit:contain
   continua garantindo que a colagem nunca corta em cima/embaixo — só
   fica maior, já que agora tem mais largura pra usar. */
.footer-art {
  width: 100vw; max-width: 100vw; margin: 48px calc(-50vw + 50%) 0;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.footer-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

.footer-bottom {
  max-width: 1728px; margin: 100px auto 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 12px; font-weight: 400; line-height: 1.6; color: #fff; margin: 0; }
.footer-bottom a { color: #fff; transition: color .15s; }
.footer-bottom a:hover { color: var(--ink); }

/* ================================================================
   RESPONSIVO FOOTER — frames Figma (node 261:1141): desktop 4 colunas ·
   tablet 810 (2x2) · mobile 390. Cada bloco vira uma grid-area, e a
   ordem/posição muda por breakpoint. O "fala aí" (footer-contact) é um
   bloco solto do footer-top (não mais dentro da marca) justamente pra
   poder reposicionar no mobile (vai pro canto inferior direito).
   ================================================================ */
.footer-brand { grid-area: brand; }
.footer-contact { grid-area: contact; }
.footer-col--unidades { grid-area: unidades; }
.footer-col--servicos { grid-area: servicos; }
.footer-col--institucional { grid-area: inst; }

/* DESKTOP (≥1024): marca + contato empilhados na 1ª coluna */
.footer-top {
  grid-template-areas:
    "brand   unidades servicos inst"
    "contact unidades servicos inst";
  column-gap: 32px; row-gap: 0; align-items: start;
}

/* TABLET (≤1023): 2 colunas — [marca | unidades] / [serviços | institucional] */
@media (max-width: 1023px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand    unidades"
      "contact  unidades"
      "servicos inst";
    column-gap: 32px; row-gap: 44px;
  }
  .footer-contact { margin-top: 0; }
}

/* MOBILE (≤767): marca no topo (full), blocos 2 colunas, fala aí no canto */
@media (max-width: 767px) {
  .site-footer { padding: 56px 24px 32px; }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand    brand"
      "servicos unidades"
      "inst     contact";
    column-gap: 24px; row-gap: 34px;
  }
  .footer-contact { margin-top: 0; }
  .footer-art { margin-top: 40px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}
/* ================================================================
   ESCALA TIPOGRÁFICA RESPONSIVA — tamanhos EXATOS dos tokens do Figma
   por breakpoint (estilos de texto: mobile / 810 / 1440 / 1920).
   Mobile-first: base = mobile, sobe por min-width. Sobrescreve os
   clamp() de cima pra bater 1:1 com os teus tokens em cada largura.
   Só mexe em font-size/line-height; peso e tracking ficam como estão.
   Tiers: <768 mobile · ≥768 tablet(810) · ≥1024 desktop(1440) ·
   ≥1440 desktop XL(1920).
   ================================================================ */
.h1, .hero h1 { font-size: 55px; line-height: 60px; }
.h2 { font-size: 35px; line-height: 40px; }
.h3 { font-size: 35px; line-height: 40px; }
.h4 { font-size: 18px; line-height: 22px; }
/* título do comparativo reserva altura de 3 linhas (o de "pra empresas
   & equipes" é o mais longo) pra alinhar com o texto/tabela de baixo
   entre as duas colunas */
.comparativo-head .h4 { min-height: 66px; }
.h5-bold { font-size: 16px; line-height: normal; }
.body-text { font-size: 11px; line-height: 18px; }
.eyebrow-photo,
.hero .sub,
.unidades-head .body-text-lg,
.comunidade-lead,
.unidade-sub { font-size: 14px; line-height: 20px; }

@media (min-width: 768px) {
  .h1, .hero h1 { font-size: 80px; line-height: 85px; }
  .h2 { font-size: 50px; line-height: 55px; }
  .h3 { font-size: 40px; line-height: 45px; }
  .h4 { font-size: 20px; line-height: 25px; }
  .comparativo-head .h4 { min-height: 75px; }
  .h5-bold { font-size: 13px; line-height: 15px; }
  .body-text { font-size: 12px; line-height: 19px; }
  .eyebrow-photo,
  .hero .sub,
  .unidades-head .body-text-lg,
  .comunidade-lead,
  .unidade-sub { font-size: 15px; line-height: 20px; }
}
@media (min-width: 1024px) {
  /* varredura 27/07 (2ª parte): ela também ajustou o tier 1440px —
     H1 100→85/83, H2 70→60/75, H3 65→55/65. H4/H5/eyebrow ficaram iguais. */
  .h1, .hero h1 { font-size: 85px; line-height: 83px; }
  .h2 { font-size: 60px; line-height: 75px; }
  .h3 { font-size: 55px; line-height: 65px; }
  .h4 { font-size: 30px; line-height: 35px; }
  .comparativo-head .h4 { min-height: 105px; }
  .h5-bold { font-size: 15px; line-height: 20px; }
  .body-text { font-size: 16px; line-height: 26px; }
  .eyebrow-photo,
  .hero .sub,
  .unidades-head .body-text-lg,
  .comunidade-lead,
  .unidade-sub { font-size: 20px; line-height: 28px; }
}
/* ATENÇÃO ao limite: os tokens "Desktop 1920px" do Figma são os do
   frame de 1728px de largura, então só devem entrar A PARTIR de 1728 —
   não de 1440. Entre 1440 e 1727 quem manda ainda é o tier de cima
   (tokens "Desktop 1440px"). Estava 1440 aqui, e por isso as mudanças
   feitas nos tokens de 1440 não apareciam em telas de notebook. */
@media (min-width: 1728px) {
  /* tokens "Desktop 1920px" (frame de 1728) */
  .h1, .hero h1 { font-size: 110px; line-height: 107px; }
  .h2 { font-size: 65px; line-height: 70px; }
  .h3 { font-size: 70px; line-height: 86px; }
  .h4 { font-size: 35px; line-height: normal; }
  .comparativo-head .h4 { min-height: 110px; }
  .h5-bold { font-size: 20px; line-height: 21px; }
  .eyebrow-photo,
  .hero .sub,
  .unidades-head .body-text-lg,
  .comunidade-lead,
  .unidade-sub { font-size: 20px; line-height: 30px; }
}

/* Botões menores no tablet/mobile (desktop mantém 58px/14px das classes) */
@media (max-width: 1023px) {
  .btn-fill, .btn-outline, .btn-fill-ink, .btn-fill-cream, .unidade-btn { height: 54px; padding: 13px 24px; font-size: 15px; }
}
@media (max-width: 767px) {
  .btn-fill, .btn-outline, .btn-fill-ink, .btn-fill-cream, .unidade-btn { height: 46px; padding: 11px 20px; font-size: 14px; }
}

/* ================================================================
   Textos por breakpoint das seções com tamanho PRÓPRIO (não usam as
   classes globais): Unidades e Comparativo. Valores 1:1 dos tokens
   do Figma (mobile / 810 / 1440 / 1920). Mobile-first.
   ================================================================ */
/* Unidades */
.unidades-eyebrow { font-size: 10px; }
.unidade-title .line1 { font-size: 35px; }
.unidade-title .line2 { font-size: 40px; }
.unidade-sub { font-size: 14px; line-height: 20px; }
.unidade-desc { font-size: 10px; line-height: 16px; }
.unidade-badge span { font-size: 9px; }
/* Comparativo */
.comparativo-sub { font-size: 11px; line-height: 17px; }
.comparativo-row .row-name { font-size: 12px; }
.comparativo-row .row-opts { font-size: 9.5px; }

@media (min-width: 768px) {
  .unidades-eyebrow { font-size: 11px; }
  .unidade-title .line1 { font-size: 50px; }
  .unidade-title .line2 { font-size: 55px; }
  .unidade-sub { font-size: 18px; line-height: 26px; }
  .unidade-desc { font-size: 11px; line-height: 18px; }
  .unidade-badge span { font-size: 12px; }
  .comparativo-sub { font-size: 12px; line-height: 19px; min-height: 38px; }
  .comparativo-row .row-name { font-size: 13px; }
}
@media (min-width: 1024px) {
  .unidades-eyebrow { font-size: 15px; line-height: 20px; }
  /* frame 1440: as duas linhas do título são 55/65 (token H3 do 1440) */
  .unidade-title .line1,
  .unidade-title .line2 { font-size: 55px; line-height: 65px; }
  /* contador: 75px em AMBOS os frames (não escala junto com o título),
     e o "/03" é 32px fixo — por isso saem do clamp aqui */
  .unidade-count { font-size: 75px; line-height: 86.2px; }
  .unidade-count span { font-size: 32px; }
  /* olho/sub segue o token "Olho | 1440px" = 20/28 (estava 25/36, que é
     o token do 1728 — e por vir depois do bloco global, sobrescrevia ele) */
  .unidade-sub { font-size: 20px; line-height: 28px; }
  .unidade-desc { font-size: 16px; line-height: 26px; }
  .unidade-badge span { font-size: 12px; }
  /* min-height de 2 linhas: os dois textos (p/você e p/empresa) têm
     tamanhos diferentes, e sem isso a tabela de baixo desalinhava
     entre as colunas quando um texto quebra em mais linhas que o outro */
  .comparativo-sub { font-size: 16px; line-height: 26px; min-height: 52px; }
  .comparativo-row .row-name { font-size: 15px; } /* token H5 | 1440px */
  .comparativo-row .row-opts { font-size: 13px; }
}
@media (min-width: 1728px) {
  /* no Figma as duas linhas do título têm o MESMO tamanho (é o token H3
     inteiro, não duas medidas) — 55/65 no 1440 e 70/86.2 no 1728 */
  .unidade-title .line1,
  .unidade-title .line2 { font-size: 70px; line-height: 86.2px; }
  .unidade-sub { font-size: 20px; line-height: 30px; }
  .unidades-eyebrow { font-size: 20px; line-height: 21.33px; } /* token h5 do 1728 */
  .comparativo-row .row-name { font-size: 20px; }
  .comparativo-row .row-opts { font-size: 16px; }
}

/* Stats — números FLUIDOS abaixo de 1024 (pra nunca cortar dentro do
   box em larguras intermediárias tipo 1041px); de 1024 pra cima usam os
   valores EXATOS medidos nos frames 1440 e 1728 do Figma. */
.stats-num { font-size: clamp(45px, 6.25vw, 80px); }
.stats-card--tall .stats-num { font-size: clamp(60px, 8.3vw, 120px); }
.stats-label, .stats-card--tall .stats-label { font-size: 16px; }
.stats-quote { font-size: 23px; }
@media (min-width: 768px) {
  .stats-label, .stats-card--tall .stats-label { font-size: 18px; }
  .stats-quote { font-size: 25px; }
}
/* frame 1440: número 80, número grande 120, label 25/30, citação 40/45 */
@media (min-width: 1024px) {
  .stats-num { font-size: 80px; }
  .stats-card--tall .stats-num { font-size: 120px; }
  .stats-label, .stats-card--tall .stats-label { font-size: 25px; line-height: 30px; }
  .stats-quote { font-size: 40px; line-height: 45px; }
}
/* frame 1728: número segue 80, o grande CAI pra 108, e só o label do
   card grande sobe pra 30/35 (os outros continuam 25/30) */
@media (min-width: 1728px) {
  .stats-num { font-size: 80px; }
  .stats-card--tall .stats-num { font-size: 108px; }
  .stats-label { font-size: 25px; line-height: 30px; }
  .stats-card--tall .stats-label { font-size: 30px; line-height: 35px; }
  .stats-quote { font-size: 40px; line-height: 45px; }
}

/* ================================================================
   MODO PRÉVIA — só liga quando a página está num link .netlify.app
   (ver o bloco no final do <script>). Serve pra apresentação ao
   cliente: as páginas internas ainda não existem, então em vez de
   recarregar a home sem explicação, o clique mostra um aviso.
   Localmente e no site de produção nada disso aparece.
   ================================================================ */
.previa-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(14px);
  z-index: 9999; pointer-events: none;
  background: var(--cream-yellow); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--radius-pill);
  padding: 12px 22px; font-size: 14px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 6px 24px rgba(66,66,60,.18);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  max-width: calc(100vw - 40px); text-align: center;
}
.previa-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* links sem destino ganham cursor de "ainda não" em vez de mãozinha */
body.is-previa a[data-previa-dead] { cursor: default; }
@media (max-width: 767px) {
  .previa-toast { font-size: 12px; padding: 10px 16px; bottom: 18px; }
}

/* ==========================================================================
   BLOG + PAGINAS INTERNAS (nativo WP) — herda tokens do design
   ========================================================================== */
.blog-main, .post-main, .page-main { font-family: var(--font-primary, 'Google Sans Flex', system-ui, sans-serif); background: var(--cream, #F4EFE7); color: var(--ink, #1B1B1B); min-height: 60vh; }
.blog-inner, .post-inner { width: min(1120px, 90vw); margin: 0 auto; }
.blog-hero, .post-head, .page-main .page-article { padding: 160px 0 40px; }
.blog-title, .post-title { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
.blog-sub { margin-top: 12px; font-size: 1.15rem; opacity: .75; }
.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px; padding: 40px 0 120px; }
.blog-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.blog-card-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.blog-card-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.blog-card-meta, .post-meta { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.blog-card-title { font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.blog-card-title a, .blog-card-link { color: inherit; text-decoration: none; }
.blog-card-link { margin-top: auto; font-weight: 700; color: var(--coral, #F0592B); }
.blog-card-excerpt { opacity: .8; line-height: 1.5; }
.post-cover { width: min(1120px, 90vw); margin: 32px auto; border-radius: 24px; overflow: hidden; }
.post-cover img { width: 100%; height: auto; display: block; }
.post-content { font-size: 1.12rem; line-height: 1.7; padding-bottom: 80px; }
.post-content h2 { font-size: 1.8rem; margin: 2em 0 .6em; font-weight: 800; }
.post-content h3 { font-size: 1.35rem; margin: 1.6em 0 .5em; font-weight: 700; }
.post-content p { margin: 0 0 1.1em; }
.post-content a { color: var(--coral, #F0592B); }
.post-content img { max-width: 100%; height: auto; border-radius: 16px; }
.post-content blockquote { border-left: 4px solid var(--coral, #F0592B); padding-left: 20px; margin: 1.5em 0; font-style: italic; opacity: .85; }
.post-tags { padding-bottom: 80px; opacity: .7; }
.pagination, .nav-links { display: flex; gap: 10px; justify-content: center; padding: 20px 0 100px; }
.pagination .page-numbers { padding: 10px 16px; border-radius: 999px; background: #fff; text-decoration: none; color: var(--ink, #1B1B1B); }
.pagination .page-numbers.current { background: var(--coral, #F0592B); color: #fff; }
@media (max-width: 640px){ .blog-hero, .post-head { padding-top: 120px; } }

/* ============================================================
   CORRECOES DE RESPONSIVO (mobile/tablet) — apendice v0.1.1
   Nao estava no HTML original. Angelica + Claude.
   ============================================================ */
@media (max-width: 1023px) {
  /* FOOTER: as regras de "despin" originais vinham ANTES da base
     (.finale-track/.finale-pin ~linha 1828) e perdiam por ordem de
     codigo, repinando o footer no mobile (footer preso/cortado +
     track vazio). Aqui reforcamos o despin depois de tudo. */
  .finale-track { height: auto !important; }
  .finale-pin  { position: static !important; height: auto !important;
                 min-height: 0 !important; overflow: visible !important;
                 transform: none !important; }
  .site-footer { height: auto !important; }

  /* Mata o scroll horizontal (a "barra") no mobile/tablet.
     Seguro aqui: no mobile o footer nao usa mais sticky e o header e fixed. */
  html, body { overflow-x: hidden; }
}

@media (max-width: 767px) {
  /* DRAWER: 100vh fica atras da barra do navegador e corta o "login".
     dvh acompanha a area visivel; garantimos o scroll interno das linhas. */
  .drawer { height: 100dvh; }
  .drawer-rows { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   CORRECOES v0.1.2 — desktop nav + drawer mobile (verificadas ao vivo)
   ============================================================ */
/* NAV DESKTOP: o <ul>.nav-links tinha padding-top:20 / padding-bottom:100
   que inflava o .nav-inner pra 159px e jogava os itens pra cima da barra.
   Zerado: itens centralizam na pilula. O dropdown continua abrindo no hover
   (a "ponte" de 100px era desnecessaria, o painel e adjacente). */
.mofo-nav .nav-links { padding-top: 0 !important; padding-bottom: 0 !important; }

/* DRAWER MOBILE: logo e X estavam grandes demais. Reduzidos p/ ficarem
   proporcionais aos icones da barra, e sobra espaco pros itens. */
@media (max-width: 767px) {
  .drawer-head { padding: 16px 20px 0; }
  .drawer-head .drawer-logo img { height: 26px; }
  .drawer-close, .drawer-close img { width: 32px; height: 32px; }
  .drawer-badge-zone { padding: 12px 20px; }
}

/* ============================================================
   CORRECOES v0.1.4 — quebra do titulo comunidade no mobile
   Mantem o marquee/animacao (nao vira estatico). O <br class="br-mobile">
   no markup quebra apos "comunidade real,". A fonte menor no mobile faz
   as duas linhas caberem, entao o marquee assenta centralizado sozinho. */
@media (max-width: 767px) {
  #comunidadeMarquee .marquee-item { font-size: 36px; line-height: 1.05; }
}