/* ============================================================
   paginas.css · abertura, capa e blocos de página
   ============================================================ */

/* ---------- Abertura ---------------------------------------
   Cortina escura com a marca, que sobe e entrega a capa. Roda
   uma vez por sessão e não roda com movimento reduzido. */
.abertura{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  background:var(--terreno-escuro);
  transform:translateY(0);
  will-change:transform;
}
.abertura[hidden]{display:none !important}
.abertura__marca{
  display:flex;align-items:center;gap:clamp(12px,2vw,22px);
  color:var(--terreno);
}
.abertura__sinal{
  width:clamp(18px,2.6vw,30px);height:clamp(42px,6vw,68px);
  color:var(--acento);
  transform:translateY(14px) scale(.86);opacity:0;
}
.abertura__nome{
  width:clamp(120px,17vw,210px);height:auto;
  clip-path:inset(0 100% 0 0);
}
.abertura.corre .abertura__sinal{
  transform:none;opacity:1;
  transition:transform 620ms cubic-bezier(.16,1,.3,1) 60ms,
             opacity 420ms var(--curva-rapida) 60ms;
}
.abertura.corre .abertura__nome{
  clip-path:inset(0 0 0 0);
  transition:clip-path 760ms cubic-bezier(.22,1,.3,1) 260ms;
}
.abertura.sobe{
  transform:translateY(-101%);
  transition:transform 900ms cubic-bezier(.76,0,.24,1);
}
/* A página não rola enquanto a cortina está na frente. */
.travado{overflow:hidden}

/* ---------- Capa ------------------------------------------ */
.capa{
  padding-top:calc(74px + clamp(48px, 7vw, 104px));
  padding-bottom:var(--e-8);
}
.capa--home{
  min-height:calc(100svh - 74px);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--e-9);
}
.capa__titulo{
  font-size:var(--t-display);line-height:.9;
  letter-spacing:var(--entre-display);font-weight:var(--peso-medio);
}
.capa__titulo em{font-style:normal;color:var(--tinta-fraca)}
.escuro .capa__titulo em{color:var(--tinta-invertida-media)}

.linha{
  display:block;overflow:hidden;
  /* A mascara corta no limite da caixa, e com entrelinha .9 a perna do
     g, do p e do y fica fora dela. A folga abre espaco para o corte
     acontecer abaixo da letra, e a margem devolve o ritmo. */
  padding-bottom:.24em;margin-bottom:-.18em;
}
.linha > span{display:block;will-change:transform}
.js .linha > span{transform:translate3d(0,105%,0)}
.js .pronta .linha:nth-child(1) > span{transition:transform 820ms cubic-bezier(.16,1,.3,1) 60ms}
.js .pronta .linha:nth-child(2) > span{transition:transform 900ms cubic-bezier(.2,.9,.25,1) 150ms}
.js .pronta .linha:nth-child(3) > span{transition:transform 980ms cubic-bezier(.24,.85,.2,1) 250ms}
.js .pronta .linha > span{transform:none}

.capa__fio{
  display:flex;align-items:center;gap:12px;
  margin-top:clamp(28px,4.2vw,52px);
}
.capa__fio-trilho{flex:1;height:1px;background:var(--fio-forte)}
.escuro .capa__fio-trilho{background:var(--fio-escuro)}
.capa__fio-sinal{flex:0 0 9px;width:9px;height:22px;color:var(--acento)}
/* A máscara parte fechada e abre da esquerda para a direita, então o
   fio se desenha e o sinal da marca chega por último, na ponta. */
.js .capa__fio{clip-path:inset(0 100% 0 0)}
.js .capa__titulo.pronta ~ .capa__fio{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1180ms cubic-bezier(.62,0,.2,1) 620ms;
}
@media (prefers-reduced-motion: reduce){
  .js .capa__fio{clip-path:none}
  /* A revelacao por mascara tambem para aqui, e nao no JS: os tres casos
     de movimento reduzido da capa ficam no mesmo lugar. */
  .js .linha > span{transform:none}
}

.capa__base{
  display:grid;grid-template-columns:1fr;gap:var(--e-6);
  padding-top:var(--e-5);border-top:1px solid var(--fio);
}
@media (min-width:900px){
  .capa__base{grid-template-columns:1fr auto;align-items:start;gap:clamp(24px,4vw,72px)}
}
.capa__texto{font-size:clamp(1.0625rem,1.2vw,1.25rem);color:var(--tinta-media);max-width:48ch}
/* A quebra das tres linhas e decidida na redacao, entao a medida sai
   de cena na largura em que elas cabem. */
@media (min-width:1100px){
  .capa--home .capa__texto{max-width:none}
}
@media (max-width:1099px){
  .capa--home .capa__texto br.quebra{display:none}
}
/* O titulo desce, e o vao entre ele e o bloco de baixo encolhe na
   mesma medida: a capa fica com a altura que tinha antes. */
@media (min-width:900px){
  .capa--home{gap:var(--e-7)}
  .capa--home .capa__titulo{padding-top:clamp(16px,3.2vw,56px)}
}
.escuro .capa__texto{color:var(--tinta-invertida-media)}
.capa__acao{display:flex;flex-wrap:wrap;gap:var(--e-3)}

.capa--interna .capa__titulo{font-size:var(--t-h1);max-width:16ch}
.capa--interna .capa__texto{margin-top:var(--e-6);font-size:var(--t-corpo);max-width:70ch}
/* A linha de abertura das páginas internas tem quebra decidida na
   redação, e ela só cabe na largura cheia. Abaixo disso a quebra sai
   e a medida de leitura volta a mandar. */
@media (min-width:1100px){
  .capa--interna .capa__texto{max-width:none}
}
@media (max-width:1099px){
  .capa__texto br.quebra{display:none}
}
/* Capa do telefone: o título cresce e ocupa o lugar que o vão de 96px
   ocupava. Com os dois blocos juntos, o fio da marca passa a ser o
   único separador, e a borda do bloco de baixo sai para não repetir
   a mesma linha duas vezes em 30px. */
@media (max-width:640px){
  /* `flex-start` no lugar do `space-between`: com o título maior a
     sobra de altura é pequena, e espalhada no meio ela abre de novo o
     vão que o título veio fechar. Encostada no fim, ela vira respiro
     de seção. */
  .capa--home{
    gap:var(--e-5);justify-content:flex-start;
    padding-top:calc(74px + var(--e-6));padding-bottom:var(--e-6);
  }
  .capa--home .capa__fio{margin-top:var(--e-6)}
  .capa--home .capa__base{border-top:0;padding-top:0}
}

/* ---------- Tipos de projeto ------------------------------
   Três colunas com degrau vertical na coluna do meio: a fileira
   de células idênticas some e o olho percorre em zigue-zague. */
.tipos{
  display:grid;grid-template-columns:1fr;
  gap:clamp(14px,1.8vw,22px);
}
@media (min-width:620px){.tipos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .tipos{
    grid-template-columns:repeat(3,1fr);
    column-gap:clamp(20px,2.4vw,34px);
    padding-bottom:clamp(28px,3.6vw,60px);
  }
  .tipo:nth-child(3n+2){top:clamp(28px,3.6vw,60px)}
}
.tipo{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(16px,1.5vw,20px) clamp(18px,1.8vw,24px);
  border:1px solid var(--fio);
  border-radius:var(--raio-midia);
  background:var(--terreno-alto);
  transition:transform var(--t-curto) var(--curva-saida),
             border-color var(--t-curto) var(--curva-rapida);
}
/* Em terreno escuro o card permanece claro: é ele o objeto, e o
   preto da seção passa a ser o fundo que o recorta. */
.escuro .tipo{background:var(--terreno-alto);border-color:var(--terreno-alto)}
.escuro .tipo h3{color:var(--tinta)}
.tipo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--acento);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-medio) var(--curva-saida);
}
.tipo:hover{transform:translateY(-4px);border-color:var(--fio-forte)}
.escuro .tipo:hover{border-color:var(--fio-forte)}
.tipo:hover::after,.tipo:focus-visible::after{transform:scaleX(1)}
.tipo__topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-4);margin-bottom:var(--e-3);
}
.tipo__numero{
  font-size:var(--t-marcador);letter-spacing:var(--entre-marcador);
  color:var(--tinta-fraca);font-weight:var(--peso-medio);
}
.escuro .tipo__numero{color:var(--tinta-fraca)}
.tipo__sinal{
  width:7px;height:16px;color:var(--acento);flex:0 0 7px;
  transition:transform var(--t-curto) var(--curva-saida);
}
.tipo:hover .tipo__sinal{transform:translateY(-3px)}
.tipo h3{font-size:1.0625rem;letter-spacing:-.018em}
.tipo p{margin-top:6px;font-size:.875rem;line-height:1.45;color:var(--tinta-media)}
.escuro .tipo p{color:var(--tinta-media)}

/* ---------- Valores --------------------------------------- */
.valores{display:grid;grid-template-columns:1fr;gap:var(--e-7) clamp(24px,4vw,64px)}
@media (min-width:980px){.valores{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.valores__lista{border-top:1px solid var(--fio)}
.escuro .valores__lista{border-top-color:var(--fio-escuro)}
.valor{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e-4) var(--e-5);
  padding-block:var(--e-5);border-bottom:1px solid var(--fio);
}
.escuro .valor{border-bottom-color:var(--fio-escuro)}
.valor__numero{
  font-size:var(--t-marcador);letter-spacing:var(--entre-marcador);
  color:var(--acento);font-weight:var(--peso-medio);padding-top:6px;
}
.valor h3{font-size:1.125rem;letter-spacing:-.015em}
.valor p{margin-top:8px;font-size:1rem;color:var(--tinta-media);max-width:56ch}
.escuro .valor p{color:var(--tinta-invertida-media)}

/* Retrato do estudio: mesma proporcao do bloco que ocupou o lugar. */
.retrato{
  width:100%;height:auto;
  aspect-ratio:3 / 4;object-fit:cover;
  border-radius:var(--raio-midia);
  background:var(--fio);
}

/* ---------- Portfólio ------------------------------------- */
.filtros{
  display:flex;flex-wrap:wrap;gap:10px;
  padding-bottom:var(--e-5);
}
.filtro{
  padding:9px 16px;border-radius:var(--raio-pilula);
  border:1px solid var(--fio-forte);
  font-size:.8125rem;color:var(--tinta-media);
  transition:background var(--t-curto) var(--curva-rapida),
             color var(--t-curto) var(--curva-rapida),
             border-color var(--t-curto) var(--curva-rapida);
}
.filtro:hover{border-color:var(--tinta);color:var(--tinta)}
.filtro[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--tinta-invertida)}
.escuro .filtro{border-color:var(--fio-escuro);color:var(--tinta-invertida-media)}
.escuro .filtro:hover{border-color:var(--tinta-invertida);color:var(--tinta-invertida)}
.escuro .filtro[aria-pressed="true"]{background:var(--terreno);border-color:var(--terreno);color:var(--tinta)}

.projetos{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.4vw,44px) clamp(16px,2.2vw,28px)}
@media (min-width:760px){.projetos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.projetos--3{grid-template-columns:repeat(3,1fr)}}
.projeto[hidden]{display:none}

.quadro{
  position:relative;overflow:hidden;
  border-radius:var(--raio-midia);
  background:var(--fio);aspect-ratio:16 / 9;
}
.escuro .quadro{background:var(--fio-escuro)}
.quadro img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-longo) var(--curva-saida);
}
.quadro:hover img{transform:scale(1.04)}

.projeto__pe{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px var(--e-4);
  padding-top:var(--e-4);margin-top:var(--e-4);
  border-top:1px solid var(--fio);
}
.escuro .projeto__pe{border-top-color:var(--fio-escuro)}
.projeto__titulo{font-size:1.25rem;letter-spacing:-.02em}
.projeto__tipo{
  font-size:var(--t-marcador);letter-spacing:var(--entre-marcador);
  text-transform:uppercase;color:var(--tinta-fraca);
}
@media (min-width:760px){.projeto__tipo{white-space:nowrap}}
.escuro .projeto__tipo{color:var(--tinta-invertida-media)}
.projeto__texto{color:var(--tinta-media);font-size:.9375rem;margin-top:var(--e-3);max-width:52ch}
.escuro .projeto__texto{color:var(--tinta-invertida-media)}
.projeto__acao{margin-top:var(--e-4);display:flex;flex-wrap:wrap;gap:var(--e-5)}

/* ---------- Página de serviços ---------------------------- */
.servico{
  display:grid;grid-template-columns:1fr;
  gap:var(--e-5) clamp(16px,2.2vw,40px);
  padding-block:clamp(40px,5vw,72px);
  border-top:1px solid var(--fio);
}
.escuro .servico{border-top-color:var(--fio-escuro)}
@media (min-width:900px){.servico{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.servico > div > p + p{margin-top:var(--e-5)}
.servico__cabeca{position:sticky;top:110px;align-self:start}
/* Em coluna única o cabeçalho é um item de grade, e item de grade só
   gruda dentro da própria linha, que tem a altura dele: não sairia do
   lugar. O artigo vira bloco, o cabeçalho passa a grudar contra o
   artigo inteiro e cada título segura a tela até o próximo chegar.
   O terreno opaco existe porque o texto passa por baixo dele. */
@media (max-width:899px){
  .servico{display:block}
  .servico > div > p:first-child{margin-top:var(--e-5)}
  .servico__cabeca{
    position:sticky;top:64px;z-index:2;
    background:var(--terreno);
    padding-block:var(--e-4);
    margin-top:calc(var(--e-4) * -1);
  }
  /* O texto que passa por baixo era cortado no meio da letra, e meia
     linha visível lê como falha de desenho. O esmaecido de 20px, na
     própria cor do terreno, faz a linha sumir antes de chegar na
     borda. Não é ornamento: é a máscara da borda. */
  .servico__cabeca::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:20px;
    background:linear-gradient(var(--terreno),rgb(246 244 240 / 0));
    pointer-events:none;
  }
  .escuro .servico__cabeca{background:var(--terreno-escuro)}
  .escuro .servico__cabeca::after{background:linear-gradient(var(--terreno-escuro),rgb(10 10 10 / 0))}
  .servico__cabeca .estado{margin-top:var(--e-4);padding-top:var(--e-3)}
}
.servico__numero{
  font-size:var(--t-marcador);letter-spacing:var(--entre-marcador);
  color:var(--tinta-fraca);display:block;margin-bottom:var(--e-3);
}
.servico__titulo{font-size:clamp(1.75rem,3.2vw,2.5rem);max-width:14ch}
/* Rótulo de estado da conformidade: diz de saída se a exigência
   vale sempre, só em certos casos, ou não vale. */
.estado{
  display:flex;align-items:center;gap:10px;width:100%;
  margin-top:var(--e-5);padding-top:var(--e-4);
  border-top:1px solid var(--fio);
  font-size:var(--t-marcador);letter-spacing:var(--entre-marcador);
  text-transform:uppercase;font-weight:var(--peso-medio);
  color:var(--tinta);
}
.escuro .estado{border-top-color:var(--fio-escuro);color:var(--tinta-invertida)}
.estado::before{
  content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;
  background:var(--fio-forte);
}
.estado--sempre::before{background:var(--acento)}
.estado--talvez::before{background:var(--tinta-media)}

.pontos{margin-top:var(--e-6);border-top:1px solid var(--fio)}
.escuro .pontos{border-top-color:var(--fio-escuro)}
.pontos li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e-4);
  padding-block:12px;border-bottom:1px solid var(--fio);
  font-size:.9375rem;line-height:1.5;color:var(--tinta-media);
}
.escuro .pontos li{border-bottom-color:var(--fio-escuro);color:var(--tinta-invertida-media)}
.pontos li::before{content:"";width:14px;height:1px;background:var(--acento);margin-top:.78em}

.nota{margin-top:var(--e-4);font-size:.875rem;color:var(--tinta-fraca)}
/* Nota cuja quebra de linha é decidida na redação e não cabe na
   medida de leitura padrão. */
.nota--larga{max-width:none}
.escuro .nota{color:var(--tinta-invertida-media)}

/* ---------- Página de orçamento --------------------------- */
.pedido{display:grid;grid-template-columns:1fr;gap:var(--e-9) clamp(24px,5vw,88px);align-items:start}
@media (min-width:980px){.pedido{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}
.pedido__lado h2{font-size:var(--t-h3)}
.pedido__passos{margin-top:var(--e-5);border-top:1px solid var(--fio)}
.pedido__passos li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e-4);
  padding-block:var(--e-4);border-bottom:1px solid var(--fio);
  font-size:1rem;color:var(--tinta-media);
}
.pedido__passos span{color:var(--tinta-fraca);font-size:.8125rem;letter-spacing:.08em;padding-top:4px}
.pedido__direto{margin-top:var(--e-7)}
.pedido__direto h3{
  font-size:var(--t-marcador);letter-spacing:var(--entre-marcador);
  text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:var(--e-4);
}

/* ---------- Página legal ---------------------------------- */
.legal{max-width:68ch}
.legal h2{font-size:var(--t-h3);margin-top:var(--e-7)}
.legal h2:first-of-type{margin-top:var(--e-6)}
.legal h3{font-size:1.125rem;margin-top:var(--e-5)}
.legal p{margin-top:var(--e-4);color:var(--tinta-media)}
.legal ul{margin-top:var(--e-4);color:var(--tinta-media)}
.legal li{position:relative;padding-left:var(--e-5);margin-top:8px}
.legal li::before{
  content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--acento);
}

/* ---------- Erro 404 -------------------------------------- */
.erro{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--e-9);
}