@charset "UTF-8";
/* ============================================================================
   SABINE GASPARETTO — Treinamento Feminino
   Implementação de /design.md v1.0 — conceito "Salto e Tênis".
   Regras invioláveis: border-radius 0 · zero box-shadow · dourado nunca é texto
   sobre papel · profundidade vem de bloco de cor, sangramento e filete.
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* cor — base no manual de marca SG */
  --paper:#F2EFEA;
  --paper-2:#E9E5DD;
  --nude:#F2DED0;
  --greige:#DDDACD;
  --ink:#1A1013;
  --ink-muted:#6B5A5E;
  --wine:#7A1836;
  --wine-deep:#5C1027;
  --wine-ink:#3A0A18;
  --gold:#D4812C;
  --gold-light:#E8B77A;
  --on-wine:#F4EBE4;
  --on-wine-muted:#C9AFB3;
  --rule:rgba(26,16,19,.14);
  --rule-strong:rgba(26,16,19,.28);
  --rule-inv:rgba(244,235,228,.20);

  /* tipografia */
  /* ── FONTE DE DISPLAY — ponto único de troca ──────────────────────────────
     Trocar a família aqui e ajustar --display-var junto. --display-var carrega os
     eixos variáveis que a família precisa; em fontes estáticas fica `normal`.
       Instrument Serif : "Instrument Serif",Georgia,serif        · normal
       Bodoni Moda      : "Bodoni Moda","Times New Roman",serif   · "opsz" 24
       Fraunces         : Fraunces,Georgia,serif                  · "opsz" 96,"SOFT" 0,"WONK" 0
       Newsreader       : Newsreader,Georgia,serif                · "opsz" 40
     Ao trocar, conferir a largura do título do hero: cada família tem largura
     diferente e a composição depende da linha caber em uma linha só. */
  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --display-var:normal;
  --f-text:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* O teto de 5.375rem não é estético: acima disso a linha "Não entrego
     exercícios." não cabe na caixa do hero (que fica constante a partir de
     1440px) e quebra em duas, destruindo a sobreposição com a fotografia. */
  --t-xl:clamp(2.875rem,7.2vw,6.5rem);
  --t-l:clamp(2.75rem,6.6vw,6.25rem);
  --t-m:clamp(2rem,3.8vw,3.375rem);
  --t-quote:clamp(1.625rem,3.7vw,3.25rem);
  --t-numeral:clamp(3.25rem,10.5vw,10.5rem);
  --t-lead:clamp(1.0625rem,.94rem + .42vw,1.3125rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-label:.6875rem;
  --t-meta:.75rem;
  --t-btn:.8125rem;

  /* layout */
  --maxw:1440px;
  --maxw-content:1200px;
  --maxw-text:58ch;
  --gutter:clamp(1.25rem,4.5vw,4.5rem);
  --col-gap:clamp(1rem,1.8vw,2rem);
  /* distância da borda do conteúdo até a borda da viewport — usada para sangrar
     imagens que vivem dentro do container centralizado */
  --bleed-x:calc(max((100vw - var(--maxw-content)) / 2, 0px) + var(--gutter));
  --sec-y:clamp(5.5rem,10vw,11rem);
  --sec-y-air:clamp(9rem,16vw,17rem);
  --nav-h:72px;

  --radius:0;

  /* motion */
  --ease-out:cubic-bezier(.16,1,.30,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-fast:180ms;
  --dur-base:280ms;
  --dur-slow:720ms;
  --dur-image:1000ms;
}

/* superfícies bordô: reescrevem os tokens, os componentes se adaptam sozinhos */
.sec--wine,.foot,.menu{
  background:var(--wine);
  --paper:var(--wine);
  --paper-2:var(--wine-deep);
  --ink:var(--on-wine);
  --ink-muted:var(--on-wine-muted);
  --rule:var(--rule-inv);
  --rule-strong:rgba(244,235,228,.34);
  color:var(--on-wine);
}
.foot{background:var(--wine-ink);--paper:var(--wine-ink);--paper-2:var(--wine-deep);}

/* ── 2. RESET ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:var(--radius);}
/* overflow-x na raiz também: o estado pré-reveal escala a imagem em 1.06 e ela
   transborda a caixa. O clip-path já esconde, mas a garantia fica explícita. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-size:var(--t-body);line-height:1.66;
  font-weight:400;font-optical-sizing:auto;
  /* Sem `-webkit-font-smoothing:antialiased`: no macOS ele troca a renderização
     por escala de cinza e AFINA o traço. Numa Didone de haste fina sobre fundo
     claro é justamente o que faz o título parecer apagado. O padrão do navegador
     entrega o texto com o peso que a fonte realmente tem. */
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
::selection{background:var(--wine);color:var(--on-wine);}
section{scroll-margin-top:calc(var(--nav-h) + 24px);}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--wine);color:var(--on-wine);padding:14px 20px;font-size:var(--t-label);letter-spacing:.19em;text-transform:uppercase;}
.skip:focus{left:0;}

/* ── 3. TIPOGRAFIA ───────────────────────────────────────────────────────── */
.d-xl,.d-l,.d-m,.quote,.numeral,.pull{
  font-family:var(--f-display);font-weight:400;
  font-variant-numeric:tabular-nums;text-wrap:balance;
}
/* todo texto de display compartilha o mesmo corte óptico, senão o contraste de
   haste muda de seção para seção e a página perde unidade */
.d-xl,.d-l,.d-m,.quote,.numeral,.pull,.sechead__n,.row__n,.acc .row__t,
.nav__index a i,.menu__in a,.rail__n,.manifesto__kicker,.strip li,
.momento__close,.convite__nota{
  font-optical-sizing:none;
  font-variation-settings:var(--display-var);
}
.d-xl{font-size:var(--t-xl);line-height:.85;letter-spacing:-.025em;}
.d-l{font-size:var(--t-l);line-height:.92;letter-spacing:-.02em;}
.d-m{font-size:var(--t-m);line-height:1.04;letter-spacing:-.015em;}
.quote{font-size:var(--t-quote);line-height:1.16;letter-spacing:-.01em;}
.numeral{font-size:var(--t-numeral);line-height:.8;letter-spacing:-.03em;}
.d-xl em,.d-l em,.d-m em,.quote em,.pull em{font-style:italic;}
/* As quebras de linha do título são estruturais, não decorativas: precisam valer
   SEM JavaScript, senão as linhas se emendam sem espaço ("construiua profissional"). */
[data-reveal-type] > span{display:block;}

.lead{font-size:var(--t-lead);line-height:1.52;letter-spacing:-.006em;max-width:var(--maxw-text);color:var(--ink-muted);}
.prose p{max-width:var(--maxw-text);color:var(--ink-muted);}
.prose p + p{margin-top:1.15em;}

.label{
  font-family:var(--f-text);font-size:var(--t-label);font-weight:500;
  font-stretch:112%;line-height:1.2;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-muted);
}
.label--gold{color:var(--gold);}
.sec--wine .label--gold,.foot .label--gold{color:var(--gold-light);}
.meta{font-size:var(--t-meta);font-stretch:108%;letter-spacing:.06em;line-height:1.45;color:var(--ink-muted);}

.pull{
  font-size:clamp(1.625rem,3vw,2.5rem);line-height:1.22;letter-spacing:-.015em;
  color:var(--ink);max-width:22ch;margin-top:3.5rem;
  padding-top:2rem;border-top:1px solid var(--rule);
}

/* ── 4. LAYOUT ───────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw-content);margin-inline:auto;padding-inline:var(--gutter);}
.sec{padding-block:var(--sec-y);}

/* cabeçalho de ficha — repete em todas as seções, é o que cria sistema */
.sechead{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(2rem,4vw,3.25rem);}
.sechead__n{font-family:var(--f-display);font-size:1rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);}
.sechead__rule{display:block;width:32px;height:1px;background:var(--gold);transform-origin:left;}
.sec--wine .sechead__rule,.foot .sechead__rule{background:var(--gold-light);}

/* ficha técnica — rótulo/valor com filete vertical */
.ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);}
.ficha > div{padding:1.25rem 1.5rem 1.25rem 0;border-left:1px solid var(--rule);padding-left:1.5rem;}
.ficha > div:first-child{border-left:0;padding-left:0;}
.ficha dt{margin-bottom:.5rem;}
.ficha dd{font-size:var(--t-meta);font-stretch:108%;letter-spacing:.06em;color:var(--ink);}

/* ── 5. COMPONENTES ──────────────────────────────────────────────────────── */

/* botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:18px 32px;min-height:44px;
  font-size:var(--t-btn);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  transition:background var(--dur-base) var(--ease-inout),color var(--dur-base) var(--ease-inout);
}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold-light);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out);}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);}
.btn--primary{background:var(--wine);color:var(--on-wine);}
.btn--primary:hover{background:var(--wine-deep);}
.btn--onwine{background:var(--on-wine);color:var(--wine);}
.btn--onwine:hover{background:var(--nude);}
.btn--onwine::after{background:var(--wine);}

/* links */
.link{
  display:inline-block;position:relative;padding-bottom:2px;
  font-size:var(--t-small);color:var(--ink);
}
.link::before,.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;}
.link::before{background:var(--rule-strong);}
.link::after{background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-out);}
.sec--wine .link::after,.foot .link::after{background:var(--gold-light);}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1);}
/* variante com seta: o filete para antes da seta, a seta desloca 4px no hover */
.link--arrow::before,.link--arrow::after{width:calc(100% - 1.55em);}
.link__ar{display:inline-block;margin-left:.55em;transition:transform var(--dur-base) var(--ease-out);}
.link--arrow:hover .link__ar,.link--arrow:focus-visible .link__ar{transform:translateX(4px);}

/* linha (.row) — substituta oficial do card */
.rows{border-bottom:1px solid var(--rule);}
.row{transition:background var(--dur-base) var(--ease-inout),border-color var(--dur-base) var(--ease-inout);}
.rows .row{
  display:grid;grid-template-columns:5.5rem 1fr auto;align-items:baseline;gap:1.25rem;
  padding:1.15rem 0;border-top:1px solid var(--rule);
}
/* o filete que separa é do próprio item, para que o hover possa acendê-lo */
.rows .row:hover{background:var(--paper-2);border-top-color:var(--gold);}
.row__n{font-family:var(--f-display);font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);transition:transform var(--dur-base) var(--ease-out);}
.rows .row:hover .row__n{transform:translateX(4px);}
.rows .row__t{font-size:var(--t-small);color:var(--ink-muted);}
.row__m{white-space:nowrap;}
.rows .row__m{color:var(--ink);}

/* acordeão */
.acc{border-bottom:1px solid var(--rule);}
.acc .row{border-top:1px solid var(--rule);}
.acc .row.is-open{border-top-color:var(--gold);}
.acc .row[hidden]{display:none;}
.row__btn{
  display:grid;grid-template-columns:4.5rem 1fr auto 2.5rem;align-items:center;gap:1.25rem;
  width:100%;text-align:left;padding:1.75rem 0;min-height:44px;
  transition:background var(--dur-base) var(--ease-inout);
}
.row__btn:hover{background:var(--paper-2);}
.row__btn .row__n{font-size:1.125rem;color:var(--ink-muted);}
.row__btn:hover .row__n{transform:translateX(4px);}
.acc .row__t{display:block;font-family:var(--f-display);font-size:clamp(1.4375rem,2.5vw,2.125rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink);}
.acc .row__t em{display:block;margin-top:.45rem;font-family:var(--f-text);font-style:normal;font-size:var(--t-small);letter-spacing:0;color:var(--ink-muted);}
.row__plus{position:relative;width:14px;height:14px;justify-self:end;transition:transform var(--dur-base) var(--ease-out);}
.row__plus::before,.row__plus::after{content:"";position:absolute;background:var(--ink);}
.row__plus::before{left:0;top:6.5px;width:14px;height:1px;}
.row__plus::after{top:0;left:6.5px;width:1px;height:14px;}
.row__btn[aria-expanded="true"] .row__plus{transform:rotate(45deg);}
.row__btn[aria-expanded="true"]{background:var(--paper-2);}
.row__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 420ms var(--ease-out);}
.row__panel.is-open{grid-template-rows:1fr;}
/* o respiro fica em margin de filho, não em padding condicional — assim a
   altura é estável e o fechamento não dá salto */
.row__inner{overflow:hidden;}
.row__inner > *:last-child{margin-bottom:2rem;}
.row__inner > p{max-width:var(--maxw-text);margin-left:5.75rem;color:var(--ink-muted);font-size:var(--t-small);}
.incl{margin:1.5rem 0 0 5.75rem;max-width:var(--maxw-text);border-top:1px solid var(--rule);}
.incl li{padding:.7rem 0;border-bottom:1px solid var(--rule);font-size:var(--t-small);color:var(--ink-muted);}

/* chips de filtro */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem);}
.chip{
  padding:11px 18px;min-height:44px;border:1px solid var(--rule);
  font-size:var(--t-label);font-weight:500;font-stretch:112%;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-muted);
  transition:background var(--dur-base) var(--ease-inout),color var(--dur-base) var(--ease-inout),border-color var(--dur-base) var(--ease-inout);
}
.chip:hover{border-color:var(--rule-strong);color:var(--ink);}
.chip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ── 6. NAVEGAÇÃO ────────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:height var(--dur-base) var(--ease-inout),border-color var(--dur-base) linear;
}
.nav.is-stuck{height:60px;border-bottom-color:var(--rule);}
.nav__in{height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:var(--col-gap);}
.nav__mark{flex:0 0 auto;display:flex;align-items:center;min-height:44px;}
.nav__mark img{width:clamp(124px,12vw,168px);height:auto;transition:width var(--dur-base) var(--ease-inout);}
.nav.is-stuck .nav__mark img{width:clamp(108px,10vw,140px);}
.nav__index{display:flex;gap:clamp(1rem,2.4vw,2.5rem);margin-left:auto;}
.nav__index a{
  position:relative;display:flex;align-items:center;gap:.45rem;padding:6px 0;
  font-size:var(--t-label);font-weight:500;font-stretch:112%;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-muted);
  transition:color var(--dur-fast) var(--ease-inout);
}
.nav__index a i{font-family:var(--f-display);font-style:normal;font-size:.6875rem;letter-spacing:0;color:var(--gold);}
.nav__index a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 280ms var(--ease-out);}
.nav__index a:hover,.nav__index a.is-active{color:var(--ink);}
.nav__index a:hover::after,.nav__index a.is-active::after{transform:scaleX(1);}
.nav__cta{margin-left:var(--col-gap);padding:13px 24px;}
.nav__toggle{display:none;margin-left:auto;padding:12px 0;min-height:44px;font-size:var(--t-label);font-weight:500;font-stretch:112%;letter-spacing:.19em;text-transform:uppercase;}
.nav__toggle [data-close]{display:none;}
.nav__toggle[aria-expanded="true"] [data-open]{display:none;}
.nav__toggle[aria-expanded="true"] [data-close]{display:inline;}

/* menu mobile */
.menu{position:fixed;inset:0;z-index:99;padding:calc(var(--nav-h) + 3rem) var(--gutter) 3rem;display:flex;flex-direction:column;justify-content:space-between;}
.menu[hidden]{display:none;}
/* com o menu aberto a navbar não pode continuar sendo uma faixa clara de papel
   flutuando sobre o bordô — ela some e seu conteúdo inverte */
.menu-open .nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;}
.menu-open .nav__mark img{filter:brightness(0) invert(1);opacity:.92;}
.menu-open .nav__toggle{color:var(--on-wine);}
.menu__in{display:flex;flex-direction:column;}
.menu__in a{display:flex;align-items:baseline;gap:1rem;padding:.55em 0;border-bottom:1px solid var(--rule);font-family:var(--f-display);font-size:clamp(2.25rem,10vw,3.5rem);line-height:1.1;letter-spacing:-.02em;}
.menu__in a i{font-style:normal;font-size:.8125rem;color:var(--gold-light);font-variant-numeric:tabular-nums;}
.menu__in a{transition:border-color var(--dur-base) var(--ease-inout);}
.menu__in a span{display:inline-block;transition:transform var(--dur-base) var(--ease-out);}
.menu__in a:hover{border-bottom-color:var(--gold-light);}
.menu__in a:hover span{transform:translateX(10px);}
.menu__in a i{transition:color var(--dur-fast) var(--ease-inout);}
.menu__in a:hover i{color:var(--gold);}
.menu__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding-top:2rem;}

/* índice vertical na calha */
.rail{
  position:fixed;left:calc(var(--gutter) / 2.2);top:50%;transform:translateY(-50%);z-index:60;
  display:none;flex-direction:column;align-items:center;gap:.85rem;
  mix-blend-mode:difference;
}
.rail__n{font-family:var(--f-display);font-size:.8125rem;color:#fff;font-variant-numeric:tabular-nums;}
.rail__line{width:1px;height:56px;background:rgba(255,255,255,.45);}
.rail__label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:var(--t-label);font-weight:500;font-stretch:112%;letter-spacing:.19em;text-transform:uppercase;color:#fff;
}
@media (min-width:1200px){.rail{display:flex;}}

/* ── 7 · 01 ABERTURA ─────────────────────────────────────────────────────── */
/* Composição: título ancorado no ALTO, onde o fundo da fotografia está vazio —
   é ali que a tipografia pode cruzar para dentro da imagem sem colidir com ela.
   O vazio fica no meio da coluna esquerda; lead e CTA ancoram embaixo. */
.hero{
  position:relative;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.hero__media{position:absolute;top:0;bottom:0;right:0;left:46%;overflow:hidden;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;}
/* a caixa é mais larga que a linha mais longa de propósito: com opsz travado a
   letra ficou ~0,7% mais larga, e 12px de folga era margem pequena demais para
   garantir que o título não quebrasse em duas linhas e perdesse a composição */
.hero__head{grid-row:1;position:relative;z-index:2;width:min(72%,62rem);padding-top:calc(var(--nav-h) + 2.25rem);}
.hero__head .label{margin-bottom:clamp(1.25rem,2.4vw,1.75rem);}
.hero__foot{grid-row:2;align-self:end;position:relative;z-index:2;width:min(44%,34rem);padding-bottom:clamp(2rem,4vw,3.25rem);}
.hero__lead{max-width:38ch;}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2rem;margin-top:clamp(2rem,3.4vw,2.75rem);}
.hero__ficha{grid-row:3;position:relative;z-index:2;background:var(--paper);}

/* ── 8 · 02 MÉTODO ───────────────────────────────────────────────────────── */
.manifesto{padding-block:var(--sec-y-air) clamp(4rem,7vw,7.5rem);}
.manifesto .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);}
.manifesto .sechead{grid-column:1/-1;}
.manifesto__q{grid-column:1/10;}
.manifesto__q{grid-column:1/11;}
.manifesto__q .quote{font-size:clamp(2rem,5.2vw,4.5rem);}

/* A tese não é afirmada, é demonstrada: a mesma linguagem de ficha técnica do
   resto do site, aqui comparando dois cenários. A linha em que os dois coincidem
   é a única em dourado — o objetivo é igual, todo o resto não. */
.tese{grid-column:1/8;margin-top:clamp(3.5rem,7vw,6rem);width:100%;border-collapse:collapse;text-align:left;}
.tese caption{text-align:left;padding-bottom:1rem;color:var(--on-wine-muted);}
.tese th,.tese td{padding:.95rem 1rem .95rem 0;border-top:1px solid var(--rule);vertical-align:baseline;}
.tese thead td,.tese thead th{border-top:0;padding-top:0;}
.tese th[scope="row"]{width:34%;font-weight:500;color:var(--on-wine-muted);}
.tese td{font-size:var(--t-small);color:var(--on-wine);width:33%;}
.tese tr[data-same] td{color:var(--gold-light);}
.tese tbody tr:last-child th,.tese tbody tr:last-child td{border-bottom:1px solid var(--rule);}

/* diagonal deliberada: tese no alto à esquerda, sustentação embaixo à direita */
.manifesto__support{grid-column:9/13;align-self:end;margin-top:clamp(5rem,11vw,10rem);}
.manifesto__support p{font-size:var(--t-small);color:var(--on-wine-muted);max-width:34ch;}
.manifesto__support p + p{margin-top:1.15em;}
.manifesto__kicker{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--rule);
  font-family:var(--f-display);font-size:clamp(1.4375rem,2.4vw,1.9375rem);line-height:1.2;
  letter-spacing:-.015em;color:var(--gold-light) !important;max-width:none !important;}

/* ── 9 · 03 SOBRE ────────────────────────────────────────────────────────── */
/* Díptico: retrato formal grande sangrando à esquerda + retrato próximo, menor e
   recuado, ocupando o vazio sob ele. O contraste entre os dois é o que humaniza. */
.sobre{padding-bottom:clamp(4rem,7vw,7.5rem);}
.sobre__grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto;gap:var(--col-gap);align-items:start;}
.sobre__media{grid-column:1/6;grid-row:1;margin-left:calc(var(--bleed-x) * -1);}
.sobre__media img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:52% 26%;}
.sobre__media2{grid-column:2/6;grid-row:2;margin-top:clamp(2.5rem,4.5vw,4rem);overflow:hidden;}
.sobre__media2 img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:46% 28%;}
.sobre__body{grid-column:7/13;grid-row:1/3;padding-top:clamp(1rem,4vw,4rem);}
.sobre__body .d-l{margin-bottom:clamp(1.5rem,2.6vw,2.25rem);}

/* ── 10 · 04 TRAJETÓRIA ──────────────────────────────────────────────────── */
/* a seção já vive sobre paper-2; o hover das linhas precisa de outro degrau, então
   --paper-2 é redefinido para os filhos e o fundo é declarado literalmente */
.trajeto{background:#E9E5DD;--paper-2:#DFDAD0;padding-bottom:clamp(4rem,7vw,7.5rem);}
.trajeto__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:start;}
.trajeto__side{grid-column:1/5;position:sticky;top:calc(var(--nav-h) + 3rem);}
.trajeto__cap{margin-top:1.25rem;line-height:1.8;}
.trajeto__ph{margin-top:clamp(2rem,3.5vw,3rem);}
.trajeto__ph img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:50% 22%;}
.trajeto__body{grid-column:6/13;}
.trajeto__body .d-m{margin-bottom:clamp(2.5rem,4vw,3.5rem);}
.trajeto__close{margin-top:clamp(2.5rem,4vw,3.5rem);max-width:var(--maxw-text);font-size:var(--t-small);color:var(--ink-muted);}

/* ── 11 · 05 MOMENTO ─────────────────────────────────────────────────────── */
.momento{padding-block:clamp(7rem,12vw,12rem) clamp(3.5rem,6vw,6rem);}
.momento__stage{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center;
  max-width:var(--maxw);margin-inline:auto;padding-left:var(--gutter);
  margin-bottom:clamp(4rem,8vw,8rem);
}
/* a figura vem antes no DOM (é o assunto); grid-row explícito impede o
   auto-placement de empurrar o texto para a linha de baixo */
.momento__type{grid-column:1/7;grid-row:1;}
.momento__fig{grid-column:7/13;grid-row:1;position:relative;}
.momento__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 42%;}
.momento__cap{position:absolute;left:0;bottom:-2.25rem;font-style:normal;}

/* anotação técnica — fio-guia terminando em tique, como desenho técnico */
.ann{position:absolute;display:block;pointer-events:none;}
.ann b{position:absolute;left:0;bottom:6px;color:var(--gold);font-weight:500;}
.ann i{display:block;height:1px;width:100%;background:var(--gold);transform-origin:left;}
.ann i::after{content:"";position:absolute;right:0;top:-5px;width:1px;height:11px;background:var(--gold);}
.ann--a{top:37%;left:6%;width:46%;}
.ann--b{top:57%;left:6%;width:51%;}

.strip{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.strip li{
  padding:clamp(1.25rem,2.4vw,2rem) 1rem;border-left:1px solid var(--rule);text-align:center;
  font-family:var(--f-display);font-size:clamp(1.125rem,2.3vw,2rem);line-height:1.1;letter-spacing:-.01em;
}
.strip li:first-child{border-left:0;}
.momento__close{margin-top:clamp(2.5rem,4vw,3.5rem);max-width:34ch;font-family:var(--f-display);font-size:clamp(1.4375rem,2.6vw,2.25rem);line-height:1.25;letter-spacing:-.015em;margin-left:auto;text-align:right;}

/* ── 12 · 06 EXPERIÊNCIAS ────────────────────────────────────────────────── */
/* Abertura puramente tipográfica: depois de quatro seções carregadas de
   fotografia, a mudança de textura é o que dá ar a esta — não mais uma imagem. */
.exp__intro{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:end;margin-bottom:clamp(3.5rem,7vw,6rem);}
.exp__lede{grid-column:1/8;}
.exp__intro .lead{grid-column:9/13;align-self:end;padding-bottom:.35rem;}
.exp__lede .d-l{margin-bottom:clamp(1.5rem,2.6vw,2rem);}
.exp__note{margin-top:2rem;max-width:52ch;}

/* ── 13 · 07 CONVITE ─────────────────────────────────────────────────────── */
.convite{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center;padding-block:0;max-width:none;}
.convite__media{grid-column:1/6;align-self:stretch;}
.convite__media img{width:100%;height:100%;min-height:clamp(28rem,60vh,44rem);object-fit:cover;object-position:54% 24%;}
.convite__type{grid-column:7/12;padding-block:var(--sec-y);}
.convite__type .d-l{margin-bottom:clamp(1.5rem,2.6vw,2rem);}
.convite__nota{margin-top:clamp(1.5rem,2.4vw,2rem);padding-top:clamp(1.5rem,2.4vw,2rem);
  border-top:1px solid var(--rule);max-width:38ch;
  font-family:var(--f-display);font-size:clamp(1.25rem,2.1vw,1.6875rem);line-height:1.3;
  letter-spacing:-.01em;color:var(--gold-light);}
.convite__act{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2rem;margin-top:clamp(2rem,3.4vw,2.75rem);}

/* Fecho da página: o selo centralizado em suas cores reais (bordô + dourado só
   existem juntos aqui, como manda o manual) sobre uma faixa de papel. Ela também
   impede que Convite e Rodapé fiquem sendo dois blocos bordô encostados — a
   alternância de densidade precisa valer até o fim. */
.colofao{background:var(--paper);padding-block:clamp(3.5rem,6vw,5.5rem);}
.colofao__in{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);}
.colofao__rule{flex:1;height:1px;background:var(--rule);}
.colofao img{flex:0 0 auto;width:clamp(96px,9vw,132px);height:auto;}

/* ── 14 · 08 RODAPÉ ──────────────────────────────────────────────────────── */
.foot{padding-block:clamp(3.5rem,7vw,6rem) 2rem;}
.foot__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:center;}
/* O selo e o wordmark são bordô: sobre o rodapé bordô-escuro sumiriam. A marca
   entra aqui como lockup monocromático claro. */
.foot__mark{grid-column:1/4;}
.foot__mark img{width:100%;max-width:184px;filter:brightness(0) invert(1);opacity:.92;}
.foot__ficha{grid-column:5/13;grid-template-columns:repeat(3,1fr);}
.foot__ficha dd a{font-size:var(--t-meta);letter-spacing:.06em;}
.foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:clamp(3rem,6vw,5rem);padding-top:1.5rem;border-top:1px solid var(--rule);}

/* ── 15 · MOTION ─────────────────────────────────────────────────────────── */
/* Estado final é o padrão do CSS. Só há estado inicial quando o JS está ativo,
   de modo que nenhum conteúdo depende de animação para existir. */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);}
.js [data-reveal].is-in{opacity:1;transform:none;}

/* A máscara precisa de folga em CIMA e embaixo: com line-height .88 o meio-leading
   é negativo e o overflow:hidden decapitaria as maiúsculas. O deslocamento inicial
   é 135% para cobrir a caixa já acrescida do padding. */
.js [data-reveal-type] span{overflow:hidden;padding-block:.14em;margin-block:-.14em;}
.js [data-reveal-type] span > i{display:block;font-style:inherit;transform:translateY(135%);transition:transform var(--dur-slow) var(--ease-out);}
.js [data-reveal-type].is-in span > i{transform:none;}
.js [data-reveal-type] span:nth-child(2) > i{transition-delay:70ms;}
.js [data-reveal-type] span:nth-child(3) > i{transition-delay:140ms;}
.js [data-reveal-type] span:nth-child(4) > i{transition-delay:210ms;}

/* o scale(1.06) do estado inicial transborda a caixa; o clip-path já esconde,
   mas os invólucros simples ganham overflow:hidden para não sujar o scrollWidth.
   .momento__fig fica de fora: a legenda vive fora da caixa dele. */
.sobre__media,.sobre__media2,.convite__media,.trajeto__ph{overflow:hidden;}
.js [data-reveal-img]{clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-image) var(--ease-out);}
.js [data-reveal-img] img{transform:scale(1.06);transition:transform var(--dur-image) var(--ease-out);}
.js [data-reveal-img].is-in{clip-path:inset(0 0 0 0);}
.js [data-reveal-img].is-in img{transform:none;}

/* motion assinatura — o filete que se mede */
.js .sechead__rule{transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-out);}
.js .sechead.is-in .sechead__rule{transform:scaleX(1);}
.js .ann i{transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-out) 300ms;}
.js .ann b{opacity:0;transition:opacity var(--dur-base) var(--ease-out) 900ms;}
.js [data-reveal-img].is-in .ann i{transform:scaleX(1);}
.js [data-reveal-img].is-in .ann b{opacity:1;}

.js [data-stagger] > *{opacity:0;transform:translateY(10px);transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out);}
.js [data-stagger].is-in > *{opacity:1;transform:none;}

/* entrada de página */
/* `backwards` em vez de `opacity:0` + `forwards`: o estado inicial só existe
   durante o atraso da animação. Se ela não rodar, o elemento fica visível — a
   navbar nunca pode depender de uma animação para aparecer. */
/* Só a navbar anima exclusivamente na entrada da página: ela é fixa e está
   sempre em tela, refazer a animação nela seria ruído. A ficha do hero saiu daqui
   e virou [data-reveal], para reanimar junto com o título toda vez que o hero
   volta à tela — senão o hero reanimaria pela metade. */
.js .nav__in{animation:fadeUp 640ms var(--ease-out) 120ms backwards;}
.js .hero__ficha{transition-delay:220ms;}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── 16 · RESPONSIVO ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .manifesto__q{grid-column:1/11;}
  .manifesto__support{grid-column:6/13;}
  .sobre__media{grid-column:1/6;}
  .sobre__body{grid-column:7/13;}
  .trajeto__side{grid-column:1/5;}
  .trajeto__body{grid-column:5/13;}
  .rows .row{grid-template-columns:4.5rem 1fr auto;}
}

@media (max-width:900px){
  :root{
    --nav-h:60px;
    --t-label:.75rem;      /* 11px é pequeno demais na mão — rótulo micro não desce de 12px */
    --t-numeral:clamp(4.5rem,10.5vw,10.5rem);  /* o dado precisa continuar sendo um momento visual */
  }
  .nav__index,.nav__cta{display:none;}
  .nav__toggle{display:block;}
  .nav.is-stuck{height:60px;}

  /* hero: foto full bleed, tipografia sobe sobre a imagem em bloco de papel */
  .hero{min-height:0;display:block;padding-inline:0;}
  .hero__media{position:relative;inset:auto;left:auto;height:78svh;min-height:26rem;}
  .hero__media img{object-position:50% 30%;}
  /* O bloco de tipografia sobe sobre a imagem. A faixa de 2.5rem à direita deixa
     a fotografia aparecer por trás — é o que torna a sobreposição visível no
     mobile, onde não existe a divisão vertical do desktop. */
  .hero__head{width:auto;margin-top:-11vh;margin-left:var(--gutter);margin-right:2.5rem;padding:clamp(1.75rem,5vw,2.5rem) 0 0;background:var(--paper);}
  .hero__head::before{content:"";position:absolute;top:0;left:calc(var(--gutter) * -1);right:0;bottom:0;background:var(--paper);z-index:-1;}
  .hero__foot{width:auto;margin-inline:var(--gutter);padding-top:clamp(1.5rem,4vw,2rem);padding-bottom:clamp(2.5rem,6vw,3.5rem);}
  .hero__lead{max-width:none;}
  .hero__act{margin-bottom:clamp(2.5rem,6vw,3.5rem);}
  .hero__act .btn{width:100%;}
  .hero__ficha{margin-inline:var(--gutter);}

  /* fichas viram grade 2×2 */
  .ficha{grid-template-columns:repeat(2,1fr);}
  .ficha > div{padding:1rem 1.25rem;border-left:1px solid var(--rule);border-top:1px solid var(--rule);}
  .ficha > div:nth-child(odd){border-left:0;padding-left:0;}
  .ficha > div:nth-child(-n+2){border-top:0;}

  /* seções empilham, mas a assimetria migra para o sangramento */
  .manifesto .wrap,.sobre__grid,.trajeto__grid,.momento__stage,.exp__intro,.convite,.foot__grid{display:block;}
  .manifesto__q .quote{font-size:clamp(1.625rem,6.2vw,2.5rem);}
  .manifesto__support{margin-top:clamp(2.5rem,7vw,3.5rem);}
  .manifesto__support p{max-width:none;}
  .tese{margin-top:clamp(2.5rem,8vw,3.5rem);}
  .tese th[scope="row"]{width:30%;}
  .tese td{width:35%;font-size:.8125rem;}
  .tese th,.tese td{padding:.8rem .6rem .8rem 0;}

  .sobre__media{margin-inline:calc(var(--gutter) * -1);margin-bottom:clamp(2rem,6vw,3rem);}
  .sobre__media img{aspect-ratio:4/5;}
  .sobre__body{padding-top:0;}
  .pull{max-width:none;}

  .trajeto__side{position:static;margin-bottom:clamp(2.5rem,7vw,3.5rem);}
  .trajeto__side .numeral{display:inline-block;vertical-align:bottom;}
  .trajeto__cap{display:inline-block;margin-left:1.25rem;max-width:16rem;}
  .trajeto__ph{display:none;}
  .trajeto__body .d-m{margin-bottom:2rem;}
  .rows .row{grid-template-columns:4rem 1fr;row-gap:.35rem;}
  .row__m{grid-column:2;justify-self:start;}

  /* toda seção abre pelo seu número; no empilhamento o texto precisa vir antes
     da figura, invertendo a ordem do DOM (onde a figura é o assunto) */
  .momento__stage{display:flex;flex-direction:column;padding-left:0;margin-bottom:clamp(3rem,8vw,5rem);}
  .momento__type{order:-1;}
  .momento__type{padding-inline:var(--gutter);margin-bottom:clamp(2.5rem,7vw,3.5rem);}
  .momento__fig img{aspect-ratio:3/4;object-position:50% 42%;}
  .momento__cap{position:static;margin-top:1rem;padding-inline:var(--gutter);}
  .ann--a{top:35%;left:4%;width:48%;}
  .ann--b{top:56%;left:4%;width:53%;}
  .strip{grid-template-columns:repeat(2,1fr);}
  .strip li{border-top:1px solid var(--rule);text-align:left;padding-inline:0 1rem;}
  .strip li:nth-child(odd){border-left:0;}
  .strip li:nth-child(even){padding-left:1rem;}
  .strip li:nth-child(-n+2){border-top:0;}
  .strip li:last-child{grid-column:1/-1;border-left:0;}
  .momento__close{margin-left:0;text-align:left;max-width:none;}

  .exp__intro .lead{margin-top:clamp(1.25rem,4vw,1.75rem);}
  /* no empilhamento o retrato próximo fecha a seção Sobre, recuado à direita */
  .sobre__media2{margin:clamp(2.5rem,7vw,3.5rem) calc(var(--gutter) * -1) 0 20%;}
  .sobre__media2 img{aspect-ratio:1/1;}
  .row__btn{grid-template-columns:3.25rem 1fr 1.75rem;gap:1rem;padding:1.35rem 0;}
  .row__btn .row__m{display:none;}
  .row__inner > p,.incl{margin-left:4.25rem;}

  .convite__media img{min-height:clamp(22rem,58vh,32rem);}
  .convite__type{padding:clamp(3rem,9vw,4.5rem) var(--gutter) var(--sec-y);}
  .convite__act .btn{width:100%;}

  .foot__mark{margin-bottom:2.75rem;}
  .foot__mark img{max-width:158px;}
  .foot__ficha{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:520px){
  .ficha{grid-template-columns:1fr;}
  .ficha > div{border-left:0 !important;padding-left:0 !important;border-top:1px solid var(--rule);}
  .ficha > div:first-child{border-top:0;}
  .foot__ficha{grid-template-columns:1fr;}
  .strip{grid-template-columns:1fr;}
  .strip li{border-left:0;border-top:1px solid var(--rule);padding-left:0 !important;}
  .strip li:first-child{border-top:0;}
  .rows .row{grid-template-columns:3.5rem 1fr;}
  .trajeto__cap{display:block;margin-left:0;margin-top:1rem;}
  .ann b{font-size:.625rem;}
}

/* ── 17 · REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-reveal],.js [data-reveal-type] span > i,.js [data-stagger] > *{opacity:1 !important;transform:none !important;}
  .js [data-reveal-img]{clip-path:none !important;}
  .js [data-reveal-img] img{transform:none !important;}
  .js .sechead__rule,.js .ann i{transform:scaleX(1) !important;}
  .js .ann b{opacity:1 !important;}
  .js .nav__in{opacity:1 !important;animation:none !important;}
}