/* ==========================================================================
   TRUEHOPE — Masterclass 08.10.2026
   Sistema visual derivado do brandbook oficial (Apresentação - TrueHope.pdf)
   ========================================================================== */

:root{
  /* paleta amostrada do brandbook */
  --tinta:#1F221A;      /* CMYK  9,  0, 26, 86 */
  --oliva:#464A33;      /* CMYK  7,  0, 32, 71 */
  --vinho:#4F1C0A;      /* CMYK  0, 65, 86, 69 */
  --terra:#7B3620;      /* CMYK  0, 56, 73, 51 */
  --taupe:#806453;      /* CMYK  0, 21, 34, 50 */
  --creme:#EBE0D1;      /* CMYK  0,  4, 11,  8 */

  /* tons derivados, para respiro editorial */
  --papel:#F4EFE6;
  --papel-2:#EEE7DA;
  --tinta-suave:#4A4438;
  --linha:rgba(31,34,26,.14);
  --linha-clara:rgba(235,224,209,.16);

  /* O serif dos adesivos de piso é uma Didone. A Prata é o meio-termo entre
     as duas que testamos antes: mais leve que a Libre Bodoni (que saía
     grossa demais) e com os fios do "A" bem mais sólidos que os da Bodoni
     Moda (que sumiam contra a foto do hero). Peso único 400 — nenhum
     elemento pode pedir 500+ daqui, ou o navegador sintetiza um falso
     negrito. Uma família só para todo o site, sem segunda variável. */
  --display:"Prata","Times New Roman",Georgia,serif;
  --voz:"Cormorant Garamond",Georgia,serif;
  --sans:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  /* o script dos adesivos de piso ("de Casa", "Geração") é uma assinatura
     manuscrita, paga e sem info de fonte no PDF (texto todo vetorizado).
     A Mrs Saint Delafield é a mais próxima do desenho: mesma inclinação
     forte e o rabo comprido varrendo o fim da palavra. */
  --assinatura:"Mrs Saint Delafield",cursive;

  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(20px,5vw,64px);
  --max:1480px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,li,blockquote{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}

html,body{overscroll-behavior-y:none}
body{
  font-family:var(--sans);
  font-size:17.6px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.travado{overflow:hidden;height:100svh}

::selection{background:var(--terra);color:var(--papel)}

:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:1px}

/* --------------------------------------------------------- tipografia base */
/* line-height 1.02: leading curto de revista, mas com folga para os acentos
   das caixas altas (Í, Ç, Ã) — abaixo disso a máscara de revelação corta. */
/* A Prata só tem o peso 400. Para deixá-la ainda mais fina, mordemos a
   borda das letras com um contorno da cor do fundo (papel) — é a única
   forma de "afinar" abaixo do peso mínimo de uma fonte. 0.5px tira um fio
   de cada lado sem quebrar as serifas. Vale onde o texto é escuro sobre
   claro; nas seções de fundo escuro o contorno é cancelado logo abaixo. */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
  -webkit-text-stroke:0.5px var(--papel);
}
/* fundo escuro: o contorno claro engordaria o texto creme em vez de afinar,
   então volta a zero (a Prata 400 já lê fina o suficiente sobre escuro). */
:where(.manifesto, .simbolo, .frentes, .mesa) .display{
  -webkit-text-stroke-width:0;
}
/* a assinatura tem fonte e peso próprios — não herda o afinamento */
.hero__titulo .ln--assinatura{-webkit-text-stroke-width:0}
.voz{font-family:var(--voz);font-style:italic;line-height:1.45}

.rotulo{
  font-size:clamp(10.45px,1.16vw,12.1px);
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--terra);
}
.rotulo--claro{color:var(--taupe)}

.regra{height:1px;background:var(--linha);border:0;margin:0}
.regra--clara{background:var(--linha-clara)}

.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.secao{padding-block:clamp(88px,14vh,190px)}

/* Reveal — estado inicial aplicado só quando o JS assume o controle */
.js .rv{opacity:0}

/* ================================================================ PRELOADER */
#preloader{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background:var(--papel);
}
#preloader[hidden]{display:none}
.pre-marca{display:grid;justify-items:center;gap:clamp(18px,2.4vw,28px)}
.pre-mono{width:clamp(52px,7vw,78px);height:auto;overflow:visible}
.pre-mono rect{fill:var(--vinho)}
.pre-nome{
  display:flex;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(11px,1.43vw,14.3px);
  letter-spacing:.42em;
  padding-left:.42em;
  color:var(--vinho);
}
.pre-nome span{display:inline-block}
.pre-barra{
  width:clamp(120px,16vw,200px);
  height:1px;
  background:rgba(79,28,10,.2);
  overflow:hidden;
}
.pre-barra i{display:block;height:100%;width:100%;background:var(--vinho);transform:scaleX(0);transform-origin:left}
/* cortinas que abrem para revelar a página */
.pre-cortina{position:fixed;inset:0;z-index:999;pointer-events:none;display:flex}
.pre-cortina i{flex:1;background:var(--papel)}
.pre-cortina[hidden]{display:none}

/* ====================================================================== NAV */
/* pílula flutuante, descolada das bordas — não é mais uma barra de ponta a
   ponta. Some ao rolar pra baixo, volta ao rolar pra cima (ver nav() no JS);
   sem JS ela simplesmente fica fixa e visível. */
.nav{
  position:fixed;
  top:clamp(14px,2.6vh,26px);
  left:0;right:0;margin-inline:auto;
  width:max-content;max-width:calc(100vw - var(--gut) * 2);
  z-index:80;
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,22px);
  padding:9px 14px 9px 20px;
  border-radius:999px;
  background:rgba(244,239,230,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--linha);
  box-shadow:0 18px 40px rgba(31,34,26,.14);
  /* centralizado por left:0;right:0;margin-inline:auto (não por
     transform/translate): o GSAP escreve na `transform` pra esconder/
     mostrar e zera qualquer `translate` independente ao fazer isso —
     centralizar com translate:-50% aqui era apagado pelo próprio JS. */
  will-change:transform;
}
.js .nav{transform:translateY(-130%)}
.nav__marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.nav__mono{width:14px;height:auto}
.nav__mono rect{fill:var(--vinho)}
.nav__nome{
  font-size:12.1px;font-weight:500;letter-spacing:.28em;padding-left:.28em;color:var(--vinho);
}
.nav__menu{display:flex;align-items:center;gap:clamp(14px,2vw,24px);padding-inline:clamp(6px,1.4vw,16px)}
.nav__menu a{
  font-size:12.1px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);
  text-decoration:none;position:relative;padding-bottom:2px;
}
.nav__menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--vinho);
  transition:right .3s var(--ease);
}
.nav__menu a:hover::after,.nav__menu a:focus-visible::after{right:0}
.nav .btn--fino{flex:none;padding-block:9px}

/* sanduíche: só existe quando o menu em linha já saiu (<900px) — sempre o
   último item da pílula, encostado na borda direita, como um botão de
   ícone normal (mesma folga da borda esquerda da marca). */
.nav__burger{
  display:none;flex:none;
  width:34px;height:34px;
  /* margin-left:auto empurra ele pra ponta direita da pílula — sem isso,
     nas telas em que a pílula vira uma barra cheia (`left/right:var(--gut)`
     lá embaixo), a marca+CTA ficam agrupadas à esquerda e o sanduíche
     sobra encostado nelas, com um vão vazio até a borda. */
  margin-left:auto;
  border:0;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav__burger span{display:block;width:18px;height:1px;background:var(--tinta);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* painel do menu mobile: pendurado por baixo da pílula, mesmo material */
.nav__drawer{
  display:none;
  /* fixed e fora do #nav (ver comentário no HTML) — top/right vêm do JS,
     calculados a partir do retângulo real da pílula na hora de abrir. */
  position:fixed;z-index:80;
  width:min(240px,calc(100vw - var(--gut) * 2));
  flex-direction:column;gap:2px;
  padding:10px;
  border-radius:20px;
  background:rgba(244,239,230,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--linha);
  box-shadow:0 18px 40px rgba(31,34,26,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  pointer-events:none;
}
.nav__drawer.aberto{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav__drawer a{
  padding:12px 14px;border-radius:12px;
  font-size:14.3px;letter-spacing:.04em;color:var(--tinta-suave);text-decoration:none;
}
.nav__drawer a:hover,.nav__drawer a:focus-visible{background:var(--papel-2);color:var(--vinho)}

@media(max-width:900px){
  .nav__menu{display:none}
  .nav__burger{display:flex}
  .nav__drawer{display:flex}
}
@media(max-width:760px){
  .nav{left:var(--gut);right:var(--gut);width:auto;max-width:none;padding-left:14px}
  .nav__nome{display:none}
  .nav .btn--fino{padding:9px 15px;font-size:12.1px}
}

/* ==================================================================== BOTÃO */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.8em;
  border:0;
  cursor:pointer;
  text-decoration:none;
  font-family:var(--sans);
  font-size:clamp(11.55px,1.21vw,13.2px);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:14px 22px;
  background:var(--vinho);
  color:var(--papel);
  position:relative;
  overflow:hidden;
  transition:color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--terra);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.btn:hover::before{transform:scaleY(1)}
.btn>*{position:relative}
.btn--fino{padding:11px 18px}
.btn--vazado{background:transparent;color:var(--papel);box-shadow:inset 0 0 0 1px rgba(235,224,209,.4)}
.btn--vazado:hover{color:var(--tinta)}
.btn--vazado::before{background:var(--creme)}
.btn__seta{width:.85em;height:.85em;flex:none}

/* =================================================================== HERO */
.hero{position:relative}
/* 230svh: 130% de rolagem extra além da tela — dá espaço real para o
   convite subir cobrindo a foto aos poucos. Com menos que isso (165svh
   testado antes) o gesto acontece rápido demais para ser percebido. */
.js .hero{height:230svh}
.hero__palco{
  position:sticky;top:0;
  height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--papel-2);
}
/* fundo: o pátio de arcos, em leve paralaxe */
.hero__fundo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__fundo img{
  width:100%;height:100%;object-fit:cover;object-position:62% 50%;
  will-change:transform;
}
/* véu de papel: garante contraste do título sobre as áreas mais claras da
   foto sem lavar a arquitetura */
.hero__veu{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(244,239,230,.30) 0%, rgba(244,239,230,.10) 42%, rgba(244,239,230,.62) 100%),
    linear-gradient(rgba(244,239,230,.34), rgba(244,239,230,0) 34%),
    /* pé do hero: sustenta a legibilidade da data e do endereço */
    linear-gradient(rgba(244,239,230,0) 68%, rgba(244,239,230,.58) 100%);
}
/* Em tela estreita o `cover` amplia tanto que sobra só a parede lisa;
   este enquadramento traz a passagem em arco de volta para o quadro. */
@media(max-width:760px){
  .hero__fundo img{object-position:78% 42%}
  /* O texto troca de lado no mobile, então o véu também: mais papel à
     esquerda, onde antes ficava a sombra da coluna atrás do título. */
  .hero__veu{
    background:
      linear-gradient(95deg, rgba(244,239,230,.72) 0%, rgba(244,239,230,.46) 52%, rgba(244,239,230,.14) 100%),
      linear-gradient(rgba(244,239,230,.30), rgba(244,239,230,0) 30%),
      linear-gradient(rgba(244,239,230,0) 66%, rgba(244,239,230,.55) 100%);
  }
}
/* duas colunas: o título ancora na direita, a chamada + botão ficam na
   coluna da esquerda centrados na vertical contra o título — na mesma
   linha da frase, não no pé da seção. */
.hero__conteudo{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);
  padding-inline:var(--gut);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:clamp(24px,4vw,64px);
  text-align:right;
}
/* grid-row:1 explícito nos dois: sem isso o auto-placement joga a ação
   para uma segunda linha (empacotamento "sparse") e o align-self:center
   não tem contra o que centrar. */
.hero__titulo{grid-column:2;grid-row:1;justify-self:end}
.hero__acao{
  grid-column:1;grid-row:1;
  justify-self:start;
  align-self:center;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(14px,1.8vh,22px);
  text-align:left;
}
.hero__convocacao{
  font-size:clamp(11.55px,1.26vw,13.75px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--vinho);
}
/* herda o peso 500 do .display: com a Libre Bodoni os fios do "A" aguentam
   o fundo fotográfico sozinhos, sem precisar do 600 que a Bodoni Moda pedia. */
.hero__titulo{
  font-size:clamp(37px,7.7vw,106px);
  max-width:13ch;
}
.hero__titulo .ln{display:block}
/* A máscara de revelação (montada no JS) é overflow:hidden e tem folga só
   no topo, para os acentos. O script da assinatura estoura essa caixa nos
   dois eixos — laçadas para os lados, perna do "f" para baixo — então aqui
   abrimos folga lateral e a devolvemos com margem negativa: a máscara
   continua cortando, só que longe da tinta. */
.hero__titulo .ln-mask{padding-inline:.4em;margin-inline:-.4em}
/* e a última linha ganha folga embaixo pelo mesmo motivo, sem empurrar a
   data: o que o line-height abre, a margem negativa da máscara devolve. */
.hero__titulo .ln-mask:last-child{margin-bottom:-.62em}
/* a linha de fecho vira assinatura — a mesma caligrafia dos adesivos de
   piso — puxada para cima e levemente rodada, como no adesivo: ela cruza
   o respiro acima de "arquiteto" em vez de nascer depois dele, mas sem
   pousar sobre as letras (o traço fino do script passa pelo vão do "o"
   e pelo espaço entre as palavras, nunca por cima da tinta). */
.hero__titulo .ln--assinatura{
  display:block;
  font-family:var(--assinatura);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  /* 1.65em: é o tamanho em que a mancha do script fica da largura de
     "arquiteto". Acima disso ela sangra para a esquerda e desalinha. */
  font-size:1.65em;
  line-height:1.42;
  color:var(--vinho);
  /* sem contorno: a caligrafia fica no peso natural dela, e a alternância
     grosso/fino sobrevive inteira. O contorno só era preciso enquanto o
     título ao lado era mais pesado. */
  /* sobe com `top`, não com margin-top: margem negativa aqui encolhe a
     máscara acima e ela passa a decepar a assinatura. -.52em é o limite
     útil — a haste do "d" e a perna do "f" cruzam a base de "ARQUITETO"
     pelos vãos das letras, como no adesivo; mais que isso elas embolam
     no "QUITETO". */
  position:relative;
  top:-.52em;
  transform:rotate(-3.2deg);
  transform-origin:right bottom;
}
/* abaixo de ~1080px a coluna da esquerda fica estreita demais ao lado do
   título; o CTA volta para baixo dele, numa coluna só. */
@media(max-width:1080px){
  .hero__conteudo{grid-template-columns:1fr;justify-items:start;text-align:left}
  .hero__titulo{grid-column:1;grid-row:auto;justify-self:start}
  .hero__acao{grid-column:1;grid-row:auto;align-self:auto;margin-top:clamp(16px,3vh,32px)}
}
@media(max-width:760px){
  .hero__titulo{max-width:11ch}
  /* no celular a caixa do título é estreita e o script cai em cima do
     "ARQUITETO" — aqui ele encosta no respiro, sem cruzar a tinta. */
  .hero__titulo .ln--assinatura{
    transform-origin:left bottom;transform:rotate(-3.2deg);
    font-size:1.5em;top:-.10em;
  }
}

/* ================================================================= CONVITE */
.convite{background:var(--papel);position:relative;z-index:2}
/* o hero reserva 130svh extras (230svh - 100svh de tela) só para dar
   tempo de pinar a foto; sem isso o convite nasceria bem depois que a
   foto já tinha soltado do sticky, e a "cobertura" nunca era vista.
   Essa margem negativa puxa o convite pra cima, pra dentro dessa área
   extra, então ele sobe por cima da foto ainda fixa. */
.js .convite{margin-top:-130svh}
/* o `svh` some/volta junto com a barra de endereço do Safari — em tela alta
   e estreita isso descalibra a margem negativa (ora sobra vão vazio, ora
   falta). Base de segurança: no celular a foto do hero não fica fixa, ela
   sobe junto com o resto — sem pin, sem cálculo de margem, sem vão vazio
   em navegador algum. Isso tem que vir DEPOIS das regras acima pra
   realmente ganhar a cascata (mesma especificidade). */
@media(max-width:760px){
  .js .hero{height:auto}
  .hero__palco{position:static;height:100svh}
  .js .convite{margin-top:0}
}
/* Por cima dessa base, religamos o efeito onde `dvh` existe: diferente do
   `svh` (fixo na MENOR altura possível), o `dvh` se recalcula ao vivo
   conforme a barra do Safari abre/fecha — a margem negativa nunca fica
   descalibrada porque ela encolhe/cresce junto com a própria altura do
   hero. `@supports` garante que um navegador sem `dvh` nem chegue a ler
   isto e fique na base estável acima. */
@supports (height: 100dvh){
  @media(max-width:760px){
    .js .hero{height:210dvh}
    .hero__palco{position:sticky;top:0;height:100dvh}
    .js .convite{margin-top:-110dvh}
  }
}
/* a borda que "sobe cobrindo" o hero: sem ela a costura entre a foto e o
   papel fica seca — a sombra lê como a folha se levantando por cima */
.convite::before{
  content:"";position:absolute;top:0;left:0;right:0;height:56px;
  transform:translateY(-100%);
  background:linear-gradient(to top, rgba(31,34,26,.14), transparent);
  pointer-events:none;
}
.convite__grade{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,6vw,96px);
  align-items:stretch;
}
/* sem fundo próprio: a moldura é sticky e deixaria uma faixa visível acima */
.convite__figura{position:relative;height:100%}
.convite__figura img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);will-change:transform}
.convite__moldura{position:sticky;top:clamp(78px,12vh,120px);aspect-ratio:3/4;overflow:hidden;background:var(--papel-2)}
.convite__legenda{
  margin-top:14px;font-size:12.1px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);
}
.convite__texto{display:grid;gap:clamp(22px,3vw,34px);padding-top:clamp(0px,2vw,26px)}
/* o rótulo do evento que abria o hero — colado no "O convite", com o mesmo
   filete que ele tinha lá em cima */
.convite__kicker{
  display:flex;flex-wrap:wrap;gap:.9em;align-items:center;
  margin-top:-1.4em;
  font-size:clamp(11.55px,1.26vw,13.75px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--vinho);
}
.convite__kicker i{display:block;width:clamp(24px,4vw,54px);height:1px;background:var(--vinho);opacity:.55}
/* data, hora e endereço: saíram do hero e viraram uma ficha do evento */
.convite__dados{
  display:grid;gap:clamp(16px,2.2vw,26px);
  grid-template-columns:1fr;
  padding-top:clamp(20px,3vw,30px);
  border-top:1px solid var(--linha);
}
/* colunas do tamanho do próprio conteúdo, e o endereço fica com a sobra:
   assim os três valores nascem na mesma linha de base, sem ninguém quebrar
   em duas linhas e desalinhar a régua. */
@media(min-width:700px){
  .convite__dados{grid-template-columns:auto auto 1fr}
}
.convite__dados li{display:grid;gap:.6em;align-content:start}
.convite__dados .rotulo{color:var(--taupe)}
.convite__dados b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(14.3px,1.3vw,16.5px);line-height:1.35;
  letter-spacing:-.01em;color:var(--tinta);
}
.convite__chamada{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(21px,2.5vw,32px);
  line-height:1.24;
  letter-spacing:-.01em;
  position:relative;
  padding-left:clamp(16px,2vw,26px);
}
.convite__chamada::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:1px;background:var(--terra);
}
.convite__corpo{
  font-size:clamp(16.5px,1.65vw,19.25px);
  line-height:1.72;
  color:var(--tinta-suave);
  max-width:52ch;
}
.convite__corpo + .convite__corpo{margin-top:-.4em}
.convite__corpo b{font-weight:500;color:var(--tinta)}
.convite__assinatura{
  font-family:var(--voz);font-style:italic;
  font-size:clamp(19.8px,2.2vw,25.3px);color:var(--terra);
}
@media(max-width:860px){
  .convite__grade{grid-template-columns:1fr}
  .convite__moldura{position:relative;top:0;aspect-ratio:4/5}
}

/* =============================================================== MANIFESTO */
.manifesto{background:var(--tinta);color:var(--creme);position:relative;overflow:hidden}
.manifesto .rotulo{color:var(--taupe)}
.manifesto__lista{display:grid;gap:clamp(38px,6vh,86px);margin-top:clamp(38px,6vh,72px)}
/* A medida vive na própria frase: `ch` no bloco resolveria contra a Satoshi
   de 16px e espremeria o display em colunas estreitas demais. */
.manifesto__bloco{width:fit-content;max-width:100%}
.manifesto__bloco:nth-child(even){justify-self:end;text-align:right}
.manifesto__frase{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,5.2vw,70px);
  line-height:1.06;letter-spacing:-.015em;
  max-width:11.5em;
}
.manifesto__bloco:nth-child(even) .manifesto__frase{max-width:9.5em;margin-left:auto}
.manifesto__frase em{font-family:var(--voz);font-style:italic;text-transform:none;letter-spacing:0;color:var(--terra)}
.manifesto__nota{
  margin-top:clamp(12px,1.6vw,18px);
  font-size:clamp(14.3px,1.49vw,16.5px);line-height:1.65;color:rgba(235,224,209,.6);max-width:34ch;
}
.manifesto__bloco:nth-child(even) .manifesto__nota{margin-left:auto}
.manifesto__selo{
  margin-top:clamp(54px,8vh,110px);
  padding-top:clamp(22px,3vw,34px);
  border-top:1px solid var(--linha-clara);
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;
  font-size:12.1px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);
}
.manifesto__selo b{font-family:var(--display);font-size:16.5px;letter-spacing:.3em;color:var(--creme);font-weight:400}

/* ================================================================= SÍMBOLO */
/* Cinco slides — cada um a própria cor de fundo, a foto inteira e sempre
   visível (object-fit:contain: nada é cortado) e o texto ao lado. No modo
   horizontal, os slides ficam empilhados exatamente no mesmo lugar e o
   scroll faz o próximo cobrir o de baixo, entrando pela direita — não é
   mais um trilho de fotos lado a lado, é uma pilha de cartas.
   Sem JS / movimento reduzido, vira uma coluna normal, um card por vez. */
.simbolo{position:relative;background:var(--tinta)}
.simbolo__palco{position:relative;display:grid;align-items:center;padding-block:clamp(60px,10vh,120px)}
.simbolo.horiz .simbolo__palco{height:100svh;overflow:hidden;padding-block:0}

 /* Título da seção: serve à versão empilhada (sem JS / movimento reduzido).
   No modo horizontal sai de cena — cada slide já carrega o próprio rótulo
   numerado, e o fundo colorido de cada um já assina a seção. */
.simbolo__selo{
  padding-inline:var(--gut);margin-bottom:clamp(22px,4vh,40px);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);
}
.simbolo.horiz .simbolo__selo{display:none}

.simbolo__fita{
  display:flex;flex-direction:column;row-gap:clamp(28px,4vh,48px);
}
/* modo empilhado: os cinco slides ocupam o mesmo retângulo, um sobre o
   outro — quem está por cima é quem a rolagem decidiu revelar por último */
.simbolo.horiz .simbolo__fita{position:relative;display:block;height:100%}

.quadro{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(24px,4vw,64px);
  padding:clamp(28px,5vw,64px);
  border-radius:2px;
  background:var(--tinta);color:var(--creme);
}
.quadro[data-cor="vinho"]{background:var(--vinho);color:var(--creme)}
.quadro[data-cor="oliva"]{background:var(--oliva);color:var(--creme)}
.quadro[data-cor="terra"]{background:var(--terra);color:var(--creme)}
.quadro[data-cor="tinta"]{background:var(--tinta);color:var(--creme)}
.quadro[data-cor="papel"]{background:var(--papel);color:var(--tinta)}

.simbolo.horiz .quadro{
  position:absolute;inset:0;width:100%;height:100%;border-radius:0;
  will-change:transform;
}
/* cada slide entra por cima do anterior — a ordem no DOM já é a ordem de
   pilha (o de baixo primeiro), então o z-index só precisa crescer */
.simbolo.horiz .quadro:nth-child(1){z-index:1}
.simbolo.horiz .quadro:nth-child(2){z-index:2}
.simbolo.horiz .quadro:nth-child(3){z-index:3}
.simbolo.horiz .quadro:nth-child(4){z-index:4}
.simbolo.horiz .quadro:nth-child(5){z-index:5}

/* a foto nunca é cortada: cabe inteira dentro da própria coluna */
.quadro__foto{
  position:relative;display:flex;align-items:center;justify-content:center;
  max-height:78svh;
}
.quadro__foto img{
  max-width:100%;max-height:78svh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 30px 70px rgba(0,0,0,.28);
}

.quadro__texto{
  position:relative;z-index:2;
  display:grid;gap:clamp(12px,1.6vw,20px);align-content:center;
  max-width:32em;
}

.quadro__n{
  display:flex;align-items:center;gap:.9em;
  font-size:12.1px;letter-spacing:.24em;text-transform:uppercase;opacity:.72;
}
.quadro__n i{display:block;width:clamp(20px,3vw,44px);height:1px;background:currentColor;opacity:.5}
.quadro__titulo{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,4vw,50px);line-height:1.04;letter-spacing:-.015em;
}
.quadro__corpo{font-size:clamp(15.95px,1.65vw,18.15px);line-height:1.7;opacity:.88}

.simbolo__progresso{display:none}
.simbolo.horiz .simbolo__progresso{
  display:block;position:absolute;left:var(--gut);right:var(--gut);
  bottom:clamp(28px,5vh,58px);height:1px;background:rgba(235,224,209,.24);z-index:9;
}
.simbolo__progresso i{display:block;height:100%;background:var(--creme);transform:scaleX(0);transform-origin:left}

/* No mobile a imagem e a descrição continuam lado a lado, como no
   desktop — só encolhem: menos respiro, coluna de texto mais estreita. */
@media(max-width:860px){
  .quadro{gap:clamp(14px,3vw,26px)}
  .simbolo.horiz .quadro{padding:clamp(20px,6vh,48px) clamp(16px,4vw,var(--gut))}
  .quadro__foto{max-height:56svh}
  .quadro__foto img{max-height:56svh}
  .quadro__titulo{font-size:clamp(18px,5.2vw,28px)}
  .quadro__corpo{font-size:13.75px;line-height:1.55}
  .quadro__n{font-size:10.45px;gap:.6em}
  .quadro__n i{width:16px}
}
@media(max-width:560px){
  .quadro{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .quadro__foto{max-height:48svh}
  .quadro__foto img{max-height:48svh}
}

/* ================================================================= COLEÇÃO */
.colecao{background:var(--papel);position:relative}
.colecao__intro{display:grid;gap:clamp(16px,2vw,26px);max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.colecao__titulo{font-size:clamp(32px,6.4vw,86px);max-width:12ch}
.colecao__texto{font-size:clamp(16.5px,1.65vw,19.25px);line-height:1.7;color:var(--tinta-suave);max-width:46ch}

/* Padrão (sem JS ou com movimento reduzido): as peças embrulham em grade.
   O modo horizontal é ligado pelo JS, que fixa o palco via ScrollTrigger. */
.trilho{position:relative}
.trilho__palco{position:relative;display:flex;align-items:center;padding-block:clamp(20px,4vh,48px)}
.trilho__fita{
  display:flex;flex-wrap:wrap;justify-content:center;row-gap:clamp(26px,4vh,52px);
  column-gap:clamp(14px,2.4vw,34px);padding-inline:var(--gut);will-change:transform;
}
.trilho.horiz .trilho__palco{height:100svh;overflow:hidden;padding-block:0}
.trilho.horiz .trilho__fita{flex-wrap:nowrap;justify-content:flex-start}
/* todas as sete peças na mesma proporção — sem alternância de altura,
   sem numeral: a moldura fica limpa, só a foto */
.peca{flex:none;width:clamp(240px,30vw,400px);display:grid;gap:14px;align-content:start}
.peca__moldura{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--papel-2)}
.peca__moldura img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);will-change:transform}
.peca__nome{font-family:var(--display);font-weight:400;font-size:clamp(18.7px,1.98vw,24.2px);line-height:1.15}
.peca__desc{font-size:14.3px;line-height:1.55;color:var(--taupe);max-width:30ch}
.trilho__progresso{display:none}
.trilho.horiz .trilho__progresso{
  display:block;
  position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(28px,5vh,58px);
  height:1px;background:var(--linha);
}
.trilho__progresso i{display:block;height:100%;background:var(--vinho);transform:scaleX(0);transform-origin:left}

/* ==================================================================== VOZES */
.vozes{background:var(--papel-2)}
.vozes__topo{
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline;justify-content:space-between;
  padding-bottom:clamp(24px,3.4vw,40px);
}
.vozes__titulo{font-size:clamp(32px,6.4vw,86px)}
/* O trilho é uma régua de scroll NATIVO com scroll-snap: arrastar no dedo,
   no trackpad ou com as setas do teclado funciona sem uma linha de JS — as
   setas embaixo são só um atalho a mais. Sangra até a borda da tela e usa
   scroll-padding para o primeiro cartão parar alinhado com o texto. */
.vozes__palco{
  margin-inline:calc(var(--gut) * -1);
}
.vozes__trilho{
  display:flex;
  gap:clamp(16px,2.6vw,34px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);
  padding-inline:var(--gut);
  padding-bottom:6px;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.vozes__trilho::-webkit-scrollbar{display:none}
.voz{
  flex:none;
  scroll-snap-align:start;
  display:flex;align-items:stretch;
  gap:clamp(12px,1.5vw,20px);
  width:clamp(270px,32vw,420px);
}
/* o nome corre na vertical, de baixo para cima, rente à foto — como na
   referência. O filete por cima repete o traço fino do resto do site. */
.voz__nome{
  flex:none;
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:clamp(14px,2vw,26px);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--display);font-weight:400;
  font-size:clamp(17.6px,1.87vw,24.2px);
  line-height:1;letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--tinta);
}
.voz__nome::after{
  content:"";flex:1;width:1px;min-height:26px;
  background:var(--linha);
}
.voz__foto{
  flex:1;min-width:0;margin:0;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--papel);
}
.voz__foto img{width:100%;height:100%;object-fit:cover;display:block}
.vozes__pe{
  display:flex;flex-wrap:wrap;gap:20px clamp(24px,4vw,50px);
  align-items:flex-end;justify-content:space-between;
  margin-top:clamp(24px,3.4vw,40px);
}
.vozes__nota{
  flex:1 1 26ch;
  font-family:var(--voz);font-style:italic;font-size:clamp(18.7px,2.2vw,25.3px);color:var(--terra);
}
/* sem JS as setas não fariam nada, então só aparecem quando ele assume —
   o trilho continua rolando no dedo e no trackpad de qualquer forma. */
.vozes__setas{display:none;gap:10px;flex:none}
.js .vozes__setas{display:flex}
.seta{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:50%;
  background:none;cursor:pointer;color:var(--tinta);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.seta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}
.seta:hover,.seta:focus-visible{background:var(--vinho);border-color:var(--vinho);color:var(--papel)}
.seta[disabled]{opacity:.32;cursor:default}
.seta[disabled]:hover{background:none;border-color:var(--linha);color:var(--tinta)}

/* =============================================================== PROGRAMAÇÃO */
.prog{background:var(--papel)}
.prog__grade{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,5vw,80px);align-items:start;
}
.prog__aside{display:grid;gap:clamp(14px,2vw,22px);position:sticky;top:clamp(84px,13vh,130px)}
.prog__titulo{font-size:clamp(32px,5.4vw,72px);max-width:9ch}
.prog__sub{
  font-family:var(--voz);font-style:italic;
  font-size:clamp(18.7px,2.09vw,24.2px);line-height:1.4;
  color:var(--terra);max-width:24ch;
  margin-top:calc(clamp(14px,2vw,22px) * -.4);
}
.prog__local{font-size:15.95px;line-height:1.7;color:var(--tinta-suave)}
.prog__local b{font-weight:500;color:var(--tinta);display:block}
.prog__lista{display:grid}
.prog__item{
  display:grid;grid-template-columns:clamp(58px,7vw,86px) 1fr;
  gap:clamp(12px,2vw,24px);align-items:baseline;
  padding-block:clamp(15px,2.2vw,24px);
  border-top:1px solid var(--linha);
}
.prog__item:last-child{border-bottom:1px solid var(--linha)}
.prog__hora{font-family:var(--display);font-size:clamp(15.4px,1.65vw,18.7px);color:var(--terra)}
.prog__oque{font-size:clamp(16.5px,1.76vw,19.8px);line-height:1.45}
.prog__oque small{display:block;margin-top:5px;font-size:13.75px;letter-spacing:.02em;color:var(--taupe)}
@media(max-width:860px){
  .prog__grade{grid-template-columns:1fr}
  .prog__aside{position:relative;top:0}
}

/* ================================================================= FRENTES */
.frentes{background:var(--oliva);color:var(--creme)}
.frentes .rotulo{color:rgba(235,224,209,.62)}
.frentes__topo{display:grid;gap:clamp(14px,2vw,22px);padding-bottom:clamp(30px,4.6vw,56px);max-width:min(100%,34em)}
.frentes__titulo{font-size:clamp(30px,5.4vw,72px)}
.frentes__texto{font-size:clamp(16.5px,1.65vw,18.7px);line-height:1.7;color:rgba(235,224,209,.76)}
.frentes__grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px;background:var(--linha-clara)}
.frente{
  position:relative;
  display:grid;gap:12px;align-content:start;
  padding:clamp(22px,3vw,34px) clamp(20px,2.4vw,30px) clamp(60px,7vw,80px);
  background:var(--oliva);
  border:0;text-align:left;text-decoration:none;cursor:pointer;
  color:inherit;
  transition:background .5s var(--ease);
  overflow:hidden;
}
.frente:hover,.frente:focus-visible{background:#3D412B}
.frente__n{font-size:11px;letter-spacing:.24em;color:rgba(235,224,209,.5)}
.frente__nome{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,2.3vw,28px);line-height:1.14;letter-spacing:-.01em;
}
.frente__desc{font-size:14.85px;line-height:1.6;color:rgba(235,224,209,.72)}
.frente__acao{
  position:absolute;left:clamp(20px,2.4vw,30px);bottom:clamp(22px,3vw,32px);
  display:flex;align-items:center;gap:.7em;
  font-size:11.55px;letter-spacing:.18em;text-transform:uppercase;color:var(--creme);
}
.frente__acao svg{width:.9em;height:.9em;transition:transform .45s var(--ease)}
.frente:hover .frente__acao svg{transform:translateX(4px)}

/* ==================================================================== MESA */
.mesa{background:var(--tinta);color:var(--creme)}
.mesa__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);align-items:start}
.mesa .rotulo{color:var(--taupe)}
.mesa__titulo{font-size:clamp(31px,5.2vw,68px);max-width:11ch;margin-top:clamp(14px,2vw,22px)}
.mesa__citacao{
  margin-top:clamp(20px,3vw,32px);
  padding-left:clamp(14px,2vw,22px);
  border-left:1px solid var(--terra);
  font-family:var(--voz);font-style:italic;
  font-size:clamp(18.7px,2.2vw,26.4px);line-height:1.45;color:rgba(235,224,209,.82);max-width:30ch;
}
.mesa__contato{
  margin-top:clamp(26px,4vw,44px);font-size:14.3px;line-height:1.75;color:var(--taupe);
}
.mesa__contato a{color:var(--creme);text-decoration:none;border-bottom:1px solid rgba(235,224,209,.3)}
.mesa__contato a:hover{border-bottom-color:var(--terra)}

.campo{display:grid;gap:7px;margin-bottom:clamp(18px,2.4vw,24px)}
.campo>label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.campo input,.campo select{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(235,224,209,.28);
  padding:10px 0;font-family:var(--sans);font-size:17.6px;color:var(--creme);
  border-radius:0;appearance:none;
}
.campo select{background-image:none;cursor:pointer}
.campo select option{background:var(--tinta);color:var(--creme)}
.campo input::placeholder{color:rgba(235,224,209,.3)}
.campo input:focus,.campo select:focus{outline:none;border-bottom-color:var(--terra)}
.campo__erro{display:none;font-size:13.75px;color:#D98B6C}
.campo.invalido .campo__erro{display:block}
.campo.invalido input,.campo.invalido select{border-bottom-color:#D98B6C}
.campo--select{position:relative}
.campo--select::after{
  content:"";position:absolute;right:2px;bottom:19px;width:7px;height:7px;
  border-right:1px solid var(--taupe);border-bottom:1px solid var(--taupe);
  transform:rotate(45deg);pointer-events:none;
}
.consent{display:flex;gap:11px;align-items:flex-start;margin:clamp(6px,1.4vw,14px) 0 clamp(20px,3vw,28px)}
.consent input{
  flex:none;width:16px;height:16px;margin-top:2px;accent-color:var(--terra);
  background:transparent;border:1px solid var(--taupe);
}
.consent label{font-size:13.75px;line-height:1.6;color:rgba(235,224,209,.7)}
.mesa__privacidade{margin-top:clamp(16px,2.4vw,22px);font-size:12.65px;line-height:1.65;color:rgba(235,224,209,.45);max-width:44ch}
.mesa__ok{display:none;margin-top:clamp(20px,3vw,30px)}
.mesa__ok.on{display:grid;gap:14px}
.mesa__ok p{font-family:var(--voz);font-style:italic;font-size:clamp(19px,2.2vw,26px);line-height:1.45}
.mesa__ok small{font-size:13.75px;letter-spacing:.02em;color:var(--taupe);font-family:var(--sans);font-style:normal}
@media(max-width:860px){.mesa__grade{grid-template-columns:1fr}}

/* =================================================================== RODAPÉ */
.rodape{background:var(--tinta);color:var(--taupe);padding-block:clamp(40px,7vh,84px);border-top:1px solid var(--linha-clara)}
.rodape__grade{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,50px);align-items:flex-end;justify-content:space-between}
.rodape__marca{display:grid;gap:14px}
.rodape__mono{width:26px;height:auto}
.rodape__mono rect{fill:var(--creme)}
.rodape__nome{font-size:13.2px;letter-spacing:.34em;padding-left:.34em;color:var(--creme)}
.rodape__linha{font-size:12.1px;letter-spacing:.18em;text-transform:uppercase;line-height:1.9}
.rodape__tags{font-size:12.1px;letter-spacing:.14em;color:rgba(235,224,209,.4);line-height:2}
.rodape__ig{display:inline-flex;align-items:center;gap:.5em;color:rgba(235,224,209,.62);text-decoration:none}
.rodape__ig:hover{color:var(--creme)}
.rodape__ig svg{flex:none}

/* ========================================================= reduzir movimento */
@media(prefers-reduced-motion:reduce){
  /* precisa do prefixo .js para vencer as regras `.js .hero{height:...}` —
     media query não acrescenta especificidade */
  .js .hero,.trilho,.simbolo{height:auto}
  .js .convite{margin-top:0}
  .hero__palco,.simbolo__palco,.trilho__palco{position:static;height:auto;padding-block:clamp(70px,12vh,140px)}
  .simbolo__selo{position:static;margin-bottom:clamp(24px,4vh,44px);padding-inline:var(--gut)}
  .hero__fundo img{transform:none}
  .trilho__fita{flex-wrap:wrap;justify-content:center}
  .trilho__progresso{display:none}
  .convite__figura img,.peca__moldura img{transform:none}
  .js .rv{opacity:1}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}