/* ==========================================================================
   EVM Reboques — Modelos (v2.1 · DESIGN-SYSTEM §8.5 e §8.7.6; base §3.6
   Lineup e §3.8 Compare)
   Só o layout desta página. Componentes (chips, .lineup, .compare-check,
   .compare-bar, .compare-table, .photo, .badge--photo, .gallery__count,
   .seen-list, etapas, faixa de chamada) vêm de styles.css (§13, §18, §21,
   §26.7–26.9, §27). O 3D desta página é só pôster SVG (sem WebGL).

   01 Cabeça da página            07 Barra de comparação (ajustes)
   02 Filtro por aplicação        08 Pesos: PBT, tara e carga útil
   03 Contexto, contagem e dica   09 Glossário
   04 Linha de modelos            11 Impressão e cores forçadas
   05 Foto do cartão (selo,
      contador, ampliar)
   06 Comparação (seção e extras da tabela)
   (A antiga seção 10, ponte do lightbox, saiu: o styles.css §27.4 estiliza
   a marcação do site.js 1.3.)

   v2.4 (produção e contato): "Perguntar no WhatsApp" em cada cartão; sem o
   exemplo de pesos, a introdução da §08 ocupa a largura toda. Cores do
   WhatsApp (.btn--whatsapp) e o chip .sob-consulta vêm do styles.css.

   v2.5 (foto + 3D, docs/FOTO-3D.md): a mídia do cartão é o par foto + 3D
   (.media-pair do styles.css/site.js) dentro da moldura 16:10 (§05); a
   comparação volta nos dois modos, com a linha do 3D sob a foto e o
   WhatsApp dos modelos comparados (§06). O aviso de comparação da v2.4
   (.catalog-notice) saiu. A barra de comparação usa a altura medida
   (--compare-bar-h, §07).

   v2.6 (docs/UX-2.6.md §6): a foto do cartão e da tabela leva ao produto
   (link oculto); o lightbox abre só pela pílula "Ver as N fotos"
   (.catalog-zoom, alvo ≥ 44 px, §05). "Planejar" saiu dos cartões. Pesos
   (§08): a pergunta à EVM (.weights__ask) no lugar da conta com números
   não publicados.
   ========================================================================== */


/* --------------------------------------------------------------------------
   01 Cabeça da página (primeira seção: .page-top a afasta da pílula)
   -------------------------------------------------------------------------- */
.catalog-head {
  padding-bottom: clamp(28px, 4vw, 48px);
}

.catalog-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px clamp(32px, 5vw, 80px);
  margin-top: clamp(20px, 3.5vw, 40px);
}

@media (min-width: 900px) {
  .catalog-head__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: end;
  }
}

.catalog-head__heading {
  min-width: 0;
}

/* h1 leve (styles.css §03) com a segunda linha em .title-accent */
.catalog-head__title {
  max-width: 15ch;
  margin-top: 12px;
}

.catalog-head__intro {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 44rem;
}

.catalog-head__lead {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.catalog-head__text {
  max-width: 58ch;
  color: var(--ink-2);
}

/* Fatos da linha em mono, com marcadores redondos de acento */
.catalog-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.45;
  letter-spacing: .02em;
}

.catalog-facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.catalog-facts li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 50%;
}


/* --------------------------------------------------------------------------
   02 Filtro por aplicação
   -------------------------------------------------------------------------- */
.catalog-filter {
  display: grid;
  gap: 10px;
  padding-bottom: clamp(18px, 2.5vw, 26px);
  border-bottom: 1px solid var(--line);
}

.catalog-filter__label {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Reserva a altura da fileira de chips até o script preenchê-la */
html.js .catalog-filter .chips:empty {
  min-height: 52px;
}

@media (max-width: 599.98px) {
  html.js .catalog-filter .chips:empty {
    min-height: 58px;
  }
}

/* Sem JavaScript não há chips: o filtro some e a mensagem da linha explica */
html.no-js .catalog-filter,
html.no-js .catalog-compare-hint {
  display: none;
}


/* --------------------------------------------------------------------------
   03 Contexto da aplicação, contagem de resultados e dica de comparação
   -------------------------------------------------------------------------- */
.catalog-context {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 40px;
  padding-block: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px);
}

.catalog-context__main {
  display: flex;
  flex: 1 1 30rem;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.catalog-context__icon {
  flex: none;
  display: block;
  width: 56px;
  height: 56px;
  padding: 8px;
  background-color: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--accent);
}

.catalog-context__icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 600px) {
  .catalog-context__main {
    gap: 20px;
  }

  .catalog-context__icon {
    width: 72px;
    height: 72px;
    padding: 10px;
  }
}

.catalog-context__text {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* v2.1: título de seção leve, no marinho */
.catalog-context__title {
  color: var(--fg-title);
  font-size: clamp(1.625rem, 1.6vw + 1.1rem, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.catalog-context__title:focus {
  outline: none;
}

.catalog-context__title:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.catalog-context__desc {
  max-width: 62ch;
  color: var(--ink-2);
}

.catalog-context__prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.45;
}

.catalog-context__prompt-label {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-context__aside {
  display: grid;
  flex: 0 1 24rem;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}

@media (min-width: 900px) {
  .catalog-context__aside {
    justify-items: end;
    text-align: right;
  }
}

.catalog-context .results-meta {
  margin: 0;
  color: var(--ink-2);
}

.catalog-compare-hint {
  max-width: 40ch;
  color: var(--ink-2);
  font-size: .875rem;
  line-height: 1.45;
}

/* Limite atingido: peso maior (não só cor) */
.catalog-compare-hint.is-full {
  color: var(--ink);
  font-weight: 700;
}

/* Nota das fotografias: linha própria sob o contexto e a contagem */
.catalog-context > .note {
  flex: 1 1 100%;
  max-width: 64ch;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   04 Linha de modelos (ul.lineup.catalog-lineup > li.lineup__item >
   article.lineup__card.catalog-card)
   Grade de cartões com foto real: 1 coluna (< 700), 2 colunas (≥ 700) —
   quatro modelos fecham 2 × 2, sem cartão órfão. Com um só modelo visível
   (filtro por aplicação) a lista ganha .is-single e o cartão vira painel
   largo (foto 7/12 + texto 5/12, ≥ 700). Este arquivo vem depois do
   styles.css: as regras abaixo vencem as colunas da .lineup (§26.7).
   -------------------------------------------------------------------------- */
html.js .catalog-lineup:empty {
  min-height: 40rem;
}

.catalog-lineup {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

@media (min-width: 700px) {
  .catalog-lineup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.catalog-lineup.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-card__body {
  gap: 12px;
}

.catalog-card__name {
  text-wrap: balance;
}

/* Visto nas fotos (model.seen): pílulas um pouco menores dentro do cartão */
.catalog-card__seen {
  gap: 8px;
  margin-top: 2px;
}

.catalog-card__seen .seen-list__items {
  gap: 6px;
}

.catalog-card__seen .seen-list__item {
  min-height: 30px;
  padding: 4px 11px 4px 9px;
  font-size: .8125rem;
}

/* "Medidas, capacidade e opções sob consulta." no lugar dos dados-chave */
.catalog-card__consulta {
  justify-self: start;
  align-self: flex-start;
  max-width: 100%;
}

.catalog-card__actions {
  gap: 8px 10px;
}

/* "Comparar" no fim das ações (fora da foto: o canto da mídia é do selo e
   do contador). Contorno fino para ler como controle. */
.catalog-card__compare {
  margin-left: auto;
  border: 1px solid var(--line);
  background-color: var(--paper-0);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.catalog-card__compare:hover {
  background-color: var(--paper-2);
  border-color: var(--ink-3);
}

/* Caixa "Comparar" indisponível (limite de 3): cursor de bloqueio no rótulo todo */
.compare-check.is-disabled {
  cursor: not-allowed;
}

.compare-check.is-disabled:hover {
  background-color: var(--paper-0);
  border-color: var(--line);
}

/* Um só modelo visível: painel largo */
@media (min-width: 700px) {
  .catalog-lineup.is-single .catalog-card {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .catalog-lineup.is-single .catalog-card__media {
    margin: 10px;
  }

  .catalog-lineup.is-single .catalog-card__body {
    align-self: stretch;
    justify-content: center;
    padding: clamp(20px, 3vw, 48px) clamp(20px, 3vw, 48px) clamp(20px, 3vw, 48px) clamp(8px, 1.5vw, 24px);
  }

  .catalog-lineup.is-single .catalog-card__actions {
    margin-top: 8px;
  }
}

@media (min-width: 1100px) {
  .catalog-lineup.is-single .catalog-card__name {
    font-size: clamp(2rem, 2.2vw + 1rem, 3rem);
  }
}

.catalog-empty {
  margin-top: 8px;
}

.catalog-empty p:not(.empty-state__title) {
  max-width: 56ch;
}

.catalog-empty .btn-row {
  margin-top: 8px;
}

/* Sem JavaScript: lista simples dos modelos */
.catalog-noscript {
  display: grid;
  gap: 4px;
}

.catalog-noscript a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Troca de filtro (v2.2, classes do modelos.js): os cartões que saem
   esmaecem e descem 8 px (.is-leaving, 180 ms) junto com o título e o texto
   da aplicação (.catalog-context.is-switching); depois a grade se refaz e os
   que entram sobem com fade (.is-entering, 180 ms, atraso de 40 ms entre
   eles via --enter-delay). Com prefers-reduced-motion nada disso existe e o
   script troca na hora. */
@media (prefers-reduced-motion: no-preference) {
  .catalog-lineup .lineup__item {
    transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
  }

  .catalog-lineup .lineup__item.is-leaving {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    pointer-events: none;
  }

  .catalog-lineup .lineup__item.is-entering {
    animation: catalog-enter .18s var(--ease-out) var(--enter-delay, 0ms) both;
  }

  .catalog-context__main {
    transition: opacity .18s var(--ease-out);
  }

  .catalog-context.is-switching .catalog-context__main {
    opacity: 0;
  }
}

@keyframes catalog-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes catalog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* --------------------------------------------------------------------------
   05 Foto do cartão: moldura 16:10 (as fotos de estúdio são ≈ 2:1; a foto
   inteira aparece, contain sobre --paper-2), selo "Fotografia real EVM" no
   canto superior esquerdo.
   v2.5: foto + 3D (.catalog-card__media--pair > .media-pair). O par ocupa a
   moldura inteira e as vistas (foto e 3D) se sobrepõem nela. O canto
   inferior esquerdo é da miniatura (.media-pair__pip).
   v2.6: a foto leva ao produto (a.media-pair__link do site.js; sem o par,
   a.catalog-card__photo-link). O lightbox abre só pela pílula "Ver as N
   fotos" (.catalog-zoom), no canto inferior direito da vista da foto — o
   modelos.js a põe dentro dessa vista, que some com o 3D grande (lá o canto
   é de "Girar em 3D"). A pílula desconta a miniatura e três margens na
   largura máxima (como .media-pair__spin), então nunca encosta nela; os
   selos ficam no topo. O contador "N fotos" sobre a foto saiu (o número
   está na pílula).
   -------------------------------------------------------------------------- */
.catalog-card__media {
  aspect-ratio: 16 / 10;
}

.catalog-card__media--pair > .media-pair,
.catalog-card__media--pair > .media-pair > .media-pair__main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.catalog-card__media--pair .media-pair__view {
  position: absolute;
  inset: 0;
}

/* Foto e pôster preenchem a vista (contain sobre o fundo da moldura), como
   .photo--fill */
.catalog-card__media--pair .media-pair__view .photo,
.catalog-card__media--pair .media-pair__poster {
  --photo-radius: 0;
  position: absolute;
  inset: 0;
  margin: 0;
}

.catalog-card__media--pair .media-pair__view .photo__img,
.catalog-card__media--pair .media-pair__view .photo > img,
.catalog-card__media--pair .media-pair__poster > svg {
  width: 100%;
  height: 100%;
}

/* A miniatura fica acima da pílula "Ver as N fotos" (5) e dos selos (4):
   clique e foco chegam a ela */
.catalog-card__media--pair .media-pair__pip {
  z-index: 6;
}

/* Reserva: enquanto a pílula ainda está fora da vista da foto (antes do
   modelos.js movê-la), some com o 3D grande */
.catalog-card__media--pair > .media-pair[data-view="3d"] ~ .catalog-zoom {
  display: none;
}

/* A foto leva ao produto: link duplicado e oculto (tabindex -1), como o
   a.media-pair__link do par; a figure .photo--fill continua posicionada pela
   moldura */
.catalog-card__photo-link,
.catalog-compare__photo-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* "Ver as N fotos": só a pílula é o botão (alvo ≥ 44 × 44 px), no canto
   inferior direito; a foto em volta é o link do produto */
.catalog-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 24px);
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

/* No par: a largura máxima desconta a miniatura (canto inferior esquerdo) e
   três margens, como "Girar em 3D" — a pílula nunca a encosta */
.media-pair .catalog-zoom {
  right: var(--media-pair-inset);
  bottom: var(--media-pair-inset);
  max-width: calc(100% - var(--media-pair-pip-w) - 3 * var(--media-pair-inset));
}

/* Vidro branco 92 %: tinta 14:1 sobre qualquer foto */
.catalog-zoom__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 14px 6px 12px;
  overflow: hidden;
  background-color: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px -10px rgba(1, 32, 112, .55);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

/* Lupa (mesmo desenho do .photo__open de styles.css §27.2) */
.catalog-zoom__pill::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6L17 17M8.5 6v5M6 8.5h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6L17 17M8.5 6v5M6 8.5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.catalog-zoom:hover .catalog-zoom__pill {
  background-color: var(--paper);
  border-color: var(--line);
}

/* Foco: anel em volta da pílula (há 12 px de margem até a borda da mídia,
   que corta o que passa dela) e contorno de acento na própria pílula */
.catalog-zoom:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.catalog-zoom:focus-visible .catalog-zoom__pill {
  background-color: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Variante compacta (tabela comparativa): mais perto do canto, texto menor,
   o mesmo alvo de 44 px */
.catalog-zoom--compact {
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
}

.catalog-zoom--compact .catalog-zoom__pill {
  padding: 4px 12px 4px 10px;
  font-size: .75rem;
}

.catalog-zoom--compact .catalog-zoom__pill::before {
  width: 14px;
  height: 14px;
}

/* Telas estreitas: selo e contador menores, sem disputar a largura */
@media (max-width: 399.98px) {
  .catalog-card__media .badge--photo {
    padding: 5px 10px 5px 8px;
    letter-spacing: .04em;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .catalog-card__photo .photo__img,
  .catalog-card__media--pair .media-pair__view[data-view="foto"] .photo__img {
    transition: transform .6s var(--ease-out);
  }

  .catalog-card__media:hover .catalog-card__photo .photo__img,
  .catalog-card__media--pair:hover .media-pair__view[data-view="foto"] .photo__img {
    transform: scale(1.03);
  }
}


/* --------------------------------------------------------------------------
   06 Comparação lado a lado (seção) e extras da .compare-table
   -------------------------------------------------------------------------- */
.compare-view {
  border-bottom: 1px solid var(--rule);
}

.compare-view__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.compare-view__intro {
  display: grid;
  flex: 1 1 32rem;
  gap: 12px;
  min-width: 0;
}

.compare-view__title {
  max-width: 24ch;
}

.compare-view__title:focus {
  outline: none;
}

.compare-view__title:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.compare-view__text {
  max-width: 62ch;
  color: var(--fg-2);
}

.compare-view__actions {
  flex: 0 0 auto;
}

/* Dica de rolagem: só quando a tabela rola de fato (classe posta pelo script) */
.compare-view__swipe {
  display: none;
  margin-top: 6px;
  color: var(--fg-2);
  font-size: .8125rem;
  line-height: 1.45;
}

.compare-view.is-scrollable .compare-view__swipe {
  display: block;
}

.compare-view .note {
  margin-top: 12px;
}

/* v2.5: próximo passo sob a tabela — "Perguntar no WhatsApp sobre estes
   modelos" e, com a ficha sob consulta, o aviso .sob-consulta ao lado */
.compare-view__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: clamp(18px, 2.5vw, 24px);
  border-top: 1px solid var(--rule);
}

.compare-view__wa {
  max-width: 100%;
}

/* Aparição (v2.2): a seção sobe 8 px com fade (240 ms); com ela aberta, a
   tabela refeita (outro modelo marcado ou removido) entra com fade (180 ms).
   Classes do modelos.js; nenhuma com prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .compare-view.is-appearing {
    animation: catalog-enter .24s var(--ease-out) both;
  }

  .compare-table.is-refreshing > table {
    animation: catalog-fade .18s var(--ease-out) both;
  }
}

/* Cantos da tabela ("Foto real", "Em 3D", "Modelo") em rótulo mono */
.compare-table thead .compare-table__corner {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Linha do topo: foto real de cada modelo, colada à linha dos nomes */
.compare-table .compare-table__photos > th,
.compare-table .compare-table__photos > td {
  padding-bottom: 6px;
  border-bottom: 0;
  vertical-align: top;
}

/* Seletor com td: vence o min-width de .compare-table td (styles.css §26.9) */
.compare-table td.compare-table__photo {
  min-width: 12rem;
}

.compare-table .catalog-compare__media {
  aspect-ratio: 16 / 10;
  margin-bottom: 10px;
}

.compare-table__badge {
  max-width: 100%;
}

/* v2.5: linha do 3D, logo abaixo da foto real (pôster SVG no fundo claro do
   estúdio, selo "Representação 3D" e "Girar em 3D") */
.compare-table .compare-table__studies > th,
.compare-table .compare-table__studies > td {
  padding-top: 10px;
  padding-bottom: 6px;
  border-bottom: 0;
  vertical-align: top;
}

.compare-table td.compare-table__study {
  min-width: 12rem;
}

.compare-table .catalog-compare__media--study {
  background-color: var(--study-light-bottom);
  background-image: linear-gradient(180deg, var(--study-light-top) 0%, var(--study-light-bottom) 100%);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.compare-table__spin {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 2px;
  font-size: .875rem;
}

.compare-table__cat {
  display: block;
  margin-top: 4px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.compare-table__label {
  display: block;
}

/* Marca "≠" das linhas que diferem: forma e texto, além do fundo tingido */
.compare-table__diff {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-right: 8px;
  background-color: var(--brand-navy);
  border-radius: 50%;
  color: var(--brand-white);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: .05em;
}

/* Definição do campo: texto secundário sob o rótulo */
.compare-table__def {
  display: block;
  max-width: 34ch;
  margin-top: 4px;
  color: var(--fg-3);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 599.98px) {
  .compare-table__def {
    font-size: .75rem;
  }
}

/* Valores que diferem também em negrito (as listas "Visto nas fotos" não:
   o tinte e o "≠" bastam e a lista fica legível) */
.compare-table tr.is-diff > td {
  font-weight: 700;
}

.compare-table tr.is-diff > td.compare-table__seen {
  font-weight: 500;
}

/* "Visto nas fotos" na tabela: lista com visto de acento */
.compare-table__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare-table__list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}

.compare-table__list li::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 14px;
  height: 14px;
  background-color: var(--accent-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.compare-table__na {
  color: var(--fg-3);
}

.compare-table__next > th {
  vertical-align: middle;
}

.compare-table__btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.compare-table__btns .btn--ghost {
  margin-left: -14px;
}


/* --------------------------------------------------------------------------
   07 Barra de comparação: alvos de toque ≥ 44 px e espaço reservado no celular
   -------------------------------------------------------------------------- */
.compare-bar__hint {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 700px) {
  .compare-bar__item {
    min-height: 44px;
    padding-left: 14px;
  }

  .compare-bar__remove {
    width: 44px;
    height: 44px;
  }
}

/* No celular a barra quebra em duas linhas (texto + botões): estimativa
   maior. O modelos.js grava a altura medida no style do <html>, que vale
   mais que esta; o styles.css §26.8 reserva o fim da página e o foco
   (--compare-bar-h + 24/32 px) e sobe o botão flutuante do WhatsApp
   (§07.1) acima da barra. */
@media (max-width: 699.98px) {
  html.has-compare-bar {
    --compare-bar-h: 144px;
  }
}


/* --------------------------------------------------------------------------
   08 Pesos: PBT, tara e carga útil
   -------------------------------------------------------------------------- */
.weights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 80px);
}

@media (min-width: 900px) {
  .weights {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .weights__defs,
  .weights__how {
    grid-column: 1 / -1;
  }

  /* Sem o exemplo com números (ficha sob consulta ou sem JavaScript): a
     introdução ocupa a largura toda, sem coluna vazia ao lado */
  .weights.is-no-example .weights__intro,
  html.no-js .weights__intro {
    grid-column: 1 / -1;
  }
}

.weights.is-no-example .weights__text,
html.no-js .weights__text {
  max-width: 60ch;
}

.weights__intro {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.weights__title {
  max-width: 18ch;
}

.weights__text {
  max-width: 46ch;
}

/* Exemplo com dados de um modelo (foto + barra proporcional + cota do PBT) */
.weights__example {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 3vw, 32px);
  background-color: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  --fg-3: var(--ink-3);
}

.weights__caption {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Miniatura da foto real do modelo (decorativa: o nome está ao lado) */
.weights__thumb {
  flex: none;
  display: block;
  width: 96px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.weights__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.weights__caption-text {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 16px;
  min-width: 0;
}

.weights__caption-label {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.weights__model {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.weight-chart {
  display: grid;
  gap: 12px;
}

.weight-bar {
  display: flex;
  gap: 3px;
}

.weight-bar__seg {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 5.5rem;
  min-height: 5.5rem;
  padding: 12px;
  color: var(--paper);
  font-family: var(--font-mono);
  line-height: 1.3;
}

.weight-bar__seg--tara {
  background-color: var(--ink);
  border-radius: var(--radius) 0 0 var(--radius);
}

.weight-bar__seg--carga {
  background-color: var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.weight-bar__name {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.weight-bar__value {
  font-size: clamp(.9375rem, .4vw + .82rem, 1.125rem);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Cota do PBT: linha com terminais, como no desenho técnico */
.weight-total {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  text-align: center;
}

.weight-total::before {
  content: "";
  height: 10px;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.weight-total__name {
  margin-right: 6px;
  color: var(--ink-2);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.weight-total__value {
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.weights__example .note {
  margin-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .weight-bar__seg {
    transition: flex-grow .6s var(--ease-out);
  }
}

/* Definições (de EVM.specFields): legenda com a mesma marca de cor e forma da barra */
.weights__defs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(24px, 3vw, 40px);
  margin: 0;
}

@media (min-width: 600px) {
  .weights__defs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.weights__def {
  min-width: 0;
  padding: 16px 0 18px;
  border-top: 1px solid var(--rule-strong);
}

.weights__def dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-weight: 700;
  line-height: 1.35;
}

.weights__def dt::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.weights__def--tara dt::before {
  background-color: var(--ink);
}

.weights__def--carga dt::before {
  background-color: var(--accent);
}

/* PBT = soma: quadrado vazado, como a cota que abraça a barra inteira */
.weights__def--pbt dt::before {
  border: 1.5px solid var(--ink);
}

.weights__def dd {
  margin: 6px 0 0;
  padding-left: 22px;
  color: var(--fg-2);
  font-size: .9375rem;
  line-height: 1.55;
}

/* Como conferir: etapas (styles.css §18) */
.weights__how {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  min-width: 0;
  margin-top: clamp(8px, 2vw, 24px);
}

.weights__how-title {
  font-size: clamp(1.25rem, .8vw + 1.05rem, 1.625rem);
}

.weights__checks .step__title {
  font-size: 1.0625rem;
}

/* v2.6: pergunta à EVM (a carga útil de cada modelo é informada no
   atendimento): texto e WhatsApp lado a lado, empilhados quando faltar
   largura */
.weights__ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  max-width: 72ch;
}

.weights__ask-text {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-weight: 600;
}

.weights__ask .btn {
  max-width: 100%;
}

/* Ponte para o planejador (calculadora de encaixe, §8.7.2) */
.weights__plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  max-width: 72ch;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--fg-2);
}


/* --------------------------------------------------------------------------
   09 Glossário (§8.7.6): termos do reboque e da ficha, em linguagem simples
   Dois grupos: "No reboque" (7/12, termos em 2 colunas) e "Na ficha
   técnica" (5/12, 1 coluna) a partir de 900; empilhados abaixo disso.
   -------------------------------------------------------------------------- */
.glossary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 48px) clamp(32px, 5vw, 80px);
}

@media (min-width: 900px) {
  .glossary {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.glossary__group {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.glossary__group-title {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.glossary__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(24px, 3vw, 40px);
  margin: 0;
}

@media (min-width: 600px) {
  .glossary__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .glossary__group--ficha .glossary__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.glossary__item {
  min-width: 0;
  padding: 16px 0 18px;
  border-top: 1px solid var(--rule-strong);
}

/* Termo aberto por link (#termo-…): barra de acento à esquerda (forma, além da cor) */
.glossary__item:target {
  padding-left: 14px;
  background-color: var(--accent-wash);
  box-shadow: inset 3px 0 0 var(--accent);
}

.glossary__term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  color: var(--fg);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.glossary__term dfn {
  font-style: normal;
}

/* O nome por extenso já aparece ao lado: sem o sublinhado pontilhado */
.glossary__term abbr[title] {
  text-decoration: none;
  cursor: inherit;
}

.glossary__full {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.glossary__def {
  max-width: 52ch;
  margin: 6px 0 0;
  color: var(--fg-2);
  font-size: .9375rem;
  line-height: 1.55;
}

.glossary__more {
  margin-top: 2px;
}

/* Chamada final: a alternativa ("Descreva a sua carga") num tamanho menor */
.catalog-callout__alt {
  font-size: .9375rem;
}


/* --------------------------------------------------------------------------
   11 Impressão e cores forçadas
   -------------------------------------------------------------------------- */
@media print {
  .catalog-filter,
  .catalog-compare-hint,
  .catalog-zoom,
  .catalog-card__compare,
  .catalog-card__wa,
  .catalog-card__media--pair .media-pair__pip,
  .compare-view__actions,
  .compare-view__swipe,
  .compare-view__wa,
  .compare-table__spin,
  .compare-table tbody:last-child,
  .weights__ask,
  .weights__plan {
    display: none !important;
  }

  .catalog-lineup .lineup__item.is-entering,
  .compare-view.is-appearing,
  .compare-table.is-refreshing > table {
    animation: none !important;
  }

  .catalog-lineup .lineup__item {
    break-inside: avoid;
  }

  .catalog-lineup .lineup__item.is-leaving,
  .catalog-context.is-switching .catalog-context__main {
    opacity: 1 !important;
    transform: none !important;
  }

  .weight-bar__seg,
  .compare-table__diff {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (forced-colors: active) {
  /* O fundo da marca "≠" vira Canvas: um contorno mantém o círculo visível */
  .compare-table__diff {
    border: 1px solid CanvasText;
  }

  .weights__def--tara dt::before,
  .weights__def--carga dt::before {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }

  .catalog-zoom__pill {
    border-color: ButtonText;
  }

  /* Ícones por máscara: cor de sistema, senão somem */
  .catalog-zoom__pill::before {
    forced-color-adjust: none;
    background-color: ButtonText;
  }

  .compare-table__list li::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  /* Moldura do 3D na tabela: o filete em box-shadow some; borda real */
  .compare-table .catalog-compare__media--study {
    border: 1px solid CanvasText;
  }

  .catalog-zoom:focus-visible {
    outline-color: Highlight;
  }

  .glossary__item:target {
    box-shadow: none;
    border-left: 3px solid Highlight;
  }
}