/* ============================================================================
   GREICE BERTONCELLO · style.css
   Só estiliza e chama. Os kits (kits.css / kits.js) são cópia exata da casa.
   Os números de movimento estão nos tokens do :root do kits.css (RECEITAS §E).
   ========================================================================== */

/* --- 1. TOKENS DO CLIENTE (a paleta nasce do logo medido) ----------------- */
:root {
  /* os quatro que o kit usa, sobrescritos aqui */
  --bg:     #060607;                      /* preto do logo (#000000 medido), elevado o mínimo (PADRAO §1.1) */
  --fg:     #F1F0EE;                      /* branco a ~94%: light-on-dark não pode vibrar */
  --acento: #D8402A;                      /* #EB4930 medido na válvula DDX, dessaturado ~15% */

  /* derivados de --fg/--bg: quando o P06 inverte a base, eles invertem juntos */
  --mudo:        color-mix(in oklab, var(--fg) 55%, transparent);
  --linha:       color-mix(in oklab, var(--fg) 16%, transparent);
  --linha-forte: color-mix(in oklab, var(--fg) 34%, transparent);
  --sup:         color-mix(in oklab, var(--fg) 5%, var(--bg));
  --veu-nav:     color-mix(in oklab, var(--bg) 92%, transparent);

  --papel:  #F4F2ED;                      /* o sistema invertido do capítulo 5 */
  --papel-fg: #121212;

  /* escala de 4 px */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px;
  --s48:48px; --s64:64px; --s96:96px; --s128:128px; --s160:160px;
  --pad-sec: clamp(64px, 10vw, 140px);
  --margem: clamp(20px, 5vw, 64px);
  --prosa: 58ch;

  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-serifa:  'Cormorant Garamond', Georgia, serif;
}

/* --- 2. BASE -------------------------------------------------------------- */
body { font-family: var(--f-display); font-weight: 300; }
* { box-sizing: border-box; }
::selection { background: var(--acento); color: #fff; }
a { color: inherit; }

.cx { width: min(100%, 1440px); margin-inline: auto; padding-inline: var(--margem); }

.pular {
  position: fixed; left: var(--s16); top: -100px; z-index: 200; background: var(--fg); color: var(--bg);
  padding: var(--s12) var(--s16); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; transition: top var(--dur-micro) var(--ease-out);
}
.pular:focus { top: var(--s16); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* --- 3. TIPOGRAFIA (2 famílias, nada mais) -------------------------------- */
.display { font-family: var(--f-display); font-weight: 300; }
.serifa  { font-family: var(--f-serifa);  font-weight: 300; }

.h-hero {
  font-size: clamp(1.5rem, 3.05vw, 3.05rem); line-height: 1.1; letter-spacing: -.032em;
  margin: 0 0 var(--s32); max-width: 34ch;
}
.h-2 {
  font-size: clamp(1.7rem, 3.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.028em;
  margin: 0 0 var(--s32); max-width: 24ch;
}
h1 em, h2 em, .serifa em, em.serifa {
  font-family: var(--f-serifa); font-style: italic; font-weight: 300;
  font-size: 1.12em; letter-spacing: -.01em;
}
.serifa.h-2 { font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: -.018em; line-height: 1.08; }
.serifa.h-2 em { font-size: 1em; }

.eyebrow {
  display: flex; align-items: baseline; gap: var(--s12);
  font-size: .72rem; line-height: 1; letter-spacing: .3em; text-transform: uppercase;
  color: var(--mudo); margin: 0 0 var(--s24); font-weight: 400;
}
.eyebrow i { font-style: normal; color: var(--acento); font-variant-numeric: tabular-nums; }
.eyebrow > span { position: relative; padding-left: var(--s16); }
.eyebrow > span::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 1px; background: var(--linha-forte);
}

.corpo { font-size: clamp(.95rem, 1.05vw, 1.06rem); line-height: 1.62; max-width: var(--prosa); color: var(--fg); margin: 0 0 var(--s24); }
.corpo--mudo { color: var(--mudo); }
.corpo--grande { font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.42; letter-spacing: -.012em; max-width: 34ch; }
.sub { font-size: clamp(.85rem, 1vw, .98rem); line-height: 1.5; color: var(--mudo); max-width: 38ch; margin: 0; }

.ficha {
  font-size: .68rem; line-height: 1.85; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mudo); margin: 0; font-weight: 400;
}
.ficha--solta { margin-top: var(--s48); color: var(--fg); letter-spacing: .3em; }
.fonte { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mudo); margin: var(--s16) 0 0; }

/* mais ar ACIMA do heading do que abaixo (PADRAO §5) */
.bloco { padding: var(--pad-sec) 0; }
.bloco h2 { margin-top: 0; }

/* --- 4. NAV + A RÉGUA (D1: a régua é o protagonista) ---------------------- */
/* A NAV É CAMADA FIXA E ATRAVESSA O SITE INTEIRO: passa por cima do capítulo em
   papel, das fichas claras do catálogo e do painel perfurado retroiluminado do
   pico. Por isso o véu não é decoração, é a LEI DO CONTRASTE (§1A.4): faixa de
   ~96 px a 86-94% do fundo, dissolvendo até 174 px. (Ficha §6, linha "nav".) */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s24);
  padding: var(--s16) var(--margem) var(--s48);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--bg) 94%, transparent) 0%,
    color-mix(in oklab, var(--bg) 86%, transparent) 42%,
    color-mix(in oklab, var(--bg) 52%, transparent) 74%,
    transparent 100%);
}
.nav__marca { display: block; line-height: 0; min-width: 0; }
/* o logo entra com a chapa preta já recortada em alfa (mesmo desenho, sem fundo);
   no capítulo em papel ele inverte para traço escuro */
.papel .nav__marca img, .papel .rodape__logo { filter: invert(1); }
.nav__marca img { width: clamp(132px, 15vw, 196px); height: auto; }
.nav__links { display: flex; gap: var(--s8); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; }
.nav__links a { text-decoration: none; color: color-mix(in oklab, var(--fg) 78%, transparent); transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:hover { color: var(--fg); }
.nav__links span { color: var(--linha-forte); }
.nav__fone {
  font-size: .72rem; letter-spacing: .18em; text-decoration: none; color: var(--fg);
  font-variant-numeric: tabular-nums; padding-bottom: 3px; border-bottom: 1px solid var(--linha);
  white-space: nowrap; flex-shrink: 0;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.nav__fone:hover { border-color: var(--acento); }
/* redundância proposital no capítulo em papel: se o amanhecer ainda estiver a meio
   caminho quando a classe entra, o texto da nav já está escuro */
.papel .nav__links a { color: rgba(18,18,18,.62); }
.papel .nav__links a:hover { color: #121212; }
.papel .nav__links span { color: rgba(18,18,18,.28); }
.papel .nav__fone { color: #121212; border-bottom-color: rgba(18,18,18,.3); }

/* a régua vive no rodapé da janela: é o traço, e não briga com a nav */
.regua { position: fixed; left: 0; right: 0; bottom: 0; z-index: 59; height: 1px; pointer-events: none; }
/* o nome do capítulo atravessa a tela inteira e passa por cima de corpo de texto:
   este é o véu dele, na direção do texto (lei do contraste, de novo) */
.regua::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(0deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 62%, transparent) 46%, transparent 100%);
}
.regua__linha {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
.regua__nome {
  position: absolute; bottom: var(--s12); left: 0; font-size: .6rem; font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase; color: var(--mudo); white-space: nowrap;
  transform: translateX(0); will-change: transform; padding-left: var(--s12);
}

/* --- 5. PALCOS E VÉUS ----------------------------------------------------- */
.trilho { position: relative; }
.am-palco { background: var(--bg); }
.palco__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.am-palco canvas { position: absolute; inset: 0; z-index: 1; }

.lampada {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 90% at 4% 42%, rgba(255,255,255,.075) 0%, transparent 62%);
}
.veu { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.veu--esq { background: linear-gradient(90deg, rgba(6,6,7,.86) 0%, rgba(6,6,7,.40) 52%, rgba(6,6,7,0) 78%); }
/* a aresta de baixo do palco dissolve na página: sem corte duro quando o palco solta */
.veu--baixo { inset: auto 0 0 0; height: 34vh; background: linear-gradient(180deg, rgba(6,6,7,0), rgba(6,6,7,.96) 82%, #060607); }
/* o véu do pico cobre só a faixa do canvas (a metade de cima). É quase chapa na
   coluna da headline: o traço do quadro passava POR DENTRO de "One line. Two" e
   lia como um risco sobre o texto. Agora ele sai do escuro à direita das palavras. */
.veu--pico { inset: 0 0 auto 0; height: 54%; background: linear-gradient(90deg, rgba(6,6,7,.985) 0%, rgba(6,6,7,.95) 26%, rgba(6,6,7,.52) 52%, rgba(6,6,7,0) 74%); }
/* a ponte do pico para o contato (P11): o palco cede e escurece */
.veu--fecho { inset: 0; background: #060607; opacity: 0; z-index: 4; }

.palco__texto {
  position: absolute; z-index: 3; left: var(--margem); bottom: clamp(56px, 12vh, 132px);
  width: min(58ch, 50vw); max-width: calc(100% - var(--margem) * 2);
}
.hero__texto { bottom: clamp(64px, 12vh, 132px); width: min(64ch, 56vw); }

/* a COTA: o traço do quadro não morre no meio da tela. Uma cota de 1 px o leva
   até a margem direita e ali mora a legenda técnica, como num carimbo de prancha */
.hero__cota { position: absolute; z-index: 3; left: 64%; right: var(--margem); top: 40.3%; height: 1px; }
.hero__cota__linha {
  position: absolute; inset: 0; background: var(--linha-forte);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
.hero__cota__tique {
  position: absolute; right: 0; top: -5px; width: 1px; height: 11px; background: var(--linha-forte);
  opacity: 0; will-change: opacity;
}
.hero__legenda {
  position: absolute; z-index: 3; right: var(--margem); top: calc(40.3% + 22px);
  text-align: right; color: var(--mudo); opacity: 0; will-change: opacity, transform;
}

/* --- 6. MANIFESTO (sobe POR CIMA do palco da cena 1 · P12) ---------------- */
.bloco--manifesto {
  margin-top: -100dvh; position: relative; z-index: 2;
  background: transparent;
  padding-top: calc(100dvh - var(--s64));
}
/* P12 cumprido: a chapa cobre a coluna do texto e DEIXA o canto superior direito
   do palco da cena 1 vivo a ~45%. Sem ela, a metade direita era preto inerte. */
.manifesto__veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; will-change: transform;
  background:
    linear-gradient(90deg, rgba(6,6,7,.98) 0%, rgba(6,6,7,.96) 46%, rgba(6,6,7,.66) 68%, rgba(6,6,7,.42) 100%),
    linear-gradient(180deg, rgba(6,6,7,0) 0%, rgba(6,6,7,.22) 12%, rgba(6,6,7,.70) 30%, #060607 52%);
}
.acende { max-width: 54ch; }
.bloco--manifesto .serifa.h-2 { max-width: none; }

/* --- 7. BEFORE · os dados sobre a cena (P10) ------------------------------ */
.before__texto { width: min(46ch, 40vw); }
.citas { list-style: none; margin: 0; padding: 0; }
.citas li {
  font-family: var(--f-serifa); font-size: clamp(1rem, 1.5vw, 1.32rem); line-height: 1.4;
  color: var(--fg); padding-left: var(--s16); border-left: 1px solid var(--linha-forte);
  margin-bottom: var(--s12);
}
/* o desenho do testfit e as etiquetas moram na metade direita: o texto fica com a esquerda */
#dadosTestfit svg { left: 50%; width: 50%; }
#dadosTestfit path { stroke: rgba(241,240,238,.82); stroke-width: 1.2; }
#dadosTestfit .am-dado {
  background: rgba(15,15,17,.94); color: var(--fg); border-color: var(--linha);
  border-radius: 0; font-family: var(--f-display); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; max-width: 32ch; padding: var(--s12) var(--s16); line-height: 1.7;
}
#dadosTestfit .am-dado b { font-weight: 400; color: var(--mudo); letter-spacing: .14em; }
.bloco--fecho { padding-block: var(--s96) var(--s128); }

/* --- 8. WORK · o trilho das seis fichas (C8 + P14) ------------------------ */
.htrilho { height: 400vh; }
/* o palco do catálogo não acompanha a troca de tema do P06: ele fica preto
   enquanto a página por baixo vira papel, e a emenda lê como a folha entrando */
.am-htrilho__palco {
  background: #060607; color: #F1F0EE; flex-direction: column; justify-content: center; gap: var(--s32);
  padding-top: clamp(96px, 15vh, 160px); padding-bottom: var(--s48);
}
.work__cabeca { width: 100%; }
.work__dica { margin: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.am-htrilho__faixa { align-items: flex-end; gap: clamp(20px, 2.6vw, 44px); padding-inline: var(--margem); }

/* profundidade por distância SEM animar `filter` (lei 18): o desfoque é uma camada
   sobreposta e o que anima é a OPACITY dela. `transform` e `opacity`, nada mais. */
.ficha-card {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; text-align: left;
  cursor: pointer; display: block; width: clamp(240px, 26vw, 400px);
  transform: scale(.95); opacity: .76;
  transition: transform var(--dur-reveal) var(--ease-out), opacity var(--dur-reveal) var(--ease-out);
}
.ficha-card.ativa, .ficha-card:hover, .ficha-card:focus-visible { transform: scale(1); opacity: 1; }
.ficha-card__img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 1; transition: opacity var(--dur-reveal) var(--ease-out);
}
.ficha-card.ativa .ficha-card__img::before,
.ficha-card:hover .ficha-card__img::before,
.ficha-card:focus-visible .ficha-card__img::before { opacity: 0; }
.ficha-card--alta  .ficha-card__img { aspect-ratio: 3 / 4; }
.ficha-card--larga .ficha-card__img { aspect-ratio: 16 / 10; }
.ficha-card--media .ficha-card__img { aspect-ratio: 1 / 1; }
.ficha-card--larga { width: clamp(280px, 34vw, 540px); }
.ficha-card__img { display: block; overflow: hidden; background: #0F0F11; position: relative; max-height: 38vh; }
.ficha-card__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.ficha-card__img img { width: 100%; height: 100%; object-fit: cover; }
.ficha-card__pe { display: block; background: #0F0F11; padding: var(--s16) var(--s16) var(--s24); }
.ficha-card__n { display: block; font-size: .64rem; letter-spacing: .3em; color: var(--acento); font-variant-numeric: tabular-nums; }
.ficha-card__nome { display: block; font-size: clamp(.98rem, 1.15vw, 1.16rem); line-height: 1.25; letter-spacing: -.015em; margin: var(--s8) 0 var(--s12); }
.ficha-card .ficha { font-size: .6rem; letter-spacing: .18em; line-height: 1.75; color: rgba(241,240,238,.52); }
.ficha-card__desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: var(--s12); font-size: .78rem; line-height: 1.55; color: rgba(241,240,238,.52);
}
.work__cabeca .eyebrow, .work__dica { color: rgba(241,240,238,.52); }

/* a chegada do trilho horizontal */
.ficha-fim {
  width: clamp(280px, 30vw, 440px); align-self: flex-end; padding-bottom: var(--s24);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s16);
}
.ficha-fim__risco {
  display: block; width: 100%; height: 1px; background: var(--acento);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform; margin-bottom: var(--s16);
}
.ficha-fim .eyebrow { margin: 0; color: rgba(241,240,238,.52); }
.ficha-fim__frase {
  font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.16; letter-spacing: -.015em; margin: 0;
  color: #F1F0EE;
}
.ficha-fim .cta { color: #F1F0EE; border-color: rgba(241,240,238,.34); }
.ficha-fim .cta:hover, .ficha-fim .cta:focus-visible { background: #F1F0EE; color: #060607; border-color: #F1F0EE; }

/* --- 9. THE BACK OF THE DRAWING · o capítulo em papel (P06) -------------- */
.trilho--papel .am-palco { background: var(--papel); }
.trilho--papel .palco__texto { color: var(--papel-fg); left: auto; right: var(--margem); width: min(38ch, 30vw); bottom: auto; top: 50%; transform: translateY(-50%); }
.trilho--papel .eyebrow { color: rgba(18,18,18,.56); }
/* o acento sobre papel precisa escurecer: #D8402A a 11 px sobre #F4F2ED fica em 3:1 */
.trilho--papel .eyebrow i { color: #9E2817; }
.trilho--papel .eyebrow span::before { background: rgba(18,18,18,.3); }
.trilho--papel .corpo { color: rgba(18,18,18,.78); }

/* --- 10. PICO · two signatures (C19 + scrub no mesmo trilho) -------------- */
.trilho--pico { height: 340vh; }
.trilho--pico .am-palco canvas { height: 54%; top: 0; bottom: auto; }
/* A COR CHEGA (contrato do Blueprint, bloco 6): o quadro do pico vive dessaturado
   e ganha material entre 45% e 60% do trilho. O que anima é só a OPACITY desta
   camada; `filter` fica estático nela e nunca entra numa transição (lei 18). */
.pico__dessat {
  position: absolute; left: 0; right: 0; top: 0; height: 54%; z-index: 2; pointer-events: none;
  background: rgba(10,10,11,.42); opacity: 1; will-change: opacity;
}
@supports (backdrop-filter: saturate(0)) or (-webkit-backdrop-filter: saturate(0)) {
  .pico__dessat { background: rgba(10,10,11,.22); backdrop-filter: saturate(.06) brightness(.86); -webkit-backdrop-filter: saturate(.06) brightness(.86); }
}
.trilho--pico .am-palco { background: var(--bg); }
.trilho--pico .am-palco::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 46%; background: var(--bg); z-index: 1; }

.pico__cabeca { position: absolute; z-index: 4; left: var(--margem); top: clamp(76px, 12vh, 128px); width: min(40ch, 44vw); }
.pico__rot {
  position: absolute; z-index: 6; font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: color-mix(in oklab, var(--fg) 74%, transparent); margin: 0;
  background: #060607; padding: var(--s8) var(--s12);
}
/* os dois rótulos moram na emenda das duas metades: em cima o desenho, embaixo o cronograma */
.pico__rot--alto { right: var(--margem); top: calc(54% - 32px); }
.pico__rot--baixo { left: var(--margem); top: 0; }

.pico__baixo { position: absolute; z-index: 5; left: 0; right: 0; top: 56%; bottom: 0; padding: var(--s32) var(--margem) 0; }
/* a régua da obra: cinco segmentos de 20% encadeados. As QUATRO DOBRAS caem em
   20 / 40 / 60 / 80% do vão, e `.regua-nos` tem exatamente o mesmo vão, para que
   cada nó pouse NA abcissa da sua dobra (a falha do build anterior era essa). */
.regua-obra { position: absolute; left: var(--margem); right: var(--margem); top: 26%; height: 2px; }
.regua-obra .seg { background: var(--fg); transform-origin: 0 50%; }
#seg1 { left: 0; top: 0; width: 20%; height: 2px; }
#seg2, #seg3, #seg4, #seg5 { left: 100%; top: 0; width: 100%; height: 100%; }

.regua-nos { position: absolute; left: var(--margem); right: var(--margem); top: 26%; bottom: 0; }
.no {
  top: var(--s32); width: min(19%, 240px); padding-left: var(--s12);
  border-left: 1px solid var(--linha-forte);
}
/* o tique: a dobra fica marcada mesmo depois que a régua endireita, para que um
   print do pico conte a frase inteira (uma linha, quatro nós, quatro disciplinas) */
.no::before {
  content: ""; position: absolute; left: -1px; top: calc(var(--s32) * -1); width: 1px; height: var(--s32);
  background: var(--acento);
}
.no b { display: block; font-size: .62rem; font-weight: 400; letter-spacing: .3em; color: var(--acento); font-variant-numeric: tabular-nums; }
.no__t { display: block; font-size: clamp(.92rem, 1.2vw, 1.14rem); letter-spacing: -.01em; margin: var(--s8) 0 var(--s4); }
.no__d { display: block; font-size: .78rem; line-height: 1.55; color: var(--mudo); }

.pico__fecho {
  position: absolute; z-index: 5; left: var(--margem); bottom: clamp(32px, 6vh, 64px);
  font-size: clamp(1.2rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -.015em; color: var(--fg); margin: 0;
}
.risco {
  position: fixed; z-index: 6; left: 18vw; top: 46vh; width: 26vw; height: 3px;
  background: var(--acento); transform: scaleX(0) rotate(-9deg); transform-origin: 0 50%;
  opacity: 0; pointer-events: none; will-change: transform;
}

/* --- 11. CONTACT · a foto cede espaço (P11) ------------------------------ */
/* 300vh, não 200: a animação do kit resolve nos primeiros 200vh (o `end` é
   reescrito em main.js) e os últimos 100vh são REPOUSO, com a manchete, o CTA e
   o número inteiros na tela. Antes, o convite chegava no mesmo instante em que
   saía de cena, e no fim absoluto do documento não era pintado. */
.ceder { height: 300vh; }
.ceder .am-ceder__palco { background: var(--bg); }
.ceder__foto { margin: 0; position: relative; }
.ceder__foto img { width: 100%; height: auto; display: block; }
/* a legenda mora DENTRO do quadro, no terço escuro à direita (zona vazia medida):
   abaixo da foto ela caía fora do palco e nunca era lida */
.ceder__foto figcaption { position: absolute; right: var(--s16); bottom: var(--s16); text-align: right; }
.ceder__texto .cta { margin: var(--s32) 0 var(--s24); }

.cta {
  display: inline-block; text-decoration: none; color: var(--fg);
  border: 1px solid var(--linha-forte); padding: var(--s16) var(--s32);
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.cta:hover, .cta:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cta--pequeno { padding: var(--s12) var(--s24); font-size: .66rem; }
.fone {
  display: block; text-decoration: none; font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--fg);
  margin-bottom: var(--s24); line-height: 1;
}
.fone:hover { color: var(--acento); }

/* --- 12. RODAPÉ · a cena final (D9) -------------------------------------- */
/* posicionado de propósito: `.am-ceder__palco` é sticky (elemento posicionado) e
   pintava POR CIMA de um rodapé estático. Aqui o rodapé passa a ter camada. */
.rodape {
  position: relative; z-index: 3; background: var(--bg);
  padding: var(--s128) 0 var(--s48); border-top: 1px solid var(--linha);
}
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: var(--s48); align-items: start; }
.servicos { list-style: none; margin: 0; padding: 0; font-size: .82rem; line-height: 2.1; color: var(--mudo); }
.servicos a { text-decoration: none; }
.servicos a:hover { color: var(--fg); }
.rodape__col--marca { position: relative; padding-top: var(--s32); }
.rodape__risco {
  position: absolute; left: 0; top: var(--s32); height: 1px; width: 100%;
  background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
.rodape__logo { width: 100%; max-width: 420px; height: auto; margin-top: var(--s48); }

/* --- 13. O PAINEL DA FICHA (P14 · expansão + troca) ---------------------- */
.painel {
  /* o painel é sempre o sistema escuro, mesmo se aberto durante o capítulo em papel */
  --bg: #060607; --fg: #F1F0EE;
  position: fixed; inset: 0; z-index: 120; background: #060607; color: #F1F0EE;
  display: flex; flex-direction: column; overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.painel[hidden] { display: none; }
.painel__topo {
  display: flex; align-items: baseline; gap: var(--s16);
  padding: var(--s24) var(--margem) var(--s16); border-bottom: 1px solid var(--linha);
}
.painel__n { font-size: .66rem; letter-spacing: .3em; color: var(--acento); font-variant-numeric: tabular-nums; }
.painel__nome { font-size: clamp(1.1rem, 2vw, 1.8rem); letter-spacing: -.02em; margin: 0; flex: 1; line-height: 1.15; }
.painel__x, .painel__seta {
  appearance: none; background: none; border: 1px solid var(--linha); color: var(--mudo); cursor: pointer;
  font-family: var(--f-display); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  padding: var(--s8) var(--s16); transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.painel__x:hover, .painel__seta:hover { color: var(--fg); border-color: var(--linha-forte); }
.painel__corpo { flex: 1; display: grid; grid-template-columns: 1fr 340px; gap: var(--s32); padding: var(--s24) var(--margem); overflow: hidden; }
.painel__media { display: flex; gap: var(--s16); overflow-x: auto; overflow-y: hidden; align-items: center; will-change: transform; }
.painel__media img { height: 100%; width: auto; max-height: 100%; object-fit: contain; flex: 0 0 auto; background: var(--sup); }
.painel__lado { overflow-y: auto; padding-right: var(--s8); }
.painel__lado .ficha { margin-bottom: var(--s24); color: var(--fg); }
.painel__nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s16);
  padding: var(--s16) var(--margem) var(--s24); border-top: 1px solid var(--linha);
}
.painel__conta { font-size: .66rem; letter-spacing: .3em; color: var(--mudo); font-variant-numeric: tabular-nums; }
.varredura {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--fg);
  transform: translateX(-10px); opacity: 0; pointer-events: none; will-change: transform;
}

/* --- 14. MOBILE ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .painel__corpo { grid-template-columns: 1fr; overflow-y: auto; }
  .painel__media { height: 48vh; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__col--marca { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  :root { --prosa: 44ch; }
  .am-trilho { height: 200vh; }
  .trilho--pico { height: 240vh; }
  .htrilho { height: auto; }
  .nav { padding: var(--s12) var(--margem) var(--s32); }
  .nav__links { display: none; }
  /* o telefone é o ÚNICO canal do cliente: ele nunca encolhe nem quebra. O logo
     é quem cede largura (a 390px ele rendia "+1  6" e o resto ia para a borda). */
  .nav__marca img { width: clamp(104px, 28vw, 132px); }
  .nav__fone { letter-spacing: .08em; font-size: .68rem; }
  .ceder { height: auto; }
  /* no celular a coluna direita não existe (uma coluna só): a cota não tem
     trabalho a fazer e não encosta na mesma altura do traço do quadro */
  .hero__cota { display: none; }
  .hero__legenda { top: calc(40% + 18px); font-size: .6rem; letter-spacing: .16em; }
  .palco__texto { width: auto; right: var(--margem); bottom: clamp(40px, 9vh, 80px); }
  .veu--esq { background: linear-gradient(0deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.52) 46%, rgba(6,6,7,.1) 100%); }
  .before__texto { width: auto; }
  .bloco--manifesto { padding-top: calc(100dvh - var(--s32)); }
  .trilho--papel .palco__texto { left: var(--margem); right: var(--margem); width: auto; top: auto; bottom: var(--s32); transform: none; }
  .trilho--pico .am-palco canvas { height: 42%; }
  .trilho--pico .am-palco::after { top: 42%; height: 58%; }
  /* no celular o texto do pico é full width: o véu passa a ser de cima para baixo */
  .veu--pico { height: 42%; background: linear-gradient(180deg, rgba(6,6,7,.93) 0%, rgba(6,6,7,.62) 44%, rgba(6,6,7,.18) 100%); }
  .pico__cabeca { width: auto; right: var(--margem); top: clamp(64px, 10vh, 96px); }
  .pico__cabeca .h-2 { font-size: 1.5rem; }
  .pico__rot--alto { right: var(--margem); top: 38%; }
  .pico__baixo { top: 44%; padding-top: var(--s24); }
  .regua-obra, .regua-nos { top: 16%; }
  .no { width: 46%; top: 18%; }
  #no1 { left: 2% !important; } #no2 { left: 52% !important; }
  #no3 { left: 2% !important; top: 56%; } #no4 { left: 52% !important; top: 56%; }
  /* no celular os nós viram grade 2×2 e não moram mais na abcissa da dobra: sem tique */
  .no::before { display: none; }
  .no__d { display: none; }
  .ficha-fim { width: 76vw; padding-bottom: 0; }
  .pico__fecho { font-size: 1.15rem; bottom: var(--s24); }
  .am-htrilho__faixa { align-items: stretch; padding-block: var(--s32); }
  .ficha-card { width: 76vw; transform: none; filter: none; opacity: 1; }
  .ficha-card--larga { width: 84vw; }
  .work__cabeca { padding-top: var(--s96); }
  .risco { display: none; }
  .fone { font-size: 2rem; }
  .rodape__grade { grid-template-columns: 1fr; }
}

/* --- 15. REDUZIR MOVIMENTO ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ficha-card { transform: none; opacity: 1; }
  .ficha-card__img::before { display: none; }
  .regua__linha, .rodape__risco, .hero__cota__linha, .ficha-fim__risco { transform: scaleX(1) !important; }
  .hero__cota__tique, .hero__legenda { opacity: 1 !important; }
  .manifesto__veu { transform: none !important; }
  .pico__dessat, .veu--fecho { opacity: 0 !important; }
  .risco { display: none; }
  .htrilho { height: auto; }
  .am-htrilho__palco { position: static; height: auto; }
  .am-htrilho__faixa { overflow-x: auto; transform: none !important; padding-block: var(--s32); }
  .bloco--manifesto { margin-top: 0; padding-top: var(--pad-sec); background: var(--bg); }
  .am-ceder__texto { opacity: 1 !important; transform: none !important; position: static; width: auto; margin-top: var(--s32); }
  .am-ceder { height: auto; }
  .am-ceder__palco { position: static; height: auto; display: block; padding: var(--pad-sec) var(--margem); }
  .am-ceder__foto { transform: none !important; width: 100%; }
  .no, .seg { transform: none !important; opacity: 1 !important; }
}