/* ==========================================================================
   Mack Medical · Direcao A · "Compendio"
   Editorial tecnico: muito branco, grade rigorosa, filete fino,
   azul em pequenas doses, numero tratado como informacao de precisao.
   ========================================================================== */

/* 1. Fundacao ------------------------------------------------------------ */

:root {
  --papel: #ffffff;
  --papel-2: #f7f8fa;
  --papel-3: #eef1f4;

  --tinta: #10233d;
  --tinta-2: #55606e;
  --tinta-3: #6b7683;

  --azul: #005bab;
  --azul-fundo: #004b8f;
  --azul-escuro: #002e6b;
  --ciano: #00aeef;
  --acento: #0cc0df;

  --linha: #e3e7ec;
  --linha-forte: #c8d0d9;
  --selecao: rgba(0, 174, 239, 0.18);

  --fonte: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --larg: 1280px;
  --gutter: 32px;

  --t-rapida: 140ms;
  --t-media: 200ms;
  --t-longa: 240ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--selecao); }

img { max-width: 100%; display: block; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-fundo); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 1px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--papel);
  color: var(--azul);
  padding: 12px 18px;
  z-index: 200;
  border: 1px solid var(--linha-forte);
}
.pular:focus { left: 12px; top: 12px; }

.oculto { display: none !important; }
[hidden] { display: none !important; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 2. Tipografia ---------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  color: var(--azul-escuro);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

p { margin: 0; }

.display {
  font-size: clamp(2.5rem, 5.4vw, 4.125rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.titulo {
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
}

.titulo-3 {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.24;
  letter-spacing: -0.014em;
}

.rotulo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul);
  line-height: 1.4;
  display: block;
}

.rotulo-cinza { color: var(--tinta-3); }

.lead {
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.66;
  color: var(--tinta-2);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

.texto-menor { font-size: 0.875rem; line-height: 1.6; color: var(--tinta-2); }

/* 3. Grade --------------------------------------------------------------- */

.env {
  width: 100%;
  max-width: var(--larg);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: clamp(56px, 7vw, 104px); }
.secao-topo { border-top: 1px solid var(--linha); }

.cabeca-secao {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.cabeca-secao .titulo { margin-top: 14px; }
.cabeca-secao .lead { max-width: 46ch; }

.filete {
  width: 28px;
  height: 2px;
  background: var(--ciano);
  margin-bottom: 18px;
}

/* 4. Botoes e campos ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  background: none;
  transition: background-color var(--t-rapida) var(--ease),
              border-color var(--t-rapida) var(--ease),
              color var(--t-rapida) var(--ease);
}

.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-fundo); color: #fff; }

.btn-linha {
  border-color: var(--linha-forte);
  color: var(--tinta);
  background: var(--papel);
}
.btn-linha:hover { border-color: var(--azul); color: var(--azul); }

.btn-texto {
  min-height: 44px;
  padding: 0;
  text-align: left;
  color: var(--azul);
  font-weight: 600;
  font-size: 0.9375rem;
  border: 0;
  cursor: pointer;
  background: none;
}
.btn-texto:hover { color: var(--azul-fundo); }

.btn-bloco { width: 100%; }

.seta {
  width: 15px; height: 15px;
  flex: none;
  transition: transform var(--t-rapida) var(--ease);
}
.btn:hover .seta, .btn-texto:hover .seta, .link-seta:hover .seta { transform: translateX(3px); }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  min-height: 44px;
}

.campo {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  background: var(--papel);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--tinta);
  transition: border-color var(--t-rapida) var(--ease);
}
.campo::placeholder { color: var(--tinta-3); }
.campo:focus { border-color: var(--azul); outline-offset: 1px; }

select.campo {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2355606e' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  cursor: pointer;
}

/* 5. Cabecalho ----------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--linha);
}

.topo-grade {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 74px;
}

.marca { display: flex; align-items: center; gap: 12px; flex: none; }
.marca img { height: 26px; width: auto; }

.nav-principal {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 6px;
}

.nav-principal a {
  color: var(--tinta);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 6px 0;
  position: relative;
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-rapida) var(--ease);
}
.nav-principal a:hover { color: var(--azul); }
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after { transform: scaleX(1); }

.topo-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icone-btn {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tinta);
  border-radius: 2px;
}
.icone-btn:hover { color: var(--azul); }
.icone-btn svg { width: 19px; height: 19px; }

.btn-orcamento {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  background: var(--papel);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
  transition: border-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease);
}
.btn-orcamento:hover { border-color: var(--azul); color: var(--azul); }
.btn-orcamento svg { width: 17px; height: 17px; }

.conta {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--azul);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.conta[data-vazio="sim"] { background: var(--papel-3); color: var(--tinta-3); }

.btn-menu { display: none; }

/* 6. Home: abertura ------------------------------------------------------ */

.abertura { padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 72px); }

.abertura-grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.abertura .display { margin-top: 18px; max-width: 15ch; }
.abertura .lead { margin-top: 24px; max-width: 48ch; }

.ficha {
  border-top: 1px solid var(--tinta);
  padding-top: 14px;
}

.ficha dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
}

.ficha dt,
.ficha dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.875rem;
}
.ficha dt { color: var(--tinta-3); }
.ficha dd {
  text-align: right;
  color: var(--tinta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Busca instantanea da home */

.busca-home { margin-top: 36px; position: relative; max-width: 620px; }

.busca-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1.5px solid var(--tinta);
  padding-bottom: 10px;
}
.busca-campo svg { width: 19px; height: 19px; color: var(--tinta-2); flex: none; }
.busca-campo input {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--tinta);
  padding: 6px 0;
  min-height: 38px;
}
.busca-campo input:focus { outline: none; }
.busca-campo input::placeholder { color: var(--tinta-3); }
.busca-home:focus-within .busca-campo { border-color: var(--azul); }

.busca-dica {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--tinta-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.busca-dica button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linha-forte);
}
.busca-dica button:hover { color: var(--azul); text-decoration-color: var(--azul); }

.sugestoes {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 10px);
  background: var(--papel);
  border: 1px solid var(--linha);
  box-shadow: 0 18px 44px rgba(0, 30, 70, 0.10);
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
}

.sugestoes a {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
}
.sugestoes a:last-child { border-bottom: 0; }
.sugestoes a:hover, .sugestoes a:focus-visible { background: var(--papel-2); }
.sugestoes img {
  width: 52px; height: 52px;
  object-fit: contain;
  background: var(--papel);
}
.sugestoes .s-nome { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.sugestoes .s-meta { font-size: 0.75rem; color: var(--tinta-3); margin-top: 2px; }
.sugestoes .s-rodape {
  display: block;
  padding: 12px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--azul);
  border-top: 1px solid var(--linha);
  background: var(--papel-2);
}
.sugestoes .s-vazio { padding: 16px 14px; font-size: 0.875rem; color: var(--tinta-2); }

/* 7. Home: linhas proprias ----------------------------------------------- */

.linhas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--tinta);
}

.linha-card {
  padding: 30px 28px 28px 0;
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}
.linha-card:not(:first-child) { padding-left: 28px; }
.linha-card:last-child { border-right: 0; padding-right: 0; }

.linha-indice {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.linha-nome {
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  letter-spacing: -0.015em;
  color: var(--azul-escuro);
  font-weight: 700;
  line-height: 1.15;
}
.linha-nome span { color: var(--azul); margin-left: 0.09em; }

.linha-tagline { font-size: 0.9375rem; color: var(--tinta-2); line-height: 1.55; }

.linha-lista {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.linha-lista li { border-top: 1px solid var(--linha); }
.linha-lista a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 0.875rem;
  color: var(--tinta);
}
.linha-lista a:hover { color: var(--azul); }
.linha-lista .q { color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.linha-rodape { margin-top: auto; padding-top: 18px; }

.nota-parceira {
  margin-top: 28px;
  border-top: 1px solid var(--linha);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  font-size: 0.875rem;
  color: var(--tinta-2);
}
.nota-parceira strong { color: var(--azul-escuro); letter-spacing: 0.02em; }

/* 8. Home: indice de categorias ------------------------------------------ */

.destaques-cat {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 44px;
}

.cat-tile { display: block; color: inherit; }
.cat-tile .moldura {
  aspect-ratio: 4 / 3;
  background: var(--papel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--linha);
  transition: border-color var(--t-media) var(--ease);
}
.cat-tile img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform var(--t-longa) var(--ease);
}
.cat-tile:hover .moldura { border-color: var(--azul); }
.cat-tile:hover img { transform: scale(1.03); }
.cat-tile .t {
  display: block;
  margin-top: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--azul-escuro);
  line-height: 1.3;
}
.cat-tile .q { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.indice-cat {
  columns: 3;
  column-gap: 48px;
  border-top: 1px solid var(--tinta);
  padding-top: 8px;
}
.indice-cat a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
  font-size: 0.9375rem;
  break-inside: avoid;
}
.indice-cat a:hover { color: var(--azul); }
.indice-cat .q { color: var(--tinta-3); font-variant-numeric: tabular-nums; font-size: 0.875rem; }

/* 9. Home: ciclo --------------------------------------------------------- */

.ciclo { background: var(--papel-2); }

.ciclo-grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.ciclo-citacao {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--azul-escuro);
  font-weight: 700;
  margin-top: 20px;
  max-width: 18ch;
}

.ciclo-nota { margin-top: 18px; font-size: 0.9375rem; color: var(--tinta-2); max-width: 40ch; }

.etapas { border-top: 1px solid var(--tinta); }

.etapa { border-bottom: 1px solid var(--linha); }

.etapa-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.etapa-btn:hover .etapa-nome { color: var(--azul); }

.etapa-num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.etapa[data-aberta="sim"] .etapa-num { color: var(--azul); }

.etapa-nome {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 600;
  color: var(--azul-escuro);
  letter-spacing: -0.01em;
  transition: color var(--t-rapida) var(--ease);
}

.etapa-sinal {
  width: 14px; height: 14px;
  color: var(--tinta-3);
  justify-self: end;
  transition: transform var(--t-media) var(--ease);
}
.etapa[data-aberta="sim"] .etapa-sinal { transform: rotate(45deg); color: var(--azul); }

.etapa-corpo {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-longa) var(--ease);
}
.etapa[data-aberta="sim"] .etapa-corpo { grid-template-rows: 1fr; }
.etapa-corpo > div { min-height: 0; }
.etapa-conteudo {
  padding: 0 0 20px 58px;
  font-size: 0.9375rem;
  color: var(--tinta-2);
  line-height: 1.6;
  max-width: 56ch;
}
.etapa-links {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.etapa-links a {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  color: var(--tinta);
  background: var(--papel);
}
.etapa-links a:hover { border-color: var(--azul); color: var(--azul); }

/* 10. Home: autoridade --------------------------------------------------- */

.prova-grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.prova-foto {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--papel-2);
}
.prova-foto img { width: 100%; height: 100%; object-fit: cover; }

.prova-legenda { margin-top: 10px; font-size: 0.8125rem; color: var(--tinta-3); }

.prova-itens { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--tinta); }
.prova-itens li { padding: 16px 0; border-bottom: 1px solid var(--linha); }
.prova-itens .t { font-weight: 600; color: var(--azul-escuro); font-size: 0.9375rem; }
.prova-itens .d { font-size: 0.875rem; color: var(--tinta-2); margin-top: 3px; }

/* 11. Conhecimento (blog) ------------------------------------------------ */

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.post-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.post-foto {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--papel-2);
  position: relative;
}
.post-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease);
}
.post-card:hover .post-foto img { transform: scale(1.03); }

.post-tipo {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--papel);
  color: var(--azul);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
}

.post-card .post-titulo {
  margin-top: 16px;
  font-size: clamp(1.125rem, 1.7vw, 1.4375rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--azul-escuro);
  font-weight: 700;
}
.post-card:hover .post-titulo { color: var(--azul); }
.post-card .post-resumo { margin-top: 10px; font-size: 0.9375rem; color: var(--tinta-2); line-height: 1.55; }
.post-card .post-data {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--tinta-3);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.posts-duplo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.posts-duplo .post-foto { aspect-ratio: 3 / 2; }

/* 12. Rodape ------------------------------------------------------------- */

.rodape { background: var(--papel-2); border-top: 1px solid var(--linha); padding-block: clamp(44px, 5vw, 72px) 28px; }

.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.2fr));
  gap: clamp(28px, 4vw, 56px);
}

.rodape-marca img { height: 28px; width: auto; }
.rodape-slogan { margin-top: 16px; font-size: 1rem; color: var(--azul-escuro); font-weight: 600; max-width: 24ch; line-height: 1.35; }
.rodape-unid { margin-top: 18px; font-size: 0.875rem; color: var(--tinta-2); }
.rodape-unid strong { color: var(--tinta); font-weight: 600; }

.rodape h3 {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 700;
  margin-bottom: 14px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 9px; }
.rodape li a, .rodape li .link-post { font-size: 0.875rem; color: var(--tinta); }
.rodape li a:hover, .rodape li .link-post:hover { color: var(--azul); }
.rodape li .link-post {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-weight: 400;
  text-align: left;
  line-height: 1.5;
}

.rodape-fim {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--tinta-3);
}

/* 13. Catalogo ----------------------------------------------------------- */

.cat-cabeca { padding-block: clamp(36px, 4vw, 56px) 24px; }
.cat-cabeca .lead { max-width: 52ch; margin-top: 16px; }

.migalha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--tinta-3);
  margin-bottom: 18px;
}
.migalha a { color: var(--tinta-2); }
.migalha a:hover { color: var(--azul); }
.migalha span[aria-hidden] { color: var(--linha-forte); }

.barra-busca {
  position: sticky;
  top: 74px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.barra-grade {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
}

.barra-campo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.barra-campo svg { width: 18px; height: 18px; color: var(--tinta-2); flex: none; }
.barra-campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  padding: 10px 0;
  color: var(--tinta);
  min-height: 44px;
}
.barra-campo input:focus { outline: none; }
.barra-campo input::placeholder { color: var(--tinta-3); }

.limpa-busca {
  border: 0; background: none; cursor: pointer;
  width: 34px; height: 34px;
  color: var(--tinta-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.limpa-busca:hover { color: var(--azul); }
.limpa-busca svg { width: 13px; height: 13px; }

.barra-conta {
  font-size: 0.8125rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.barra-conta strong { color: var(--azul-escuro); font-weight: 700; }

.btn-filtros { display: none; }

.cat-corpo {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  padding-block: 32px clamp(56px, 7vw, 96px);
  align-items: start;
}

.painel-filtros { position: sticky; top: 148px; }

.filtros-topo {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}
.filtros-topo strong { font-size: 0.9375rem; color: var(--azul-escuro); }

.ordenar { flex: none; min-width: 210px; }

.grupo-filtro { border-top: 1px solid var(--tinta); padding-top: 14px; margin-bottom: 26px; }
.grupo-filtro h3 {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 700;
  margin-bottom: 8px;
}

.opcoes { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.opcoes li { border-bottom: 1px solid var(--linha); }

.opcao {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  min-height: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  color: var(--tinta);
  line-height: 1.35;
  transition: color var(--t-rapida) var(--ease);
}
.opcao:hover { color: var(--azul); }
.opcao .q { color: var(--tinta-3); font-variant-numeric: tabular-nums; font-size: 0.8125rem; flex: none; }
.opcao[aria-pressed="true"] { color: var(--azul); font-weight: 600; }
.opcao[aria-pressed="true"] .q { color: var(--azul); }
.opcao[data-zero="sim"] { color: var(--tinta-3); }

.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  align-items: center;
}
.ficha-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  background: var(--papel);
  font-size: 0.8125rem;
  color: var(--tinta);
  cursor: pointer;
}
.ficha-chip:hover { border-color: var(--azul); color: var(--azul); }
.ficha-chip svg { width: 10px; height: 10px; }
.ficha-chip .tipo { color: var(--tinta-3); }

.limpar-tudo {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--azul);
  font-weight: 600;
  min-height: 34px;
  padding: 0 4px;
}

/* Grade de produtos */

.grade-prod {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.4vw, 32px);
}

.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prod-card {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linha);
  padding: 18px 0 22px;
  position: relative;
  transition: border-color var(--t-media) var(--ease);
}
.prod-card:hover { border-top-color: var(--azul); }

.prod-foto {
  aspect-ratio: 1 / 1;
  background: var(--papel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.prod-foto img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform var(--t-longa) var(--ease);
}
.prod-card:hover .prod-foto img { transform: scale(1.035); }

.prod-cat {
  margin-top: 14px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 600;
  line-height: 1.4;
}

.prod-nome {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--azul-escuro);
  letter-spacing: -0.008em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-card a.prod-nome:hover { color: var(--azul); }

.prod-cod {
  margin-top: 6px;
  min-height: 20px;
  font-size: 0.8125rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.prod-cod .fam { color: var(--tinta-3); letter-spacing: 0; }

.prod-acoes {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prod-acoes .btn { min-height: 42px; font-size: 0.875rem; flex: 1; padding: 0 12px; }
.prod-acoes .btn-ver {
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  background: var(--papel);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-2);
  transition: border-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease);
}
.prod-acoes .btn-ver:hover { border-color: var(--azul); color: var(--azul); }
.prod-acoes .btn-ver svg { width: 17px; height: 17px; }

.btn-add[data-feito="sim"] {
  background: var(--papel);
  color: var(--azul);
  border-color: var(--azul);
}

.mais {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--linha);
  padding-top: 32px;
}
.mais .info { font-size: 0.8125rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.vazio {
  border-top: 1px solid var(--tinta);
  padding: 48px 0 0;
  max-width: 46ch;
}
.vazio .titulo-3 { margin-bottom: 12px; }
.vazio p { color: var(--tinta-2); font-size: 0.9375rem; }
.vazio .acoes { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }

.carregando {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.4vw, 32px);
}
.esqueleto { border-top: 1px solid var(--linha); padding: 18px 0 22px; }
.esqueleto .bloco { background: var(--papel-2); aspect-ratio: 1 / 1; }
.esqueleto .l1, .esqueleto .l2 { height: 11px; background: var(--papel-2); margin-top: 14px; }
.esqueleto .l2 { width: 52%; }
@keyframes pulsar { 0%, 100% { opacity: 1 } 50% { opacity: 0.55 } }
.esqueleto .bloco, .esqueleto .l1, .esqueleto .l2 { animation: pulsar 1.4s ease-in-out infinite; }

/* 14. Produto ------------------------------------------------------------ */

.prod-topo { padding-block: 26px clamp(48px, 6vw, 80px); }

.prod-grade {
  display: grid;
  grid-template-columns: minmax(0, 6.2fr) minmax(0, 5fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}

.visor {
  border: 1px solid var(--linha);
  background: var(--papel);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.visor img { width: 100%; height: 100%; object-fit: contain; padding: clamp(18px, 3vw, 44px); }

.visor-video {
  position: relative;
  cursor: default;
  align-items: stretch;
}
.visor-video img { padding: 0; object-fit: cover; }
.visor-video .cobre {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 21, 46, 0.18), rgba(0, 21, 46, 0.62));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 3vw, 32px);
  color: #fff;
}
.visor-video .play {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: auto;
  color: var(--azul);
}
.visor-video .play svg { width: 18px; height: 18px; padding: 0; }
.visor-video .vt { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; max-width: 30ch; }
.visor-video .vd { font-size: 0.8125rem; opacity: 0.86; margin-top: 6px; }

.trilha {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.trilha button {
  width: 78px; height: 78px;
  border: 1px solid var(--linha);
  background: var(--papel);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color var(--t-rapida) var(--ease);
}
.trilha button img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.trilha button.vid img { object-fit: cover; padding: 0; }
.trilha button[aria-pressed="true"] { border-color: var(--azul); }
.trilha button:hover { border-color: var(--azul); }
.trilha .marca-video {
  position: absolute;
  inset: 0;
  background: rgba(0, 21, 46, 0.42);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.trilha .marca-video svg { width: 15px; height: 15px; }

.zoom-dica { margin-top: 10px; font-size: 0.75rem; color: var(--tinta-3); }

.prod-info .display { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 12px; letter-spacing: -0.026em; }

.prod-codigo {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.prod-codigo .k { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.prod-codigo .v { font-size: 1.125rem; font-weight: 700; color: var(--azul-escuro); letter-spacing: 0.01em; }

.prod-aplic { margin-top: 20px; font-size: 1rem; line-height: 1.68; color: var(--tinta-2); max-width: 46ch; }

.compra {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.qtd {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  height: 46px;
}
.qtd button {
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  color: var(--tinta-2);
  font-size: 1.125rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.qtd button:hover { color: var(--azul); }
.qtd input {
  width: 46px;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  background: none;
  min-height: 44px;
}
.qtd input:focus { outline: none; }

.compra .btn-primario { flex: 1; min-width: 210px; }

.aviso-add {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--azul);
  display: flex;
  align-items: center;
  gap: 8px;
}
.aviso-add svg { width: 15px; height: 15px; }

.dados { margin-top: 34px; border-top: 1px solid var(--tinta); }
.dados dl { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; }
.dados dt, .dados dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.875rem;
  line-height: 1.5;
}
.dados dt { color: var(--tinta-3); padding-right: 20px; }
.dados dd { color: var(--tinta); font-weight: 500; }
.dados dd a { font-weight: 600; }

/* Tabela da familia */

.tabela-familia { width: 100%; border-collapse: collapse; }
.tabela-familia caption { text-align: left; font-size: 0.8125rem; color: var(--tinta-3); padding-bottom: 12px; }
.tabela-familia th {
  text-align: left;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 700;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--tinta);
}
.tabela-familia td {
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.9375rem;
  vertical-align: middle;
}
.tabela-familia .c-cod { font-variant-numeric: tabular-nums; color: var(--tinta-2); white-space: nowrap; width: 1%; }
.tabela-familia .c-acao { text-align: right; width: 1%; white-space: nowrap; }
.tabela-familia tr:hover td { background: var(--papel-2); }
.tabela-familia .btn-mini {
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  border-radius: 2px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--tinta);
  white-space: nowrap;
}
.tabela-familia .btn-mini:hover { border-color: var(--azul); color: var(--azul); }
.tabela-familia .btn-mini[data-feito="sim"] { border-color: var(--azul); color: var(--azul); }

.env-tabela { overflow-x: auto; position: relative; }

/* 15. Gaveta de orcamento ------------------------------------------------ */

.cortina {
  position: fixed;
  inset: 0;
  background: rgba(6, 22, 42, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-media) var(--ease);
  z-index: 90;
}
.cortina[data-ativa="sim"] { opacity: 1; pointer-events: auto; }

.gaveta {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw);
  background: var(--papel);
  z-index: 100;
  transform: translateX(100%);
  transition: transform var(--t-longa) var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 50px rgba(0, 30, 70, 0.12);
}
.gaveta[data-aberta="sim"] { transform: none; }

.gaveta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--linha);
}
.gaveta-topo h2 { font-size: 1.125rem; letter-spacing: -0.01em; }
.gaveta-topo .sub { font-size: 0.75rem; color: var(--tinta-3); margin-top: 2px; }

.gaveta-corpo { flex: 1; overflow-y: auto; padding: 6px var(--gutter) 20px; }

.item-orc {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}
.item-orc .foto {
  width: 64px; height: 64px;
  background: var(--papel-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.item-orc .foto img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.item-orc .n { font-size: 0.875rem; font-weight: 600; line-height: 1.32; color: var(--azul-escuro); }
.item-orc .c { font-size: 0.75rem; color: var(--tinta-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.item-orc .linha-baixo {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.item-orc .qtd { height: 38px; }
.item-orc .qtd button { width: 36px; height: 36px; }
.item-orc .qtd input { width: 34px; min-height: 36px; font-size: 0.875rem; }
.item-orc .remover {
  border: 0; background: none; cursor: pointer;
  font-size: 0.8125rem; color: var(--tinta-3);
  min-height: 38px; padding: 0 2px;
}
.item-orc .remover:hover { color: var(--azul); }

.gaveta-vazia { padding: 48px 0; text-align: left; }
.gaveta-vazia p { font-size: 0.9375rem; color: var(--tinta-2); margin-top: 10px; max-width: 34ch; }
.gaveta-vazia .titulo-3 { color: var(--azul-escuro); }

.gaveta-fim { border-top: 1px solid var(--linha); padding: 18px var(--gutter) 22px; background: var(--papel); }
.gaveta-fim .resumo {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--tinta-2);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.gaveta-fim .resumo strong { color: var(--azul-escuro); }
.gaveta-fim .nota { font-size: 0.75rem; color: var(--tinta-3); margin-top: 12px; line-height: 1.5; }

.form-orc { display: grid; gap: 10px; margin-bottom: 14px; }
.form-orc label { font-size: 0.75rem; color: var(--tinta-3); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.form-orc .duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.sucesso { padding: 28px 0; }
.sucesso .marca-ok {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--azul);
  color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.sucesso .marca-ok svg { width: 18px; height: 18px; }

/* 16. Modal ver rapido e leitor ------------------------------------------ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-media) var(--ease);
}
.modal[data-aberto="sim"] { opacity: 1; pointer-events: auto; }
.modal-fundo { position: absolute; inset: 0; background: rgba(6, 22, 42, 0.42); }

.modal-caixa {
  position: relative;
  background: var(--papel);
  width: min(880px, 100%);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  transform: translateY(10px);
  transition: transform var(--t-longa) var(--ease);
  box-shadow: 0 30px 70px rgba(0, 30, 70, 0.18);
}
.modal[data-aberto="sim"] .modal-caixa { transform: none; }

.modal-fechar {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  border: 0;
  background: var(--papel);
  cursor: pointer;
  color: var(--tinta-2);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.modal-fechar:hover { color: var(--azul); }
.modal-fechar svg { width: 14px; height: 14px; }

.rapido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
.rapido .foto {
  aspect-ratio: 1 / 1;
  border-right: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: center;
}
.rapido .foto img { width: 100%; height: 100%; object-fit: contain; padding: 28px; }
.rapido .corpo { padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; }
.rapido .corpo .titulo-3 { margin-top: 10px; }
.rapido .corpo .txt { margin-top: 14px; font-size: 0.9375rem; color: var(--tinta-2); line-height: 1.6; }
.rapido .corpo .dados { margin-top: 18px; }
.rapido .acoes { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Leitor de conteudo */

.leitor .modal-caixa { width: min(760px, 100%); max-height: 90vh; }
.leitor-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--papel-2); }
.leitor-foto img { width: 100%; height: 100%; object-fit: cover; }
.leitor-foto.retrato { aspect-ratio: auto; display: flex; justify-content: center; }
.leitor-foto.retrato img { width: auto; max-width: 100%; height: auto; max-height: 380px; object-fit: contain; }
.leitor-corpo { padding: clamp(26px, 4vw, 52px); }
.leitor-corpo .display { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-top: 14px; }
.leitor-meta { margin-top: 14px; font-size: 0.8125rem; color: var(--tinta-3); display: flex; gap: 16px; flex-wrap: wrap; }
.leitor-texto { margin-top: 26px; }
.leitor-texto p { font-size: 1.0625rem; line-height: 1.75; color: var(--tinta); margin-bottom: 18px; }
.leitor-texto h3 { font-size: 1.125rem; margin: 28px 0 10px; }
.leitor-texto ol, .leitor-texto ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.leitor-texto li {
  border-top: 1px solid var(--linha);
  padding: 12px 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tinta-2);
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
}
.leitor-texto li b { color: var(--azul-escuro); font-weight: 600; }
.leitor-texto li .n { color: var(--azul); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.8125rem; padding-top: 2px; }
.leitor-fim {
  margin-top: 30px;
  border-top: 1px solid var(--tinta);
  padding-top: 20px;
}
.leitor-fim h3 { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 14px; }
.leitor-fim .links { display: flex; flex-wrap: wrap; gap: 10px; }
.leitor-fim .links a {
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
}
.leitor-fim .links a:hover { border-color: var(--azul); color: var(--azul); }

/* Lightbox de foto */

.lupa { z-index: 120; }
.lupa .modal-fundo { background: rgba(255, 255, 255, 0.96); }
.lupa .modal-caixa {
  background: none;
  box-shadow: none;
  width: min(900px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lupa img { width: 100%; height: auto; }

/* 17. Movimento ---------------------------------------------------------- */

.js .revela {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-longa) var(--ease), transform var(--t-longa) var(--ease);
}
.js .revela[data-vista="sim"] { opacity: 1; transform: none; }

.sem-revelacao .revela { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .revela { opacity: 1; transform: none; }
}

/* 18. Responsivo --------------------------------------------------------- */

@media (max-width: 1080px) {
  .cat-corpo { grid-template-columns: 200px minmax(0, 1fr); }
  .grade-prod, .carregando { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destaques-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indice-cat { columns: 2; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }

  .nav-principal { display: none; }
  .btn-menu { display: inline-flex; }
  .topo-grade { height: 64px; gap: 12px; }
  .btn-orcamento .rot { display: none; }
  .btn-orcamento { padding: 0 12px; }

  .abertura-grade,
  .cabeca-secao,
  .ciclo-grade,
  .prova-grade,
  .prod-grade,
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }

  .cabeca-secao { gap: 18px; align-items: start; }
  .linhas { grid-template-columns: minmax(0, 1fr); }
  .linha-card { border-right: 0; border-bottom: 1px solid var(--linha); padding: 26px 0; }
  .linha-card:not(:first-child) { padding-left: 0; }
  .linha-card:last-child { border-bottom: 0; }

  .posts, .posts-duplo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cat-corpo { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .painel-filtros {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 92vw);
    background: var(--papel);
    z-index: 100;
    transform: translateX(100%);
    transition: transform var(--t-longa) var(--ease);
    overflow-y: auto;
    padding: 20px var(--gutter) 40px;
    box-shadow: -18px 0 50px rgba(0, 30, 70, 0.12);
  }
  .painel-filtros[data-aberto="sim"] { transform: none; }
  .filtros-topo { display: flex !important; }
  .btn-filtros {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--linha-forte);
    border-radius: 2px;
    background: var(--papel);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-filtros:hover { border-color: var(--azul); color: var(--azul); }
  .btn-filtros .q { color: var(--azul); font-variant-numeric: tabular-nums; }

  .barra-busca { top: 64px; }
  .barra-grade { flex-wrap: wrap; gap: 10px; }
  .barra-campo { flex: 1 1 100%; order: -1; }
  .ordenar { flex: 1; }

  .rapido { grid-template-columns: minmax(0, 1fr); }
  .rapido .foto { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--linha); }

  .prod-topo { padding-top: 16px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }

  body { font-size: 15.5px; }

  .secao { padding-block: 44px; }

  .destaques-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .indice-cat { columns: 1; }

  .posts, .posts-duplo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .post-foto { aspect-ratio: 3 / 2; }

  .grade-prod, .carregando { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .prod-nome { font-size: 0.875rem; -webkit-line-clamp: 3; }
  .prod-acoes .btn { font-size: 0.8125rem; padding: 0 8px; }
  .prod-acoes .btn-ver { display: none; }

  .rodape-grade { gap: 30px; }
  .rodape-fim { flex-direction: column; gap: 6px; }

  .ficha dl { column-gap: 12px; }

  .etapa-conteudo { padding-left: 0; }

  .tabela-familia .c-nome { min-width: 148px; }
  .tabela-familia th, .tabela-familia td { padding-right: 10px; font-size: 0.875rem; }
  .tabela-familia .btn-mini { padding: 0 10px; font-size: 0.75rem; min-height: 36px; }

  .gaveta { width: 100vw; }

  .leitor-corpo { padding: 24px 20px 32px; }
  .visor-video .play { width: 48px; height: 48px; }
}

@media (max-width: 400px) {
  .prod-acoes .btn { font-size: 0.78125rem; }
  .barra-conta { font-size: 0.75rem; }
}

@media print {
  .topo, .gaveta, .cortina, .modal, .barra-busca { display: none !important; }
}