/* ==========================================================================
   MANUAL DE ACCOUNTABILITY — FIUS · ESTILOS
   --------------------------------------------------------------------------
   Índice
   01  Tokens FIUS (cor, tipografia, espaço, movimento)
   02  Base
   03  Fundo vivo (ondas + volumes)
   04  Barra superior
   05  Grade e utilitários editoriais
   06  Boxes
   07  Fotos e faixa com foto de fundo
   08  Carrossel (rail) e boxes recolhidos (fold)
   09  Estados de animação (reveal, máscara, palavras que acendem)
   10  Hero
   11  Manifesto — seções
   12  Seções fixadas (pin)
   13  Nossos compromissos
   14  Chamada, capítulos, Acordo e Níveis
   15  Termo de Compromisso e rodapé
   16  Desktop (≥ 900px) — composição assimétrica
   17  Mobile
   18  Movimento reduzido
   ========================================================================== */


/* 01 · TOKENS FIUS ========================================================= */
/* Layout: grade editorial de 12 colunas sobre um fundo fixo e vivo; as
   estruturas do PDF (pares de compromissos, boxes de responsabilidade e de
   níveis) viram grades e carrosséis. Tema único (navy), conforme o modo
   escuro do design system FIUS. */
:root {
  /* Cor — FIUS_Design_System/colors_and_type.css */
  --navy:        #111d30;                  /* --fius-navy · fundo                */
  --navy-ink:    #0a1220;                  /* navy aprofundado (bordas da tela)  */
  --navy-brand:  #21305a;                  /* --fius-navy-brand                  */
  --card:        rgba(26, 39, 65, .82);    /* #1a2741 · card em fundo escuro     */
  --blue:        #009edb;                  /* --fius-blue · Azul FIUS (destaque) */
  --blue-hover:  #1cb0e5;                  /* --accent-hover                     */
  --white:       #ffffff;                  /* texto principal                    */
  --mist:        #b9c2cf;                  /* texto de apoio (branco a ~70%)     */
  --line:        rgba(255, 255, 255, .15); /* fios e bordas                      */
  --line-strong: rgba(255, 255, 255, .34);

  /* Tipografia — Effra é a única família (títulos Heavy, subtítulos Bold,
     apoio Regular, detalhes Light), como na hierarquia do brandbook */
  --font: "Effra", Verdana, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-eyebrow: .75rem;
  --fs-body:    clamp(1rem, .94rem + .3vw, 1.1875rem);
  --fs-lead:    clamp(1.125rem, 1rem + .7vw, 1.625rem);
  --fs-h3:      clamp(1.5rem, 1rem + 2vw, 2.875rem);
  --fs-h2:      clamp(2.125rem, 1rem + 4.2vw, 5.25rem);
  --fs-mega:    clamp(2.5rem, min(7vw, 14vh), 7.5rem);

  /* Espaço */
  --gutter:  clamp(1rem, 4vw, 4.5rem);
  --gap:     clamp(.75rem, 1.4vw, 1.5rem);
  --sp:      clamp(4.5rem, 9vw, 9rem);     /* respiro vertical entre seções     */
  --bar-h:   4.5rem;
  --radius:  10px;                         /* cantos dos boxes e fotos (PDF)    */
  /* margem lateral dos carrosséis que sangram até a borda da tela */
  --edge:    max(var(--gutter), calc((100vw - 108rem) / 2 + var(--gutter)));

  /* Movimento — ALTERE AQUI a personalidade das transições */
  --ease:    cubic-bezier(.19, 1, .22, 1);
  --t-slow:  1.4s;
  --t-med:   .9s;
  --t-fast:  .22s;                         /* --dur-2: hovers e controles       */

  /* Duração dos momentos fixados (quanto maior, mais longo o momento) */
  --pin-h:   150vh;

  /* Valores escritos pelo JS (com padrões para quando não há JS) */
  --bg-x: 0; --bg-y: 0; --bg-s: 1.1; --bg-r: 0deg; --bg-glow: .8;
  --slab-x: 82vw; --slab-y: 46vh; --slab-s: 52vh; --slab-a: -16deg; --slab-mix: 1;
  --mx: 0; --my: 0; --progress: 0;

  color-scheme: dark;
}


/* 02 · BASE ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #0b1320;                    /* navy aprofundado, igual ao fundo vivo */
  color: var(--white);
  font: 400 var(--fs-body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--blue); color: var(--white); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* overflow-x: clip corta o que desliza para fora (data-drift) sem criar
   rolagem horizontal e sem quebrar position: sticky */
main, .end { position: relative; z-index: 1; overflow-x: clip; }


/* 03 · FUNDO VIVO ========================================================== */
/* POSIÇÃO DAS ONDAS E DOS VOLUMES: não é definida aqui — cada seção aponta
   para uma "cena" (data-scene) descrita em js/config.js. As variáveis --bg-*
   e --slab-* são escritas pelo JS a cada quadro. */
.bg {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* versão CSS do fundo: um pouco mais profunda que o navy, para dar contraste */
  background: radial-gradient(120% 90% at 50% 45%, #0d1626 30%, #070d18 100%);
}

/* Versão CSS (fallback): duas cópias das ondas em profundidades diferentes */
.bg__layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 95vh);
  width: max(100vw, 95lvh);          /* 95 = largura/altura do asset × 100 */
  aspect-ratio: 800 / 843;
  background: url("../assets/grafismo-ondas.jpg") center / 100% 100% no-repeat;
  mix-blend-mode: screen;            /* o preto do asset deixa o navy aparecer */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  will-change: transform, opacity;
}
.bg__layer--near {
  opacity: var(--bg-glow);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--bg-x) * var(--bg-s) * 100% + var(--mx) * 1.5%),
                calc(var(--bg-y) * var(--bg-s) * 100% + var(--my) * -1.5%), 0)
    rotate(var(--bg-r))
    scale(calc(var(--bg-s) * 1.25));
}
.bg__layer--far {
  opacity: calc(var(--bg-glow) * .22);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--bg-x) * 40% + 18%), calc(var(--bg-y) * 40% + 22%), 0)
    rotate(calc(var(--bg-r) + 40deg))
    scale(calc(var(--bg-s) * 2));
}
/* Volumes na versão CSS: dois retângulos de cantos suaves, com uma borda de
   luz difusa do lado esquerdo/inferior e o interior levemente escurecido */
.bg__slab {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--slab-s) * 1.24);
  height: calc(var(--slab-s) * 2);
  border-radius: calc(var(--slab-s) * .18);
  background: linear-gradient(60deg, rgba(4, 10, 20, .5) 0%, rgba(4, 10, 20, .12) 55%, rgba(4, 10, 20, 0) 100%);
  box-shadow: inset 14px -14px 34px -14px rgba(40, 160, 255, .8);
  filter: blur(3px);
  opacity: calc(var(--slab-mix) * (.35 + .65 * var(--bg-glow)));
  transform:
    translate3d(calc(var(--slab-x) - var(--slab-s) * .62), calc(var(--slab-y) - var(--slab-s)), 0)
    rotate(calc(var(--slab-a) * -1));
  will-change: transform;
}
.bg__slab--b {
  width: calc(var(--slab-s) * .6);
  height: calc(var(--slab-s) * .96);
  border-radius: calc(var(--slab-s) * .09);
  opacity: calc(var(--slab-mix) * (.25 + .5 * var(--bg-glow)));
  transform:
    translate3d(calc(var(--slab-x) - var(--slab-s) * .95), calc(var(--slab-y) + var(--slab-s) * .12), 0)
    rotate(calc(var(--slab-a) * -1 - 6deg));
}

.bg__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.8s var(--ease);
}
/* Quando o WebGL assume, as camadas CSS saem de cena */
.has-gl .bg__canvas { opacity: 1; }
.has-gl .bg__layer,
.has-gl .bg__slab { display: none; }


/* 04 · BARRA SUPERIOR ====================================================== */
.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
}
/* Véu: o conteúdo desfoca e desvanece ao passar sob a barra */
.bar::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 19, 32, .92) 0%, rgba(11, 19, 32, .66) 55%, rgba(11, 19, 32, 0) 100%);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  pointer-events: none;
}
/* LOGO: altura controlada aqui; a largura acompanha a proporção do arquivo */
.bar__brand img { height: 1.375rem; width: auto; }
.bar__nav { display: none; gap: clamp(1rem, 2vw, 2.5rem); }
.bar__nav a {
  position: relative;
  padding: .5rem 0 .5rem 1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color var(--t-fast) var(--ease);
}
/* marcador quadrado em Azul FIUS: o motivo gráfico da marca */
.bar__nav a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: .4375rem; height: .4375rem;
  margin-top: -.25rem;
  background: var(--blue);
  transform: scale(0);
  transition: transform var(--t-med) var(--ease);
}
.bar__nav a:hover,
.bar__nav a.is-active { color: var(--white); }
.bar__nav a.is-active::before { transform: scale(1); }

/* Fio de progresso da leitura */
.bar__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(var(--progress));
  transform-origin: 0 50%;
}


/* 05 · GRADE E UTILITÁRIOS ================================================= */
.wrap {
  width: 100%;
  max-width: 108rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* No mobile tudo empilha; as posições assimétricas entram no bloco 16 */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(1.75rem, 4vw, 3.5rem);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

.sec { padding-block: var(--sp); }

/* Subtítulos: Effra Bold */
.d {
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Títulos e statements: Effra Heavy, em caixa normal (padrão do brandbook) */
.mega {
  font-size: var(--fs-mega);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Effra Light dentro de um destaque em Heavy: a frase começa leve e termina
   com peso. Use em <span class="lt"> no trecho de preparação. */
.lt { font-weight: 300; letter-spacing: -.02em; }

/* Trecho final em Azul FIUS — o padrão de título da marca.
   Use uma vez por composição. */
.hl { color: var(--blue); }

.rule {
  display: block;
  height: 1px;
  background: var(--line);
}


/* 06 · BOXES =============================================================== */
/* Card do design system em fundo escuro: superfície #1a2741, fio de 1px,
   sem sombra. */
.box {
  position: relative;
  padding: clamp(1.25rem, 1.9vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: clamp(1.0625rem, .92rem + .5vw, 1.375rem);
  font-weight: 400;                       /* Effra Regular */
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.box:hover { border-color: var(--line-strong); }


/* 07 · FOTOS E FAIXA COM FOTO DE FUNDO ===================================== */
/* TROCAR UMA FOTO: altere o src do <img>. ENQUADRAR: style="--pos: X% Y%"
   no <figure> define o ponto da imagem que permanece visível no recorte.
   A foto é um pouco maior que a moldura para o parallax (data-parallax-img;
   intensidade em js/config.js → motion.photoParallax). */
.photo,
.band__media {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.photo { border-radius: var(--radius); aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 5; }
.photo img,
.photo video,
.band__media img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  will-change: transform;
}
/* leve banho azul-navy: aproxima fotos quentes da paleta fria da marca */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(0, 158, 219, .14) 0%, rgba(17, 29, 48, .42) 100%);
  pointer-events: none;
}

/* Faixa em tela cheia com foto de fundo. As bordas superior e inferior
   desvanecem para o grafismo; o véu navy protege a leitura. */
.band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92vh;
  min-height: 92svh;
  padding-block: var(--sp);
}
.band__media {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.band__veil {
  position: absolute;
  inset: 0;
  /* INTENSIDADE DO VÉU: aumente os alfas se a foto competir com o texto */
  background:
    linear-gradient(90deg, rgba(17, 29, 48, .93) 0%, rgba(17, 29, 48, .78) 48%, rgba(17, 29, 48, .5) 100%),
    linear-gradient(to bottom, rgba(17, 29, 48, 1) 0%, rgba(17, 29, 48, 0) 22%, rgba(17, 29, 48, 0) 78%, rgba(17, 29, 48, 1) 100%);
  pointer-events: none;
}
.band__content { position: relative; }


/* 08 · CARROSSEL (RAIL) E BOXES COM EFEITOS (DECK) ========================= */
/* Rolagem horizontal nativa (toque, trackpad, teclado) + arrastar com o mouse
   + setas. A navegação (.rail__nav) é criada pelo JS e só aparece quando há
   o que rolar.
   .rail          → sempre carrossel
   .rail--grid    → grade no desktop, carrossel no celular */
.rail { position: relative; min-width: 0; max-width: 100vw; }
.rail__track {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  padding: 4px var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { flex: 0 0 auto; scroll-snap-align: start; }

.rail.is-scrollable .rail__track { cursor: grab; }
.rail.is-dragging .rail__track {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
}

.rail__nav {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-inline: var(--edge);
}
.rail.is-scrollable .rail__nav { display: flex; }
/* trilho de posição */
.rail__bar {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  margin-right: 1rem;
  background: var(--line);
}
.rail__bar i {
  position: absolute;
  left: 0; top: -1px;
  width: 100%;
  height: 3px;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: translateX(calc(var(--pos, 0) * (100% - 100% * var(--size, 1)))) scaleX(var(--size, 1));
}
.rail__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.rail__btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); }
.rail__btn:disabled { opacity: .3; cursor: default; }
.rail__btn svg { width: 1.125rem; height: 1.125rem; }

/* FOLD — boxes recolhidos, um aberto por vez (Acordo e Níveis)
   Cada box mostra ícone e título; passar o mouse, clicar ou tocar abre o box
   e revela o conteúdo. No desktop os boxes ficam lado a lado e o aberto se
   expande; no celular viram uma sanfona vertical.
   A largura do conteúdo e a altura do conjunto são resolvidas só em CSS
   (ver bloco 16), então nada é cortado nem depende de medição por script.
   Sem JS (.fold sem .is-ready), todos aparecem abertos, em sequência. */
.fold { display: grid; gap: var(--gap); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.fold__item {
  position: relative;
  overflow: hidden;
  background: rgba(17, 29, 48, .6);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 4px);
  transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.fold__item.is-open { background: var(--card); border-color: rgba(0, 158, 219, .65); }
/* brilho que acompanha o cursor */
.fold__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(22rem circle at var(--cx, 50%) var(--cy, 0%), rgba(0, 158, 219, .2), transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.fold__item:hover::after { opacity: 1; }

.fold__btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.125rem, 1.8vw, 1.75rem);
  text-align: left;
  cursor: default;
}
.fold.is-ready .fold__btn { cursor: pointer; }
.fold__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
}
.fold__icon svg { width: 1.75rem; height: 1.75rem; }
.fold__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
  overflow-wrap: break-word;
  transition: color var(--t-med) var(--ease);
}
.fold__item.is-open .fold__title { color: var(--blue); }
/* sinal de "+" que vira "×" no box aberto */
.fold__mark {
  position: relative;
  flex: 0 0 auto;
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--t-med) var(--ease);
}
.fold.is-ready .fold__mark { display: block; }
.fold__mark::before,
.fold__mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
}
.fold__mark::after { transform: rotate(90deg); }
.fold__item.is-open .fold__mark { transform: rotate(135deg); color: var(--blue); }

.fold__body { padding: 0 clamp(1.125rem, 1.8vw, 1.75rem) clamp(1.25rem, 2vw, 2rem); }
.fold__tag {
  display: inline-block;
  margin-bottom: 1.125rem;
  padding: .25rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--mist);
}

/* sanfona vertical (celular e tablet): a altura abre com grid 0fr → 1fr */
.fold.is-ready .fold__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease);
}
.fold.is-ready .fold__item.is-open .fold__panel { grid-template-rows: 1fr; }
.fold.is-ready .fold__body {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.fold.is-ready .fold__item.is-open .fold__body { opacity: 1; transition: opacity .7s var(--ease) .25s; }

/* o título reaparece suavemente ao trocar de orientação */
@keyframes fold-title-a { from { opacity: 0; } to { opacity: 1; } }
@keyframes fold-title-b { from { opacity: 0; } to { opacity: 1; } }

/* RESUMO EM PALAVRAS-CHAVE (dentro dos boxes)
   Cada item é uma célula: a palavra-chave lidera, em destaque, e a frase
   completa vem abaixo, menor e em tom de apoio. Lê-se o resumo passando os
   olhos pelas palavras-chave; o detalhe está logo ali. Ao passar o mouse,
   a célula acende. O número de colunas se ajusta à largura do box. */
.kw-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.125rem, 1.8vw, 1.75rem) clamp(1.25rem, 2vw, 2rem);
}
.kw-list li {
  display: grid;
  gap: .4rem;
  align-content: start;
  padding-top: .875rem;
  border-top: 1px solid var(--line);
  transition: border-color var(--t-med) var(--ease);
}
.kw {
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.15;
}
.kw-text {
  font-size: clamp(.875rem, .85rem + .12vw, .9375rem);
  line-height: 1.42;
  color: var(--mist);
  transition: color var(--t-med) var(--ease);
}
.kw-list li:hover { border-top-color: var(--blue); }
.kw-list li:hover .kw-text { color: var(--white); }
/* item final, comum aos quatro níveis */
.kw-list li.key { border-top-color: var(--blue); }
.kw-list li.key .kw { color: var(--blue); }
.kw-list li.key .kw-text { color: var(--white); }


/* 09 · ESTADOS DE ANIMAÇÃO ================================================= */
/* Sem JS, nada fica escondido: os estados iniciais só valem sob .js */

/* Reveal padrão: sobe 16px e aparece (translação curta, como pede a marca) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition:
    opacity   var(--t-slow) var(--ease) var(--d, 0ms),
    transform var(--t-slow) var(--ease) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Palavras (geradas por data-words) */
.w   { display: inline-block; }
.w__i { display: inline-block; }

/* Reveal por máscara: cada palavra sobe de dentro da própria linha */
.js [data-reveal="mask"] { opacity: 1; transform: none; }
[data-reveal="mask"] .w {
  overflow: hidden;
  vertical-align: top;
  padding: .2em .05em .16em;
  margin: -.2em -.05em -.16em;
}
.js [data-reveal="mask"] .w__i {
  transform: translate3d(0, 118%, 0);
  transition: transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 34ms);
}
.js [data-reveal="mask"].is-in .w__i { transform: none; }

/* Fio que se desenha */
.js [data-reveal="rule"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 2s var(--ease);
}
.js [data-reveal="rule"].is-in { transform: scaleX(1); }

/* Foto: a imagem se revela de cima para baixo, com um leve recuo de zoom */
.js [data-reveal="photo"] { opacity: 1; transform: none; }
.js [data-reveal="photo"] img,
.js [data-reveal="photo"] video {
  clip-path: inset(0 0 100% 0);
  scale: 1.12;
  transition: clip-path 1.8s var(--ease) var(--d, 0ms), scale 2.4s var(--ease) var(--d, 0ms);
}
.js [data-reveal="photo"].is-in img,
.js [data-reveal="photo"].is-in video { clip-path: inset(0 0 0 0); scale: 1; }
.js [data-reveal="photo"]::after { opacity: 0; transition: opacity 1.8s var(--ease) .3s; }
.js [data-reveal="photo"].is-in::after { opacity: 1; }

/* Palavras que "acendem" com o scroll */
.js [data-lit] .w {
  opacity: .22;
  transition: opacity .9s var(--ease);
}
.js [data-lit] .w.on { opacity: 1; }


/* 10 · HERO ================================================================ */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
}
.hero__inner {
  display: grid;
  grid-template-rows: 1fr auto auto;
  row-gap: clamp(.75rem, 2vh, 1.5rem);
  padding-top: calc(var(--bar-h) + 2rem);
  padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
  position: relative;
}
/* TAMANHO DO TÍTULO: ajuste o font-size abaixo (vale para as duas linhas) */
.hero__title {
  grid-row: 2;
  font-size: clamp(3rem, 1rem + 7vw, 8.25rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .96;
}
.hero__pre,
.hero__mega { display: block; }
.hero__sub {
  grid-row: 3;
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: -.015em;
  line-height: 1.1;
}
/* Indicação de scroll: apenas um fio em movimento */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--bar-h) + 2.5rem);
  width: 1px;
  height: clamp(3rem, 9vh, 6rem);
  background: var(--line);
  overflow: hidden;
}
.hero__cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: translateY(-100%);
  animation: cue 3.2s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Entrada do hero (ao carregar, não depende de scroll) */
.js .hero__pre,
.js .hero__sub,
.js .hero__cue {
  opacity: 0;
  transition: opacity 2.2s var(--ease) .5s;
}
.js .hero__mega {
  clip-path: inset(0 0 105% 0);
  translate: 0 22%;
  transition: clip-path 2.2s var(--ease) .15s, translate 2.2s var(--ease) .15s;
}
.js.is-loaded .hero__pre,
.js.is-loaded .hero__sub,
.js.is-loaded .hero__cue { opacity: 1; }
.js.is-loaded .hero__mega { clip-path: inset(-12% -4% -30% -4%); translate: 0 0; }


/* 11 · MANIFESTO — SEÇÕES ================================================== */
.opening { padding-top: clamp(4rem, 9vw, 9rem); }
.opening__lead { font-size: var(--fs-h2); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; }
.opening__body { max-width: 28em; font-size: var(--fs-lead); line-height: 1.4; color: var(--mist); }
.opening__photo { aspect-ratio: 16 / 11; }

.define__lead { font-size: var(--fs-h3); }
.define .box { background: rgba(17, 29, 48, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.interaction { padding-top: clamp(2rem, 5vw, 5rem); }
.interaction__risk { font-size: var(--fs-lead); line-height: 1.4; max-width: 30em; }
.interaction__flow { display: grid; gap: var(--gap); align-content: start; }

.vision__statement { font-size: var(--fs-h2); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; }
.vision__a,
.vision__b { display: block; }
.vision__a {
  max-width: 16em;
  margin-bottom: clamp(1.25rem, 3vw, 2.75rem);
  font-size: .46em;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.vision__body { max-width: 32em; color: var(--mist); }

.control__title { font-size: var(--fs-h2); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; }
/* parágrafos empilhados: o primeiro em Bold, o segundo em Regular. A largura
   é limitada pelo JS ao fim de "não controle." (data-match-end) */
.control__text  { display: grid; gap: .6rem; font-size: var(--fs-lead); line-height: 1.35; }
.control__lead  { font-weight: 700; }
.control__body  { font-weight: 400; }

.together { margin-top: clamp(4rem, 9vw, 9rem); }
.together__l { display: block; }
.together__photo { margin-top: clamp(2.5rem, 6vw, 6rem); }

.guardian__photo { aspect-ratio: 16 / 11; }
.guardian__lead  { font-size: var(--fs-h3); }
/* frase em dois tempos: Light prepara, Heavy conclui (um só bloco) */
.guardian__pair {
  display: grid;
  gap: .3em;
  font-size: clamp(1.875rem, 1rem + 3.5vw, 4.75rem);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.guardian__setup { max-width: 21em; text-wrap: balance; }
.guardian__key   { font-weight: 900; text-wrap: balance; }
.guardian__after { max-width: 30em; color: var(--mist); }

.prosper { padding-block: clamp(4rem, 10vw, 10rem); }
.prosper__text { font-size: var(--fs-h2); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; }


/* 12 · SEÇÕES FIXADAS (PIN) ================================================ */
/* DURAÇÃO do momento: --pin-h (em :root). O JS escreve --p (0 → 1). */
.pin { height: var(--pin-h); --p: 0; }
.pin__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--bar-h);
  overflow: hidden;
}

/* A frase cresce: de 60% a 100% do tamanho (INTENSIDADE: ajuste o .6) */
.js .grow {
  transform: scale(calc(.6 + .4 * min(1, var(--p) * 1.35)));
  transform-origin: 0 50%;
}

.question { display: grid; row-gap: clamp(1.25rem, 3.5vh, 3rem); }
.question__kicker {
  max-width: 24em;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.3;
}


/* 13 · NOSSOS COMPROMISSOS ================================================= */
/* Estrutura da pág. 3 do PDF: pares em colunas desencontradas + foto. */
.commitments__title {
  font-size: clamp(2.5rem, 1rem + 6vw, 7.5rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .98;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.commitments__layout { display: grid; gap: var(--gap); }
.commitments__photo { margin-inline: var(--edge); aspect-ratio: 16 / 10; order: -1; }

.pair { display: grid; gap: var(--gap); align-content: start; }
.pair .box {
  align-content: center;                    /* texto centrado na altura do box */
  min-height: clamp(9rem, 13vw, 13.5rem);
  font-weight: 400;
}
.pair .box strong { font-weight: 700; }
.box--blue { color: var(--blue); }


/* 14 · CHAMADA, CAPÍTULOS, ACORDO E NÍVEIS ================================= */
/* Chamada para o Acordo */
.next { padding-block: clamp(1rem, 4vw, 4rem) var(--sp); }
.next__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  border-block: 1px solid var(--line);
}
.next__text { display: block; }
.next__q { font-size: var(--fs-h3); font-weight: 900; letter-spacing: -.03em; color: var(--blue); }
.next__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(3rem, 5vw, 4.5rem);
  height: clamp(3rem, 5vw, 4.5rem);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.next__arrow svg { width: 40%; height: 40%; transition: transform var(--t-med) var(--ease); }
.next__link:hover .next__arrow { background: var(--blue); border-color: var(--blue); }
.next__link:hover .next__arrow svg { transform: translateY(.25rem); }

.chapter { padding-top: clamp(3rem, 6vw, 6rem); }
.chapter .rule { margin-bottom: clamp(.5rem, 2vw, 2rem); }
.chapter__title {
  font-size: clamp(2.5rem, 1rem + 6vw, 7.5rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .98;
}
.chapter__sub  { font-size: var(--fs-h3); color: var(--blue); }
.chapter__lead { font-size: var(--fs-h3); }
.chapter__body { max-width: 32em; color: var(--mist); }


/* 15 · TERMO DE COMPROMISSO E RODAPÉ ======================================= */
.termo__sheet {
  max-width: 92rem;                       /* largura do box (centralizado) */
  margin-inline: auto;
  padding: clamp(1.75rem, 3.6vw, 3.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
}
.termo__title {
  font-size: var(--fs-h3);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--blue);
}
.termo__text {
  margin-top: clamp(1.25rem, 3vw, 2.75rem);
  font-size: var(--fs-lead);
  line-height: 1.55;
}
/* linha em branco para o nome */
.termo__blank {
  display: inline-block;
  width: min(18rem, 55%);
  border-bottom: 1px solid var(--white);
  vertical-align: baseline;
}
.termo__action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.termo__sign {
  flex: 0 1 18rem;
  padding-top: .625rem;
  border-top: 1px solid var(--white);
  font-size: .875rem;
  color: var(--mist);
}
/* Botão primário do design system: pílula em Azul FIUS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1;
  transition: background-color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--blue-hover); }
.btn svg { width: 1.25rem; height: 1.25rem; transition: transform var(--t-med) var(--ease); }
.btn:hover svg { transform: translateX(.25rem); }

.end { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem); }
.end__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.end__brand { justify-self: start; }
.end__brand img { height: 1.75rem; width: auto; }
.end__cities { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; color: var(--mist); }
.end__site { justify-self: start; font-weight: 700; transition: color var(--t-fast) var(--ease); }
.end__site:hover { color: var(--blue); }


/* 16 · DESKTOP (≥ 900px) — COMPOSIÇÃO ASSIMÉTRICA ========================== */
@media (min-width: 68.75em) {
  .bar__nav { display: flex; }   /* os quatro rótulos só cabem em telas largas */
}

@media (min-width: 56.25em) {

  /* Elementos que permanecem enquanto o conteúdo passa ao lado */
  .stick {
    position: sticky;
    top: calc(var(--bar-h) + 14vh);
    align-self: start;
  }


  .opening .grid  { align-items: start; }
  .opening__lead  { grid-column: 1 / span 7; }
  .opening__body  { grid-column: 1 / span 5; }
  .opening__photo { grid-column: 9 / span 4; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }

  .define__lead { grid-column: 1 / span 8; }
  .define__a    { grid-column: 1 / span 4; }
  .define__b    { grid-column: 5 / span 5; }

  .interaction__risk { grid-column: 7 / span 6; margin-bottom: clamp(2rem, 5vw, 5rem); }
  .interaction__key  { grid-column: 1 / span 6; }
  .interaction__flow { grid-column: 7 / span 6; }

  .vision__statement { grid-column: 1 / -1; }
  .vision__b         { margin-left: calc((100% + var(--gap)) / 12 * 2); }
  .vision__body      { grid-column: 7 / span 6; }

  /* Compromissos: quatro colunas de pares (a 2ª e a 4ª descem, como no PDF)
     e a foto à direita, na altura do conjunto */
  .commitments__layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1.3fr);
    padding-inline: var(--edge);
    align-items: stretch;
  }
  .commitments__layout .rail { --edge: 0px; max-width: none; }
  .rail--grid .rail__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .pair:nth-child(even) { margin-top: clamp(1.5rem, 2.6vw, 2.75rem); }
  /* na grade todos os boxes estão visíveis: sem setas nem trilho */
  .rail--grid .rail__nav { display: none !important; }
  .commitments__photo { margin: 0; aspect-ratio: auto; height: 100%; order: 0; }

  .control__title { grid-column: 1 / span 9; }
  .control__text  { grid-column: 1 / -1; }

  /* As duas linhas ocupam a largura (data-fit) e se opõem */
  .together__l      { width: max-content; white-space: nowrap; }
  .together__l--end { margin-left: auto; }

  .guardian .grid   { align-items: center; }
  .guardian__photo  { grid-column: 1 / span 5; aspect-ratio: 5 / 4; }
  .guardian__lead   { grid-column: 7 / span 6; }
  .guardian__pair   { grid-column: 1 / -1; margin-top: clamp(1.5rem, 4vw, 4rem); }
  .guardian__after  { grid-column: 1 / span 5; }

  .prosper__text { grid-column: 2 / span 10; }

  .chapter .rule   { grid-column: 1 / -1; }
  .chapter__title  { grid-column: 1 / -1; }
  .chapter__sub    { grid-column: 1 / span 6; }
  .chapter__lead   { grid-column: 1 / span 7; }
  .chapter__body   { grid-column: 8 / span 5; }

  /* FOLD lado a lado: os recolhidos são faixas estreitas (--fold-c) com o
     título na vertical; o aberto ocupa o restante, com a coluna do título
     (--fold-hd) e o conteúdo ao lado.
     · Largura do conteúdo: calculada em CSS a partir da largura do conjunto
       (100cqw) e do número de boxes (--n, definido no HTML).
     · Altura: automática. Todos os conteúdos, abertos ou não, ocupam a mesma
       largura, então o conjunto assume a altura do maior e nada é cortado;
       trocar de box não muda a altura da página. */
  .fold.is-ready {
    --fold-c: 4.75rem;
    --fold-hd: 14rem;
    --fold-b: 40rem;                    /* navegadores sem unidades de contêiner */
    display: flex;
    align-items: stretch;
    min-height: 28rem;                  /* o título vertical mais longo precisa caber */
    container-type: inline-size;
  }
  @supports (width: 1cqw) {
    .fold.is-ready {
      --fold-b: calc(100cqw - (var(--n, 3) - 1) * (var(--fold-c) + var(--gap)) - var(--fold-hd) - 2px);
    }
  }
  .fold.is-ready .fold__item {
    display: flex;
    flex: 0 0 var(--fold-c);
    min-width: 0;
    transition:
      flex-grow 1.1s var(--ease),
      background-color var(--t-med) var(--ease),
      border-color var(--t-med) var(--ease);
  }
  .fold.is-ready .fold__item.is-open { flex-grow: 1; }
  .fold.is-ready .fold__head { flex: 0 0 var(--fold-c); min-width: 0; transition: flex-basis 1.1s var(--ease); }
  .fold.is-ready .fold__item.is-open .fold__head { flex-basis: var(--fold-hd); }
  .fold.is-ready .fold__btn {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.125rem;
    height: 100%;
    padding: 1.125rem .75rem 1.25rem;
  }
  .fold.is-ready .fold__item.is-open .fold__btn { padding-inline: 1.5rem 1rem; }
  /* recolhido: título na vertical, lido de cima para baixo */
  .fold.is-ready .fold__title {
    flex: 0 1 auto;
    min-height: 0;
    padding-left: .9375rem;
    font-size: 1.0625rem;
    line-height: 1.15;
    white-space: nowrap;
    writing-mode: vertical-rl;
    animation: fold-title-a .9s var(--ease);
  }
  /* aberto: título na horizontal, na coluna ao lado do conteúdo */
  .fold.is-ready .fold__item.is-open .fold__title {
    padding-left: 0;
    font-size: clamp(1.25rem, .95rem + .6vw, 1.5rem);
    white-space: normal;
    writing-mode: horizontal-tb;
    animation: fold-title-b .9s var(--ease);
  }
  .fold.is-ready .fold__mark { margin: auto 0 0 .9375rem; }
  .fold.is-ready .fold__item.is-open .fold__mark { margin-left: 0; }
  .fold.is-ready .fold__panel { display: block; flex: 0 0 var(--fold-b); }
  .fold.is-ready .fold__body {
    overflow: visible;
    padding: 1.375rem clamp(1.25rem, 2vw, 2rem) 1.5rem .5rem;
  }

  /* Termo na horizontal: título à esquerda; texto e assinatura à direita */
  .termo__sheet {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
  }
  .termo__title  { grid-column: 1; grid-row: 1 / span 2; font-size: clamp(2rem, 1rem + 2.8vw, 3.75rem); line-height: 1; }
  .termo__text   { grid-column: 2; margin-top: 0; }
  .termo__action { grid-column: 2; margin-top: clamp(2rem, 3.5vw, 3.5rem); }

  .end__inner { grid-template-columns: auto 1fr auto; align-items: center; }
  .end__cities { justify-content: center; }
}


/* 17 · MOBILE ============================================================== */
@media (max-width: 56.24em) {
  :root { --pin-h: 145vh; --bar-h: 3.75rem; --fs-mega: clamp(2.375rem, 10.5vw, 4.25rem); }
  .bar__brand img { height: 1.125rem; }
  .hero__cue { display: none; }

  /* Pares de compromissos em carrossel: um par e a borda do próximo */
  .rail--grid .rail__track > .pair { width: min(74vw, 20rem); }
  .photo--wide { aspect-ratio: 16 / 9; }
  .band { min-height: 0; }
  .band__veil {
    background:
      linear-gradient(rgba(17, 29, 48, .82), rgba(17, 29, 48, .82)),
      linear-gradient(to bottom, rgba(17, 29, 48, 1) 0%, rgba(17, 29, 48, 0) 22%, rgba(17, 29, 48, 0) 78%, rgba(17, 29, 48, 1) 100%);
  }
}


/* 18 · MOVIMENTO REDUZIDO ================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal] .w__i,
  .js [data-reveal] img,
  .js [data-reveal] video,
  .js .hero__pre, .js .hero__sub, .js .hero__mega, .js .hero__cue {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    scale: none !important;
    transition: none !important;
  }
  .js [data-lit] .w { opacity: 1 !important; transition: none !important; }
  .js .grow { transform: none !important; }
  .fold__item, .fold__head, .fold__panel, .fold__body, .fold__mark { transition: none !important; }
  .fold__title { animation: none !important; }
  .hero__cue::after { animation: none; }
  .rail__track { scroll-behavior: auto; }
  .pin { height: auto; }
  .pin__stage { position: static; height: auto; min-height: 70vh; padding-block: var(--sp); }
}