/* =========================================================
   OffGrid — sistema (consolidado em 03/09)
   Barra 22 / altura de letra 160 / braço 90 / queda 68:
   as medidas do wordmark viram as medidas da página.
   Cores da sinalização viária brasileira (CONTRAN Vol. IV, Munsell).
   Tudo centralizado: pedido dele em 31/08, vale sobre a lei geral
   de cabeçalho editorial em duas colunas.
   ========================================================= */

:root{
  --asfalto:      #141414;
  --asfalto-alto: #1c1c1c;
  --tinta:        #E8E6E1;   /* branco de tinta viária, não branco de tela */
  --tinta-70:     rgba(232,230,225,.72);
  --tinta-45:     rgba(232,230,225,.46);
  --amarelo:      #F2B807;   /* CONTRAN 10 YR 7,5/14 */
  --amarelo-70:   rgba(242,184,7,.7);
  --fio:          rgba(232,230,225,.14);
  --fio-forte:    rgba(232,230,225,.28);

  --util: 1400px;
  --lado: clamp(20px,4vw,64px);

  --t-h2:     clamp(2.15rem, 4.4vw, 4.2rem);
  --t-h3:     clamp(1.35rem, 1.9vw, 2.1rem);
  --t-corpo:  clamp(1.07rem, 1.15vw, 1.4rem);   /* piso 17px medido */
  --t-apoio:  clamp(1rem, .95vw, 1.18rem);
  --t-label:  clamp(.8rem, .78vw, .95rem);
  --t-num:    clamp(2.4rem, 4vw, 4.5rem);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--tinta);
  /* o papel preto do próprio cartaz serigrafado, em tile sem emenda, rolando com a página */
  background:var(--asfalto) url("../assets/img/papel-tile.webp") top left/1200px 427px repeat;
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--t-corpo); line-height:1.55;
  -webkit-font-smoothing:antialiased; position:relative;
}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--amarelo); color:var(--asfalto)}

/* o grão: o mesmo tile de 256px aprovado no site da Masi (RGBA, alfa 0–22, blend
   NORMAL). Custa um paint no load e nada por quadro. O overlay em mix-blend-mode que
   estava aqui forçava a página inteira a compor por cima dele a cada rolagem. */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:90;
  background:url("../assets/img/grao.png") repeat; opacity:.55;
}

/* nada que se desloque durante uma entrada pode virar rolagem horizontal */
main{overflow-x:clip}
.util{max-width:var(--util); margin:0 auto; padding-left:var(--lado); padding-right:var(--lado)}
section{padding-block:clamp(72px,9vw,150px)}
section + section{border-top:1px solid var(--fio)}

.label{font-family:var(--mono); font-size:var(--t-label); text-transform:uppercase;
       letter-spacing:.14em; font-weight:700; color:var(--tinta-45)}
.acento{color:var(--amarelo)}


/* ---- navbar ---- */
.topo{position:fixed; inset:0 0 auto 0; z-index:80; background:rgba(20,20,20,.97);
      border-bottom:1px solid var(--fio)}
.topo .util{display:flex; align-items:center; justify-content:space-between; height:64px}
.topo nav{display:flex; gap:clamp(14px,2vw,30px)}
.topo nav a{font-size:var(--t-label); text-decoration:none; color:var(--tinta-70);
            text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-family:var(--mono)}
.topo nav a:hover{color:var(--tinta)}
.topo nav a.destaque{color:var(--amarelo)}
.marca-topo{height:40px; width:auto; object-fit:contain}   /* o selo (o quadradinho da logo), recortado do arquivo dele */
@media(max-width:700px){ .topo nav a:not(.destaque){display:none} }

/* =========================================================
   HERO — a foto do cartaz serigrafado sangra a tela (decisão dele)
   ========================================================= */
.hero{min-height:100svh; position:relative; overflow:hidden; display:flex;
      padding:110px 0 clamp(28px,5vh,64px)}
.foto-hero{position:absolute; inset:0; z-index:-2; overflow:hidden}
/* O hero É o logotype serigrafado: o papel preto da própria imagem é o fundo da dobra. */
.foto-hero img{width:100%; height:100%; object-fit:cover; object-position:center 46%; filter:contrast(1.02)}
/* no celular o cover mostrava só "GR" (medido em 390): o cartaz inteiro cabe na largura,
   ampliado 1,25×, e o papel do body (que é o mesmo papel do cartaz) completa o resto */
@media(max-width:720px){ .foto-hero img{object-fit:contain; object-position:center 42%; transform:scale(1.25)} }
.foto-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,20,20,.72) 0%, rgba(20,20,20,0) 26%, rgba(20,20,20,0) 62%, rgba(20,20,20,.88) 100%)}
/* a grade desenhada: fios a cada 128px, pesando pouco sobre a foto */
.hero .grade-fundo{position:absolute; inset:0; z-index:-1; opacity:.28;
  background-image:
    repeating-linear-gradient(to right, var(--fio) 0 2px, transparent 2px 128px),
    repeating-linear-gradient(to bottom, var(--fio) 0 2px, transparent 2px 128px);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%)}
.hero::before{content:""; position:absolute; left:var(--lado); top:0; width:2px;
  height:clamp(60px,10vh,120px); background:linear-gradient(to bottom, var(--amarelo), transparent)}

/* o wordmark impresso ocupa o meio da dobra; o texto desce para o rodapé do hero */
.hero-conteudo{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  width:100%; max-width:var(--util); margin:0 auto; padding-left:var(--lado); padding-right:var(--lado)}
.hero .assinatura{font-size:clamp(1.25rem,3.4vw,3rem); font-weight:800; letter-spacing:-.02em;
  line-height:1.1; margin:auto 0 0; position:relative; z-index:1}
@media(min-width:720px){ .hero .assinatura{white-space:nowrap} }
.hero .assinatura em{font-style:normal; color:var(--amarelo); display:inline-block}
.hero .rodape-hero{display:flex; gap:clamp(16px,3vw,48px); flex-wrap:wrap; justify-content:center;
  margin-top:clamp(16px,2.4vh,30px); border-top:1px solid var(--fio); padding-top:20px; position:relative; z-index:1}

/* fio curto antes de um label */
.fio-antes{display:inline-flex; align-items:center; justify-content:center; gap:14px}
.fio-antes::before{content:""; width:clamp(28px,4vw,64px); height:2px; background:var(--amarelo);
  transform:scaleX(var(--fio-x,1)); transform-origin:left center}

/* =========================================================
   CABEÇALHO DE SEÇÃO (centrado, decisão dele)
   ========================================================= */
.cab{display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; gap:clamp(14px,2vw,28px);
     border-bottom:1px solid var(--fio); padding-bottom:clamp(20px,2.6vw,36px); margin-bottom:clamp(36px,5vw,72px);
     position:relative}
.cab::after{content:""; position:absolute; left:50%; bottom:-1px; width:clamp(60px,7vw,120px); height:2px;
  background:var(--amarelo); transform:translateX(-50%) scaleX(var(--regua,1)); transform-origin:center}
.cab .label{display:block; margin-bottom:10px}
.cab h2{font-size:var(--t-h2); line-height:1; letter-spacing:-.03em; margin:.15em 0 0; font-weight:800}
.cab p{font-size:var(--t-apoio); color:var(--tinta-70); margin:0; max-width:56ch}

/* ---- texto corrido ---- */
.prosa{max-width:62ch; margin-left:auto; margin-right:auto; text-align:center}
.prosa p{margin:0 0 1.1em}
.prosa p:last-child{margin-bottom:0}
.destacado{font-size:clamp(1.3rem,2.2vw,2rem); line-height:1.32; font-weight:600; letter-spacing:-.01em}

/* ---- o cartaz na rua ---- */
.cartaz{margin:clamp(40px,5vw,80px) auto 0; max-width:1120px; position:relative}
.cartaz img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; filter:contrast(1.04);
  mask-image:linear-gradient(to bottom, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent)}
.cartaz figcaption{margin-top:12px; display:block}

/* =========================================================
   OS QUATRO GRIDS — quatro barras; a quarta cai
   ========================================================= */
.lista-grid{list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(4,1fr); align-items:start; overflow-x:clip;
  margin-bottom:clamp(48px,6vw,90px)}
.lista-grid li{border-top:2px solid var(--fio-forte); padding:clamp(18px,2vw,28px) 0 0; text-align:center;
  position:relative; transition:border-color .3s}
.lista-grid li::before{content:""; position:absolute; left:0; top:-2px; height:2px; width:0;
  background:var(--amarelo); transition:width .45s cubic-bezier(.16,1,.3,1)}
.lista-grid li:hover::before{width:100%}
.lista-grid .num{font-family:var(--mono); font-size:var(--t-label); color:var(--tinta-45); display:block; margin-bottom:.8em}
.lista-grid h3{font-size:clamp(1.3rem,1.9vw,1.9rem); margin:0 0 .3em; letter-spacing:-.03em; line-height:1.05; font-weight:800}
.lista-grid p{margin:0 auto; font-size:var(--t-apoio); color:var(--tinta-70); max-width:26ch}
/* a quarta barra fica na linha das outras (04/09); o que a distingue é a cor e a entrada */
.lista-grid li.ultimo{border-top-color:var(--amarelo)}
.lista-grid li.ultimo .num, .lista-grid li.ultimo h3{color:var(--amarelo)}
@media(max-width:900px){ .lista-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .lista-grid{grid-template-columns:1fr; gap:22px} }

/* ---- o manifesto: três frases em display, uma por linha, a última em amarelo ---- */
.manifesto{margin:clamp(56px,7vw,110px) auto 0; text-align:center; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.7rem,4vw,3.8rem); line-height:1.08}
.manifesto span{display:block}
.manifesto span + span{margin-top:.12em}
/* o GRID é o recorte do próprio cartaz serigrafado (pedido dele, 04/09): entra na
   linha como palavra, na altura da caixa alta da fonte */
.manifesto .grid-logo{display:inline-block; height:1em; width:auto; vertical-align:-.06em; margin-left:.08em}

/* ---- faixa de imagem ---- */
.faixa-imagem{padding-block:0}
.faixa-img{display:grid; gap:1px; background:var(--fio); grid-template-columns:repeat(3,1fr)}
.faixa-img figure{margin:0; aspect-ratio:3/2; overflow:hidden; background:rgba(28,28,28,.72); position:relative}
.faixa-img img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1);
  transition:transform .6s cubic-bezier(.16,1,.3,1), filter .4s ease}
.faixa-img figure:hover img{transform:scale(1.03); filter:grayscale(1) contrast(1.18)}
.faixa-img figure::after{content:attr(data-credito); position:absolute; inset:auto 0 0 0;
  padding:10px 12px; background:linear-gradient(to top, rgba(20,20,20,.94), rgba(20,20,20,0));
  font-family:var(--mono); font-size:.72rem; line-height:1.4; letter-spacing:.04em;
  color:var(--tinta-70); opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1); pointer-events:none}
.faixa-img figure:hover::after{opacity:1; transform:translateY(0)}
@media(max-width:700px){ .faixa-img{grid-template-columns:1fr} .faixa-img figure:nth-child(n+2){aspect-ratio:2/1} }

/* ---- grid de serviços (4) ---- */
.servicos{display:grid; gap:1px; background:var(--fio); border:1px solid var(--fio); grid-template-columns:repeat(4,1fr)}
.servico{background:rgba(20,20,20,.55); padding:clamp(24px,2.6vw,40px); min-height:230px; text-align:center;
         display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:18px;
         position:relative; transition:background .18s, color .18s}
.servico::before{content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--amarelo); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1)}
.servico:hover{background:var(--tinta); color:var(--asfalto)}
.servico:hover::before{transform:scaleX(1)}
.servico:hover .servico-num{color:var(--asfalto)}
.servico h3{font-size:var(--t-h3); margin:0 0 .4em; letter-spacing:-.02em; line-height:1.1}
.servico p{font-size:var(--t-apoio); color:inherit; opacity:.78; margin:0}
.servico-num{font-family:var(--mono); font-size:var(--t-label); color:var(--tinta-45)}
@media(max-width:1120px){ .servicos{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .servicos{grid-template-columns:1fr} .servico{min-height:0} }

/* =========================================================
   OS SEIS — cada pessoa atrás de um gradil; o mouse abre o vão
   ========================================================= */
.time{display:grid; gap:1px; background:var(--fio); border:1px solid var(--fio); grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){ .time{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .time{grid-template-columns:1fr} }
.pessoa{background:rgba(20,20,20,.55); position:relative}
.pessoa .foto{aspect-ratio:3/4; background:rgba(28,28,28,.72); position:relative; overflow:hidden}
.pessoa .foto img{width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.08)}
.pessoa .vazio{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; z-index:2;
  padding-bottom:18px; color:var(--tinta-45); font-family:var(--mono); font-size:var(--t-label); letter-spacing:.1em; text-align:center}
.pessoa .vazio::before{content:""; position:absolute; inset:auto 0 0 0; height:56px;
  background:linear-gradient(to top, var(--asfalto-alto), transparent)}
/* o gradil: barras verticais em duas metades, que se afastam no hover */
.pessoa .gradil{position:absolute; inset:0; display:flex; pointer-events:none; z-index:1}
.pessoa .gradil span{flex:1; height:100%;
  background-image:repeating-linear-gradient(to right, var(--fio-forte) 0 2px, transparent 2px 28px);
  transition:transform .55s cubic-bezier(.16,1,.3,1)}
.pessoa .gradil span:last-child{background-position:14px 0}
.pessoa:hover .gradil span:first-child{transform:translateX(-45%)}
.pessoa:hover .gradil span:last-child{transform:translateX(45%)}
.pessoa .dados{padding:clamp(16px,1.8vw,24px); display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.pessoa h3{font-size:var(--t-h3); margin:0; letter-spacing:-.02em}
.pessoa .funcao{font-family:var(--mono); font-size:var(--t-label); color:var(--tinta-45)}

/* ---- contato ---- */
.contato-linha{display:flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--fio); padding:clamp(18px,2.4vw,30px) 0; text-decoration:none;
  transition:color .18s; position:relative}
.contato-linha::after{content:""; position:absolute; left:50%; bottom:-1px; height:1px; width:0; transform:translateX(-50%);
  background:var(--amarelo); transition:width .5s cubic-bezier(.16,1,.3,1)}
.contato-linha:hover{color:var(--amarelo)}
.contato-linha:hover::after{width:100%}
.contato-linha .oq{font-family:var(--mono); font-size:var(--t-label); color:var(--tinta-45)}
.contato-linha .valor{font-size:clamp(1.2rem,2.4vw,2rem); font-weight:700; letter-spacing:-.02em}

/* ---- rodapé ---- */
footer{padding-block:clamp(40px,5vw,70px); border-top:1px solid var(--fio)}
footer .util{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center}
footer .label{max-width:40ch; line-height:1.6}
footer .creditos{max-width:64ch; font-weight:400; letter-spacing:.06em; text-transform:none; font-size:.74rem}

/* ---- reveal: o CSS só esconde quando o JS assumiu ---- */
[data-reveal].pronto:not(.is-in){opacity:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1 !important; transform:none !important}
  .faixa-img img, .pessoa .gradil span, .servico, .servico::before, .contato-linha::after{transition:none}
}