/*
  styles.css — DS Consistem / LP "Consistem 40 anos"
  Reconstrução da LP do Figma (Templates Brandbook 2026) usando só tokens
  semânticos do DS (ver tokens.css) — nunca um --ds-* primitivo aqui.
*/

/* ===== Reset mínimo ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ds-font-family-base);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  -webkit-font-smoothing: antialiased;
  /* Rede de segurança: a composição de boxes sobrepostos da seção Trajetória
     usa position:absolute perto das bordas do container — overflow-x:hidden
     evita que qualquer leve transbordo vire barra de rolagem horizontal. */
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
section { position: relative; }

.container {
  width: 100%;
  max-width: 1312px;
  margin-inline: auto;
  padding-inline: var(--ds-space-6);
}

/* Padding vertical padrão de seção — utilitário genérico, pra não precisar
   "emprestar" a classe de outra seção só pelo espaçamento. */
.section-pad { padding-block: var(--section-padding-block); }

/* ===== Transição de entrada/navegação — 1 painel grafite, sobe/desce ===== */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.page-transition__panel {
  width: 100%;
  height: 100%;
  background: var(--color-brand-primary);
  /* Estado padrão (antes do JS rodar): fechado, cobrindo a tela — evita
     qualquer flash de conteúdo antes da animação de abertura. */
  transform: translateY(0);
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
/* "Aberto" — sobe e sai de cena por cima. Fechar é só tirar esta classe,
   o painel desce de volta cobrindo a tela com a mesma transição. */
.page-transition.is-open .page-transition__panel { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .page-transition__panel { transition: none; }
}

/* Alternância clara/escura entre seções (só sobrescreve — o padrão da
   página já é escuro via `body`). A pré-penúltima seção antes do rodapé
   é branca por exigência de composição: o rodapé encosta nela com radius. */
.section--light {
  background: var(--color-surface-default);
  color: var(--color-text-default);
}

/* ===== Utilitários tipográficos — html/* (docs/DESIGN.md, mapeamento HTML/SEO) ===== */
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5,
.text-p, .text-small, .text-tag, .text-badge {
  font-family: var(--ds-font-family-base);
  margin: 0;
}
.text-h1 { font-size: var(--font-heading-xl-size); font-weight: var(--font-heading-xl-weight); letter-spacing: var(--font-heading-xl-tracking); line-height: var(--font-heading-xl-leading); }
.text-h2 { font-size: var(--font-heading-lg-size); font-weight: var(--font-heading-lg-weight); letter-spacing: var(--font-heading-lg-tracking); line-height: var(--font-heading-lg-leading); }
.text-h3 { font-size: var(--font-heading-md-size); font-weight: var(--font-heading-md-weight); letter-spacing: var(--font-heading-md-tracking); line-height: var(--font-heading-md-leading); }
.text-h4 { font-size: var(--font-heading-sm-size); font-weight: var(--font-heading-sm-weight); letter-spacing: var(--font-heading-sm-tracking); line-height: var(--font-heading-sm-leading); }
.text-h5 { font-size: var(--font-subheading-size); font-weight: var(--font-subheading-weight); letter-spacing: var(--font-subheading-tracking); line-height: var(--font-subheading-leading); }
.text-p { font-size: var(--font-body-size); font-weight: var(--font-body-weight); letter-spacing: var(--font-body-tracking); line-height: var(--font-body-leading); }
/* Variante "grande" do body (20px) — soma à .text-p, nunca sozinha. */
.text-p-lg { font-size: var(--font-body-lg-size); line-height: var(--font-body-lg-leading); }
.text-small { font-size: var(--font-caption-size); font-weight: var(--font-caption-weight); letter-spacing: var(--font-caption-tracking); line-height: var(--font-caption-leading); }
.text-tag { font-size: var(--font-label-sm-size); font-weight: var(--font-label-sm-weight); letter-spacing: var(--font-label-sm-tracking); line-height: var(--font-label-sm-leading); text-transform: uppercase; }
.text-badge { font-size: var(--font-label-xs-size); font-weight: var(--font-label-xs-weight); letter-spacing: var(--font-label-xs-tracking); line-height: var(--font-label-xs-leading); }

.text-muted { opacity: 0.72; }
.text-accent-warm { color: var(--color-accent-warm); }
.text-accent-highlight { color: var(--color-accent-highlight); }

/* ===== Ícones (grid 24px / traço 1.75 / sem preenchimento — tokens/primitive/icon.tokens.json) ===== */
.icon {
  width: var(--ds-icon-size-md);
  height: var(--ds-icon-size-md);
  stroke: currentColor;
  stroke-width: var(--ds-icon-stroke-width);
  fill: none;
  flex-shrink: 0;
}
.icon--sm { width: var(--ds-icon-size-sm); height: var(--ds-icon-size-sm); }
.icon--lg { width: var(--ds-icon-size-lg); height: var(--ds-icon-size-lg); }

/* ===== Botão — Button/Filled (radius.sm, hug no texto — nunca fill-container) ===== */
.btn {
  display: inline-flex;
  align-self: flex-start;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  font-size: var(--font-body-size);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Tamanhos da escala do componente (tokens/component/button.tokens.json) */
.btn--sm { height: var(--height-compact); padding-inline: var(--padding-inline-tight); }
.btn--md { height: var(--height-comfortable); padding-inline: var(--padding-inline-comfortable); }

.btn--warm {
  background: var(--color-accent-warm);
  color: var(--color-text-default);
}
.btn--warm:hover, .btn--warm:focus-visible { background: var(--color-accent-warm-hover); }
.btn--warm:active { background: var(--color-accent-warm-active); }

.btn--outline {
  background: transparent;
  color: var(--color-text-inverse);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-text-inverse);
}

/* ===== Header / Navbar — pill flutuante com glass, por cima da hero ===== */
.site-header {
  position: fixed;
  top: var(--ds-space-4);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: var(--ds-space-6);
  pointer-events: none;
}
.site-header__pill {
  pointer-events: auto;
  position: relative;
  width: 100%;
  /* Estado "normal": sem teto de largura (some até 1320px, o próprio
     container). Ao rolar pra baixo, .site-header--compact reduz isso —
     ver regra abaixo — criando o efeito de encolher/expandir. */
  max-width: 1320px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ds-space-6);
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) var(--ds-space-6);
  border-radius: var(--radius-lg);
  background: rgba(46, 46, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  transition: max-width 0.35s ease, padding 0.35s ease;
}
/* Encolhe ao rolar pra baixo, volta ao normal ao rolar pra cima — classe
   controlada por js/main.js a partir da direção do scroll. */
.site-header--compact .site-header__pill {
  max-width: 760px;
  padding: var(--ds-space-2) var(--ds-space-4);
}
.site-header--compact .site-header__logo { height: 20px; }
.site-header--compact .site-header__nav { gap: var(--ds-space-6); }
.site-header__brand { justify-self: start; }
.site-header__logo {
  height: 26px;
  width: auto;
  transition: height 0.35s ease;
}
.site-header__nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  transition: gap 0.35s ease;
}
.site-header__nav a {
  position: relative;
  padding-bottom: 6px;
  font-size: var(--font-body-size);
  font-weight: var(--ds-weight-medium);
  color: var(--color-text-inverse);
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}
/* Linha amarelo-queimado se formando embaixo no hover/foco */
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent-warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible { opacity: 1; }
.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after { transform: scaleX(1); }
.site-header__nav a[aria-current="page"] {
  opacity: 1;
  color: var(--color-accent-warm);
  font-weight: var(--ds-weight-bold);
}
.site-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__cta { justify-self: end; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  justify-self: end;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }

/* ===== Hero — vídeo de fundo 100vh/100vw, navbar sobreposta, texto no canto inferior esquerdo ===== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: var(--ds-space-16);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Gradiente grafite (grafite-900, tokens/primitive/color.tokens.json) saindo do
     canto inferior esquerdo em ângulo — mesma direção do texto — para dar
     legibilidade sem escurecer o vídeo inteiro. */
  background: linear-gradient(to top right, rgba(19, 19, 20, 0.95) 0%, rgba(19, 19, 20, 0.62) 28%, rgba(19, 19, 20, 0.2) 52%, rgba(19, 19, 20, 0) 72%);
}
.hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
}
.hero__heading {
  margin: 0;
  max-width: 480px;
  font-size: clamp(36px, 5.5vw, var(--font-heading-xl-size));
  font-weight: var(--font-heading-xl-weight);
  letter-spacing: var(--font-heading-xl-tracking);
  line-height: 1.1;
}
.hero__heading .is-light { font-weight: var(--ds-weight-regular); }
.hero__heading .is-emphasis { font-weight: var(--ds-weight-bold); }
.hero__heading .is-semibold { font-weight: var(--ds-weight-semibold); }

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-8);
}
.hero__support { max-width: 44ch; margin: 0; }
.hero__buttons { display: flex; gap: var(--ds-space-4); flex-shrink: 0; }

/* ===== About-us (duas variações: mídia à esquerda / mídia à direita) ===== */
.about {
  padding-block: var(--section-padding-block);
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-12);
  align-items: center;
}
/* A seção que encosta no rodapé precisa "vazar" branco por baixo do corte
   arredondado do rodapé (ver .site-footer acima) — respiro extra só nela. */
/* Generalizado (não mais preso ao id #evolucao) pra qualquer página do
   hotsite poder usar a mesma peça de rodapé — a seção que encosta nele só
   precisa das duas classes juntas. */
.section--light.pre-footer { padding-bottom: calc(var(--section-padding-block) + var(--radius-lg)); }

.about--media-right .about__media { order: 2; }
.about--media-right .about__content { order: 1; }
.about__media img,
.about__media video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.about__content { display: flex; flex-direction: column; gap: var(--ds-space-8); }
.about__content .text-h2,
.about__content .text-h3 { max-width: 22ch; }
.about__content .text-p { max-width: 42ch; opacity: 0.88; }

/* ===== Texto "fundamentos" — parágrafo grande revelado letra a letra no
   scroll: <span class="char"> gerado em runtime pelo main.js, cor anima de
   bem apagada até a cor sólida do texto. A peça inteira revela (sem trecho
   fixo/destacado), alinhado à esquerda, não centralizado. ===== */
.fundamentos-lead {
  max-width: none;
  font-size: 40px;
  font-weight: var(--ds-weight-regular);
  line-height: 1.24;
  color: var(--color-text-default);
}
.fundamentos-lead__block { display: block; }

/* ===== Cards (citação + gif) + imagem de campanha ===== */
.evolve {
  padding-block: var(--section-padding-block);
}
.evolve__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--ds-space-8);
  align-items: stretch;
}
.evolve__stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
}
.card-quote {
  background: var(--color-surface-inverse-alt);
  border-radius: var(--radius-md);
  padding: var(--ds-space-12) var(--ds-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  min-height: 290px;
  justify-content: center;
}
.card-quote .text-h3 { max-width: 20ch; }
.card-quote .text-p { opacity: 0.8; }
.evolve__photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 180px;
}
.evolve__photo img,
.evolve__photo video { width: 100%; height: 100%; object-fit: cover; }
.evolve__campaign {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.evolve__campaign img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Experiência que gera eficiência — intro + 4 diferenciais + números ===== */
.experience { padding-block: var(--section-padding-block); }
/* Coluna com gap próprio em vez de margin em cada filho — margins de blocos
   irmãos colapsariam (ex.: margin-bottom do grid + margin-top do lead virava
   só o maior dos dois, nunca a soma), resultando em menos respiro do que o
   valor declarado. Gap em flex nunca colapsa. */
.experience__stack { display: flex; flex-direction: column; }
.experience__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-space-6);
  margin: 0 auto var(--ds-space-16);
}
.experience__intro .text-p { opacity: 0.72; }
.experience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-8);
  margin-bottom: var(--ds-space-16);
}
.experience-item { position: relative; display: flex; flex-direction: column; }
/* Linha divisória entre itens — centralizada no meio do gap do grid, sem
   precisar de um elemento de linha à parte no HTML. */
.experience-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--ds-space-8) / -2 - 0.5px);
  width: 1px;
  background: var(--color-border-inverse);
}
.experience-item__icon { width: 141px; height: 141px; margin-bottom: var(--ds-space-6); }
.experience-item .text-h4 { font-size: var(--font-subheading-size); color: var(--color-accent-warm); margin-bottom: var(--ds-space-4); }
.experience-item .text-p { opacity: 0.8; }
/* Parágrafo grande entre os 4 diferenciais e o bloco de números — mesma
   escala visual do "fundamentos-lead", mas centralizado e sem animação. */
/* Margin do maior degrau existente no DS (--section-padding-block, 128px
   desktop / 88px ≤960px) — pedido explícito de bastante respiro aqui,
   maior que qualquer token de espaçamento primitivo (--ds-space-16 = 64px
   é o teto da escala primitiva). */
.experience__lead {
  max-width: 1198px;
  margin: var(--section-padding-block) auto;
  font-size: 40px;
  line-height: 1.1;
  text-align: center;
  color: var(--color-text-inverse);
}

/* ===== Estatísticas — cards individuais (label em cima / número / legenda) ===== */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-4);
}
.stat-card {
  background: var(--color-surface-inverse-alt);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-md);
  padding: var(--ds-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}
.stat-card__icon { color: var(--color-accent-warm); margin-bottom: var(--ds-space-2); }
.stat-card__label {
  font-size: var(--font-caption-size);
  opacity: 0.62;
}
.stat-card__number {
  margin-top: var(--ds-space-2);
  font-size: var(--font-display-stat-size);
  font-weight: var(--ds-weight-regular);
  letter-spacing: var(--font-heading-xl-tracking);
  line-height: 1;
}
.stat-card__caption {
  margin-top: var(--ds-space-1);
  font-size: var(--font-caption-size);
  opacity: 0.55;
}

/* ===== De olho no futuro — intro + 2 cards (identidade / Clara IA) ===== */
.future { padding-block: var(--section-padding-block); }
.future__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  max-width: 640px;
  margin-bottom: var(--ds-space-14);
}
.future__intro .text-p { opacity: 0.72; }
.future__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-10);
}
.future-item {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--ds-space-10);
}
.future-item .text-h3 { max-width: 20ch; }
.future-item .text-p { max-width: 44ch; opacity: 0.82; }
/* Ilustração do card — soma ao gap padrão do card (16px) mais 16px de
   margem própria, resultando nos 32px de respiro do Figma antes do título. */
.future-item__art { width: 100%; height: auto; margin-bottom: var(--ds-space-2); }

/* ===== Footer — padrão institucional de LP (Figma node 955:4810), adotado
   pra todo hotsite/LP daqui pra frente. Adaptação desta LP: logo é a mesma
   já usada no header (não existe um "logotema" à parte pro 40 anos), frase
   de apoio é a que já existia. Sem nav/links legais — o Figma não pede, e
   a navegação já vive inteira no header; os links "institucionais" que
   existiam aqui eram só placeholder (href="#"), não perdem função real. */
.site-footer {
  position: relative;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-radius: 32px 32px 0 0;
  padding: var(--ds-space-16) 80px;
  /* O canto arredondado corta um pedaço do próprio rodapé — sem isto, o que
     aparece por trás do corte é o fundo escuro do <body>, não a seção clara
     logo acima, e o radius fica invisível (mesma cor dos dois lados). Puxar
     o rodapé para cima por cima do respiro extra da seção anterior resolve:
     o corte passa a revelar branco de verdade. -32px acompanha o radius
     acima (era -var(--radius-lg)/-24px antes, quando o corte também era
     24px — o Figma pede 32px agora). */
  margin-top: -32px;
}
.site-footer__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-8);
  max-width: 1600px;
  margin-inline: auto;
  text-align: center;
}
/* width/height fixos nas 2 dimensões do slot do Figma (205x40, proporção
   diferente) esmagavam o logotema real (180x28, mais "baixo e largo") —
   height:auto deixa a proporção nativa do arquivo mandar. */
.site-footer__logo { width: 180px; height: auto; }
.site-footer__tagline { margin: 0; font-size: var(--font-body-lg-size); color: var(--ds-grafite-300); }
.site-footer__copyright { margin: 0; font-size: var(--font-caption-size); color: var(--color-text-inverse); }
.site-footer__social { display: flex; align-items: center; gap: var(--ds-space-4); }
.site-footer__social a { display: flex; color: var(--color-text-inverse); opacity: 0.8; transition: opacity 0.15s ease; }
.site-footer__social a:hover, .site-footer__social a:focus-visible { opacity: 1; }
.site-footer__social-icon { width: 16px; height: 16px; fill: currentColor; }

/* ===== Página "História" — componentes novos desta subpágina =====
   Mecanismo original de referência: https://icarda.org/icarda-at-50
   (timeline em blocos, texto sticky ao lado, barra de progresso). Visual
   100% tokens do DS, com simplificações reais em relação à referência (ver
   plano da sessão que criou esta página):
   1) a barra vira horizontal NO TOPO (não lateral);
   2) a barra fica `position:sticky` (não `fixed`+JS de show/hide) — ela é
      o primeiro filho de `.history-timeline`, que envolve os 4 blocos de
      era + o bloco "presente"; sticky nativo já a faz aparecer/sumir
      sozinha nas bordas desse container, sem replicar o hack de
      ScrollTrigger que a referência precisa só por ser `fixed`;
   3) os cards de foto NÃO empilham mais (diferente do ICARDA) — só o texto
      (`.history-block__sticky`) fica sticky/centralizado, os cards passam
      em fluxo normal ao lado. Mudança pedida depois de testar o empilhar:
      a troca de card cobria ano/título do card anterior no meio da
      transição, quebrando a leitura (ver `.history-card`). */

/* Hero — 2 dobras claras (Figma: node 1413:1850). Seção única, claro via
   .section--light (mesmo mecanismo de .about/.pre-footer, nunca inventado
   de novo aqui) — sem altura fixa (o Figma usa padding, não 100vh, ao
   contrário da v1 desta seção). Dobra 1 (.history-hero__fold1): logo +
   título + régua "1986—2026" + ficha técnica, colados ao gráfico "40"
   (canvas+vídeo+barras, ver .history-hero-graphic mais abaixo) — gap
   pequeno de propósito, pra o vídeo já espiar na entrada do site sem
   precisar rolar. Dobra 2 (.history-hero-intro): os 2 parágrafos que
   abriam a v1, ao lado da foto do fundador — essa sim mantém o respiro
   de seção padrão (--section-padding-block) em relação à dobra 1. */
.history-hero {
  padding-top: 120px;
  padding-bottom: var(--section-padding-block);
}
.history-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.history-hero__fold1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Dobra 1 — logo + título centralizado + régua de datas + ficha técnica,
   ocupando ~50vh (pedido explícito) pra deixar o gráfico logo em seguida
   já parcialmente visível ao abrir a página. */
.history-hero__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 50vh;
}
.history-hero__logo {
  height: 32px;
  width: auto;
  margin-bottom: var(--ds-space-6);
}
.history-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-6);
  width: 100%;
  max-width: 640px;
  margin-top: var(--ds-space-6);
}
.history-hero__meta-line { flex: 1; height: 1px; background: var(--color-border); }
.history-hero__top .history-facts { width: 100%; }

/* Gráfico "40" — canvas (js/history-hero-40.js) + vídeo (gif-40-anos.mp4,
   card.mp4 já usa o mesmo padrão .js-lazy-video) + 2 barras decorativas.
   aspect-ratio e % de posicionamento medidos no frame Figma (node
   1429:39855): grupo de referência 1123×717px. margin-top pequeno de
   propósito — ver comentário no topo do bloco. */
.history-hero-graphic {
  position: relative;
  width: 100%;
  aspect-ratio: 1123 / 717;
  margin-top: var(--ds-space-4);
}
.history-hero-graphic__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.history-hero-graphic__video {
  position: absolute;
  left: 8.3%;
  top: 19.1%;
  width: 83.3%;
  height: 45.2%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.history-hero-graphic__bar {
  position: absolute;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent-warm);
}
.history-hero-graphic__bar--a { top: 31.5%; right: 0; width: 28%; }
.history-hero-graphic__bar--b { top: 50%; left: 0; width: 24%; }

/* Dobra 2 — texto (os 2 parágrafos que abriam a v1 desta seção) + foto do
   fundador (reaproveita historia-1986-fundacao.webp, já no projeto). */
.history-hero-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-16);
  align-items: center;
  width: 100%;
  text-align: left;
  margin-top: var(--section-padding-block);
}
.history-hero-intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}
/* Primeiro parágrafo — tamanho/entrelinha exatos do protótipo Figma
   (40px/112%), bem maior que o body padrão — só esse, não o segundo. */
.history-hero-intro__lead {
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: var(--ds-weight-regular);
  color: var(--color-text-default);
}
.history-hero-intro__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.history-hero-intro__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ficha técnica (fundação/sede/atuação/produto) — 4 colunas com divisórias
   via ::after (mesma técnica de .experience-item, sem elemento extra). */
/* Ficha técnica v2 — chips com borda própria (não mais grid com
   divisórias hairline via ::after, que aliás usava --color-border-inverse,
   pensado pra fundo escuro — ficava invisível na hero clara). flex-wrap
   resolve desktop e mobile com a mesma regra, sem breakpoint dedicado. */
/* Ficha técnica v3 — sem caixa/borda nenhuma (as 2 tentativas com chip
   bordado ficaram com o rótulo colado na borda, mesmo com padding
   generoso — mais simples e à prova de bug tirar a borda de vez). Só
   texto com respiro generoso entre os itens; flex-wrap resolve
   desktop e mobile com a mesma regra. */
/* Ficha técnica v4 — proposta nova de verdade: preenchimento sólido
   (--color-surface-alt, o #f5f5f5 do DS) em vez de borda — as 2
   tentativas anteriores usavam linha/borda e sempre sobrava algum jeito
   do texto encostar nela; com fundo sólido não tem aresta pra encostar. */
.history-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-3);
  width: 100%;
  margin-top: var(--ds-space-10);
}
.history-fact {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  padding: var(--ds-space-4) var(--ds-space-6); /* --ds-space-5 não existe na escala (pula de 4 pra 6) — por isso o padding sumia sempre */
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}
.history-fact__label { color: var(--color-accent-warm); opacity: 0.9; }
.history-fact__value { opacity: 0.88; font-weight: var(--ds-weight-medium); }

/* Envelope da timeline inteira — só existe pra dar à barra sticky um
   container com começo/fim (aparece ao entrar, some ao sair da era
   2021-2025, sem JS nenhum controlando isso — ver comentário em
   .history-present acima sobre o bloco 2026 ter saído daqui). */
.history-timeline { position: relative; padding-top: var(--ds-space-16); }

/* Linha vertical central passando atrás dos cards — puramente decorativa
   (referência: linha conectando os itens numa timeline de outro site).
   ::before em vez de elemento próprio: nasce atrás de tudo por ordem de
   pintura (é o primeiro "filho"), sem precisar de z-index. */
.history-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-border-inverse);
  pointer-events: none;
}

/* Barra de progresso — mesmo material "glass" do .site-header__pill
   (mesma cor/blur/borda), só que horizontal e mais compacta. z-index
   abaixo do header (50) mas acima do conteúdo dos blocos, que não
   declara z-index próprio. */
.history-nav {
  position: sticky;
  top: 96px; /* limpa o .site-header fixo (topo 16px + pill ~64-72px) */
  z-index: 40;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  width: fit-content;
  margin: 0 auto var(--ds-space-16);
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--radius-lg);
  background: rgba(46, 46, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}
.history-nav__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-caption-size);
  font-weight: var(--ds-weight-medium);
  color: var(--color-text-inverse);
  opacity: 0.6;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.history-nav__item:hover { opacity: 0.9; }
.history-nav__item.is-active {
  opacity: 1;
  background: color-mix(in srgb, var(--color-accent-warm) 16%, transparent);
  color: var(--color-accent-warm);
}
.history-nav__index {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-inverse);
  font-size: 11px;
  font-weight: var(--ds-weight-bold);
}
.history-nav__item.is-active .history-nav__index {
  background: var(--color-accent-warm);
  border-color: var(--color-accent-warm);
  color: var(--color-brand-primary);
}

/* Bloco de era — grid de 2 colunas; alterna lado a cada bloco. align-items
   stretch (default do grid) faz .history-block__content (o item em si,
   sem position própria) ficar tão alto quanto a linha inteira (ditada pela
   coluna de cards, mais alta). O sticky NÃO fica nesse item — fica num
   FILHO dele (.history-block__sticky): aplicar position:sticky direto no
   próprio item esticado é um gotcha real de Grid (vários engines não
   calculam a faixa de "colado" corretamente quando o elemento sticky e o
   elemento esticado são o mesmo) — envolver o conteúdo sticky num wrapper
   à parte, que só herda a altura via stretch, é o fix padrão. Só funciona
   em viewport ≥960px — abaixo disso o efeito inteiro é desligado de
   propósito (ver @media no fim do arquivo). */
.history-block {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--ds-space-12);
  align-items: stretch;
  padding-block: var(--section-padding-block);
}
/* Coluna e linha explícitas nos 2 itens de conteúdo — precisa disso pro
   .history-block__waypoint (abaixo) conseguir ocupar a MESMA linha 1
   espalhando as 2 colunas por cima: com auto-placement (sem grid-row
   fixo aqui), o algoritmo via os 2 itens como span 1/-1 do waypoint como
   "ocupado" e empurrava os dois pra uma linha 2 nova, quebrando a
   sobreposição (o marcador simplesmente não teria conteúdo por perto pra
   sobrepor). */
.history-block__content { grid-column: 1; grid-row: 1; }
.history-block__cards { grid-column: 2; grid-row: 1; }
.history-block--reverse .history-block__content { grid-column: 2; }
.history-block--reverse .history-block__cards { grid-column: 1; }

/* Marcador na linha central — "trava" junto com .history-block__sticky
   (mesmo top:50%/translateY(-50%), mesma faixa de sticky: nasce e solta
   junto porque é irmão dele, na mesma linha do grid). grid-column:1/-1 +
   justify-self:center centraliza no meio do grid inteiro, exatamente onde
   .history-timeline::before (a linha) já fica. Discreto de propósito —
   mesma cor/opacidade da linha, só um pouco maior pra não sumir. */
.history-block__waypoint {
  display: block; /* é um <span> no HTML — sem isso width/height são ignorados */
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-accent-warm);
  pointer-events: none;
  z-index: 1; /* garante que fica por cima do conteúdo das 2 colunas do grid, que ocupam a mesma célula */
}

.history-block__sticky {
  position: sticky;
  top: 50%;
  transform: translateY(-50%); /* centraliza verticalmente no viewport enquanto gruda, em vez de colar perto do topo */
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  max-width: 88%; /* mesmo descolamento da linha central que .history-block__cards já tem */
  margin-right: auto;
}
.history-block--reverse .history-block__sticky { margin-right: 0; margin-left: auto; }
.history-block__sticky .text-tag { color: var(--color-accent-warm); }
.history-block__sticky .text-p { opacity: 0.85; max-width: 46ch; }

/* max-width < 100% + margin auto pro lado externo: descola a coluna de
   fotos da linha central decorativa (.history-timeline::before), que
   sem isso encostava/cruzava as fotos — o lado que "sobra" a margem
   automática depende de qual coluna do grid os cards ocupam (ver
   .history-block--reverse abaixo). */
.history-block__cards {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
  max-width: 88%;
  margin-left: auto;
}
.history-block--reverse .history-block__cards { margin-left: 0; margin-right: auto; }

/* Card — sem caixa/borda visível (Figma: node 1429:39970, medido em
   metadata bruta: foto 331.874px de um card de 403.21px = 82.3% da
   largura, encostada numa ponta; ano+"marco" ficam encostados na PONTA
   OPOSTA do card — não da foto — por isso ficam metade dentro, metade
   fora dela. Proporções replicadas via % abaixo. Alternância
   esquerda/direita via nth-child: cada card espelha foto+grupo pro lado
   oposto do anterior. */
.history-card { position: relative; }
.history-card__photo {
  margin-left: auto; /* padrão (ímpar): foto encostada na direita, sobra a esquerda pro grupo invadir */
}
.history-card:nth-child(even) .history-card__photo { margin-left: 0; margin-right: auto; }

.history-card__group {
  position: absolute;
  left: 0;
  bottom: 6.5%; /* medido: (351.72 - 328.88) / 351.72 */
  max-width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-4);
}
.history-card:nth-child(even) .history-card__group {
  left: auto;
  right: 0;
  align-items: flex-end;
}
.history-card__year {
  margin: 0;
  color: var(--color-accent-warm);
  font-family: var(--ds-font-family-base);
  font-size: 72px;
  font-weight: var(--ds-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
}
.history-card__title {
  margin: 0;
  font-size: 24px; /* maior que o --font-body-size herdado de .text-p — proporção medida no Figma */
  line-height: 1.3;
  background: var(--color-surface-default);
  color: var(--color-text-default);
  border-radius: 8px; /* menor que --radius-md — valor exato do Figma pro "marco" */
  padding: var(--ds-space-2) var(--ds-space-4);
  opacity: 1;
}

/* Moldura de foto do card — object-fit:cover porque as fotos de arquivo
   (1986-2009, 480x480) e as recentes (16:9/3:2) não batem com o
   aspect-ratio do container; sempre cropam, nunca distorcem. */
.history-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
/* Altura fixa (não aspect-ratio) — pedido explícito: no máximo 400px,
   qualquer que seja a largura da coluna. object-fit:cover (herdado de
   .history-photo/.history-placeholder) cropa sem distorcer fotos de
   proporção variada (480x480 de arquivo vs. 16:9/3:2 recentes). Largura
   82.3% (não 100%) — medida do Figma (node 1429:39970): é essa folga na
   ponta oposta que deixa o ano/marco meio dentro, meio fora da foto (ver
   .history-card__photo margin-left/right e .history-card__group acima). */
.history-card__photo { width: 82.3%; height: 400px; }

/* Bloco "presente" (2026) — claro (Figma: node 1429:39912), FORA de
   .history-timeline (movido pra depois dela em historia.html): não é mais
   uma era igual às outras dentro da timeline escura, é o fecho visual
   antes do depoimento. Por isso saiu de dentro do wrapper — a barra
   sticky (.history-nav) é filha de .history-timeline e solta o sticky na
   borda dele; com o bloco fora, ela solta um pouco antes (fim da era
   2021-2025), o que é correto: não faria sentido a barra escura/vidro
   flutuar sobre uma seção branca. */
.history-present {
  padding-top: var(--section-padding-block);
}
.history-present__intro {
  max-width: 1176px;
  margin-inline: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  opacity: 0.88;
}

/* Ilustração halftone da fachada (baixada do Figma, assets/historia/
   historia-2026-fachada.webp) — mix-blend-mode:darken funde o branco de
   fundo da própria ilustração com o branco da seção (some a "caixa" da
   imagem), e o ::after replica a máscara radial do Figma (vinheta clara
   nas bordas), ambos sem precisar de SVG externo. */
.history-present__photo {
  position: relative;
  margin-top: var(--section-padding-block);
  width: 100%;
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
}
.history-present__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: darken;
}
.history-present__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 68%, var(--color-surface-default) 100%);
  pointer-events: none;
}
/* Fechamento — depoimento Appel Home (reaproveita .about/.about__grid,
   já genéricos, não específicos de nenhuma subpágina) + CTA final. */
.history-video-placeholder { width: 100%; max-width: 320px; aspect-ratio: 9 / 16; margin-inline: auto; }
.history-video-placeholder video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface-inverse-alt);
}

/* CTA final — card escuro arredondado (Figma: node 1413:2063) sentado
   sobre a seção clara (.section-pad.section--light.pre-footer, mantida
   por causa do corte arredondado do rodapé — ver comentário dela mais
   acima). border-radius de 32px é valor único do Figma, fora da escala
   --radius-md/lg (16/24) — exceção pontual, igual ao padding-top do hero. */
.history-closing-card {
  background: var(--color-brand-primary);
  border-radius: 32px;
  padding: var(--ds-space-16);
}
.history-closing {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-12); /* 48px — bate exato com o Figma, não os 24px de antes */
  color: var(--color-text-inverse);
}
/* .btn tem align-self:flex-start fixo (pensado pra blocos alinhados à
   esquerda, ex. .about__content) — aqui o card inteiro é centralizado,
   então precisa da própria sobrescrita, senão o botão cola na esquerda. */
.history-closing .btn { align-self: center; }
.history-closing__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-4); /* 16px, exato do Figma */
  width: 100%;
}
/* evita palavra órfã sozinha numa 2ª linha (ex. "Quatro décadas reúnem
   mudanças de estrutura, produto, processos e relacionamento." em
   manifesto.html) — vale pro card em qualquer página que o reaproveite. */
.history-closing__text p { text-wrap: balance; }
/* Larguras exatas do Figma pros 2 parágrafos (não um max-width único pro
   grupo inteiro) — o 1º respira mais que o 2º dentro do mesmo card. */
.history-closing .text-p { opacity: 0.82; max-width: 1034px; }
.history-closing .text-p:last-of-type { max-width: 800px; }

/* ===== Manifesto (manifesto.html) ===== */

/* Hero: eyebrow + H1 + 2 parágrafos de abertura (centralizados) + vídeo
   contido logo abaixo (radius-lg), tudo dentro do mesmo .container — v1
   do vídeo era full-bleed/edge-to-edge; revertido a pedido do guardião
   ("não gostei"), volta ao tratamento contido que o resto do site usa
   (mesmo espírito do vídeo de #sustentacao na Home). */
.manifesto-hero { padding-top: 160px; padding-bottom: var(--section-padding-block); }
.manifesto-hero__stack {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-4);
  text-align: center;
}
/* Pedido explícito: nunca quebra linha. Tamanho fluido (mesma técnica de
   .hero__heading na Home) em vez dos degraus fixos padrão de .text-h1,
   porque com nowrap um degrau fixo pode transbordar em alguma largura de
   tela intermediária — o fluido acompanha continuamente. Seletor
   composto (h1.manifesto-hero__title, não só a classe) de propósito: as
   media queries mais abaixo redefinem .text-h1 em telas ≤960px/≤640px, e
   com a MESMA especificidade quem vier depois no arquivo venceria —
   aumentar a especificidade aqui garante que o fluido nunca seja
   sobrescrito. Peso regular por padrão (Figma: só "Confiança" é negrito,
   o resto do título é regular — .text-h1 sozinho seria semibold uniforme).
   Vale conferir num celular real; sem ferramenta de preview neste
   ambiente pra calibrar visualmente. */
h1.manifesto-hero__title {
  white-space: nowrap;
  font-size: clamp(22px, 6.5vw, var(--font-heading-xl-size));
  font-weight: var(--ds-weight-regular);
}
.manifesto-hero__title strong { font-weight: var(--ds-weight-bold); }
/* Gap interno do bloco H1+parágrafo (24px, Figma) menor que o gap geral
   da hero (48px, ver .manifesto-hero__stack) — hierarquia de dois
   níveis, não um gap uniforme. */
.manifesto-hero__head { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-6); }
.manifesto-hero__lead-p { max-width: 60ch; opacity: 0.88; text-wrap: balance; }
/* margin-block (não gap do stack) de propósito — pedido explícito de mais
   respiro só ao redor do vídeo, maior que o gap dos outros elementos da
   hero. aspect-ratio no CONTAINER (não nos vídeos) porque agora são 2
   vídeos empilhados (preview + real, ambos position:absolute/inset:0) —
   precisam de uma caixa com altura já definida pra se encaixarem.

   ESCAPA do .manifesto-hero__stack (max-width:860px) de propósito — a
   1ª tentativa de aumentar (812->934px) não teve efeito NENHUM porque o
   PAI já travava tudo em 860px antes do vídeo chegar a valer seu próprio
   max-width (bug real, não só "não aumentou o bastante"). O stack já é
   flex + align-items:center — isso SOZINHO já centraliza um item mais
   largo que o container (o overflow sobra igual dos dois lados), sem
   precisar de nenhum truque extra. A 2ª tentativa (left:50% +
   translateX(-50%), pensada pra "quebrar" o container) foi um bug: as
   duas porcentagens são calculadas em cima de bases DIFERENTES (largura
   do container vs. largura do próprio vídeo), não se cancelam, e
   empurravam o vídeo ~120px pra esquerda do centro real. Removida —
   basta a largura fixa (1100px) + max-width em vw pra nunca estourar a
   tela; o align-items do pai faz o resto. Largura alvo 1100px — na
   altura (aspect-ratio 16:9 ainda intacto), empurra o fundo do vídeo pra
   além dos 100vh na maioria das telas, deixando claro que tem mais
   conteúdo abaixo (pedido explícito). */
.manifesto-hero__video {
  position: relative;
  width: 1100px;
  max-width: calc(100vw - 40px);
  aspect-ratio: 16 / 9;
  margin-block: 24px;
}
.manifesto-hero__preview,
.manifesto-hero__real {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: #000; /* letterbox — evita flash branco antes do vídeo/poster carregar */
}
/* Preview (loop mudo) fica visível por padrão; o vídeo real nasce
   invisível/inerte embaixo dele até o clique no play (classe
   .is-engaged, ver main.js) — depois disso o real assume de vez (nunca
   mais volta pro preview, mesmo se pausar). */
.manifesto-hero__preview { z-index: 1; }
.manifesto-hero__real { z-index: 0; opacity: 0; pointer-events: none; }
.manifesto-hero__video.is-engaged .manifesto-hero__real { opacity: 1; pointer-events: auto; z-index: 2; }
.manifesto-hero__video.is-engaged .manifesto-hero__preview { opacity: 0; pointer-events: none; }

/* Botão de play custom, 64×64px, círculo amarelo — pedido explícito.
   Some ao clicar (.is-engaged, permanente — não volta ao pausar depois). */
.manifesto-hero__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-accent-warm);
  color: var(--color-text-default);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;
}
.manifesto-hero__play:hover, .manifesto-hero__play:focus-visible { background: var(--color-accent-warm-hover); }
.manifesto-hero__play svg { width: 26px; height: 26px; margin-left: 3px; } /* leve deslocamento — o triângulo do ícone não é opticamente centralizado */
.manifesto-hero__video.is-engaged .manifesto-hero__play { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .manifesto-hero__play { transition: none; } }

/* Barras decorativas — mesmo recurso gráfico do gráfico "40" do hero de
   História (.history-hero-graphic__bar), aqui sobre o vídeo em vez de ao
   redor dele (não há moldura/canvas extra sobrando neste layout). Somem
   junto com o play ao engajar — na tela de controles nativos do vídeo
   real elas concorreriam com a barra de progresso/botões. */
.manifesto-hero__bar {
  position: absolute;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent-warm);
  z-index: 3;
  transition: opacity 0.2s ease;
}
/* right/left NEGATIVOS de propósito — não travam na borda do vídeo
   (right:0/left:0, tentativa anterior), atravessam ela de verdade: a
   barra nasce um pouco FORA (na margem que sobra do quebra-container
   acima) e se estende pra dentro do vídeo, exatamente como em
   .history-hero-graphic__bar (lá sobra espaço de canvas ao redor do
   vídeo pro mesmo efeito; aqui não tem canvas extra, então a barra
   precisa "vazar" pra fora do próprio vídeo pra conseguir a mesma
   sobreposição). .manifesto-hero__video não recorta overflow (só os
   vídeos/play internos têm border-radius+seu próprio clip), então a
   parte "de fora" da barra aparece normalmente. */
.manifesto-hero__bar--a { top: 14%; right: -6%; width: 24%; }
.manifesto-hero__bar--b { bottom: 14%; left: -6%; width: 20%; }
.manifesto-hero__video.is-engaged .manifesto-hero__bar { opacity: 0; pointer-events: none; }
.manifesto-hero__meta { max-width: 700px; width: 100%; }
/* .btn tem align-self:flex-start fixo (pensado pra blocos alinhados à
   esquerda) — a hero inteira é centralizada, então precisa da própria
   sobrescrita, senão o CTA cola na esquerda (mesmo bug já resolvido em
   .history-closing .btn). */
.manifesto-hero__stack .btn { align-self: center; }

/* ===== Corpo do manifesto — refeito fiel ao Figma (node 1436:40632) =====
   Seção escura por OMISSÃO de .section--light (mesmo mecanismo de
   .evolve/.experience: mostra o grafite-500 padrão do body). Container
   mais largo que a v1 desta seção (1210px, não 720px) — o Figma usa a
   MESMA largura pra grade de fotos e pra prosa corrida, não uma coluna
   de leitura estreitada à parte. */
.manifesto-body { padding-block: var(--section-padding-block); }
.manifesto-body__stack {
  max-width: 1210px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--section-padding-block);
}
.manifesto-body__visual { display: flex; flex-direction: column; gap: var(--ds-space-4); text-align: left; }
.manifesto-body__p { width: 100%; font-size: var(--font-manifesto-p-size); line-height: 1.25; }

/* ---------- Grade de 3 colunas com fotos (.mfoto) ----------
   Estrutura, animação de parallax (--p escrito pelo JS) e responsividade
   mobile REAPROVEITADAS ao pé da letra de
   "2026/LP Rebrand/build-ftp/index.html" (seção #fotografia, classe
   .foto) — mesmo mecanismo, só cor de fundo/texto mudou (lá é seção
   clara/grafite sobre branco, aqui é texto branco sobre o escuro padrão
   desta página). Radius 10px (não --radius-lg=24px do DS) e aspect-ratio
   exatos batem com o Figma desta seção — extensão local documentada,
   mesmo espírito de --font-body-lg-size em tokens.css. */
.mfoto { --p: 0; display: flex; align-items: center; gap: clamp(24px, 3vw, 40px); }
.mfoto__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); will-change: transform; }
.mfoto__col--1 { gap: clamp(36px, 4.8vw, 64px); transform: translateY(calc(var(--p) * -70px)); }
.mfoto__col--2 { transform: translateY(calc(var(--p) * 60px)); }
.mfoto__col--3 { transform: translateY(calc(var(--p) * -100px)); }
.mfoto__title { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.mfoto__eyebrow { color: var(--color-accent-warm); }
.mfoto__h2 { margin: 0; font-weight: var(--ds-weight-regular); font-size: var(--font-heading-md-size); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-text-inverse); max-width: 380px; }
.mfoto__img { margin: 0; border-radius: 10px; overflow: hidden; }
.mfoto__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mfoto__img--gestora { aspect-ratio: 400 / 666; }
.mfoto__img--analista { aspect-ratio: 400 / 306; }
.mfoto__img--agro { aspect-ratio: 400 / 391; }
.mfoto__img--operador { aspect-ratio: 400 / 306; }
.mfoto__img--executivo { aspect-ratio: 400 / 293; }
.mfoto__img--fabrica { aspect-ratio: 400 / 268; }
.mfoto__sub { padding-block: clamp(16px, 2vw, 24px); }
.mfoto__sub p { margin: 0 0 20px; font-size: var(--font-manifesto-p-size); line-height: 1.25; color: var(--color-text-inverse); }
.mfoto__sub p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .mfoto__col { transform: none; } }

/* versão mobile — carrossel automático (trilha duplicada, anda 0→-50%:
   como a 2ª cópia é idêntica à 1ª, o loop fecha sem costura). Escondida
   no desktop; troca de visibilidade acontece só no breakpoint ≤960px
   (ver bloco @media mais abaixo). */
.mfoto-mobile { display: none; }
.mfoto-mobile__head { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.mfoto-mobile__sub { margin-top: var(--ds-space-6); display: flex; flex-direction: column; gap: var(--ds-space-4); }
.mfoto-mobile__sub p { margin: 0; font-size: var(--font-manifesto-p-size); line-height: 1.25; color: var(--color-text-inverse); }
.mfoto-mobile__viewport {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.mfoto-mobile__track { display: flex; align-items: center; gap: 20px; width: max-content; animation: mfotoMobileScroll 36s linear infinite; }
.mfoto-mobile__item { flex: none; margin: 0; width: min(60vw, 260px); border-radius: 10px; overflow: hidden; }
.mfoto-mobile__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes mfotoMobileScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mfoto-mobile__track { animation: none; }
  .mfoto-mobile__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mfoto-mobile__item { scroll-snap-align: start; }
  .mfoto-mobile__viewport { scroll-snap-type: x proximity; }
}

/* ---------- Timeline "Terminal → Consistem 8.0" (.mtimeline) ----------
   Elemento novo, sem precedente no site. Cada marco (.mtimeline__mark) já
   carrega SEU PRÓPRIO marcador (dot) — não um dot solto pra 4 rótulos —
   e SUA foto junto; a linha (.mtimeline__line) é um elemento à parte,
   absoluto, cruzando por trás de todos os dots. No desktop os marcos
   ficam lado a lado (dot+label empilhados em cima, foto embaixo, linha
   horizontal); no mobile cada marco vira uma LINHA (dot+label numa
   coluna estreita à esquerda, foto à direita, linha vertical) — pedido
   explícito, timeline 100% vertical em telas pequenas. Geometria
   aproximada do Figma (não pixel a pixel: a largura do container aqui é
   diferente), 4 capturas de tela reais exportadas do Figma e otimizadas. */
.mtimeline { padding-block: var(--ds-space-12); }
/* .mtimeline__line vive DENTRO de .mtimeline__marks (não de .mtimeline) —
   position:absolute mede a partir do container onde os dots realmente
   nascem; posicionada fora disso, a linha ficava alguns px longe do
   centro real dos dots (bug encontrado: "bolinhas deslocadas abaixo da
   linha"). top:4.5px = metade da altura do dot (9px), centraliza os
   dois. */
.mtimeline__line { position: absolute; left: 4%; right: 4%; top: 4.5px; height: 1px; background: var(--color-border-inverse); }
.mtimeline__marks { position: relative; display: flex; justify-content: space-between; gap: clamp(16px, 2.5vw, 32px); padding-inline: 4%; }
.mtimeline__mark { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mtimeline__meta { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-3); }
.mtimeline__dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-accent-warm); flex-shrink: 0; }
.mtimeline__label { color: var(--color-text-inverse); opacity: 0.8; font-size: var(--font-caption-size); white-space: nowrap; }
.mtimeline__shot { display: block; width: 100%; height: auto; margin-top: var(--ds-space-6); border-radius: var(--radius-sm); }

@media (max-width: 960px) {
  /* Vertical: a linha gira 90°, uma coluna estreita fixa à esquerda
     (largura de .mtimeline__meta) com dot+label empilhados, foto ocupando
     o resto da largura à direita — "2 colunas", pedido explícito. */
  .mtimeline__line { left: 4.5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .mtimeline__marks { flex-direction: column; padding-inline: 0; gap: var(--ds-space-8); }
  .mtimeline__mark { flex-direction: row; align-items: center; gap: var(--ds-space-4); }
  .mtimeline__meta { flex-direction: row; width: 128px; flex-shrink: 0; justify-content: flex-start; }
  /* min-width:0 é o pulo do gato aqui — <img> é elemento substituído, e
     todo item de flex tem min-width:auto por padrão (não encolhe abaixo
     do tamanho intrínseco do conteúdo). Sem isso, flex:1 não tinha efeito
     nenhum de verdade: a imagem recusava encolher abaixo do próprio
     tamanho natural (até 520px de origem) e estourava a largura da tela
     — bug real causando rolagem horizontal no mobile. */
  .mtimeline__shot { width: auto; min-width: 0; flex: 1; margin-top: 0; }
}

/* ---------- Fechamento (.manifesto-close) ----------
   Estático, sem reveal char-a-char (pedido explícito — o efeito fica só
   nos 4 parágrafos de #manifestoBodyA). */
.manifesto-close { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-12); }
.manifesto-close__logo { height: 32px; width: auto; }
.manifesto-close__visual { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ds-space-2); }
.manifesto-close__line { width: 100%; }
.manifesto-close__line--accent { color: var(--color-accent-warm); }
.manifesto-close__lead {
  max-width: 60ch;
  margin-top: var(--ds-space-4);
  opacity: 0.9;
  font-size: var(--font-manifesto-p-size);
  line-height: 1.25;
  text-wrap: balance; /* evita "pratica" órfão numa 2ª linha sozinho */
}

/* ---------- Composição sobre fotografia (.manifesto-comp) ----------
   Mesma TÉCNICA de ".comp" da página de origem (foto + moldura branca +
   tags com leve parallax próprio, brandbook p.58) — geometria e cores
   exatas desta seção do Figma, não os mesmos números daquela página
   (é a mesma ideia de marca, não a mesma composição). --p reaproveita o
   mecanismo já escrito pelo JS pra .mfoto. */
.manifesto-comp { --p: 0; position: relative; width: 100%; aspect-ratio: 1233 / 491; border-radius: var(--radius-lg); overflow: visible; }
.manifesto-comp__foto { position: absolute; inset: 0; margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.manifesto-comp__foto img { width: 100%; height: 100%; object-fit: cover; }
.manifesto-comp__outline {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 43.6%; height: 83%;
  border: 1.5px solid var(--color-text-inverse);
  border-radius: var(--radius-sm);
}
.manifesto-comp__tag {
  position: absolute; z-index: 1;
  max-width: 320px; margin: 0;
  padding: var(--ds-space-4) var(--ds-space-6);
  border-radius: var(--radius-sm);
  font-size: 18px; line-height: 1.3; font-weight: var(--ds-weight-medium);
  color: var(--color-text-default);
}
.manifesto-comp__tag strong { font-weight: var(--ds-weight-bold); }
.manifesto-comp__tag--white {
  left: 9.6%; top: 14.4%;
  background: var(--color-surface-default);
  transform: translateY(calc(var(--p) * -20px));
}
.manifesto-comp__tag--warm {
  left: 61%; top: 65.3%;
  background: var(--color-accent-warm);
  transform: translateY(calc(var(--p) * -32px));
}
@media (prefers-reduced-motion: reduce) { .manifesto-comp__tag { transform: none; } }

/* ---------- Badge "confiança" — seção "Por que falar de confiança"
   (Figma node 1436:40650) ----------
   Caixa amarela com a palavra em extrabold, "pendurada" no canto
   inferior esquerdo da foto — de propósito ultrapassa a borda de baixo
   da imagem (top:85.46% + a própria altura da caixa já passa da borda),
   não é bug de posicionamento; overflow:visible no wrapper permite isso.
   Posição em % (calculada a partir do frame original 608×453.83px do
   Figma) acompanha o redimensionamento responsivo da foto. */
.manifesto-why__media { position: relative; overflow: visible; }
.manifesto-why__tag {
  position: absolute;
  left: 28.78%;
  top: 85.46%;
  margin: 0;
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 24px);
  background: var(--color-accent-warm);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--ds-weight-extrabold);
  font-size: clamp(28px, 5.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ===== Evolução (evolucao.html) ===== */

/* Hero — reajustado no Figma (node 1447:41905): sem eyebrow, 1 parágrafo
   de lead só, e composição foto+moldura+tags do chão de fábrica. */
.evo-hero { padding-top: 180px; padding-bottom: var(--section-padding-block); }
.evo-hero__stack {
  /* 912px = largura exata do H1 no Figma (node 1447:41911) — quebra em
     "A experiência acumulada orienta" / "os próximos movimentos". Valor
     antigo (820px) era de antes deste reajuste e cortava a linha errado. */
  max-width: 912px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-6);
  text-align: center;
}
.evo-hero__stack .is-light { font-weight: var(--ds-weight-regular); }
.evo-hero__lead { max-width: 772px; opacity: 0.88; text-wrap: balance; }

.evo-hero__comp-wrap { margin-top: var(--ds-space-16); }
.evo-comp { position: relative; width: 100%; aspect-ratio: 1280 / 546; border-radius: var(--radius-md); overflow: visible; }
.evo-comp__foto { position: absolute; inset: 0; margin: 0; border-radius: var(--radius-md); overflow: hidden; }
.evo-comp__foto img { width: 100%; height: 100%; object-fit: cover; }
.evo-comp__outline {
  position: absolute; left: 26.64%; top: 7.69%; width: 46.72%; height: 66.48%;
  border: 1.5px solid var(--color-text-inverse);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.evo-comp__tag {
  position: absolute; z-index: 1; margin: 0;
  border-radius: var(--radius-sm);
  font-size: var(--font-body-lg-size); font-weight: var(--ds-weight-medium);
  line-height: 1.2; letter-spacing: -0.02em;
}
.evo-comp__tag--warm {
  left: 20.625%; top: 22.34%;
  padding: 14px 18px;
  background: var(--color-accent-warm);
  color: var(--color-text-inverse);
  white-space: nowrap;
}
.evo-comp__tag--white {
  left: 61.48%; top: 51.47%;
  width: 200px;
  padding: 20px 24px;
  background: var(--color-surface-default);
  color: var(--color-text-default);
}

/* .future tem padding-block simétrico (usado também na Home) — aqui o
   Figma só pede pb-128 (node 1447:41923): o espaço de cima já vem do
   pb-180 da hero (#evolucao-intro) logo acima, então zera só aqui. */
#movimentos { padding-top: 0; }

/* Parágrafos realocados da hero (Figma node 1447:41923) — estatística em
   destaque (40px, início em negrito via <strong>, resto no peso regular
   que a própria tag <p> já usa por padrão) + parágrafo de apoio comum. */
.evo-statement__stack { display: flex; flex-direction: column; gap: var(--ds-space-6); align-items: flex-start; margin-bottom: var(--ds-space-12); }
.evo-statement { margin: 0; max-width: 1080px; font-size: var(--font-heading-md-size); font-weight: var(--ds-weight-regular); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-default); }
.evo-statement strong { font-weight: var(--ds-weight-bold); }
.evo-statement__lead { max-width: 1091px; opacity: 0.88; }

/* ---------- Consistem Clara IA (.clara-suite) ----------
   Seção escura por OMISSÃO de .section--light (mesmo mecanismo de
   .evolve/.experience). 4 blocos alternados fiéis à composição dos
   slides do Figma (node 1447:41678) — cartão escuro com ícone+nome do
   produto, título com ênfase parcial em negrito, ilustração ao lado
   trocando de posição a cada bloco. */
.clara-suite { padding-block: var(--section-padding-block); }
.clara-suite__intro {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 26px; /* reajuste do Figma (era --ds-space-4/16px, com 2 parágrafos) */
  text-align: center;
  margin-bottom: var(--section-padding-block);
}
/* Substitui o eyebrow de texto "Consistem Clara IA" — reajuste do Figma
   (node 1447:42243). Gap com o H2 abaixo é maior (48px) que o gap interno
   H2→parágrafos (16px, do .clara-suite__intro), por isso a margem própria
   em vez de subir o gap do pai inteiro. */
.clara-suite__mark {
  width: 120px; height: 119px; flex-shrink: 0;
  /* Único filho com tamanho fixo do flex column — os outros (h2/p) esticam
     por padrão (align-items:stretch) e o text-align:center cuida deles;
     o ícone, por ter width/height explícitos, não estica e ficava colado
     à esquerda sem isto (bug real, visto ao vivo). */
  align-self: center;
  fill: currentColor; color: var(--color-text-inverse); margin-bottom: var(--ds-space-8);
}
.clara-suite__intro h2, .clara-suite__intro p { width: 100%; }
.clara-suite__intro .text-p { opacity: 0.85; }

.clara-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Colunas continuam 50/50 — o respiro extra entre conteúdo e imagem
     (96-128px, maior que o --ds-space-16/64px padrão) é o que "encolhe"
     a ilustração visualmente. Fluido entre os dois extremos pedidos. */
  gap: clamp(var(--ds-space-16), 6vw, var(--section-padding-block));
  align-items: center;
}
.clara-row + .clara-row { margin-top: var(--section-padding-block); }
.clara-row--reverse .clara-row__content { order: 2; }
.clara-row--reverse .clara-row__art { order: 1; }
.clara-row__content { display: flex; flex-direction: column; gap: var(--ds-space-6); }
.clara-row__badge { display: flex; align-items: center; gap: var(--ds-space-4); }
/* Badge oficial da suíte, fiel ao Figma (node 1447:41901): quadrado
   accent-warm com borda amarelo-700 e ícone sólido/preenchido branco —
   os 4 produtos usam o mesmo tratamento. */
.clara-row__icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent-warm);
  border: 1px solid var(--color-accent-warm-active);
  color: var(--color-text-inverse);
}
.clara-row__icon-glyph { display: block; width: 68%; height: 68%; fill: currentColor; }
.clara-row__badge .text-h4 { line-height: 1.15; color: var(--color-text-inverse); }
.clara-row__title { margin: 0; font-size: var(--font-heading-md-size); font-weight: var(--ds-weight-regular); line-height: 1.2; color: var(--color-text-inverse); }
.clara-row__title strong { font-weight: var(--ds-weight-bold); }
.clara-row .text-p { color: var(--color-text-inverse); opacity: 0.82; max-width: 46ch; }
.clara-row__art { width: 100%; }
/* Assistente e OS: ilustração é o próprio SVG exportado do Figma (ver HTML),
   não um componente construído em HTML/CSS — só precisa escalar. */
.clara-row__art-img { width: 100%; height: auto; display: block; }

/* Clara Agentes — lista de cards (mostra 3 + resumo do restante, como o
   slide original corta a lista pra fora do cartão). */
.clara-list {
  display: flex; flex-direction: column; gap: var(--ds-space-4);
  background: var(--color-surface-inverse-alt);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-lg);
  padding: var(--ds-space-6);
}
.clara-list__card { background: var(--color-surface-default); border-radius: var(--radius-md); padding: var(--ds-space-4); }
.clara-list__card .icon { color: var(--color-accent-warm); margin-bottom: var(--ds-space-3); }
.clara-list__card .text-h5 { color: var(--color-text-default); margin-bottom: var(--ds-space-1); }
.clara-list__card .text-small { color: var(--color-text-default); opacity: 0.72; }
.clara-list__more { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding-inline: var(--ds-space-2); }
.clara-list__more .icon { color: var(--color-accent-warm); flex-shrink: 0; margin-top: 2px; }
.clara-list__more .text-small { color: var(--color-text-inverse); opacity: 0.75; }

/* ---------- Governança (.gov) ---------- */
/* 894px = largura exata do H2 no Figma (node 1452:42592) — 720px (valor
   antigo, de antes deste reajuste) forçava quebra de linha que o Figma
   não tem. */
.gov__intro { max-width: 894px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--ds-space-4); margin-bottom: var(--ds-space-16); }
.gov__eyebrow { color: var(--color-accent-warm); }
.gov__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-space-6); margin-bottom: var(--ds-space-16); }
.gov-card {
  display: flex; flex-direction: column; gap: var(--ds-space-3);
  height: 172px;
  padding: var(--ds-space-6);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}
.gov-card__icon { color: var(--color-accent-warm); }
.gov__controls { max-width: 760px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--ds-space-6); }
/* Termos viram chips (pill) — reajuste do Figma, antes eram só texto
   separado por "·". */
.gov__terms { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 13px; }
.gov__chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  background: var(--color-accent-warm);
  color: var(--color-text-default);
  font-size: var(--font-body-lg-size); font-weight: var(--ds-weight-medium);
  line-height: 24px;
}
.gov__closing { opacity: 0.82; margin-top: var(--ds-space-2); }

/* ---------- Aplicações (.apps) ---------- */
/* Coluna da foto voltou a 1fr igual à do conteúdo — a versão com coluna
   fixa mais larga (620px) espremia o conteúdo e quebrava o H2 em 3
   linhas; revertido a pedido explícito. */
/* align-items: end (pedido explícito) — a foto acompanha a base do
   accordion em vez de flutuar centralizada. */
.apps__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; }
.apps__intro { display: flex; flex-direction: column; gap: var(--ds-space-4); margin-bottom: var(--ds-space-8); }
/* Largura exata do Figma (node 1447:42334, 608px) — quebra em exatamente
   2 linhas ("Aplicações conectadas a situações reais / de gestão"); um
   max-width em ch (aproximado) não garantia essa quebra específica. */
.apps__intro .text-h2 { max-width: 608px; }
.apps__subtitle { margin: 0; font-size: var(--font-body-lg-size); font-weight: var(--font-body-weight); line-height: var(--font-body-lg-leading); max-width: 401px; }

/* Accordion — 1 item aberto por vez (Financeiro inicia aberto, JS em
   js/main.js). Trilha (__rail) fixa + marca colorida (__active-mark)
   que o JS reposiciona (top/height) por cima do item aberto — evita
   fixar os 123px do Figma, que só valiam pra aquele texto específico. */
.apps-accordion { position: relative; padding-left: var(--ds-space-6); display: flex; flex-direction: column; }
.apps-accordion__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.apps-accordion__active-mark {
  position: absolute; left: 0; width: 3px; border-radius: 2px;
  background: var(--color-accent-warm);
  transition: top 0.25s ease, height 0.25s ease;
}
.apps-item__heading { margin: 0; }
.apps-item__trigger {
  display: flex; flex-direction: column; gap: var(--ds-space-1);
  width: 100%; padding: var(--ds-space-3) 0;
  background: none; border: none; text-align: left; cursor: pointer;
  font: inherit;
}
/* Label da área (FINANCEIRO etc.) só aparece com o item aberto — some no
   fechado pra reduzir a altura da linha (pedido explícito). O ícone ao
   lado do título substitui a função de "dar contexto" que o label dava
   antes em todo item, agora só o item aberto tem o label por extenso. */
.apps-item__area { display: none; color: var(--color-text-default); opacity: 0.6; }
.apps-item__trigger[aria-expanded="true"] .apps-item__area { display: block; }
.apps-item__row { display: flex; align-items: center; gap: var(--ds-space-3); }
.apps-item__icon { color: var(--color-accent-warm); flex-shrink: 0; }
.apps-item__title {
  font-size: var(--font-body-lg-size); font-weight: var(--ds-weight-regular);
  letter-spacing: -0.02em; color: var(--color-text-default); opacity: 0.6;
  transition: opacity 0.2s ease;
}
.apps-item__trigger[aria-expanded="true"] .apps-item__title {
  font-weight: var(--ds-weight-semibold); opacity: 1;
}
.apps-item__panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.apps-item__body { margin: 0 0 var(--ds-space-3); font-size: var(--font-body-lg-size); opacity: 0.8; color: var(--color-text-default); }

/* Composição foto — mesma técnica de camadas do Figma (node 1452:42760):
   card desfocado ao fundo (chão de fábrica) + recorte nítido em primeiro
   plano (mulher com tablet, espelhado — export do Figma vem "cru", o
   espelhamento é feito aqui, igual ao ícone da Clara OS) + badge
   flutuante com a marca da suíte. Percentuais calculados a partir das
   coordenadas absolutas do frame original (bounding box combinado das 3
   camadas, 556.24×548.39). */
.apps__art { display: flex; justify-content: center; }
/* Voltou ao max-width nativo do Figma (494px) — o aumento pra 620px
   espremia a coluna de conteúdo e quebrava o H2 em 3 linhas; revertido a
   pedido explícito. */
.apps-photo { position: relative; width: 100%; max-width: 494px; aspect-ratio: 556.24 / 548.39; }
.apps-photo__bg-wrap {
  position: absolute; left: 5.775%; top: 16.475%; width: 88.858%; height: 83.507%;
  border-radius: 11px; overflow: hidden;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}
.apps-photo__bg-wrap img { width: 100%; height: 100%; object-fit: cover; }
.apps-photo__fg { position: absolute; left: 11.347%; top: 0; width: 88.654%; height: 100%; object-fit: contain; }
.apps-photo__tag {
  position: absolute; left: 0; top: 11.418%; width: 17.834%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-warm);
  border: 1px solid var(--color-accent-warm-active);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.apps-photo__tag-icon { width: 60%; height: 60%; fill: currentColor; }

/* ===== Responsivo =====
   Padrão de respiro em telas ≤960px (tablet e celular): 20px de padding
   horizontal de seção, 64px de padding vertical, títulos de seção (h2) em
   32px — pedido explícito, aplicado num único ponto de corte pra não
   fragmentar o comportamento entre tablet e celular. text-h1 (só usado nos
   heros da página História) ganha seu próprio degrau intermediário aqui e
   mais um menor em ≤640px, pra manter hierarquia acima do h2 sem repetir o
   tamanho de desktop (64px) numa coluna estreita. */
@media (max-width: 960px) {
  :root { --section-padding-block: 64px; }
  .container { padding-inline: 20px; }
  .text-h1 { font-size: 44px; }
  .text-h2 { font-size: 32px; }
  /* Evolução: "Ao longo de 40 anos..." e os títulos de produto da suíte
     Clara IA usam --font-heading-md-size (40px) direto, não a classe
     .text-h3 (que não tem override de mobile) — reduzido igual, mesmo
     degrau do texto-h2 acima. */
  .evo-statement { font-size: 32px; }
  .clara-row__title { font-size: 32px; }

  .about__grid { grid-template-columns: 1fr; }
  .about--media-right .about__media,
  .about--media-right .about__content { order: initial; }
  .evolve__grid { grid-template-columns: 1fr; }
  .experience__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--ds-space-10); }
  .experience-item::after { display: none; }
  .future__grid { grid-template-columns: 1fr; gap: var(--ds-space-6); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .fundamentos-lead { font-size: 28px; }
  .experience__lead { font-size: 28px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: var(--ds-space-6); }

  /* História: hero — padding-top próprio (não o genérico de 64px): é a
     única seção do hotsite que nasce colada no topo da página, embaixo do
     header fixo flutuante — 96px é a mesma folga que .history-nav já usa
     mais abaixo pra limpar o header (ver comentário em .history-nav). Com
     os 64px genéricos, o título ficava parcialmente atrás do header. O
     respiro entre as 2 dobras (.history-hero__stack usa
     --section-padding-block) já aperta sozinho pro padrão de 64px de
     mobile redefinido acima. Dobra 2 (texto+foto) empilha como qualquer
     outro grid 2 colunas do site. */
  .history-hero { padding-top: 120px; } /* 96px de folga do header + 24px extra pedido */
  .manifesto-hero { padding-top: 120px; } /* mesma folga de header — ver comentário acima */
  .evo-hero { padding-top: 120px; } /* mesma folga de header — ver comentário acima */

  /* Composição sobre fotografia da hero de Evolução (.evo-comp) no mobile
     — mesmo ajuste já feito em .manifesto-comp: no desktop é uma caixa
     larga/baixa (1280×546), que no mobile vira ilegível/apertada só
     encolhendo a fonte (outline vira uma tira fina, tags quase colam).
     Recompõe do zero pra uma caixa em PÉ (mesma proporção 380×546 já
     usada em .manifesto-comp — não veio frame mobile específico do
     Figma pra esta composição, então reaproveita a mesma geometria
     comprovada em vez de inventar números novos) — outline maior
     preenchendo quase o frame todo, as 2 tags empilhadas na coluna
     esquerda, nos mesmos 2 pontos-âncora de .manifesto-comp. */
  .evo-comp { aspect-ratio: 380 / 546; }
  .evo-comp__outline {
    left: 10.789%; top: 7.692%;
    width: 78.421%; height: 75.824%;
  }
  .evo-comp__tag { width: 62%; font-size: 15px; padding: var(--ds-space-3) var(--ds-space-4); }
  .evo-comp__tag--warm { left: 6.053%; top: 11.172%; }
  .evo-comp__tag--white { left: 31.316%; top: 63.553%; width: 62%; }

  /* Evolução: blocos alternados da suíte Clara IA empilham — conteúdo
     primeiro, imagem depois (pedido explícito; antes era imagem primeiro,
     mesma ordem do desktop) — e os grids de Governança/Aplicações
     reduzem de 4/3 colunas pra 2. */
  .clara-row { grid-template-columns: 1fr; gap: var(--ds-space-8); }
  .clara-row__content,
  .clara-row--reverse .clara-row__content { order: 1; }
  .clara-row__art,
  .clara-row--reverse .clara-row__art { order: 2; }
  /* Empilhado, cada produto vira um bloco visualmente denso (imagem +
     conteúdo) — pediu mais respiro entre um produto e o próximo do que
     o --section-padding-block padrão dá nesse contexto. */
  .clara-row + .clara-row { margin-top: calc(var(--section-padding-block) + var(--ds-space-10)); }
  .gov__grid { grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-10); }
  /* Altura fixa (172px) só faz sentido na grade 4-col do desktop — em 2
     colunas o texto quebra mais linhas e a caixa fixa cortaria conteúdo. */
  .gov-card { height: auto; }
  /* Aplicações: accordion empilha, foto primeiro (mesma ordem de leitura
     de .clara-row acima). */
  .apps__layout { grid-template-columns: 1fr; gap: var(--ds-space-10); }
  .apps__art { order: -1; }

  /* Manifesto: grade de 3 colunas vira o carrossel mobile (mesmo
     ponto de corte de outros grids 2-col do site — a página de origem
     usa 860px, mas aqui segue o breakpoint único já estabelecido, 960px,
     é o mecanismo que foi reaproveitado, não o número exato). */
  .mfoto { display: none; }
  .mfoto-mobile { display: flex; flex-direction: column; gap: var(--ds-space-8); }

  /* Composição sobre fotografia (.manifesto-comp) no mobile — geometria
     real do Figma (node 1018:863, a versão mobile já usada em
     "LP Rebrand/build-ftp/styles.css", regra "#manifesto .comp" — mesma
     técnica, mesmos números, referência trazida explicitamente pelo
     guardião pra corrigir a versão anterior, que ficava "toda quebrada"
     aqui por só encolher a fonte, sem recompor a caixa). No desktop é
     uma caixa larga/baixa (1233×491); no mobile vira uma caixa em PÉ,
     alta/estreita (380×546) — outline e as 2 tags são reposicionados do
     zero pra essa proporção nova, não é a mesma composição encolhida. */
  .manifesto-comp { aspect-ratio: 380 / 546; }
  .manifesto-comp__outline {
    left: 10.789%; top: 7.692%; transform: none;
    width: 78.421%; height: 75.824%;
  }
  .manifesto-comp__tag {
    width: 62%; max-width: none;
    font-size: 16px;
    padding: var(--ds-space-3) var(--ds-space-4);
  }
  .manifesto-comp__tag--white { left: 6.053%; top: 11.172%; }
  .manifesto-comp__tag--warm { left: 31.316%; top: 63.553%; }
  .history-hero__logo { display: none; } /* pedido explícito — só aparece no desktop */
  .history-hero-intro { grid-template-columns: 1fr; gap: var(--ds-space-8); text-align: left; }
  .history-hero-intro__text { align-items: flex-start; text-align: left; }

  /* Timeline: desliga o efeito de stack (mesmo ponto de corte de
     .about__grid/.evolve__grid acima) — vira coluna única, texto sempre
     primeiro, cards em fluxo normal abaixo, sem sticky. Linha central
     decorativa também some — não faz sentido cortando um layout de
     coluna única. */
  .history-timeline::before { display: none; }
  .history-block__waypoint { display: none; } /* some junto da linha e do sticky, que também desligam aqui */
  .history-block { grid-template-columns: 1fr; gap: var(--ds-space-8); }
  .history-block--reverse .history-block__content,
  .history-block--reverse .history-block__cards { order: initial; }
  .history-block__sticky { position: static; top: auto; transform: none; }
  /* Sem 2 colunas reais no mobile (grid vira 1fr acima), as posições
     explícitas de coluna que .history-block__content/__cards ganharam
     pra sobrepor o marcador da linha central (ver regras delas, acima,
     fora desta media query) precisam voltar pra coluna 1 — senão o grid
     cria uma 2ª coluna implícita só pra encaixar quem pede coluna 2,
     voltando a duas colunas visuais mesmo com grid-template-columns:1fr. */
  .history-block__content,
  .history-block__cards,
  .history-block--reverse .history-block__content,
  .history-block--reverse .history-block__cards { grid-column: 1; grid-row: auto; }
  /* Sem a linha central pra descolar, o afastamento de .history-block__cards
     e .history-block__sticky não faz sentido numa coluna única — ambos
     voltam a ocupar a largura inteira. */
  .history-block__cards,
  .history-block--reverse .history-block__cards,
  .history-block__sticky,
  .history-block--reverse .history-block__sticky { max-width: 100%; margin-left: 0; margin-right: 0; }

  /* CTA final: card escuro reduz padding/radius junto com o resto do
     respiro de seção do breakpoint. */
  .history-closing-card { padding: var(--ds-space-8); border-radius: var(--radius-lg); }

  /* Gráfico "40" no mobile — mais alto (não a mesma proporção larga do
     desktop) pra vídeo e numeral ganharem presença, pedido explícito.
     NUMERAL_FILL em js/history-hero-40.js usa min(W,H) — só de aumentar a
     altura aqui o numeral já cresce sozinho (W continua sendo o limite,
     mas H deixa de ser o gargalo), sem precisar mexer no JS. */
  .history-hero-graphic { aspect-ratio: 4 / 5; }

  /* Pedido explícito: no mobile, texto alinhado à esquerda nas seções
     abaixo do hero (hero e fotos da timeline ficam de fora — ver
     .history-hero-intro acima, que continua centralizado). Fecho final
     nasce centralizado no desktop — só ele precisa de override aqui; os
     outros (2026, .history-block__sticky, depoimento) já nascem à
     esquerda por padrão, não precisam de regra nenhuma. */
  .history-closing {
    text-align: left;
    align-items: flex-start;
  }

  /* Depoimento no mobile: texto antes do vídeo (no desktop é vídeo à
     esquerda) — troca só a ORDEM visual, sem duplicar HTML. */
  #depoimento-appel .about__media { order: 2; }
  #depoimento-appel .about__content { order: 1; }
}

@media (max-width: 640px) {
  .site-header__pill { grid-template-columns: auto auto; justify-content: space-between; }
  .site-header__nav,
  .site-header__cta { display: none; }
  .nav-toggle { display: flex; }
  .site-header__nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-2);
    padding: var(--ds-space-4) var(--ds-space-6);
    border-radius: var(--radius-md);
    background: rgba(46, 46, 48, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    justify-self: auto;
  }
  .site-header__nav.is-open { display: flex; }
  .hero__buttons { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__buttons .btn { width: 100%; }
  .text-h1 { font-size: 36px; }
  .experience__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .fundamentos-lead { font-size: 22px; }
  .evo-statement { font-size: 26px; }
  .clara-row__title { font-size: 28px; }
  .experience__lead { font-size: 22px; }
  .site-footer { padding: var(--ds-space-10) var(--ds-space-6); }

  /* História: barra de progresso condensa — só o índice numerado fica
     visível (o rótulo do período some), continua sticky normalmente. */
  .history-nav { gap: var(--ds-space-1); padding: var(--ds-space-1) var(--ds-space-2); }
  .history-nav__item { padding: var(--ds-space-1); }
  .history-nav__item span:not(.history-nav__index) { display: none; }

  /* Evolução: Governança volta pra 1 coluna só em telas bem estreitas (2
     colunas já aperta demais nesse ponto). */
  .gov__grid { grid-template-columns: 1fr; gap: var(--ds-space-8); }

  /* Evolução: composição da hero (tags) e marca da suíte encolhem —
     números do Figma (hero 1280×546) não têm frame mobile próprio, então
     é ajuste proporcional pra não estourar em telas estreitas. */
  .evo-comp__tag { font-size: 15px; padding: 10px 14px; }
  .evo-comp__tag--white { width: 150px; padding: 12px 16px; }
  .clara-suite__mark { width: 72px; height: 71px; }
}