/* ═══════════════════════════════════════════════════════════════════════════
   USINA DESIGN — núcleo
   Um arquivo governa cor, tipo, ritmo e traço. A identidade de cada seção
   nasce do dado (linha, família, coleção), não de arte nova aplicada por cima.

   Regras que o núcleo assume e que valem para toda tela:
   · raio zero — é prancha de desenho, não cartão
   · sombra nenhuma — profundidade vem de espessura de linha
   · nada de célula fechada em tabela — só o filete que separa
   · o acento é a cor dos acabamentos reais (G2 Cobre / Dourado), não cor nova

   Contraste conferido em WCAG 2.1 contra os três papéis. Ver bloco COR.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── fontes, servidas daqui — sem CDN na superfície pública ───────────────── */
@font-face{
  font-family:'Archivo';
  src:url('/fonts/archivo.woff2') format('woff2-variations'),
      url('/fonts/archivo.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Zodiak';
  src:url('/fonts/zodiak-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ═══════════════════════════ TOKENS ═══════════════════════════ */
:root{
  /* ── COR ──────────────────────────────────────────────────────
     ESCURO é o padrão, e são os valores do protótipo aprovado com a
     cliente. A Usina vende luz: luminária lê contra fundo escuro, que
     é como o produto existe no mundo, e desenho técnico em traço claro
     sobre quase-preto é o blueprint invertido.

     O laboratório de 12/08 concluiu que o TRAÇO lia melhor no claro.
     Isso é problema do traço, não do tema, e a resposta foi o tema
     claro do botão da barra — não trocar o tema da marca. O campo de
     traço, que era a outra resposta, saiu inteiro em 24/08.

     Medido contra o fundo:
       tinta-1 16,77:1  ·  tinta-2 8,24:1  ·  tinta-3 5,83:1
       brasa 8,69:1     ·  texto escuro sobre brasa 8,69:1

     No escuro a brasa passa em texto E em preenchimento. No claro ela
     dá 1,90:1, e por isso lá existe uma `brasa-tinta` separada.      */
  --fundo-0:  #08080A;
  --fundo-1:  #0B0B0C;
  --fundo-2:  #131316;
  --fundo-3:  #1A1A1E;

  --tinta-1:  #EDEDEA;
  --tinta:    var(--tinta-1); /* token que .marca e .catalogo-card__nome ja referenciavam */
  --tinta-2:  #A8A8A3;
  --tinta-3:  #8C8C88;

  --risco:       #26262C;
  --risco-forte: #3A3A42;

  /* o acento é literalmente o acabamento G2 Dourado do catálogo, #c9a951 */
  --brasa:       #C9A951;
  --brasa-tinta: #D9BC6E;
  --brasa-veu:   rgb(201 169 81 / .16);

  --traco:       #EDEDEA;   /* cor do desenho técnico na moldura da ficha */

  /* ── TIPO ─────────────────────────────────────────────────────
     Zodiak no display (serifa de terminal cortado — autoria sem
     preciosismo). Archivo no corpo (grotesca desenhada para corpo
     pequeno — é a ficha técnica que precisa aguentar).
     Escala fluida no editorial, rem fixo no dado.                 */
  --display:'Zodiak',Georgia,'Times New Roman',serif;
  --corpo:'Archivo',system-ui,-apple-system,sans-serif;

  --t-xs:   .6875rem;    /* rótulo, legenda de cota          */
  --t-sm:   .8125rem;    /* tabela densa, apoio              */
  --t-base: 1rem;
  --t-md:   1.0625rem;   /* corpo editorial                  */
  /* Do --t-lg para cima a escala é GEOMÉTRICA, razão 1,35, e a razão vale nos
     DOIS extremos do clamp. Antes não valia em nenhum: no piso (390 px) o 2xl
     e o 3xl ficavam a 16% um do outro e o degrau sumia; no topo (1440 px) o lg
     para o xl saltava 63% enquanto os outros saltavam 35%. Era isso o
     "desencontrado" — não o tamanho de cada um, mas o intervalo entre eles.

       piso  1,35 · 1,80 · 2,45 · 3,30   razões 1,33 1,36 1,35
       topo  2,40 · 3,25 · 4,40 · 5,90   razões 1,35 1,35 1,34            */
  --t-lg:   clamp(1.35rem, 0.96rem + 1.60vw, 2.4rem);
  --t-xl:   clamp(1.8rem,  1.29rem + 2.16vw, 3.25rem);
  --t-2xl:  clamp(2.45rem, 1.75rem + 2.91vw, 4.4rem);
  --t-3xl:  clamp(3.3rem,  2.36rem + 3.93vw, 5.9rem);

  --rastro:  .18em;      /* letter-spacing de rótulo         */
  --medida:  68ch;       /* largura máxima de leitura        */

  /* ── ESPAÇO — escala 4pt ──────────────────────────────────── */
  --e1:.25rem;  --e2:.5rem;   --e3:.75rem;  --e4:1rem;   --e5:1.25rem;
  --e6:1.5rem;  --e8:2rem;    --e10:2.5rem; --e12:3rem;  --e16:4rem;
  --e20:5rem;   --e24:6rem;   --e32:8rem;

  --secao:  clamp(4.5rem, 8.5vw, 9rem);          /* respiro entre seções */
  /* 1320 px, medido no protótipo aprovado. O staging estava em 1240 e a
     diferença de 80 px é o que o Herasmo leu como "o site parece mais
     espremido": em 1440 o miolo do protótipo respira 6,1% mais. */
  --env:    1320px;                              /* largura do envelope  */
  --sangria:clamp(1.25rem, 5.5vw, 4.5rem);       /* recuo lateral        */

  /* ── MOVIMENTO ────────────────────────────────────────────── */
  --curva:cubic-bezier(.16,1,.3,1);              /* desaceleração longa  */
  --rapido:.22s; --medio:.42s; --lento:.8s;
}

/* ── TEMA CLARO — alternativa, não padrão ────────────────────────────────
   Papel quente (H85) com tinta fria (H250): nanquim sobre papel de
   gramatura. Serve para leitura longa de ficha e para impressão, e é o
   que o especificador pode preferir na tela do escritório. O botão na
   barra troca e o navegador lembra.

   Aqui a brasa NÃO serve como texto (1,90:1 sobre o papel), por isso
   `brasa-tinta` escurece em vez de clarear.                              */
:root[data-tema=claro]{
  --fundo-0:  oklch(0.988 0.005 85);
  --fundo-1:  oklch(0.972 0.008 85);
  --fundo-2:  oklch(0.945 0.010 85);
  --fundo-3:  oklch(0.910 0.012 85);

  --tinta-1:  oklch(0.19 0.020 250);
  --tinta-2:  oklch(0.38 0.022 250);
  --tinta-3:  oklch(0.50 0.020 250);

  --risco:       oklch(0.50 0.030 250/.22);
  --risco-forte: oklch(0.50 0.030 250/.44);

  --brasa:       oklch(0.78 0.152 68);
  --brasa-tinta: oklch(0.50 0.135 50);
  --brasa-veu:   oklch(0.78 0.152 68/.14);

  --traco:       oklch(0.32 0.030 250);
}

/* ═══════════════════════════ BASE ═══════════════════════════ */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fundo-1);
  color:var(--tinta-1);
  font:var(--t-base)/1.6 var(--corpo);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.021em;
  line-height:1.04;
  text-wrap:balance;
}
p{margin:0}
svg{display:block}
img{max-width:100%;height:auto}

a{color:inherit;text-decoration:none}

/* âncora de texto: o filete cresce da esquerda, não muda de cor */
a.elo{
  text-decoration:underline;
  text-decoration-color:var(--risco-forte);
  text-underline-offset:.28em;
  text-decoration-thickness:1px;
  transition:text-decoration-color var(--rapido) var(--curva);
}
a.elo:hover{text-decoration-color:var(--brasa-tinta)}

::selection{background:var(--brasa-veu);color:var(--tinta-1)}

:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--brasa-tinta);
  outline-offset:3px;
}

/* ═══════════════════════ LAYOUT ═══════════════════════ */
.env{
  max-width:var(--env);
  margin-inline:auto;
  padding-inline:var(--sangria);
}

.secao{padding-block:var(--secao)}

/* Nenhuma página encosta no rodapé. A `/downloads` termina numa `<section
   class="env">` sem `.secao`, e a folga medida até o rodapé era ZERO — em
   todos os filtros. A regra pega o último bloco de conteúdo de qualquer
   página e só quando ele já não tem o respiro por conta própria. */
.rodape{margin-top:0}
section:not(.secao):last-of-type{padding-bottom:var(--secao)}
/* Respiro ANTES da linha de cota, e no sistema, não página a página. `.secao`
   é quem carrega o `padding-block`; um bloco de conteúdo sem ela chega ao
   `border-top` da seção seguinte com folga ZERO e o texto encosta na linha.
   Medido em 26/08 a 1440 px: `/contato` 0 px, ficha de peça 0 px — e a ficha
   vale para as 304 famílias —, `/trabalhe-conosco` 34 px contra os 108 das
   demais. Três valores para a mesma relação é justamente a perda de padrão.
   `.hero` e `.numeros` ficam de fora de propósito: são faixas de sangria
   própria, com fundo e borda próprios, e nelas o encontro com a linha é o fim
   do fundo, não texto colado. */
section:not(.secao):not(.hero):not(.numeros):has(+ .secao--filete){
  padding-bottom:var(--secao);
}
/* A separação entre seções é uma LINHA DE COTA, não um filete qualquer: o
   traço horizontal com tique vertical nas duas pontas é a convenção do desenho
   técnico, que é o objeto físico que esta marca representa. Custa um
   pseudo-elemento, não pede imagem, e é vocabulário emprestado da própria peça
   em vez de ornamento inventado. Foi o que o campo de traço tentou fazer com
   fragmento de SVG e não conseguiu. */
.secao--filete{border-top:1px solid var(--risco);position:relative}
/* ⚠️ RESPIRO DE SEÇÃO PARA QUEM TEM A LINHA E NÃO TEM A CLASSE — item 19.15.
   *"seção CABOS grudada na seção anterior, ajustar espaçamento, problema
   recorrente!"*. A `/acabamentos` abre a seção dos cabos com
   `class="env secao--filete"` e um `padding-bottom` no atributo `style`: ela
   desenha a linha de cota e não tem `padding-top` nenhum, então o rótulo
   encostava na linha.

   O conserto é aqui e não lá, porque o defeito é de SISTEMA: quem carrega o
   respiro é a `.secao`, e nada obrigava as duas a andarem juntas. Agora
   qualquer seção que desenhe a linha ganha a folga acima, tenha ou não a
   classe — e as que já têm não recebem duas. */
.secao--filete:not(.secao){padding-top:var(--secao)}
.secao--filete::before{
  content:'';position:absolute;left:0;right:0;top:-5px;height:11px;
  pointer-events:none;
  background:
    linear-gradient(var(--risco-forte),var(--risco-forte)) left  top/1px 100% no-repeat,
    linear-gradient(var(--risco-forte),var(--risco-forte)) right top/1px 100% no-repeat;
}

/* A FAIXA, pedida pelo Herasmo em 26/08: *"a faixa de fundo muda de preto
   chapado para chumbo, uma mudança leve mas que faz total diferença — dá a
   sensação de mudança de navegação"*.

   O valor não é escolhido: é o `--fundo-2`, que já existe, e é exatamente o
   `--surf:#131316` que o protótipo usa na `.secalt` das mesmas duas seções
   (Especificação e Downloads, em `preview/produto.html`).

   A faixa SANGRA de margem a margem, como a `.numeros` da home — mesmo padrão:
   a classe fica na `<section>` e o `.env` vai no filho. E por isso ela não leva
   a linha de cota: a borda da própria faixa já separa, e o tique de cota
   pousaria na borda da JANELA, não na do envelope. */
.secao--faixa{
  background:var(--fundo-2);
  border-block:1px solid var(--risco);
}
/* Mesmo respiro que a `.secao--filete` recebe do bloco anterior: um bloco de
   conteúdo sem `.secao` chegava ao começo da faixa com folga zero. */
section:not(.secao):not(.hero):not(.numeros):has(+ .secao--faixa){
  padding-bottom:var(--secao);
}

/* o rótulo de seção é a legenda da prancha: pequena, espaçada, de acento */
.rotulo{
  font-size:var(--t-xs);
  letter-spacing:var(--rastro);
  text-transform:uppercase;
  color:var(--brasa-tinta);
  font-weight:500;
}
.rotulo--calmo{color:var(--tinta-3)}

/* ⚠️ O `max-width:20ch` SAIU em 30/08, item 19.0. Título é VARREDURA, não
   leitura contínua: a régua de 45 a 75 caracteres por linha vale para texto
   corrido, e eu a apliquei aqui — 20ch — sem que ela dissesse nada sobre
   título. O resultado é o que o Herasmo apontou, texto quebrando a 60% do
   miolo com faixa vazia à direita.

   Quem limita a medida de um título continua sendo a COLUNA: no `.secao__topo`
   ele vive numa faixa `1fr` ao lado do botão, e ali a quebra vem do lugar
   certo. Onde não há coluna, o título ocupa o miolo, como ele pediu. */
/* ⚠️ O TETO VOLTOU em 30/08, agora em 22ch, e a razão é dele:
   *"agora seu ajuste de enquadramento dos textos foi longe demais, fazendo com
   que títulos que haviam ficado bons em duas linhas ficassem ruins em uma linha
   somente"*.

   O 20ch de antes era meu e não tinha medida atrás. Este tem: 22ch é o valor
   MEDIDO em que "Uma indústria, não uma revenda." volta a quebrar depois da
   vírgula — 366 px na primeira linha e 438 na segunda. A 23ch ela cabe inteira
   numa linha de 814 px, que é o que ele reprovou.

   E é mais LARGO que os 20ch originais, de propósito: nenhum título ficou mais
   estreito do que já estava antes desta sessão.

   `text-wrap:balance` é o par obrigatório. Sem ele o navegador enche a primeira
   linha e deixa uma palavra órfã embaixo; com ele as duas linhas saem
   equilibradas e a quebra cai no ponto natural da frase. */
.titulo-secao{font-size:var(--t-xl);max-width:22ch;text-wrap:balance;margin-top:var(--e5)}
/* Bloco alinhado à esquerda vai de uma margem à outra: texto que começa na
   margem e para antes da direita lê como layout inacabado. `.medida` fica só
   para bloco CENTRALIZADO, onde a forma justifica limitar a linha. */
.medida{max-width:var(--medida);margin-inline:auto}
.apoio{color:var(--tinta-2);font-size:var(--t-md);line-height:1.62}

/* numeral de dado sempre tabular — coluna de código não pode dançar */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* O CAMPO DE TRAÇO SAIU POR COMPLETO — decisão de 20/08, executada no Bloco 5.

   O que existia aqui: uma peça do desenho técnico por seção, gigante, ancorada
   na margem, a 13% de opacidade, montada em JavaScript a partir dos SVGs de
   `/tracos/`. Saiu do hero da home no Bloco 2 e das três LPs no Bloco 3; aqui
   sai do resto — CSS, `campo.js`, o `<div id="campo">` do layout, o
   `@section('traco')` de treze telas e os três métodos do controller que
   escolhiam a peça.

   O fundo volta a ser o do protótipo aprovado: `--fundo-1` liso, sem ornamento.
   Conferido em 24/08 — `preview/index.html` não tem campo nenhum e declara
   `--bg:#0B0B0C`, que é exatamente o token que o staging já usa.

   O token `--traco` FICA: ele nunca foi só do campo. É a cor do desenho técnico
   na `.moldura` da ficha de produto, que continua no ar.                     */
.conteudo{position:relative;z-index:1}

/* ═══════════════════ BARRA ═══════════════════ */
.barra{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:var(--e6);
  /* 79 px de altura, medidos no protótipo aprovado. Com `--e4` a barra saía
     com 65 e a marca lia como pequena ao lado de dez itens de menu. */
  padding:var(--e6) var(--sangria);
  background:color-mix(in oklch,var(--fundo-1) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--risco);
}
.barra__marca{
  font-family:var(--display);
  font-size:var(--t-md);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.barra__marca em{font-style:normal;color:var(--tinta-3)}
/* O `<details>` é o menu inteiro: fila horizontal no desktop, gaveta no
   celular. `min-width:0` para ele poder encolher sem empurrar a marca. */
.menu{margin-left:auto;display:flex;align-items:center;min-width:0}
.menu__botao{display:none}           /* só existe quando vira gaveta */
.menu__painel{display:flex;gap:var(--e5);align-items:center}
/* No DOM o campo de busca vem primeiro, porque na gaveta ele precisa abrir em
   primeiro lugar. Na barra a ordem é a de sempre: destinos e, no fim, a busca. */
.menu__painel .barra-busca{order:1}
.menu__painel a{
  font-size:var(--t-sm);color:var(--tinta-2);
  padding-block:var(--e1);white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.menu__painel a:hover{color:var(--tinta-1);border-bottom-color:var(--brasa)}
.menu__painel a[aria-current=page]{color:var(--tinta-1);border-bottom-color:var(--brasa)}

/* ═══════════════════ BOTÃO ═══════════════════ */
.botao{
  display:inline-flex;align-items:center;gap:var(--e2);
  font:500 var(--t-sm)/1 var(--corpo);
  letter-spacing:.04em;
  padding:.72rem 1.15rem;
  border:1px solid var(--tinta-1);
  background:var(--tinta-1);color:var(--fundo-0);
  cursor:pointer;
  transition:background var(--rapido) var(--curva),color var(--rapido) var(--curva);
}
.botao:hover{background:transparent;color:var(--tinta-1)}
.botao--linha{background:transparent;color:var(--tinta-1);border-color:var(--risco-forte)}
.botao--linha:hover{border-color:var(--tinta-1);background:transparent}

/* o par de portas na barra: a segunda é a ação principal, em brasa */
.botao--barra{padding:.5rem .85rem;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.botao--barra:not(.botao--linha){background:var(--brasa);border-color:var(--brasa);color:#0B0B0C}
.botao--barra:not(.botao--linha):hover{background:transparent;color:var(--brasa)}

/* Botão CHEIO — no máximo um por tela. A brasa vale 8,69:1 contra texto escuro,
   medido no bloco COR, então o preenchimento passa em contraste sem truque.
   Precisa vir DEPOIS de `.botao`, que tem a mesma especificidade e ganhava por
   ordem: declarado antes, o botão do showroom saiu de contorno. */
.botao--brasa{
  background:var(--brasa);border-color:var(--brasa);color:var(--fundo-0);
  font-weight:500;
}
.botao--brasa:hover{background:var(--brasa-tinta);border-color:var(--brasa-tinta);color:var(--fundo-0)}

/* ═══════════════════ BUSCA POR CÓDIGO ═══════════════════
   O trabalho do lojista: achar o código com o cliente na frente.
   Campo largo, sem caixa arredondada, filete embaixo como formulário de obra. */
.busca{display:flex;align-items:stretch;gap:0;max-width:34rem}
.busca__campo{
  flex:1;min-width:0;
  font:var(--t-md)/1 var(--corpo);
  color:var(--tinta-1);
  background:transparent;
  border:0;border-bottom:1px solid var(--tinta-1);
  padding:.7rem .2rem;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.busca__campo::placeholder{color:var(--tinta-3);letter-spacing:0}
.busca__campo:focus{outline:0;border-bottom-color:var(--brasa-tinta)}
.busca__botao{
  border:0;border-bottom:1px solid var(--tinta-1);
  background:transparent;color:var(--tinta-1);
  font:500 var(--t-sm)/1 var(--corpo);
  letter-spacing:.08em;text-transform:uppercase;
  padding:0 var(--e4);cursor:pointer;
  transition:color var(--rapido) var(--curva);
}
.busca__botao:hover{color:var(--brasa-tinta)}

/* ═══════════════════ FICHA ═══════════════════
   Chave à esquerda em versalete, valor à direita alinhado.
   Só filete superior: sem célula fechada, como aprovado. */
/* o filete atravessa a linha inteira: dt e dd sem align-self, senão cada um
   fecha na própria altura e a régua aparece partida no meio */
/* ⚠️ O FILETE DO TOPO É DA FICHA, NÃO DA PRIMEIRA LINHA — item 19.9, 30/08.
   Ele era `border-top` de cada `dt`/`dd`, inclusive dos primeiros, e por isso
   toda ficha desenhava uma régua acima de si mesma. Onde a ficha ABRE a
   coluna, essa régua não separa nada: *"remover linha/divisor acima do 'onde'
   com endereço, não tem texto acima, não precisa de dividir acima"*.

   É a SEGUNDA vez que o mesmo traço é apontado — em 25/08 ele já tinha pegado
   a mesma linha na ficha de horário do contato, e o conserto de então foi um
   modificador que zerava a borda da primeira linha. Um conserto por ocorrência
   é o que este projeto chama de perda de padrão.

   Agora o traço de cima é do CONTÊINER e sai com uma classe; as linhas
   internas continuam sendo separação entre pares, que é o que elas sempre
   foram. Renderização idêntica onde nada muda. */
.ficha{
  display:grid;grid-template-columns:auto 1fr;margin:0;
  border-top:1px solid var(--risco);
}
.ficha dt,.ficha dd{
  margin:0;padding:.72rem 0;
  border-top:1px solid var(--risco);
  display:flex;align-items:center;
}
.ficha > dt:first-of-type,.ficha > dd:first-of-type{border-top:0}
/* a ficha que ABRE a coluna: não há o que separar acima dela */
.ficha--abre{border-top:0}
.ficha--abre > dt:first-of-type,.ficha--abre > dd:first-of-type{padding-top:0}
.ficha dt{
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-3);white-space:nowrap;padding-right:var(--e8);
}
.ficha dd{justify-content:flex-end;font-variant-numeric:tabular-nums;text-align:right}
.ficha dd.vazio{color:var(--tinta-3);font-style:italic;font-size:var(--t-sm)}
/* No horário de atendimento o título do bloco JÁ traz um filete, e a régua do
   topo da ficha desenhava uma segunda logo abaixo dele — duas linhas coladas
   onde os blocos vizinhos têm uma. Apontamento do Herasmo em 25/08, e ele é o
   mesmo do 19.9: agora quem resolve é o `.ficha--abre`, uma regra só.
   Os dois horários seguem em linhas separadas, por decisão dele: juntar
   "seg a qui" e "sex" numa frase só esconde a diferença. */

/* ═══════════════════ TABELA DE CÓDIGOS ═══════════════════ */
.tabela{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tabela th{
  text-align:left;font-weight:500;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
  padding:0 var(--e4) var(--e3) 0;
  border-bottom:1px solid var(--risco-forte);
  white-space:nowrap;
}
.tabela td{
  padding:.66rem var(--e4) .66rem 0;
  border-bottom:1px solid var(--risco);
  font-variant-numeric:tabular-nums;
}
.tabela th:last-child,.tabela td:last-child{text-align:right;padding-right:0}
.tabela td:first-child{font-weight:500;letter-spacing:.015em}
.tabela tbody tr{transition:background var(--rapido) var(--curva)}
.tabela tbody tr:hover{background:var(--fundo-2)}
.tabela td.vazio{color:var(--tinta-3)}

/* ═══════════════════ ÍNDICE DE LINHAS ═══════════════════
   O catálogo impresso abre com um índice. A home também.
   Linha inteira clicável, contagem tabular à direita, sem cartão. */
.indice{border-top:1px solid var(--risco-forte)}
.indice__item{
  display:grid;
  /* ordem · nome · guia pontilhada · contagem — quatro colunas, quatro filhos */
  grid-template-columns:auto auto minmax(var(--e8),1fr) auto;
  align-items:baseline;
  gap:var(--e4);
  padding:var(--e4) 0;
  border-bottom:1px solid var(--risco);
  transition:padding-left var(--medio) var(--curva);
}
.indice__item:hover{padding-left:var(--e3)}
.indice__nome{
  font-family:var(--display);
  font-size:var(--t-lg);
  letter-spacing:-.018em;
}
.indice__item:hover .indice__nome{color:var(--brasa-tinta)}
.indice__ordem{
  font-size:var(--t-xs);color:var(--tinta-3);
  font-variant-numeric:tabular-nums;letter-spacing:.1em;
  align-self:center;
}
/* pontilhado de índice de livro, entre o nome e a contagem */
.indice__guia{
  border-bottom:1px dotted var(--risco-forte);
  transform:translateY(-.32em);
  min-width:var(--e8);
}
.indice__conta{
  font-size:var(--t-sm);color:var(--tinta-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.indice__conta b{font-weight:500;color:var(--tinta-1)}

@media(max-width:700px){
  .indice__item{grid-template-columns:auto 1fr;row-gap:var(--e1)}
  .indice__guia{display:none}
  .indice__conta{grid-column:2;text-align:left}
}

/* ═══════════════════ AMOSTRA DE ACABAMENTO ═══════════════════
   28 acabamentos reais, hex do catálogo. Quadrado, não bolinha:
   é amostra de pintura, não etiqueta de cor. */
.acabamentos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:var(--e6) var(--e4);
}
.acab{display:block}
/* block, não inline: span inline ignora aspect-ratio e a amostra vira um risco */
.acab__cor{
  display:block;
  aspect-ratio:1;width:100%;
  border:1px solid var(--risco-forte);
  transition:transform var(--medio) var(--curva);
}
.acab:hover .acab__cor{transform:translateY(-3px)}
.acab__cod{
  display:block;margin-top:var(--e2);
  font-size:var(--t-xs);letter-spacing:.1em;
  color:var(--tinta-3);font-variant-numeric:tabular-nums;
}
.acab__nome{display:block;font-size:var(--t-sm);color:var(--tinta-1);line-height:1.3}

/* ═══════════════════ MOLDURA DO DESENHO ═══════════════════ */
.moldura{
  border:1px solid var(--risco);
  background:color-mix(in oklch,var(--fundo-2) 55%,transparent);
  display:grid;place-items:center;
  padding:var(--e8) var(--e6);
  margin:0;
}
/* o SVG governa a própria altura pela proporção: fixar altura letterboxava o
   desenho largo e ele ficava perdido no meio do quadro */
.moldura svg{
  width:100%;height:auto;
  max-height:clamp(260px,36vw,460px);
  color:var(--traco);
}
/* A espessura já vem certa do arquivo: os 187 SVGs foram reescalados uma vez,
   com o contorno em 1.0 px de tela e a cota proporcionalmente menor. Antes
   vinham com 0.10–0.45 E `vector-effect:non-scaling-stroke`, o que dava 0,3 px
   — sub-pixel — e o desenho sumia. Corrigir no arquivo, e não aqui, faz o
   traço aparecer também dentro de `<img>`, onde o CSS não alcança. */
.moldura svg path{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}
.moldura figcaption{
  margin-top:var(--e5);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);text-align:center;
}

/* ═══════════════════ ESTADO VAZIO ═══════════════════
   Campo sem dado confirmado fica vazio e vira pedido ao cliente.
   O vazio explica o que falta — não finge que não existe. */
.vazio-bloco{
  border:1px dashed var(--risco-forte);
  padding:var(--e8);
  color:var(--tinta-2);
  font-size:var(--t-sm);
  max-width:52ch;
}
.vazio-bloco strong{display:block;color:var(--tinta-1);font-weight:500;margin-bottom:var(--e2)}

/* ═══════════════════ RODAPÉ ═══════════════════ */
.rodape{
  border-top:1px solid var(--risco-forte);
  background:var(--fundo-2);
  padding-block:var(--e12) var(--e8);
  font-size:var(--t-sm);
  color:var(--tinta-1);
}
.rodape a:hover{color:var(--brasa-tinta)}
/* Duas partes: marca e frase à esquerda, índice à direita. Quatro colunas
   iguais de links davam 470 px de rodapé e nenhuma hierarquia — o protótipo
   fecha em 269 px. A assinatura da casa vem primeiro, não como nota de fim. */
.rodape__topo{
  display:grid;gap:var(--e10) var(--e16);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:64rem){
  .rodape__topo{grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:var(--e20)}
}
.rodape__marca .marca{width:150px;height:auto;display:block;opacity:.92}
.rodape__frase{
  margin-top:var(--e5);max-width:34ch;
  font-size:var(--t-sm);line-height:1.65;color:var(--tinta-3);
}
.rodape__grade{
  display:grid;gap:var(--e8) var(--e6);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.rodape h4{
  font-family:var(--corpo);font-size:var(--t-xs);font-weight:500;
  letter-spacing:var(--rastro);text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:var(--e4);
}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e2)}

/* ── As colunas do rodapé viram sanfona NO CELULAR ────────────────────────
   Medido em 390 px: o rodapé ocupava 949 px numa tela de 844, e a causa é a
   grade de duas colunas em que a fileira é ditada pela mais alta — a coluna
   Catálogo tem nove linhas, e a Especificação, com quatro, esticava para os
   mesmos 279 px. O Projeto Especial, com um destino, ocupava 250.

   `<details>` e não JS puro: sem script o rodapé continua aberto, e o índice
   inteiro segue no HTML para o rastreador. É o desenho que o filtro do catálogo
   e a gaveta do menu já usam — nasce `open` na view e o JS fecha só no celular.
   Botão que não funciona é pior que botão que não existe. */
.rodape__col > summary{list-style:none;cursor:pointer}
.rodape__col > summary::-webkit-details-marker{display:none}
.rodape__col > summary h4{display:inline}

@media(max-width:63.99rem){
  .rodape__col > summary{
    position:relative;display:flex;align-items:center;
    min-height:44px;               /* o piso de dedo, de 26/08 */
    padding-right:var(--e6);
  }
  /* o sinal de aberto/fechado, desenhado e não tipográfico */
  .rodape__col > summary::after{
    content:"";position:absolute;right:2px;top:50%;
    width:8px;height:8px;margin-top:-5px;
    border-right:1px solid var(--tinta-3);border-bottom:1px solid var(--tinta-3);
    transform:rotate(45deg);transition:transform var(--rapido) var(--curva);
  }
  .rodape__col[open] > summary::after{transform:rotate(-135deg);margin-top:-2px}
  .rodape__col > ul{padding-bottom:var(--e5)}
  /* Fechadas, as colunas deixam de esticar na fileira: cada uma passa a ocupar
     a própria altura. */
  .rodape__grade{align-items:start}
}

@media(min-width:64rem){
  /* No desktop a coluna é sempre aberta, e o título não é um controle. */
  .rodape__col > summary{cursor:default;pointer-events:none}
  .rodape ul{gap:var(--e1)}
}
/* J2 · o rodapé estava em 438 px contra os 269 do protótipo, e a diferença é de
   CONTEÚDO: 25 destinos aqui contra 13 lá, porque em 26/08 ele virou o índice do
   site. O que dá para ganhar sem perder destino é o ritmo, e ele está no bloco
   acima: passo de 29 px para 25, só no desktop. */
.rodape__base{
  margin-top:var(--e10);padding-top:var(--e5);
  border-top:1px solid var(--risco);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e4);
  font-size:var(--t-xs);color:var(--tinta-3);
}

/* A coluna do Projeto Especial: UM destino, e ele parece um destino.
   Apontamento do Herasmo em 25/08 — três chamadas com a mesma aparência, duas
   levando a lugares diferentes e uma que era só texto. Peso e cor separam o
   que é link do que é promessa. */
.rodape__especial .rodape__cta{
  display:inline-block;font-size:var(--t-sm);font-weight:500;
  color:var(--brasa);text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--brasa) 45%,transparent);
  padding-bottom:.12em;transition:border-color var(--rapido) var(--curva);
}
.rodape__especial .rodape__cta:hover{border-bottom-color:var(--brasa)}
.rodape__apoio{
  margin-top:var(--e3);font-size:var(--t-xs);line-height:1.7;color:var(--tinta-3);
}

/* A assinatura da agência, encostada à direita da base do rodapé. O ícone é
   inline para herdar a cor do texto — o rodapé tem tema claro e escuro. */
.rodape__agencia{
  margin-left:auto;display:inline-flex;align-items:center;gap:var(--e2);
  color:var(--tinta-3);text-decoration:none;
  transition:color var(--rapido) var(--curva);
}
.rodape__agencia svg{width:.95rem;height:.95rem;display:block}
.rodape__agencia:hover{color:var(--tinta-1)}
.rodape__agencia:focus-visible{outline:2px solid var(--brasa);outline-offset:4px}
@media(max-width:48rem){
  .rodape__agencia{margin-left:0}
}

/* ═══════════════════ REVELAÇÃO ═══════════════════
   Movimento com causa: revela a relação entre a peça e sua cota.
   Sem JS, nada some — o conteúdo nasce visível. */
/* O seletor precisa do `.js`: sem ele, `opacity:0` valia SEMPRE, e a página
   inteira ficava em branco se o JS não carregasse. O comentário acima já
   prometia "sem JS, nada some" — a regra é que não cumpria. Corrigido 20/08. */
.js .rev{opacity:0;transform:translateY(14px)}
.js .rev.dentro{
  opacity:1;transform:none;
  transition:opacity var(--lento) var(--curva),transform var(--lento) var(--curva);
}

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

/* acessível para leitor de tela, ausente para o olho */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — a estrutura é a do protótipo aprovado com a cliente
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero ────────────────────────────────────────────────────────────────
   Foto de ambiente em tela cheia com o texto por cima, como no protótipo
   aprovado. O fundo chapado saiu em 21/08: a foto é uma obra creditada, e é
   ela que diz o que a marca faz antes de qualquer palavra.

   Os destaques da Ana moram DENTRO do hero: coluna da direita no desktop,
   empilhada abaixo do texto no celular. */
.hero{
  position:relative;isolation:isolate;
  min-height:min(88vh,820px);
  display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--risco);
  background:var(--fundo-1);
}
.hero__foto{position:absolute;inset:0;display:block}
.hero__foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Duas rampas, como no protótipo: uma de baixo para cima, que segura o texto e
   costura a foto na barra de números; outra da esquerda, que abre contraste
   para o título. As duas somadas apagavam a obra — a Usina vende luz, e a luz
   acesa da foto é o argumento. Cada rampa só escurece onde há texto por cima,
   e o meio da imagem fica quase limpo. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--fundo-0) 46%,transparent) 0%,
      transparent 26%,
      transparent 52%,
      color-mix(in srgb,var(--fundo-0) 60%,transparent) 88%,
      var(--fundo-1) 100%),
    linear-gradient(90deg,
      color-mix(in srgb,var(--fundo-0) 94%,transparent) 0%,
      color-mix(in srgb,var(--fundo-0) 90%,transparent) 34%,
      color-mix(in srgb,var(--fundo-0) 74%,transparent) 52%,
      color-mix(in srgb,var(--fundo-0) 16%,transparent) 64%,
      transparent 70%);
}

/* No tema claro o véu é claro e o texto é escuro: medido em 21/08, o rótulo
   do hero ficava em 4,13:1 sobre a foto, abaixo dos 4,5 que texto pequeno
   exige. A rampa da coluna do texto fecha um passo a mais só aqui. */
:root[data-tema=claro] .hero::after{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--fundo-0) 46%,transparent) 0%,
      transparent 26%,
      transparent 52%,
      color-mix(in srgb,var(--fundo-0) 60%,transparent) 88%,
      var(--fundo-1) 100%),
    linear-gradient(90deg,
      color-mix(in srgb,var(--fundo-0) 95%,transparent) 0%,
      color-mix(in srgb,var(--fundo-0) 92%,transparent) 34%,
      color-mix(in srgb,var(--fundo-0) 78%,transparent) 52%,
      color-mix(in srgb,var(--fundo-0) 20%,transparent) 64%,
      transparent 70%);
}

.hero__base{
  position:relative;z-index:2;width:100%;
  display:grid;gap:var(--e12) var(--e16);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
  padding-block:var(--e24) var(--e12);
}
@media(min-width:64rem){
  .hero__base{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
}
.hero__texto{min-width:0}

/* ── o hero no celular: a foto ganha proporção própria ─────────────────────
   Medido em 26/08, em iPhone 13: o hero empilhado ficava com **1.067 px de
   altura** — 80 de recuo, 218 de texto, 452 do painel de destaques, 74 do
   crédito e o resto de folga — e a foto, que é `cover` sobre tudo isso,
   entrava numa caixa de proporção **0,37**. Uma foto 3:2 recortada numa tira
   de 1:2,7 vira um pedaço de armário sem assunto: foi por isso que ela leu
   como "sumiu do fundo".

   A correção não é trocar a foto nem apertar o texto: é a foto ocupar só o
   ALTO do hero, com proporção de retrato honesta, e o painel de destaques
   descer para o fundo chapado logo abaixo. Os destaques continuam DENTRO do
   hero, como a decisão de 21/08 pede — mudam de camada, não de seção.

   O corte é 64rem porque é onde o próprio hero já deixa de ter duas colunas.
   Um lugar só decide onde ele empilha. */

/* O título desceu de --t-3xl para --t-2xl em 25/08. Em 1440 o 3xl dá 94 px e
   a frase quebrava em TRÊS linhas, ocupando quase metade da altura do hero e
   empurrando a obra para fora de vista. O protótipo aprovado abre em 64 px e
   duas linhas. Para quem especifica, contenção lê como confiança: a foto é o
   argumento, o título é a legenda dela. */
.hero__titulo{font-size:var(--t-2xl);margin-top:var(--e4);letter-spacing:-.026em;line-height:1}
.hero__linha{margin-top:var(--e6);max-width:44ch;color:var(--tinta-2);font-size:var(--t-md)}
.busca--hero{margin-top:var(--e10)}

/* crédito da obra — embaixo e à direita, como no protótipo. É item da grade
   do hero, não caixa posicionada: assim ele fecha na mesma margem do texto em
   qualquer largura de tela, sem conta de viewport. */
.hero__credito{
  grid-column:1/-1;
  display:grid;gap:var(--e1);justify-items:end;text-align:right;
  padding-top:var(--e6);
  color:var(--tinta-2);
}
.hero__credito-rotulo{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--brasa-tinta);
}
.hero__credito-nome{font-family:var(--display);font-size:var(--t-md);line-height:1.2;color:var(--tinta-1)}
.hero__credito-linha{font-size:var(--t-xs);color:var(--tinta-3);line-height:1.4}
.hero__credito:hover .hero__credito-nome{color:var(--brasa)}

/* ── destaques dentro do hero ────────────────────────────────────────────
   Escolha da Ana em 20/08: três lançamentos e uma coleção assinada. Em vez
   de virarem seção solta abaixo, entram aqui como lista de peça — nome,
   tipologia e contagem, que é o que o especificador usa para decidir se
   clica. */
/* O rail fica num painel: à direita a foto tem as luminárias ACESAS, que é
   justamente o pedaço mais claro da imagem, e nome de peça em tinta clara
   sumia em cima delas. Painel chapado com filete — sem raio e sem sombra,
   como o resto da prancha. */
/* 25/08: a caixa chapada com filete lia como widget de loja colado na foto. O
   véu passa a ser GRADIENTE — quase limpo em cima, fechado embaixo, onde mora
   o texto — e o filete some. A legibilidade continua vindo de véu, que é o que
   a medição de 21/08 exigiu naquele lado da imagem; o que sai é a moldura, não
   o contraste. */
.hero__destaques{
  min-width:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--fundo-0) 30%,transparent) 0%,
    color-mix(in srgb,var(--fundo-0) 72%,transparent) 34%,
    color-mix(in srgb,var(--fundo-0) 88%,transparent) 100%);
  backdrop-filter:blur(6px);
  border:0;
  border-top:1px solid var(--risco-forte);
  padding:var(--e5) var(--e5) var(--e6);
  align-self:end;
}
/* rótulo é TEXTO: usa `brasa-tinta`, não `brasa` — no tema claro a brasa dá
   1,90:1 e some, que é a razão de a variável separada existir */
.hero__destaques-rotulo{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--brasa-tinta);
  padding-bottom:var(--e3);margin-bottom:var(--e3);
  border-bottom:1px solid var(--risco-forte);
}
.hero__destaques-rotulo + .hero__lista,
.hero__destaques-rotulo + .hero__item{margin-top:0}
.hero__destaques .hero__destaques-rotulo:not(:first-child){margin-top:var(--e6)}
.hero__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e1)}
/* chip de 56px, não 72: o painel é o que cobre a foto, e cada pixel a menos
   de altura devolve a peça acesa da obra atrás dele */
.hero__item{
  display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:var(--e4);align-items:center;
  padding:var(--e2) 0;
  color:var(--tinta-2);
}
.hero__item + .hero__item,
.hero__lista li + li .hero__item{border-top:1px solid var(--risco)}
.hero__item-foto{display:block;width:48px}
/* a caixa de imagem é a mesma de todo lugar; aqui ela entra em escala de chip */
/* `contain`, não `cover`: em 72px o corte decapitava a peça — a Bello virava
   um pedaço de haste. No chip a peça aparece inteira, no quadro branco de
   sempre. */
.hero__item-foto .peca__desenho{
  height:56px;background:#fff;border-color:transparent;padding:5px;
}
.hero__item-foto .peca__desenho img{width:100%;height:100%;object-fit:contain}
.hero__item-texto{display:grid;gap:var(--e1);min-width:0}
.hero__item-nome{
  font-family:var(--display);font-weight:400;font-size:var(--t-md);
  letter-spacing:-.015em;line-height:1.15;color:var(--tinta-1);
}
.hero__item-meta{font-size:var(--t-xs);color:var(--tinta-3);line-height:1.35}
.hero__item:hover .hero__item-nome{color:var(--brasa)}

@media(max-width:64rem){
  .hero{min-height:min(92vh,880px)}
  /* Em coluna única o texto atravessa a largura inteira, e a rampa lateral
     — que só escurece a esquerda — deixava metade das palavras em cima da
     parte clara da foto. Aqui o véu é uniforme e a rampa é só vertical. */
  .hero::after{
    background:
      linear-gradient(180deg,
        color-mix(in srgb,var(--fundo-0) 62%,transparent) 0%,
        color-mix(in srgb,var(--fundo-0) 46%,transparent) 26%,
        color-mix(in srgb,var(--fundo-0) 72%,transparent) 64%,
        color-mix(in srgb,var(--fundo-0) 92%,transparent) 90%,
        var(--fundo-1) 100%),
      /* O véu uniforme do celular, medido por máscara de glifo em 28/08 com
         as animações travadas: a 40% o rótulo dourado fica em 6,2:1 e a linha
         de escopo em 5,1:1, acima dos 4,5 que texto pequeno exige. Em 390 px o
         texto atravessa a largura inteira e a rampa lateral não alcança — mas
         não precisa de véu pesado: a foto aqui já é a faixa de cima, e o
         chapado começa logo abaixo. */
      linear-gradient(color-mix(in srgb,var(--fundo-0) 40%,transparent) 0 100%);
  }
  /* em coluna única o crédito acompanha o alinhamento do texto */
  .hero__credito{justify-items:start;text-align:left;padding-top:var(--e8)}
  .hero__base{padding-block:var(--e20) var(--e10)}

  /* A FOTO GANHA PROPORÇÃO PRÓPRIA — 26/08.
     Medido em iPhone 13: empilhado, o hero ia a 1.067 px (80 de recuo, 218 de
     texto, 452 do painel de destaques, 74 do crédito) e a foto, que é `cover`
     sobre tudo isso, caía numa caixa de proporção 0,37. Uma foto 3:2 recortada
     numa tira de 1:2,7 vira um pedaço de armário sem assunto: foi por isso que
     ela leu como "sumiu do fundo".

     A foto passa a ocupar só o ALTO, e o painel de destaques desce para o fundo
     chapado logo abaixo. Os destaques continuam DENTRO do hero, como a decisão
     de 21/08 pede — mudam de camada, não de seção. Depois: proporção 0,90. */
  .hero{min-height:0}
  .hero__foto,
  .hero::after{bottom:auto;height:clamp(27rem,62vh,36rem)}
  /* ── A PEÇA, NÃO A GELADEIRA ──────────────────────────────────────────
     A foto do hero é 3:2 e a caixa do celular é quase 3:4. Com `cover` e o
     enquadramento no centro, os 390 px visíveis mostram de 25% a 75% da
     largura da foto — e os pendentes, que são o assunto, vivem de 69% a 100%.
     Ficava só o armário e a geladeira: a Usina vende luz, e a luz estava
     cortada fora do quadro. Apontamento do Herasmo em 28/08.

     Alinhado à direita, os mesmos 390 px mostram de 50% a 100% e o grupo de
     anéis entra inteiro. Vale só aqui: no desktop a foto cabe deitada e o
     centro está certo. */
  .hero__foto img{object-position:85% center}
  /* no DOM o crédito vem depois do painel; sobre a foto ele vem antes */
  .hero__texto{order:1}
  .hero__credito{order:2}
  .hero__destaques{order:3;margin-top:var(--e6)}

  /* Com a foto aparecendo de verdade, a linha de apoio caiu de 4,53:1 (medido
     em 21/08) para 4,12 — abaixo dos 4,5 que texto pequeno exige. Um degrau de
     tinta resolve sem escurecer a obra, que é o argumento do hero. */
  .hero__linha{color:var(--tinta-1)}
}

/* peça aplicada na obra, sob o crédito do projeto */
.peca__aplicada{
  margin-top:var(--e2);font-size:var(--t-xs);color:var(--tinta-3);line-height:1.45;
}
/* Obras em DUAS colunas no desktop, não quatro de 230 px. A foto de uma obra
   inteira precisa de área para ler; em 230 px o ambiente vira miniatura e a
   seção passa a parecer vitrine de e-commerce, que foi o apontamento de 25/08.
   Com quatro obras, duas colunas dão duas fileiras cheias. */

/* ── obra creditada ──────────────────────────────────────────────────────
   O crédito vem ACIMA da foto. Nome embaixo de imagem é a anatomia do card de
   loja; acima, lê como prancha creditada — quem assinou, e a foto como prova. */
/* ── OBRA: a foto com o crédito POR CIMA ─────────────────────────────────
   Padrão do protótipo aprovado, medido nele em 25/08:
   `linear-gradient(transparent 45%, rgba(11,11,12,.9) 100%)`, texto claro,
   foto em retrato, legenda encostada na base.

   Substitui duas montagens que o Herasmo reprovou no mesmo dia: o crédito
   ACIMA da foto (home, decisão da manhã, revista à noite) e o card 4/3 com o
   texto embaixo (listagem de projetos) — "imagens centralizadas em quadros
   maiores na horizontal, não faz sentido algum (…) informações abaixo da
   imagem grudadas nas margens".

   O degradê é escuro nos DOIS temas porque ele mora sobre a FOTO, não sobre o
   fundo da página. E ele fica no card: a imagem aberta em zoom não o leva. */
.obra{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:5/7;
  background:var(--fundo-2);border:1px solid var(--risco);
  text-decoration:none;color:inherit;
  transition:border-color var(--medio) var(--curva);
}
.obra:hover{border-color:var(--risco-forte)}
.obra picture,.obra img,.obra__vazio{
  width:100%;height:100%;display:block;object-fit:cover;
}
.obra img{transition:transform var(--lento) var(--curva)}
.obra:hover img{transform:scale(1.03)}
/* ── A LEGENDA SOBRE A FOTO — o J6, e agora é UMA regra ────────────────────
   Nasceu em `/projetos` como `.obra__ov` (item 8.3, aprovado em 25/08) e o
   Herasmo pediu o mesmo padrão em Projetos Especiais (item 19.14, 30/08):
   *"texto acima da imagem, com degradê de baixo para cima"*.

   Os dois seletores dividem a MESMA declaração de propósito. Três cópias do
   mesmo degradê em três telas é o que este projeto chama de perda de padrão —
   e a terceira sempre acorda diferente. */
.obra__ov,
.legenda-ov{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--e1);
  padding:var(--e5);
  background:linear-gradient(to top,rgba(11,11,12,.9) 0%,rgba(11,11,12,.55) 28%,transparent 55%);
  color:#EDEDEA;
  pointer-events:none;   /* o card inteiro é o alvo; a tarja não intercepta */
}
.obra__autor,
.legenda-ov__nome{
  font-family:var(--display);font-size:clamp(1.05rem,1.35vw,1.35rem);
  line-height:1.15;letter-spacing:-.015em;text-wrap:balance;
  margin:0;font-weight:400;
}
.obra__meta{font-size:var(--t-xs);letter-spacing:.04em;opacity:.82}
@media(prefers-reduced-motion:reduce){
  .obra img{transition:none}
  .obra:hover img{transform:none}
}

/* logo oficial — PNG branco, enquanto o SVG não chega da Usina.

   MEDIDO EM 24/08: o arquivo que veio da Usina é 4000x2250 (16:9) e o lockup
   ocupa 3550x1682 dentro dele — 25% da altura da caixa é ar transparente. Com
   `height` na caixa, a marca desenhada saía com 24 px em cima de uma caixa de
   32, e por isso lia como pequena demais ao lado do menu.

   `logo-usina-lockup.png` é o MESMO arquivo cortado na caixa do desenho, com
   2% de respiro. A razão passou de 1,778 (caixa) para 2,024 (marca), e agora a
   altura declarada é a altura que aparece. Nome de arquivo novo de propósito:
   trocar o conteúdo mantendo o nome deixaria o navegador servir o antigo. */
/* `flex:0 0 auto` nos DOIS: medido em 26/08 (P9), numa barra em flex com o
   menu em `nowrap` e `margin-left:auto`, quem cede quando falta largura é a
   MARCA, não o menu. Ela encolhia, a imagem era comprimida na horizontal e,
   passado o limite, a largura chegava a zero: entre 821 e 1024 px a marca
   simplesmente NÃO aparecia, e ali ela é o único caminho de volta para a home.
   Em 1100 px saía 29x32 e em 390 px saía 19x28, contra a razão 2,02 do arquivo.
   Rota em 200, HTML com a `<img>`, console limpo: só medir a razão renderizada
   contra a do arquivo pega. As folgas que fazem a barra caber sem a marca ceder
   estão no bloco "a barra estreita", mais abaixo, em um lugar só. */
.barra__marca{display:flex;align-items:center;flex:0 0 auto}
.barra__marca .marca{
  flex:0 0 auto;
  /* O protótipo tem 62x30 e o Herasmo pediu MAIOR que isso: a marca é a única
     coisa da barra que não é texto de menu, e em 30 px ela sumia ao lado de
     nove itens.

     ⚠️ Item 1.2 do bloco 1, AUTORIZADO em 30/08: cresce de novo, de 38 para 46
     px no desktop. Isso resolve a pendência 4.10 do acumulativo na direção
     OPOSTA à que ela propunha — ela queria voltar aos 61x30 aprovados em 24/08,
     e o pedido de 28/08 é o contrário. As duas não cabiam; ele escolheu.

     A barra acompanha, porque a altura dela é padding + marca: 48 + 46 = 94 px
     no desktop, contra os 87 de antes. */
  height:clamp(30px,3.4vw,46px);width:auto;display:block;
}
/* ── o ícone de casa, primeiro destino do menu (item 1.2) ──────────────────
   No desktop sai só o traço; a palavra "Início" fica para a gaveta, onde a
   lista é de texto e o alvo é de 44 px. O `<span>` NÃO some com `display:none`:
   ele continua no fluxo do leitor de tela, que é quem lê o nome do destino —
   um link cujo conteúdo é só um `<svg aria-hidden>` é um link sem nome. */
.menu__inicio{display:inline-flex;align-items:center;gap:var(--e2);flex:0 0 auto}
.menu__inicio svg{width:17px;height:17px;flex:0 0 17px;display:block}
.menu__inicio-nome{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* A marca é VETOR e pinta com `currentColor` desde 27/08, então a cor vem do
   token de tinta e vale nos DOIS lugares onde ela aparece. Antes era PNG branco
   vazado com `filter:invert(1)` na barra — e o RODAPÉ não tinha o remendo, então
   no tema claro a marca de lá ficava branca sobre papel e sumia. */
.marca{color:var(--tinta);fill:currentColor}

/* ── barra de números ────────────────────────────────────────────────── */
.numeros{border-bottom:1px solid var(--risco);background:var(--fundo-2)}
/* 01/09, PDF da Ana: a faixa dos PILARES herdava a roupa da faixa de números —
   fundo sem respiro e um risco colado na base ("divisor grudado"). Com os
   pilares dentro, a faixa ganha padding interno, perde o risco de baixo e o
   filete individual de cada cartão sai (o fundo já separa). */
.numeros:has(.pilares){border-bottom:0;padding-block:var(--e10)}
.numeros .pilares{margin-top:0}
.numeros .pilar{border-top:0;padding-top:0}
.numeros__grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
/* Conteúdo CENTRALIZADO na célula (pedido do Herasmo, 25/08): alinhado à
   esquerda com filete à esquerda, cada número flutuava colado no próprio
   divisor e a faixa lia como tabela. Centralizado, o filete vira coluna de
   prancha e o número ganha o ar dos dois lados. */
.numeros__grade>div{
  padding:var(--e10) var(--e5);
  display:grid;gap:var(--e2);align-content:center;justify-items:center;
  text-align:center;
}
.numeros__grade>div+div{border-left:1px solid var(--risco)}
/* O algarismo vai na SERIFA e o rótulo na grotesca. É o par da marca dito no
   lugar onde ele tem mais efeito: o dado é o herói da faixa, e a Zodiak dá a
   ele o peso editorial que a Archivo em 38 px não dá. */
.numeros b{
  font-family:var(--display);font-size:var(--t-xl);font-weight:400;
  letter-spacing:-.03em;line-height:1;
}
.numeros b i{font-style:normal;font-size:.5em;margin-left:.1em;color:var(--tinta-3)}
.numeros span{font-size:var(--t-xs);color:var(--tinta-3);letter-spacing:.06em}

/* ── cabeçalho de seção com ação à direita ───────────────────────────── */
.secao__topo{
  display:grid;gap:var(--e6);align-items:end;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:var(--e12);
}
@media(min-width:900px){
  .secao__topo{grid-template-columns:minmax(0,1fr) auto;gap:var(--e10)}
}
/* `--largo` era o escape para quem precisava de mais que os 20ch da base. Sem
   a base, ele passa a ser um ESTREITAMENTO deliberado: fica para o título que
   deve quebrar antes por composição, e não por régua de leitura. */
.titulo-secao--largo{max-width:26ch}

/* ── cards de linha ──────────────────────────────────────────────────── */
/* filete no CARD, não no vão da grade: com `gap:1px` sobre um fundo colorido,
   a última fileira incompleta virava um retângulo claro no meio do nada */
/* Com Síntese, Acessório e Técnico fora, a home mostra CINCO linhas — as
   mesmas do protótipo. A coluna mínima cai para 13rem para que as cinco
   caibam numa fileira só: em 248px a quinta descia sozinha e ficava um card
   órfão ocupando um quarto da largura. */
.linhas-grade{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  border-top:1px solid var(--risco);
  border-left:1px solid var(--risco);
}
/* Grade ASSIMÉTRICA a partir de 68rem: o Decorativo tem 214 das 276 famílias da
   vitrine, e cinco colunas iguais mentem sobre a proporção do catálogo. A
   primeira coluna vale 1,7 das outras. Abaixo disso a grade volta a ser fluida,
   porque em coluna estreita a assimetria só espreme. */
@media(min-width:68rem){
  .linhas-grade{grid-template-columns:1.7fr repeat(4,1fr)}
}

/* A banda é fotográfica. A foto é a página de abertura da linha no V6 — a
   mesma que já servia o bloco "Sobre a linha" da ficha desde 24/08 e que na
   home nunca tinha sido usada. */
.linha-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:clamp(15rem,23vw,19rem);
  padding:var(--e6);
  border-right:1px solid var(--risco);
  border-bottom:1px solid var(--risco);
}
.linha-card__foto{position:absolute;inset:0;z-index:-2;display:block}
.linha-card__foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* A foto entra rebaixada e ACENDE no hover. A marca vende luz: fazer a
     imagem clarear ao apontar é a função do produto virando a interação, e
     não efeito genérico de card. */
  filter:brightness(.62) saturate(.9);
  transform:scale(1.02);
  transition:filter var(--lento) var(--curva),transform var(--lento) var(--curva);
}
/* Véu que segura o texto: forte embaixo, quase limpo em cima, para a foto não
   virar retângulo cinza. */
.linha-card::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--fundo-0) 30%,transparent) 0%,
    color-mix(in srgb,var(--fundo-0) 12%,transparent) 38%,
    color-mix(in srgb,var(--fundo-0) 78%,transparent) 82%,
    color-mix(in srgb,var(--fundo-0) 92%,transparent) 100%);
  transition:opacity var(--medio) var(--curva);
}
.linha-card:hover .linha-card__foto img,
.linha-card:focus-visible .linha-card__foto img{
  filter:brightness(.92) saturate(1);
  transform:scale(1.05);
}
.linha-card:hover::after,
.linha-card:focus-visible::after{opacity:.82}
/* Sem foto o card continua legível: volta a ser a caixa chapada de antes. */
.linha-card:not(:has(.linha-card__foto)){background:var(--fundo-1)}
.linha-card:not(:has(.linha-card__foto)):hover{background:var(--fundo-2)}
.linha-card__corpo{position:relative;display:block;width:100%}
.linha-card__conta{
  display:block;font-size:var(--t-xs);letter-spacing:.1em;color:var(--brasa-tinta);
}
/* MEDIDO em 24/08: com `--t-lg` (38,4 px em 1440) a palavra "Decorativo"
   ocupa 202 px numa caixa de 170 e vaza do card. O corte só aparece de 1280 px
   para cima, porque abaixo disso a grade dá cards mais largos. */
.linha-card__nome{font-size:clamp(1.35rem,2.1vw,2rem);margin-top:var(--e2);line-height:1.05}
/* A descrição é travada em DUAS linhas: sem isso o card do Decorativo tinha 2
   e o da Externa 3, e como a banda é alinhada pela base os nomes paravam em
   alturas diferentes. Fileira de nomes desalinhada lê como erro, não como
   assimetria. */
.linha-card__desc{
  margin-top:var(--e3);font-size:var(--t-sm);color:var(--tinta-1);line-height:1.55;
  max-width:34ch;opacity:.86;
  /* Reserva de TRÊS linhas, sem corte. O clamp em 2 alinhava os nomes mas
     entregava "para áreas ..." e "controlado para...", e reticência no meio de
     uma frase de três palavras lê como defeito. O texto é da própria Usina, da
     p.5 do V6: quem cede espaço é a caixa, não a frase. */
  min-height:calc(3 * 1.55em);
}

/* Quem pede menos movimento recebe a foto já acesa, sem transição. */
@media(prefers-reduced-motion:reduce){
  .linha-card__foto img{filter:brightness(.78);transform:none;transition:none}
  .linha-card:hover .linha-card__foto img{transform:none}
  .linha-card::after{transition:none}
}

/* ── showroom ────────────────────────────────────────────────────────── */
.showroom{
  margin-top:var(--e12);
  display:grid;gap:var(--e10) var(--e16);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:900px){
  .showroom{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.galeria{
  margin-top:var(--e12);
  display:grid;gap:var(--e4);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
/* A PROPORÇÃO é do contexto, não da imagem (ver `--ambiente`): aqui são quatro
   fotos do showroom lado a lado, e o acervo é 4000×2252. Quadrado, elas
   perderiam metade da largura da sala; 3:2 corta pouco e a fileira fica baixa
   o bastante para o bloco de texto ao lado continuar mandando na seção. */
.galeria .peca__desenho{aspect-ratio:3/2}

/* O pedido do Projeto Especial. O formulário é largo aqui — a página tem uma
   coluna só, ao contrário da `/contato`, que tem duas. */
/* O topo do showroom É a hero, com as mesmas rampas — só a altura muda: a
   home abre em 88vh porque o hero dela carrega a busca por código; aqui o
   bloco é texto e um botão. */
.hero--showroom{min-height:min(74vh,700px)}

/* O pedido do Projeto Especial em duas colunas, na mesma proporção da
   `/contato`: o que resolve sem escrever à esquerda, o formulário à direita.
   O filete entre as colunas separa sem pesar. */
.pedido-duplo{
  margin-top:var(--e10);
  display:grid;gap:var(--e12) var(--e16);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:62rem){
  .pedido-duplo{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
  .pedido-duplo > .pedido-lado + .pedido-lado{
    padding-left:var(--e16);border-left:1px solid var(--risco);
  }
}
.pedido-lado__titulo{margin-top:var(--e4)}
.pedido-lado__nota{
  margin-top:var(--e10);padding-top:var(--e6);
  border-top:1px solid var(--risco);
}

/* ── duas portas ─────────────────────────────────────────────────────── */
.portas{
  margin-top:var(--e12);
  display:grid;gap:var(--e8);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:860px){.portas{grid-template-columns:1fr 1fr;gap:var(--e10)}}
.porta{border:1px solid var(--risco);padding:var(--e8) var(--e6) var(--e10)}
.porta__para{font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;color:var(--brasa)}
.porta h3{font-size:var(--t-lg);margin-top:var(--e3)}
.porta__resumo{margin-top:var(--e2);color:var(--tinta-2);font-size:var(--t-sm)}
.porta__lista{
  list-style:none;margin:var(--e6) 0 0;padding:0;
  display:grid;gap:var(--e3);font-size:var(--t-sm);color:var(--tinta-2);
}
.porta__lista li{padding-top:var(--e3);border-top:1px solid var(--risco)}

/* ── autoral, com designer ───────────────────────────────────────────── */
.autoral__designer{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--brasa);margin-bottom:var(--e2);
}

/* ── botão de tema na barra ──────────────────────────────────────────── */
.tema{
  display:grid;place-items:center;
  width:2rem;height:2rem;
  border:1px solid var(--risco);background:transparent;
  color:var(--tinta-3);cursor:pointer;
  transition:color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.tema:hover{color:var(--tinta-1);border-color:var(--risco-forte)}
.tema svg{width:14px;height:14px}
:root[data-tema=claro] .tema__lua{display:none}
:root:not([data-tema=claro]) .tema__sol{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — blocos antigos ainda usados por outras telas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── capa ────────────────────────────────────────────────────────────────
   Sem foto de produto: o acervo em alta ainda não chegou, e o desenho é o
   objeto certo para abrir de qualquer forma. A capa é a primeira folha da
   prancha — título grande, uma linha de escopo, e a legenda no pé.        */
.capa{padding-block:clamp(2.75rem,7vh,4.5rem) var(--secao)}
.capa__titulo{
  font-size:var(--t-3xl);
  margin-top:var(--e4);
  letter-spacing:-.028em;
  line-height:.94;
}
.capa__linha{margin-top:var(--e6);max-width:46ch}
.capa .busca{margin-top:var(--e8)}

/* legenda da prancha — não é vitrine de métrica: é o carimbo do desenho,
   tipo pequeno, filete em cima, valores tabulares */
.legenda{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:0;
  margin:var(--e10) 0 0;
  border-top:1px solid var(--risco-forte);
}
.legenda>div{
  padding:var(--e4) var(--e4) 0 0;
  display:flex;align-items:baseline;gap:var(--e3);
}
.legenda dt{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
}
.legenda dd{margin:0;font-size:var(--t-md);font-weight:500}

/* ── destaque: desenho + ficha + tabela ──────────────────────────────── */
.destaque{
  margin-top:var(--e12);
  display:grid;gap:clamp(1.75rem,4.5vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media(min-width:900px){
  .destaque{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  /* DEPOIS do bloco acima, e dentro da mesma media query: as duas regras têm
     especificidade igual e `@media` não acrescenta peso nenhum, então quem
     vem depois é quem vale. Declarada antes, esta linha não teria efeito.

     Sem desenho e sem traço a grade fica com um filho só, e a ficha ocupava a
     coluna de 1,08fr deixando 46% de vão à direita — o mesmo defeito de medida
     que saiu de onze views em 24/08. */
  .destaque--so-dado{grid-template-columns:minmax(0,1fr)}
}
/* `start`, não `center`: medido em 26/08 (P9). Centralizar a coluna do dado
   contra a coluna da foto — que na ficha de código empilha foto e desenho e
   chega a 1.107 px — empurrava o QUADRO DO PEDIDO e o botão de orçamento para
   fora da primeira tela. Na Aceso o botão saía em y=939 com a tela de 900, ou
   seja, 39 px abaixo da dobra, e ele é o assunto da página. Com `start` o
   quadro abre sempre em y=432 e o botão sobe para 728. A altura do documento
   não muda, e na ficha da Imports as duas colunas têm quase a mesma altura
   (492 contra 505), então lá nada se mexe. */
/* A junta título → conteúdo é de 48 px em todo o site, medida em 26/08 no
   `/catalogo` (47), no `/projetos` (48) e no `/busca` (48). Na ficha de código
   e na ficha da Imports ela dava 96: o `padding-bottom` do `.topo` e o
   `margin-top` do `.destaque` são o MESMO `--e12` e empilhavam. Quando o
   destaque é o primeiro bloco depois do topo, quem já deu a folga foi o topo. */
.topo + .env > .destaque{margin-top:0}

.destaque__dado{align-self:start}
.destaque__nota{
  margin-top:var(--e6);font-size:var(--t-sm);color:var(--tinta-3);
  max-width:44ch;line-height:1.55;
}
.destaque__tabela{margin-top:var(--e12)}
.destaque__resto{margin-top:var(--e6);font-size:var(--t-sm)}

/* ── coleções assinadas ──────────────────────────────────────────────────
   Assimétrico de propósito: são três autores, não três cards iguais.       */
.autorais{
  margin-top:var(--e12);
  display:grid;gap:var(--e12) var(--e10);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  align-items:stretch;
}
/* O card inteiro é o alvo do clique, e ele vai para a apresentação da coleção.
   As três colunas fecham na MESMA altura: o descritivo tem caixa travada, e o
   que sobra empurra a contagem e o link para a base do card. Sem a trava, o
   texto de cada designer tinha um número diferente de linhas e a fileira
   inteira desalinhava. */
.autoral{
  display:flex;flex-direction:column;
  border-top:1px solid var(--risco-forte);padding-top:var(--e5);
  color:var(--tinta-2);
}
.autoral__foto{overflow:hidden;margin-bottom:var(--e5);border:1px solid var(--risco)}
.autoral__foto img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  transition:transform var(--lento) var(--curva);
}
.autoral:hover .autoral__foto img{transform:scale(1.03)}
.autoral__nome{font-size:var(--t-lg)}
/* A prosa de cada coleção tinha 155, 329 e 303 caracteres travados na mesma
   altura de 129 px: a curta ficava com um vão embaixo e a longa espremida.
   A caixa acompanha o texto, e o que alinha os cards é o rodapé deles. */
/* ═══════════════════════════ AVISO DE COOKIES ═══════════════════════════
   Fica embaixo, ocupa a largura do miolo e NÃO cobre o conteúdo: caixa que
   tapa a tela na primeira visita empurra o clique em "aceitar". Os dois botões
   têm o mesmo peso — recusar é tão fácil quanto aceitar. */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;flex-wrap:wrap;gap:var(--e5) var(--e8);
  align-items:center;justify-content:space-between;
  padding:var(--e5) var(--sangria);
  background:color-mix(in oklch,var(--fundo-2) 96%,transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--risco-forte);
  transform:translateY(100%);
  transition:transform var(--lento) var(--curva);
}
.cookies--dentro{transform:none}
/* UMA LINHA, SEM QUEBRA, em qualquer largura — pedido do Herasmo em 26/08.
   Duas coisas fazem isso:

   1. o teto de 64ch SAIU. Era ele que quebrava a frase no desktop: 64ch dá
      cerca de 448 px e a frase mede 487 px em corpo 13, então ela ia para a
      segunda linha mesmo sobrando quase mil pixels de caixa;
   2. o corpo encolhe com a tela até a frase caber. A frase tem 85 caracteres e
      ocupa 37,5 px de largura para cada 1 px de corpo, então o `clamp` resolve
      a conta: teto em 13 px (o corpo de apoio da casa), e piso onde a menor
      tela de catálogo ainda cabe. Em 390 px o corpo fica em cerca de 9,5 px.

   Sem o `clamp`, `nowrap` sozinho jogaria a frase para fora da tela. */
/* O teto de `64ch` fica FORA: era ele que quebrava a frase no DESKTOP, com quase
   mil pixels de caixa sobrando — 64ch dá cerca de 448 px e a frase mede 487.
   Sem ele o desktop fecha em uma linha sozinho.

   O `nowrap` e o corpo encolhendo saíram por decisão do Herasmo em 26/08: no
   celular a quebra não incomoda, e forçar a linha única custava corpo de 9,3 px
   em 390 e 7,6 px em 320. O que incomodava era o BOTÃO, que estava em tamanho de
   desktop, e é ele que a passada de responsivo trata. */
.cookies__texto{
  margin:0;
  font-size:var(--t-sm);
  line-height:1.6;color:var(--tinta-2);
}
.cookies__texto a{color:var(--brasa);text-decoration:underline;text-underline-offset:.2em}
.cookies__acoes{display:flex;flex-wrap:wrap;gap:var(--e3)}
/* No celular a caixa é sempre duas linhas de texto MAIS a fileira de botões, e
   o que sobra para apertar é a folga. Decisão do Herasmo em 26/08: o aviso diz
   o mínimo e o detalhe vive na Política de Privacidade. */
@media(max-width:560px){
  /* o recuo lateral também cede: cada pixel de folga aqui é um pixel a mais de
     corpo na frase, que precisa caber inteira numa linha */
  .cookies{padding:var(--e4);gap:var(--e3)}
}
@media(prefers-reduced-motion:reduce){
  .cookies{transition:none}
}
/* O comentário acima diz que o aviso "NÃO cobre o conteúdo", e a medição de
   26/08 (P9) mostrou que cobria: caixa fixa no rodapé da janela, 103 px no
   desktop e 182 px no celular, exatamente por cima do CRÉDITO DA OBRA no hero
   — que é a razão de o hero existir — e, no celular, por cima de metade do
   painel de destaques.

   O hero é `align-items:flex-end`, então o conteúdo dele encosta na base da
   janela. Enquanto o aviso está na tela, o `cookies.js` publica a altura dele
   e o conteúdo do hero sobe o mesmo tanto. Some o aviso, some a folga. Uma
   variável, um lugar. */
:root.tem-aviso .hero__base{
  padding-bottom:calc(var(--e12) + var(--aviso-altura,0px));
}
/* A GAVETA tem o mesmo problema pelo mesmo motivo: ela desce até a base da
   janela e o aviso fica por cima dos últimos destinos. Mesma variável.

   ⚠️ Dentro da media query, e isso não é capricho: solta, esta regra valia
   TAMBÉM no desktop, onde o painel é a fileira horizontal da barra. O
   `padding-bottom` de 107 px empurrava a barra para 185 px de altura e a
   quebrava em duas fileiras, com a marca embaixo dos links.

   1024 e não 820 desde 30/08: a soleira da gaveta subiu, e esta regra só faz
   sentido onde o painel É gaveta. Ela acompanha aquele número, sempre. */
@media(max-width:1024px){
  :root.tem-aviso .menu__painel{
    padding-bottom:calc(var(--e6) + var(--aviso-altura,0px));
  }
}

.rodape__legal{display:flex;flex-wrap:wrap;gap:var(--e4)}
.rodape__legal a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.rodape__legal a:hover{color:var(--brasa)}

/* ═══════════════════════════ BLOG ═══════════════════════════
   Cartão de post e corpo de leitura. O blog é a única parte do site com texto
   longo corrido, e é o único lugar onde limitar a medida de linha se justifica
   — aqui a coluna É o conteúdo, não um apoio ao lado de um título. */
.posts{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
  background:var(--risco);
  border:1px solid var(--risco);
  margin-top:var(--e8);
}
.post-card{background:var(--fundo-1)}
.post-card > a{
  display:flex;flex-direction:column;height:100%;
  padding:var(--e6);color:inherit;
  transition:background var(--rapido) var(--curva);
}
.post-card > a:hover{background:var(--fundo-2)}
/* A capa vem do WordPress anterior e tem proporção de tudo quanto é tipo —
   de 650x472 a 2560x1440. O quadro uniformiza a grade; `cover` corta pelo
   centro, que é onde a peça está nessas fotos. */
.post-card__capa{overflow:hidden;margin:calc(var(--e6) * -1) calc(var(--e6) * -1) var(--e5)}
.post-card__capa img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;
  transition:transform var(--lento) var(--curva);
}
.post-card > a:hover .post-card__capa img{transform:scale(1.03)}

.post-capa{margin:var(--e10) 0 0;overflow:hidden;border:1px solid var(--risco)}
.post-capa img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}

.post-card__meta{
  display:flex;flex-wrap:wrap;gap:var(--e2);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);
}
.post-card__meta span{color:var(--brasa-tinta)}
.post-card__titulo{
  margin-top:var(--e3);
  font-size:var(--t-md);line-height:1.28;
  transition:color var(--rapido) var(--curva);
}
.post-card > a:hover .post-card__titulo{color:var(--brasa)}
.post-card__resumo{
  margin-top:var(--e3);color:var(--tinta-2);
  font-size:var(--t-sm);line-height:1.6;
}
/* `auto` empurra o link para a base: os cards têm resumos de tamanhos
   diferentes e sem isto o "Ler" de cada um parava numa altura. */
.post-card__elo{margin-top:auto;padding-top:var(--e5);font-size:var(--t-sm)}

.post-assinatura{
  margin-top:var(--e10);padding-top:var(--e5);
  border-top:1px solid var(--risco);
  font-size:var(--t-sm);color:var(--tinta-3);max-width:66ch;
}

/* ── perguntas frequentes ───────────────────────────────────────────────
   Sanfona nativa: a lista fica escaneável para quem lê e o texto continua no
   HTML para quem indexa. `<details>` fechado não esconde conteúdo do robô. */
.faq{margin-top:var(--e12);padding-top:var(--e8);border-top:1px solid var(--risco-forte)}
.faq__titulo{font-family:var(--display);font-size:var(--t-lg);line-height:1.2}
.faq__item{border-bottom:1px solid var(--risco)}
.faq__item > summary{
  display:flex;gap:var(--e3);align-items:baseline;
  padding:var(--e5) 0;cursor:pointer;list-style:none;
  font-size:var(--t-md);color:var(--tinta-1);
  transition:color var(--rapido) var(--curva);
}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item > summary:hover{color:var(--brasa)}
.faq__item > summary::before{
  content:'';flex:none;width:.5rem;height:.5rem;margin-top:.45em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform var(--rapido) var(--curva);
}
.faq__item[open] > summary::before{transform:rotate(45deg)}
.faq__item > p{
  margin:0 0 var(--e5) calc(.5rem + var(--e3));
  color:var(--tinta-2);font-size:var(--t-sm);line-height:1.7;max-width:66ch;
}

/* ── artigo com barra lateral ────────────────────────────────────────────
   A coluna de leitura tem largura de leitura (é a exceção que a regra do full
   no miolo nomeia), e o que sobrava à direita virou navegação: assuntos,
   recentes e a ponte para o catálogo. */
.post-grade{
  display:grid;gap:var(--e10) var(--e12);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media(min-width:64rem){
  .post-grade{grid-template-columns:minmax(0,1fr) minmax(0,17rem)}
  /* a lateral acompanha a rolagem: em post longo ela sairia da tela logo no
     começo e não serviria para nada */
  .post-lado{position:sticky;top:calc(87px + var(--e6))}
}
.post-corpo{min-width:0}
.post-lado{display:grid;gap:var(--e8)}
.post-lado__bloco{padding-top:var(--e5);border-top:1px solid var(--risco-forte)}
.post-lado__lista{list-style:none;margin:var(--e4) 0 0;padding:0}
.post-lado__lista li + li{margin-top:var(--e3)}
.post-lado__lista a{
  display:flex;gap:var(--e3);justify-content:space-between;align-items:baseline;
  color:var(--tinta-2);font-size:var(--t-sm);line-height:1.4;
  transition:color var(--rapido) var(--curva);
}
.post-lado__lista a:hover{color:var(--brasa)}
.post-lado__lista a[aria-current]{color:var(--tinta-1)}
.post-lado__lista .num{flex:none;font-size:var(--t-xs);color:var(--tinta-3)}
.post-lado__lista--posts a{display:block}
.post-lado__lista--posts .num{display:block;margin-top:var(--e1)}
.post-lado__cta .apoio{margin-top:var(--e4);font-size:var(--t-sm)}
.post-lado__cta .botao{margin-top:var(--e5)}

.post-topo{max-width:none}
.post-topo__meta{
  margin-top:var(--e5);color:var(--tinta-3);
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
}
.post-topo .rotulo a{color:inherit}
.post-topo .rotulo a:hover{color:var(--brasa)}

/* A prosa do post: aqui a medida de linha É a forma. */
.prosa{max-width:72ch;margin-top:var(--e8);color:var(--tinta-2);font-size:var(--t-md)}
.prosa > * + *{margin-top:var(--e6)}
.prosa p{line-height:1.72}
.prosa h2{
  font-family:var(--display);font-size:var(--t-lg);line-height:1.2;
  color:var(--tinta-1);margin-top:var(--e10);
}
.prosa h3,.prosa h4{
  font-family:var(--display);font-size:var(--t-md);line-height:1.25;
  color:var(--tinta-1);margin-top:var(--e8);
}
.prosa ul,.prosa ol{padding-left:var(--e6)}
.prosa li + li{margin-top:var(--e3)}
.prosa li{line-height:1.7}
.prosa strong,.prosa b{color:var(--tinta-1);font-weight:600}
.prosa a{color:var(--brasa);text-decoration:underline;text-underline-offset:.2em}
.prosa a:hover{color:var(--tinta-1)}
.prosa blockquote{
  padding-left:var(--e6);border-left:1px solid var(--brasa-tinta);
  font-family:var(--display);color:var(--tinta-1);
}

.paginacao{margin-top:var(--e10);font-size:var(--t-sm)}
.paginacao a,.paginacao span{padding:var(--e2) var(--e3)}

/* ── coleções em fila, com foto ─────────────────────────────────────────
   A /colecoes tinha UMA imagem na página inteira. Cada coleção passa a abrir
   com a foto da própria LP, alternando o lado. */
.colecao-fila{
  display:grid;gap:var(--e6) var(--e10);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  padding-block:var(--e10);
}
.colecao-fila + .colecao-fila{border-top:1px solid var(--risco)}
@media(min-width:60rem){
  .colecao-fila{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  /* alterna o lado: três fotos empilhadas na mesma coluna viram uma lista */
  .colecao-fila--espelho .colecao-fila__foto{order:2}
}
.colecao-fila__foto{display:block;overflow:hidden;border:1px solid var(--risco)}
.colecao-fila__foto img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  transition:transform var(--lento) var(--curva);
}
.colecao-fila__foto:hover img{transform:scale(1.03)}

.autoral__conta{
  margin-top:var(--e2);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);
}
/* A altura travada saiu em 24/08. Ela existia porque as três prosas tinham
   155, 303 e 2.358 caracteres: a caixa fixa igualava os cards e, em troca,
   deixava vão embaixo da curta e cortava a longa no meio de uma frase. Agora o
   texto vem da abertura da bio, com volume equivalente nas três, e a caixa
   acompanha o que existe — quem alinha os cards é o rodapé deles. */
.autoral__prosa{
  margin-top:var(--e5);color:var(--tinta-2);
  font-size:var(--t-sm);line-height:1.66;
}
/* a contagem é a última coisa antes do link, e o `auto` acima dela é o que
   alinha as bases quando um card tem menos texto que o outro. Escopado no
   card: `.autoral__conta` também é usada em /colecoes, que não é flex e não
   pode herdar este empurrão. */
.autoral > .autoral__conta{margin-top:auto;padding-top:var(--e5)}
.autoral__elo{display:inline-block;margin-top:var(--e5);font-size:var(--t-sm)}
.autoral:hover .autoral__nome{color:var(--brasa)}

@media(max-width:52rem){
  /* em coluna única não há vizinho para alinhar: a caixa travada só criaria
     buraco embaixo do texto curto */
  .autoral > .autoral__conta{margin-top:var(--e5);padding-top:0}
}

/* ═══════════════════════════ LP DE ASSINATURA ═══════════════════════════
   Uma página por designer. A regra de composição é o oposto da home: lá a foto
   é a obra do especificador e toma a tela inteira; aqui o assunto é a autoria,
   e ela divide o espaço com a peça em duas colunas. */
.assinatura{
  display:grid;gap:var(--e12) var(--e16);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  padding-block:clamp(2.75rem,7vh,4.5rem) var(--secao);
}
@media(min-width:60rem){
  .assinatura{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
}
.assinatura__nome{
  font-size:var(--t-3xl);margin-top:var(--e4);
  letter-spacing:-.028em;line-height:1;
}
.assinatura__tagline{
  margin-top:var(--e6);max-width:34ch;
  font-family:var(--display);font-size:var(--t-lg);line-height:1.3;
  color:var(--tinta-2);
}
.assinatura__conta{
  margin-top:var(--e8);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);
}
.assinatura__acoes{display:flex;flex-wrap:wrap;gap:var(--e4);margin-top:var(--e10)}
/* a foto entra em proporção fixa e recorta pelo centro: as três coleções têm
   material de origem diferente — retrato de catálogo, página quadrada e foto de
   site antigo — e sem a moldura cada LP abriria com uma altura */
.assinatura__foto{margin:0}
.assinatura__foto img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;
  border:1px solid var(--risco);
}
@media(min-width:60rem){
  .assinatura__foto img{aspect-ratio:4/5}
}

/* ── quem assina ─────────────────────────────────────────────────────── */
.bio{
  display:grid;gap:var(--e10) var(--e12);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media(min-width:60rem){
  .bio{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}
  /* Curioni e Shehtman não têm retrato: sem a coluna da foto, o texto ficava
     espremido na faixa estreita que era dela */
  .bio--solo{grid-template-columns:minmax(0,1fr)}
  /* "Sobre a linha": o texto vem primeiro e a foto de abertura do catálogo
     fica ao lado, como no protótipo. Sem a coluna da foto o parágrafo ocupava
     52% de uma coluna de 1.240 px e a metade direita ficava vazia. A ordem no
     HTML é texto → foto, que é a ordem certa quando as duas empilham. */
  .bio--linha{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
  /* "Sobre a peça": texto numa coluna só e a FOTO DE AMBIENTE ao lado, na
     mesma proporção do "Sobre a linha". A foto é a coluna menor por medida, e
     não por gosto: a pasta que a Usina mandou é de web — 90 das 220 origens
     têm menos de 640 px e a menor tem 567 —, e em `.62fr` de um envelope de
     1.176 px a caixa fica com 432 px, que é 1,37x a origem mais comum.
     Largura inteira pediria o dobro do que o arquivo tem. */
  .bio--peca{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
}
/* Os dois quadros descem para o pé do texto e ficam lado a lado, como no
   protótipo. Na coluna estreita de antes eles empurravam o título da seção
   para baixo e disputavam a entrada com ele. */
.bio__quadros{display:grid;gap:var(--e6);margin-top:var(--e10)}
@media(min-width:40rem){
  .bio__quadros{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e8)}
}

/* ── A FOTO DE AMBIENTE ─────────────────────────────────────────────────────
   Botão e não elo: ela AMPLIA, não navega. É o mesmo `<dialog>` que a "coleção
   aplicada" e a Imports usam desde 26/08 — o zoom virou mecanismo do site
   naquele dia justamente para não haver duas caixas fazendo a mesma coisa.

   Sem quadro branco, ao contrário da foto de produto: esta foi feita no
   ambiente, com a luz acesa, e o que ela mostra é a cena. Branco em volta a
   transformaria em catálogo de novo. O contorno é o filete de sempre. */
.ambientada{
  display:block;width:100%;padding:0;margin:0;
  border:1px solid var(--risco);background:none;
  color:inherit;font:inherit;text-align:left;cursor:zoom-in;
  transition:border-color var(--rapido) var(--curva);
}
/* 01/09 · pedido do Herasmo: a foto do "Sobre a peça" segue UM padrão —
   retrato 4/5 (o mesmo do retrato de linha), `cover` para a quadrada e a
   paisagem preencherem. Antes cada ficha saía na proporção da origem e a
   coluna mudava de forma a cada página. */
.ambientada img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.ambientada:hover{border-color:var(--brasa-tinta)}
.ambientada:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
.ambientada__legenda{
  display:block;padding:var(--e3) var(--e4);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
}
.bio--linha .bio__retrato img{aspect-ratio:4/5}
.bio__retrato{margin:0}
.bio__retrato img{
  display:block;width:100%;height:auto;
  aspect-ratio:3/4;object-fit:cover;
  border:1px solid var(--risco);
}
/* ⚠️ O TETO DE MEDIDA SAIU, itens 19.2 e 19.4, 30/08.
   Ele era `62ch` aqui, e o Herasmo apontou o resultado: *"o bloco 'quem assina'
   apresentando a Karen não ocupa todo o espaço do miolo enquanto a citação
   abaixo ocupa"*, e o mesmo no Léo.

   A régua de 45 a 75 caracteres por linha existe (Bringhurst; WCAG 1.4.8 pede
   ≤80) e continua valendo na `.prosa`, que é COLUNA ÚNICA de texto longo. Aqui
   não: este bloco JÁ divide a faixa com o retrato, então o teto estreitava duas
   vezes e sobrava faixa vazia dentro de uma coluna que já era estreita.

   A régua do Herasmo, que vale para o site: **todo texto ocupa TODO o miolo**.
   Quem limita a medida é a COLUNA, quando existe uma. */
.bio__texto .apoio{margin-top:var(--e5)}
/* 01/09 · "Ambientes indicados" numa linha só (pedido do Herasmo) */
.bio__ambientes{white-space:nowrap}
/* O invólucro dos parágrafos da bio (item 19.4). Ele existe para o `data-corta`
   ter um alvo só; o respiro entre parágrafos continua sendo o `margin-top` da
   linha acima, e o primeiro não leva folga porque o rótulo já a deu. */
.bio__prosa > .apoio:first-child{margin-top:var(--e5)}
.bio__prosa > .apoio + .apoio{margin-top:var(--e5)}
/* a origem do texto fica na tela: o que está aqui é transcrição do material da
   coleção, e quem lê tem direito de saber de onde veio */
.bio__fonte{
  margin-top:var(--e4);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--tinta-3);
}
.fala{
  margin:var(--e8) 0 0;padding-left:var(--e6);
  border-left:1px solid var(--brasa-tinta);
  font-family:var(--display);font-size:var(--t-md);line-height:1.5;
  color:var(--tinta-1);
}
.fala cite{
  display:block;margin-top:var(--e3);font-style:normal;
  font-family:var(--corpo);font-size:var(--t-xs);
  letter-spacing:var(--rastro);text-transform:uppercase;color:var(--tinta-3);
}

/* ── missão, visão e valores — item 2 do retorno de 30/08 ──────────────────
   Ele emprestava a `.linha-prosa`, e ali o rótulo caía na coluna de `1fr` e o
   texto na de `.62fr`: "Missão" com 177 px de texto numa coluna de 696, e o
   parágrafo com 432. Quase 520 px de vão no meio.

   A coluna do rótulo agora é `max-content` — do tamanho da palavra, e a mesma
   para as três porque a grade é do BLOCO, não de cada linha. O vão entre as
   colunas caiu de 48 para 16 px, que é o teto de 30% que ele pediu, e o texto
   ocupa todo o resto. O rótulo desloca 16 px para a direita, também pedido. */
.institucional{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--e5);margin-top:var(--e4);
}
.institucional__nome{
  font-size:var(--t-xl);line-height:1.05;margin:0;
}
.institucional__texto > .apoio{margin:0}

@media(min-width:60rem){
  .institucional{
    grid-template-columns:max-content minmax(0,1fr);
    /* ⚠️ `column-gap:0` e o afastamento por `padding` na célula do texto. Com
       gap de verdade, a régua entre as linhas saía PARTIDA no meio — dois
       traços com um vão de 16 px, que lê como defeito e não como divisão.
       O olho vê a mesma folga; a linha é que fica inteira. */
    column-gap:0;row-gap:0;align-items:start;
  }
  .institucional__nome{padding-left:var(--e4)}
  /* ⚠️ 32 px e não 16: com `--e4` o texto ficou GRUDADO no rótulo — apontamento
     dele em 30/08, depois do primeiro ajuste. Medido no rótulo mais LONGO
     ("Missão", 177 px numa coluna de 201): com `--e4` o vão de letra a letra
     era de 24 px; com `--e6` ele vai a 32, que é o *"algo em torno de 30px"*
     que ele pediu. Ele é `padding` e não
     `column-gap` de propósito: com gap de verdade a régua entre as linhas sai
     partida no meio. */
  .institucional__texto{padding-left:var(--e6)}
  /* A régua entre as linhas: da SEGUNDA em diante, e nas duas células, senão
     ela atravessa meia fileira. O respiro vem do `padding-top`, não do
     `row-gap`, para o traço encostar na folga e não flutuar no meio dela. */
  .institucional > *:nth-child(n+3){
    border-top:1px solid var(--risco);
    padding-top:var(--e10);margin-top:var(--e10);
  }
}
@media(max-width:59.99rem){
  /* Empilhado, a régua fica só no RÓTULO, que é onde a linha nova começa. */
  .institucional__nome:nth-child(n+3){
    border-top:1px solid var(--risco);
    padding-top:var(--e8);margin-top:var(--e5);
  }
}

/* ── grade de peças da coleção ───────────────────────────────────────── */
.grade--colecao{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}

/* ── a citação que mora DENTRO da grade — item 19.3 ────────────────────────
   A Karen tem duas falas e as duas viviam empilhadas no "Quem assina". A
   segunda desce para cá, na célula que sobrava na última fileira ao lado do
   Pendente Graça, que estava sozinho.

   É célula de grade, então usa a moldura do card vizinho — filete e nada mais.
   O que a diferencia é a tipografia: display, como a `.fala` de cima, e o
   filete de brasa à esquerda, que neste site já quer dizer "isto é fala
   deles". `align-content:center` porque a citação é mais baixa que o card e,
   colada no topo, leria como legenda de uma foto que não existe. */
.peca-citacao{
  margin:0;padding:var(--e6);
  display:grid;align-content:center;gap:var(--e3);
  border:1px solid var(--risco);
  border-left:2px solid var(--brasa-tinta);
  font-family:var(--display);font-size:var(--t-sm);line-height:1.5;
  color:var(--tinta-1);
}
.peca-citacao cite{
  font-style:normal;font-family:var(--corpo);font-size:var(--t-xs);
  letter-spacing:var(--rastro);text-transform:uppercase;color:var(--tinta-3);
}

/* ── texto de linha ──────────────────────────────────────────────────── */
.linha-prosa{
  display:grid;gap:var(--e5) var(--e12);
  grid-template-columns:minmax(0,1fr);
  padding-top:var(--e8);
}
.linha-prosa + .linha-prosa{margin-top:var(--e12);border-top:1px solid var(--risco)}
@media(min-width:60rem){
  /* Texto e foto lado a lado. A foto ocupa menos porque o assunto da seção é o
     que a Usina escreveu sobre a linha: ela ilustra, não conduz. */
  .linha-prosa{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:start}
  /* O zigue-zague. `order` sozinho NÃO basta: ele troca quem entra primeiro e
     não troca a LARGURA das colunas, então no bloco par a foto caía na coluna
     de 1fr e o texto na de .62fr — a foto do Jazz saía bem maior que a do
     Bello, e a medida do texto mudava de bloco para bloco. As colunas invertem
     junto. */
  .linha-prosa--espelhado{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
  .linha-prosa--espelhado .linha-prosa__corpo{order:2}
  .linha-prosa--espelhado .linha-prosa__foto{order:1}
  /* Sem foto, o corpo toma a fileira inteira em vez de deixar meia coluna vazia
     — é a decisão de 24/08 sobre texto full no miolo. */
  .linha-prosa--solo{grid-template-columns:minmax(0,1fr)}
}
.linha-prosa__nome{font-size:var(--t-xl);line-height:1.05;margin-bottom:var(--e2)}
/* A procedência, logo sob o nome. Corpo pequeno e tinta calma: ela diz de quem
   é o texto e não disputa com ele. */
.linha-prosa__fonte{
  margin:0 0 var(--e5);
  font-size:var(--t-xs);letter-spacing:var(--rastro);
  text-transform:uppercase;color:var(--tinta-3);
}
.linha-prosa__nome + .apoio{margin-top:var(--e5)}
/* Sem teto de medida, pelo mesmo motivo do `.bio__texto` acima: o bloco já vive
   na coluna de 1fr ao lado da foto de .62fr, e o `62ch` estreitava de novo por
   dentro. Item 19.4. */
.linha-prosa__foto{margin:0}
/* QUADRADA, que é o padrão medido do site: as 445 fotos publicadas e os 192
   desenhos são todos 1:1, sem uma exceção. Em `auto` a ambientada é retrato e
   fica muito mais alta que o texto cortado — o vazio ao lado trocaria parede de
   texto por parede de foto, que é o oposto do pedido. `cover` porque aqui a
   foto é AMBIENTE, não ficha de peça: o assunto sobrevive ao corte. */
.linha-prosa__foto img{
  width:100%;display:block;
  aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--risco);
}

/* ── "ler mais": o texto é transcrição do catálogo e NÃO se encurta ──────
   Cortar é de exibição, e o corte é por LINHA, não por caractere: caractere
   corta no meio da palavra. Nasce sem corte nenhum — quem corta é o JS, depois
   de medir que o texto de fato passa do teto. Sem JS o texto aparece inteiro. */
/* O corte e o botão valem para qualquer bloco que peça `data-corta`, e não só
   para a prosa de linha: a bio da Karen entrou no mesmo mecanismo em 29/08. */
[data-cortado]{
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:var(--linhas,7);overflow:hidden;
}
/* Invólucro com PARÁGRAFOS dentro: `line-clamp` mede caixa inline e não
   atravessa filho de bloco — ele simplesmente não corta. Aí o corte é por
   altura, e o `--corte` em pixel vem do JS, que sabe a altura de linha do
   parágrafo. Sem ele o bloco fica inteiro, que é a falha certa. */
[data-cortado="blocos"]{
  display:block;max-height:var(--corte);overflow:hidden;
}
.linha-prosa__ler{
  margin-top:var(--e4);background:none;border:0;padding:0;
  font:inherit;font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--brasa);cursor:pointer;
  border-bottom:1px solid currentColor;
}
.linha-prosa__ler:hover{color:var(--tinta-1)}
@media(max-width:63.99rem){
  /* No celular o alvo de toque é 44px, que é o piso de dedo fixado em 26/08.
     O desenho não cresce: a área vem do pseudo-elemento. */
  .linha-prosa__ler{position:relative}
  .linha-prosa__ler::after{
    content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px;
  }
}

/* ── citações ────────────────────────────────────────────────────────── */
.citacoes{
  display:grid;gap:var(--e10) var(--e12);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.citacao{
  margin:0;padding-top:var(--e5);
  border-top:1px solid var(--risco-forte);
  font-family:var(--display);font-size:var(--t-lg);line-height:1.25;
  color:var(--tinta-1);
}
.citacao cite{
  display:block;margin-top:var(--e5);font-style:normal;
  font-family:var(--corpo);font-size:var(--t-xs);
  letter-spacing:var(--rastro);text-transform:uppercase;color:var(--brasa-tinta);
}

/* ── a coleção aplicada ──────────────────────────────────────────────── */
.aplicada{
  display:grid;gap:var(--e10) var(--e8);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));
}
/* A legenda vive SOBRE a foto, com o degradê do protótipo — mesmo padrão da
   `.obra`. É foto de AMBIENTE, e a regra do Herasmo de 25/08 vale para todas
   elas: "os labels ficam muito mais elegantes acima da imagem, com um degradê
   do preto na margem inferior para o transparente subindo". O grid de PRODUTO
   fica de fora, por decisão dele.

   O degradê é escuro nos dois temas porque mora sobre a FOTO. */
/* Desde 26/08 o item é um `<button>` que AMPLIA, não um link que navega: quem
   clica na foto do ambiente quer ver o ambiente maior. Daí o reset — botão
   nasce com fundo, borda, recuo e fonte próprios do navegador. */
.aplicada__item{
  position:relative;display:block;overflow:hidden;color:#EDEDEA;
  border:1px solid var(--risco);
  transition:border-color var(--medio) var(--curva);
  width:100%;padding:0;margin:0;background:none;font:inherit;text-align:inherit;
}
button.aplicada__item{cursor:zoom-in}
.aplicada__item:hover{border-color:var(--brasa-tinta)}
.aplicada__item:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}
.aplicada__item img{
  display:block;width:100%;height:auto;
  aspect-ratio:5/4;object-fit:cover;
  transition:transform var(--lento) var(--curva);
}
a.aplicada__item:hover img{transform:scale(1.03)}
.aplicada__legenda{
  position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--e1);
  padding:var(--e5);
  background:linear-gradient(to top,rgba(11,11,12,.9) 0%,rgba(11,11,12,.55) 28%,transparent 55%);
  /* A legenda cobre a foto inteira, e na Imports a foto É o botão de ampliar.
     Sem isto o degradê engoliria o clique do zoom em toda a área. O que é
     clicável dentro da legenda volta a receber ponteiro, um a um. */
  pointer-events:none;
}
.aplicada__legenda a,
.aplicada__legenda button{pointer-events:auto}
.aplicada__legenda a{color:inherit;text-decoration:none}
.aplicada__legenda a:hover b{color:var(--brasa)}
.aplicada__legenda b{
  font-family:var(--display);font-weight:400;font-size:var(--t-md);
  letter-spacing:-.015em;color:inherit;
}
.aplicada__legenda .num{font-size:var(--t-xs);opacity:.82;letter-spacing:.04em}
/* referência que não tem ficha: a foto continua, o aviso é escrito. Esconder
   faria parecer que a peça não existe; linkar devolveria 404 */
.aplicada__sem-ficha{
  font-size:var(--t-xs);opacity:.72;font-style:italic;
}
@media(prefers-reduced-motion:reduce){
  .aplicada__item img{transition:none}
  a.aplicada__item:hover img{transform:none}
}

/* ── acabamentos ─────────────────────────────────────────────────────── */
.grupo-acab{margin-top:var(--e12)}
.grupo-acab__nome{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--tinta-3);padding-bottom:var(--e3);margin-bottom:var(--e6);
  border-bottom:1px solid var(--risco);
}

/* ── fábrica ─────────────────────────────────────────────────────────── */
.fabrica{
  display:grid;gap:var(--e8) var(--e16);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:900px){
  .fabrica{grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:var(--e16)}
}
.fabrica .titulo-secao{margin-top:var(--e4)}

/* ── projetos ────────────────────────────────────────────────────────── */
.projetos{
  margin-top:var(--e12);display:grid;gap:var(--e8) var(--e6);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.projeto h3{font-size:var(--t-md);font-family:var(--corpo);font-weight:500}
.projeto__credito{font-size:var(--t-xs);color:var(--tinta-3);margin-top:var(--e1)}

/* ═══════════════════════════════════════════════════════════════════════════
   CATÁLOGO, FAMÍLIA, CÓDIGO
   ═══════════════════════════════════════════════════════════════════════════ */

.topo{padding-block:clamp(2.5rem,6vh,4rem) var(--e12)}
.topo__titulo{font-size:var(--t-2xl);margin-top:var(--e4)}
.topo__conta{margin-top:var(--e5);color:var(--tinta-2);font-size:var(--t-sm)}

.migalha{
  display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:var(--e5);
}
.migalha a{border-bottom:1px solid transparent;transition:border-color var(--rapido) var(--curva)}
.migalha a:hover{border-bottom-color:var(--brasa)}

/* ── filtro ───────────────────────────────────────────────────────────────
   Link, não botão de JS: o buscador segue e o especificador manda por e-mail. */
.filtros-caixa{margin-top:var(--e12)}
.filtros-caixa__botao{display:none}          /* só existe quando vira gaveta */
/* A junta ACIMA do bloco de filtro é a mesma que separa as fileiras DENTRO
   dele. Medido em 27/08 na `/downloads`: era ZERO — o rótulo "Tipo" encostava
   na caixa de busca e as duas liam como um controle só, mal diagramado.
   A regra nasce aqui e não na página porque `.filtros` é o bloco de filtro de
   qualquer tela; a `.filtros-caixa` do catálogo continua zerando por conta
   própria, e essa linha abaixo — que era resíduo de uma margem que não
   existia — passa a ser a guarda que ela sempre quis ser. */
.filtros{display:grid;gap:var(--e6);margin-top:var(--e6)}
.filtros-caixa > .filtros{margin-top:0}

@media(max-width:820px){
  .filtros-caixa__botao{
    display:flex;align-items:center;gap:var(--e3);
    cursor:pointer;list-style:none;
    padding:var(--e3) 0;
    font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;
    color:var(--tinta-2);
    border-block:1px solid var(--risco);
  }
  .filtros-caixa__botao::-webkit-details-marker{display:none}
  .filtros-caixa[open] .filtros-caixa__botao{border-bottom-color:transparent}
  /* três traços de comprimento decrescente: o sinal de filtro do desenho
     técnico, não um funil de ícone genérico */
  .filtros-caixa__marca{display:grid;gap:3px;width:14px;flex:0 0 14px}
  .filtros-caixa__marca i{height:1px;background:currentColor;display:block}
  .filtros-caixa__marca i:nth-child(2){width:70%;justify-self:center}
  .filtros-caixa__marca i:nth-child(3){width:40%;justify-self:center}
  .filtros-caixa__n{
    margin-left:auto;min-width:1.4rem;text-align:center;
    color:var(--fundo-1);background:var(--brasa);
    border-radius:2px;font-size:var(--t-xs);padding:.1rem .3rem;
  }
  .filtros-caixa[open] > .filtros{padding-block:var(--e5)}
}
.filtro{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e3)}
@media(min-width:760px){
  .filtro{grid-template-columns:7rem minmax(0,1fr);gap:var(--e4);align-items:baseline}
}
.filtro__rotulo{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--tinta-3);
}
.filtro__lista{display:flex;flex-wrap:wrap;gap:var(--e2)}
.ficha-pilula{
  display:inline-flex;align-items:baseline;gap:var(--e2);
  font-size:var(--t-sm);color:var(--tinta-2);
  padding:.32rem .7rem;
  border:1px solid var(--risco);
  transition:border-color var(--rapido) var(--curva),color var(--rapido) var(--curva);
}
.ficha-pilula:hover{border-color:var(--tinta-3);color:var(--tinta-1)}
.ficha-pilula[aria-current=true]{
  border-color:var(--tinta-1);color:var(--tinta-1);
  background:var(--fundo-2);
}
.ficha-pilula__n{font-size:var(--t-xs);color:var(--tinta-3)}

/* ── grade de peças ───────────────────────────────────────────────────────
   Desenho sobre papel, sem cartão: nada de moldura, sombra ou retângulo
   idêntico. O que muda de célula para célula é a própria peça. */
/* Gap vertical igual ao horizontal. Eram 40 px entre linhas contra 24 entre
   colunas, e a grade lia como fileiras soltas — apontamento do Herasmo em
   25/08 na Imports. O respiro extra existia para separar cards que tinham a
   cor do fundo; agora o card tem cor própria e a separação é dele. */
.grade{
  display:grid;gap:var(--e6);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.grade--enxuta{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--e8) var(--e5)}
/* Obras em DUAS colunas no desktop, não quatro de 190 px: a foto de um ambiente
   inteiro precisa de área para ler, e em coluna estreita a seção lê como
   vitrine de loja. Precisa vir DEPOIS de `.grade`, que tem a mesma
   especificidade e ganhava por ordem. */
/* Três colunas de retrato, como no protótipo — 26rem de mínimo dava dois
   quadrões deitados por fileira. */
.grade--projetos{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));
  gap:var(--e6);
}

.peca{display:block}
/* ── caixa de imagem ─────────────────────────────────────────────────────
   Na listagem entra a FOTO do produto, não o desenho técnico. Enquanto o
   acervo em alta não chega, entra um thumb padrão — o mesmo em todo lugar
   que vai receber imagem oficial. Um espaço reservado e visivelmente igual
   comunica "aqui vem foto"; desenho técnico no lugar da foto comunica que a
   decisão de imagem foi essa, o que não é verdade.

   Altura FIXA, não aspect-ratio: `aspect-ratio` é tamanho preferido e não
   trava — conteúdo maior empurrava a célula e a grade saía escalonada. */
/* ── QUADRO QUADRADO, PEÇA INTEIRA — 28/08 ──────────────────────────────────
   Era `height:clamp(150px,16vw,196px)` com `object-fit:cover`. Num card de
   ~230 px de largura isso corta 15% da altura da foto, em cima e embaixo — e
   a peça encosta na borda, o que a Ana leu como "a peça fica voando".

   Não era problema das imagens: medido em 28/08, as **540 fotos de produto
   publicadas são quadradas, sem uma exceção**. Elas já chegam completas, com
   o ar em volta que o fotógrafo deixou. Cortar era decisão nossa, e errada.

   Agora o quadro é QUADRADO como a foto e a imagem entra CONTIDA. Vale para
   a grade inteira, não para dois casos — o carrossel da ficha já fazia assim
   desde que nasceu, e as duas telas passam a dizer a mesma coisa. */
.peca__desenho{
  display:grid;place-items:center;
  aspect-ratio:1;height:auto;
  overflow:hidden;
  /* a foto de produto é recortada sobre BRANCO: o quadro acompanha, senão
     sobra moldura escura em volta da peça */
  background:#fff;
  border:1px solid var(--risco);
  transition:border-color var(--medio) var(--curva);
}
/* O desenho técnico e o espaço reservado mantêm o fundo do tema — traço de
   prancha sobre branco chapado perde o contraste que a grade tem hoje. */
/* ⚠️ 31/08 — AS FAIXAS PRETAS DO CARD SEM FOTO.
   Apontamento do Herasmo: *"o thumbnail de itens sem foto, deixa ele preenchendo
   todo o espaço, está com faixas pretas acima/abaixo no grid"*.

   A causa: a imagem do desenho é QUADRADA e o quadro do card não é, então com
    sobra espaço em cima e embaixo. Esse espaço mostrava o
    do container, enquanto a própria imagem tem fundo branco invertido
   para preto — duas cores diferentes no mesmo quadro, que é a faixa que ele viu.

   O conserto é igualar: o container do desenho recebe a MESMA cor que a imagem
   fica depois do invert. Cortar com  não serve — desenho cotado cortado
   perde a cota, que é a única coisa que ele responde. */
.peca__desenho:has(.peca__tecnico){background:#000}
:root[data-tema=claro] .peca__desenho:has(.peca__tecnico){background:#fff}
.peca__desenho:has(.thumb-padrao){background:var(--fundo-2)}
/* O <picture> precisa OCUPAR o quadro. Sem isto ele fica com altura
   automática, a imagem enche o picture e não o quadro, e sobram faixas do
   fundo em cima e embaixo — 38 px na galeria do showroom da home, que o
   Herasmo leu como "barra preta acima e abaixo da imagem" em 25/08. A regra
   de `height:100%` na img sozinha não resolve: 100% de um pai que não tem
   altura é altura automática. */
.peca__desenho > picture{display:block;width:100%;height:100%}
.peca__desenho img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform var(--medio) var(--curva);
}

/* thumb padrão — o chapado claro que a Usina usa como imagem ausente.
   O MESMO arquivo em todo lugar, de propósito: repetido, ele lê como espaço
   reservado; variado, leria como decisão de design. */
/* ── o quadro de foto de AMBIENTE ──────────────────────────────────────────
   Itens 19.1 e 19.5, 30/08. Duas coisas variam aqui, e elas são independentes:

     a NATUREZA da imagem  -> como ela preenche o quadro e que fundo tem
     o CONTEXTO da tela    -> a proporção do quadro

   Misturar as duas foi o defeito. A correção universal de sangria de 28/08 pôs
   quadrado + branco + `contain` em `.peca__desenho`, e isso é a régua da foto
   de PRODUTO — recorte sobre branco, quadrada em 540 de 540 casos, medido. A
   galeria do showroom na home usa a mesma classe e é foto de AMBIENTE, em
   paisagem: sobraram as faixas brancas que o Herasmo viu.

   Então `--ambiente` diz só a NATUREZA: a foto preenche (`cover`) e o fundo é
   o do tema, porque não há recorte a casar. A proporção fica com quem sabe do
   contexto — o card do catálogo continua quadrado, para a fileira não virar
   escada, e a galeria da home é paisagem, logo abaixo. */
.peca__desenho--ambiente{background:var(--fundo-2)}
.peca__desenho--ambiente img{object-fit:cover}

.thumb-padrao{width:100%;height:100%;object-fit:cover;display:block}
/* 31/08 · o chapado tem de COBRIR o quadro do card. A regra genérica
   `.peca__desenho img` (contain) vencia `.thumb-padrao` por especificidade e
   o placeholder paisagem flutuava entre faixas do fundo do tema — as "faixas
   pretas acima/abaixo" que o Herasmo apontou no grid. */
.peca__desenho img.thumb-padrao{object-fit:cover}
.peca:hover .peca__desenho{border-bottom-color:var(--brasa)}
.peca:hover .peca__desenho img{transform:scale(1.045);opacity:1}

/* ── card do catálogo — moldura e três degraus de informação ──────────────
   Revisão de 25/08. Até aqui a grade era "de desenhos, sem moldura": a foto
   flutuava e o nome vinha logo abaixo. Com foto sobre quadro branco ao lado de
   foto sobre fundo escuro, cada célula começava numa altura diferente e a
   fileira lia como colagem. O protótipo aprovado põe filete em volta, divisão
   entre as informações e a tipologia em cor, e é o que passa a valer.

   Os três degraus vão do mais rápido de ler ao mais lento:
     tipologia   cor, caixa alta, espaçada  — é o filtro mental
     nome        serifa                     — é o que se procura
     contagem    depois do filete           — é o dado                        */
/* O quadro tem cor PRÓPRIA, diferente do fundo da página. Estava em
   `--fundo-1`, que é exatamente a cor do corpo (#0B0B0C), e o card sumia: só
   o filete o separava do vazio. Apontamento do Herasmo em 25/08 — "os quadros
   não têm o mesmo efeito do preview, com uma diferença de cor em relação ao
   fundo que fazia toda a diferença". O ponteiro sobe mais um degrau. */
.peca{
  display:flex;flex-direction:column;
  border:1px solid var(--risco);
  background:var(--fundo-2);
  transition:border-color var(--medio) var(--curva),background var(--medio) var(--curva);
}
.peca:hover{border-color:var(--risco-forte);background:var(--fundo-3)}
/* A imagem já tem a moldura do card em volta: aqui só o filete que a separa da
   ficha, senão são duas linhas encostadas. */
.peca .peca__desenho{border:0;border-bottom:1px solid var(--risco)}
.peca:hover .peca__desenho{border-bottom-color:var(--brasa)}
.peca__ficha{
  display:grid;gap:var(--e1);
  padding:var(--e4) var(--e4) var(--e5);
  flex:1;align-content:start;
}
.peca__tipo{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--brasa-tinta);
}
.peca__meta{
  margin-top:var(--e3);padding-top:var(--e3);
  border-top:1px solid var(--risco);
  font-size:var(--t-xs);color:var(--tinta-3);letter-spacing:.04em;
}
/* O desenho técnico é traço e não pode ser cortado: entra CONTIDO no quadro,
   com respiro, ao contrário da foto que preenche.

   O FUNDO NÃO É MAIS BRANCO. Padronização de 26/08: das 266 famílias que
   mostram desenho, 192 vinham do raster com branco queimado e 74 do SVG de
   traço, que já acompanha o tema. Duas aparências para a mesma coisa era o
   defeito. Agora as duas seguem o TRAÇO: o campo some e a linha fica.

   Como o campo some sem regerar arquivo: o raster é traço puro (medido — 98 a
   99% do quadro em branco, 0,3 a 1% em preto, menos de 1% de meio-tom). No
   escuro `invert` devolve linha branca em campo preto e `lighten` deixa passar
   tudo que for mais escuro que o fundo da página, ou seja, o campo. No claro o
   arquivo já está na polaridade certa e `darken` faz o mesmo pelo outro lado.
   Nenhum dos 597 arquivos foi tocado. */
.peca__tecnico{
  object-fit:contain !important;
  /* respiro menor que o  de antes: com o fundo igualado acima, o desenho
     pode ocupar quase o quadro inteiro sem encostar no filete. */
  padding:var(--e2);
  background:#000;
  filter:invert(1);
}
:root[data-tema=claro] .peca__tecnico{
  background:#fff;
  filter:none;
}
/* família sem desenho extraído (52 das 239): a célula fica vazia mesmo.
   O quadrado tracejado que estava aqui gritava a ausência em 1/5 da grade —
   e a ausência não é do produto, é da extração. Nome e contagem seguram a linha. */
.peca__sem{display:none}
.peca .peca__nome{margin-top:0}
.peca__nome{
  margin-top:var(--e3);
  font-family:var(--display);font-size:var(--t-md);letter-spacing:-.015em;
  line-height:1.2;
}
.peca:hover .peca .peca__nome{margin-top:0}
.peca__nome{color:var(--brasa-tinta)}
.peca__meta{margin-top:var(--e1);font-size:var(--t-xs);color:var(--tinta-3)}

/* ── paginação ───────────────────────────────────────────────────────── */
.paginacao{
  margin-top:var(--e16);padding-top:var(--e5);
  border-top:1px solid var(--risco);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  font-size:var(--t-sm);
}
.paginacao__meio{color:var(--tinta-3);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.paginacao__inerte{color:var(--tinta-3);opacity:.55}

/* ── tabela larga em tela estreita ───────────────────────────────────────
   A ficha tem até 18 colunas. Em vez de esconder coluna no celular — que é
   amputar o dado que o especificador veio buscar — a tabela rola sozinha. */
.rolagem-tabela{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:var(--e10)}
.rolagem-tabela .tabela{min-width:min(100%,44rem)}
.rolagem-tabela .tabela td,.rolagem-tabela .tabela th{white-space:nowrap}

/* ── amostra de acabamento na ficha ──────────────────────────────────── */
.acab-familia{margin-top:var(--e10)}
.acab-familia__rotulo{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--tinta-3);display:flex;flex-wrap:wrap;gap:var(--e3);align-items:baseline;
}
.acab-familia__grupo{color:var(--brasa-tinta);letter-spacing:.06em}
.amostras{
  list-style:none;margin:var(--e5) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--e4) var(--e3);
}
.amostra{display:grid;gap:var(--e2);justify-items:center;width:3.6rem}
.amostra__cor{
  display:block;width:100%;aspect-ratio:1;
  border:1px solid var(--risco-forte);
}
.amostra__nome{font-size:var(--t-xs);color:var(--tinta-3);text-align:center;line-height:1.25}

/* ── código ──────────────────────────────────────────────────────────── */
.codigo__sku{
  font-family:var(--corpo);font-weight:500;
  font-size:var(--t-xl);
  letter-spacing:-.01em;margin-top:var(--e3);
}
.irmaos{list-style:none;margin:var(--e8) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.irmao{
  display:inline-block;font-size:var(--t-sm);
  padding:.34rem .7rem;border:1px solid var(--risco);
  transition:border-color var(--rapido) var(--curva);
}
.irmao:hover{border-color:var(--tinta-1)}

/* ── coleções ────────────────────────────────────────────────────────── */
.colecao{
  display:grid;gap:var(--e5) var(--e12);
  grid-template-columns:minmax(0,1fr);
  padding-block:var(--e12);
  border-top:1px solid var(--risco);
}
@media(min-width:860px){
  .colecao{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
.colecao__nome h2{font-size:var(--t-lg)}
.colecao__texto .apoio{font-size:var(--t-md)}

/* pílula de coleção: mesma forma da linha, acento de autoria */
.ficha-pilula--colecao{border-color:color-mix(in srgb,var(--brasa) 40%,transparent)}
.ficha-pilula--colecao:hover{border-color:var(--brasa);color:var(--brasa)}
.ficha-pilula--colecao[aria-current=true]{border-color:var(--brasa);color:var(--brasa)}

/* ═══════════════════════ CENTRAL DE DOWNLOADS ═══════════════════════
   Lista densa, no ritmo da .tabela: só filete separando, nada de cartão.
   A linha inteira é alvo de clique — quem está na obra usa o polegar.        */

.baixa-busca{
  margin-top:var(--e8);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);
}
.baixa-busca input[type=search]{
  flex:1 1 22rem;min-width:0;
  background:transparent;color:var(--tinta-1);
  border:1px solid var(--risco-forte);border-radius:0;
  padding:.7rem var(--e3);font:inherit;font-size:var(--t-sm);
}
.baixa-busca input[type=search]::placeholder{color:var(--tinta-3)}
.baixa-busca input[type=search]:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
.baixa-busca button{
  background:transparent;color:var(--tinta-2);
  border:1px solid var(--risco-forte);border-radius:0;
  padding:.7rem var(--e5);font:inherit;font-size:var(--t-sm);cursor:pointer;
  transition:color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.baixa-busca button:hover{color:var(--tinta-1);border-color:var(--tinta-3)}
.baixa-busca__limpa{font-size:var(--t-sm);color:var(--tinta-3)}

/* A margem separa um GRUPO do outro. No primeiro ela se soma ao respiro que a
   seção do cabeçalho já dá, e o resultado medido em 27/08 era 88 px — 48 do
   `.topo` mais 40 daqui —, contra os 48 que são a junta desta casa em todo o
   resto do site. O primeiro grupo não precisa se separar de grupo nenhum. */
.baixa-grupo{margin-top:var(--e10)}
.baixa-grupo:first-child{margin-top:0}
.baixa-grupo__nome{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--tinta-3);
  padding-bottom:var(--e3);border-bottom:1px solid var(--risco-forte);
}
.baixa-grupo__nome a{color:inherit}
.baixa-grupo__nome a:hover{color:var(--brasa)}

.baixa-lista{list-style:none;margin:0;padding:0}
.baixa-item + .baixa-item{border-top:1px solid var(--risco)}
.baixa-item a{
  display:grid;align-items:baseline;gap:var(--e3);
  grid-template-columns:minmax(9rem,10rem) minmax(0,1fr) auto;
  padding:.72rem 0;color:var(--tinta-2);
  transition:color var(--rapido) var(--curva);
}
.baixa-item a:hover{color:var(--tinta-1)}
.baixa-item a:hover .baixa-item__titulo{color:var(--brasa)}
.baixa-item__tipo{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);
}
.baixa-item__titulo{font-size:var(--t-sm)}
.baixa-item__peso{font-size:var(--t-xs);color:var(--tinta-3);white-space:nowrap}

.baixa-vazio{margin-top:var(--e10);color:var(--tinta-2);font-size:var(--t-md)}
.baixa-vazio a{color:var(--brasa)}

/* No celular o rótulo do tipo sobe para cima do título: três colunas
   espremidas quebravam o nome da família no meio. */
@media (max-width:36rem){
  .baixa-item a{grid-template-columns:minmax(0,1fr) auto;gap:var(--e1) var(--e3)}
  .baixa-item__tipo{grid-column:1 / -1}
}

/* ═════════════════════ ROLAGEM INFINITA E VOLTAR AO TOPO ═════════════════════
   A paginação não é removida do DOM: fica fora da tela, para o rastreador
   continuar seguindo rel=next. Sem JS ela reaparece e o catálogo funciona. */

.paginacao--silenciosa{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.sentinela{height:1px}

.carregando{
  display:flex;align-items:center;gap:var(--e3);
  margin-top:var(--e10);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
}
.carregando[hidden]{display:none}
/* Um risco que cresce e recua: é a linguagem da prancha, não um spinner. */
.carregando__risco{
  width:var(--e12);height:1px;background:var(--tinta-3);
  transform-origin:left center;animation:risco 1.1s var(--curva) infinite;
}
@keyframes risco{
  0%,100%{transform:scaleX(.15);opacity:.4}
  50%    {transform:scaleX(1);opacity:1}
}

.ao-topo{
  position:fixed;right:var(--e5);bottom:var(--e5);z-index:40;
  width:2.75rem;height:2.75rem;display:grid;place-items:center;
  background:var(--fundo-1);color:var(--tinta-2);
  border:1px solid var(--risco-forte);border-radius:0;
  cursor:pointer;opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity var(--rapido) var(--curva),transform var(--rapido) var(--curva),
             color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.ao-topo--visivel{opacity:1;pointer-events:auto;transform:none}
.ao-topo:hover{color:var(--brasa);border-color:var(--brasa)}
.ao-topo:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
.ao-topo svg{width:1rem;height:1rem}

@media (prefers-reduced-motion:reduce){
  .carregando__risco{animation:none;transform:scaleX(1)}
}

/* Quadro branco da foto oficial na ficha de família. O fundo é branco em
   qualquer tema de propósito: a peça foi fotografada contra branco, e recortar
   fundo foi descartado em 19/08. */
.moldura--foto{
  background:#fff;
  border-color:color-mix(in srgb,#000 12%,transparent);
  padding:0;
}
/* `.peca__desenho` nasce com altura fixa e `object-fit:cover`, que é o que
   uniformiza a grade do catálogo. Na ficha a foto é o assunto da página e tem
   de aparecer inteira, na proporção em que foi fotografada. */
.moldura--foto .peca__desenho{
  width:100%;height:auto;background:#fff;border:0;overflow:visible;
}
.moldura--foto .peca__desenho img{
  display:block;width:100%;height:auto;object-fit:contain;
}
/* 31/08 · AMBIENTADA NA FICHA SEM FAIXA: o quadro herda `aspect-ratio:1` da
   grade e a foto de ambiente é paisagem — contain num quadrado branco eram as
   "faixas brancas acima/abaixo" do plafon Dallas. Aqui o quadro abraça o
   aspecto DA FOTO: inteira, sem faixa e sem corte. */
.moldura--foto .peca__desenho--ambiente{aspect-ratio:auto}

.moldura--foto figcaption{
  background:var(--fundo-1);width:100%;
  padding:var(--e3) var(--e4);margin:0;
}

/* ─── O DESENHO COTADO NO QUADRO BRANCO DA PRANCHA ───────────────────────────
   Declarado DEPOIS de `.moldura` de propósito: as duas são seletor de classe
   única, mesma especificidade, e quem vem depois ganha. O fundo da `.moldura`
   é escuro, e o desenho é um JPG de fundo branco nativo — sem esta regra ele
   entraria como um retângulo branco flutuando num quadro cinza.

   Vem em <img>, não em SVG: os 185 desenhos são raster de 1200×1200 extraídos
   do vetor do catálogo. É por isso que `.moldura svg` não os alcança e a
   altura máxima precisa ser repetida aqui, na mesma faixa. */
/* ─── A PRANCHA, PADRONIZADA EM 26/08 ────────────────────────────────────────
   Havia duas aparências para a mesma coisa: 192 famílias mostravam o desenho
   RASTER, com o branco queimado no arquivo, e 74 mostravam o SVG de traço, que
   acompanha o tema. O Herasmo aprovou a segunda (a Aivi) e pediu que fosse uma
   só. Agora as duas são a mesma prancha, e ela vira com o tema.

   O raster não foi regerado: ele é traço puro — medido, 98 a 99% do quadro em
   branco e 0,3 a 1% em preto, com menos de 1% de meio-tom — então `invert` no
   tema escuro devolve linha clara em campo preto, que é a polaridade do SVG ao
   lado. No claro o arquivo já está na polaridade certa e o filtro sai.

   O campo da prancha é CHAPADO, `#000` no escuro e `#fff` no claro, e não o
   `--fundo-2` translúcido da `.moldura` comum. A razão é medida: com o fundo
   translúcido sobra uma emenda visível entre o campo do raster e o respiro da
   moldura, porque o preto do arquivo invertido não é o mesmo preto do painel.
   `mix-blend-mode` não fecha essa diferença — testadas cinco variantes
   (lighten, screen, difference, no <img> e no <picture>) e as cinco medem a
   MESMA emenda. Chapar o painel resolve por construção, sem regerar os 597
   arquivos, e a prancha lê como plano de fundo do desenho, que é o que ela é. */
.moldura--desenho,
.moldura:has(> svg){
  background:#000;
  border-color:color-mix(in srgb,#fff 14%,transparent);
}
:root[data-tema=claro] .moldura--desenho,
:root[data-tema=claro] .moldura:has(> svg){
  background:#fff;
  border-color:color-mix(in srgb,#000 12%,transparent);
}
.moldura--desenho{padding:0}
.moldura--desenho picture{display:block;width:100%}
.moldura--desenho .desenho-tecnico{
  display:block;width:100%;height:auto;
  max-height:clamp(280px,38vw,480px);
  object-fit:contain;
  filter:invert(1);
}
:root[data-tema=claro] .moldura--desenho .desenho-tecnico{
  filter:none;
}

/* ═══════════════════ O CARROSSEL DO TOPO DA FICHA ═══════════════════
   Pedido do Herasmo em 26/08: foto e desenho técnico juntos, no topo, em
   quadros que se percorrem. Medido no banco em 27/08: 184 das 287 famílias
   publicadas têm dois quadros ou mais, 69 têm um e 34 não têm nenhum.

   Duas medidas decidem esta folha, e as duas foram tiradas do banco, não do
   olho: **as 445 fotos publicadas e os 192 desenhos são TODOS quadrados**,
   1,00 de proporção, sem uma exceção. Por isso o quadro é `aspect-ratio:1` e
   os quadros têm todos a mesma altura sem precisar de `stretch`, de altura
   fixa ou de medida arbitrária — a pista não pula ao trocar de quadro.

   ⚠️ Nenhum quadro é escondido, e a razão é a regressão de 26/08: conteúdo que
   o navegador oculta não volta com `display` no filho. Aqui a pista SEMPRE
   rola — sem JS ela é uma faixa que se arrasta com o dedo ou com o trackpad, e
   é por isso que as guias começam fora da tela e só o JS as acende. Botão que
   não funciona é pior que botão que não existe. */
.carrossel{display:grid;gap:var(--e5)}
/* A pista precisa ser POSICIONADA: as setas são absolutas dentro do carrossel. */
.carrossel{position:relative}
.carrossel__pista{
  display:flex;gap:var(--e5);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* ── A BARRA SOME — 28/08 ────────────────────────────────────────────
     A "barra horizontal" que a Ana pediu para tirar era a de ROLAGEM, que o
     navegador desenha sozinha embaixo da imagem. Ela não é controle de
     carrossel: ninguém a lê como "há mais fotos aqui". As setas dizem isso,
     e a pista continua arrastável com o dedo e rolável com o trackpad. */
  scrollbar-width:none;
}
.carrossel__pista::-webkit-scrollbar{display:none}

/* ── AS SETAS ───────────────────────────────────────────────────────────
   Sobre a imagem, na borda do quadro, e só com JS: `--vivo` é a classe que o
   script acende. Sem JS a pista se arrasta e a seta não existe — botão morto
   é pior que botão nenhum. */
.carrossel__seta{
  position:absolute;top:calc(50% - 1.4rem);transform:translateY(-50%);
  display:none;place-items:center;
  width:44px;height:44px;                 /* a régua de toque da casa */
  color:var(--tinta-1);
  background:color-mix(in srgb,var(--fundo-1) 82%,transparent);
  border:1px solid var(--risco-forte);border-radius:2px;
  cursor:pointer;z-index:3;
  backdrop-filter:blur(6px);
  transition:color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.carrossel--vivo .carrossel__seta{display:grid}
.carrossel__seta svg{width:20px;height:20px}
.carrossel__seta--antes{left:var(--e3)}
.carrossel__seta--depois{right:var(--e3)}
.carrossel__seta:hover{color:var(--brasa);border-color:var(--tinta-3)}
.carrossel__seta:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
.carrossel__seta[disabled]{opacity:.32;cursor:default}
.carrossel__seta[disabled]:hover{color:var(--tinta-1);border-color:var(--risco-forte)}
@media(prefers-reduced-motion:reduce){.carrossel__seta{transition:none}}

/* O quadro do carrossel vira gatilho de zoom pelo JS; o `<dialog>` é o que já
   existe para a ambientada e a coleção aplicada. Aqui só o cursor e o foco. */
.carrossel__quadro .peca__desenho[data-zoom]{cursor:zoom-in}
.carrossel__quadro .peca__desenho[data-zoom]:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .carrossel__pista{scroll-behavior:auto}
}
.carrossel__quadro{
  flex:0 0 100%;min-width:0;
  scroll-snap-align:center;scroll-snap-stop:always;
}
/* Um quadro só não é carrossel: sem pista rolável, sem guia, sem nada a
   percorrer. 69 famílias caem aqui. */
.carrossel--unico .carrossel__pista{overflow:visible}

/* O quadro é a moldura de sempre, com o campo da imagem em quadrado e a
   legenda embaixo. `1fr auto` para a legenda encostar no pé, e não flutuar no
   meio quando o campo é mais alto que a imagem. */
.carrossel__quadro{grid-template-rows:1fr auto}
.carrossel__quadro .peca__desenho,
.carrossel__quadro picture,
.carrossel__quadro > svg{aspect-ratio:1;width:100%}
.carrossel__quadro .peca__desenho img,
.carrossel__quadro .desenho-tecnico{
  width:100%;height:100%;object-fit:contain;
}
/* O teto de altura da `.moldura--desenho` foi feito para o desenho dividir a
   seção com a ficha. No carrossel ele mediria menos que a foto ao lado e a
   pista pularia de altura entre um quadro e o outro. */
.carrossel__quadro .desenho-tecnico{max-height:none}
/* 31/08 · ambientada no carrossel PREENCHE o quadrado: contain deixava as
   faixas brancas acima/abaixo que a Ana viu no plafon Dallas. O quadrado fica
   (a pista não pode pular de altura entre quadros); quem cede é a borda da
   foto de ambiente, que é atmosfera e aguenta o corte. */
.carrossel__quadro .peca__desenho--ambiente img{object-fit:cover}
/* 01/09 · o CHAPADO no carrossel também cobre: o quadro genérico do carrossel
   redeclara contain depois da regra do grid, e as faixas do fundo escuro
   voltavam na ficha (apontamento do Herasmo, Viga/pg de produto). */
.carrossel__quadro .peca__desenho img.thumb-padrao{object-fit:cover}
.carrossel__quadro > svg{max-height:none;height:100%}

/* As guias: a palavra, não a miniatura. Os quadros são foto sobre branco e
   prancha de traço sobre preto, e em 44 px eles não se distinguem — a palavra
   distingue. Herdam a pastilha do configurador, que é a mesma escolha dita no
   mesmo lugar. */
.carrossel__guias{display:none;gap:var(--e2);flex-wrap:wrap}
.carrossel--vivo .carrossel__guias{display:flex}
.carrossel__guia{
  font:inherit;font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;
  background:none;color:var(--tinta-3);
  border:1px solid var(--risco);
  padding:.42rem .8rem;cursor:pointer;
  transition:border-color var(--rapido) var(--curva),
             color var(--rapido) var(--curva);
}
.carrossel__guia:hover{border-color:var(--tinta-3);color:var(--tinta-1)}
.carrossel__guia:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
.carrossel__guia--on{
  border-color:var(--brasa-tinta);color:var(--brasa-tinta);
}
/* No dedo o alvo vai a 44 px, que é a decisão de 26/08 — e o alvo cresce sem o
   desenho crescer junto, pelo mesmo mecanismo da amostra de acabamento. */
@media(max-width:36rem){
  .carrossel__guia{position:relative}
  .carrossel__guia::after{content:"";position:absolute;inset:-.55rem -.2rem}
  /* A folga ENTRE FILEIRAS tem de caber a expansão dos dois lados. Com os
     desenhos das outras peças (27/08) a Titan passou a ter quatro guias, elas
     quebraram em duas fileiras e os alvos invisíveis se sobrepuseram: o alvo
     medido caiu de 48 para 41 px e, pior, tocar entre duas guias acionava a de
     cima. 0,55rem de cada lado pedem 17,6 px de vão; `--e2` dava 8. */
  .carrossel__guias{row-gap:var(--e5)}
}
/* A legenda fica DENTRO da prancha, como no SVG ao lado: faixa própria em
   `--fundo-1` deixava duas tonalidades no mesmo quadro. */
.moldura--desenho figcaption{
  background:transparent;width:100%;
  padding:var(--e3) var(--e4);margin:0;
  color:color-mix(in srgb,#fff 62%,transparent);
}
:root[data-tema=claro] .moldura--desenho figcaption{
  color:color-mix(in srgb,#000 58%,transparent);
}

/* ═══════════════════════════ CANAIS DE ATENDIMENTO ═══════════════════════════
   Três caminhos lado a lado, sem hierarquia visual entre eles: quem chega já
   sabe o que quer, e ordenar por importância só atrapalha quem quer o terceiro. */

.canais{
  margin-top:var(--e10);
  /* O respiro ANTES do filete NÃO mora mais aqui. Este bloco tentou resolver
     em 25/08 com `margin-bottom:var(--e14)`, e `--e14` não existe na escala
     (1,2,3,4,5,6,8,10,12,16,20,24,32): a declaração computava ZERO, calada, e
     a folga medida em 26/08 seguia em 0 px. Agora quem resolve é a regra de
     sistema em LAYOUT, no `section:not(.secao):has(+ .secao--filete)`, que
     vale para as 304 fichas e para toda página com o mesmo arranjo. */
  display:grid;gap:var(--e6);
  /* 21rem e não 17rem: com 17 a grade caía em QUATRO colunas de 276 px em
     1440, e em 1280 caía em TRÊS de 364 — a tela maior dava o card menor, e
     era isso que impedia dois botões lado a lado. Com 21rem o desktop fica em
     três colunas de 364 px em qualquer largura, e os cinco canais arrumam em
     3 + 2. Medido em 31/08. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
}
.canal{
  border:1px solid var(--risco-forte);
  padding:var(--e6);
  display:flex;flex-direction:column;gap:var(--e3);
}
.canal__rotulo{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);margin:0;
}
.canal__chamada{font-size:var(--t-lg);margin:0;line-height:1.15}
.canal__texto{color:var(--tinta-2);font-size:var(--t-sm);margin:0;flex:1}
/* A fileira de ações do canal. Ela envolve UM ou DOIS botões, e é `wrap`
   porque a caixa é coluna de grade: em tela estreita os dois empilham em vez
   de estourar. `align-self:start` sai do botão e vem para a fileira — senão o
   botão esticaria na largura toda da caixa. */
.canal__acoes{
  display:flex;flex-wrap:wrap;gap:var(--e3);
  align-self:start;margin-top:var(--e2);
}
.canal__acao{
  border:1px solid var(--brasa);color:var(--brasa);
  padding:.62rem var(--e5);font-size:var(--t-sm);
  transition:background var(--rapido) var(--curva),
             color var(--rapido) var(--curva),
             border-color var(--rapido) var(--curva);
}
.canal__acao:hover{background:var(--brasa);color:var(--fundo-0)}
/* O segundo canal é botão de verdade, com a MESMA caixa e o mesmo alvo — o que
   muda é o peso. Contorno calmo em vez de brasa: os dois são portas reais para
   a mesma equipe, e a ordem já diz qual é a primeira. */
.canal__acao--calmo{
  border-color:var(--risco-forte);color:var(--tinta-2);
}
.canal__acao--calmo:hover{
  background:transparent;border-color:var(--tinta-1);color:var(--tinta-1);
}
/* No dedo, o alvo dos dois vai a 44 px sem o desenho crescer — decisão de
   26/08, mesmo mecanismo da amostra de acabamento e da guia do carrossel. */
@media(max-width:36rem){
  .canal__acao{position:relative}
  .canal__acao::after{content:"";position:absolute;inset:-.42rem 0}
}

.endereco{
  font-style:normal;color:var(--tinta-2);
  font-size:var(--t-md);line-height:1.7;padding-top:var(--e5);
}
.endereco a{color:var(--brasa)}

/* ═════════════════════════════ SHOWROOM ═════════════════════════════
   Página de conversão. Os motivos vêm em blocos de largura igual: nenhum é
   "o principal", porque o que convence um arquiteto não é o que convence um
   lojista, e ordenar por importância esconderia o argumento do segundo. */

/* QUATRO colunas para quatro motivos. Em `auto-fit` com piso de 20rem eles
   caíam 3 + 1, e o órfão na segunda fileira lia como sobra. O piso desce para
   15rem e a coluna é declarada em 4 a partir de 76rem. */
.motivos{
  margin-top:var(--e10);
  display:grid;gap:var(--e6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
@media(min-width:76rem){.motivos{grid-template-columns:repeat(4,1fr)}}

/* Caixa com filete e um NÚMERO de chamada em brasa. O número é a marca de
   chamada do desenho técnico — o balãozinho que aponta a cota —, não ícone
   arredondado genérico acima do título. Sai do contador do CSS, então
   acrescentar ou remover motivo não pede renumeração à mão. */
.motivos{counter-reset:motivo}
.motivo{
  counter-increment:motivo;
  border:1px solid var(--risco);
  background:var(--fundo-1);
  padding:var(--e6) var(--e5) var(--e6);
  transition:border-color var(--medio) var(--curva),background var(--medio) var(--curva);
}
.motivo:hover{border-color:var(--risco-forte);background:var(--fundo-2)}
.motivo::before{
  content:counter(motivo,decimal-leading-zero);
  display:block;font-family:var(--display);font-size:var(--t-lg);line-height:1;
  color:var(--brasa);margin-bottom:var(--e4);
}
.motivo h3{
  font-size:var(--t-md);font-weight:500;margin:0 0 var(--e3);line-height:1.3;
  padding-bottom:var(--e3);border-bottom:1px solid var(--risco-forte);
}
.motivo p{color:var(--tinta-2);font-size:var(--t-sm);line-height:1.7;margin:0}

/* ── galeria do showroom ─────────────────────────────────────────────────
   Mosaico, não grade regular: o acervo tem paisagem e retrato, e forçar a
   mesma caixa em ambos corta a peça no retrato. As paisagens ocupam duas
   colunas; os retratos, uma. */
.mosaico{
  margin-top:var(--e10);
  display:grid;gap:var(--e3);
  /* UMA coluna no celular, de propósito. Com `auto-fit` o número de colunas
     variava com a largura e a fileira ora tinha duas células, ora uma —
     medido em 390 px: 12 fileiras, umas com 2 e outras com 1, e foto sozinha
     no meio da pilha é exatamente o que a regra do Herasmo proíbe. Empilhado,
     nenhuma foto está solta: todas ocupam a largura inteira. */
  grid-template-columns:1fr;
  grid-auto-flow:dense;
}
@media(min-width:44rem){.mosaico{grid-template-columns:repeat(2,1fr)}}
@media(min-width:60rem){.mosaico{grid-template-columns:repeat(4,1fr)}}
/* A CÉLULA é `.mosaico__foto` e não mais `figure`, desde 30/08 (item 19.8):
   com zoom ela vira `<button>` de verdade, e o seletor tinha de deixar de
   depender da etiqueta. Os resets de botão estão aqui para as duas se
   desenharem iguais — quem olha não deve conseguir dizer qual é qual. */
.mosaico__foto{
  margin:0;padding:0;overflow:hidden;
  background:var(--fundo-2);border:1px solid var(--risco);
  display:block;width:100%;font:inherit;color:inherit;text-align:inherit;
}
.mosaico__foto[data-zoom]{cursor:zoom-in}
.mosaico__foto[data-zoom]:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
.mosaico__foto > picture{display:block;width:100%;height:100%}
.mosaico img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--lento) var(--curva),filter var(--lento) var(--curva);
  filter:brightness(.88)}
.mosaico__foto:hover img{transform:scale(1.04);filter:brightness(1)}

/* Quem manda na altura é a FILEIRA, não a célula.
   Até 26/08 cada célula tinha proporção própria — 16/9 na larga, 3/4 na normal —
   e as duas não fecham a mesma altura: medido a 1440 px, 327 px contra 380, com
   53 px de vão em todas as seis fileiras. Apontamento do Herasmo: "as
   horizontais da esquerda devem preencher toda a altura do bloco que as
   verticais da direita definem".

   Agora a altura vem da BANDA e a foto entra em `cover`. O vão some por
   construção, sem depender de a proporção da foto bater com a da célula. E a
   banda alterna em ciclo de três, que é o "níveis diferentes" que ele pediu no
   mesmo apontamento — o lado da larga troca a cada fileira, no controller. */
.mosaico__foto{aspect-ratio:auto;height:var(--banda)}
.mosaico__foto[data-banda="0"]{--banda:clamp(15rem,26vw,25rem)}
.mosaico__foto[data-banda="1"]{--banda:clamp(12rem,20vw,19rem)}
.mosaico__foto[data-banda="2"]{--banda:clamp(13rem,23vw,22rem)}
.mosaico .larga{grid-column:span 2}
/* Sobra de UMA foto toma a fileira inteira em vez de ficar sozinha na coluna:
   a regra dura do Herasmo é que nenhuma foto fique solta no eixo final. */
.mosaico .cheia{grid-column:1 / -1}

/* DEPOIS de `.larga` e `.cheia` de propósito: as duas são seletor de classe e
   mesma especificidade, e quem vem por último ganha. Escrito antes delas, este
   bloco perdia — é a TERCEIRA vez que "regra nova antes da base perde" aparece
   nesta folha.

   O que ele conserta: com uma coluna só, `grid-column:span 2` não tem para onde
   ir e o navegador CRIA uma coluna implícita. Medido em 390 px:
   `grid-template-columns` computava `2px 333.125px` e nascia uma célula de
   2 px de largura ao lado de cada foto. Empilhado, nenhuma foto fica solta. */
@media(max-width:43.99rem){
  .mosaico .larga,.mosaico .cheia{grid-column:auto}
  .mosaico__foto{height:clamp(13rem,58vw,20rem)}
}
@media(prefers-reduced-motion:reduce){
  .mosaico img{transition:none;filter:brightness(.94)}
  .mosaico__foto:hover img{transform:none}
}

.showroom__acao{
  margin-top:var(--e8);
  display:flex;flex-wrap:wrap;align-items:start;
  gap:var(--e8) var(--e12);
}
.showroom__acao .endereco{padding-top:0}

/* `.grade--lancamentos` e `.assinada-destaque` saíram em 21/08 junto com as
   seções que as usavam: os destaques da Ana passaram para dentro do hero, e
   lá a lista tem escala de chip, não de card. Nenhuma outra tela referenciava
   as duas. */

/* Arquivo catalogado que ainda não subiu: mesma linha, sem alvo de clique e com
   a tinta um passo atrás. Some o cursor de link, some o hover. */
.baixa-item--espera{
  display:grid;align-items:baseline;gap:var(--e3);
  grid-template-columns:minmax(9rem,10rem) minmax(0,1fr) auto;
  padding:.72rem 0;color:var(--tinta-3);
}
.baixa-item--espera .baixa-item__peso{
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:36rem){
  .baixa-item--espera{grid-template-columns:minmax(0,1fr) auto;gap:var(--e1) var(--e3)}
  .baixa-item--espera .baixa-item__tipo{grid-column:1 / -1}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE FAMÍLIA — a peça e o configurador

   O coração do projeto: é a tela em que o especificador sai com a string exata
   que entra no pedido. A composição é a do protótipo aprovado — foto grande no
   quadro branco à esquerda, dado e escolha à direita, código montado ao vivo em
   caixa de acento.

   Nada aqui inventa cor: as amostras usam o hex real dos 28 acabamentos da
   tabela `acabamentos`, e o acento continua sendo o G2 Dourado do catálogo.
   ═══════════════════════════════════════════════════════════════════════════ */

.peca-topo{padding-block:clamp(2.5rem,6vh,4rem) 0}
.peca-topo__grade{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media(min-width:60rem){
  .peca-topo__grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* a foto acompanha a rolagem do configurador: trocar de diâmetro sem ver a
     peça é escolher no escuro */
  .peca-topo__imagem{position:sticky;top:var(--e6)}
}
/* A linha de meta acima do título: o TIPO DA PEÇA à esquerda, o selo de origem
   encostado na borda direita.

   `align-items` era `baseline` e era ela que subia o "Feito no Brasil": o selo
   é um `inline-flex` cuja primeira caixa é a bandeira, um `inline-block` sem
   texto — a baseline dele cai na aresta de baixo do desenho, e alinhar por ela
   erguia o bloco inteiro alguns pixels acima do rótulo. Com `center` os dois
   se acertam pelo meio e o desalinho some.

   `margin-left:auto` no selo, e não `space-between` no pai: assim ele continua
   à direita quando o rótulo quebra de linha, e não fica órfão no meio. */
.peca-topo__origem{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.peca-topo__origem .feito-br{margin-left:auto}
.peca-topo__titulo{
  font-size:var(--t-2xl);margin-top:var(--e3);line-height:1.02;letter-spacing:-.02em;
}
.peca-topo__prosa{
  margin-top:var(--e5);color:var(--tinta-2);
  font-size:var(--t-md);line-height:1.62;max-width:46ch;
}
/* moldura sem imagem nenhuma: mantém o mesmo peso de quadro para a coluna não
   colapsar e a página não trocar de composição por falta de arquivo */
.moldura--vazia{min-height:clamp(220px,30vw,360px);padding:var(--e8)}

/* ── os passos ───────────────────────────────────────────────────────────── */
.config{margin-top:var(--e10);border-top:1px solid var(--risco);padding-top:var(--e8)}
.passo + .passo{margin-top:var(--e6)}
.passo__rotulo{
  display:flex;flex-wrap:wrap;gap:var(--e2);align-items:baseline;
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 var(--e3);
}
.passo__n{color:var(--tinta-3);opacity:.7}
.passo__n::after{content:' ·';opacity:.6}
.passo__grupo{color:var(--brasa-tinta);font-weight:500;letter-spacing:.1em}
.passo__nota{color:var(--tinta-3);letter-spacing:.06em;text-transform:none;font-style:italic}

.opcoes{display:flex;flex-wrap:wrap;gap:var(--e2)}
.passo__opcao{
  font:inherit;font-size:var(--t-sm);
  background:none;color:var(--tinta-2);
  border:1px solid var(--risco);
  padding:.4rem .8rem;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--rapido) var(--curva),
             color var(--rapido) var(--curva),
             background var(--rapido) var(--curva);
}
.passo__opcao:hover{border-color:var(--tinta-3);color:var(--tinta-1)}
.passo__opcao:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
/* tinta literal, e não var(--fundo-1): no tema claro o fundo-1 é papel quase
   branco e daria branco sobre dourado, 1,9:1. É o mesmo #0B0B0C que
   `.botao--barra` já usa sobre brasa — 10,7:1 nos dois temas. */
.passo__opcao--on{
  background:var(--brasa);border-color:var(--brasa);
  color:#0B0B0C;font-weight:600;
}
/* combinação que a fábrica não produz. Tracejado e apagada, e continua na
   tela: sumir com a opção esconderia que a peça tem aquele diâmetro. */
.passo__opcao--fora,
.passo__opcao:disabled{
  opacity:.34;cursor:not-allowed;border-style:dashed;
  background:none;color:var(--tinta-3);font-weight:400;
}
.passo__opcao--fora:hover{border-color:var(--risco);color:var(--tinta-3)}

/* ── amostras de acabamento ──────────────────────────────────────────────── */
.amostras-op{display:flex;flex-wrap:wrap;gap:var(--e2)}
.amostra-op{
  background:none;border:0;padding:0;cursor:pointer;line-height:0;
  outline-offset:3px;
}
.amostra-op__cor{
  display:block;width:1.6rem;height:1.6rem;
  border:1px solid color-mix(in srgb,var(--tinta-1) 24%,transparent);
  box-shadow:0 0 0 0 var(--brasa);
  transition:box-shadow var(--rapido) var(--curva);
}
.amostra-op:hover .amostra-op__cor{box-shadow:0 0 0 1px var(--tinta-3)}
.amostra-op:focus-visible{outline:2px solid var(--brasa)}
/* o anel de seleção é externo e não cobre a cor — cor de acabamento julgada
   por área pequena já é difícil, e marcar por cima falsearia a amostra */
.amostra-op--on .amostra-op__cor{box-shadow:0 0 0 2px var(--brasa)}
.amostra-op--on:hover .amostra-op__cor{box-shadow:0 0 0 2px var(--brasa)}
.amostra-op--fora,
.amostra-op:disabled{cursor:not-allowed}
.amostra-op--fora .amostra-op__cor{opacity:.22;box-shadow:none}

/* ═══════════════ A CARTA PASSA A SER FOTO ═══════════════
   Decisão da Ana, trazida pelo Herasmo em 27/08: *"o acabamento deve
   representar o mais próximo da realidade possível"*. A paleta em hex serviu
   para aprovar o projeto; a carta de produção é a amostra fotografada.

   E a troca tem número. Comparados os 378 pares possíveis entre os 28
   acabamentos, em pastilha de 28 px: **o chapado deixa 21 pares
   indistinguíveis e a foto deixa 10**. O hex achatava exatamente o que separa
   um Dourado polido de um Dourado escovado — o brilho e a direção do risco.

   A foto vem por `background-image`, e a COR do banco fica embaixo dela: se o
   arquivo faltar — acabamento novo, ainda não fotografado —, o chapado aparece
   no lugar e a carta não abre buraco. Campo vazio dito em CSS. */

/* A amostra escura precisa de contorno próprio: o Preto Polido mede #010100 e
   some contra o `--fundo-1`. Quem marca é o gerador, pela luminância medida da
   foto; a folha só obedece. */
.amostra--escura{
  border-color:color-mix(in srgb,var(--tinta-1) 52%,transparent);
}
:root[data-tema=claro] .amostra--escura{
  border-color:color-mix(in srgb,#000 26%,transparent);
}

/* ── O NOME DO ACABAMENTO, sem depender de `title` ─────────────────────────
   O `title` do navegador não existe no dedo e demora um segundo no ponteiro —
   e o que ele diz ("SV-F — Sálvia (G2)") é justamente o que falta para
   escolher. O balão desenhado aparece no ponteiro E no foco de teclado, e traz
   a amostra em 80 px, que é o tamanho em que a textura de fato aparece.

   No toque nada disso é preciso: tocar a amostra JÁ a escolhe, e o nome
   aparece embaixo da fileira, no `.passo__escolhido`, que existe desde 21/08.
   Por isso o balão é `@media(hover:hover)` — em tela de dedo ele não entra e
   não fica um painel preso na tela depois do toque. */
/* `hover:hover` sozinho não basta: o emulador de celular do Chromium ainda
   responde `hover:hover`, e o balão apareceu preso na tela num iPhone 13
   emulado. `pointer:fine` é o que separa dedo de ponteiro de verdade. */
/* ⚠️ O balão nasce FORA DA TELA, e isso não é detalhe. Na primeira versão ele
   só ganhava estilo dentro da media query — e fora dela era um `<span>` inline
   comum, com o texto visível ao lado da amostra. Medido no iPhone 13: o nome
   aparecia solto na fileira e ainda esticava o botão de 30 para **144 px de
   largura**. Regra da casa, terceira vez esta semana: o que só deve aparecer em
   certa condição precisa estar ESCONDIDO por padrão, nunca só sem estilo. */
.amostra-op__balao{display:none}

@media(hover:hover) and (pointer:fine){
  .amostra-op{position:relative}
  .amostra-op__balao{
    position:absolute;left:50%;bottom:calc(100% + .5rem);
    /* `--desvio` é o empurrão horizontal que o `configurador.js` calcula quando
       o balão ia sair da tela (item 4.8). Sem JS ele vale 0 e o balão fica
       centrado, que é o comportamento de sempre. */
    transform:translate(calc(-50% + var(--desvio,0px)),.25rem);
    display:grid;grid-template-columns:auto 1fr;gap:var(--e3);
    align-items:center;white-space:nowrap;
    background:var(--fundo-2);border:1px solid var(--risco-forte);
    padding:var(--e2) var(--e3);
    font-size:var(--t-xs);color:var(--tinta-1);line-height:1.3;
    opacity:0;pointer-events:none;z-index:5;
    transition:opacity var(--rapido) var(--curva),
               transform var(--rapido) var(--curva);
  }
  .amostra-op__balao b{display:block;font-weight:500}
  /* O código desce para a própria linha. Sem o `display:block` ele encostava no
     nome e saía "ChumboCH-M · G2" — pego na captura, não pelo medidor. */
  .amostra-op__balao i{
    display:block;margin-top:.15rem;
    font-style:normal;font-size:.92em;color:var(--tinta-3);letter-spacing:.06em;
  }
  .amostra-op__balao span{
    /* 3,9rem e não 3rem: a Aline escreveu o número na revisão de 28/08 —
       "Zoom de detalhamento das cores: aumentar 30%". Os arquivos de amostra
       nascem em 320 px, então a pastilha maior não perde nitidez. */
    display:block;width:3.9rem;height:3.9rem;
    border:1px solid color-mix(in srgb,var(--tinta-1) 24%,transparent);
    background-size:cover;background-position:center;
  }
  .amostra-op:hover .amostra-op__balao,
  .amostra-op:focus-visible .amostra-op__balao{
    opacity:1;transform:translate(calc(-50% + var(--desvio,0px)),0);
  }
}
@media(prefers-reduced-motion:reduce){
  .amostra-op__balao{transition:none}
}
.amostra-op--fora:hover .amostra-op__cor{box-shadow:none}

/* ─── A FILEIRA DECLARADA: acabamento interno ────────────────────────────────
   Depois de `.amostra-op` de propósito — mesma especificidade, e quem vem
   depois ganha. Ela desliga o cursor e o realce de foco porque aqui não há
   clique: a fileira interna é o que o catálogo declara, não uma escolha que
   muda o código. Amostra que responde ao ponteiro e não muda nada prometeria
   uma interação que não existe, que é o defeito que o botão sem nome já
   custou nesta ficha. */
.amostra-op--parada{cursor:default}
.amostra-op--parada:hover .amostra-op__cor{box-shadow:0 0 0 0 var(--brasa)}
.acab-declarado{margin-top:var(--e8)}
.acab-declarado__rotulo{
  display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap;
  margin:0 0 var(--e3);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
}
.passo__escolhido{
  margin:var(--e3) 0 0;font-size:var(--t-xs);color:var(--tinta-2);
  letter-spacing:.04em;min-height:1em;
}

/* ── o código que entra no pedido ────────────────────────────────────────── */
.pedido{
  margin-top:var(--e8);
  border:1px solid color-mix(in srgb,var(--brasa) 42%,transparent);
  background:var(--brasa-veu);
  padding:var(--e6);
}
.pedido__rotulo{
  margin:0;font-size:var(--t-xs);letter-spacing:var(--rastro);
  text-transform:uppercase;color:var(--brasa-tinta);
}
.pedido__codigo{
  margin:var(--e3) 0 0;
  font-size:var(--t-lg);
  font-weight:500;letter-spacing:-.005em;line-height:1.15;
  color:var(--tinta-1);word-break:break-word;
}
.resumo{
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e8);
  margin-top:var(--e5);padding-top:var(--e4);
  border-top:1px solid color-mix(in srgb,var(--brasa) 26%,transparent);
}
.resumo__item .chave{
  display:block;font-size:var(--t-xs);color:var(--tinta-3);
  letter-spacing:.08em;text-transform:uppercase;
}
.resumo__item .valor{display:block;font-size:var(--t-md);font-weight:500;margin-top:var(--e1)}
.pedido__acao{margin:var(--e5) 0 0;font-size:var(--t-sm)}

/* ── a ficha em três colunas ──────────────────────────────────────────────
   Substitui a `.especifica`, que era desenho à esquerda e ficha à direita. O
   desenho subiu para o carrossel do topo em 27/08 e a seção ficou com a
   largura inteira — que é o que o protótipo pede (`preview/produto.html`,
   `.specgrid` em `repeat(3,1fr)`).

   `columns` e não `grid`, e a razão é a variação: o configurador escreve de 4 a
   8 linhas conforme a família, mais 3 ou 4 fixas. `grid` preencheria em
   FILEIRA — as três primeiras lado a lado —, e ficha se lê de cima para baixo,
   uma coluna de cada vez, como a impressa. `columns` é o único que faz isso
   sem saber quantas linhas existem.

   `break-inside:avoid` porque valor longo ("Bivolt 127 / 220 V") quebra em duas
   linhas, e uma linha da ficha partida entre duas colunas é ilegível. */
/* A linha de cota acima das três colunas. Sem ela, uma coluna com poucas
   linhas — e há famílias com sete — fica pendurada no ar, porque a régua da
   ficha é só o `border-bottom` de cada linha. Com a linha em cima, as três
   colunas partem do mesmo lugar e leem como as três faixas de uma prancha. */
.spec{margin-top:var(--e10);border-top:1px solid var(--risco-forte);padding-top:var(--e6)}
.spec .ficha-viva__linha{break-inside:avoid}
@media(min-width:60rem){
  .spec{columns:3;column-gap:clamp(2rem,4.2vw,3.5rem)}
}
@media(min-width:48rem) and (max-width:59.99rem){
  .spec{columns:2;column-gap:clamp(2rem,4.2vw,3.5rem)}
}
/* A âncora do JS não gera caixa e não pode virar uma linha vazia no meio da
   coluna. `hidden` já resolve, e a regra fica explícita porque `columns` conta
   filhos, não pixels. */
.spec [data-viva-fim]{display:none}
.ficha-viva__linha{
  display:flex;justify-content:space-between;gap:var(--e5);
  padding:.62rem 0;border-bottom:1px solid var(--risco);
  font-size:var(--t-sm);
}
.ficha-viva__linha .chave{color:var(--tinta-3)}
.ficha-viva__linha .valor{color:var(--tinta-1);font-weight:500;text-align:right}
.ficha--familia{margin-top:var(--e8)}
.ficha--familia dt:first-of-type,
.ficha--familia dd:first-of-type{border-top:0}

@media(max-width:36rem){
  .amostra-op__cor{width:1.9rem;height:1.9rem}
  .passo__opcao{padding:.5rem .85rem}
  /* No dedo a amostra vira 38 x 38 sem crescer na tela: aumentar o quadrado de
     cor apertaria a fileira de 21 a 28 amostras, e o alvo pequeno é o que faz
     errar de cor no celular. O pseudo-elemento come exatamente o vão de 8 px,
     então nenhum alvo invade o vizinho. */
  /* A amostra desenhada tem 1,6rem (25,6 px) mais o contorno, e o alvo medido
     em 27/08 dava 30 px — abaixo dos 38 que a decisão de 26/08 registrou e bem
     abaixo do piso de 44. O pseudo-elemento leva o alvo a 44 SEM crescer o
     quadrado: aumentar a amostra apertaria a fileira de 21 a 28 e é justamente
     o alvo pequeno que faz errar de cor no celular.
     O vão da fileira é `--e2` (8 px), e a expansão de 9 px de cada lado passaria
     por cima da vizinha — por isso o vão sobe junto. */
  .amostra-op{position:relative}
  .amostra-op::after{content:"";position:absolute;inset:-9px}
  .amostras-op{gap:var(--e5)}
}
.config__nota{
  margin:var(--e5) 0 0;font-size:var(--t-xs);color:var(--tinta-3);
  line-height:1.55;max-width:52ch;
}
/* `.ficha-viva__cod` saiu em 27/08: o código virou a primeira LINHA da ficha,
   como no protótipo, e não mais um rótulo solto acima dela. */
.passo__escolhido--vazio{color:var(--tinta-3);font-style:italic;letter-spacing:0}
.config__nota--pendente{color:var(--tinta-2)}
.config__nota--pendente::before{
  content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.45rem;
  background:var(--brasa);vertical-align:.08em;
}
/* Código em revisão na Matriz: some o peso, não some da tabela. */
.tabela__pendente td{color:var(--tinta-3)}
.marca-pendente{
  color:var(--brasa-tinta);text-decoration:none;border:0;
  font-size:var(--t-sm);margin-left:.15em;cursor:help;
}
.tabela__legenda{
  margin-top:var(--e4);font-size:var(--t-xs);color:var(--tinta-3);
  line-height:1.55;max-width:60ch;
}

/* Família cujo configurador ainda não fecha: a tela diz o que falta em vez de
   oferecer um passo com lista de SKU. */
.config--pendente{border-top:1px solid var(--risco);margin-top:var(--e10);padding-top:var(--e8)}
.config__aviso{
  font-size:var(--t-sm);color:var(--tinta-2);line-height:1.6;max-width:52ch;
}
.config__aviso b{display:block;color:var(--tinta-1);font-weight:500;margin-bottom:var(--e2)}
/* `.config__exemplo` saiu em 25/08 com o aviso de bastidor: era o despejo dos
   SKU ambíguos na tela, artefato de depuração, não informação de escolha. */
.config__saida{margin-top:var(--e5);font-size:var(--t-sm)}
/* parâmetro de versão única: dado ao lado do código, não botão */
.pedido__fixos{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5);
  margin-top:var(--e4);font-size:var(--t-xs);color:var(--tinta-2);
}
.pedido__fixos i{
  font-style:normal;color:var(--tinta-3);letter-spacing:.08em;
  text-transform:uppercase;margin-right:.35em;
}

/* O atributo `hidden` do HTML vale `display:none` na folha do navegador, e
   qualquer `display` declarado aqui vence por especificidade. `.moldura` é
   `display:grid`, e por isso as três fotos do Bello apareciam empilhadas em vez
   de uma por vez. Vale para todo elemento escondido do configurador. */
[hidden]{display:none !important}

/* ═══════════════════════════ USINA IMPORTS ═══════════════════════════
   A peça importada vem RECORTADA do catálogo em PDF: 45 das 48 famílias têm
   máscara alpha no arquivo, então a luminária entra sem fundo e o quadro fica
   sendo o próprio papel da página. Por isso `contain` e respiro em volta —
   `cover`, que é o padrão da grade nacional, cortaria o braço do pendente.

   As outras 3 são foto de ambiente e continuam preenchendo o quadro: a regra
   é a origem da imagem, não a tela. */
.peca__desenho--recorte{padding:var(--e5)}
.peca__desenho--recorte img{object-fit:contain}

/* na ficha do item a foto é o assunto e aparece inteira, na proporção em que
   foi fotografada — a altura fixa da grade não vale aqui */
.peca__desenho--alta{height:auto;min-height:0}
.peca__desenho--alta img{height:auto;max-height:clamp(280px,42vw,460px)}
.destaque__foto{margin:0}
.destaque__foto .bio__fonte{margin-top:var(--e3)}

/* ═══════════════════════════ QUEM SOMOS ═══════════════════════════
   As fotos do showroom são pequenas na origem: o catálogo diagrama aquela
   página em mosaico, e o maior arquivo tem 304 px de largura. Nada é ampliado,
   então a tela pede pouco — faixa panorâmica em cima, tira estreita embaixo. */
.faixa{margin:var(--e12) 0 0}
.faixa img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/6;object-fit:cover;
  border:1px solid var(--risco);
}
.tira{
  margin-top:var(--e4);
  display:grid;gap:var(--e4);
  grid-template-columns:repeat(auto-fit,minmax(min(45%,9rem),1fr));
}
.tira figure{margin:0}
.tira img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;
  border:1px solid var(--risco);
}
.faixa + .tira + .bio__fonte{margin-top:var(--e4)}

/* A galeria da Imports é o mesmo componente da LP de assinatura, com uma
   diferença medida: as 30 fotos de ambiente do catálogo importado são todas
   retrato, entre 0,656 e 0,717 de proporção (mediana 0,706 — formato A). No
   5/4 padrão o `cover` comia 58% da altura, e como a luminária mora no terço
   de cima da foto, o corte tirava justamente a peça. Em 1/1,414 a foto entra
   quase inteira: o corte máximo do conjunto é 8%. */
.aplicada--retrato{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.aplicada--retrato img{aspect-ratio:1/1.414}

/* Título longo na abertura de duas colunas. `--t-3xl` foi desenhado para nome
   próprio de designer, que tem duas palavras; uma frase inteira quebrava em
   seis linhas na coluna estreita. Um degrau abaixo resolve sem inventar
   tamanho fora da escala. */
.assinatura__nome--medio{font-size:var(--t-2xl)}

/* A fachada entra INTEIRA, na proporção do arquivo. Decisão do Herasmo em
   25/08: "poderia ser colocada 100% sem alteração ou ajuste". Toda caixa de
   razão fixa aqui recorta — 4/5 fatiava uma tira vertical, 3/2 comia a margem
   de baixo — porque a foto é 4:3 e nenhuma das duas é 4:3. Em vez de escolher
   um recorte melhor, a caixa some: `aspect-ratio:auto` e `object-fit:contain`
   deixam a imagem mandar na própria altura. */
.assinatura__foto--alto img{
  aspect-ratio:auto;height:auto;object-fit:contain;object-position:center;
}

/* ═══════════════ AMOSTRA DE COR NA PÍLULA DE FILTRO ═══════════════
   O Anexo I pede o filtro de acabamento com AMOSTRA VISUAL. O hex sai da
   tabela `acabamentos`, onde os 28 têm cor real — a pílula de "G1 / G2" mostra
   as duas cores do grupo, na ordem em que o catálogo escreve. */
.ficha-pilula--amostra{display:inline-flex;align-items:center;gap:var(--e2)}
.ficha-pilula__cor{
  width:.7rem;height:.7rem;flex:none;
  border:1px solid var(--risco-forte);
  /* quadrado, não círculo: é amostra de acabamento, não bolinha de status */
}

/* ═══════════════ CONSULTA DA USINA IMPORTS ═══════════════
   O funil da divisão. A Imports não publica preço — o catálogo que a Usina
   liberou é a versão sem preço —, então o caminho de compra é a consulta, e ela
   só serve se o atendimento souber de qual CÓDIGO o cliente fala. */
.consulta{
  display:grid;gap:var(--e10) var(--e16);
  grid-template-columns:minmax(0,1fr);align-items:center;
}
@media(min-width:60rem){
  .consulta{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
.consulta .apoio{max-width:52ch}
.consulta__acao{display:flex;flex-wrap:wrap;gap:var(--e4)}
.consulta__acao .botao{display:inline-flex;align-items:center;gap:var(--e2)}

/* o glifo herda a cor do botão, e por isso serve nos dois temas */
.zap__glifo{flex:none;display:block}

/* Na tabela, cada linha tem DOIS destinos: a ficha e a consulta daquele código.
   A linha vira grade de duas colunas para o alvo de toque da consulta não
   roubar a área do link da ficha. */
.baixa-item--consulta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.baixa-item--consulta > a:first-child{min-width:0}
.zap{
  display:grid;place-items:center;
  padding-inline:var(--e4);
  color:var(--tinta-3);
  border-left:1px solid var(--risco);
  transition:color var(--rapido) var(--curva),background var(--rapido) var(--curva);
}
.zap:hover{color:var(--fundo-0);background:var(--brasa)}
@media(max-width:640px){
  .zap{padding-inline:var(--e3)}
}

/* ═════════════════════ TABELA DA IMPORTS ═════════════════════
   Tudo aqui é escopado em `--sanfona` e `--consulta`: `.baixa-item`,
   `.baixa-grupo` e `.baixa-lista` são compartilhados com /downloads,
   /contato, a ficha de família e a ficha do item, e mexer na regra
   genérica quebraria as quatro. */

.baixa-grupo--sanfona{margin-top:var(--e6)}
.baixa-grupo--sanfona > summary{
  display:flex;align-items:center;gap:var(--e3);
  cursor:pointer;list-style:none;
  transition:color var(--rapido) var(--curva);
}
.baixa-grupo--sanfona > summary::-webkit-details-marker{display:none}
.baixa-grupo--sanfona > summary:hover{color:var(--brasa)}
.baixa-grupo--sanfona > summary:focus-visible{
  outline:2px solid var(--brasa);outline-offset:3px;
}
/* A seta é desenhada, não é glifo: um caractere herdaria a fonte de
   display e mudaria de peso entre os temas. */
.baixa-grupo--sanfona > summary::before{
  content:'';flex:none;width:.5rem;height:.5rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);margin-bottom:.15rem;
  transition:transform var(--rapido) var(--curva);
}
.baixa-grupo--sanfona[open] > summary::before{transform:rotate(45deg);margin-bottom:0}
.baixa-grupo__n{margin-left:auto;color:var(--tinta-3);font-size:var(--t-xs)}
/* A tipologia fica ao lado do nome, com a mesma discrição da contagem: ela é
   informação de escolha, não título. */
.baixa-grupo__tipo{
  color:var(--tinta-3);font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:none;
}
.baixa-grupo__tipo::before{content:'· '}

/* Os rótulos das colunas repetem a grade da linha, para cair no mesmo
   eixo. `aria-hidden` porque cada célula da linha já se explica pelo
   conteúdo e o leitor de tela não precisa da repetição. */
.baixa-cabeca{
  display:grid;gap:var(--e3);
  grid-template-columns:var(--imports-colunas);
  padding:var(--e3) 0 .4rem;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);
}

/* Cinco colunas. Antes eram três, e a terceira ficava com 72 px enquanto
   a dimensão ocupava 654: o texto da fonte de luz quebrava em quatro
   linhas contra uma faixa vazia de 257 px até a margem. Acabamento e
   material já estavam no banco. */
.baixa-grupo--sanfona{
  --imports-colunas:minmax(8rem,9rem) minmax(6rem,.85fr) minmax(9rem,1.2fr) minmax(6rem,.95fr) minmax(8rem,1.2fr);
  /* A coluna do WhatsApp tinha 185 px medidos — largura de sobra que o `auto`
     do grid herdava. Fixada, ela vira o mesmo recuo do cabeçalho e devolve
     125 px às cinco colunas de dado. Continua acima do alvo de toque de 44. */
  --imports-zap:3.75rem;
}
.baixa-item--consulta > a:first-child{
  grid-template-columns:var(--imports-colunas);
  align-items:baseline;
  /* Sem este recuo o material longo encostava no filete do WhatsApp (folga
     medida: 0 px). Ele também é o que faz o cabeçalho cair no mesmo eixo:
     recuo da linha + largura do zap = padding do cabeçalho. */
  padding-right:var(--e3);
}
/* O cabeçalho não tem a coluna do WhatsApp que a linha tem: a folga
   reserva exatamente a mesma largura, senão os rótulos saem do eixo das
   células — medido em 24/08, "Material" ficava 99 px à direita do dado. */
.baixa-cabeca{padding-right:calc(var(--imports-zap) + var(--e3))}
/* O `.zap` também é um <a> dentro de `.baixa-item`, e por isso herdava a
   grade de colunas da LINHA — virava um grid de 144 px e o ícone caía 21 px
   fora do próprio botão (medido em 24/08). A largura de 185 px que a coluna
   tinha antes escondia o defeito. */
.baixa-item--consulta > .zap{
  width:var(--imports-zap);
  grid-template-columns:1fr;
  place-items:center;
}
/* Célula de grade não encolhe abaixo do conteúdo por padrão: sem `min-width:0`
   o material longo empurrava a coluna e encostava na borda do WhatsApp. */
.baixa-item--consulta > a:first-child > span{min-width:0;overflow-wrap:break-word}
.baixa-item--consulta .baixa-item__peso{white-space:normal}

@media (max-width:60rem){
  .baixa-cabeca{display:none}
  .baixa-item--consulta > a:first-child{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    row-gap:var(--e1);
  }
  .baixa-item--consulta .baixa-item__tipo{grid-column:1 / -1}
}

/* ═════════════════════ ZOOM DE FOTO ═════════════════════
   A peça importada tem UMA imagem no mundo: o recorte do catálogo. Ver
   essa imagem grande é o que se pede ao clicar nela, e até 24/08 o
   clique rolava para a tabela. `<dialog>` nativo: Esc fecha, o foco
   volta sozinho e nada disso é código nosso. */
.peca__lupa,
.aplicada__lupa{
  display:block;width:100%;
  padding:0;border:0;background:none;color:inherit;
  cursor:zoom-in;
}
.peca__lupa:focus-visible,
.aplicada__lupa:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}

.peca__acao{
  display:inline-block;margin-top:var(--e2);
  font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--tinta-3);border-bottom:1px solid var(--risco-forte);
  padding-bottom:.15rem;
  transition:color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.peca__acao:hover{color:var(--brasa);border-bottom-color:var(--brasa)}

.zoom{
  border:0;padding:0;max-width:min(94vw,1100px);max-height:92vh;
  background:var(--fundo-1);color:var(--tinta-2);
  box-shadow:0 2rem 5rem rgb(0 0 0 / .55);
}
.zoom::backdrop{background:rgb(0 0 0 / .82)}
.zoom__figura{margin:0;display:grid;gap:var(--e3);padding:var(--e4)}
.zoom__figura img{
  display:block;max-width:100%;max-height:76vh;
  margin-inline:auto;object-fit:contain;
}
.zoom__legenda{font-size:var(--t-xs);color:var(--tinta-3);text-align:center}
.zoom__fechar{
  position:absolute;top:var(--e2);right:var(--e2);
  width:2.25rem;height:2.25rem;display:grid;place-items:center;
  border:1px solid var(--risco);border-radius:50%;
  background:var(--fundo-2);color:var(--tinta-2);
  font-size:var(--t-sm);line-height:1;cursor:pointer;
  transition:color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.zoom__fechar:hover{color:var(--brasa);border-color:var(--brasa)}


/* ═══════════════════ PROJETO ESPECIAL ═══════════════════
   Página nova em 25/08, espelho da p.298 do catálogo. Duas grades e uma coluna
   de prosa: as três frentes em cards de foto, as seis etapas numeradas, e os
   quatro parágrafos da Usina em duas colunas de leitura. */

.frentes{
  margin-top:var(--e10);
  display:grid;gap:var(--e8);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
@media(min-width:62rem){.frentes{grid-template-columns:repeat(3,1fr);gap:var(--e10)}}
.frente__foto{
  position:relative;                 /* âncora da `.legenda-ov` (item 19.14) */
  overflow:hidden;background:var(--fundo-2);
  border:1px solid var(--risco);aspect-ratio:5/4;
}
/* ⚠️ A MOLDURA QUEIMADA SAI POR ZOOM — item 19.13, 30/08.
   As três renders vieram da Usina com moldura marrom e o rótulo impresso
   DENTRO do arquivo ("Criação", "Adaptação", "personalização"), numa tarja no
   canto superior direito. O Herasmo: *"eu sei que eles enviaram fotos com
   'borda' mas está feio, então para não precisar cortar, vamos manter a imagem
   no 'normal' como ela estivesse com o zoom do hover"*.

   Os números saíram da MEDIÇÃO do arquivo, não do gosto:

     moldura lateral ... 16 a 19 px de 1280  ->  1,5% de cada lado
     tarja do rótulo ... até 135 px de 1280 ->  10,5% do topo

   Com `aspect-ratio:5/4` e `cover`, a foto quadrada já perde 10% em cima e 10%
   embaixo. Falta pouco: em `scale(1.06)` o corte de topo vai a 12,3% e o
   lateral a 2,8%, e os dois passam da moldura com folga. O hover ganha o passo
   a mais que ele pediu. */
.frente__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);
  transition:transform var(--lento) var(--curva)}
.frente:hover .frente__foto img{transform:scale(1.12)}
/* O nome subiu para DENTRO da foto (item 19.14) e por isso não leva mais o
   filete que o separava do parágrafo: quem separa agora é a borda da imagem. */
.frente__texto{margin-top:var(--e5);color:var(--tinta-2);font-size:var(--t-sm);line-height:1.7}

/* A prosa em DUAS colunas: são quatro parágrafos curtos, e numa coluna só de
   1320 px cada um vira uma linha e meia solta no meio do vazio. */
.prosa-larga{
  margin-top:var(--e10);
  columns:2;column-gap:var(--e16);
}
@media(max-width:56rem){.prosa-larga{columns:1}}
.prosa-larga p{break-inside:avoid;margin:0 0 var(--e5)}

/* As etapas são uma LISTA ORDENADA de verdade: é um processo com ordem, e o
   número sai do contador da lista, não escrito à mão. */
.etapas{
  list-style:none;margin:var(--e16) 0 0;padding:0;counter-reset:etapa;
  display:grid;gap:var(--e8) var(--e6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
}
@media(min-width:70rem){.etapas{grid-template-columns:repeat(3,1fr);gap:var(--e10)}}
.etapa{counter-increment:etapa;display:grid;gap:var(--e3);align-content:start}
.etapa__foto{
  position:relative;                 /* âncora da `.legenda-ov` (item 19.14) */
  overflow:hidden;background:var(--fundo-2);
  border:1px solid var(--risco);aspect-ratio:4/5;
}
.etapa__foto img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.92)}
/* O nome da etapa também subiu para dentro da foto, pelo mesmo item 19.14: são
   dois blocos irmãos na mesma página, e um com legenda em cima e outro embaixo
   é a divergência que a régua da casa proíbe. O número continua na frente,
   porque ele é a ORDEM do processo e é o que faz a lista ser uma lista. */
.etapa__nome{
  font-family:var(--corpo);font-size:var(--t-base);font-weight:500;
  margin:0;display:flex;gap:var(--e3);align-items:baseline;
  font-size:var(--t-sm);
}
.etapa__nome::before{
  content:counter(etapa,decimal-leading-zero);
  font-family:var(--display);color:var(--brasa);font-size:var(--t-sm);
}
/* Dentro da tarja o apoio herda a tinta clara dela e desce meio tom, como o
   `@` do crédito em `/projetos`. Fora dela a regra antiga não existe mais:
   desde 30/08 (item 5 do retorno) ele só aparece sobre a foto. */
.legenda-ov .etapa__texto{margin:0;color:inherit;opacity:.82;font-size:var(--t-xs);line-height:1.45}
.etapa__texto{margin:0;color:var(--tinta-3);font-size:var(--t-sm);line-height:1.6}

@media(prefers-reduced-motion:reduce){
  .frente__foto img{transition:none}
  /* ⚠️ `transform:none` NÃO volta aqui: sem o `scale` a moldura queimada e o
     rótulo reaparecem, e quem pediu menos movimento não pediu foto com borda.
     O que o modo reduzido tira é a MUDANÇA, não o enquadramento. */
  .frente:hover .frente__foto img{transform:scale(1.06)}
}

/* Subgrupo do acabamento — o segundo nível, dentro do grupo. Metálicas, foscas
   e verniz são divisão do catálogo, e o G2 sozinho tem as três. */
.subgrupo-acab{
  margin:var(--e8) 0 var(--e4);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--brasa-tinta);
}
.subgrupo-acab:first-of-type{margin-top:var(--e5)}

/* ── A indústria: prosa e vídeo lado a lado ──────────────────────────────
   Duas colunas desde 25/08. A frente é "nós fabricamos", e a linha de produção
   em vídeo prova isso melhor que parágrafo. */
.industria{
  display:grid;gap:var(--e10) var(--e16);
  grid-template-columns:minmax(0,1fr);align-items:start;
}
@media(min-width:64rem){
  .industria{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
}
.industria__texto p.apoio + p.apoio{margin-top:var(--e5)}
/* O primeiro parágrafo depois do título novo (30/08) leva o mesmo respiro que
   os irmãos têm entre si — sem isto ele encostava na base do `<h2>`. */
.industria__texto .titulo-secao + p.apoio{margin-top:var(--e5)}
.industria__video{margin:0}
.industria__video video{
  width:100%;height:auto;display:block;
  background:var(--fundo-2);border:1px solid var(--risco);
}
.industria__video figcaption{
  margin-top:var(--e3);font-size:var(--t-xs);color:var(--tinta-3);
  display:flex;gap:var(--e3);justify-content:space-between;flex-wrap:wrap;
}

/* Projeto Especial dentro do Quem Somos: respiro de SEÇÃO, com a mesma linha
   de cota que separa as seções da página. Com --e10 ele colava na tira de
   fotos acima e lia como legenda dela. */
/* ── FRENTE PRÓPRIA dentro de uma seção ────────────────────────────────────
   Um bloco que é assunto por si, e não continuação do que veio antes: ganha a
   linha de cota em cima e o respiro de SEÇÃO, não de bloco.

   ⚠️ A classe se chamava `.projeto-especial-bloco` e servia a um bloco só.
   Em 30/08 o artesanal (item 19.7) passou a usá-la, porque o comentário do
   `.destaque-artesanal` já dizia "mesma anatomia do Projeto Especial" e ela
   não era: aquele tinha filete de brasa à esquerda e 58ch de teto. Duas
   aparências para a mesma relação é a perda de padrão que este projeto já
   pagou três vezes. Uma regra só. */
.frente-propria{
  margin-top:var(--secao);padding-top:var(--secao);
  border-top:1px solid var(--risco);position:relative;
}
.frente-propria::before{
  content:'';position:absolute;left:0;right:0;top:-5px;height:11px;
  pointer-events:none;
  background:
    linear-gradient(var(--risco-forte),var(--risco-forte)) left  top/1px 100% no-repeat,
    linear-gradient(var(--risco-forte),var(--risco-forte)) right top/1px 100% no-repeat;
}

/* ═══════════════════ FORMULÁRIO ═══════════════════
   Anexo I, B9. Campo é caixa de desenho: filete, raio zero, foco visível.
   Duas colunas no desktop, uma no celular; assunto e mensagem atravessam. */
.formulario{
  margin-top:var(--e10);
  display:grid;gap:var(--e6) var(--e8);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:52rem){
  .formulario{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campo--largo{grid-column:1/-1}
  .campo--uf{max-width:7rem}
}
.campo{display:grid;gap:var(--e2);margin:0}
.campo label{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--tinta-3);
}
.campo label span{color:var(--brasa);margin-left:.2em}
.campo input,.campo select,.campo textarea{
  font-family:var(--corpo);font-size:var(--t-base);color:var(--tinta-1);
  background:var(--fundo-2);
  border:1px solid var(--risco-forte);
  padding:var(--e3) var(--e4);
  width:100%;border-radius:0;
  transition:border-color var(--rapido) var(--curva);
}
.campo textarea{resize:vertical;min-height:8rem;line-height:1.6}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--tinta-3)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:2px solid var(--brasa);outline-offset:1px;border-color:var(--brasa);
}
.formulario__acao{
  display:flex;flex-wrap:wrap;gap:var(--e5);align-items:center;
  margin-top:var(--e2);
}
.formulario__nota{font-size:var(--t-xs);color:var(--tinta-3);max-width:44ch;line-height:1.5}

/* A ISCA anti-robô. Fora do olho E fora do leitor de tela — `aria-hidden` no
   contêiner mais posição fora da tela. `display:none` seria pior: robô moderno
   ignora campo escondido por display. */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.aviso-ok,.aviso-erro{
  margin-top:var(--e8);padding:var(--e5) var(--e6);
  border:1px solid var(--risco-forte);background:var(--fundo-2);
  font-size:var(--t-sm);line-height:1.6;
}
.aviso-ok{border-color:color-mix(in srgb,var(--brasa) 55%,transparent)}
.aviso-ok strong{display:block;color:var(--tinta-1);margin-bottom:var(--e1)}
.aviso-erro ul{margin:var(--e2) 0 0;padding-left:var(--e5)}

/* ═══════════════════ A SEÇÃO DO FORMULÁRIO, EM DUAS COLUNAS ═══════════════
   Só ESTA seção. Os três canais de WhatsApp acima ficam como estavam — na
   primeira passada de 25/08 eu reescrevi a página inteira e derrubei a
   formatação que não era para mudar.

   À esquerda o que resolve sem escrever: endereço, horário e redes. À direita
   o formulário. */
.contato-duplo{
  display:grid;gap:var(--e12) var(--e20);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:62rem){
  .contato-duplo{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
}
.contato-lado__titulo{margin-top:var(--e4)}

/* Ficha de horário: mesma anatomia da ficha técnica, que é como o resto do
   site apresenta par de rótulo e valor. */
.ficha--horario{margin-top:0}

/* ── os três canais de WhatsApp ─────────────────────────────────────────── */
.canais-lista{list-style:none;margin:var(--e10) 0 0;padding:0;display:grid;gap:0}
.canais-lista li{border-top:1px solid var(--risco)}
.canais-lista li:last-child{border-bottom:1px solid var(--risco)}
.canal-linha{
  display:flex;gap:var(--e4);align-items:center;
  padding:var(--e5) 0;
  transition:color var(--rapido) var(--curva);
}
.canal-linha__zap{
  flex:0 0 auto;display:grid;place-items:center;
  width:2.25rem;height:2.25rem;
  border:1px solid var(--risco-forte);color:var(--tinta-2);
  transition:border-color var(--rapido) var(--curva),color var(--rapido) var(--curva);
}
.canal-linha:hover .canal-linha__zap{border-color:var(--brasa);color:var(--brasa)}
.canal-linha__texto{display:grid;gap:var(--e1);min-width:0}
.canal-linha__rotulo{
  font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;
  color:var(--tinta-3);
}
.canal-linha__chamada{
  font-family:var(--display);font-size:var(--t-md);color:var(--tinta-1);line-height:1.25;
}
.canal-linha:hover .canal-linha__chamada{color:var(--brasa-tinta)}
.canal-linha__extra{
  display:inline-block;margin:0 0 var(--e4) calc(2.25rem + var(--e4));
  font-size:var(--t-xs);color:var(--tinta-3);
  border-bottom:1px solid var(--risco-forte);
}
.canal-linha__extra:hover{color:var(--brasa-tinta);border-bottom-color:var(--brasa)}

.contato-bloco{margin-top:var(--e12)}
.contato-bloco__nome{
  font-family:var(--corpo);font-size:var(--t-xs);font-weight:500;
  letter-spacing:var(--rastro);text-transform:uppercase;color:var(--tinta-3);
  padding-bottom:var(--e3);margin:0 0 var(--e5);
  border-bottom:1px solid var(--risco);
}

/* ── redes ──────────────────────────────────────────────────────────────
   Glifo desenhado em path, servido daqui: nada de CDN de ícone na superfície
   pública. Quadrado com filete, do tamanho de toque (44 px). */
.redes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e3)}
.rede{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border:1px solid var(--risco-forte);color:var(--tinta-2);
  transition:border-color var(--rapido) var(--curva),color var(--rapido) var(--curva),
             background var(--rapido) var(--curva);
}
.rede:hover{border-color:var(--brasa);color:var(--brasa);background:var(--fundo-2)}
.rede__marca{display:grid;place-items:center;line-height:0}

/* No contato o formulário já vive numa coluna: a segunda coluna interna
   espremeria o campo. Volta a ser uma só a partir de onde a coluna aperta. */
@media(min-width:62rem) and (max-width:80rem){
  .contato-duplo .formulario{grid-template-columns:minmax(0,1fr)}
  .contato-duplo .campo--uf{max-width:7rem}
}

/* ── card da Imports: mesma anatomia do card do catálogo ─────────────────
   A peça vem em quadro branco (decisão de 19/08) e o quadro preenche a
   largura do card, como a foto preenche no catálogo. O `--recorte` que dava
   margem em volta some aqui: ele existia para a peça recortada com alpha, que
   deixou de existir em 25/08. */
.peca__desenho--recorte{padding:0}
.peca__desenho--recorte img{object-fit:contain;background:#fff}

.peca__acoes{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);align-items:center;
  margin-top:var(--e4);
}
.peca__acao{
  font-size:var(--t-xs);letter-spacing:.06em;color:var(--tinta-2);
  border-bottom:1px solid var(--risco-forte);
  background:none;border-top:0;border-left:0;border-right:0;padding:0;
  font-family:var(--corpo);cursor:pointer;
  transition:color var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.peca__acao:hover{color:var(--brasa-tinta);border-bottom-color:var(--brasa)}
.peca__acao--ambiente{color:var(--tinta-3)}

/* ═══════════════════ BLOCO 3 · LOTE 3 ═══════════════════
   Sanfona da tabela longa, biblioteca técnica em quadros e as peças da mesma
   tipologia. Tudo no fim da folha, DEPOIS das bases que cada regra ajusta:
   `.rolagem-tabela`, `.baixa-item` e `.peca` são todas seletor de classe única
   e quem vem depois é quem vale. Declarar antes já custou três correções em
   25/08. */

/* ─── a tabela longa vira sanfona ────────────────────────────────────────────
   Acima de 24 códigos. A Office Slim media 12.558 px de tabela numa página de
   16.597. `<details>` nativo, como na Imports: o conteúdo segue no HTML com a
   sanfona fechada, então busca e motor de resposta continuam lendo tudo. */
/* ─── tabela longa: cinco linhas à vista, o resto no botão ───────────────────
   Até 25/08 a tabela longa inteira ficava dentro de um `<details>`, e sobrava
   na tela um link com seta e mais nada. Quem chega não vê o que vai encontrar
   e não clica. Cinco linhas dizem a forma da tabela — as colunas, a cara do
   código, a unidade — e o botão passa a oferecer o RESTO.

   Quem esconde as linhas é o JS, com `hidden` em cada `<tr>` além da prévia:
   assim o número da prévia vive num lugar só, na view, e sem JS a tabela
   inteira aparece. O `!important` não é preguiça — `.tabela tbody tr` declara
   `transition` e qualquer regra de `display` em `tr` compete com o estilo do
   agente de usuário para `[hidden]`. */
.tabela tbody tr[hidden]{display:none !important}

/* Sem desmanche na última linha da prévia. Cheguei a aplicar uma máscara em
   gradiente nela — "tem mais" sem escrever —, medi que funcionava e tirei: em
   tabela técnica ela apaga a base dos glifos de um DADO, e o princípio do
   projeto é legibilidade acima de respiro decorativo. O botão logo abaixo já é
   o sinal, e ele diz quantos códigos faltam. */
.tabela-longa__mais{
  display:flex;align-items:baseline;gap:var(--e4);
  width:100%;margin-top:var(--e6);padding:var(--e5) 0;
  background:none;border:0;border-top:1px solid var(--risco);
  font:inherit;font-size:var(--t-sm);font-weight:500;
  color:var(--tinta-1);text-align:left;cursor:pointer;
  transition:color var(--rapido) var(--curva);
}
.tabela-longa__mais:hover{color:var(--brasa)}
.tabela-longa__mais:focus-visible{outline:2px solid var(--brasa);outline-offset:4px}
/* o sinal é o mesmo da sanfona da Imports: cruz que gira meia volta ao abrir */
.tabela-longa__mais::before{
  content:'';width:.62rem;height:.62rem;flex:0 0 auto;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);margin-bottom:.28rem;
  transition:transform var(--rapido) var(--curva);
}
.tabela-longa__mais[aria-expanded="true"]::before{transform:rotate(-135deg);margin-bottom:0}

/* ─── biblioteca técnica: quadros, não lista ─────────────────────────────────
   Na central de downloads a busca é por nome de arquivo e a lista serve. Na
   ficha o especificador varre por TIPO, e quatro quadros lado a lado se varrem
   de um olhar. O que não subiu fica tracejado e sem link — esconder faria
   parecer que não existe, e linkar devolveria 404. */
.dlgrid{
  display:grid;gap:var(--e4);margin-top:var(--e8);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
}
.dlbox{
  display:flex;flex-direction:column;gap:var(--e2);
  border:1px solid var(--risco-forte);
  background:color-mix(in oklch,var(--fundo-2) 55%,transparent);
  padding:var(--e5) var(--e5);
  transition:border-color var(--rapido) var(--curva),background var(--rapido) var(--curva);
}
a.dlbox:hover{border-color:var(--brasa);background:var(--fundo-2)}
a.dlbox:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}
.dlbox__tipo{font-size:var(--t-sm);color:var(--tinta-1)}
a.dlbox:hover .dlbox__tipo{color:var(--brasa-tinta)}
.dlbox__detalhe{
  font-size:var(--t-xs);color:var(--tinta-2);line-height:1.45;
  /* o título vem do arquivo e às vezes é longo; duas linhas e reticências
     mantêm a fileira de quadros na mesma altura */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dlbox__meta{font-size:var(--t-xs);color:var(--tinta-3);letter-spacing:.06em;margin-top:auto}
.dlbox--espera{border-style:dashed;opacity:.55}

/* ─── peças da mesma tipologia ───────────────────────────────────────────────
   Quatro colunas, contorno que acende no ponteiro e a imagem na proporção do
   quadro — o padrão do protótipo. `.cardp` e não `.peca`: a `.peca` é o card da
   grade do catálogo e mexer nela mudaria seis telas. */
.sechead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--e5);flex-wrap:wrap;margin-bottom:var(--e8);
}
.sechead .titulo-secao{margin:0}
/* QUATRO colunas no desktop, cravadas. Com `auto-fill` o miolo de 1.176 px
   cabia cinco, e cinco não é o padrão do protótipo: a fileira de quatro é o que
   dá ao card largura suficiente para a peça ser reconhecida na miniatura. */
.rel{
  display:grid;gap:var(--e6);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));
}
@media(min-width:60rem){
  .rel{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.cardp{
  display:block;border:1px solid var(--risco);
  background:color-mix(in oklch,var(--fundo-2) 40%,transparent);
  transition:border-color var(--rapido) var(--curva),transform var(--rapido) var(--curva);
}
.cardp:hover{border-color:var(--brasa);transform:translateY(-3px)}
.cardp:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}
/* a proporção é do QUADRO, não da foto: numa fileira de quatro, imagem de
   altura livre desalinha o nome de cada card com o do vizinho */
.cardp__ph{display:block;aspect-ratio:4/3;overflow:hidden;background:#fff}
.cardp__ph .peca__desenho{height:100%;min-height:0;border:0}
.cardp__ph .peca__desenho img{width:100%;height:100%;object-fit:contain;background:#fff}
.cardp__in{display:block;padding:var(--e4) var(--e4) var(--e5)}
.cardp__tp{
  display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brasa-tinta);margin-bottom:var(--e2);
}
.cardp__fam{display:block;font-family:var(--display);font-size:var(--t-sm);color:var(--tinta-1)}

/* ─── LOTE 4 · a ficha da configuração escolhida ─────────────────────────────
   Foto e desenho lado a lado na coluna da esquerda: a foto diz qual peça é, o
   desenho diz se ela cabe. Empilham no celular. */
.peca-dupla{display:grid;gap:var(--e5);align-content:start}
/* Teto de altura na foto. Sem ele a arandela Aceso, que é retrato estreito e
   alto, ocupava mil pixels e empurrava a ficha para fora da primeira tela — a
   foto aqui identifica a peça, não é a peça. O desenho já tem o seu teto. */
.peca-dupla .moldura--foto .peca__desenho img{
  max-height:clamp(300px,42vw,520px);object-fit:contain;
}
@media(min-width:48rem){
  .peca-dupla{grid-template-columns:minmax(0,1fr)}
}

/* o acabamento ESCOLHIDO, e só ele. A carta inteira mora na ficha de família */
.escolha{
  display:flex;flex-direction:column;gap:var(--e3);
  margin-top:var(--e6);padding-top:var(--e5);
  border-top:1px solid var(--risco);
}
.escolha--declarada{border-top-style:dashed}
.escolha__item{display:flex;align-items:center;gap:var(--e4);min-width:0}
/* `min-width:0` nos dois: item de flex não encolhe abaixo do conteúdo por
   padrão, e o rótulo em versalete com `letter-spacing` — "ACABAMENTO DO
   ACESSÓRIO" — empurrava a linha 31 px para fora da página. Medido em
   /codigo/5825-100, a 1440 px. */
.escolha__cores{display:flex;gap:2px;flex:0 0 auto}
.escolha__mais{font-size:var(--t-xs);color:var(--tinta-3);align-self:center;margin-left:var(--e2)}
.escolha__cor{
  display:block;width:1.5rem;height:1.5rem;flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--tinta-1) 24%,transparent);
}
.escolha__texto{
  font-size:var(--t-sm);color:var(--tinta-1);line-height:1.4;
  min-width:0;overflow-wrap:break-word;
}
.escolha__texto i{
  display:block;font-style:normal;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);
}
/* o botão de orçamento é o único cheio da tela, como manda a régua de 25/08 */
.pedido__acao .botao{margin-top:var(--e5)}

/* ── Sobre a peça (C6) ─────────────────────────────────────────────────────
   Os dois quadros do protótipo vivem na coluna do título, que sem eles ficava
   com 400 px de vão. ⚠️ O parágrafo TINHA 62ch pela regra do `.bio`, e o teto
   saiu em 30/08 com os itens 19.2 e 19.4: quem limita a medida aqui é a
   COLUNA da esquerda, não um teto por dentro dela. Declarado no FIM do arquivo
   de propósito: regra nova com a mesma especificidade declarada antes da base
   perde. */
.bio__quadro{margin-top:var(--e8)}
.bio__quadro-rotulo{font-size:var(--t-xxs, .625rem)}
.bio__quadro .apoio{margin-top:var(--e3);max-width:34ch}

/* ── central de downloads: entrada por peça ─────────────────────────────────
   Escrito no FIM da folha de propósito: regra nova com a mesma especificidade
   declarada antes da base perde, e `@media` não acrescenta peso.             */
.baixa-familias{margin-top:var(--e8)}
.baixa-familias__grade{margin-top:var(--e5)}
.baixa-familia__espera{
  display:block;margin-top:var(--e1);
  font-size:var(--t-xs);color:var(--tinta-3);letter-spacing:.04em}
.grade-longa__mais{margin-top:var(--e6)}
.baixa-familias[data-aberta] .grade-longa__mais{margin-top:var(--e6)}

/* ── busca por código na barra ───────────────────────────────────────────────
   Escrito no FIM da folha: regra com a mesma especificidade declarada antes da
   base perde, e `@media` não acrescenta peso. O ponto de corte é o mesmo 820px
   que já esconde os itens de menu no celular, e não um segundo número. */
/* `stretch` e não altura calculada: a primeira versão cravou
   `calc(var(--t-xs) + .84rem + 2px)` no botão e ele saiu com 26 px contra 33 do
   campo, degrau visível ao lado do input. Altura de irmão se herda, não se
   recalcula. */
.barra-busca{display:flex;align-items:stretch;gap:0}
.barra-busca input[type=search]{
  width:11.5rem;padding:.42rem .6rem;
  font:inherit;font-size:var(--t-xs);color:var(--tinta-1);
  background:var(--fundo-2);border:1px solid var(--risco);border-right:0;
  border-radius:2px 0 0 2px;-webkit-appearance:none;appearance:none}
.barra-busca input[type=search]::placeholder{color:var(--tinta-3)}
.barra-busca input[type=search]:focus-visible{outline:2px solid var(--brasa);outline-offset:-1px}
.barra-busca button{
  display:flex;align-items:center;justify-content:center;
  width:2rem;
  color:var(--tinta-2);background:var(--fundo-2);
  border:1px solid var(--risco);border-radius:0 2px 2px 0;cursor:pointer}
.barra-busca button svg{width:14px;height:14px}
.barra-busca button:hover{color:var(--brasa);border-color:var(--tinta-3)}
.barra-busca button:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
/* ── a barra estreita e a gaveta, medidas em 26/08 (P9) ────────────────────
   Duas faixas, e cada número foi conferido de 1440 a 320 px:

     até 1250   o campo de busca encolhe. Acima disso a barra tem folga para os
                dez destinos E o campo inteiro; abaixo, não.
     até 1100   as folgas encolhem mais uma vez.
     até 1024   a barra vira MARCA + MENU + TEMA, e todo destino entra na
                gaveta, com o campo de busca em primeiro lugar dentro dela.

   Antes desta correção, abaixo de 820 px seis dos dez destinos simplesmente
   sumiam e não havia botão nenhum: Coleções, Projetos, Quem somos, Showroom,
   Imports e Downloads só existiam no rodapé.

   ⚠️ A soleira da gaveta subiu de 820 para 1024 px em 30/08, e as três faixas
   subiram junto. Não é gosto: a barra a 900 px tinha 12 px de folga entre a
   marca e o menu, medidos. O bloco 1 pôs mais duas coisas dentro dela (a marca
   de 38 para 46 px e o ícone de casa), e as duas pedem ~31 px que não existiam.

   Medido depois de mexer, e é por isso que os três números são estes: com a
   soleira em 960, a **980 px o menu entrava 1 px por baixo do botão de tema** e
   a **970 px, 9 px**. `curl 200` não veria; a régua aqui é a distância entre o
   fim do menu e o começo do tema, e ela tem de ser positiva em TODA a faixa.
   Os pontos apertados são sempre os logo ACIMA de cada corte — 1260, 1110,
   1030 —, e é ali que se confere ao mexer em qualquer número deste bloco. */
@media(max-width:1250px){
  .barra-busca input[type=search]{width:7rem}
  .menu__painel{gap:var(--e4)}
}
@media(max-width:1100px){
  .barra{gap:var(--e3)}
  .menu__painel{gap:var(--e3)}
}

@media(max-width:1024px){
  /* o painel se ancora na BARRA, que é `sticky` e portanto posicionada */
  .menu{position:static}
  .menu__botao{
    display:flex;align-items:center;gap:var(--e2);
    cursor:pointer;list-style:none;
    font-size:var(--t-sm);color:var(--tinta-2);
    padding-block:var(--e1);white-space:nowrap;
  }
  .menu__botao::-webkit-details-marker{display:none}
  .menu__botao:hover{color:var(--tinta-1)}
  .menu__botao:focus-visible{outline:2px solid var(--brasa);outline-offset:4px}

  /* Duas barras que viram X ao abrir. Traço, não ícone arredondado: o
     vocabulário da casa é o do desenho técnico. */
  .menu__marca{display:block;width:16px;height:12px;position:relative;flex:0 0 16px}
  .menu__marca i{
    position:absolute;left:0;right:0;height:1px;background:currentColor;
    transition:transform var(--rapido) var(--curva),top var(--rapido) var(--curva);
  }
  .menu__marca i:first-child{top:2px}
  .menu__marca i:last-child{top:9px}
  .menu[open] .menu__marca i:first-child{top:5px;transform:rotate(45deg)}
  .menu[open] .menu__marca i:last-child{top:5px;transform:rotate(-45deg)}
  .menu__fechar{display:none}
  .menu[open] .menu__abrir{display:none}
  .menu[open] .menu__fechar{display:inline}

  .menu__painel{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--fundo-1);
    border-top:1px solid var(--risco);
    border-bottom:1px solid var(--risco-forte);
    padding:var(--e4) var(--sangria) var(--e6);
    max-height:calc(100dvh - 5rem);overflow-y:auto;
    box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
  }
  .menu__painel a{
    padding-block:var(--e4);white-space:normal;
    border-bottom:1px solid var(--risco);
    font-size:var(--t-md);
  }
  .menu__painel a:last-child{border-bottom:0}
  .menu__painel a[aria-current=page]{color:var(--brasa-tinta)}

  /* ⚠️ O campo de busca volta a ser o PRIMEIRO da gaveta, achado em 30/08.
     O `order:1` lá em cima empurra a busca para o fim, e ele valia nos DOIS
     lados: na barra é o certo, na gaveta é o contrário do que o comentário
     dela promete ("na gaveta ele vem PRIMEIRO") e do que o `margin-bottom`
     desta mesma regra pressupõe — a folga saía DEPOIS do último item.
     Medido na captura de 390 px: o campo estava embaixo de Contato. */
  .menu__painel .barra-busca{order:-1}

  /* Na gaveta o Início é um destino como os outros: o nome volta a existir
     para o olho e o alvo passa a ser a linha inteira, com os mesmos 44 px de
     altura dos demais. O traço da casa fica na frente do nome. */
  .menu__inicio{gap:var(--e3)}
  .menu__inicio svg{width:16px;height:16px;flex:0 0 16px}
  .menu__inicio-nome{
    position:static;width:auto;height:auto;margin:0;
    overflow:visible;clip-path:none;
  }

  /* na gaveta o campo cabe inteiro, e vem primeiro: abrir o menu e digitar
     economiza o carregamento da `/busca` que o link antigo custava */
  .menu__painel .barra-busca{margin-bottom:var(--e4)}
  .menu__painel .barra-busca input[type=search]{width:100%}
}
@media(max-width:430px){
  .barra{gap:var(--e2)}
  .barra__marca img{height:26px}
}

@media(prefers-reduced-motion:reduce){
  .menu__marca i{transition:none}
}

/* ── a peça ao lado dos códigos, na sanfona da Imports ─────────────────────── */
.baixa-grupo__peca{
  width:44px;height:44px;flex:0 0 44px;
  object-fit:contain;background:#fff;border:1px solid var(--risco);border-radius:2px}

/* ═══════════════ CONTROLE NO CELULAR — passada de 26/08 ═══════════════
   Medido antes de escrever, controle por controle, em 1440 e em 390 px: o
   título do hero ia de 69,9 para 39,3 px e o número da barra de 51,7 para
   29,1 — a escala de display já era fluida. Mas **nenhum controle mudava**:
   botão 141x38 nos dois, pastilha 60x33 nos dois, botão de tema 32x32 nos
   dois. Apontamento do Herasmo: "o tamanho do botão e da fonte do botão no
   desktop não deveria ser o mesmo na versão do celular".

   A correção NÃO é encolher: é trocar a proporção. No celular o alvo de toque
   sobe para 44 px, que é o piso de dedo, e o RECUO LATERAL encolhe — era ele
   que fazia o botão ocupar três quartos da largura da tela. Botão mais alto e
   mais estreito, que é o contrário de um botão de mouse. */
@media(max-width:820px){
  .botao{
    min-height:2.75rem;
    padding-inline:var(--e3);
    justify-content:center;
  }
  .botao--barra{padding-inline:var(--e3)}
  .ficha-pilula{min-height:2.75rem;align-items:center;padding-inline:var(--e3)}
  /* O ALVO cresce, a CAIXA não. Crescer o quadrado desenhado levava a barra de
     81 para 93 px, e 81 é medida aprovada em 24/08. O dedo ganha os 44 px por
     uma área invisível centrada no botão; o desenho fica como está. */
  .tema{position:relative}
  .tema::after{
    content:'';position:absolute;top:50%;left:50%;
    width:2.75rem;height:2.75rem;transform:translate(-50%,-50%);
  }
  .busca__botao{min-height:2.75rem}
  .passo__opcao{min-height:2.75rem}
  /* Os dois do aviso NÃO esticam para preencher a linha: esticados eles davam
     173 px cada e tomavam a largura inteira, que é o oposto do apontamento. Com
     o recuo lateral menor eles ficam no tamanho do texto e sobra tela. */
  .cookies__acoes .botao{padding-inline:var(--e4)}
}

/* ── fale com a Usina: o bloco de contato depois das peças ──────────────────
   Duas colunas no desktop, empilhado no celular. O botão fica na mesma base do
   texto, e não embaixo dele, para a chamada não virar mais um parágrafo. */
.chamada-usina{
  display:grid;gap:var(--e6) var(--e12);align-items:end;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:56rem){
  .chamada-usina{grid-template-columns:minmax(0,1fr) auto}
}
.chamada-usina__texto .apoio{margin-top:var(--e5)}
.chamada-usina__acao{margin:0}

/* ═══════════════════════════ PÁGINAS DE ERRO ═══════════════════════════
   Criadas em 26/08 (P9). Até então o site não tinha nenhuma: quem errava o
   endereço recebia a página crua do framework, em inglês, sem barra e sem um
   único link. A tela reusa o que já existe — `.topo`, `.busca`, `.botao` — e
   acrescenta só a folga e a fileira de saídas. */
/* SEM `max-width`: a decisão de 24/08 é que parágrafo de corpo alinhado à
   esquerda ocupa a largura inteira do miolo no desktop, e as três telas irmãs
   (`/busca`, `/catalogo`, `/trabalhe-conosco`) medem 100% do miolo. A primeira
   versão desta folha travou em 52ch e a tela de erro saiu com 43% — o mesmo
   defeito de medida que saiu de onze views naquele dia. */
.erro__apoio{margin-top:var(--e5)}
.erro__busca{margin-top:var(--e10)}
.erro__saidas{
  display:flex;flex-wrap:wrap;gap:var(--e3);
  margin-top:var(--e10);
}

/* ── a página de carreiras, itens 12.11 e 12.12 ─────────────────────────────
   Ela reusa `.hero`, `.numeros` e `.secao--filete` inteiros — a apresentação da
   empresa é a mesma da home e do Quem Somos, e dar a ela um desenho próprio
   faria o visitante achar que entrou em outro site. O que nasce aqui é só o que
   não existia: a coluna de texto transcrito e o par de fotos do processo. */
/* ── "Onde você entraria" — item 19.12, 30/08 ──────────────────────────────
   Eram duas fotos empilhadas ABAIXO do texto, e o texto preso em `56ch`, o que
   dava a página "com o texto todo concentrado apenas de um lado" que o Herasmo
   reprovou. Agora é texto e foto lado a lado, na proporção que ele pediu:
   ~70% de texto e ~30% de imagem. O teto de caractere saiu — quem limita a
   medida é a coluna (item 19.0). */
.carreira-onde{
  display:grid;gap:var(--e8);
  grid-template-columns:minmax(0,1fr);align-items:start;
}
@media(min-width:60rem){
  /* 1fr + .42fr = 70 / 30, com o vão contado. */
  .carreira-onde{grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:var(--e16)}
  /* ⚠️ `stretch` e não `start`, item 3 do retorno de 30/08: a foto ocupa a
     ALTURA DA FILEIRA, então as duas colunas terminam na mesma linha. Com
     `aspect-ratio` fixo ela terminava 253 px depois do texto — e foi isso que
     ele chamou de mal enquadrado. O `min-height` é a guarda para a coluna de
     texto curta não achatar a foto. */
  .carreira-onde{align-items:stretch}
  .carreira-onde__foto{height:100%;min-height:22rem}
  .carreira-onde__foto picture{display:block;height:100%}
  .carreira-onde__foto img{height:100%;aspect-ratio:auto}
}
.carreira-prosa{display:grid;gap:var(--e5);margin-top:var(--e8)}
.carreira-onde__foto{margin:0}
.carreira-onde__foto img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border:1px solid var(--risco);
}

/* ── o fecho da página, em duas colunas ────────────────────────────────────
   Mesma anatomia do `.secao__topo`: o que se lê à esquerda, o que se faz à
   direita. Os botões empilham na coluna, e não em fileira: são três, e em
   fileira eles voltariam a atravessar o miolo, que é o que a coluna evita. */
.carreira-fecho{
  display:grid;gap:var(--e8);align-items:start;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:60rem){
  .carreira-fecho{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:var(--e16)}
  /* Item 4 do retorno de 30/08: *"os botões ficariam melhores alinhados na
     margem inferior"*. `stretch` na fileira e `end` no conteúdo da coluna — o
     último botão encosta na mesma linha em que o parágrafo da esquerda acaba. */
  .carreira-fecho{align-items:stretch}
  .carreira-fecho__acoes{align-content:end;min-width:16rem}
}
.carreira-fecho__acoes{display:grid;gap:var(--e4);justify-items:stretch}
/* A chamada de carreira na /contato é uma LINHA, não um card: card a poria no
   mesmo peso dos três canais comerciais, que é o que a decisão de 28/08 tirou. */
.chamada-carreira{
  margin-top:var(--e10);
  font-size:var(--t-md);color:var(--tinta-2);
}

/* O endereço dentro da ficha do showroom: herda a coluna do `<dd>` e some com
   o itálico que o `<address>` traz por padrão do navegador. */
.endereco--ficha{font-style:normal;line-height:1.5}

/* ═══════════════════════ OS CABOS RAYON ═════════════════════════════════════
   Item 9.2. A carta de cabos é vizinha da de acabamentos e NÃO usa a mesma
   pastilha: o acabamento é uma superfície e cabe num quadrado; o cabo é um FIO,
   e um quadrado dele mostra trama sem mostrar cabo. A pastilha é vertical, na
   proporção do próprio recorte.

   ⚠️ O arquivo nativo tem 21 px de largura — o `background-size: cover` amplia,
   e é o máximo que dá até o alta chegar da Usina (item 9.3). Por isso a
   pastilha para em 34 px: acima disso a trama começa a borrar.                */
.cabos{
  display:grid;gap:var(--e5) var(--e4);margin-top:var(--e10);
  grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr));
}
.cabo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e1)}
.cabo__fio{
  display:block;width:34px;height:96px;
  background-size:cover;background-position:center;
  border:1px solid var(--risco-forte);
  transition:transform var(--medio) var(--curva);
}
.cabo:hover .cabo__fio{transform:translateY(-3px)}
.cabo__cod{
  margin-top:var(--e2);
  font-size:var(--t-xs);letter-spacing:.1em;color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}
.cabo__nome{font-size:var(--t-sm);line-height:1.25;text-wrap:balance}
/* ⚠️ `.cabo__selo` e `.cabo--padrao` SAÍRAM em 30/08, item 19.16: nenhuma cor
   desta carta é a de série. O padrão de fábrica é o preto comum de borracha, e
   ele ainda não tem amostra — a imagem é pedido à Usina. Marcar o PT do Rayon
   como padrão dizia ao especificador que ele já vem na peça, e não vem. */
@media(prefers-reduced-motion:reduce){
  .cabo__fio,.cabo:hover .cabo__fio{transition:none;transform:none}
}

/* ═══════════════════════ A FOLHA DE IMPRESSÃO ═══════════════════════════════
   POR ÚLTIMO de propósito: regra de mesma especificidade declarada depois ganha,
   e a folha inteira acima pinta cor de tela. Um bloco de impressão no meio do
   arquivo é sobrescrito por tudo o que vem abaixo dele — foi o que aconteceu
   com o `@media print` de três linhas que morava perto da `.colecao`.

   O que ela serve: a `/codigo` vira FICHA DA PEÇA CONFIGURADA, que o
   especificador manda ao revendedor. Pedido do Herasmo em 26/08.               */

@media print{
  /* O tema de tela é escuro e papel escuro não existe. Trocar os TOKENS, e não
     cada regra, é o que faz a página inteira virar de uma vez. */
  :root, :root[data-tema=claro]{
    --fundo-0:#fff; --fundo-1:#fff; --fundo-2:#fff; --fundo-3:#fff;
    --tinta-1:#111; --tinta-2:#333; --tinta-3:#555;
    --risco:rgb(0 0 0 / .22); --risco-forte:rgb(0 0 0 / .42);
    --brasa:#8a6d1f; --brasa-tinta:#6b5316; --traco:#111;
    --secao:1.2rem;
  }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
  html,body{background:#fff;color:#111}
  @page{ margin:14mm 12mm }

  /* Fora do papel: navegação, rodapé, aviso de cookie, âncora de topo, migalha
     e qualquer botão. Link e botão não clicam num PDF, e o que não clica só
     ocupa linha. */
  .barra,.rodape,.ao-topo,.migalha,.tema,.barra-busca,
  .cookies,.nao-imprime,
  .pedido__acao,.peca__acoes,.destaque__nota{ display:none !important }

  /* Só no papel: o cabeçalho que diz de quem é a folha. */
  .so-impressao{ display:block !important }

  /* A prancha volta à polaridade do arquivo: traço escuro sobre branco. No
     papel não existe tema, e o `invert` da tela deixaria o campo preto. */
  .moldura,.moldura--desenho,.moldura:has(> svg){
    background:#fff !important; border-color:rgb(0 0 0 / .2) !important;
  }
  .moldura--desenho .desenho-tecnico,.peca__tecnico{
    filter:none !important; background:#fff !important;
  }
  .moldura svg{ color:#111 }

  /* Nada de bloco partido no meio: o revendedor lê a ficha, não um quebra-cabeça. */
  .pedido,.ficha,.moldura,.escolha__item,.destaque{
    break-inside:avoid; page-break-inside:avoid;
  }
  /* O `.destaque` é grade de duas colunas na tela e vira bloco no papel; sem
     `break-inside:auto` aqui o navegador empurra a coluna inteira para a folha
     seguinte e sobra uma página em branco antes do primeiro dado. */
  .destaque{ display:block; break-inside:auto; page-break-inside:auto }
  .moldura{ max-width:8.5cm; margin:0 auto 4mm }
  .moldura--desenho .desenho-tecnico{ max-height:7cm }
  .moldura figcaption{ font-size:8pt; margin-top:2mm }
  .peca-dupla{ display:block }

  /* O código é o dado que o revendedor procura primeiro. */
  .pedido{ border:1px solid rgb(0 0 0 / .32); padding:5mm }
  .pedido__codigo{ font-size:15pt }

  /* O topo da tela é editorial: rótulo, código gigante e respiro de sobra. No
     papel ele custava uma FOLHA INTEIRA antes do primeiro dado — medido em
     26/08, a ficha saía com 3 páginas e a p.1 só tinha o código. Comprimido,
     ela cabe em 2, e a primeira já traz código, acabamento e desenho. */
  .secao,.topo{ padding-block:4mm !important }
  .topo{ padding-top:0 !important }
  .codigo__sku{ font-size:20pt !important; margin:0 !important }
  .topo__conta,.rotulo{ font-size:8.5pt !important; margin:0 0 2mm !important }
  .secao--filete{ border-top:0 }
  .secao--filete::before{ display:none }
  a{ text-decoration:none; color:inherit }
}

/* O cabeçalho de impressão não existe na tela. */
.so-impressao{ display:none }
.so-impressao__marca{
  font-size:9pt;letter-spacing:.16em;text-transform:uppercase;margin:0 0 2mm;
}
.so-impressao__peca{
  font-family:var(--display);font-size:16pt;line-height:1.15;margin:0 0 1mm;
}
.so-impressao__nota{ font-size:8.5pt;color:#555;margin:0 0 5mm }


/* ─── A BUSCA DO HERO ────────────────────────────────────────────────────────
   Voltou em 28/08, revendo a retirada de 26/08. O argumento de então — "a
   barra já tem campo" — vale no desktop e cai no celular: lá o campo da barra
   mora dentro da gaveta fechada, e quem chega à home não vê busca nenhuma.

   Mesma anatomia da `.barra-busca`, em escala de hero: campo colado no botão,
   filete de 1 px, cantos de 2 px. No claro o campo ganha fundo próprio porque
   ele fica sobre a parte clara da foto. */
.hero-busca{
  display:flex;align-items:stretch;gap:0;
  margin-top:var(--e6);max-width:26rem;
}
.hero-busca input[type=search]{
  flex:1;min-width:0;
  padding:.72rem .9rem;
  font:inherit;font-size:var(--t-sm);color:var(--tinta-1);
  background:color-mix(in srgb,var(--fundo-2) 88%,transparent);
  border:1px solid var(--risco-forte);border-right:0;
  border-radius:2px 0 0 2px;
  -webkit-appearance:none;appearance:none;
  backdrop-filter:blur(6px);
}
.hero-busca input[type=search]::placeholder{color:var(--tinta-3)}
.hero-busca input[type=search]:focus-visible{outline:2px solid var(--brasa);outline-offset:-1px}
.hero-busca button{
  display:flex;align-items:center;justify-content:center;
  /* 44 px de alvo no celular — a régua da casa, e o desenho não cresce junto */
  width:3rem;min-height:44px;
  color:var(--tinta-1);
  background:color-mix(in srgb,var(--fundo-2) 88%,transparent);
  border:1px solid var(--risco-forte);border-radius:0 2px 2px 0;cursor:pointer;
  backdrop-filter:blur(6px);
}
.hero-busca button svg{width:17px;height:17px}
.hero-busca button:hover{color:var(--brasa);border-color:var(--tinta-3)}
.hero-busca button:focus-visible{outline:2px solid var(--brasa);outline-offset:2px}
@media(max-width:48rem){
  .hero-busca{max-width:none;margin-top:var(--e5)}
  .hero-busca input[type=search]{min-height:44px}
}

/* O rótulo da linha deixou de ser contagem e virou palavra: sem a classe
   `num` ele volta à fonte de texto, e sem o tamanho de dado ele não compete
   com o nome da linha logo abaixo. */
.linha-card__conta{font-variant-numeric:normal;letter-spacing:var(--rastro);text-transform:uppercase}

/* ─── O PASSO LONGO VIRA LISTA ──────────────────────────────────────────────
   Medido em 29/08: Premium 53 dimensões, Grid 52, Spot Beer 41, Legou 38.
   Acima de 18 a fileira de pastilhas deixa de ser escolha e vira parede — quem
   especifica passa a PROCURAR o número em vez de escolher entre opções.

   A lista é o controle que o navegador já sabe percorrer: teclado, busca por
   letra e, no celular, a roda nativa. Os botões continuam no HTML, ocultos,
   como fonte única do estado — a lista só encaminha o clique. */
.opcoes--lista{display:block;max-width:26rem}
.passo__lista{
  width:100%;padding:.6rem .8rem;
  font:inherit;font-size:var(--t-sm);color:var(--tinta-1);
  background:var(--fundo-2);
  border:1px solid var(--risco-forte);border-radius:2px;
  -webkit-appearance:none;appearance:none;
  /* a seta é desenhada aqui: a nativa não segue o tema escuro */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.4rem;
  min-height:44px;                 /* a régua de toque da casa */
  cursor:pointer;
}
.passo__lista:focus-visible{outline:2px solid var(--brasa);outline-offset:1px}
.passo__lista:hover{border-color:var(--tinta-3)}
/* no tema claro o `option` herda o fundo do sistema; fixar os dois evita
   texto claro sobre branco no Firefox */
.passo__lista option{background:var(--fundo-2);color:var(--tinta-1)}

/* ─── ÁREA DO ESPECIFICADOR ─────────────────────────────────────────────────
   O bloco que a Aline redesenhou em 28/08. Duas notas dela guiam a tipografia:
   "Diminuir atenção para o código" e "Aumentar atenção para o resumo das
   informações do produto".

   O código era o maior elemento do bloco. Ele continua sendo o que se copia
   para o pedido, mas quem decide se a peça serve olha antes a potência, a
   tensão e a dimensão — e eram esses que estavam em corpo miúdo. */
.pedido__codigo{font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:-.01em}
.resumo .chave{font-size:var(--t-xs);letter-spacing:var(--rastro);text-transform:uppercase;color:var(--tinta-3)}
.resumo .valor{font-size:var(--t-md);line-height:1.2;color:var(--tinta-1)}

/* Os dois caminhos que ela pediu, lado a lado e com alvo de 44 px. */
.pedido__acoes{
  display:flex;flex-wrap:wrap;gap:var(--e3);
  margin-top:var(--e6);
}
.pedido__acoes .botao{min-height:44px;display:inline-flex;align-items:center}
.pedido__acao{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);margin-top:var(--e5)}
.elo--calmo{color:var(--tinta-3)}
.elo--calmo:hover{color:var(--brasa)}
@media(max-width:40rem){
  .pedido__acoes{flex-direction:column;align-items:stretch}
  .pedido__acoes .botao{justify-content:center}
}

/* ─── FEITO NO BRASIL ───────────────────────────────────────────────────────
   Pedido da Ana em 28/08: "pensar onde inserir uma espécie de logo com a
   escrita 'feito no brasil' e uma bandeira, na tela do produto, topo".

   Fica na linha de meta, ao lado da linha e da peça — é ali que o
   especificador lê o que a peça É, e a origem é atributo dela. Sobre a foto
   brigaria com o quadro branco, que é o argumento da ficha.

   A bandeira é DESENHADA, não é arquivo: um losango amarelo sobre verde, em
   14 px, feito com dois gradientes. Acompanha o tema, não pede requisição e
   não desalinha a linha de texto. Em 14 px a esfera azul não se lê — o
   losango sozinho já é reconhecível, e desenhar o que não se vê é ruído. */
.feito-br{
  display:inline-flex;align-items:center;gap:.34em;
  color:var(--tinta-2);
  font-size:inherit;letter-spacing:var(--rastro);
  white-space:nowrap;
}
.feito-br__bandeira{
  display:inline-block;width:15px;height:11px;flex:0 0 auto;
  /* o contorno separa o verde do fundo escuro sem desenhar borda branca */
  outline:1px solid color-mix(in srgb,var(--tinta-1) 16%,transparent);
  outline-offset:-1px;border-radius:1px;
}

/* ═══════════════ OS CATÁLOGOS OFICIAIS, EM /downloads ═══════════════
   Pedido de 31/08: destaque, e não mais uma linha de lista. Cartão com nome,
   formato e PESO — o completo tem 70 MB, e quem baixa em obra precisa saber
   antes de tocar.

   A grade usa a mesma régua dos canais de contato: `minmax(min(100%,21rem))`
   dá três colunas no desktop e uma no celular, sem media query. */
.catalogos{
  margin-top:var(--e6);
  display:grid;gap:var(--e5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.catalogo-card{
  border:1px solid var(--risco-forte);
  padding:var(--e6);
  display:flex;flex-direction:column;gap:var(--e2);
  min-height:9rem;
  transition:border-color var(--rapido) var(--curva),
             background var(--rapido) var(--curva);
}
.catalogo-card:hover,.catalogo-card:focus-visible{
  border-color:var(--brasa);
  background:color-mix(in oklab,var(--brasa) 6%,transparent);
}
.catalogo-card__tipo{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
}
.catalogo-card__nome{
  /* `--display` e não `--serifa`, que não existe nesta folha: a declaração
     inválida era ignorada calada e o nome do catálogo saía em sans, sozinho
     entre os cards serifados do resto do site. */
  font-family:var(--display);font-size:var(--t-md);letter-spacing:-.015em;
  line-height:1.15;
  color:var(--tinta);margin-top:auto;
}
.catalogo-card__peso{font-size:var(--t-sm);color:var(--tinta-2)}

/* ═══════════ OS QUATRO PILARES — Quem Somos e Trabalhe Conosco ═══════════
   Slides 14 e 18 do arquivo da Ana, 31/08. Nasceram emprestando a grade
   `.institucional`, que é rótulo estreito + texto largo e existe para palavras
   de uma linha — "Missão", "Visão", "Valores". Com "01 Indústria brasileira" o
   rótulo comeu a largura e o texto saiu com UMA palavra por linha.

   Aqui cada pilar é um cartão que empilha número, rótulo e texto, e a grade usa
   a mesma régua dos canais de contato: `minmax(min(100%,15rem))` dá quatro
   colunas no desktop, duas no tablet e uma no celular, sem media query. */
.pilares{
  margin-top:var(--e8);
  display:grid;gap:var(--e6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.pilar{
  border-top:1px solid var(--risco-forte);
  padding-top:var(--e4);
  display:flex;flex-direction:column;gap:var(--e2);
}
/* ÍCONE e não número, decisão do Herasmo em 31/08: "01 02 03 04" ao lado de uma
   frase curta lê como lista ordenada, e estes quatro não têm ordem. */
/* `--brasa-tinta` e não `--brasa`: é o token que o site usa para TEXTO âmbar
   (o `.rotulo` usa ele), e é mais claro sobre o fundo escuro. E o seletor leva o
   pai porque `.pilar__icone` sozinho perdia para uma regra de herança que
   pintava o ícone com `--tinta-3` — medido, não suposto. */
.pilar .pilar__icone{display:block;color:var(--brasa-tinta);line-height:0}
.pilar__icone svg{width:1.75rem;height:1.75rem;display:block}
.pilar__nome{
  font-family:var(--display);font-size:var(--t-md);
  line-height:1.15;letter-spacing:-.015em;margin:0;
}
.pilar__texto{color:var(--tinta-2);font-size:var(--t-sm);margin:0}

/* ═══════════ A COLUNA DA BARRA E DOS COOKIES ═══════════
   A barra e o aviso de cookies são faixas de largura TOTAL de propósito: o
   fundo, o blur e o filete precisam atravessar a tela inteira. O CONTEÚDO
   delas, porém, tem de nascer na mesma coluna do resto do site.

   Até 01/09 elas usavam só `padding: … var(--sangria)`, sem a `max-width` que
   a `.env` aplica. Abaixo de `--env` ninguém nota, porque a sobra é pequena.
   Acima, o desalinho é a largura inteira da sobra: medido a 2560 px, a página
   ficava no meio e o menu ia para a borda, 620 px de distância de cada lado.
   A 1920 já eram 300 px.

   O `.rodape` sempre fez certo — ele é a faixa larga com uma `.env` por dentro.
   Aqui não dá para embrulhar sem mexer no markup de toda página, então a mesma
   conta entra no padding: a sangria de sempre MAIS metade da sobra.

   `max(0px, …)` porque abaixo de `--env` a subtração é negativa; ali a régua
   volta a ser exatamente a sangria, e nada muda no celular. */
.barra,
.cookies{
  padding-inline: calc(var(--sangria) + max(0px, (100% - var(--env)) / 2));
}