@charset "UTF-8";
/* ==========================================================================
   PCIL Corantes — Arquitetura Visual Premium
   Decisões 34 e 35 — UI imersiva, glassmorphism e profundidade
   ========================================================================== */

:root {
  --cor-marca: #e95b2a;
  --cor-marca-escura: #bd3f18;
  --cor-marca-ambar: #ffad2f;
  --cor-acao: #e65324;
  --cor-acao-hover: #f26b2f;
  --cor-chumbo: #171311;
  --cor-grafite: #29231f;
  --cor-texto: #443c37;
  --cor-texto-secundario: #6f645d;
  --cor-texto-fraco: #92857d;
  --cor-borda: #eadfd8;
  --cor-borda-forte: #d4c5bc;
  --cor-fundo: #fdf6ef;
  --cor-fundo-alt: #f8f3ef;
  --cor-fundo-quente: #fff6ec;
  --cor-fundo-inverso: #171311;
  --cor-alerta: #8a5700;
  --cor-alerta-fundo: #fff6dc;
  --cor-erro: #a52b1d;
  --cor-sucesso: #1c7041;
  --cor-foco: #126fa8;
  --cor-amostra-pendente: #eee8e3;

  --fonte-base: "Segoe UI Variable", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --fonte-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --texto-xs: .75rem;
  --texto-sm: .875rem;
  --texto-base: 1rem;
  --texto-md: 1.125rem;
  --texto-lg: 1.375rem;
  --texto-xl: 1.75rem;
  --texto-2xl: 2.25rem;

  /* Etiqueta de seção: um único tamanho e tracking para todas as faixas
     (hero, famílias, segmentos, processo, clientes, chamada e rodapé). */
  --texto-etiqueta: .9rem;
  --tracking-etiqueta: .16em;

  /* Cabeçalho: altura, recuo do topo e respiro interno da barra flutuante.
     Quem sobe a marca sobe a barra e o vão que o conteúdo compensa. */
  --altura-cabecalho: 7.6rem;
  --cabecalho-topo: clamp(.6rem, 1.4vh, 1.25rem);
  --cabecalho-pad: clamp(.85rem, 1.6vw, 1.5rem);
  --altura-cabecalho-compacto: 5.9rem;

  /* Régua de dados — usada pelo hero da home e pela capa das páginas. */
  --dado-rotulo: .72rem;
  --dado-valor: clamp(1.3rem, 2.2vw, 1.85rem);

  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 2.75rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --esp-10: 8rem;

  /* Eixo único de conteúdo: o mesmo do cabeçalho e do hero. */
  --largura-max: 88rem;
  --largura-estreita: 48rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --secao-py: clamp(5rem, 9vw, 8rem);
  --alvo-toque: 2.75rem;

  --raio-sm: .875rem;
  --raio: 1.25rem;
  --raio-lg: 1.75rem;
  --raio-xl: 2.5rem;
  --raio-pill: 999px;

  --sombra-sm: 0 8px 24px rgba(50, 31, 21, .08);
  --sombra: 0 18px 52px rgba(50, 31, 21, .12);
  --sombra-lg: 0 28px 80px rgba(36, 20, 13, .18);
  --sombra-marca: 0 16px 38px rgba(230, 83, 36, .32);
  --transicao: 280ms cubic-bezier(.2, .75, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--texto-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { isolation: isolate; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
button, input, textarea, select { border: 0; font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

a {
  color: var(--cor-acao);
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
  transition: color var(--transicao), opacity var(--transicao);
}
a:hover { color: var(--cor-acao-hover); }

h1, h2, h3, h4, h5, h6 {
  color: var(--cor-chumbo);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1 { font-size: clamp(3.4rem, 8vw, 7.5rem); }
h2 { font-size: clamp(2.35rem, 5vw, 4.75rem); }
h3 { font-size: clamp(1.4rem, 2vw, 2rem); }
p { text-wrap: pretty; }

::selection { background: var(--cor-marca); color: #fff; }
[id] { scroll-margin-top: calc(var(--altura-cabecalho) + var(--cabecalho-topo) + 1.5rem); }
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 4px;
  border-radius: .25rem;
}

.container {
  width: min(100% - (var(--gutter) * 2), var(--largura-max));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.pular-para-conteudo {
  position: fixed;
  z-index: 9999;
  top: .75rem;
  left: 50%;
  padding: .8rem 1.25rem;
  transform: translate(-50%, -180%);
  border-radius: var(--raio-pill);
  background: var(--cor-foco);
  box-shadow: var(--sombra);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--transicao);
}
.pular-para-conteudo:focus { transform: translate(-50%, 0); color: #fff; }


/* Hero em vídeo */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--cor-chumbo);
  color: #fff;
}
.hero__video,
.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__video {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}
.hero__overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 14, 12, .94) 0%, rgba(18, 14, 12, .76) 44%, rgba(102, 42, 18, .36) 72%, rgba(233, 91, 42, .3) 100%),
    linear-gradient(0deg, rgba(13, 10, 9, .64) 0%, transparent 48%, rgba(13, 10, 9, .18) 100%);
}
.hero__interno {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 13vh, 9rem);
}
.hero__texto { width: min(100%, 67rem); }
.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: var(--esp-5);
  padding: .55rem .9rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .92);
  font-size: var(--texto-sm);
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero__selo span {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--cor-marca-ambar);
  box-shadow: 0 0 0 .35rem rgba(255, 173, 47, .15), 0 0 1.25rem rgba(255, 173, 47, .8);
}
.hero__titulo {
  max-width: 14ch;
  color: #fff;
  font-size: clamp(3.5rem, 7.5vw, 7.2rem);
  text-shadow: 0 8px 34px rgba(0, 0, 0, .32);
}
.hero__linha {
  max-width: 59ch;
  margin-top: var(--esp-6);
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.6;
}
.hero .acoes { margin-top: var(--esp-7); }
.hero__rolagem {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255, 255, 255, .78);
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}
.hero__rolagem:hover { color: #fff; }
.hero__rolagem span {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.hero__rolagem span::after {
  display: block;
  width: .45rem;
  height: .45rem;
  margin: .65rem auto 0;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  content: "";
  transform: rotate(45deg);
  animation: rolagem 1.8s ease-in-out infinite;
}
@keyframes rolagem {
  0%, 100% { transform: translateY(-2px) rotate(45deg); opacity: .5; }
  50% { transform: translateY(4px) rotate(45deg); opacity: 1; }
}

/* Botões */
.botao {
  position: relative;
  display: inline-flex;
  min-height: 3.45rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: .95rem 1.65rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  background: linear-gradient(135deg, var(--cor-marca-escura), var(--cor-marca));
  box-shadow: var(--sombra-marca);
  color: #fff !important;
  font-size: .94rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-align: center;
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao), background var(--transicao);
}
.botao::before {
  position: absolute;
  top: -100%;
  left: -45%;
  width: 28%;
  height: 300%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
  content: "";
  transform: rotate(24deg);
  transition: left 600ms ease;
}
.botao:hover {
  box-shadow: 0 20px 48px rgba(230, 83, 36, .4);
  color: #fff !important;
  filter: saturate(1.08);
  transform: translateY(-3px) scale(1.025);
}
.botao:hover::before { left: 120%; }
.botao:active { transform: translateY(0) scale(.985); }
.botao--secundario {
  background: linear-gradient(135deg, #342b27, #1b1715);
  box-shadow: 0 14px 34px rgba(20, 14, 11, .24);
}
.botao--secundario:hover { box-shadow: 0 18px 42px rgba(20, 14, 11, .32); }
.botao--claro {
  background: #fff;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
  color: var(--cor-chumbo) !important;
}
.botao--claro:hover { color: var(--cor-marca-escura) !important; }
.botao--contorno-claro {
  border-color: rgba(255, 255, 255, .56);
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.botao--contorno-claro:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .17);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}
.acoes { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Seções e títulos */
.secao {
  position: relative;
  width: 100%;
  padding-block: var(--secao-py);
}
.secao > .container { position: relative; }
.secao--alt {
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 173, 47, .12), transparent 30rem),
    linear-gradient(145deg, #fbf8f5 0%, #f5eee9 100%);
}
.secao--alt::before {
  position: absolute;
  z-index: 0;
  top: -1.75rem;
  right: -5%;
  left: -5%;
  height: 3.5rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #faf6f3;
  content: "";
}
.secao--chumbo {
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(233, 91, 42, .23), transparent 34rem),
    linear-gradient(135deg, #211a17 0%, #100d0c 100%);
  color: rgba(255, 255, 255, .8);
}
.secao--chumbo h1,
.secao--chumbo h2,
.secao--chumbo h3,
.secao--chumbo strong { color: #fff; }
.secao--chumbo p,
.secao--chumbo li { color: rgba(255, 255, 255, .78); }
.secao__titulo { max-width: 18ch; margin-bottom: var(--esp-5); }
.secao__titulo::after {
  display: block;
  width: 3.6rem;
  height: .35rem;
  margin-top: 1.2rem;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-ambar));
  content: "";
}
.secao__descricao {
  max-width: 66ch;
  color: var(--cor-texto-secundario);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
}

/* Cabeçalhos internos */
.pagina-cabecalho {
  min-height: clamp(29rem, 62vh, 42rem);
  display: flex;
  align-items: center;
  padding-top: calc(var(--altura-cabecalho) + var(--cabecalho-topo) + 2rem);
  padding-bottom: 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 173, 47, .3), transparent 30rem),
    radial-gradient(circle at 15% 100%, rgba(233, 91, 42, .16), transparent 24rem),
    linear-gradient(135deg, #fffdfa 0%, #f8eee7 100%);
}
.pagina-cabecalho::after {
  position: absolute;
  z-index: 0;
  right: -8rem;
  bottom: -15rem;
  width: min(42vw, 32rem);
  aspect-ratio: 1;
  border: 3.5rem solid rgba(233, 91, 42, .09);
  border-radius: 50%;
  content: "";
}
.pagina__titulo {
  max-width: 17ch;
  margin-bottom: var(--esp-5);
  font-size: clamp(3.3rem, 7vw, 6.8rem);
}
.pagina__intro {
  max-width: 60ch;
  color: var(--cor-texto-secundario);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.55;
}

/* Conteúdo editorial e mídia */
.texto {
  max-width: 70ch;
  color: var(--cor-texto);
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
}
.texto p + p { margin-top: 1.25rem; }
.texto strong { color: var(--cor-chumbo); font-weight: 800; }
.imagem-larga {
  width: 100%;
  max-height: 72vh;
  margin-block: var(--esp-7);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-lg);
  object-fit: cover;
}
.colunas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-5);
  margin-top: var(--esp-7);
}
.colunas > div {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(212, 197, 188, .65);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.colunas > div:hover {
  border-color: rgba(233, 91, 42, .28);
  box-shadow: var(--sombra);
  transform: translateY(-5px);
}
.colunas__titulo { margin-bottom: var(--esp-3); font-size: 1.4rem; }
.secao--chumbo .colunas > div {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}

/* Cartões da Home */
.cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: var(--esp-7);
}
.cartao {
  position: relative;
  display: flex;
  min-height: 29rem;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.25rem);
  border: 1px solid rgba(212, 197, 188, .58);
  border-radius: var(--raio-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 173, 47, .12), transparent 18rem),
    #fff;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao::after {
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 11rem;
  height: 11rem;
  border: 2rem solid rgba(233, 91, 42, .06);
  border-radius: 50%;
  content: "";
}
.cartao:hover { box-shadow: var(--sombra-lg); transform: translateY(-8px); }
.cartao--destaque {
  border-color: rgba(233, 91, 42, .2);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 173, 47, .28), transparent 22rem),
    linear-gradient(145deg, #fff9f2, #fff);
}
.cartao__titulo { position: relative; z-index: 1; margin-bottom: var(--esp-2); }
.cartao__numero {
  position: relative;
  z-index: 1;
  margin-bottom: var(--esp-5);
  color: var(--cor-marca-escura);
  font-size: var(--texto-lg);
  font-weight: 850;
}
.cartao__texto {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  margin-bottom: var(--esp-6);
  color: var(--cor-texto-secundario);
}
.cartao .botao { position: relative; z-index: 1; }

/* ==========================================================================
   Aplicações — Seção premium com fundo escuro
   ========================================================================== */
.aplicacoes {
  --aplicacao-cols: 3;
  --aplicacao-gap: 2rem;
  
  position: relative;
  width: 100%;
  padding-block: var(--secao-py);
  background: var(--cor-chumbo);
  color: rgba(255, 255, 255, .8);
}

/* ---------- Cabeçalho ---------- */

.aplicacoes__cabecalho {
  display: grid;
  /* O cabeçalho usa 4 colunas (mesma proporção de .familias) para espelhar o layout perfeitamente */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--aplicacao-gap);
  row-gap: 1.4rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.aplicacoes__etiqueta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 .3rem;
  color: var(--cor-marca-ambar);
  font-family: var(--fonte-mono);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}

.aplicacoes__etiqueta::before {
  width: 2.6rem;
  height: .3rem;
  flex-shrink: 0;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-ambar));
  content: "";
}

.aplicacoes__titulo {
  grid-column: 1 / span 2;
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 4.4vw, 3.85rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.aplicacoes__titulo em {
  display: block;
  margin-top: .1em;
  color: var(--cor-marca);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.018em;
}

.aplicacoes__descricao {
  grid-column: 3 / -1;
  max-width: 52ch;
  margin: 0;
  padding-bottom: .4rem;
  color: rgba(255, 255, 255, .65);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.6;
}

/* ---------- Grade de Cards ---------- */

.aplicacoes__grade {
  display: grid;
  grid-template-columns: repeat(var(--aplicacao-cols), minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
}

.aplicacoes__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 14.5rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

.aplicacoes__card:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 91, 42, .4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

/* Fundo com Imagem sempre visível */
.aplicacoes__card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45; /* Visível de cara */
  filter: grayscale(60%) contrast(1.1);
  mix-blend-mode: luminosity;
  transform: scale(1.08);
  transition: opacity .6s cubic-bezier(.22, .9, .36, 1), transform 2s cubic-bezier(.22, .9, .36, 1), filter .6s ease;
  pointer-events: none;
}

/* Máscara escura para garantir leitura perfeita do texto branco */
.aplicacoes__card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--cor-chumbo) 10%, rgba(26, 20, 18, 0.4) 100%);
}

.aplicacoes__card:hover .aplicacoes__card-bg {
  opacity: 0.85; /* Imagem acende no hover */
  filter: grayscale(0%) contrast(1.1); /* Ganha as cores originais */
  transform: scale(1);
}

/* Conteúdo textual (agora ancorado na base do cartão para a leitura ser perfeita sobre o gradiente) */
.aplicacoes__card-conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-grow: 1;
}

.aplicacoes__card-titulo {
  margin-bottom: var(--esp-3);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Proteção extra de leitura */
}

.aplicacoes__card-texto {
  color: rgba(255, 255, 255, .7); /* Um pouco mais claro por padrão devido ao fundo */
  font-size: 1rem;
  line-height: 1.6;
}

.aplicacoes__card:hover .aplicacoes__card-texto {
  color: rgba(255, 255, 255, .95);
}

/* Índice numérico sutil */
.aplicacoes__card-indice {
  position: absolute;
  z-index: 1;
  top: 1.5rem;
  right: 1.5rem;
  color: rgba(255, 255, 255, .25);
  font-family: var(--fonte-mono);
  font-size: .85rem;
  font-weight: 700;
  transition: color var(--transicao);
}

.aplicacoes__card:hover .aplicacoes__card-indice {
  color: rgba(233, 91, 42, .4);
}

/* Animação suave de entrada */
@keyframes aplicacoes-fade {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aplicacoes__card {
  animation: aplicacoes-fade .5s ease-out backwards;
}
.aplicacoes__card:nth-child(1) { animation-delay: .05s; }
.aplicacoes__card:nth-child(2) { animation-delay: .10s; }
.aplicacoes__card:nth-child(3) { animation-delay: .15s; }
.aplicacoes__card:nth-child(4) { animation-delay: .20s; }
.aplicacoes__card:nth-child(5) { animation-delay: .25s; }
.aplicacoes__card:nth-child(6) { animation-delay: .30s; }

/* ==========================================================================
   Como Trabalhamos — Processo Comercial Premium
   ========================================================================== */
.trabalhamos {
  padding: clamp(6rem, 10vw, 9rem) 0 clamp(3rem, 5vw, 5rem);
  background: #fdf6ef; /* Ajustado para uniformizar a transição */
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.trabalhamos::before {
  content: "";
  position: absolute;
  top: -20%; left: -10%; right: -10%; bottom: -10%;
  background: radial-gradient(circle at 50% 0%, rgba(233, 91, 42, 0.04), transparent 70%);
  pointer-events: none;
}

.trabalhamos__cabecalho {
  text-align: center;
  margin-bottom: clamp(4rem, 7vw, 6rem);
}

.trabalhamos__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  color: var(--cor-marca);
  font-family: var(--fonte-mono);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}

.trabalhamos__etiqueta::before,
.trabalhamos__etiqueta::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--cor-marca-ambar);
}

.trabalhamos__titulo {
  margin: 0;
  color: var(--cor-chumbo);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
}

.trabalhamos__titulo em {
  color: var(--cor-marca);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  padding-right: 0.1em;
}

.trabalhamos__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.trabalhamos__card {
  position: relative;
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 3vw, 2.75rem);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--raio);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.22, .9, .36, 1), box-shadow 0.5s ease, border-color 0.3s ease;
  z-index: 1;
}

.trabalhamos__card:hover {
  transform: translateY(-8px);
  border-color: rgba(233, 91, 42, 0.2);
  box-shadow: 0 20px 50px rgba(233, 91, 42, 0.08);
}

.trabalhamos__numero {
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  font-size: 11rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(233, 91, 42, 0.15); /* Mais visível por padrão */
  z-index: -1;
  transition: all 0.6s cubic-bezier(.22, .9, .36, 1);
}

.trabalhamos__card:hover .trabalhamos__numero {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.03); /* Mais fraco no hover */
  transform: scale(1.05) translate(-15px, 15px);
}

.trabalhamos__card-titulo {
  margin-bottom: 1.5rem;
  color: var(--cor-chumbo);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.trabalhamos__card-texto {
  color: var(--cor-texto-secundario);
  font-size: 1.05rem;
  line-height: 1.6;
}

@media (max-width: 64rem) {
  .trabalhamos__grade { grid-template-columns: 1fr; }
  .trabalhamos__card { padding: 2.5rem 2rem; }
}

/* Listas orientativas */
.lista-marcada,
.lista-numerada {
  display: grid;
  max-width: 74rem;
  gap: .85rem;
  margin-block: var(--esp-7);
}
.lista-marcada li,
.lista-numerada li {
  position: relative;
  padding: 1.15rem 1.25rem 1.15rem 3.15rem;
  border: 1px solid rgba(212, 197, 188, .55);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 5px 18px rgba(50, 31, 21, .045);
}
.lista-marcada li::before {
  position: absolute;
  top: 1.55rem;
  left: 1.35rem;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cor-marca), var(--cor-marca-ambar));
  box-shadow: 0 0 0 .32rem rgba(233, 91, 42, .1);
  content: "";
}
.lista-numerada { counter-reset: etapas; }
.lista-numerada li {
  min-height: 5.5rem;
  padding-left: 5rem;
  counter-increment: etapas;
}
.lista-numerada li::before {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cor-marca), var(--cor-marca-ambar));
  box-shadow: 0 8px 20px rgba(230, 83, 36, .22);
  color: #fff;
  content: counter(etapas);
  font-size: .9rem;
  font-weight: 850;
}
.lista-marcada strong,
.lista-numerada strong { color: var(--cor-chumbo); font-weight: 800; }
.secao--chumbo .lista-marcada li,
.secao--chumbo .lista-numerada li {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .78);
}

/* Avisos */
.aviso {
  max-width: 70rem;
  margin-top: var(--esp-7);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(180, 117, 0, .2);
  border-left: .45rem solid var(--cor-marca-ambar);
  border-radius: var(--raio);
  background: linear-gradient(135deg, var(--cor-alerta-fundo), #fffaf0);
  box-shadow: var(--sombra-sm);
}
.aviso__titulo { margin-bottom: var(--esp-3); color: var(--cor-alerta); font-size: var(--texto-xl); }
.aviso p + p { margin-top: var(--esp-3); }

/* Índices e busca */
.indice {
  max-width: 70rem;
  margin-top: var(--esp-7);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .64);
  box-shadow: var(--sombra-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.indice__titulo {
  margin-bottom: 1rem;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.indice__lista { display: flex; flex-wrap: wrap; gap: .55rem; }
.indice__link {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  padding: .55rem .9rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: #fff;
  box-shadow: 0 4px 12px rgba(50, 31, 21, .04);
  color: var(--cor-grafite);
  font-size: .88rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform var(--transicao), border-color var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.indice__link:hover {
  border-color: rgba(233, 91, 42, .42);
  box-shadow: 0 8px 18px rgba(230, 83, 36, .12);
  color: var(--cor-marca-escura);
  transform: translateY(-2px);
}
.filtro {
  max-width: 70rem;
  margin-top: var(--esp-5);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-sm);
}
.filtro__rotulo {
  display: block;
  margin-bottom: .55rem;
  color: var(--cor-chumbo);
  font-size: .9rem;
  font-weight: 800;
}
.filtro__campo {
  width: 100%;
  min-height: 3.45rem;
  padding: .85rem 1rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: #fffdfb;
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.filtro__campo:focus {
  border-color: var(--cor-marca);
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 .3rem rgba(233, 91, 42, .11);
}
.filtro__contagem {
  min-width: 7.5rem;
  padding: .7rem 1rem;
  border-radius: var(--raio-pill);
  background: var(--cor-fundo-quente);
  color: var(--cor-marca-escura);
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
}
.filtro__vazio,
.modo-usar {
  max-width: 70rem;
  margin-top: var(--esp-5);
  padding: 1.15rem 1.35rem;
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-quente);
  color: var(--cor-texto);
  box-shadow: var(--sombra-sm);
}

/* Tabelas e blocos técnicos */
.tabela-wrap {
  max-width: 70rem;
  margin-top: var(--esp-7);
  overflow: hidden;
  border: 1px solid rgba(212, 197, 188, .55);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra);
}
.tabela-tecnica {
  width: 100%;
  border-collapse: collapse;
  color: var(--cor-texto);
}
.tabela-tecnica caption {
  padding: 1rem 1.4rem;
  background: #fff;
  color: var(--cor-texto-secundario);
  font-size: .88rem;
  font-weight: 700;
  text-align: left;
}
.tabela-tecnica th,
.tabela-tecnica td {
  padding: 1rem clamp(1rem, 3vw, 1.5rem);
  text-align: left;
}
.tabela-tecnica thead th {
  background: linear-gradient(135deg, #2a211d, #15110f);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tabela-tecnica tbody tr {
  border-bottom: 1px solid var(--cor-borda);
  transition: background var(--transicao), transform var(--transicao);
}
.tabela-tecnica tbody tr:last-child { border-bottom: 0; }
.tabela-tecnica tbody tr:hover { background: #fff7ef; }
.tabela-tecnica__nome { color: var(--cor-grafite); font-weight: 750; }
.tabela-tecnica__codigo {
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: .95rem;
  font-weight: 700;
}
/* Color Index ausente: travessão em vez de texto. O motivo fica no title. */
.tabela-tecnica__vazio {
  color: var(--cor-borda-forte);
  font-family: var(--fonte-mono);
  font-style: normal;
  font-weight: 700;
}
.bloco-tecnico {
  max-width: 70rem;
  margin-top: var(--esp-6);
  display: grid;
  gap: var(--esp-5);
}
.bloco-tecnico__grupo {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(212, 197, 188, .55);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--sombra-sm);
}
.bloco-tecnico__rotulo { margin-bottom: var(--esp-4); font-size: var(--texto-lg); }
.bloco-tecnico .lista-marcada { margin-block: 0; }
.lista-definicao { display: grid; gap: .85rem; }
.lista-definicao > div {
  padding: 1.25rem;
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-alt);
}
.lista-definicao dt { color: var(--cor-chumbo); font-weight: 800; }
.lista-definicao dd { margin-top: .25rem; color: var(--cor-texto-secundario); }

/* Cartela de cores (Pantone Premium Redesign) */
/* Estilos das Seções da Cartela */
/* Cartela de cores — cartão de amostra.
   A amostra é o produto: nenhuma sobreposição, filtro ou efeito sobre ela.
   A afordância de cópia vive na legenda, fora da área de cor. */
.grid-cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
  gap: clamp(.85rem, 1.6vw, 1.15rem);
  margin-top: var(--esp-5);
}
.cor { min-width: 0; }
.cor__botao {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .7rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: #fff;
  text-align: left;
  position: relative;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.cor__botao:hover {
  border-color: var(--cor-borda-forte);
  box-shadow: 0 6px 18px rgba(50, 31, 21, .07);
}
.cor__botao:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}
.cor__amostra {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--raio-sm) * .55);
  /* Fio de contorno para que amostras claras não sumam no cartão branco.
     É contorno, não véu: não cobre nem altera a área de cor. */
  box-shadow: inset 0 0 0 1px rgba(23, 19, 17, .12);
}
.cor__amostra--textura {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.cor__amostra--pendente {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .45) 25%, transparent 25%) -12px 0 / 24px 24px,
    linear-gradient(225deg, rgba(255, 255, 255, .45) 25%, transparent 25%) -12px 0 / 24px 24px,
    var(--cor-amostra-pendente);
}
.cor__legenda {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: .45rem;
}
/* O nome empurra a barra para a base; cartões da mesma linha se alinham. */
.cor__nome { margin-bottom: .35rem; }
.cor__codigo,
.cor__alerta { margin-bottom: .35rem; }
.cor__nome {
  color: var(--cor-chumbo);
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.3;
}
.cor__codigo {
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}
.cor__alerta {
  color: var(--cor-alerta);
  font-size: var(--texto-xs);
  font-weight: 700;
}
.cor__feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .35rem .8rem;
  border-radius: var(--raio-pill);
  background: var(--cor-chumbo);
  color: #fff;
  font-size: var(--texto-xs);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear;
}
.cor__botao.copiado .cor__feedback { opacity: 1; }

/* Contato e formulário */
.contato {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.contato .secao__titulo {
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  letter-spacing: -0.02em;
}
@media (min-width: 64rem) {
  .contato {
    grid-template-columns: minmax(20rem, 0.8fr) minmax(32rem, 1.2fr);
    gap: 4rem;
    align-items: center;
  }
}
.contato > .secao { min-width: 0; padding-inline: var(--gutter); }
.contato > .secao > .container { width: 100%; margin: 0; }
.contato__canais > .container { margin-left: auto; max-width: 28rem; }
.contato__formulario > .container { margin-right: auto; max-width: 38rem; }

.contato__formulario {
  background: #fff;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}
.contato__canais { background: transparent; }

.contato__rotulo {
  margin-top: var(--esp-6);
  margin-bottom: var(--esp-3);
  color: var(--cor-marca-ambar);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.contato__lista { display: grid; gap: 1rem; }
.contato__telefone {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cor-chumbo);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: color var(--transicao), transform var(--transicao);
}
.contato__telefone:hover { color: var(--cor-marca); transform: translateX(5px); }
.contato__telefone svg { color: var(--cor-marca-ambar); }

.contato__endereco {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--cor-texto-secundario);
  font-style: normal;
  line-height: 1.6;
}

/* Horário: mesma composição do endereço — ícone à esquerda, texto ao lado. */
.contato__horario {
  display: flex;
  align-items: start;
  /* Mesmo vão do endereço e dos telefones: o texto de todos precisa começar
     na mesma vertical, senão a coluna fica com três recuos diferentes. */
  gap: .75rem;
  margin-top: var(--esp-4);
  color: var(--cor-texto);
  line-height: 1.55;
}
.contato__horario svg {
  flex: none;
  margin-top: .15rem;
  color: var(--cor-marca);
}
.contato__endereco svg { flex-shrink: 0; margin-top: 0.35rem; color: var(--cor-marca-ambar); }

.contato__canais .botao { margin-top: var(--esp-5); }
/* Limpeza visual da lista no contato */
.contato .lista-marcada { margin-block: 1rem 0; gap: 0.5rem; }
.contato .lista-marcada li {
  padding: 0 0 0 1.5rem;
  border: none;
  background: transparent;
  box-shadow: none;
  min-height: auto;
  color: var(--cor-texto-secundario);
  font-size: 0.95rem;
}
.contato .lista-marcada li::before {
  top: 0.45rem;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
}

.formulario__nota { color: var(--cor-texto-secundario); font-size: .92rem; margin-bottom: 1.25rem; }
.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 1rem;
  column-gap: 1.5rem;
  align-items: flex-start;
}
.formulario .botao { width: 100%; justify-content: center; }
.campo { 
  min-width: 0; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start;
  gap: 0.25rem;
}
.campo--largo { grid-column: 1 / -1; }
.campo__rotulo {
  display: block;
  margin-bottom: 0;
  color: var(--cor-chumbo);
  font-size: .9rem;
  font-weight: 800;
}
.campo__entrada {
  width: 100%;
  min-height: 3rem;
  padding: .65rem 1rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: #fffdfb;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.015);
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.campo__entrada:hover { border-color: #bda99d; }
.campo__entrada:focus {
  border-color: var(--cor-marca);
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 .3rem rgba(233, 91, 42, .11);
}
.campo__entrada--erro {
  border-color: var(--cor-erro);
  background: #fff9f8;
}
.campo__area { min-height: 12rem; resize: vertical; }
.campo__ajuda,
.campo__erro { margin-top: .45rem; font-size: .82rem; }
.campo__ajuda { color: var(--cor-texto-secundario); }
.campo__erro { color: var(--cor-erro); font-weight: 750; }
.consentimento {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: var(--esp-5);
  color: var(--cor-texto-secundario);
  font-size: .82rem;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
}
.consentimento input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  cursor: pointer;
  accent-color: var(--cor-marca);
}
.consentimento--erro { color: var(--cor-erro); }
.armadilha {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.mensagem {
  margin-bottom: var(--esp-5);
  padding: 1.15rem 1.35rem;
  border: 1px solid;
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm);
  font-weight: 750;
}
.mensagem--sucesso { border-color: rgba(28, 112, 65, .25); background: #eef8f2; color: #14542f; }
.mensagem--erro { border-color: rgba(165, 43, 29, .25); background: #fff1ef; color: #852116; }

/* ==========================================================================
   Blocos compartilhados — etiqueta, título de seção e reserva de mídia
   Nascem na Empresa e são a base das próximas páginas.
   ========================================================================== */
.etiqueta {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.15rem;
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}
.etiqueta::before {
  width: 2.6rem;
  height: .3rem;
  flex-shrink: 0;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-ambar));
  content: "";
}
.etiqueta--clara { color: var(--cor-marca-ambar); }

.titulo-secao {
  margin: 0 0 var(--esp-5);
  color: var(--cor-chumbo);
  font-size: clamp(2.25rem, 4.4vw, 3.85rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.titulo-secao em {
  display: block;
  /* Georgia desce muito: sem a folga o "g" italico encosta na linha seguinte. */
  padding-bottom: .06em;
  margin-top: .1em;
  color: var(--cor-marca-escura);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.018em;
}
.titulo-secao--claro { color: #fff; }
.titulo-secao--claro em { color: #ffad38; }

.texto--claro { color: rgba(255, 255, 255, .76); }
.texto--claro strong { color: #fff; }
.texto__abertura {
  color: var(--cor-chumbo);
  font-size: 1.18em;
  font-weight: 600;
  line-height: 1.5;
}

.midia {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Reserva de espaço enquanto a imagem final não chega. */
.midia--reserva {
  display: grid;
  aspect-ratio: var(--proporcao, 3 / 2);
  align-content: center;
  justify-items: center;
  gap: .45rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 2px dashed rgba(233, 91, 42, .38);
  border-radius: inherit;
  background:
    repeating-linear-gradient(135deg, rgba(233, 91, 42, .05) 0 12px, transparent 12px 24px),
    var(--cor-fundo-quente);
  text-align: center;
}
.midia__aviso {
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.midia__arquivo {
  color: var(--cor-chumbo);
  font-family: var(--fonte-mono);
  font-size: .92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.midia__nota {
  max-width: 42ch;
  color: var(--cor-texto-secundario);
  font-size: .88rem;
  line-height: 1.5;
}
.midia__medida {
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  letter-spacing: .08em;
}

.botao--contorno {
  border-color: var(--cor-borda-forte);
  background: transparent;
  box-shadow: none;
  color: var(--cor-chumbo) !important;
}
.botao--contorno:hover {
  border-color: var(--cor-acao);
  background: var(--cor-fundo-quente);
  box-shadow: var(--sombra-sm);
  color: var(--cor-marca-escura) !important;
}

/* ==========================================================================
   Capa de página — cabeçalho imersivo com imagem de fundo
   ========================================================================== */
.capa {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(25rem, 65vh, 40rem); /* Ajuste específico para mobile (não vaza) */
  align-items: center;
  overflow: hidden;
  background: var(--cor-chumbo);
  color: #fff;
}
@media (min-width: 64rem) {
  .capa {
    min-height: 100svh; /* Restaurado: Desktop em tela cheia como nas outras páginas */
  }
}
.capa__fundo,
.capa__overlay {
  position: absolute;
  inset: 0;
}
.capa__fundo { z-index: -2; }
.capa__imagem {
  height: 100%;
  border-radius: 0;
  object-position: 65% center;
}
.capa__overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 14, 12, .95) 0%, rgba(18, 14, 12, .78) 46%, rgba(102, 42, 18, .4) 74%, rgba(233, 91, 42, .3) 100%),
    linear-gradient(0deg, rgba(13, 10, 9, .72) 0%, transparent 52%, rgba(13, 10, 9, .5) 100%);
}
/* Reserva ocupando o fundo da capa: preenche a área toda, em vez de respeitar
   a proporção, e troca para uma paleta legível sobre o chumbo. */
.capa__fundo .midia--reserva {
  height: 100%;
  aspect-ratio: auto;
  border-color: rgba(255, 173, 47, .5);
  border-radius: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 173, 47, .07) 0 12px, transparent 12px 24px),
    linear-gradient(155deg, #241b17 0%, #100d0c 100%);
}
.capa__fundo .midia__aviso  { color: var(--cor-marca-ambar); }
.capa__fundo .midia__arquivo { color: #fff; }
.capa__fundo .midia__nota    { color: rgba(255, 255, 255, .7); }
.capa__fundo .midia__medida  { color: rgba(255, 255, 255, .45); }
/* Sem a foto, o overlay cede para a reserva aparecer. Navegador sem :has()
   apenas mantém o overlay cheio — nada quebra. */
.capa:has(.midia--reserva) .capa__overlay { opacity: .58; }

.capa__interno {
  padding-top: clamp(6rem, 12vh, 10rem);
  padding-bottom: clamp(6rem, 12vh, 10rem);
}
.capa__titulo {
  max-width: 20ch;
  margin: 0;
  color: #fff;
  font-size: clamp(3.4rem, 4.8vw, 5.55rem);
  font-weight: 790;
  letter-spacing: -.058em;
  line-height: .98;
  text-shadow: 0 10px 35px rgba(0, 0, 0, .24);
}
.capa__titulo em {
  display: block;
  /* A folga inferior evita o corte da descida longa da Georgia. */
  padding-bottom: .08em;
  margin-top: .08em;
  color: #ffad38;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.04;
  text-shadow: 0 12px 35px rgba(207, 77, 24, .2);
}
/* Na capa a etiqueta acompanha o selo do hero: régua fina e texto claro.
   A barra grossa em gradiente fica para as etiquetas de seção. */
.capa .etiqueta {
  gap: .8rem;
  color: rgba(255, 255, 255, .78);
}
.capa .etiqueta::before {
  width: 2.75rem;
  height: 2px;
  border-radius: 0;
  background: var(--cor-marca-ambar);
}

.capa__intro {
  max-width: 56ch;
  margin-top: 1.7rem;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
}
.capa__dados {
  display: grid;
  width: min(100%, 40rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.capa__dados dt {
  margin-bottom: .35rem;
  color: rgba(255, 255, 255, .48);
  font-size: var(--dado-rotulo);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.capa__dados dd {
  color: #fff;
  text-wrap: balance;
  font-size: var(--dado-valor);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* ==========================================================================
   Folha clara que sobe sobre a capa — mesma costura do bloco de famílias
   ========================================================================== */
.folha {
  --folha-raio: clamp(1.5rem, 3vw, 2.75rem);

  position: relative;
  z-index: 3;
  margin-top: calc(var(--folha-raio) * -1);
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  border-radius: var(--folha-raio) var(--folha-raio) 0 0;
  background:
    radial-gradient(circle at 10% -6%, rgba(255, 173, 47, .18), transparent 34rem),
    radial-gradient(circle at 95% 4%, rgba(233, 91, 42, .07), transparent 30rem),
    #fdf6ef;
}

/* História */
.historia {
  display: grid;
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.historia__midia {
  position: sticky;
  top: 9rem;
  display: grid;
  isolation: isolate;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.historia__midia::before {
  position: absolute;
  z-index: -1;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(233, 91, 42, .2) 0%, rgba(255, 173, 47, .1) 42%, transparent 68%);
  content: "";
}
.historia__imagem {
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 26px 38px rgba(60, 30, 15, .28));
  animation: historia-flutua 9s ease-in-out infinite;
}
@keyframes historia-flutua {
  0%, 100% { transform: translateY(-.55rem); }
  50%      { transform: translateY(.55rem); }
}
@media (prefers-reduced-motion: reduce) {
  .historia__imagem { animation: none; }
}
.historia__texto { min-width: 0; }

/* ==========================================================================
   Laboratório — faixa escura com o argumento de controle de cor
   ========================================================================== */
.laboratorio {
  --lab-raio: clamp(1.5rem, 3vw, 2.75rem);

  position: relative;
  z-index: 4;
  margin-top: calc(var(--lab-raio) * -1);
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  border-radius: var(--lab-raio) var(--lab-raio) 0 0;
  background:
    radial-gradient(circle at 88% -4%, rgba(233, 91, 42, .26), transparent 34rem),
    linear-gradient(155deg, #241b17 0%, #14100e 52%, #100d0c 100%);
  color: rgba(255, 255, 255, .76);
}
.laboratorio__grade {
  display: grid;
  align-items: start;
  gap: clamp(1.75rem, 3.5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.laboratorio__cabecalho { min-width: 0; }
.laboratorio__cabecalho .titulo-secao { margin-bottom: 0; }
/* Sem largura própria: a medida de leitura sai da coluna. */
.laboratorio__prosa {
  min-width: 0;
  max-width: none;
  padding-top: .35rem;
}

/* Pilares numerados */
.pilares {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(3rem, 6vw, 5rem);
}
.pilar {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(2rem, 3.2vw, 2.75rem);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--transicao), border-color var(--transicao), background var(--transicao);
}
.pilar:hover {
  border-color: rgba(255, 173, 47, .38);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-6px);
}
.pilar__numero {
  position: absolute;
  z-index: -1;
  top: -1.25rem;
  right: -.75rem;
  color: transparent;
  font-size: 7.5rem;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 2px rgba(255, 173, 47, .16);
  transition: transform var(--transicao);
}
.pilar:hover .pilar__numero { transform: translate(-8px, 8px) scale(1.05); }
.pilar__titulo {
  margin-bottom: .9rem;
  color: #fff;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.pilar__texto {
  color: rgba(255, 255, 255, .7);
  font-size: 1rem;
  line-height: 1.65;
}

/* ==========================================================================
   Compromisso — os dois padrões declarados
   ========================================================================== */
.compromisso {
  position: relative;
  padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(1.5rem, 3vw, 3rem);
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 173, 47, .14), transparent 30rem),
    #fdf6ef;
}
.compromisso__grade {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
.compromisso__item {
  position: relative;
  padding: clamp(2rem, 3.2vw, 2.85rem);
  padding-left: clamp(2rem, 3.2vw, 2.85rem);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.compromisso__item::before {
  position: absolute;
  top: clamp(2rem, 3.2vw, 2.85rem);
  bottom: clamp(2rem, 3.2vw, 2.85rem);
  left: 0;
  width: .3rem;
  border-radius: var(--raio-pill);
  background: linear-gradient(180deg, var(--cor-marca), var(--cor-marca-ambar));
  content: "";
}
.compromisso__item:hover {
  border-color: rgba(233, 91, 42, .28);
  box-shadow: var(--sombra);
  transform: translateY(-5px);
}
.compromisso__marca {
  margin-bottom: .9rem;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -.025em;
  line-height: 1.15;
}
.compromisso__texto {
  color: var(--cor-texto);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ==========================================================================
   Onde estamos
   ========================================================================== */
.local {
  padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(2rem, 4vw, 4rem);
  background: #fdf6ef;
}
.local__grade {
  display: grid;
  align-items: start;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, .8fr);
}
.local__cabecalho,
.local__corpo,
.local__ficha { min-width: 0; }
.local__corpo,
.local__ficha { padding-top: .35rem; }
.local__cabecalho .titulo-secao { margin-bottom: 0; }
.local__corpo .texto { max-width: none; }
.local__endereco {
  display: grid;
  gap: .2rem;
  margin-top: 0;
  padding-left: 1.25rem;
  border-left: .3rem solid;
  border-image: linear-gradient(180deg, var(--cor-marca), var(--cor-marca-ambar)) 1;
  font-style: normal;
}
.local__linha {
  color: var(--cor-chumbo);
  font-family: var(--fonte-mono);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.local__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: var(--esp-5);
}

@media (max-width: 64rem) {
  .historia,
  .laboratorio__grade { grid-template-columns: 1fr; }
  .local__grade { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .local__cabecalho { grid-column: 1 / -1; }
  .local__corpo,
  .local__ficha { padding-top: 0; }
  .historia__midia { position: static; }
  .historia__midia { padding-block: 0 2rem; }
  .pilares { grid-template-columns: 1fr; }
  .compromisso__grade { grid-template-columns: 1fr; }
  .laboratorio__prosa { padding-top: 0; }
}

@media (max-width: 48rem) {
  .local__grade { grid-template-columns: 1fr; }
  .capa { min-height: auto; }
  .capa__dados { grid-template-columns: 1fr; gap: 1.1rem; }
  .capa__dados div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .capa__dados dt { margin-bottom: 0; }
  .local__acoes .botao { width: 100%; }
}

/* ==========================================================================
   Catálogo — barra de uma linha e acordeão de famílias
   Onze tabelas abertas ao mesmo tempo davam 21.000px de página. O acordeão
   nativo mantém todo o conteúdo no HTML (indexável) e entrega uma tela
   navegável: cada família é uma linha até ser aberta.
   ========================================================================== */

/* Rótulo lido por leitor de tela, invisível na página. */
.sr-apenas {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.capa--curta { min-height: clamp(30rem, 74svh, 48rem); }

/* ==========================================================================
   Catálogo — coluna de filtros fixa à esquerda, lista de famílias à direita
   Nenhuma faixa horizontal atravessa a página: a busca acompanha a rolagem
   na própria coluna, sem disputar espaço com o menu flutuante nem cobrir a
   curva da folha.
   ========================================================================== */
.catalogo-layout {
  display: grid;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 17rem minmax(0, 1fr);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.catalogo-principal { min-width: 0; }
/* Coluna de grade precisa poder encolher: sem isto a faixa horizontal de
   filtros define a largura da página e empurra scroll lateral. */
.filtros,
.filtros__fixo,
.filtros__facetas,
.filtros__estado,
.filtros__bloco { min-width: 0; }
/* Item de grade nasce com min-width:auto e não encolhe abaixo do próprio
   conteúdo mínimo: em tela de 320px isso empurrava a página inteira de lado. */
.categoria-bloco { min-width: 0; }

.filtros__fixo {
  position: sticky;
  top: calc(var(--altura-cabecalho-compacto) + var(--cabecalho-topo) + 1rem);
  display: grid;
  gap: 1rem;
}
.filtros__rotulo {
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* Retorno da busca: aparece só quando há filtro ativo. */
.filtros__resultado {
  padding: .5rem .7rem;
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-quente);
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: .76rem;
  font-weight: 700;
}

/* Sem altura máxima: onze famílias cabem inteiras. Rolagem interna aqui
   produzia barra nativa e cortava o último item ao meio. */
/* Lista de Filtros com visual Editorial / Clean Premium */
.filtros__lista {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--raio);
  background: #fff;
  border: 1px solid var(--cor-borda);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  overflow: hidden; /* Mantém os cantos arredondados nos itens */
}
.filtros__opcao {
  position: relative;
  display: grid;
  align-items: center;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.85rem 1.2rem 0.85rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--cor-texto);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao), padding-left var(--transicao);
}
.filtros__opcao:last-child {
  border-bottom: none;
}
/* Marcador da opção ativa */
.filtros__opcao::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.25rem;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--cor-marca);
  content: "";
  transform: translateY(-50%);
  transition: height var(--transicao);
}
.filtros__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filtros__opcao:hover { 
  background: rgba(245, 245, 245, 0.6); 
  color: var(--cor-marca-escura);
  padding-left: 1.7rem; /* Suave micro-interação de indentação */
}
.filtros__opcao--ativa,
.filtros__opcao--ativa:hover {
  background: rgba(233, 91, 42, 0.04);
  color: var(--cor-chumbo);
  font-weight: 700;
  padding-left: 1.5rem; /* Reseta a indentação para o item ativo */
}
.filtros__opcao--ativa::before { height: 100%; }
.filtros__n {
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-mono);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color var(--transicao);
}
.filtros__opcao:hover .filtros__n { color: var(--cor-marca); }
.filtros__opcao--ativa .filtros__n { color: var(--cor-marca-escura); }

/* Campo de busca */
.campo-busca { position: relative; display: flex; align-items: center; }
.campo-busca__lupa {
  position: absolute;
  left: .95rem;
  color: var(--cor-texto-fraco);
  pointer-events: none;
  transition: color var(--transicao);
}
.campo-busca__campo {
  width: 100%;
  min-height: 2.9rem;
  padding: .65rem .9rem .65rem 2.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .8);
  color: var(--cor-chumbo);
  font-size: .92rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.campo-busca__campo::placeholder { color: var(--cor-texto-fraco); }
.campo-busca__campo:focus {
  background: #fff;
  border-color: var(--cor-marca);
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(233, 91, 42, .13), inset 0 1px 2px rgba(0,0,0,0.02);
}
.campo-busca:focus-within .campo-busca__lupa { color: var(--cor-marca); }

.catalogo-vazio {
  max-width: var(--largura-estreita);
  padding: clamp(2rem, 4vw, 3rem) 0;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-md);
  text-align: center;
}

/* ==========================================================================
   Acordeão de família
   ========================================================================== */
/* Fundo quente atrás das fichas: sobre branco puro, cartão branco não lê como
   cartão — some no fundo e a lista vira uma pilha de traços. */
.catalogo-fundo {
  --folha-raio: clamp(1.5rem, 3vw, 2.75rem);

  position: relative;
  z-index: 3;
  margin-top: calc(var(--folha-raio) * -1);
  padding-top: var(--folha-raio);
  border-radius: var(--folha-raio) var(--folha-raio) 0 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 173, 47, .12), transparent 32rem),
    linear-gradient(180deg, #fffaf4 0%, #f8f2ec 100%);
}
/* Fechadas, as famílias cabem em duas colunas e a lista deixa de ser uma
   coluna estreita com sobra dos dois lados. Ao abrir, a família toma a linha
   inteira, porque a tabela precisa da largura. */
.catalogo {
  display: grid;
  gap: .6rem;
}
.acordeao {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.acordeao[open] {
  border-color: rgba(233, 91, 42, .3);
  box-shadow: var(--sombra);
}
.acordeao[open] .acordeao__cabecalho { background: var(--cor-fundo-quente); }
.acordeao[open] .acordeao__marca { height: 3.4rem; }

.acordeao__cabecalho {
  display: grid;
  min-height: 4.6rem;
  flex: 1 1 auto;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.5rem);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: .85rem clamp(1.1rem, 2.5vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  transition: background var(--transicao);
}
.acordeao__cabecalho::-webkit-details-marker { display: none; }
.acordeao__cabecalho:hover { background: var(--cor-fundo-quente); }
.acordeao__cabecalho:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: -3px;
}

/* Assinatura de cor da família: a paleta real, empilhada na borda da linha. */
.acordeao__marca {
  display: flex;
  overflow: hidden;
  width: .45rem;
  height: 2.9rem;
  transition: height var(--transicao);
  flex-direction: column;
  border-radius: var(--raio-pill);
  background: var(--cor-borda);
}
.acordeao__marca span { flex: 1 1 0; background: var(--faixa); }

.acordeao__identidade { display: grid; gap: .18rem; min-width: 0; }
.acordeao__sigla {
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.acordeao__titulo {
  overflow: hidden;
  color: var(--cor-chumbo);
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-overflow: ellipsis;
}
.acordeao__contagem {
  padding: .2rem .65rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-mono);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.acordeao__seta {
  color: var(--cor-texto-fraco);
  transition: transform var(--transicao), color var(--transicao);
}
.acordeao[open] .acordeao__seta { color: var(--cor-marca); transform: rotate(180deg); }

/* Contexto em cima, dados embaixo. Em duas colunas, a descrição curta do
   Pcilacete (155 caracteres) deixava um vão do tamanho da tabela ao lado —
   o texto varia de 155 a 630 caracteres e nenhuma largura fixa serve aos dois. */
.acordeao__corpo {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.85rem);
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.1rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--cor-borda);
}
.acordeao__contexto { min-width: 0; }
.acordeao__dados { min-width: 0; }
.acordeao__contexto > * + * { margin-top: .75rem; }
.acordeao__pergunta {
  margin-bottom: .75rem;
  color: var(--cor-marca-escura);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.acordeao__descricao {
  color: var(--cor-texto);
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.75;
  text-wrap: pretty;
}

/* ==========================================================================
   Tabela técnica, versão densa
   ========================================================================== */
.acordeao .tabela-wrap {
  max-width: none;
  margin-top: 0;
  border-color: var(--cor-borda);
  border-radius: var(--raio-sm);
  box-shadow: none;
}
.acordeao .tabela-tecnica th:first-child { width: 62%; }
.acordeao .tabela-tecnica thead th {
  padding: .6rem clamp(.85rem, 2vw, 1.15rem);
  background: linear-gradient(135deg, #2a211d, #15110f);
  font-size: .66rem;
  letter-spacing: .17em;
}
.acordeao .tabela-tecnica tbody th,
.acordeao .tabela-tecnica tbody td {
  padding: .58rem clamp(.85rem, 2vw, 1.15rem);
  font-size: .94rem;
  text-align: left;
}
.acordeao .tabela-tecnica tbody tr {
  border-bottom: 1px solid var(--cor-borda);
  transition: background var(--transicao), box-shadow var(--transicao);
}
/* Zebra discreta: em tabela de 28 linhas é o que impede pular de linha. */
.acordeao .tabela-tecnica tbody tr:nth-child(even) { background: rgba(250, 246, 242, .75); }
.acordeao .tabela-tecnica tbody tr:hover {
  background: var(--cor-fundo-quente);
  box-shadow: inset .2rem 0 0 var(--cor-marca);
}
.acordeao .tabela-tecnica__codigo {
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: .86rem;
  white-space: nowrap;
}

/* ==========================================================================
   Fichas técnicas
   ========================================================================== */
/* align-items: start impede o card curto de esticar até a altura do vizinho
   mais alto — era o que abria o vão embaixo de "Argamassas". */
.fichas {
  display: grid;
  align-items: start;
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.acordeao__dados > * + * { margin-top: 1.1rem; }
.ficha {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-alt);
}
.ficha--larga { grid-column: 1 / -1; }
.ficha__titulo {
  margin-bottom: .75rem;
  color: var(--cor-chumbo);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.ficha__lista {
  display: grid;
  gap: .4rem;
  color: var(--cor-texto);
  font-size: .93rem;
}
.ficha__lista li { position: relative; padding-left: 1rem; }
.ficha__lista li::before {
  position: absolute;
  top: .6em;
  left: 0;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--cor-marca-ambar);
  content: "";
}
/* `min()` no piso: sem ele a trilha exige 21rem mesmo em container de
   19rem, a lista transborda e a página inteira ganha rolagem lateral. */
.ficha__lista--colunas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.ficha__texto { color: var(--cor-texto-secundario); font-size: .93rem; line-height: 1.55; }

.acordeao .modo-usar {
  max-width: none;
  margin-top: 1.35rem;
  font-size: .95rem;
}

@media (max-width: 68rem) {
  .catalogo-layout { grid-template-columns: 1fr; }
  .filtros__fixo { position: static; }
  .filtros__lista {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: .4rem;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .filtros__lista::-webkit-scrollbar { display: none; }
  .filtros__lista {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .filtros__opcao {
    max-width: 14rem;
    min-height: 2.6rem;
    padding: .5rem .9rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pill);
    background: #fff;
  }
  /* Em faixa horizontal a régua vertical não faz sentido: a marcação vira
     contorno na própria pílula. */
  .filtros__opcao::before { display: none; }
  .filtros__opcao--ativa,
  .filtros__opcao--ativa:hover {
    border-color: var(--cor-marca);
    box-shadow: 0 0 0 1px var(--cor-marca);
  }
}

@media (max-width: 56rem) {
  .acordeao__contagem { display: none; }
}

@media (max-width: 48rem) {
  .acordeao__cabecalho { gap: .8rem; }
  .acordeao .tabela-wrap { overflow-x: auto; }
  .acordeao .tabela-tecnica { min-width: 26rem; }
}

/* ==========================================================================
   Chamada final — card escuro, texto à esquerda, ações à direita
   ========================================================================== */
.chamada {
  position: relative;
  z-index: 2;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(1.5rem, 3vw, 3rem);
  background: #fdf6ef; /* Ajustado para uniformizar a transição */
}
.chamada__interno {
  position: relative;
  z-index: 1;
  display: grid;
  overflow: hidden;
  align-items: start;
  gap: clamp(2rem, 4vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding: clamp(2.75rem, 4.5vw, 4.25rem) clamp(1.75rem, 3.5vw, 4rem);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(135deg, var(--cor-chumbo) 0%, rgba(14, 12, 11, 1) 100%);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* Brilho ancorado no canto, como nas seções chumbo. Um anel centralizado
   seria cortado pelo overflow e leria como artefato. */
.chamada__interno::before {
  position: absolute;
  z-index: -1;
  top: -40%;
  right: -10%;
  width: 42rem;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(233, 91, 42, .22) 0%, transparent 58%);
  content: "";
  pointer-events: none;
}
.chamada__cabecalho,
.chamada__corpo { min-width: 0; }
/* Compensa a altura-x do parágrafo para ele nascer na mesma linha ótica do título. */
.chamada__corpo { padding-top: .35rem; }
.chamada__etiqueta {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.1rem;
  color: var(--cor-marca-ambar);
  font-family: var(--fonte-mono);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}
.chamada__etiqueta::before {
  width: 2.6rem;
  height: .3rem;
  flex-shrink: 0;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-ambar));
  content: "";
}
.chamada__titulo {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.chamada__texto {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 1.05rem;
  line-height: 1.65;
}
.chamada__texto a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 173, 47, .55);
  text-decoration-thickness: .09em;
  text-underline-offset: .22em;
}
.chamada__texto a:hover { color: var(--cor-marca-ambar); text-decoration-color: currentColor; }
.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.85rem;
}

@media (max-width: 58rem) {
  .chamada__interno { grid-template-columns: 1fr; gap: 1.5rem; }
  .chamada__corpo { padding-top: 0; }
  .chamada__acoes .botao { flex: 1 1 14rem; }
}

/* ==========================================================================
   Nossos Clientes — Confiança em escala
   ========================================================================== */
.clientes {
  background: #fdf6ef; /* Mesmo tom das seções acima */
  padding-block: clamp(5rem, 8vw, 8rem);
  position: relative;
  z-index: 1;
}

.clientes__cabecalho {
  text-align: center;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.clientes__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.25rem;
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}

.clientes__etiqueta::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--cor-marca-ambar);
}

.clientes__titulo {
  margin: 0 0 1rem;
  color: var(--cor-chumbo);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.clientes__texto {
  max-width: 55ch;
  margin-inline: auto;
  color: rgba(23, 19, 17, 0.65);
  font-size: 1.05rem;
  line-height: 1.6;
}

.clientes__grade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.clientes__item {
  background: #fff;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 4rem;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  font-weight: 700;
  color: rgba(23, 19, 17, 0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  cursor: default;
}

.clientes__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(233, 91, 42, 0.08);
  color: var(--cor-marca);
  border-color: rgba(233, 91, 42, 0.25);
}

/* ==========================================================================
   Rodapé — camadas: espectro de produto, aura, filigrana, convite e grade
   ========================================================================== */
.rodape {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, #241b17 0%, #14100e 46%, #0d0a09 100%);
  color: rgba(255, 255, 255, .72);
}

/* Faixa de HEX reais do catálogo. O produto é o ornamento. */
.rodape__espectro {
  display: flex;
  height: .375rem;
}
.rodape__espectro span {
  flex: 1 1 0;
  background: var(--faixa);
  transition: flex-grow 520ms cubic-bezier(.2, .75, .25, 1);
}
.rodape__espectro:hover span { flex-grow: .86; }
.rodape__espectro span:hover { flex-grow: 3.2; }

.rodape__aura {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70rem 34rem at 10% -14%, rgba(233, 91, 42, .26), transparent 62%),
    radial-gradient(48rem 30rem at 94% 6%, rgba(255, 173, 47, .12), transparent 60%),
    radial-gradient(42rem 26rem at 76% 108%, rgba(233, 91, 42, .14), transparent 64%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 12px);
}

/* Marca d'água tipográfica: só contorno, nunca preenchida. */
.rodape__filigrana {
  position: absolute;
  z-index: -1;
  right: -.05em;
  bottom: -.34em;
  color: transparent;
  font-size: clamp(11rem, 25vw, 24rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
  pointer-events: none;
  user-select: none;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .05);
}

/* Convite */
.rodape__convite {
  display: grid;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr auto;
  padding-block: clamp(3.25rem, 6vw, 4.75rem);
}
.rodape__convite::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 18%, rgba(233, 91, 42, .55) 50%, rgba(255, 255, 255, .16) 82%, transparent);
  content: "";
}
.rodape__etiqueta {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.15rem;
  color: var(--cor-marca-ambar);
  font-family: var(--fonte-mono);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}
.rodape__etiqueta::before {
  width: 2.6rem;
  height: .3rem;
  flex-shrink: 0;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-ambar));
  content: "";
}
.rodape__chamada {
  max-width: 18ch;
  color: #fff;
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
}
.rodape__chamada em {
  display: block;
  /* Georgia tem descida longa: o padding evita o corte do "g". */
  padding-bottom: .12em;
  margin-top: .06em;
  color: #ffad38;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-shadow: 0 12px 35px rgba(207, 77, 24, .2);
}
.rodape__convite-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.rodape__ligar {
  display: inline-flex;
  min-height: 3.45rem;
  align-items: center;
  gap: .85rem;
  padding: .6rem 1.5rem .6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
  transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}
.rodape__ligar .ico { color: var(--cor-marca-ambar); flex: none; }
.rodape__ligar:hover {
  border-color: rgba(255, 173, 47, .55);
  background: rgba(255, 173, 47, .1);
  color: #fff;
  transform: translateY(-3px);
}
.rodape__ligar-texto { display: grid; line-height: 1.2; text-align: left; }
.rodape__ligar small {
  color: rgba(255, 255, 255, .58);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rodape__ligar strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }

/* Grade */
.rodape__grade {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr;
  padding-block: clamp(3.25rem, 6vw, 4.75rem);
}
.rodape__bloco { min-width: 0; }

.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.35rem;
}
.rodape__logo img {
  width: 11.5rem;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
  transition: transform var(--transicao);
}
.rodape__logo:hover img { transform: translateY(-2px) scale(1.02); }
.rodape__slogan {
  max-width: 34ch;
  color: rgba(255, 255, 255, .6);
  font-size: .95rem;
  line-height: 1.65;
}
.rodape__redes { display: flex; gap: .75rem; }
.rodape__redes a {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 2.85rem;
  height: 2.85rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  place-items: center;
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.rodape__redes a::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cor-marca), var(--cor-marca-ambar));
  content: "";
  opacity: 0;
  transition: opacity var(--transicao);
}
.rodape__redes a .ico { position: relative; }
.rodape__redes a:hover {
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(233, 91, 42, .32);
  color: #fff;
  transform: translateY(-4px);
}
.rodape__redes a:hover::before { opacity: 1; }

.rodape__titulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rodape__titulo-ico {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border: 1px solid rgba(233, 91, 42, .28);
  border-radius: .7rem;
  background: linear-gradient(140deg, rgba(233, 91, 42, .22), rgba(255, 173, 47, .08));
  color: var(--cor-marca-ambar);
  place-items: center;
}
.rodape__titulo-ico .ico { width: 1.05rem; height: 1.05rem; }

.rodape a {
  color: rgba(255, 255, 255, .66);
  text-decoration: none;
  transition: color var(--transicao), transform var(--transicao);
}
.rodape a:hover { color: var(--cor-marca-ambar); }

.rodape__lista { display: grid; gap: .2rem; }
.rodape__lista a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  font-size: .95rem;
}
.rodape__marcador {
  width: .9rem;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: .45;
  transition: width var(--transicao), opacity var(--transicao);
}
.rodape__lista a:hover { transform: translateX(5px); }
.rodape__lista a:hover .rodape__marcador { width: 1.6rem; opacity: 1; }
.rodape__lista a[aria-current="page"] { color: #fff; font-weight: 700; }
.rodape__lista a[aria-current="page"] .rodape__marcador { background: var(--cor-marca-ambar); opacity: 1; }

.rodape__endereco {
  color: rgba(255, 255, 255, .66);
  font-size: .95rem;
  font-style: normal;
  line-height: 1.7;
}
.rodape__mapa {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.05rem;
  color: var(--cor-marca-ambar);
  font-size: .85rem;
  font-weight: 800;
}
.rodape__mapa .ico { width: .95rem; height: .95rem; transition: transform var(--transicao); }
.rodape__mapa:hover { color: #fff; }
.rodape__mapa:hover .ico { transform: translate(3px, -3px); }

.rodape__contatos { display: grid; gap: .6rem; }
.rodape__contatos a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .85rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .03);
  color: #fff;
  transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}
.rodape__contatos a:hover {
  border-color: rgba(255, 173, 47, .45);
  background: rgba(255, 173, 47, .08);
  color: #fff;
  transform: translateX(4px);
}
.rodape__contato-ico {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: .6rem;
  background: rgba(255, 255, 255, .06);
  color: var(--cor-marca-ambar);
  place-items: center;
}
.rodape__contato-ico .ico { width: 1rem; height: 1rem; }
.rodape__contato-texto { display: grid; line-height: 1.25; }
.rodape__contato-texto small {
  color: rgba(255, 255, 255, .52);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.rodape__contato-texto strong { font-size: 1rem; font-weight: 700; }

.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .28);
}
.rodape__base-interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.6rem;
}
.rodape__creditos { color: rgba(255, 255, 255, .45); font-size: .82rem; }
.rodape__assinatura {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .42);
  font-size: .78rem;
  letter-spacing: .04em;
}
.rodape__assinatura img {
  width: 6.75rem;
  height: auto;
  opacity: .62;
  transition: opacity var(--transicao), transform var(--transicao);
}
.rodape__assinatura:hover { color: rgba(255, 255, 255, .82); }
.rodape__assinatura:hover img { opacity: 1; transform: translateY(-1px); }
.rodape__topo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--raio-pill);
  color: rgba(255, 255, 255, .72);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rodape__topo .ico { width: .95rem; height: .95rem; transition: transform var(--transicao); }
.rodape__topo:hover {
  border-color: rgba(255, 173, 47, .5);
  background: rgba(255, 173, 47, .08);
  color: #fff;
}
.rodape__topo:hover .ico { transform: translateY(-3px); }

@media (max-width: 74rem) {
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: 3rem 2.5rem; }
  .rodape__marca { grid-column: 1 / -1; }
  .rodape__slogan { max-width: 46ch; }
}

@media (max-width: 58rem) {
  .rodape__convite { grid-template-columns: 1fr; }
  .rodape__chamada { max-width: 26ch; }
}

@media (max-width: 44rem) {
  .rodape__grade { grid-template-columns: 1fr; gap: 2.75rem; text-align: center; }
  .rodape__marca { align-items: center; }
  .rodape__slogan { max-width: 42ch; }
  .rodape__titulo { justify-content: center; }
  .rodape__lista a { justify-content: center; }
  .rodape__contatos a { justify-content: center; text-align: left; }
  .rodape__base-interno { justify-content: center; text-align: center; }
  .rodape__filigrana { font-size: 40vw; }
}

@media (prefers-reduced-motion: reduce) {
  .rodape__espectro span { transition: none; }
  .rodape__espectro:hover span,
  .rodape__espectro span:hover { flex-grow: 1; }
}

/* Ajustes de contraste em fundos escuros */
.secao--chumbo .secao__descricao,
.secao--chumbo .secao__titulo::after { background: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-ambar)); }
.secao--chumbo .lista-marcada strong,
.secao--chumbo .lista-numerada strong { color: #fff; }

/* Responsividade */
@media (max-width: 64rem) {
  .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aplicacoes__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contato { grid-template-columns: 1fr; }
  .contato > .secao > .container {
    width: min(100%, var(--largura-max));
    max-width: var(--largura-max);
    margin-inline: auto;
  }
}

@media (max-width: 56rem) {
  .aplicacoes__cabecalho { align-items: start; }
  .aplicacoes__titulo,
  .aplicacoes__descricao { grid-column: 1 / -1; }
  .aplicacoes__descricao { padding-bottom: 0; }
}

@media (max-width: 48rem) {
  :root { --secao-py: 4.5rem; }
  body { font-size: 1rem; }
  [id] { scroll-margin-top: 9rem; }

  .pagina-cabecalho { min-height: auto; padding: 11rem 0 5rem; }
  .pagina__titulo { font-size: clamp(3rem, 13vw, 5rem); }

  .cartoes,
  .colunas,
  .aplicacoes__grade,
  .formulario { grid-template-columns: 1fr; }
  .cartao { min-height: 25rem; }
  .campo--largo { grid-column: auto; }

  .imagem-larga { border-radius: var(--raio-lg); }
  .filtro { grid-template-columns: 1fr; align-items: stretch; }
  .filtro__contagem { justify-self: start; }

  .tabela-wrap { overflow-x: auto; }
  .tabela-tecnica { min-width: 36rem; }


}

@media (max-width: 34rem) {
  /* Catálogo de cor pede densidade: duas colunas seguem legíveis a 360px. */
  .grid-cores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .cor__nome { font-size: .8rem; }
  /* Alinha o texto dos itens com o do endereço, do horário e dos telefones:
     um só eixo de leitura na coluna inteira. */
  .lista-marcada li { padding-left: 2.25rem; }
  /* O botão do mapa ocupava 225px soltos no meio da coluna; em largura cheia
     acompanha a borda do resto e vira alvo de toque decente. */
  .contato__canais .botao--secundario {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .lista-marcada li::before { left: 1.1rem; }
  .lista-numerada li { padding-left: 4.6rem; }
  .indice { padding: 1rem; }
  .indice__lista { gap: .4rem; }
  .indice__link { font-size: .8rem; }
}

/* ==========================================================================
   Recalibração editorial de Header + Hero
   Remove a estética de dashboard e prioriza marca, conteúdo e proporção.
   ========================================================================== */

.cabecalho {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  margin-bottom: calc((var(--altura-cabecalho) + var(--cabecalho-topo)) * -1);
  padding-top: var(--cabecalho-topo);
  border: 0;
  background: linear-gradient(180deg, rgba(23, 19, 17, .6), transparent);
  box-shadow: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao), backdrop-filter var(--transicao);
}
.cabecalho--compacto {
  border-bottom-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cabecalho__interno {
  width: min(
    100% - (var(--gutter) * 2) + (var(--cabecalho-pad) * 2),
    calc(var(--largura-max) + (var(--cabecalho-pad) * 2))
  );
  min-height: var(--altura-cabecalho);
  margin-inline: auto;
  padding: 0 var(--cabecalho-pad);
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr) 15.5rem;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
  transition: min-height var(--transicao), background var(--transicao), box-shadow var(--transicao), backdrop-filter var(--transicao);
}
.cabecalho__interno::before,
.cabecalho__interno::after { display: none; }
/* Fora do celular o painel não existe como caixa: a navegação e o botão de
   contato voltam a ser filhos diretos da grade de três colunas, exatamente
   como antes de haver menu recolhido. */
.cabecalho__painel { display: contents; }

/* O botão do menu só aparece no celular. Declarado aqui, e não só dentro do
   media query, senão ele vaza para o desktop e ocupa uma coluna da grade. */
.cabecalho__menu { display: none; }

/* Bloco de telefones só existe no menu mobile; no desktop fica oculto. */
.cabecalho__contatos { display: none; }

.cabecalho__marca {
  justify-self: start;
  display: block;
  padding: 0;
  border-radius: 0;
}
.cabecalho__marca:hover {
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-1px);
}
.cabecalho__marca img {
  width: clamp(13.25rem, 12.8vw, 14.75rem);
  filter: drop-shadow(0 9px 20px rgba(0, 0, 0, .24));
  transition: width var(--transicao), filter var(--transicao);
}
.navegacao {
  position: relative;
  z-index: 1;
  min-width: 0;
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.navegacao__lista {
  min-height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.45rem, 1.15vw, 1.25rem);
}
.navegacao__link {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: var(--altura-cabecalho);
  padding: 0 clamp(.6rem, .85vw, 1rem);
  flex-direction: row;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transform: none;
  white-space: nowrap;
  transition: color var(--transicao), background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.navegacao__link::before { display: none; }
.navegacao__link::after {
  position: absolute;
  right: auto;
  bottom: 2rem;
  left: 50%;
  width: 1.4rem;
  height: 2px;
  display: block;
  border: 0;
  border-radius: 999px;
  background: var(--cor-marca);
  content: "";
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transition: opacity var(--transicao), transform var(--transicao);
}
.navegacao__rotulo {
  font-size: clamp(.84rem, .9vw, .98rem);
  font-weight: 700;
  letter-spacing: .005em;
}
.navegacao__link:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  transform: none;
}
.navegacao__link:hover::after {
  opacity: .55;
  transform: translateX(-50%) scaleX(1);
}
.navegacao__link[aria-current="page"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}
.navegacao__link[aria-current="page"]::after {
  display: block;
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}
.cabecalho__cta {
  min-height: 3.35rem;
  justify-self: end;
  padding: .8rem .75rem .8rem 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .9rem;
  background: #ef5a2a;
  box-shadow: 0 12px 28px rgba(204, 65, 24, .26);
  color: #fff;
  font-size: .86rem;
  font-weight: 760;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao);
  animation: pulsoCta 1.5s infinite ease-in-out;
}
.cabecalho__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(233, 91, 42, .6);
  pointer-events: none;
  animation: pulsoCtaRing 1.5s infinite ease-in-out;
}
@keyframes pulsoCta {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes pulsoCtaRing {
  0% { transform: scale(1); opacity: 1; }
  50%, 100% { transform: scale(1.35); opacity: 0; }
}
.cabecalho__cta > span:last-child {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  transition: transform var(--transicao), background var(--transicao);
}
.cabecalho__cta:hover {
  background: #fa6834;
  box-shadow: 0 16px 34px rgba(204, 65, 24, .34);
  color: #fff;
  transform: translateY(-2px);
}
.cabecalho__cta:hover::after {
  animation: none;
  opacity: 0;
}
.cabecalho__cta:hover > span:last-child { background: rgba(255, 255, 255, .22); transform: translate(2px, -2px); }
.cabecalho__cta[aria-current="page"] { outline: 2px solid rgba(255, 173, 47, .7); outline-offset: 3px; }
/* Rolando, o fundo deixa de ser faixa e vira uma barra arredondada solta. */
.cabecalho--compacto .cabecalho__interno {
  min-height: 5.9rem;
  border-radius: var(--raio);
  background: rgba(23, 19, 17, .93); /* #171311 translúcido para o blur */
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.cabecalho--compacto .cabecalho__marca img { width: clamp(11rem, 10.5vw, 12rem); }
.cabecalho--compacto .navegacao__lista,
.cabecalho--compacto .navegacao__link { min-height: 5.9rem; }

/* Hero cinematográfico com leitura editorial */
.hero__video {
  object-position: center 48%;
  filter: brightness(.8) saturate(1.02) contrast(1.07);
  animation: hero-video-entrada 1800ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes hero-video-entrada {
  from { opacity: .55; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1.01); }
}
.hero__overlay {
  background:
    linear-gradient(90deg, rgba(10, 8, 7, .96) 0%, rgba(10, 8, 7, .8) 38%, rgba(10, 8, 7, .3) 68%, rgba(10, 8, 7, .06) 100%),
    linear-gradient(0deg, rgba(7, 8, 11, .58) 0%, transparent 52%, rgba(7, 8, 11, .12) 100%),
    radial-gradient(circle at 72% 30%, rgba(255, 140, 35, .08), transparent 30%);
}
.hero__ano {
  position: absolute;
  z-index: 0;
  right: -1.5rem;
  bottom: clamp(3.5rem, 6vh, 5.5rem);
  pointer-events: none;
  user-select: none;
}
.hero__ano span {
  margin: 0 0 clamp(.75rem, 1.2vw, 1.25rem) 10%;
  display: flex;
  align-items: center;
  gap: .85rem;
  color: rgba(255, 255, 255, .6);
  font-size: clamp(.58rem, .65vw, .72rem);
  font-weight: 750;
  letter-spacing: .42em;
  line-height: 1;
  text-transform: uppercase;
}
.hero__ano span::before {
  width: clamp(1.8rem, 3vw, 3rem);
  height: 1px;
  background: rgba(255, 173, 47, .7);
  content: "";
}
.hero__ano strong {
  display: block;
  color: transparent;
  font-size: clamp(13rem, 25vw, 30rem);
  font-weight: 850;
  letter-spacing: -.09em;
  line-height: .75;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .15);
}
.hero__interno {
  width: min(100% - (var(--gutter) * 2), var(--largura-max));
  align-items: center;
  padding-top: clamp(12rem, 18vh, 14rem);
  padding-bottom: clamp(4.5rem, 7vh, 6.5rem);
}
.hero__texto { width: min(100%, 75rem); }
.hero__selo {
  gap: .8rem;
  margin-bottom: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-family: var(--fonte-mono);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero__selo span {
  width: 2.75rem;
  height: 2px;
  border-radius: 0;
  background: var(--cor-marca-ambar);
  box-shadow: none;
}
.hero__titulo {
  max-width: none;
  font-size: clamp(3.85rem, 4.8vw, 5.55rem);
  font-weight: 790;
  line-height: .98;
  letter-spacing: -.058em;
  text-shadow: 0 10px 35px rgba(0, 0, 0, .24);
}
.hero__titulo-linha {
  width: max-content;
  max-width: 100%;
  display: block;
  overflow: visible;
  opacity: 0;
  transform: translateY(2.5rem);
  animation: hero-linha-entrada 820ms cubic-bezier(.2, .78, .2, 1) forwards;
}
.hero__titulo-linha:nth-child(2) { animation-delay: 90ms; }
.hero__titulo-linha:nth-child(3) { animation-delay: 180ms; }
.hero__titulo-destaque {
  margin-top: .08em;
  color: #ffad38;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.055em;
  text-shadow: 0 12px 35px rgba(207, 77, 24, .2);
}
@keyframes hero-linha-entrada {
  to { opacity: 1; transform: translateY(0); }
}
.hero__linha {
  max-width: 55ch;
  margin-top: 1.7rem;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.58;
}
.hero__linha,
.hero .acoes,
.hero__dados {
  opacity: 0;
  transform: translateY(.8rem);
  animation: hero-conteudo-entrada 700ms 520ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero .acoes { animation-delay: 610ms; }
.hero__dados { animation-delay: 700ms; }
@keyframes hero-conteudo-entrada {
  to { opacity: 1; transform: translateY(0); }
}
.hero .acoes { margin-top: 2rem; gap: .75rem; }
.hero .botao {
  min-height: 3.2rem;
  padding: .8rem 1.25rem;
  border-radius: .75rem;
  background: #ef5a2a;
  box-shadow: 0 12px 28px rgba(188, 56, 20, .25);
  font-size: .86rem;
}
.hero .botao::before { display: none; }
.hero .botao:hover {
  box-shadow: 0 15px 32px rgba(188, 56, 20, .32);
  transform: translateY(-2px);
}
.hero .botao--contorno-claro {
  padding-inline: .35rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero .botao--contorno-claro:hover {
  border-color: var(--cor-marca-ambar);
  background: transparent;
  box-shadow: none;
}
.hero .botao--contorno-claro::after {
  margin-left: .7rem;
  content: "↗";
  transition: transform var(--transicao);
}
.hero .botao--contorno-claro:hover::after { transform: translate(3px, -3px); }
.hero__dados {
  width: min(100%, 50rem);
  margin-top: clamp(2.5rem, 5vh, 3.75rem);
  padding-top: 1.35rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.hero__dados > div {
  min-width: 0;
  padding-right: 1.5rem;
}
.hero__dados > div + div {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.hero__dados dt {
  margin-bottom: .35rem;
  color: rgba(255, 255, 255, .48);
  font-size: var(--dado-rotulo);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero__dados dd {
  color: #fff;
  font-size: var(--dado-valor);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.hero__rolagem { display: none; }
.hero__lateral {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -5.5rem;
  color: rgba(255, 255, 255, .42);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: rotate(90deg) translateY(-50%);
  transform-origin: center;
}

@media (max-width: 72rem) {
  .cabecalho__interno {
    /* Subtraía 2rem e somava 2x o recuo interno. Quando o recuo passa de 1rem
       — de 1152px para baixo — a soma vence a subtração e a barra fica mais
       larga que a janela. Sem o reforço, a conta fecha em qualquer largura. */
    width: min(
      100% - 2rem,
      calc(var(--largura-max) + (var(--cabecalho-pad) * 2))
    );
    grid-template-columns: 10.5rem minmax(0, 1fr) 10.5rem;
    gap: 1rem;
    padding: 0 var(--cabecalho-pad);
  }
  .cabecalho__marca img { width: 9.75rem; }
  .cabecalho--compacto .cabecalho__marca img { width: 9rem; }
  .navegacao {
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .navegacao__lista { width: max-content; min-width: 100%; }
  .navegacao__link { min-height: var(--altura-cabecalho); padding-inline: .65rem; }
  .navegacao__rotulo { font-size: .84rem; }
  .cabecalho__cta { min-height: 3rem; padding: .7rem .6rem .7rem .9rem; font-size: .76rem; }
  .hero__titulo { font-size: clamp(3.55rem, 6.9vw, 4.8rem); }
}

@media (max-width: 48rem) {
  /* Uma linha só. A faixa de navegação rolando na horizontal ocupava 8rem e
     cortava "Nossas Cores" e "Contato" sem nenhum aviso de que havia mais.
     Aqui a altura vira variável: tudo que dependia dela — recuo do hero,
     âncora, barra de filtro — acompanha sozinho. */
  /* Na raiz, não no .cabecalho: quem depende da altura da barra — recuo da
     capa compacta, âncora de rolagem, margem negativa — está fora dele e
     precisa enxergar o mesmo valor. Declarada só aqui dentro, ficava valendo
     4,6rem para a barra e 7,6rem para todo o resto. */
  :root {
    --altura-cabecalho: 5.2rem;
    --cabecalho-topo: 0rem;
  }
  .cabecalho {
    padding-top: 0;
    background: rgba(14, 12, 11, .92);
    /* backdrop-filter cria bloco de contenção para descendente `fixed`: com
       ele o painel se posicionaria dentro da barra de 4,6rem em vez da janela
       inteira, e simplesmente não apareceria. Fora também porque a regra 30
       proíbe vidro fosco decorativo. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cabecalho--compacto {
    background: rgba(23, 19, 17, .96);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  }
  /* Com o painel aberto a barra é parte dele: opaca, sem a imagem de fundo
     aparecendo por trás do logotipo. */
  .cabecalho--menu-aberto,
  .cabecalho--menu-aberto.cabecalho--compacto {
    background: var(--cor-chumbo);
    box-shadow: none;
  }
  .cabecalho--compacto .cabecalho__interno {
    min-height: var(--altura-cabecalho);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cabecalho__interno {
    width: 100%;
    min-height: var(--altura-cabecalho);
    padding-inline: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    gap: .75rem;
    align-items: center;
  }
  .cabecalho__marca {
    display: flex;
    align-items: center;
    height: var(--altura-cabecalho);
  }
  .cabecalho__marca img,
  .cabecalho--compacto .cabecalho__marca img { width: 9rem; }

  /* Botão do menu: alvo de toque cheio, traço simples. */
  .cabecalho__menu {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--raio-sm);
    background: transparent;
    color: #fff;
    transition: background var(--transicao);
  }
  .cabecalho__menu:hover { background: rgba(255, 255, 255, .1); }
  .cabecalho__menu:focus-visible {
    outline: 2px solid var(--cor-marca-ambar);
    outline-offset: 2px;
  }
  /* Três traços que viram X. É a única animação daqui, e serve para dizer que
     o mesmo botão fecha o que abriu. */
  .cabecalho__menu-icone,
  .cabecalho__menu-icone::before,
  .cabecalho__menu-icone::after {
    display: block;
    width: 1.5rem;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--transicao), opacity var(--transicao);
  }
  .cabecalho__menu-icone { position: relative; }
  .cabecalho__menu-icone::before,
  .cabecalho__menu-icone::after {
    position: absolute;
    left: 0;
    content: "";
  }
  .cabecalho__menu-icone::before { top: -.4rem; }
  .cabecalho__menu-icone::after { top: .4rem; }
  .cabecalho--menu-aberto .cabecalho__menu-icone { background: transparent; }
  .cabecalho--menu-aberto .cabecalho__menu-icone::before { transform: translateY(.4rem) rotate(45deg); }
  .cabecalho--menu-aberto .cabecalho__menu-icone::after { transform: translateY(-.4rem) rotate(-45deg); }

  /* Painel: cobre a tela abaixo da barra, superfície chapada, sem vidro. */
  .cabecalho__painel {
    position: fixed;
    top: var(--altura-cabecalho);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--cor-chumbo);
    /* Fechado não recebe clique nem foco; sem JavaScript nada disso se aplica
       e o painel segue no fluxo normal. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .cabecalho--menu-aberto .cabecalho__painel {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .navegacao { width: auto; overflow: visible; }
  .navegacao__lista {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    min-height: 0;
    gap: 0;
  }
  .navegacao__item { width: 100%; }
  .navegacao__link {
    justify-content: flex-start;
    width: 100%;
    min-height: 3.85rem;
    padding: 1rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  /* O sublinhado da página corrente é mais específico que o genérico e
     reaparecia como um traço solto ao lado do rótulo. */
  .navegacao__link::after,
  .navegacao__link[aria-current="page"]::after { display: none; }
  .navegacao__rotulo {
    font-size: 1.15rem;
    letter-spacing: -.01em;
  }
  /* Página corrente marcada por barra e cor, não só por peso. */
  .navegacao__link[aria-current="page"] {
    color: var(--cor-marca-ambar);
    box-shadow: inset .2rem 0 0 var(--cor-marca);
    padding-left: .85rem;
  }

  /* Bloco de telefones e WhatsApp: preenche o vazio acima do CTA. */
  .cabecalho__contatos {
    display: block;
    margin-top: auto;
    padding: 1.25rem .25rem .5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .cabecalho__contatos-titulo {
    margin: 0 0 .75rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
  }
  .cabecalho__contatos-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cabecalho__contatos-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .5rem;
    border-radius: .5rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: background var(--transicao), color var(--transicao);
  }
  .cabecalho__contatos-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
  }
  .cabecalho__contatos-link--zap {
    color: #25d366;
  }
  .cabecalho__contatos-link--zap:hover {
    background: rgba(37, 211, 102, .12);
    color: #2ee872;
  }
  .cabecalho__contatos-ico {
    flex-shrink: 0;
  }

  /* A ação principal fecha o painel, em largura cheia. */
  .cabecalho__cta {
    justify-content: center;
    width: 100%;
    min-height: var(--alvo-toque);
    margin-top: .75rem;
    padding: .95rem 1.15rem;
    font-size: .95rem;
  }
  .cabecalho__cta > span:last-child { width: 1.75rem; height: 1.75rem; }

  /* Com o painel aberto a página de trás não rola. */
  body.com-menu-aberto { overflow: hidden; }

  /* Alturas que dependiam das duas linhas do cabeçalho antigo. */
  /* Mesma conta da regra base, agora que a variável vale aqui também. */
  [id],
  .cartela-secao { scroll-margin-top: calc(var(--altura-cabecalho) + 1.5rem); }
}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  .cabecalho__painel,
  .cabecalho__menu-icone,
  .cabecalho__menu-icone::before,
  .cabecalho__menu-icone::after { transition: none; }
}

@media (max-width: 48rem) {
  .hero__interno {
    align-items: flex-end;
    /* Calculado sobre a barra de 4,6rem: o valor antigo era para o cabeçalho
       de duas linhas e deixava 164px de vazio abaixo dele. */
    padding-top: calc(var(--altura-cabecalho) + 2rem);
    padding-bottom: 3rem;
  }
  .hero__titulo {
    max-width: 100%;
    font-size: clamp(2.85rem, 10.8vw, 3.9rem);
    line-height: 1;
  }
  .hero__titulo-linha { width: auto; }
  .hero__titulo-destaque { margin-top: .15em; }
  .hero__linha {
    max-width: 40rem;
    margin-top: 1.4rem;
    font-size: 1rem;
  }
  .hero__dados {
    /* No celular o "Ver tabela técnica" ocupa a largura toda e a borda dele já
       serve de divisória. A borda própria da régua, 40px abaixo, virava um
       segundo filete solto — duas linhas paralelas sem nada entre elas. */
    margin-top: 1.75rem;
    padding-top: 0;
    border-top: 0;
  }
  .hero__dados > div { padding-right: .65rem; }
  .hero__dados > div + div { padding-left: .65rem; }
  .hero__dados {
    --dado-rotulo: .64rem;
    --dado-valor: clamp(1.05rem, 4.2vw, 1.4rem);
  }
  .hero__lateral { display: none; }
  /* O "1939" gigante em contorno passava por trás da régua de dados, que já
     traz 1939 como valor. No desktop ele ocupa espaço vazio; aqui só embaralha
     a leitura de dois números sobrepostos. Ornamento sem função, fora. */
  .hero__ano { display: none; }
  .pagina-cabecalho { padding-top: calc(var(--altura-cabecalho) + 2.5rem); }
}

@media (max-width: 34rem) {
  .cabecalho__interno {
    padding-inline: .75rem;
    gap: 0 .55rem;
  }
  /* O que sobrou aqui foi calibrado para o cabeçalho antigo, de duas linhas,
     onde faltava espaço horizontal: rótulo de 0,76rem, logotipo de 7rem e um
     botão de contato miúdo. Com o menu recolhido a navegação vive num painel
     de tela cheia e essas medidas só deixavam tudo pequeno demais. Fica
     apenas o ajuste de logotipo para telas bem estreitas. */
  .cabecalho__marca img,
  .cabecalho--compacto .cabecalho__marca img { width: 8.25rem; }
  .hero__titulo { font-size: clamp(2.75rem, 12vw, 3.45rem); }
  .hero__selo { font-size: .65rem; letter-spacing: .1em; }
  .hero__selo span { width: 1.8rem; }
  .hero .acoes { align-items: stretch; }
  .hero .botao { width: 100%; }
  .hero__dados {
    --dado-valor: 1.25rem;
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .hero__dados > div,
  .hero__dados > div + div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
    border-left: 0;
  }
  .hero__dados dt { margin-bottom: 0; }
}

/* Diretório das famílias técnicas */
@media (hover: hover) and (pointer: fine) {
}

@media (max-width: 72rem) {
}

@media (max-width: 34rem) {
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .cabecalho { background: rgba(14, 12, 11, .96); }
  .cabecalho__interno { background: transparent; }
  .hero__selo { background: transparent; }
  .botao--contorno-claro { background: rgba(24, 19, 17, .78); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero {
    background:
      linear-gradient(90deg, rgba(18, 14, 12, .9), rgba(98, 39, 16, .45)),
      url("/assets/images/hero-corantes-em-po-para-industria.webp") center / cover no-repeat;
  }
  .hero__video { display: none; }
}

/* ==========================================================================
   FAMÍLIAS TÉCNICAS — a cartela como ficha de laboratório.
   Superfície quente, cartão claro, amostra real do catálogo no topo.
   A grade do cabeçalho é a mesma grade dos cartões: nada fora de eixo.
   ========================================================================== */

.familias {
  --familia-cols: 4;
  --familia-gap: clamp(1rem, 2vw, 1.6rem);
  --familia-raio-topo: clamp(1.5rem, 3vw, 2.75rem);

  position: relative;
  z-index: 3;
  /* A folha de conteúdo sobe sobre o vídeo do hero e quebra o corte reto. */
  margin-top: calc(var(--familia-raio-topo) * -1);
  padding-block: clamp(4rem, 7.5vw, 7rem);
  border-radius: var(--familia-raio-topo) var(--familia-raio-topo) 0 0;
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 173, 47, .18), transparent 34rem),
    radial-gradient(circle at 94% 2%, rgba(233, 91, 42, .07), transparent 30rem),
    linear-gradient(180deg, #fffaf4 0%, #fdf7f0 100%);
}

/* ---------- Cabeçalho ---------- */

.familias__cabecalho {
  display: grid;
  grid-template-columns: repeat(var(--familia-cols), minmax(0, 1fr));
  align-items: end;
  column-gap: var(--familia-gap);
  row-gap: 1.4rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.familias__etiqueta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 .3rem;
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}

.familias__etiqueta::before {
  width: 2.6rem;
  height: .3rem;
  flex-shrink: 0;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-marca-ambar));
  content: "";
}

.familias__titulo {
  grid-column: 1 / span 2;
  margin: 0;
  color: var(--cor-chumbo);
  font-size: clamp(2.25rem, 4.4vw, 3.85rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.familias__titulo em {
  display: block;
  margin-top: .1em;
  color: var(--cor-marca-escura);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.018em;
}

.familias__introducao {
  grid-column: 3 / -1;
  max-width: 52ch;
  margin: 0;
  padding-bottom: .4rem;
  color: var(--cor-texto-secundario);
  /* Mesma escala de .secao__descricao: o texto de apoio não encolhe aqui. */
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.6;
}

/* ---------- Grade ---------- */

.familias__grade {
  display: grid;
  grid-template-columns: repeat(var(--familia-cols), minmax(0, 1fr));
  gap: var(--familia-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.familia {
  display: flex;
  min-width: 0;
}

.familia__link {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  width: 100%;
  min-height: 15.5rem;
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid rgba(212, 197, 188, .5);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-sm);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--transicao),
    box-shadow var(--transicao),
    border-color var(--transicao);
}

a.familia__link:hover {
  border-color: rgba(233, 91, 42, .3);
  box-shadow: var(--sombra);
  transform: translateY(-6px);
}

.familia__link:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 4px;
}

/* ---------- Amostra: as pastilhas são o produto ---------- */

.familia__faixa {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  height: clamp(3.4rem, 4.5vw, 4.35rem);
  margin-bottom: 1.25rem;
}

.familia__faixa > span {
  display: block;
  border-radius: 6px;
  transition: transform var(--transicao);
}

/* Onda de elevação: cada pastilha sobe um instante depois da anterior. */
a.familia__link:hover .familia__faixa > span { transform: translateY(-4px); }
.familia__faixa > span:nth-child(2) { transition-delay: 30ms; }
.familia__faixa > span:nth-child(3) { transition-delay: 60ms; }
.familia__faixa > span:nth-child(4) { transition-delay: 90ms; }
.familia__faixa > span:nth-child(5) { transition-delay: 120ms; }
.familia__faixa > span:nth-child(6) { transition-delay: 150ms; }
.familia__faixa > span:nth-child(7) { transition-delay: 180ms; }

/* Texturas Pcilazol: repetição em tamanho original, jamais ampliadas (Decisão 12). */
.familia__faixa--textura > span {
  background-repeat: repeat;
  background-position: center;
  background-size: auto;
}

/*
 * Família sem cartela de cor — bases pigmentárias, fixadores, ftalocianinas.
 * A área lista o que a família reúne, em vez de anunciar uma ausência.
 */
.familia__produtos {
  display: flex;
  height: clamp(3.4rem, 4.5vw, 4.35rem);
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  padding: .5rem .85rem;
  border-radius: 6px;
  background: var(--cor-fundo-alt);
}

.familia__produtos > span {
  overflow: hidden;
  color: var(--cor-grafite);
  font-size: .79rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Cartela existe, mas os HEX aguardam validação (Decisão 13).
 * Traço interrompido para não ser lido como cor de produto.
 */
.familia__estado {
  display: grid;
  height: clamp(3.4rem, 4.5vw, 4.35rem);
  margin-bottom: 1.25rem;
  place-items: center;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: 6px;
  background: var(--cor-fundo-alt);
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Identificação ---------- */

.familia__topo {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .5rem;
}

.familia__indice {
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-mono);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

.familia__sigla {
  padding-left: .55rem;
  border-left: 1px solid var(--cor-borda-forte);
  color: var(--cor-marca-escura);
  font-family: var(--fonte-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.familia__nome {
  display: block;
  align-self: start;
  color: var(--cor-chumbo);
  font-size: clamp(1.15rem, 1.35vw, 1.4rem);
  font-weight: 800;
  line-height: 1.17;
  letter-spacing: -.022em;
  text-wrap: balance;
  transition: color var(--transicao);
}

a.familia__link:hover .familia__nome { color: var(--cor-marca-escura); }

.familia__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.35rem;
  padding-top: .85rem;
  border-top: 1px solid var(--cor-borda);
}

.familia__contagem {
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-mono);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.familia__seta {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: var(--raio-pill);
  background: var(--cor-fundo-alt);
  color: var(--cor-marca-escura);
  font-size: .92rem;
  line-height: 1;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}

a.familia__link:hover .familia__seta {
  background: var(--cor-marca-escura);
  color: #fff;
  transform: translateX(3px);
}

/* ---------- Cartão de fecho: o catálogo inteiro ---------- */

.familia--fecho .familia__link {
  border-color: transparent;
  /* Todos os pontos da rampa mantêm branco acima de 4,8:1. */
  background: linear-gradient(145deg, #a8350f 0%, #b93d16 52%, #c8461a 100%);
  box-shadow: var(--sombra);
  color: #fff;
}

.familia--fecho a.familia__link:hover { box-shadow: var(--sombra-lg); }

.familia--fecho .familia__indice,
.familia--fecho .familia__sigla,
.familia--fecho .familia__nome,
.familia--fecho a.familia__link:hover .familia__nome,
.familia--fecho .familia__contagem { color: #fff; }

.familia--fecho .familia__sigla { border-left-color: rgba(255, 255, 255, .38); }
.familia--fecho .familia__rodape { border-top-color: rgba(255, 255, 255, .28); }

.familia--fecho .familia__seta {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.familia--fecho a.familia__link:hover .familia__seta {
  background: #fff;
  color: var(--cor-marca-escura);
}

.familia--fecho .familia__link:focus-visible { outline-color: #fff; }

/* ---------- Responsivo ---------- */

@media (max-width: 78rem) {
  .familias { --familia-cols: 3; }
}

@media (max-width: 56rem) {
  .familias { --familia-cols: 2; }
  /* Cartão largo e conteúdo curto: a altura mínima só abriria vazio. */
  .familia__link { min-height: 0; }
  .familias__cabecalho { align-items: start; }
  .familias__titulo,
  .familias__introducao { grid-column: 1 / -1; }
  .familias__introducao { padding-bottom: 0; }
}

@media (max-width: 34rem) {
  .familias { --familia-cols: 1; }
  .familia__link { min-height: 0; }
  .familia__faixa,
  .familia__estado,
  .familia__produtos { height: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .familia__link,
  .familia__nome,
  .familia__seta,
  .familia__faixa > span { transition: none; }
  .familia__faixa > span { transition-delay: 0s; }
  a.familia__link:hover,
  a.familia__link:hover .familia__faixa > span,
  a.familia__link:hover .familia__seta { transform: none; }
}

/* ==========================================================================
   Redesign Catálogo de Produtos: Grid e Sidebar Sticky
   ========================================================================== */

/* Busca em Destaque */
.catalogo-principal {
  min-width: 0;
}
.catalogo-busca-destaque {
  margin-bottom: 2rem;
}
.campo-busca--grande {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--raio-pill);
  padding: 0.5rem 1.5rem;
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--cor-borda);
  transition: box-shadow var(--transicao);
}
.campo-busca--grande:focus-within {
  box-shadow: var(--sombra);
  border-color: var(--cor-marca);
}
.campo-busca--grande .campo-busca__lupa {
  color: var(--cor-texto-fraco);
  margin-right: 0.75rem;
  flex-shrink: 0;
}
.campo-busca--grande .campo-busca__campo {
  flex-grow: 1;
  padding: 0.75rem 0;
  font-size: var(--texto-md);
  color: var(--cor-chumbo);
  outline: none;
  background: transparent;
  min-width: 0;
}

/* Blocos de Categoria */
.categoria-bloco {
  margin-bottom: 4rem;
  background: #fff;
  border-radius: var(--raio-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--sombra-sm);
  border: 1px solid rgba(212, 197, 188, .4);
}
.categoria-bloco__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--cor-fundo-alt);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.categoria-bloco__identidade {
  min-width: 0;
  max-width: 100%;
  flex: 1;
}
.categoria-bloco__marca {
  display: flex;
  gap: 4px;
  margin-bottom: 0.5rem;
  flex-wrap: wrap; /* Permite a quebra natural para não estourar o layout */
  height: 0.35rem; /* Trava a altura na exata medida de uma linha */
  overflow: hidden; /* Esconde qualquer traço que caia para a segunda linha */
  min-width: 0;
  max-width: 100%;
}
.categoria-bloco__marca span {
  width: 1.5rem;
  height: 0.35rem;
  border-radius: var(--raio-pill);
  background-color: var(--faixa);
  flex-shrink: 0; /* Mantém a proporção dos traços enquanto os excedentes são ocultados */
}
.categoria-bloco__titulo {
  font-size: var(--texto-xl);
  color: var(--cor-chumbo);
  margin: 0;
}
.categoria-bloco__sigla {
  color: var(--cor-marca);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
}
.categoria-bloco__contagem {
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
  background: var(--cor-fundo-alt);
  padding: 0.25rem 0.75rem;
  border-radius: var(--raio-pill);
  white-space: nowrap;
}
.categoria-bloco__pergunta {
  font-size: var(--texto-lg);
  color: var(--cor-chumbo);
  margin-bottom: 0.5rem;
}
.categoria-bloco__descricao {
  color: var(--cor-texto-secundario);
  margin-bottom: 1.5rem;
}

/* Grid de Produtos */
.produtos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.produto-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.25rem;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.produto-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: rgba(233, 91, 42, .2);
}
.produto-card__linha-cor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--cor-card);
}
.produto-card__conteudo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.produto-card__nome {
  font-size: var(--texto-base);
  color: var(--cor-chumbo);
  margin: 0;
  font-weight: 700;
}
.produto-card__codigo {
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo-alt);
  padding: 0.5rem;
  border-radius: var(--raio-sm);
}
.produto-card__rotulo {
  font-size: 0.7rem;
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.produto-card__codigo strong {
  font-size: var(--texto-md);
  color: var(--cor-chumbo);
  font-family: var(--fonte-mono);
}
.produto-card__vazio {
  color: var(--cor-texto-fraco);
}

/* Fichas de Apoio */
.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.ficha {
  background: var(--cor-fundo-alt);
  padding: 1.5rem;
  border-radius: var(--raio);
  border-left: 3px solid var(--cor-borda-forte);
  min-width: 0;
}
.ficha--destaque {
  border-left-color: var(--cor-marca-ambar);
  background: var(--cor-alerta-fundo);
}
.ficha__titulo {
  font-size: var(--texto-md);
  margin-bottom: 0.75rem;
  color: var(--cor-chumbo);
}
.ficha__lista {
  padding-left: 1rem;
  color: var(--cor-texto-secundario);
}
.ficha__lista li { margin-bottom: 0.25rem; font-size: var(--texto-sm); }
.ficha__texto {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

/* Responsividade */
@media (max-width: 68rem) {
  .filtros__scroll-wrap {
    position: relative;
    min-width: 0; /* Correção do bug: impede que a lista estique a página inteira */
    width: 100%;
  }

  /* Nova dica visual de arrasto ao lado do título Famílias */
  .filtros__rotulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem; /* Aumentado para melhor legibilidade no mobile */
  }
  .filtros__rotulo::after {
    content: "‹ deslize ›";
    font-size: 0.8rem; /* Aumentado */
    color: var(--cor-marca);
    text-transform: lowercase;
    letter-spacing: normal;
    font-weight: 700;
    opacity: 0.8;
    animation: piscarSeta 2.5s infinite ease-in-out;
  }
  
  @keyframes piscarSeta {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }

  .filtros__lista {
    display: grid;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .filtros__opcao {
    border-bottom: none;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pill);
    padding: .5rem .9rem;
  }
  .filtros__opcao:hover,
  .filtros__opcao--ativa,
  .filtros__opcao--ativa:hover {
    padding-left: .9rem; /* Anula o hover premium no mobile */
  }
}

@media (max-width: 64rem) {
  .produtos-grid {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
}

/* ==========================================================================
   Página: Nossas Cores
   ========================================================================== */

/* A cartela adota o mesmo esqueleto do catálogo de Produtos: rail de filtros
   à esquerda, conteúdo à direita. Duas páginas de catálogo, um só padrão. */
.folha.cartela-fundo { padding-bottom: 0; }
/* Duas colunas de matiz cabem em 17rem, mas "Vermelho" e "Castanho" saíam
   reticenciados. Dois rem a mais no rail resolvem sem encolher a letra. */
.catalogo-layout--cartela { grid-template-columns: 19rem minmax(0, 1fr); }
.folha > .catalogo-layout { padding-top: 0; }

/* Mesma régua do catálogo de Produtos: sem altura máxima e sem rolagem
   própria. Barra interna cortava o último matiz ao meio — o mesmo motivo que
   já está registrado na lista de famílias. */
.filtros__facetas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* O rail acompanha a rolagem da página, como o do catálogo de Produtos: lá o
   `position: sticky` do .filtros__fixo nunca chega a agir, porque
   `align-items: start` deixa o <aside> com a altura exata do próprio rail e
   não sobra curso para grudar. Aqui o comportamento é declarado, não herdado
   por acidente. */
.filtros--cartela .filtros__fixo { position: static; }
/* Linhas mais curtas que as de Produtos: aqui são dez, não onze, e os rótulos
   cabem em uma palavra. */


.filtros__facetas > * { flex: none; }
/* Em repouso não há o que anunciar: contagem e "Limpar" só existem enquanto
   houver recorte, e `display: contents` faz a linha sumir sem deixar vão. */
.filtros__estado { display: contents; }
.filtros--cartela .filtros__resultado {
  font-variant-numeric: tabular-nums;
}
.filtros__limpar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .55rem .8rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--cor-marca-escura);
  font-size: var(--texto-xs);
  font-weight: 700;
  white-space: nowrap;
  transition: border-color var(--transicao), background var(--transicao);
}
.filtros__limpar:hover {
  border-color: var(--cor-marca);
  background: var(--cor-fundo-quente);
}
.filtros__limpar:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

/* Matiz usa a mesma pele da lista de linhas: um só cartão branco, divisórias
   de fio, marcador laranja no ativo. A única diferença é a segunda coluna,
   que existe para não empilhar dez matizes em dez linhas inteiras. */
.matizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .02);
  overflow: hidden;
}
.matiz {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  padding: .7rem .7rem .7rem .95rem;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  background: transparent;
  color: var(--cor-texto);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  transition: background var(--transicao), color var(--transicao), padding-left var(--transicao);
}
.matiz--todos { grid-column: 1 / -1; }
/* Filhos pares caem na primeira coluna — o "Todos" ocupa a faixa inteira. */
.matiz:nth-child(even) { border-right: 1px solid rgba(0, 0, 0, .04); }
.matiz:nth-last-child(-n + 2) { border-bottom: 0; }
.matiz::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: .25rem;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--cor-marca);
  content: "";
  transform: translateY(-50%);
  transition: height var(--transicao);
}
.matiz:hover {
  background: rgba(245, 245, 245, .6);
  color: var(--cor-marca-escura);
  padding-left: 1.15rem;
}
.matiz:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: -2px;
}
.matiz--ativo,
.matiz--ativo:hover {
  background: rgba(233, 91, 42, .04);
  color: var(--cor-chumbo);
  font-weight: 700;
  padding-left: .95rem;
}
.matiz--ativo::before { height: 100%; }
.matiz__ponto {
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 17, .2);
}
.matiz__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matiz__n {
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-mono);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color var(--transicao);
}
.matiz:hover .matiz__n { color: var(--cor-marca); }
.matiz--ativo .matiz__n { color: var(--cor-marca-escura); }

/* ==========================================================================
   Seleção de cores — cartela, barra e pedido de orçamento
   ========================================================================== */

/* Cartão selecionado: contorno e marca de confirmação, nunca só cor — o
   estado precisa se ler sem depender de matiz, e a amostra ao lado não pode
   ser confundida com ele. */
.cor__botao.selecionado {
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 1px var(--cor-marca);
}
.cor__botao.selecionado .cor__botao.selecionado 
/* Copiar vira ação secundária: irmão do botão do cartão, não filho — botão
   dentro de botão é marcação inválida. */
.cor { position: relative; }
.cor__copiar {
  position: absolute;
  top: .45rem;
  right: .45rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .88);
  color: var(--cor-texto-secundario);
  opacity: 0;
  transition: opacity var(--transicao), color var(--transicao), background var(--transicao);
}
.cor:hover .cor__copiar,
.cor__copiar:focus-visible { opacity: 1; }
.cor__copiar:hover {
  background: #fff;
  color: var(--cor-marca-escura);
}
.cor__copiar:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}
@media (hover: none) {
  .cor__copiar { opacity: .55; }
}
.cor__copiar-feito {
  position: absolute;
  top: 50%;
  right: calc(100% + .35rem);
  transform: translateY(-50%);
  padding: .2rem .5rem;
  border-radius: var(--raio-pill);
  background: var(--cor-chumbo);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear;
}
.cor__copiar.copiado { opacity: 1; }
.cor__copiar.copiado .cor__copiar-feito { opacity: 1; }

/* Barra de seleção — fixa no rodapé da janela enquanto houver escolha. */
.selecao-barra {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  padding-block: .85rem;
  border-top: 1px solid var(--cor-borda-forte);
  background: var(--cor-fundo);
  box-shadow: 0 -8px 28px rgba(50, 31, 21, .1);
  /* Trava final: nada dentro da barra pode transbordar da janela, seja qual
     for a largura ou o tamanho do texto. */
  max-width: 100%;
  overflow: hidden;
}
/* Recuo próprio em vez de .container: dentro de um elemento fixo, largura por
   cálculo é uma variável a mais para dar errado. */
.selecao-barra__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.selecao-barra__conta {
  min-width: 0;
  color: var(--cor-chumbo);
  font-size: var(--texto-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.selecao-barra__acoes {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .75rem;
}
/* O rótulo do botão encolhe antes de empurrar o botão para fora da tela. */
.selecao-barra__ver {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selecao-barra__limpar {
  padding: .5rem .8rem;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color var(--transicao);
}
.selecao-barra__limpar:hover { color: var(--cor-marca-escura); }
.selecao-barra__limpar:focus-visible,
.selecao-barra__ver:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}
/* O rodapé precisa terminar acima da barra, senão ela cobre os telefones.
   A altura vem do script, medida: no celular a barra tem duas linhas. */
body.com-selecao .rodape__base {
  padding-bottom: calc(var(--barra-selecao, 4.5rem) + 1rem);
}

/* Lista do pedido */
.orcamento__texto {
  max-width: 62ch;
  margin-top: var(--esp-4);
  color: var(--cor-texto-secundario);
}
.orcamento__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: var(--esp-5);
}
.selecao-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: .6rem;
  margin-top: var(--esp-5);
}
.selecao-lista__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .6rem .7rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: #fff;
}
.selecao-lista__amostra {
  width: 3.25rem;
  height: 2.5rem;
  border-radius: calc(var(--raio-sm) * .5);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 17, .12);
}
.selecao-lista__amostra--textura {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.selecao-lista__amostra--pendente {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .45) 25%, transparent 25%) -12px 0 / 24px 24px,
    linear-gradient(225deg, rgba(255, 255, 255, .45) 25%, transparent 25%) -12px 0 / 24px 24px,
    var(--cor-amostra-pendente);
}
.selecao-lista__texto { min-width: 0; }
.selecao-lista__nome {
  display: block;
  color: var(--cor-chumbo);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.3;
}
.selecao-lista__paleta {
  display: block;
  margin-top: .15rem;
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
}
.selecao-lista__remover {
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border-radius: var(--raio-sm);
  color: var(--cor-texto-fraco);
  transition: background var(--transicao), color var(--transicao);
}
.selecao-lista__remover:hover {
  background: var(--cor-fundo-alt);
  color: var(--cor-erro);
}
.selecao-lista__remover:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}
.selecao-lista__rodape { margin-top: var(--esp-4); font-size: var(--texto-sm); }
.orcamento__formulario { margin-top: var(--esp-7); }

/* Página de orçamento: sem hero de imagem, mas a faixa escura continua
   necessária — o menu do cabeçalho é branco e some sobre fundo claro. */
.capa--compacta {
  min-height: 0;
  padding-block: calc(var(--altura-cabecalho) + var(--cabecalho-topo) + 1rem) 0;
}
/* O respiro do hero está no interno; aqui ele volta ao tamanho de faixa. */
.capa--compacta .capa__interno {
  padding-top: 0;
  padding-bottom: 2.25rem;
}
/* A faixa aqui é orientação, não capa: título em corpo menor que o das
   páginas com hero, para não empurrar a lista para fora da primeira tela. */
.capa--compacta .capa__titulo {
  margin-bottom: 0;
  font-size: clamp(2.4rem, 5vw, 4rem);
}
.orcamento { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Barra "Selecionar" — mesmo controle nas duas páginas de catálogo.
   Em Produtos é um <button>; em Nossas Cores é um <span> dentro do botão que
   já ocupa o cartão inteiro, porque botão dentro de botão é inválido. Daí os
   estados virem tanto do próprio elemento quanto do cartão em volta. */
.selecionar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  min-height: var(--alvo-toque);
  margin-top: auto;
  padding: .5rem .8rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: #fff;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-xs);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
button.selecionar:hover,
.cor__botao:hover .selecionar {
  border-color: var(--cor-marca);
  color: var(--cor-marca-escura);
  background: var(--cor-fundo-quente);
}
.selecionar:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}
.cor__botao:focus-visible .selecionar { border-color: var(--cor-marca); }
.selecionar.selecionado,
.selecionar.selecionado:hover,
.cor__botao.selecionado .selecionar,
.cor__botao.selecionado:hover .selecionar {
  border-color: var(--cor-marca);
  background: var(--cor-marca);
  color: #fff;
}
.selecionar__icone--ok { display: none; }
.selecionar.selecionado .selecionar__icone--mais,
.cor__botao.selecionado .selecionar__icone--mais { display: none; }
.selecionar.selecionado .selecionar__icone--ok,
.cor__botao.selecionado .selecionar__icone--ok { display: block; }
/* O cartão inteiro se marca junto: o botão sozinho some no meio da grade.
   A classe vem do script, não de :has(), para valer em navegador antigo. */
.produto-card.selecionado,
.ficha--destaque.selecionado {
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 1px var(--cor-marca);
}
/* Na cartela o realce já vive no próprio botão, que ocupa o cartão inteiro. */
.cor.selecionado { box-shadow: none; }

/* Cartões da mesma linha têm nomes de uma ou duas linhas. Sem esticar o
   cartão e empurrar o botão para baixo, cada "Selecionar" para numa altura
   diferente e a grade fica desalinhada. */
.produtos-grid,
.fichas { align-items: stretch; }
.produto-card,
.ficha--destaque {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.produto-card__conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Empurra o botão para a base; o espaço sobrando fica acima dele. O piso de
   1rem evita que ele encoste no texto num cartão curto. */
.produto-card__conteudo .selecionar,
.ficha--destaque .selecionar { margin-top: auto; }
/* O respiro mínimo vem do elemento acima, não de uma margem no botão: margem
   e `auto` na mesma propriedade se anulam. */
.produto-card__codigo,
.ficha--destaque .ficha__texto { margin-bottom: 1rem; }

/* Grupos da lista do pedido: cores e produtos não se misturam. */
.selecao-grupo { margin-top: var(--esp-6); }
.selecao-grupo__titulo {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  color: var(--cor-chumbo);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.selecao-grupo__n {
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-mono);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.selecao-grupo .selecao-lista { margin-top: var(--esp-4); }
/* Produto não tem amostra: o texto ocupa a coluna que seria dela. */
.selecao-lista__item--produto { grid-template-columns: minmax(0, 1fr) auto; }

/* Botão flutuante de WhatsApp — presente em todas as páginas. */
.zap {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
/* Verde oficial do WhatsApp: aqui a cor é reconhecimento, não decoração —
   o visitante identifica o canal antes de ler o rótulo. */
.zap__gatilho {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: var(--alvo-toque);
  padding: .7rem 1.15rem;
  border-radius: var(--raio-pill);
  background: #25d366;
  color: #fff;
  font-size: var(--texto-sm);
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(18, 140, 70, .32);
  transition: background var(--transicao);
}
.zap__gatilho:hover { background: #1eb955; }
.zap__gatilho:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
}
.zap__icone { color: #fff; }
.zap__opcoes {
  display: grid;
  gap: .35rem;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2.5rem));
  padding: .4rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: 0 16px 40px rgba(50, 31, 21, .18);
}
.zap__linha {
  display: grid;
  gap: .1rem;
  padding: .6rem .85rem;
  border-radius: var(--raio-sm);
  color: var(--cor-texto);
  text-decoration: none;
  transition: background var(--transicao);
}
.zap__linha:hover { background: var(--cor-fundo-alt); color: var(--cor-chumbo); }
.zap__linha:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: -2px;
}
.zap__linha-rotulo {
  color: var(--cor-texto-fraco);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.zap__linha-numero {
  color: var(--cor-chumbo);
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Com a barra de seleção aberta, o botão sobe para não ficar por baixo dela. */
body.com-selecao .zap {
  bottom: calc(var(--barra-selecao, 4.25rem) + clamp(.5rem, 1.5vw, 1rem));
}

@media (max-width: 48rem) {
  /* Em tela estreita a barra domina: o gatilho fica só com o ícone. */
  .zap__gatilho { padding: .7rem .8rem; }
  .zap__gatilho-texto { display: none; }

  /* Uma linha só, sem quebrar: o texto encolhe, os botões mantêm o alvo de
     toque. Quebrando, a barra dobrava de altura e comia a tela. */
  .selecao-barra { padding-block: .6rem; }
  .selecao-barra__interno {
    flex-wrap: nowrap;
    gap: .5rem;
  }
  .selecao-barra__conta { flex: 1 1 auto; }
  .selecao-barra__conta {
    min-width: 0;
    font-size: var(--texto-xs);
    line-height: 1.25;
  }
  .selecao-barra__acoes { flex: none; gap: .35rem; }
  .selecao-barra__limpar {
    padding: .5rem .3rem;
    font-size: var(--texto-xs);
  }
  .selecao-barra__ver { padding: .6rem 1rem; font-size: var(--texto-xs); }
  /* O botão do WhatsApp sai de cima da barra e vira só ícone ao lado dela. */
  body.com-selecao .zap { right: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cor__copiar,
  .zap__gatilho,
  .zap__linha,
  .selecao-lista__remover { transition: none; }
}

/* Fecho da cartela: texto corrido, largura de leitura controlada. */
.cartela-fecho {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--cor-borda);
}
.cartela-fecho__titulo {
  color: var(--cor-chumbo);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -.015em;
}
.cartela-fecho__texto {
  max-width: 68ch;
  margin-top: var(--esp-4);
  color: var(--cor-texto-secundario);
  line-height: 1.65;
}

/* Cabeçalho de paleta: nome em peso de leitura e descritor em corpo de texto.
   O bloco único em corpo de manchete somava quatro linhas de peso 800. */
.cartela-secao {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  scroll-margin-top: calc(var(--altura-cabecalho) + var(--cabecalho-topo) + 1.5rem);
}
.cartela-secao + .cartela-secao .cartela-secao__cabecalho {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--cor-borda);
}
.cartela-secao__titulo {
  color: var(--cor-chumbo);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  text-wrap: balance;
}
.cartela-secao__descritor {
  max-width: 62ch;
  margin-top: .35rem;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
  font-weight: 400;
  line-height: 1.55;
}
.cartela-secao__descritor::first-letter { text-transform: uppercase; }

@media (max-width: 68rem) {
  /* Rail vira faixa horizontal, igual ao catálogo de Produtos: a lista de
     linhas já vira pílula pela regra compartilhada e a faixa entra no fluxo,
     sem sticky próprio. */
  .filtros__facetas { gap: .75rem; }
  /* Duas dicas piscando na mesma faixa viram ruído; a seta basta parada. */
  .filtros--cartela .filtros__rotulo::after {
    animation: none;
    opacity: .7;
  }
  .filtros__estado { justify-content: flex-start; }
  .matizes {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: .2rem;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  }
  .matizes::-webkit-scrollbar { display: none; }
  .catalogo-layout--cartela { grid-template-columns: 1fr; }
  /* Em faixa o cartão se desfaz em pílulas, como a lista de linhas: a régua
     vertical não faz sentido deitada, e o ativo vira contorno. */
  .matizes {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .matiz {
    flex: none;
    padding: .45rem .85rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pill);
    background: #fff;
  }
  .matiz:nth-child(even) { border-right: 1px solid var(--cor-borda); }
  .matiz:nth-last-child(-n + 2) { border-bottom: 1px solid var(--cor-borda); }
  .matiz::before { display: none; }
  .matiz:hover { padding-left: .85rem; }
  .matiz--ativo,
  .matiz--ativo:hover {
    padding-left: .85rem;
    background: #fff;
    border-color: var(--cor-marca);
    box-shadow: 0 0 0 1px var(--cor-marca);
  }
  .matiz--todos { grid-column: auto; }
  .cartela-secao { scroll-margin-top: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .matiz,
  .filtros__limpar,
  .cor__botao,
  }