/* ==========================================================================
   persa. — base
   Tokens, reset, tipografia e utilitários.

   ATENÇÃO: a paleta diverge de identidade/design-guide.md, que manda
   preto e branco puros. Por decisão da direção, as dobras passaram a usar
   os tons quentes do site anterior (index-old) para não ficarem todas no
   mesmo preto chapado. O guia precisa ser atualizado para refletir isso.
   ========================================================================== */

/* ---------- fontes auto-hospedadas ---------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- tokens ----------
   Paleta herdada do site anterior (css/style.css do index-old), para as
   dobras não ficarem todas no mesmo preto chapado. São tons quentes,
   quase acromáticos: o matiz existe, mas baixo. */
:root{
  /* Superfícies escuras, do mais fechado ao mais aberto. O degrau entre
     --tinta e --tom-2 é 1.20 de razão de contraste: o #1E1A17 do site
     antigo dava só 1.06 e a troca de dobra passava despercebida, que era
     justamente o problema do "tudo preto". */
  --tinta:#161413;              /* fundo padrão das seções */
  --tom-2:#2A2420;              /* alternância entre dobras escuras */
  --tom-3:#342C27;              /* cartões e superfícies elevadas */

  /* PRETO PURO: exclusivo do hero. O vídeo da marca tem fundo #000000, e
     com object-fit:contain a área de letterbox mostraria uma emenda
     visível se o hero usasse qualquer outro tom. Não usar em mais nada. */
  --preto-video:#000000;

  --creme:#F4F1EC;              /* texto sobre escuro, e fundo das dobras claras */

  /* hierarquia de texto */
  /* claro o bastante para passar em AA mesmo sobre --tom-3, o fundo mais
     aberto da escala */
  --cinza-texto:#A09788;        /* secundário sobre fundo escuro */
  --cinza-texto-inv:#5A4E44;    /* secundário sobre creme */

  /* contornos de 1px, tingidos com o mesmo calor das superfícies */
  --linha:rgba(244,241,236,.16);
  --linha-forte:rgba(244,241,236,.40);
  --linha-inv:rgba(22,20,19,.18);
  --linha-inv-forte:rgba(22,20,19,.42);
  --veu:rgba(22,20,19,.55);     /* véu sobre foto para garantir contraste */

  /* tipografia */
  --sans:'Inter',Helvetica,Arial,sans-serif;

  /* escala fluida: encolhe no celular sem media query */
  --t-mega:clamp(2.75rem,10vw,8.5rem);
  --t-xl:clamp(2rem,5.5vw,4.5rem);
  --t-lg:clamp(1.5rem,3.2vw,2.75rem);
  --t-md:clamp(1.15rem,1.9vw,1.5rem);
  --t-base:clamp(1rem,1.15vw,1.0625rem);
  --t-sm:.875rem;
  --t-xs:.75rem;

  /* ritmo vertical e medidas */
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --secao:clamp(4.5rem,11vw,10rem);
  --largura:1440px;
  --leitura:62ch;

  /* forma: o guia manda cantos retos e nenhuma sombra */
  --raio:0;
  --ease:cubic-bezier(.22,.75,.3,1);
  --dur:.5s;

  color-scheme:dark;
}

/* ---------- reset ---------- */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  border-radius:var(--raio);   /* cantos retos por padrão em tudo */
  box-shadow:none;             /* sombra é proibida pelo guia */
}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* a raiz também precisa da paleta: sem isto ela fica no branco padrão
     do user agent, que vaza em qualquer elemento fora do body */
  background:var(--tinta);
  color:var(--creme);
}
body{
  background:var(--tinta);
  color:var(--creme);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- tipografia ----------
   O guia manda caixa baixa sempre, tracking levemente fechado,
   peso medium a bold. Nada de caixa alta em título. */
h1,h2,h3,h4,h5,h6{
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.04;
  text-transform:lowercase;
  text-wrap:balance;
}
/* Nome próprio é a exceção à caixa baixa dos títulos: topônimo e nome de
   pessoa mantêm a maiúscula que a norma exige, escrita como se quer ler
   no HTML. Vale só para isso, não para dar ênfase. */
.nome-proprio{text-transform:none}

/* Dentro do botão, que é inline-flex com gap, o span viraria um item
   próprio e abriria um vazio antes do nome. Sem caixa, o texto dele volta
   a formar um item só com o resto do rótulo, e a caixa alta continua
   valendo por herança. */
.btn .nome-proprio{display:contents}

h1{font-size:var(--t-xl)}
h2{font-size:var(--t-lg)}
h3{font-size:var(--t-md)}
p{text-wrap:pretty}
p+p{margin-top:1em}
strong{font-weight:600}

/* etiqueta de seção: o único lugar onde caixa alta é aceitável,
   porque funciona como numeração e não como nome da marca */
.etiqueta{
  font-size:var(--t-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--cinza-texto);
  display:block;
}
.linha-fina{
  font-size:var(--t-md);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--cinza-texto);
  max-width:var(--leitura);
}
.texto{max-width:var(--leitura);color:var(--cinza-texto)}
.texto-claro{color:var(--creme)}

/* ---------- layout ---------- */
.env{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.secao{padding-block:var(--secao)}
.secao-topo{padding-top:calc(var(--secao) * .55)}
/* dobra de passagem: grade de atalhos, lista curta, nada que peça leitura
   longa. Usa dois terços do respiro padrão para não abrir vazio na tela. */
.secao-curta{padding-block:calc(var(--secao) * .62)}

/* As dobras trabalham em três níveis, não em dois:
     padrão   fundo --tinta
     .tom     fundo --tom-2, um degrau acima, para duas seções escuras
              seguidas não lerem como uma só
     .inv     fundo creme, texto escuro, o corte forte */
.tom{background:var(--tom-2)}

.inv{
  background:var(--creme);
  color:var(--tinta);
  --linha:var(--linha-inv);
  --linha-forte:var(--linha-inv-forte);
  --cinza-texto:var(--cinza-texto-inv);
}

.grade{display:grid;gap:var(--gutter)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
}

.cabeca-secao{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  margin-bottom:calc(var(--gutter) * 1.3);
  max-width:var(--leitura);
}
.regua{height:1px;background:var(--linha);border:0;width:100%}

/* ---------- botões ----------
   retângulo reto, texto em caixa baixa, sem raio e sem sombra ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:1em 2em;
  font-size:var(--t-sm);
  font-weight:500;
  letter-spacing:.02em;
  text-transform:lowercase;
  border:1px solid currentColor;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn-solido{background:var(--creme);color:var(--tinta);border-color:var(--creme)}
.btn-solido:hover,.btn-solido:focus-visible{background:transparent;color:var(--creme)}
.inv .btn-solido{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.inv .btn-solido:hover,.inv .btn-solido:focus-visible{background:transparent;color:var(--tinta)}
.btn-vazado{background:transparent;color:inherit}
.btn-vazado:hover,.btn-vazado:focus-visible{background:var(--creme);color:var(--tinta)}
.inv .btn-vazado:hover,.inv .btn-vazado:focus-visible{background:var(--tinta);color:var(--creme)}
.btn .seta{transition:transform var(--dur) var(--ease)}
.btn:hover .seta{transform:translateX(.35em)}

/* link editorial: sublinhado que cresce da esquerda */
.link{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-weight:500;
  padding-bottom:.2em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size var(--dur) var(--ease);
}
.link:hover,.link:focus-visible{background-size:100% 1px}
.link .seta{transition:transform var(--dur) var(--ease)}
.link:hover .seta{transform:translateX(.35em)}

/* ---------- mídia ----------
   A interface é monocromática, mas a fotografia entra em cor cheia.
   O acervo é a obra, e obra de restauro se lê pela cor: a tonalidade da
   madeira, a mancha de umidade, o grafite. Dessaturar escondia justamente
   o que o material tem a mostrar. */
.figura{position:relative;overflow:hidden;background:var(--tinta)}
.figura img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.figura:hover img,.figura:focus-within img{transform:scale(1.03)}
.figura-fixa:hover img{transform:none}
.r-1x1{aspect-ratio:1/1}
.r-4x3{aspect-ratio:4/3}
.r-3x2{aspect-ratio:3/2}
.r-16x9{aspect-ratio:16/9}
.r-3x4{aspect-ratio:3/4}
.legenda{
  font-size:var(--t-xs);
  color:var(--cinza-texto);
  margin-top:.75rem;
  letter-spacing:.01em;
}

/* moldura de vídeo com proporção travada */
.video-moldura{position:relative;aspect-ratio:16/9;background:var(--tinta);border:1px solid var(--linha);overflow:hidden;min-width:0;align-self:start}
.video-moldura iframe,.video-moldura video{
  position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;
}

/* ---------- acessibilidade ---------- */
.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.pular{
  position:absolute;top:-100%;left:var(--gutter);z-index:999;
  background:var(--creme);color:var(--tinta);padding:.75rem 1.25rem;
  font-size:var(--t-sm);
}
.pular:focus{top:1rem}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- revelação no scroll ---------- */
.revela{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.revela.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none}
}

/* ---------- marcador de pendência de conteúdo ----------
   Só aparece onde falta material real. Nunca inventar dado de
   contrato público: sinalizar a falta é a regra da operação. */
.pendente{
  display:inline-block;
  border:1px dashed var(--linha-forte);
  padding:.3em .7em;
  font-size:var(--t-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cinza-texto);
}