/* ==========================================================
   NATHÁLIA GOMES · SISTEMA "LINHO & CAFÉ"  ·  base.v1.css
   Compartilhado por /bio e /lider-agente.
   Regras completas: Design/diretrizes-visuais.md
   ========================================================== */

/* ---------- 0. FONTES (servidas pelo próprio site: Albert Sans e Italiana, licença OFL) ----------
   Só o subconjunto latin, que já tem os acentos do português. O Albert Sans é variável (pesos de 100 a 900);
   o itálico vem só no 300, como no Google Fonts. Os arquivos não levam ?v=: se mudar a fonte, mude o nome do arquivo. */
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/albert-sans-italico-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Italiana"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/italiana-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. TOKENS ---------- */
:root {
  /* pilhas: kit Adobe Fonts → fonte instalada → substituta → genérica */
  --font-display: "fino-sans", "Fino Sans", "Italiana", Optima, serif;
  --font-text: "basic-sans", "Basic Sans", "Albert Sans", "Helvetica Neue", Arial, sans-serif;

  /* paleta oficial (manual de marca, p. 19) */
  --linho: #f3eae0;
  --argila: #b19d8e;
  --cafe: #2d2520;
  --pedra: #c7c5be;
  --noite: #000;

  /* derivados funcionais */
  --papel: #fcf4ea;
  --linho-2: #e8e0d6;
  --pedra-clara: #dddbd4;
  --fio: #cdbaab;
  --fio-escuro: #b19d8e47;
  --tinta: #2d2520;
  --tinta-2: #594a3e;
  --tinta-3: #706053;
  --argila-escura: #7c6b5e;
  --cafe-profundo: #1b1410;
  --cafe-2: #3c332e;
  --claro: #f3eae0;
  --claro-2: #d5ccc3;
  --claro-3: #b19d8e;

  /* escala padrão: o máximo chega junto com a largura máxima da coluna */
  --fs-display: clamp(42px, 4.4vw + 12px, 80px);
  --fs-h1: clamp(32px, 2.6vw + 14px, 52px);
  --fs-h2: clamp(28px, 1.8vw + 12px, 40px);
  --fs-h3: clamp(22px, 1vw + 10px, 26px);
  --fs-sub: clamp(20px, 1.5vw, 27px);
  --fs-lead: clamp(18px, .9vw + 8px, 22px);
  --fs-body: clamp(16.5px, .25vw + 14px, 18px);
  --fs-support: 14px;
  --fs-eyebrow: 11px;
  --fs-button: 13px;
  --fs-nav: 13px;
  --fs-number: clamp(64px, 4.6vw + 26px, 96px);
  --fs-secao: clamp(28px, 2vw + 6px, 40px);
  --fs-letra: clamp(36px, 1.4vw + 24px, 46px);
  --w-text: 300;
  --lh-body: 1.65;
  --tr-caps: .2em;
  --tr-btn: .16em;
  --tr-display: 0em;
  --btn-h: 62px;
  --section-gap: clamp(96px, 10vw, 152px);

  /* forma e movimento */
  --r-1: 2px;
  --r-bussola: clamp(28px, 4.4vw, 72px);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-agulha: cubic-bezier(.34,1.42,.52,1);
  --wrap: 1320px;
  --pad: 40px;
  --nav-h: 72px;
  --bottom-bar-clearance: calc(112px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 2. ESCALA AMPLIADA (público 55+): troca em bloco ---------- */
:root[data-scale="ampliada"] {
  --fs-display: clamp(40px, 3.8vw + 12px, 72px);
  --fs-h1: clamp(32px, 2.2vw + 16px, 48px);
  --fs-h2: clamp(30px, 1.4vw + 16px, 38px);
  --fs-h3: clamp(28px, .6vw + 20px, 30px);
  --fs-sub: clamp(23px, 1.6vw, 30px);
  --fs-lead: clamp(21px, 1vw + 9px, 26px);
  --fs-body: 20px;
  --fs-support: 16px;
  --fs-eyebrow: 14px;
  --fs-button: 16px;
  --fs-nav: 16px;
  --tr-btn: .08em;
  --w-text: 400;
  --lh-body: 1.7;
  --tr-caps: .12em;
  --btn-h: 64px;
  --tinta-2: #4d3f34;
  --tinta-3: #594a3e;
  --claro-2: #e8e0d6;
  --claro-3: #cdbaab;
}

/* ---------- 3. AS DUAS LUZES ---------- */
.luz-linho, .luz-papel, .luz-pedra {
  --fg: var(--tinta); --fg-2: var(--tinta-2); --fg-3: var(--tinta-3);
  --italico: var(--argila-escura); --fio-c: var(--fio);
  --btn-bg: var(--cafe); --btn-fg: var(--linho);
  --feixe-cor: #2d25200a;
}
.luz-linho { --bg: var(--linho); }
.luz-papel { --bg: var(--papel); }
.luz-pedra { --bg: var(--pedra-clara); --fio-c: #b9b4ab; }
.luz-cafe, .luz-profunda {
  --fg: var(--claro); --fg-2: var(--claro-2); --fg-3: var(--claro-3);
  --italico: var(--argila); --fio-c: var(--fio-escuro);
  --btn-bg: var(--linho); --btn-fg: var(--cafe);
  --feixe-cor: #f3eae00f;
}
.luz-cafe { --bg: var(--cafe); }
.luz-profunda { --bg: var(--cafe-profundo); }

/* ---------- 4. BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  margin: 0; background: var(--cafe); color: var(--claro);
  font-family: var(--font-text); font-weight: var(--w-text); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-x: none;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 600; }
button { font: inherit; color: inherit; }
::selection { background: var(--argila); color: var(--cafe); }
:focus-visible { outline: 2px solid var(--argila); outline-offset: 4px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--linho); color: var(--cafe); border-radius: var(--r-1); transition: top .2s; }
.pular:focus { top: 16px; }
section { position: relative; isolation: isolate; background: var(--bg); color: var(--fg); padding-block: var(--section-gap); }

/* ---------- 5. TIPOGRAFIA ---------- */
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 400; line-height: 1.6; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); }
.titulo {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--fg);
  font-size: var(--fs-h1); line-height: .98; letter-spacing: var(--tr-display); text-wrap: balance;
}
.titulo em { font-style: italic; color: var(--italico); }
.titulo .l { display: block; }
.titulo-display { font-size: var(--fs-display); line-height: .94; }
.titulo-2 { font-size: var(--fs-h2); line-height: 1; }
.titulo-3 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: .01em; }
.sub { font-size: var(--fs-sub); font-weight: 300; line-height: 1.32; letter-spacing: .01em; color: var(--fg); }
.sub strong { font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-2); max-width: 40em; }
.texto { color: var(--fg-2); max-width: 36em; }
.texto + .texto { margin-top: 1em; }
.lead strong, .texto strong { color: var(--fg); }
.apoio { font-size: var(--fs-support); line-height: 1.55; color: var(--fg-3); }

/* ---------- 6. ESTRUTURA DE SEÇÃO ---------- */
/* aba: as abas do manual + fio superior + número em Fino */
.aba { display: flex; align-items: flex-start; border-top: 1px solid var(--fio-c); }
.aba span {
  padding: 11px 16px 10px; border: 1px solid var(--fio-c); border-top: 0;
  font-size: var(--fs-eyebrow); font-weight: 400; line-height: 1.2; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3);
}
.aba span:first-child { font-weight: 500; color: var(--fg); }
.aba span + span { border-left: 0; }
.aba b { margin-left: auto; padding-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-secao); line-height: .9; letter-spacing: 0; color: var(--italico); }
.sec-cabeca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(48px, 6vw, 88px); }
.grade-7-5 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); }
.grade-5-7 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
.fixo { position: sticky; top: calc(var(--nav-h) + 40px); }
.centro { text-align: center; margin-inline: auto; }
.centro .lead, .centro .texto { margin-inline: auto; }

/* feixe de luz: um por seção, paralelo à agulha do monograma (41,3°) */
.feixe { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.feixe::before {
  content: ""; position: absolute; inset: -20% -10%;
  background: linear-gradient(41.3deg, transparent 40%, var(--feixe-cor) 47%, transparent 47.2%, transparent 49%, var(--feixe-cor) 49.2%, transparent 58%);
}
.feixe.vivo::before { animation: feixe-deriva 22s ease-in-out infinite alternate; }
@keyframes feixe-deriva { from { transform: translate3d(-4%, -3%, 0); } to { transform: translate3d(4%, 3%, 0); } }

/* forma bússola: cantos arredondados só no superior direito e no inferior esquerdo */
.bussola-forma { border-radius: 0 var(--r-bussola) 0 var(--r-bussola); overflow: hidden; }

/* ---------- 7. BOTÕES E LINKS ---------- */
.btn {
  --b-pad: 4px; --b-blk: calc(var(--btn-h) - 8px);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center;
  min-width: 300px; height: var(--btn-h); padding: 0; border: 0; border-radius: var(--r-1);
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; cursor: pointer;
  box-shadow: 0 16px 34px -20px #000d; transition: transform .22s var(--ease), box-shadow .22s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px #000; }
.btn:active { transform: scale(.985); }
.btn-bloco { position: absolute; z-index: -1; top: var(--b-pad); bottom: var(--b-pad); left: var(--b-pad); width: var(--b-blk); border-radius: 1px; background: var(--argila); transition: width .5s var(--ease); }
.btn:hover .btn-bloco { width: calc(100% - var(--b-pad) * 2); }
/* ícone do botão: o monograma completo (N + agulha + cantoneiras); no hover ele desliza para a direita, sem girar */
.btn-agulha { position: absolute; top: 50%; left: calc(var(--b-pad) + var(--b-blk) / 2 - 12px); width: 24px; height: 21px; margin-top: -10.5px; color: var(--cafe); transition: left .5s var(--ease); }
.btn:hover .btn-agulha { left: calc(100% - 24px - 22px); }
.btn-txt { padding: 0 28px 0 calc(var(--b-blk) + var(--b-pad) + 24px); font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--tr-btn); text-transform: uppercase; line-height: 1.15; transition: color .3s, transform .5s var(--ease); }
.btn:hover .btn-txt { color: var(--cafe); transform: translateX(calc(-1 * var(--b-blk) + 6px)); }
.acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px; margin-top: 44px; }
.link-seta {
  display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; text-decoration: none;
  font-size: var(--fs-button); font-weight: 500; letter-spacing: var(--tr-btn); text-transform: uppercase; line-height: 1.2; color: var(--fg);
  background: linear-gradient(currentColor, currentColor) 0 100% / 34px 1px no-repeat; transition: background-size .45s var(--ease);
}
.link-seta::after { content: "→"; letter-spacing: 0; transition: transform .3s var(--ease); }
.link-seta:hover { background-size: 100% 1px; }
.link-seta:hover::after { transform: translateX(4px); }
.btn-linha {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid #f3eae066; border-radius: var(--r-1);
  color: var(--linho); text-decoration: none; font-size: calc(var(--fs-button) - 1px); font-weight: 500; letter-spacing: var(--tr-btn); text-transform: uppercase; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-linha:hover { background: #f3eae014; border-color: var(--linho); }

/* ---------- 8. LISTAS ---------- */
/* marcadores: pontos Argila, como os "•" do manual; nunca travessão */
.tracos li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--fio-c); color: var(--fg-2); font-size: var(--fs-support); line-height: 1.5; }
.tracos li::before { content: ""; position: absolute; left: 3px; top: calc(9px + .75em - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--argila); }
.tracos li:last-child { border-bottom: 1px solid var(--fio-c); }
.tracos strong { color: var(--fg); }
.tracos.grande li { padding-block: 16px; font-size: var(--fs-body); }
.tracos.grande li::before { top: calc(16px + .82em - 2px); }

/* ---------- 9. NAV ---------- */
.nav-shell {
  position: fixed; inset-inline: 0; top: 0; z-index: 30; padding: 20px var(--pad); pointer-events: none;
  transition: transform .52s var(--ease), opacity .38s; animation: nav-desce 1s var(--ease) .2s backwards;
}
.nav-shell[data-gone] { opacity: 0; transform: translateY(-140%); }
.nav-bar {
  pointer-events: auto; max-width: var(--wrap); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 12px 10px 22px; border: 1px solid var(--fio-escuro); border-radius: var(--r-1);
  background: color-mix(in srgb, var(--cafe) 74%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: var(--linho); transition: background .4s, color .4s, border-color .4s;
}
.nav-logo { display: block; width: 172px; height: 30px; color: currentColor; }
.nav-logo svg { width: 100%; height: 100%; }
/* variação com o monograma (o N com a bússola) no lugar do logotipo */
.nav-logo.nav-logo-mono { display: flex; align-items: center; gap: 12px; width: auto; height: 30px; }
.nav-logo-mono svg:first-child { flex: none; width: 34px; height: 30px; }
.nav-logo-nome { display: none; width: 150px !important; height: auto !important; }
@media (max-width: 1100px) { .nav-logo-nome { display: block; } }
.nav-links { display: flex; align-items: center; font-size: max(11px, calc(var(--fs-nav) - 1px)); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--claro-2); }
/* um fio fino entre os itens; a borda tem a altura da letra (line-height 1) */
.nav-links a { padding: 2px 20px; line-height: 1; text-decoration: none; transition: color .18s; }
.nav-links a + a { border-left: 1px solid var(--fio-escuro); }
.nav-links a:last-child { padding-right: 10px; }
.nav-links a:hover { color: var(--linho); }
/* sobre seção clara, o nav vira vidro de linho */
.nav-shell.is-claro .nav-bar { background: color-mix(in srgb, var(--linho) 82%, transparent); color: var(--cafe); border-color: var(--fio); }
.nav-shell.is-claro .nav-links { color: var(--tinta-2); }
.nav-shell.is-claro .nav-links a + a { border-color: var(--fio); }
.nav-shell.is-claro .nav-links a:hover { color: var(--cafe); }
.nav-shell.is-claro .btn-linha { color: var(--cafe); border-color: #2d252055; }
.nav-shell.is-claro .btn-linha:hover { background: #2d25200d; border-color: var(--cafe); }
@keyframes nav-desce { from { opacity: 0; transform: translateY(-24px); } }

/* ---------- 10. COMPONENTES ---------- */
/* credenciais */
.credenciais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fio-c); }
.credenciais > div { padding: 24px 24px 30px; border-left: 1px solid var(--fio-c); }
.credenciais > div:first-child { border-left: 0; padding-left: 0; }
.credenciais .eyebrow { margin-bottom: 8px; }
.credenciais p:last-child { font-size: calc(var(--fs-support) + 1px); line-height: 1.5; color: var(--fg-2); }

/* comparativo de estágios ligado pela agulha */
.modos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.modo { padding: 34px 36px 38px; border: 1px solid var(--fio-c); }
.modo .eyebrow { display: flex; justify-content: space-between; gap: 16px; }
.modo h3 { margin-top: 30px; }
.modo p:last-child { margin-top: 14px; color: var(--fg-2); max-width: 26em; }
.modo.antes { color: var(--fg-2); }
.modo.antes h3 { color: var(--fg-3); }
.modo.depois { background: var(--cafe); border-color: var(--cafe); --fg: var(--claro); --fg-2: var(--claro-2); --fg-3: var(--claro-3); --italico: var(--argila); color: var(--claro); }
.virada { display: grid; place-items: center; width: clamp(72px, 8vw, 128px); color: var(--argila-escura); }
.virada svg { width: 72px; height: 72px; transform: rotate(-41.3deg); }

/* números */
.numeros { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--fio-c); }
.numeros > div { padding: 26px 22px 0 0; }
.numeros > div + div { padding-left: 22px; border-left: 1px solid var(--fio-c); }
.numeros b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-number); line-height: .86; color: var(--fg); font-variant-numeric: tabular-nums; }
.numeros > div > span { display: block; margin-top: 14px; font-size: var(--fs-support); line-height: 1.5; color: var(--fg-2); }

/* citação */
.citacao blockquote { font-size: var(--fs-sub); font-weight: 300; line-height: 1.38; letter-spacing: .01em; color: var(--fg); max-width: 28em; }
.citacao blockquote::before { content: "“"; display: block; height: .62em; margin-left: -.04em; font-family: var(--font-text); font-weight: 300; font-size: 3em; line-height: 1; color: var(--italico); }
.citacao figcaption { margin-top: 18px; }

/* depoimento com fio Argila */
.depoimento { padding-left: 28px; border-left: 1px solid var(--argila); }
.depoimento p { font-size: var(--fs-lead); font-weight: 300; line-height: 1.62; color: var(--fg-2); }
.depoimento p + p { margin-top: 1em; }

/* destaque (callout) */
.destaque { padding: 30px 32px 32px; background: color-mix(in srgb, var(--fg) 4%, transparent); border-left: 2px solid var(--italico); }
.destaque .eyebrow { margin-bottom: 12px; }
.destaque p:last-child { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg); }

/* ficha (lista de definições) */
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--fio-c); }
.ficha > div { padding: 18px 0; border-bottom: 1px solid var(--fio-c); }
.ficha dt { font-size: var(--fs-eyebrow); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); }
.ficha dd { margin-top: 6px; font-size: calc(var(--fs-support) + 1px); line-height: 1.45; color: var(--fg); font-weight: 400; }

/* card com foto */
.card-foto { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--fio); color: var(--tinta); transition: transform .4s var(--ease), box-shadow .4s;
  --fg: var(--tinta); --fg-2: var(--tinta-2); --fg-3: var(--tinta-3); --italico: var(--argila-escura); --fio-c: var(--fio); }
.card-foto:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -44px #2d2520; }
.card-foto figure { aspect-ratio: 16 / 9; overflow: hidden; background: var(--linho-2); }
.card-foto figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card-foto:hover figure img { transform: scale(1.035); }
.card-corpo { display: flex; flex-direction: column; flex: 1; padding: 30px 32px 34px; }
.card-corpo .titulo-3 { margin: 14px 0 22px; }
.card-corpo .tracos { margin-bottom: 28px; }
.card-corpo .link-seta { margin-top: auto; align-self: flex-start; }

/* card de destaque em Café */
.card-destaque {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(36px, 4.4vw, 64px); background: var(--cafe); color: var(--claro);
  --fg: var(--claro); --fg-2: var(--claro-2); --fg-3: var(--claro-3); --italico: var(--argila); --fio-c: var(--fio-escuro); --btn-bg: var(--linho); --btn-fg: var(--cafe);
  box-shadow: 0 40px 80px -50px #2d2520;
}
.marca-dagua { position: absolute; z-index: -1; right: -6%; bottom: -18%; width: 54%; color: #f3eae00b; pointer-events: none; }

/* acordeão (crenças, dúvidas) */
.acordeao { border-top: 1px solid var(--fio-c); }
.acordeao details { border-bottom: 1px solid var(--fio-c); }
.acordeao summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 18px; align-items: baseline; padding: 26px 0; cursor: pointer; list-style: none; }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao .n { font-family: var(--font-display); font-size: 40px; line-height: .8; color: var(--italico); }
.acordeao h3 { font-size: clamp(19px, 1.35vw, 22px); font-weight: 400; line-height: 1.35; color: var(--fg); transition: color .2s; }
.acordeao .mais { position: relative; width: 16px; height: 16px; align-self: center; justify-self: end; transition: transform .4s var(--ease); }
.acordeao .mais::before, .acordeao .mais::after { content: ""; position: absolute; inset: 7.5px 0 auto; height: 1px; background: var(--italico); }
.acordeao .mais::after { transform: rotate(90deg); }
.acordeao details[open] .mais { transform: rotate(45deg); }
.acordeao-corpo { padding: 0 46px 30px 74px; color: var(--fg-2); max-width: 40em; animation: surge .45s var(--ease); }
@keyframes surge { from { opacity: 0; transform: translateY(-6px); } }

/* faixa dividida (manual, p. 10) */
.faixa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(88svh, 860px); padding: 0; }
.faixa-foto { position: relative; overflow: hidden; background: var(--pedra); }
.faixa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faixa-painel { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 72px); }

/* ---------- 11. BÚSSOLA DO MÉTODO ---------- */
.bussola { width: 100%; max-width: 470px; justify-self: center; }
.bussola svg { width: 100%; height: auto; overflow: visible; }
.bussola .aro { fill: none; stroke: var(--fio-c); stroke-width: 1.4; }
.bussola .marca { stroke: var(--argila); stroke-width: 2; opacity: .55; }
.bussola .canto { fill: var(--fg); }
.bussola .gira { transform-box: fill-box; transform-origin: center; transition: transform 1.25s var(--ease-agulha); }
.bussola .sul, .bussola .norte { fill: var(--fg); transition: fill .6s; }
.bussola[data-ativa] .sul { fill: var(--argila); }
.bussola .pivo { fill: var(--bg); stroke: var(--fg); stroke-width: 2; opacity: 0; transition: opacity .5s; }
.bussola[data-ativa] .pivo { opacity: 1; }
.bussola text { font-family: var(--font-display); font-size: 46px; fill: var(--fg-3); text-anchor: middle; dominant-baseline: central; transition: fill .4s; }
.bussola text.on { fill: var(--fg); }
.movimentos { border-top: 1px solid var(--fio-c); }
.mov { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 20px; align-items: start; padding: 24px 0 26px; border-bottom: 1px solid var(--fio-c); cursor: pointer; position: relative; }
.mov:focus-visible { outline: 2px solid var(--argila); outline-offset: 2px; }
.mov::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--fg); transition: width .6s var(--ease); }
.mov[aria-pressed="true"]::before { width: 100%; }
.mov-letra { grid-row: span 2; margin-top: -2px; font-family: var(--font-display); font-size: var(--fs-letra); line-height: .76; color: var(--fg-3); transition: color .4s; }
.mov-nome { font-size: max(12px, var(--fs-eyebrow)); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg); }
.mov-txt { color: var(--fg-3); font-size: calc(var(--fs-support) + 2px); line-height: 1.6; transition: color .4s; }
.mov[aria-pressed="true"] .mov-letra { color: var(--fg); }
.mov[aria-pressed="true"] .mov-txt { color: var(--fg-2); }
.mov[aria-pressed="true"] .mov-nome { font-weight: 600; }

/* ---------- 12. RODAPÉ ---------- */
.rodape { position: relative; isolation: isolate; overflow: hidden; background: var(--cafe-profundo); color: var(--claro-2); }
.rodape-inner { max-width: var(--wrap); margin: auto; padding: clamp(72px, 8vw, 112px) var(--pad) var(--bottom-bar-clearance); }
.rodape-mono { width: min(56vw, 440px); margin: clamp(56px, 7vw, 96px) auto; color: #251c17; filter: drop-shadow(0 1px 0 #f3eae014) drop-shadow(0 -1px 0 #0009); }
.rodape-base { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 26px; border-top: 1px solid var(--fio-escuro); font-size: max(13px, var(--fs-support)); line-height: 1.7; color: var(--claro-3); }
.rodape-base .logo { width: 150px; color: var(--linho); }

/* seletor de escala */
.escala {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border: 1px solid var(--fio-escuro); border-radius: var(--r-1);
  background: transparent; color: var(--claro-2); cursor: pointer; font-size: max(12px, var(--fs-eyebrow)); letter-spacing: .12em; text-transform: uppercase; transition: border-color .2s, color .2s;
}
.escala:hover { border-color: var(--argila); color: var(--linho); }
.escala[aria-pressed="true"] { border-color: var(--linho); color: var(--linho); }
.escala b { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: 0; text-transform: none; }

/* ---------- 13. BARRA FIXA INFERIOR (cantos côncavos = cantoneiras do monograma) ---------- */
.notch-shell { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; transition: transform .5s var(--ease); }
.notch-shell[data-oculta] { transform: translateY(120%); }
.notch-bar {
  --notch-bg: #2d2520f0;
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 26px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--fio-escuro); border-bottom: 0; border-radius: var(--r-1) var(--r-1) 0 0;
  background: var(--notch-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.notch-bar::before, .notch-bar::after { content: ""; position: absolute; bottom: 0; width: 22px; height: 22px; }
.notch-bar::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 22px, var(--notch-bg) 22.5px); }
.notch-bar::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 22px, var(--notch-bg) 22.5px); }
.notch-feixe { position: absolute; top: -1px; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--argila), transparent); }
.pilula {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 22px; border-radius: 999px; background: var(--linho); color: var(--cafe);
  font-size: var(--fs-button); font-weight: 600; letter-spacing: min(.1em, var(--tr-btn)); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .22s, transform .22s var(--ease);
}
.pilula::after { content: "↗"; font-size: 18px; letter-spacing: 0; transition: transform .22s var(--ease); }
.pilula:hover { background: var(--papel); transform: translateY(-2px); }
.pilula:hover::after { transform: translate(2px, -2px); }
.notch-status { display: flex; align-items: center; gap: 10px; padding-right: 8px; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--claro-3); }
.notch-status b { color: var(--linho); font-weight: 500; }
.ponto { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--argila); }
.ponto::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--argila); animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

/* ---------- 14. EFEITOS (motion.js) ---------- */
/* Todo estado inicial escondido fica sob .js (posto no <head>): sem JS, tudo aparece pronto. */

/* revelar ao rolar (stagger de .08 s por filho, aplicado pelo motion.js) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-stagger].in > * { opacity: 1; transform: none; }

/* A1 · entrada em cascata por palavra (blur 10 px → 0, sobe 16 px) */
/* palavras inline (não inline-block): a quebra de linha fica idêntica à do texto puro, e a pontuação
   nunca cai sozinha no começo da linha. A subida usa top, porque transform não vale em inline. */
[data-cascata] .w { position: relative; }
.js [data-cascata] .w { opacity: 0; top: 16px; filter: blur(10px); transition: opacity 1.1s var(--ease), top 1.1s var(--ease), filter 1.1s var(--ease); }
.js [data-cascata-item] { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js.is-loaded [data-cascata] .w, .js.is-loaded [data-cascata-item] { opacity: 1; top: 0; transform: none; filter: none; }

/* A3 · palavras que acendem com a rolagem */
.js [data-palavras-luz] .w { opacity: .24; transition: opacity .35s linear; }
.js [data-palavras-luz] .w.on { opacity: 1; }

/* A8 · marquee de chips (o motion.js duplica os itens com aria-hidden para o laço sem emenda) */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-faixa { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.marquee.vivo .marquee-faixa { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: marquee var(--dur, 60s) linear infinite; }
.marquee.vivo .marquee-faixa > * { margin-right: 12px; } /* margem em vez de gap: a metade cai exatamente na emenda */
.marquee.vivo.inverso .marquee-faixa { animation-direction: reverse; }
.marquee.vivo:hover .marquee-faixa, .pausado .marquee-faixa { animation-play-state: paused; }
.marquee:not(.vivo) { -webkit-mask-image: none; mask-image: none; }
.marquee:not(.vivo) [data-clone] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border: 1px solid var(--fio-c); border-radius: 999px; font-size: var(--fs-support); color: var(--fg-2); white-space: nowrap; }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--argila); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* laços contínuos pausam fora da tela */
.feixe.vivo.pausado::before { animation-play-state: paused; }

/* A15 · borda-holofote que segue o cursor */
.holofote { position: relative; }
.holofote::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--argila), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) and (pointer: fine) { .holofote:hover::after { opacity: 1; } }

/* A13 · cortina: a seção clara chega com o canto superior direito arredondado, que assenta.
   Use só em seção clara logo depois de uma escura (o canto aberto mostra o Café de baixo). */
[data-cortina] { z-index: 1; }
.js [data-cortina] { border-top-right-radius: calc((1 - var(--p, 1)) * var(--r-cortina, 160px)); box-shadow: 0 -40px 80px -48px #000a; }
.js [data-cortina] > * { transform: translateY(calc((1 - var(--p, 1)) * 6vh)); }

/* A4 · cena fixa: a seção prende enquanto a rolagem avança pelos passos */
.cena { position: relative; }
.js .cena { height: var(--altura, 300vh); padding-block: 0; }
.js .cena-palco { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 24px) 48px; }
[data-passo] { transition: opacity .6s var(--ease), transform .6s var(--ease), color .6s; }
.js .cena [data-passo]:not(.is-ativo) { opacity: .28; }
.cena-barra { height: 1px; background: var(--fio-c); overflow: hidden; }
.cena-barra i { display: block; height: 100%; background: var(--italico); transform-origin: left; transform: scaleX(var(--cena-p, 0)); }

/* A9 · barra de prompt que digita */
.prompt-barra { display: flex; align-items: flex-start; gap: 14px; min-height: 64px; padding: 18px 20px; border: 1px solid var(--fio-c); border-radius: var(--r-1); background: color-mix(in srgb, var(--fg) 5%, transparent); font-size: var(--fs-support); line-height: 1.55; color: var(--fg); }
.prompt-barra::before { content: ""; flex: none; width: 18px; height: 16px; margin-top: 3px; background: var(--argila); -webkit-mask: url("../logo/monograma.svg") center / contain no-repeat; mask: url("../logo/monograma.svg") center / contain no-repeat; }
.cursor { display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: currentColor; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

/* A12 · contador: números com largura fixa para não empurrar o texto */
[data-contador] { font-variant-numeric: tabular-nums; }

/* parallax leve: a imagem precisa de folga dentro da moldura */
.moldura { position: relative; overflow: hidden; background: var(--pedra); }
.moldura > img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
[data-velocidade] { will-change: transform; }

/* sem movimento contínuo na escala ampliada */
.js[data-scale="ampliada"] .reveal, .js[data-scale="ampliada"] [data-stagger] > * { transition-duration: 1.2s; }
:root[data-scale="ampliada"] .ponto::after, :root[data-scale="ampliada"] .feixe.vivo::before, :root[data-scale="ampliada"] .cursor { animation: none; }
:root[data-scale="ampliada"] [data-palavras-luz] .w { opacity: 1; }

/* ---------- 15. PADRÕES DE PÁGINA (compartilhados por /bio e /lider-agente) ---------- */
/* nav: seletor de escala compacto */
.nav-escala { height: 34px; padding: 0 12px; gap: 8px; }
.nav-escala span { font-size: max(11px, var(--fs-eyebrow)); }
.nav-shell.is-claro .escala { color: var(--tinta-2); border-color: var(--fio); }
.nav-shell.is-claro .escala:hover, .nav-shell.is-claro .escala[aria-pressed="true"] { color: var(--cafe); border-color: var(--cafe); }

/* ritmo das seções */
.sec-cabeca-larga { grid-template-columns: minmax(0, 10fr) minmax(0, 2fr); }
/* cabeça centrada (diagramação da arkom.ai): título e apoio no eixo, em coluna estreita; substitui a grade 7/5 quando há título + texto */
.cabeca-centro { max-width: 52rem; margin: clamp(48px, 6vw, 88px) auto 0; text-align: center; }
.cabeca-centro .titulo { margin-inline: auto; }
.cabeca-centro .lead { max-width: 38em; margin: 22px auto 0; }
.lado-a-lado { margin-top: clamp(48px, 6vw, 88px); align-items: start; }
.corpo { margin-top: 28px; }
.lado-a-lado .destaque { margin-top: 40px; }
.lado-a-lado .acoes { margin-top: 40px; }
.foto-retrato { aspect-ratio: 4 / 5; }
@media (min-width: 1101px) {
  .lado-a-lado > figure.moldura { position: sticky; top: calc(var(--nav-h) + 40px); }
}
.colunas-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 80px); margin-top: clamp(40px, 5vw, 64px); }
.colunas-2 .texto { max-width: none; }
.colunas-2 .texto + .texto { margin-top: 0; }

/* fala em primeira pessoa (citação longa com fio Argila) */
.fala { margin-top: 32px; padding-left: 26px; border-left: 1px solid var(--argila); }
.fala p { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; color: var(--fg); }
.fala + .fala { margin-top: 24px; }

/* depoimentos (com espaço reservado: avatar + texto provisório) */
.depoimentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
.depo { display: flex; flex-direction: column; gap: 22px; padding: 32px 30px 30px; background: var(--papel); border: 1px solid var(--fio); border-radius: 0 28px 0 28px; }
.depo .avatar { width: 48px; height: 48px; color: var(--argila); }
.depo blockquote p { font-size: var(--fs-lead); font-weight: 300; line-height: 1.55; color: var(--fg-2); }
.depo figcaption { margin-top: auto; font-size: max(12px, var(--fs-eyebrow)); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); line-height: 1.6; }

/* fechamento e rodapé */
.final { text-align: center; }
.final .titulo { max-width: 16em; margin-inline: auto; }
.final .lead { max-width: 34em; margin: 28px auto 0; }
.final .acoes { justify-content: center; }
/* o fechamento e o rodapé têm o mesmo café: a luz diagonal some aos poucos, sem corte na emenda */
.final .feixe { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }
.final { padding-bottom: clamp(72px, 8vw, 120px); }
.final-frase { max-width: 24em; margin: clamp(56px, 7vw, 88px) auto 0; padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--fio-c); }
.rodape-inner { padding-top: 0; }
.rodape-mono { margin-top: 0; }
.rodape-base { flex-wrap: wrap; }
.rodape-txt { flex: 1; min-width: 260px; text-align: center; }
@media (max-width: 1100px) {
  .sec-cabeca-larga { grid-template-columns: minmax(0, 1fr); }
  .depoimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nav-escala span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .colunas-2, .depoimentos { grid-template-columns: minmax(0, 1fr); }
  .depo { padding: 26px 22px 24px; }
  .rodape-txt { text-align: left; }
}

/* monograma-bússola: a agulha balança como bússola e assenta; os cantos encaixam; depois respira e um brilho passa */
.bussola-viva { position: relative; }
.bussola-viva svg { display: block; overflow: visible; }
.bussola-viva .mono-agulha { transform-box: view-box; transform-origin: 191.75px 168.23px; }
.bussola-viva .mono-canto { transition: transform 1.4s var(--ease), opacity 1.1s var(--ease); }
.js .bussola-viva .mono-agulha { transform: rotate(-42deg); }
.js .bussola-viva .mono-canto-1 { transform: translate(36px, -36px); opacity: 0; }
.js .bussola-viva .mono-canto-2 { transform: translate(-36px, 36px); opacity: 0; }
.js .bussola-viva.em-cena .mono-canto { transform: none; opacity: 1; transition-delay: .5s; }
.js .bussola-viva.em-cena .mono-agulha { animation: agulha-assenta 3.4s cubic-bezier(.3, .7, .3, 1) both, agulha-respira 8s ease-in-out 3.4s infinite; }
@keyframes agulha-assenta { 0% { transform: rotate(-42deg); } 30% { transform: rotate(16deg); } 50% { transform: rotate(-8deg); } 68% { transform: rotate(4deg); } 84% { transform: rotate(-1.5deg); } 100% { transform: rotate(0deg); } }
@keyframes agulha-respira { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }
.bussola-viva::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 38%, #f3eae024 50%, transparent 62%) 150% 0 / 260% 100% no-repeat;
  -webkit-mask: url("../logo/monograma.svg") center / contain no-repeat; mask: url("../logo/monograma.svg") center / contain no-repeat; }
.js .bussola-viva.em-cena::after { animation: mono-brilho 7s ease-in-out 3.6s infinite; }
@keyframes mono-brilho { 0% { opacity: 1; background-position: 150% 0; } 35%, 100% { opacity: 1; background-position: -50% 0; } }
:root[data-scale="ampliada"] .bussola-viva .mono-agulha, :root[data-scale="ampliada"] .bussola-viva::after { animation: none !important; transform: none; }
:root[data-scale="ampliada"] .bussola-viva .mono-canto { transform: none; opacity: 1; }
/* movimento reduzido: o monograma já aparece montado, com a agulha em repouso */
@media (prefers-reduced-motion: reduce) {
  .js .bussola-viva .mono-agulha, .js .bussola-viva .mono-canto { transform: none; opacity: 1; }
}

/* duas seções claras seguidas: sem a emenda de dois respiros inteiros (o fundo liso dobrava o vazio) */
section.luz-linho + section.luz-linho, section.luz-linho + section.luz-papel, section.luz-linho + section.luz-pedra, section.luz-papel + section.luz-linho, section.luz-papel + section.luz-papel, section.luz-papel + section.luz-pedra, section.luz-pedra + section.luz-linho, section.luz-pedra + section.luz-papel, section.luz-pedra + section.luz-pedra { padding-top: calc(var(--section-gap) * .4); }

/* frase-tese centrada: sem o fio lateral, com um traço curto em cima */
.frase-luz.frase-centro { max-width: 24em; margin-inline: auto; padding-left: 0; border-left: 0; text-align: center; }
.frase-luz.frase-centro::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 auto 26px; background: var(--argila); }

/* ---------- componentes da diagramação da arkom.ai (as duas páginas usam) ----------
   de/para em cadeia de nós (a certa acende nó a nó) + trilha vertical com ícones */
.depara { display: grid; gap: 14px; max-width: 900px; margin: clamp(40px, 5vw, 64px) auto 0; }
.depara-card { padding: 22px clamp(18px, 2.4vw, 30px) 26px; border: 1px solid var(--fio-escuro); border-radius: 0 22px 0 22px; background: color-mix(in srgb, var(--linho) 3%, transparent); }
.depara-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.depara-rotulo { font-size: 11px; font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); }
.depara-topo b { font-weight: 500; font-size: clamp(17px, .6vw + 13px, 21px); color: var(--fg-2); }
.depara-nos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.depara-nos li { position: relative; display: grid; place-items: center; min-height: 46px; padding: 8px 12px; border: 1px solid var(--fio-escuro); border-radius: 999px; font-size: 14px; line-height: 1.25; text-align: center; color: var(--fg-3); }
.depara-nos li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 28px; height: 1px; background: var(--fio-escuro); }
.depara-antes { opacity: .72; }
.depara-antes .depara-nos li { border-style: dashed; }
.depara-agora { border-color: color-mix(in srgb, var(--argila) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--argila) 10%, transparent), transparent 75%); box-shadow: 0 30px 70px -40px #000, inset 0 1px 0 #f3eae014; }
.depara-agora .depara-topo b { font-weight: 600; color: var(--fg); }
.depara-agora .depara-rotulo { color: var(--argila); }
.depara-agora .depara-nos li { color: var(--fg); border-color: color-mix(in srgb, var(--argila) 45%, transparent); background: #1b141055; }
.depara-agora .depara-nos li + li::before { background: linear-gradient(90deg, color-mix(in srgb, var(--argila) 40%, transparent), var(--linho), color-mix(in srgb, var(--argila) 40%, transparent)) 100% 0 / 300% 100% no-repeat; }
.js .depara.em-cena .depara-agora .depara-nos li { animation: no-acende 4s var(--ease) infinite; }
.js .depara.em-cena .depara-agora .depara-nos li:nth-child(2) { animation-delay: .6s; }
.js .depara.em-cena .depara-agora .depara-nos li:nth-child(3) { animation-delay: 1.2s; }
.js .depara.em-cena .depara-agora .depara-nos li:nth-child(4) { animation-delay: 1.8s; }
.js .depara.em-cena .depara-agora .depara-nos li + li::before { animation: liga-luz 4s linear infinite; }
.js .depara.em-cena .depara-agora .depara-nos li:nth-child(3)::before { animation-delay: .6s; }
.js .depara.em-cena .depara-agora .depara-nos li:nth-child(4)::before { animation-delay: 1.2s; }
@keyframes no-acende { 0%, 100% { border-color: color-mix(in srgb, var(--argila) 45%, transparent); box-shadow: none; } 10% { border-color: var(--linho); box-shadow: 0 0 0 4px #b19d8e1f, 0 0 26px -4px #b19d8eaa; } 32% { border-color: color-mix(in srgb, var(--argila) 70%, transparent); box-shadow: none; } }
@keyframes liga-luz { 0% { background-position: 100% 0; } 15%, 100% { background-position: 0 0; } }
:root[data-scale="ampliada"] .depara *, :root[data-scale="ampliada"] .depara *::before { animation: none !important; }

/* trilha vertical: a linha enche com a rolagem (--trilha-p) e cada item acende ao passar; o último ganha destaque */
.trilha { position: relative; display: grid; gap: clamp(26px, 3vw, 38px); max-width: 660px; margin: clamp(48px, 6vw, 80px) auto 0; }
.trilha::before, .trilha::after { content: ""; position: absolute; left: 21.5px; top: 22px; bottom: 22px; width: 1px; background: var(--fio-escuro); }
.trilha::after { background: linear-gradient(var(--argila), var(--linho)); transform-origin: top; transform: scaleY(var(--trilha-p, 0)); }
.trilha-item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: start; }
.trilha-icone { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--fio-escuro); border-radius: 50%; background: var(--bg); color: var(--fg-3); transition: color .5s, border-color .5s, box-shadow .5s, background .5s; }
.trilha-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trilha-icone svg.mono-i { width: 19px; height: auto; fill: currentColor; stroke: none; }
.trilha-item p { margin: 0; padding-top: 10px; font-size: var(--fs-body); line-height: 1.6; color: var(--fg-3); transition: color .5s; }
.trilha-item p strong { color: var(--fg); }
.trilha-item.is-aceso .trilha-icone { color: var(--linho); border-color: var(--argila); box-shadow: 0 0 0 5px #b19d8e14; }
.trilha-item.is-aceso p { color: var(--fg-2); }
.trilha-fim p { padding-top: 6px; font-size: clamp(20px, .8vw + 15px, 26px); font-weight: 500; line-height: 1.4; }
.trilha-item.trilha-fim.is-aceso p { color: var(--fg); }
.trilha-fim.is-aceso .trilha-icone { background: var(--argila); color: var(--cafe-profundo); }
html:not(.js) .trilha-item p { color: var(--fg-2); }

/* ---------- arco numerado preso na rolagem (motion.v1.js, iniciarArcos, liga --ativo ao passo da cena) ----------
   os números correm sobre um arco de círculo enorme; o ativo fica no centro, sob a luz, e a verdade dele aparece abaixo */
.manifesto-arco .cena-palco { text-align: center; }
.manifesto-arco .cena-palco > .wrap { width: 100%; }
.manifesto-arco .aba { text-align: left; }
.arco-titulo { max-width: 18em; margin: clamp(8px, 2vh, 24px) auto 0; }
.arco { --R: 1500px; --passo: 9deg; --topo: 44px; position: relative; height: clamp(150px, 21vh, 210px); margin: clamp(12px, 2.4vh, 32px) calc(var(--pad) * -1) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.arco-linha { position: absolute; left: 50%; top: var(--topo); width: calc(var(--R) * 2); height: calc(var(--R) * 2); border: 1px solid var(--fio-escuro); border-radius: 50%; transform: translateX(-50%); }
.arco-pt, .arco-n { --t: calc((var(--k) - var(--ativo, 0)) * var(--passo)); position: absolute; left: 50%; top: calc(var(--topo) + var(--R)); }
.arco-pt { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--fio-escuro); transform: rotate(var(--t)) translateY(calc(var(--R) * -1)); transition: transform 1.1s var(--ease), background .5s; }
.arco-n { width: 2.4em; height: 1em; margin: -.5em 0 0 -1.2em; font-family: var(--font-display); font-size: clamp(64px, 4.4vw + 30px, 112px); line-height: 1; text-align: center; color: var(--fg-3); opacity: .5;
  transform: rotate(var(--t)) translateY(calc(var(--R) * -1)) rotate(calc(var(--t) * -1)) translateY(.72em) scale(.58); transition: transform 1.1s var(--ease), color .6s, opacity .6s; }
.arco-n.is-on { color: var(--fg); opacity: 1; transform: rotate(var(--t)) translateY(calc(var(--R) * -1)) rotate(calc(var(--t) * -1)) translateY(.72em) scale(1); }
.arco-n.is-longe { opacity: 0; }  /* só o anterior, o ativo e o próximo; os pontos do arco mostram que há mais */
.arco-luz { position: absolute; left: 50%; top: var(--topo); z-index: 2; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--linho); box-shadow: 0 0 0 5px #f3eae014, 0 0 24px 6px #b19d8e70; }
.js .arco-luz { animation: arco-pulsa 2.8s ease-in-out infinite; }
@keyframes arco-pulsa { 0%, 100% { box-shadow: 0 0 0 5px #f3eae014, 0 0 24px 6px #b19d8e70; } 50% { box-shadow: 0 0 0 9px #f3eae00a, 0 0 34px 10px #b19d8e90; } }
.arco-verdades { display: grid; max-width: 46rem; margin: clamp(4px, 1.4vh, 16px) auto 0; }
.arco-verdades li { grid-area: 1 / 1; }
.arco-verdades .verdade-n { display: none; }
.manifesto-arco h3 { font-family: var(--font-text); font-weight: 500; text-transform: none; letter-spacing: -.01em; font-size: clamp(22px, 1.4vw + 14px, 36px); line-height: 1.22; color: var(--fg); }
.arco-verdades p { max-width: 34em; margin: 14px auto 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-2); }
.js .manifesto-arco [data-passo] { transition: opacity .6s var(--ease), transform .8s var(--ease), filter .6s; }
.js .manifesto-arco [data-passo]:not(.is-ativo) { opacity: 0; transform: translateY(14px); filter: blur(4px); pointer-events: none; }
.manifesto-arco .cena-barra { max-width: 220px; margin: clamp(18px, 3vh, 32px) auto 0; }
.manifesto-cta { padding: clamp(8px, 2vw, 24px) 0 clamp(72px, 8vw, 112px); }
.manifesto-cta .acoes { margin-top: 0; }
/* sem JS ou com movimento reduzido: lista simples, com os números */
html:not(.js) .arco, html:not(.js) .manifesto-arco .cena-barra { display: none; }
html:not(.js) .arco-verdades { gap: 32px; }
html:not(.js) .arco-verdades li { grid-area: auto; }
html:not(.js) .arco-verdades .verdade-n { display: block; font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--italico); }

/* ---------- 16. RESPONSIVO ---------- */
@media (max-width: 1100px) {
  :root { --pad: 28px; }
  .nav-links { display: none; }
  /* no tablet e no celular o menu só tem a assinatura: fica no centro e no alto da página, sem acompanhar a rolagem */
  .nav-shell { position: absolute; }
  .nav-bar { justify-content: center; }
  .sec-cabeca, .grade-5-7, .grade-7-5 { grid-template-columns: minmax(0, 1fr); }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credenciais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credenciais > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .credenciais > div:nth-child(n+3) { border-top: 1px solid var(--fio-c); }
  .fixo { position: static; }
  .faixa { grid-template-columns: minmax(0, 1fr); }
  .faixa-foto { min-height: 56svh; }
  .bussola { max-width: 380px; }
}
@media (max-width: 760px) {
  .depara-nos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
  .depara-nos li:nth-child(3) { grid-column: 2; grid-row: 2; }
  .depara-nos li:nth-child(4) { grid-column: 1; grid-row: 2; }
  .depara-nos li:nth-child(3)::before { right: auto; left: 50%; top: auto; bottom: 100%; width: 1px; height: 22px; }
  .depara-nos li:nth-child(4)::before { right: auto; left: 100%; width: 26px; }
  .depara-agora .depara-nos li:nth-child(3)::before { background: linear-gradient(180deg, color-mix(in srgb, var(--argila) 40%, transparent), var(--linho), color-mix(in srgb, var(--argila) 40%, transparent)) 0 100% / 100% 300% no-repeat; }
  .depara-topo { flex-direction: column; gap: 6px; }
  .trilha-fim p { font-size: 20px; }
  .arco { --R: 720px; --passo: 13.5deg; --topo: 34px; height: 156px; margin-top: 18px; }
  .arco-n { font-size: 78px; }
  .arco-titulo { font-size: 28px; }
  .manifesto-arco h3 { font-size: 25px; }
  .arco-verdades p { font-size: 17px; }
  .manifesto-arco .cena-barra { margin-top: 28px; }
  :root { --pad: 20px; --r-bussola: 28px; --nav-h: 60px; }
  .nav-shell { padding: 12px; }
  .nav-bar { padding: 8px 8px 8px 14px; }
  .nav-logo { width: 156px; height: 27px; }
  .nav-logo-mono svg:first-child { width: 31px; height: 27px; }
  .nav-logo-nome { width: 138px !important; }
  .btn { min-width: 0; width: 100%; }
  .acoes { gap: 22px; }
  .grade-2, .grade-3, .grade-4, .credenciais, .ficha { grid-template-columns: minmax(0, 1fr); }
  .credenciais > div { border-left: 0; padding-left: 0; padding-right: 0; }
  .credenciais > div + div { border-top: 1px solid var(--fio-c); }
  .aba span:nth-child(2) { display: none; }
  .modos { grid-template-columns: minmax(0, 1fr); }
  .virada { width: auto; height: 76px; }
  .virada svg { transform: rotate(48.7deg); }
  .modo { padding: 28px 24px 30px; }
  .numeros { grid-template-columns: minmax(0, 1fr); }
  .numeros > div, .numeros > div + div { padding: 22px 0; border-left: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: baseline; }
  .numeros > div + div { border-top: 1px solid var(--fio-c); }
  .numeros b { font-size: 64px; }
  .numeros > div > span { margin-top: 0; }
  .card-corpo { padding: 26px 22px 28px; }
  .card-destaque { padding: 32px 22px 36px; }
  .depoimento { padding-left: 18px; }
  .destaque { padding: 24px 22px 26px; }
  .acordeao summary { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 14px; padding: 22px 0; }
  .acordeao .n { font-size: 32px; }
  .acordeao-corpo { padding: 0 0 26px 54px; }
  .mov { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; }
  .mov-letra { font-size: 36px; }
  .rodape-base { flex-direction: column; align-items: flex-start; }
  .notch-bar { width: 100%; justify-content: center; gap: 14px; padding-inline: 10px; }
  .notch-bar::before, .notch-bar::after { display: none; }
  .notch-status { display: none; }
  .pilula { flex: 1; justify-content: center; }
  /* cenas fixas viram lista simples no celular; o passo ativo segue o centro da tela */
  .js .cena:not([data-celular="fixa"]) { height: auto; padding-block: var(--section-gap); }
  .js .cena:not([data-celular="fixa"]) .cena-palco { position: static; min-height: 0; padding-block: 0; }
  .js .cena:not([data-celular="fixa"]) [data-passo]:not(.is-ativo) { opacity: .5; }
  .js .cena[data-celular="fixa"] .cena-palco { padding-block: 28px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js [data-stagger] > *, .js [data-cascata] .w, .js [data-cascata-item] { opacity: 1; top: 0; transform: none; filter: none; }
  .js [data-palavras-luz] .w { opacity: 1; }
  .js [data-cortina] { border-top-right-radius: 0; }
  .js [data-cortina] > * { transform: none; }
  .js .cena { height: auto; padding-block: var(--section-gap); }
  .js .cena-palco { position: static; min-height: 0; padding-block: 0; }
  .js .cena [data-passo]:not(.is-ativo) { opacity: 1; }
  html { scroll-behavior: auto; }
}
/* movimento reduzido: o arco vira lista */
@media (prefers-reduced-motion: reduce) {
  .manifesto-arco .arco, .manifesto-arco .cena-barra { display: none; }
  .arco-verdades { gap: 32px; }
  .js .manifesto-arco [data-passo] { grid-area: auto; opacity: 1; transform: none; filter: none; }
  .arco-verdades .verdade-n { display: block; font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--italico); }
}