/* ==========================================================================
   EVM Reboques — modelo.html (página do modelo) · v2.2 "fotos reais em
   primeiro plano" (DESIGN-SYSTEM §8.5 e §8.7) + transições fluidas
   Somente o que é específico desta página; os componentes (cena, controles
   da cena, selos, foto, galeria, lightbox, "Visto nas fotos", amostras de
   cor, hotspots, ficha, cartões) vêm de styles.css.

   01 Estados ocultos                        07 Vistas do reboque / desenho técnico
   02 Topo: fotos + painel de informações    08 Opcionais / variações sob consulta
   03 Foto + 3D do topo (galeria e 3D)       09 Outros modelos
   05 Explorar em 3D                         10 Não encontrado
   06 Ficha técnica e pesos                  12 Sub-navegação da página (v2.6)
                                             11 Impressão e cores forçadas
   A seção 12 fica antes da 11 no arquivo: impressão e cores forçadas vêm
   por último.

   As pontes condicionais (html.bridge-gallery / .bridge-lightbox /
   .bridge-card em §03, §04 e §09) e a cópia local do aria-current="true" do
   menu saíram: o styles.css (§08, §27.3, §27.4 e §27.8) estiliza a marcação
   do site.js 1.3, e as sondas do modelo.js já não põem essas classes. O
   lightbox (antiga §04) vem todo do styles.css §27.4.

   Movimento: as transições desta página ficam em
   @media (prefers-reduced-motion: no-preference); com movimento reduzido
   o styles.css §23 também zera transições e animações.

   v2.4 (produção e contato): painel de contato do topo (.contact-panel do
   styles.css + o arranjo desta página em .model-contact), "sob consulta" no
   topo e na ficha (.sob-consulta do styles.css), acabamentos "Visto nas
   fotos: …" e a nota das fotografias. Cores do WhatsApp (.btn--whatsapp,
   --wa) e o visual do .contact-panel / .sob-consulta vêm do styles.css;
   aqui só disposição e espaçamento.

   v2.5 (foto + 3D, docs/FOTO-3D.md): o topo é um .media-pair (visual da
   miniatura, troca e selos: styles.css) com a galeria na vista "foto" e o
   estudo 3D ao vivo na vista "3d" (§03: moldura, faixas e cantos); #desenho
   volta sem cotas como "Vistas do reboque", com a legenda das partes (§07).
   Os cartões de "Outros modelos" (com .media-pair) vêm todos do styles.css.

   v2.6 (docs/UX-2.6.md §1 e §6): sai a palavra "estudo" dos textos — selo
   "Representação 3D" e o aviso de representação virtual visível sob o 3D do
   topo (§03) e na abertura de #explorar (§05); selo "Desenho ilustrativo ·
   sem escala" sobre "Vistas do reboque" (§07). Sub-navegação fixa sob o
   cabeçalho (§12), com html.has-model-subnav no scroll-padding-top. Sai o
   link "Explorar em 3D" do fim do painel do topo; #ficha some sob consulta.
   ========================================================================== */


/* --------------------------------------------------------------------------
   01 Estados ocultos
   ("Modelos" com aria-current="true" no menu: styles.css §08.)
   -------------------------------------------------------------------------- */
/* Sem JavaScript: some o que depende dos dados ([hidden] vale em qualquer
   elemento pela regra global de styles.css §02) */
html.no-js .needs-js {
  display: none !important;
}


/* --------------------------------------------------------------------------
   02 Topo: trilha, fotos reais (galeria) e painel de informações
   Celular: nome → fotos → resumo, dados, "Visto nas fotos", acabamentos e
   botões. ≥ 900: galeria à esquerda (7/12, fixa enquanto o painel rola) e
   nome + informações à direita (5/12).
   -------------------------------------------------------------------------- */
.model-top {
  padding-bottom: var(--section-space-tight);
}

.model-top__crumbs {
  margin-bottom: clamp(12px, 2vw, 24px);
}

.model-top__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "gallery"
    "body";
  gap: 20px;
  min-width: 0;
}

.model-top__head {
  grid-area: head;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.model-top__title {
  font-size: clamp(2.25rem, 2.4vw + 1.25rem, 3.5rem);
  overflow-wrap: break-word;
}

.model-top__tagline {
  max-width: 40ch;
}

.model-top__gallery {
  grid-area: gallery;
  align-self: start;
  min-width: 0;
}

.model-top__body {
  grid-area: body;
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
  max-width: 46rem;
}

.model-top__summary {
  max-width: 60ch;
  color: var(--fg-2);
}

/* Contêiner dos dados-chave: em coluna estreita viram linhas (styles.css §15) */
.model-top__specs {
  container-type: inline-size;
  min-width: 0;
}

.model-top__specs .note {
  margin-top: 10px;
}

.model-top .keyspec__value {
  font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem);
}

.model-top__actions .btn {
  flex: 1 1 auto;
}

@media (max-width: 599.98px) {
  .model-top__actions .btn {
    flex-basis: 100%;
  }
}

/* "Medidas, capacidade e opções sob consulta." (chip do styles.css) logo
   acima do painel de contato */
.model-top__consulta {
  justify-self: start;
  max-width: 100%;
}

/* Nota das fotografias: o espaço vem do gap do painel */
.model-top__note {
  margin-top: 0;
}

/* Painel de contato: WhatsApp do modelo de ponta a ponta; "Ligar" (e
   "Enviar e-mail", quando houver) lado a lado, empilhados no celular;
   "Preparar os detalhes do pedido" e o horário embaixo. */
.model-contact {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.model-contact__wa {
  display: flex;
  width: 100%;
}

.model-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-width: 0;
}

.model-contact__btn {
  flex: 1 1 13rem;
}

.model-contact__plan {
  justify-self: start;
}

.model-contact__note {
  margin: 0;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.5;
}

@media (max-width: 599.98px) {
  .model-contact__btn {
    flex-basis: 100%;
  }
}

/* Acabamentos do modelo (só leitura; a troca fica no 3D de #explorar) */
.model-finishes {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.model-finishes__label,
.explore__finish-label {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.model-finishes__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.model-finish {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  color: var(--fg);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
}

.model-finish__chip {
  flex: none;
  width: 22px;
  height: 22px;
  background-color: var(--swatch, var(--paper-3));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 51, .28);
}

/* Galvanizado: brilho metálico (como .swatch--zinc) */
.model-finish--zinc .model-finish__chip {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 42%, rgba(15, 26, 51, 0) 58%, rgba(15, 26, 51, .22) 100%);
}

/* Ficha sob consulta: "Visto nas fotos:" + amostras na mesma linha */
.model-finishes__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.model-finishes__seen {
  color: var(--fg-2);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}

.model-finishes__note {
  margin: 0;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .model-top__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "gallery head"
      "gallery body";
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: 22px;
    align-items: start;
  }

  /* A galeria acompanha a leitura do painel (sem passar da pílula do cabeçalho) */
  .model-top__gallery {
    position: sticky;
    top: calc(var(--header-top) + var(--header-h) + 16px);
  }

  .model-top__body {
    max-width: none;
  }

  /* Sem fotos (ou modelo não encontrado): uma coluna */
  .model-top__layout.no-photos,
  .model-top__layout.is-missing {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "body";
  }
}


/* --------------------------------------------------------------------------
   03 Foto + 3D do topo (.media-pair.model-media)
   Vista "foto": a galeria das fotos reais (EVMSite.initGallery). Moldura da
   foto principal por --gallery-ratio (o modelo.js usa a mediana das fotos,
   entre 4:3 e 2:1, e a põe na galeria e no par; styles.css §27.3 a aplica);
   a foto inteira aparece (contain) sobre --paper-2. "Ampliar", selo, barra
   e troca de foto: styles.css §27.3.
   Vista "3d": o 3D ao vivo na mesma moldura (selo "Representação 3D") + uma
   faixa com a dica, "Explorar parte por parte" e, v2.6, o aviso de
   representação virtual, no lugar da faixa das miniaturas (altura mínima
   = a da galeria, --model-media-bar: a troca não mexe na página).
   O canto inferior esquerdo da foto e do estudo é da miniatura da troca
   (.media-pair__pip, visual do styles.css): as setas da galeria vão juntas
   para o canto inferior direito, o tipo da foto para o alto, à direita
   (abaixo do "Ampliar"), e a nota de falha do 3D para a direita. A
   miniatura sobe a faixa sob a moldura (--model-media-below, medida pelo
   modelo.js). Sem recorte no par: o anel de foco das miniaturas e da
   miniatura da troca passa da borda.
   -------------------------------------------------------------------------- */
.model-gallery,
.model-media {
  --gallery-ratio: 16 / 9;
}

.model-media {
  min-width: 0;
}

/* As duas vistas na mesma célula (a visível define a altura); sem moldura
   fixa nem recorte vindos do cartão. Aqui o __main também leva a faixa das
   miniaturas (ou a do estudo) e a reserva de altura da vista escondida: sem
   o fundo --paper-2 do styles.css §07.6 (a moldura da foto e o estudo já têm
   o seu), essas faixas ficam sobre o fundo da página, como na v2.4. */
.model-media .media-pair__main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  background-color: transparent;
  border-radius: 0;
}

.model-media .media-pair__view {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
}

/* A galeria ocupa a largura toda da vista da foto ([hidden] continua valendo) */
.model-media .media-pair__view[data-view="foto"] {
  display: block;
}

/* Miniatura da troca no canto inferior esquerdo da moldura (acima da faixa
   das miniaturas da galeria ou da faixa do estudo) */
.model-media .media-pair__pip {
  margin-bottom: var(--model-media-below, 0px);
}

/* Foto da galeria: a moldura da página, mesmo se o par trouxer outra */
.model-media .gallery__media .photo__img {
  height: auto;
  aspect-ratio: var(--gallery-ratio, 16 / 9);
  object-fit: contain;
}

/* Setas juntas no canto inferior direito */
.model-media .gallery__arrow {
  top: auto;
  bottom: 12px;
  margin-top: 0;
}

.model-media .gallery__arrow--prev {
  left: auto;
  right: 64px;
}

.model-media .gallery__arrow--next {
  right: 12px;
}

/* Tipo da foto ("Estúdio", "Ao ar livre"): no alto, à direita, abaixo do
   "Ampliar" (sem ele, no canto) */
.model-media .gallery__media .photo__caption {
  top: 64px;
  right: 12px;
  bottom: auto;
  left: auto;
}

.model-media .gallery:not(.gallery--zoom) .gallery__media .photo__caption {
  top: 12px;
}

/* Vista 3D: estudo + faixa, com o mesmo espaço da galeria */
/* Sem gap: a vista oculta vira block (styles.css §07.6) e o gap sumiria,
   mudando a altura na troca; o espaço vem da margem da barra. */
.model-media .media-pair__view.model-media__view3d {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* O estudo na moldura das fotos; filete fino como em #explorar */
.model-media__scene {
  aspect-ratio: var(--gallery-ratio, 16 / 9);
  box-shadow: 0 0 0 1px var(--line-soft);
}

/* Nota de falha à direita (o canto esquerdo é da miniatura); os botões de
   girar (styles.css: canto inferior direito, só com o 3D pronto) nunca
   aparecem junto com ela */
.model-media__scene .scene__note {
  left: auto;
  right: 12px;
  max-width: calc(70% - 32px);
  text-align: right;
}

.model-media__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 6px 20px;
  min-width: 0;
  min-height: calc(var(--model-media-bar, 56px) - 12px);
  margin-top: 12px;
}

.model-media__hint {
  margin: 0;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.5;
}

.model-media__explore {
  min-height: 44px;
}

/* v2.6: aviso de representação virtual (EVMSite.copy3d.disclaimer), visível
   em linha própria sob a dica e "Explorar parte por parte". Fica também na
   falha do 3D (o pôster continua na tela). As duas vistas dividem a célula
   (styles.css §07.6), então a altura maior da faixa não mexe na página. */
.model-media__disclaimer {
  flex: 1 1 100%;
  max-width: 64ch;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Botões de girar surgem com o 3D pronto (display): esmaecem */
  .model-media__scene.is-ready > .scene-controls {
    animation: modelo-fade-in var(--dur-2) var(--ease-out) both;
  }
}


/* --------------------------------------------------------------------------
   05 Explorar em 3D (#explorar)
   Estudo claro 3:2 (os pontos do pôster usam as âncoras do SVG 1200 × 800),
   selo .badge--study sobre a cena, girar/inclinar/aproximar no canto inferior
   esquerdo (só com o 3D pronto), vistas rápidas abaixo da cena. Celular:
   botão "Explorar em 3D" no lugar das vistas até o 3D carregar.
   ≥ 900: cena (8/12) + lista das partes (4/12) — .hotspot-layout.
   Transições (v2.2): o pôster sai quando o motor desenha o primeiro quadro
   (styles.css §26.2); os pontos do pôster saem junto e os do motor entram
   esmaecendo; botão e vistas trocam por esmaecimento no mesmo lugar; a parte
   ativa da lista troca num cruzamento de 200 ms; a legenda esmaece ao mudar.
   -------------------------------------------------------------------------- */
@keyframes modelo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Abertura: texto + aviso de representação virtual (v2.6, copy3d.disclaimer)
   na coluna da direita da cabeça dividida (≥ 900), como o .lead sozinho */
.explore__intro {
  min-width: 0;
}

.explore__disclaimer {
  margin-top: 0;
}

@media (min-width: 900px) {
  .section__head--split > .explore__intro {
    justify-self: end;
    width: 100%;
    max-width: 30rem;
  }
}

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

/* O topo do estudo (#F3F5F9) quase some no painel (--paper-2): filete fino */
.explore__scene {
  aspect-ratio: 3 / 2;
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow);
}

/* Pontos sobre o pôster: acima do pôster e do canvas, abaixo do selo. Saem
   com o pôster quando o 3D desenha (os pontos do motor assumem); no fim,
   visibility os tira do teclado e do leitor de tela. */
.explore__dots {
  z-index: 3;
}

.explore__scene.is-ready .explore__dots {
  visibility: hidden;
  opacity: 0;
}

/* Pontos do motor: entram esmaecendo (o styles.css só troca a visibilidade) */
.explore__scene:not(.is-ready) .scene__hotspots {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .explore__dots {
    transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear 0s;
  }

  .explore__scene.is-ready .explore__dots {
    transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }

  .explore__scene .scene__hotspots {
    transition: opacity var(--dur-3) var(--ease-out);
  }

  /* Girar/inclinar/aproximar surgem com o 3D pronto (display): esmaecem */
  .explore__scene.is-ready > .scene-controls {
    animation: modelo-fade-in var(--dur-2) var(--ease-out) both;
  }
}

/* Celular: girar (2) + inclinar (2) + aproximar (2) = 6 botões de 44 px
   (≈ 270 px) cabem na cena de 328 px a 360 px de largura */
@media (max-width: 599.98px) {
  .explore__scene > .scene-controls {
    bottom: 6px;
    left: 6px;
    gap: 0;
    max-width: calc(100% - 12px);
    padding: 1px;
  }
}

/* Barra sob a cena: o botão "Explorar em 3D" (sob demanda) e as vistas
   rápidas ocupam a mesma célula da grade — a altura é a do maior, então a
   troca de um pelo outro não empurra a página. Vistas .is-pending: guardam
   o lugar, invisíveis, até o 3D desenhar; botão .is-done: esmaece quando o
   3D fica pronto. visibility tira os dois do teclado e do leitor de tela. */
.explore__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.explore__bar > * {
  grid-area: 1 / 1;
  align-self: start;
}

.explore__views.is-pending,
.explore__start.is-done {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .explore__views,
  .explore__start {
    transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear 0s;
  }

  .explore__views.is-pending,
  .explore__start.is-done {
    transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
}

/* Botão "Girar em 3D" (sob demanda) */
.explore__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-width: 0;
}

.explore__start-hint {
  flex: 1 1 16rem;
  max-width: 52ch;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.5;
}

@media (max-width: 599.98px) {
  .explore__start > .btn {
    flex: 1 1 100%;
  }
}

/* Vistas rápidas: faixa em duas linhas no celular (sem rolagem escondida);
   pílula única a partir de 600 px */
.explore__views {
  flex-wrap: wrap;
  width: auto;
  max-width: 100%;
  overflow: visible;
  background-color: var(--paper);
  border-color: var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.explore__views .scene-controls__btn {
  flex: 1 1 auto;
}

@media (min-width: 600px) {
  .explore__views {
    flex-wrap: nowrap;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--radius-pill);
  }

  .explore__views .scene-controls__btn {
    flex: none;
  }
}

.explore__caption {
  max-width: 72ch;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .explore__caption.is-swapping {
    animation: modelo-fade-in var(--dur-2) var(--ease-out);
  }
}

/* Acabamento no 3D: rádios (styles.css .swatch) ou uma linha só */
.explore__finish {
  min-width: 0;
  padding-top: 4px;
}

.explore__finish-set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A legenda flutua para se comportar como bloco dentro do fieldset */
.explore__finish-legend {
  float: left;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.explore__swatches {
  clear: both;
  max-width: 24rem;
}

.explore__finish-single {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

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

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

.explore__list-title {
  color: var(--fg);
}

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

/* Lista das partes: a parte ativa ganha fundo claro sobre o painel (além da
   barra de acento e do texto em tinta do styles.css §17); a troca entre
   partes é um cruzamento de 200 ms de fundo e cor */
.explore .detail-item.is-active {
  background-color: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  .explore .detail-item,
  .explore .detail-item__btn,
  .explore .detail-item__text {
    transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  }
}


/* --------------------------------------------------------------------------
   06 Ficha técnica e divisão dos pesos
   -------------------------------------------------------------------------- */
.model-ficha__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 32px clamp(32px, 5vw, 80px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.model-ficha__intro {
  display: grid;
  gap: 14px;
}

.model-ficha__intro .h2 {
  max-width: 22ch;
}

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

/* Ficha sob consulta (v2.6): a seção #ficha fica oculta (o modelo.js põe
   hidden); estes estilos valem só com a ficha validada. */

/* Tara + carga útil = PBT, em escala real */
.model-weights {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
}

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

.model-weights__scale {
  display: grid;
  column-gap: 3px;
  margin: 0;
}

.model-weights__part {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.model-weights__part dt {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.model-weights__part dd {
  margin: 2px 0 10px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, .6vw + 1rem, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.model-weights__part--carga dt {
  color: var(--accent-fg);
}

/* Barras: tara hachurada, carga útil no acento */
.model-weights__part::after {
  content: "";
  display: block;
  height: 14px;
  margin-top: auto;
  border-radius: 3px;
}

.model-weights__part--tara::after {
  background-image: repeating-linear-gradient(135deg, var(--ink-2) 0 1.5px, transparent 1.5px 6px);
  box-shadow: inset 0 0 0 1px var(--ink-2);
}

.model-weights__part--carga::after {
  background-color: var(--accent);
}

/* PBT como cota sob as duas barras */
.model-weights__total {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fg);
}

.model-weights__total::before,
.model-weights__total::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 1px;
  height: 11px;
  background-color: var(--fg);
}

.model-weights__total::before { left: 0; }
.model-weights__total::after { right: 0; }

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

.model-weights__total-label abbr[title] {
  text-decoration: none;
  cursor: help;
}

.model-weights__total-value {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, .6vw + 1rem, 1.375rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.model-weights__total-def {
  flex: 1 1 16rem;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.45;
}


/* --------------------------------------------------------------------------
   07 Vistas do reboque / desenho técnico: o palco segue a diagramação montada
   pelo modelo.js (larga 1200 × 760; retrato 720 × 840 abaixo de 600 px, com
   .is-compact; o modelo.js também copia a proporção do viewBox desenhado).
   Sob consulta: legenda das partes numeradas + "Medidas confirmadas pela EVM
   no orçamento." sob o desenho (sem nenhum número de medida).
   -------------------------------------------------------------------------- */
/* v2.6: sob consulta #ficha fica oculta e "Vistas do reboque" vem logo depois
   de #explorar (painel): volta o espaço de cima que o --flush-top tirava */
.model-ficha[hidden] + .section--flush-top {
  padding-top: var(--section-space);
}

.model-drawing {
  max-width: 72rem;
  margin: 0;
}

/* v2.6: selo "Desenho ilustrativo · sem escala" (copy3d.drawing) logo acima
   do desenho, fora do palco (não cobre "VISTA LATERAL" nem as peças) */
.model-drawing__tag {
  display: flex;
  margin: 0 0 12px;
}

.model-drawing__stage {
  aspect-ratio: 1200 / 760;
}

.model-drawing__stage.is-compact {
  aspect-ratio: 720 / 840;
}

.model-drawing__legend {
  display: grid;
  gap: 14px;
  max-width: 72rem;
  margin-top: clamp(24px, 3vw, 36px);
}

.model-drawing__legend-title {
  color: var(--fg);
}

.model-drawing__parts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.model-drawing__part {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.35;
}

/* Número da parte (o mesmo do desenho e da lista do estudo 3D) */
.model-drawing__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  min-height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.model-drawing__name {
  min-width: 0;
  overflow-wrap: break-word;
}

.model-drawing__note {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   08 Opcionais (ou variações sob consulta) e aplicações
   -------------------------------------------------------------------------- */
.model-use {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px clamp(32px, 5vw, 80px);
}

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

.model-use__col {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.model-use__lead {
  max-width: 46ch;
  color: var(--fg-2);
}

.model-use__list > li {
  font-size: 1.0625rem;
}

.model-use__col .note {
  margin-top: 4px;
}

.model-options {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}

.model-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 56px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.model-option__name {
  min-width: 0;
  color: var(--fg);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.model-option__tag {
  max-width: 100%;
  white-space: normal;
}

/* Selo "Aparece no 3D" + "Ver no planejador" (com o opcional já ligado) */
.model-option__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-width: 0;
}

.model-option__link {
  font-size: .9375rem;
}

/* Variações vistas nas fotos (ex.: moto com dois trilhos), sob os opcionais */
.model-options__hint {
  max-width: 52ch;
  margin: 0;
  color: var(--fg-2);
}

/* Sem opcionais de catálogo: cartão "Como pedir uma variação" */
.model-variations {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(20px, 3vw, 28px);
  background-color: var(--paper);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
}

.model-variations__hint {
  max-width: 52ch;
  color: var(--fg);
  font-weight: 600;
}

.model-variations__text {
  max-width: 52ch;
  color: var(--fg-2);
}


/* --------------------------------------------------------------------------
   09 Outros modelos
   Cartão com foto real (EVMSite.renderModelCard): moldura, selo e contador
   vêm do styles.css §27.8. Aqui só a grade.
   -------------------------------------------------------------------------- */
/* Modelo não encontrado: a linha inteira (4) em 2 × 2 ou 4 colunas, sem órfão */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .model-grid.model-others__grid--all {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .model-grid.model-others__grid--all {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Nota sob os cartões (quando houver) */
.model-grid + .note {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Faixa final: o formulário como alternativa, num tamanho menor que o texto */
.callout__alt {
  font-size: .9375rem;
}


/* --------------------------------------------------------------------------
   10 Modelo não encontrado: uma coluna, sem fotos nem 3D
   -------------------------------------------------------------------------- */
.model-top__layout.is-missing {
  max-width: 46rem;
}

.model-top__layout.is-missing .model-top__tagline {
  max-width: 60ch;
}


/* --------------------------------------------------------------------------
   12 Sub-navegação da página (v2.6 · docs/UX-2.6.md §6)
   nav.model-subnav (filha direta do <main>, logo depois do topo): fixa
   (sticky) 8 px abaixo da pílula do cabeçalho até o fim da página. z-index
   40: abaixo do cabeçalho (50) e do painel do menu, acima do conteúdo; o
   contato rápido (44) fica embaixo e não se cruza com ela. Pílula de vidro
   como a do cabeçalho (--glass-strong: texto pequeno), links de 44 px; a
   lista rola dentro de si (sem rolagem lateral da página a 360 px), com a
   borda esmaecida do lado que ainda tem itens (.has-more-start/-end, do
   modelo.js). Seção atual: a[aria-current="true"] — fundo --accent-tint,
   marinho e o traço do acento embaixo (forma, além da cor), a mesma marca
   do menu. Nome do modelo só ≥ 1100.
   Abaixo de 600 px, .is-tucked (modelo.js, ao rolar para baixo) sobe a
   pílula para trás do cabeçalho; ela volta ao rolar para cima e com o foco
   dentro dela. Movimento reduzido: nunca recolhe.
   Âncoras e foco: html.has-model-subnav soma a pílula (--subnav-h, medida
   pelo modelo.js) ao scroll-padding-top (WCAG 2.4.11). A regra é a mesma do
   styles.css §02 (repetida aqui, idêntica, junto do componente).
   -------------------------------------------------------------------------- */
html.has-model-subnav {
  scroll-padding-top: calc(var(--header-top) + var(--header-h) + 8px + var(--subnav-h, 52px) + 12px);
}

/* Com a sub-navegação, ela separa o topo de #explorar: menos folga sob o topo */
html.has-model-subnav .model-top {
  padding-bottom: clamp(20px, 3vw, 32px);
}

.model-subnav {
  position: sticky;
  top: calc(var(--header-top) + var(--header-h) + 8px);
  z-index: 40;
  margin-bottom: 16px;
  pointer-events: none;           /* a faixa ao lado da pílula não bloqueia cliques */
}

.model-subnav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 52px;
  padding: 3px;
  background-color: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  pointer-events: auto;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .model-subnav__bar {
    background-color: var(--paper);
  }
}

.model-subnav__name {
  display: none;
}

.model-subnav__list {
  position: relative;             /* referência do offsetLeft dos links (modelo.js) */
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 32px;    /* foco do teclado fora da borda esmaecida */
  scrollbar-width: none;
  list-style: none;
  border-radius: var(--radius-pill);
  -webkit-overflow-scrolling: touch;
}

.model-subnav__list::-webkit-scrollbar {
  display: none;
}

/* Mais itens à direita / à esquerda: a borda esmaece (indica a rolagem) */
.model-subnav__bar.has-more-end .model-subnav__list {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.model-subnav__bar.has-more-start .model-subnav__list {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}

.model-subnav__bar.has-more-start.has-more-end .model-subnav__list {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.model-subnav__item {
  flex: none;
}

.model-subnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Traço do acento sob o item atual (como no menu) */
.model-subnav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  background-color: var(--accent);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

.model-subnav__link:hover {
  background-color: var(--hover);
  color: var(--brand-navy);
  text-decoration: none;
}

/* O anel de foco fica dentro do link (a lista rola e cortaria o anel de fora) */
.model-subnav__link:focus-visible {
  outline-offset: -3px;
}

.model-subnav__link[aria-current="true"] {
  background-color: var(--accent-tint);
  color: var(--brand-navy);
}

.model-subnav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

@media (min-width: 1100px) {
  .model-subnav__bar {
    gap: 8px;
  }

  .model-subnav__name {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 18rem;
    margin: 0;
    padding: 0 12px 0 18px;
    overflow: hidden;
    color: var(--brand-navy);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* Celular: recolhida ao rolar para baixo (a nav inteira sobe para trás do
   cabeçalho; presa e transformada para fora da tela, o EVMSite.headerOffset()
   deixa de contá-la); volta com o foco do teclado dentro dela */
@media (max-width: 599.98px) {
  .model-subnav.is-tucked {
    opacity: 0;
    transform: translateY(calc(-100% - var(--header-top) - var(--header-h) - 16px));
  }

  .model-subnav.is-tucked:focus-within {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .model-subnav {
    transition:
      transform var(--dur-2) var(--ease-out),
      opacity var(--dur-2) var(--ease-out);
  }

  .model-subnav__link {
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }

  .model-subnav__link::after {
    transition: transform var(--dur-2) var(--ease-out);
  }
}

/* Movimento reduzido: a pílula nunca recolhe (o modelo.js também não recolhe) */
@media (prefers-reduced-motion: reduce) {
  .model-subnav.is-tucked {
    opacity: 1;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   11 Impressão e cores forçadas
   -------------------------------------------------------------------------- */
@media print {
  .model-top__gallery {
    position: static;
  }

  /* No papel, a foto real (mesmo com o 3D como vista grande); sem a miniatura
     da troca nem o estudo ao vivo */
  .model-media .media-pair__view[data-view="foto"] {
    display: block !important;
  }

  .model-media .media-pair__pip,
  .model-media__view3d {
    display: none !important;
  }

  /* Setas, "Ampliar" e miniaturas da galeria: styles.css §24. O telefone do
     painel fica no papel; WhatsApp e planejamento não fazem sentido impressos.
     A sub-navegação (v2.6) também não. */
  .model-subnav,
  .model-contact__wa,
  .model-contact__plan,
  .model-ficha .sob-consulta .btn,
  .explore__bar,
  .explore__start,
  .explore__views,
  .explore__caption,
  .explore__finish,
  .explore__dots {
    display: none !important;
  }
}

@media (forced-colors: active) {
  .model-finish__chip {
    border: 1px solid CanvasText;
  }

  /* Legenda, setas e "Ampliar" da galeria e setas do lightbox: styles.css §25 */

  /* A parte ativa não depende do fundo nem da barra de acento */
  .explore .detail-item.is-active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* Sub-navegação (v2.6): contorno do sistema na pílula; a seção atual
     sublinhada (o fundo e o traço do acento somem nas cores forçadas) */
  .model-subnav__bar {
    border-color: CanvasText;
  }

  .model-subnav__link[aria-current="true"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .3em;
  }
}