/* ==========================================================================
   EVM Reboques — Fabricação e qualidade (fabricacao.html) · v2.4
   Somente o que é específico desta página. Tokens e componentes (cena 3D,
   vidro, palco, selos de origem, foto, etapas, checklist, botões de contato)
   vêm de styles.css. v2.1: títulos leves com .title-accent; a fotografia é a
   verdade do produto ("O resultado"); o 3D e as ilustrações levam o selo
   .badge--study. v2.2: as etapas do processo se revelam com a rolagem
   (animação ligada à rolagem, só onde o navegador suporta e sem movimento
   reduzido). v2.4 (produção): sem quadros "Foto a produzir" — as etapas
   viram uma grade só de texto; o desenho técnico (com cotas) só aparece com
   a ficha validada e, sem ele, o título do processo ocupa a linha toda;
   atalho do WhatsApp em cada aplicação; evidência em três colunas.
   v2.5 (foto + 3D, docs/FOTO-3D.md): "a foto prova, o desenho explica" — as
   vistas do reboque (sem cotas enquanto a ficha estiver sob consulta) voltam
   ao lado da fotografia real do mesmo modelo (.fab-process__intro--pair);
   cada aplicação abre com foto real + miniatura do 3D (.media-pair,
   styles.css), em moldura 16:9.
   v2.6 (docs/UX-2.6.md §1): selo do 3D "Representação 3D" com o aviso de
   representação virtual na legenda do topo (.fab-hero__caption-note); as
   vistas e a figura numerada levam "Desenho ilustrativo · sem escala".

   01 Topo (título, cena 3D do chassi, botão "Explorar em 3D")
   02 Índice das etapas
   03 Processo: foto real + vistas, grade das etapas e revelação pela rolagem
   04 O resultado (fotos reais)
   05 Painéis recuados (qualidade e componentes)
   06 Controle de qualidade
   07 Componentes (figura numerada + o que muda com a aplicação)
   08 Evidência
   ========================================================================== */


/* --------------------------------------------------------------------------
   01 Topo
   O respiro superior vem de .page-top (fora da pílula do cabeçalho); aqui só
   o inferior, para não sobrescrever o padding-top da classe compartilhada.
   -------------------------------------------------------------------------- */
.fab-hero {
  padding-bottom: var(--section-space-tight);
}

.fab-hero .breadcrumb {
  margin-bottom: clamp(24px, 4vw, 48px);
}

.fab-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px clamp(32px, 5vw, 80px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.fab-hero__title,
.fab-hero__intro {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 14px;
  min-width: 0;
}

.fab-hero__title h1 {
  max-width: 16ch;
}

.fab-hero__intro {
  gap: 20px;
}

.fab-hero__intro .lead {
  max-width: 52ch;
}

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

/* Cena 3D (estúdio escuro, sem interação) + legenda em vidro escuro.
   < 800: cena 4:3 → 16:9 e legenda logo abaixo, como cartão escuro; o 3D
   fica centrado.
   ≥ 800: legenda sobre a cena, à direita. O script usa a mesma faixa
   (WIDE_QUERY em fabricacao.js): o primeiro quadro do 3D põe o reboque
   inteiro no meio da faixa do pôster (lente −0,36) e a câmera desliza até o
   chassi à esquerda da legenda (lente −0,3). */
.fab-hero__figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  margin: 0;
}

/* O botão "Explorar em 3D" fica sobre a cena escura: primário invertido
   (branco com texto marinho, 14,6:1), como nos demais contextos escuros */
.fab-hero__scene {
  --btn-primary-bg: var(--brand-white);
  --btn-primary-fg: var(--brand-navy);
  --btn-primary-hover-bg: var(--paper-3);
  aspect-ratio: 4 / 3;
}

@media (min-width: 600px) {
  .fab-hero__scene {
    aspect-ratio: 16 / 9;
  }
}

/* Selo do 3D ("Representação 3D", v2.6): curto; o limite só protege o
   reboque se o texto mudar */
.fab-hero__scene > .badge--study {
  max-width: min(22rem, calc(100% - 24px));
}

/* Botão sob demanda (celular, aparelho modesto, economia de dados): centrado
   na base da cena, acima do pôster. Some quando o 3D fica pronto ou falha. */
.fab-hero__load {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 4;
  max-width: calc(100% - 24px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7);
  transform: translateX(-50%);
}

/* Carregando: o rótulo muda, o botão segue legível (sem a opacidade de
   .btn[aria-disabled]) e não aceita um segundo clique */
.fab-hero__load[aria-disabled="true"] {
  opacity: 1;
  cursor: progress;
}

.fab-hero__load[aria-disabled="true"]:hover {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

.fab-hero__scene.is-ready .fab-hero__load,
.fab-hero__scene.is-fallback .fab-hero__load {
  display: none;
}

/* A barra de carregamento (::after do .scene) fica sob o botão */
.fab-hero__scene.is-loading .fab-hero__load {
  bottom: 20px;
}

.fab-hero__caption {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
}

.fab-hero__caption-title {
  max-width: 18ch;
  color: var(--fg-title);
  font-size: clamp(1.375rem, 1.2vw + 1.05rem, 2rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.fab-hero__caption-text {
  max-width: 40ch;
  color: var(--fg-2);
  font-size: .9375rem;
  line-height: 1.55;
}

.fab-hero__caption .link-arrow {
  margin-top: 2px;
}

/* v2.6: aviso de representação virtual (EVMSite.copy3d.disclaimer), visível
   junto do 3D grande e fora do canvas — nunca cobre o reboque. Mesmo tom do
   texto da legenda (--fg-2 do vidro escuro), um degrau menor. */
.fab-hero__caption-note {
  max-width: 40ch;
  margin-top: 4px;
  color: var(--fg-2);
  font-size: .8125rem;
  line-height: 1.45;
}

@media (min-width: 800px) {
  /* Cena e legenda na mesma célula da grade: a linha cresce se a legenda
     for mais alta que a cena (texto ampliado), e a cena acompanha (stretch) */
  .fab-hero__figure {
    grid-template-areas: "stack";
    gap: 0;
  }

  .fab-hero__scene,
  .fab-hero__caption {
    grid-area: stack;
  }

  /* Os dois eixos em stretch: com a altura esticada, a proporção não
     recalcula a largura (a cena nunca passa da coluna) */
  .fab-hero__scene {
    align-self: stretch;
    justify-self: stretch;
    min-height: 400px;
  }

  /* Pôster (e ilustração do modo sem 3D) na faixa livre à esquerda da legenda */
  .fab-hero__scene > .scene__poster {
    right: 36%;
  }

  /* O botão acompanha o pôster: centrado na faixa da esquerda */
  .fab-hero__load {
    left: 32%;
  }

  .fab-hero__caption {
    position: relative;
    z-index: 5;
    align-self: center;
    justify-self: end;
    width: min(24rem, 36%);
    margin: clamp(16px, 2.5vw, 32px);
  }
}

@media (min-width: 1100px) {
  .fab-hero__scene {
    aspect-ratio: 21 / 9;
    min-height: 440px;
  }
}

/* Texto alternativo quando o JavaScript está desligado ou um visual falha */
.fab-noscript {
  max-width: 36ch;
  padding: 24px;
  color: var(--fg-2);
  font-size: .9375rem;
  line-height: 1.5;
  text-align: center;
}


/* --------------------------------------------------------------------------
   02 Índice das etapas (atalhos para a linha do tempo): blocos arredondados
   -------------------------------------------------------------------------- */
.fab-index {
  margin-top: clamp(40px, 6vw, 72px);
}

.fab-index__title {
  margin-bottom: 14px;
}

.fab-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fab-index__list > li {
  min-width: 0;
}

/* --accent sobre --paper-2: 7,3:1 · sobre --accent-tint (hover): 6,9:1 */
.fab-index__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 44px;
  padding: 14px 16px 16px;
  background-color: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.fab-index__num {
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.fab-index__name {
  min-width: 0;
  overflow-wrap: break-word;
}

.fab-index__link:hover {
  background-color: var(--accent-tint);
  border-color: var(--accent);
  color: var(--brand-navy);
  text-decoration: none;
}

.fab-index__link:hover .fab-index__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.fab-index__link:focus-visible {
  outline-offset: 2px;
}

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

@media (min-width: 1200px) {
  .fab-index__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fab-index__link {
    transition:
      background-color var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out),
      color var(--dur-1) var(--ease-out);
  }
}


/* --------------------------------------------------------------------------
   03 Processo: cabeça + foto real + vistas do reboque (sem cotas sob
   consulta; desenho técnico com cotas com a ficha validada) e a grade das
   etapas (só texto: 1 coluna < 600 · 2 em 600–999 · 3 ≥ 1000)
   -------------------------------------------------------------------------- */
.fab-process__intro {
  margin-bottom: clamp(40px, 6vw, 80px);
}

.fab-process__intro > .section__head {
  margin-bottom: 0;
}

/* Sem o desenho (sem script ou sem ilustrações): o título ocupa a linha toda.
   O script retira a classe quando mostra o desenho. */
@media (min-width: 900px) {
  .fab-process__intro--solo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "A foto prova, o desenho explica": < 900 empilhados (título, foto, vistas);
   ≥ 900 título e foto na coluna da esquerda (5/12), vistas à direita (7/12),
   centradas na altura das duas. Sem foto, só título | vistas (o .split). */
.fab-process__photo {
  min-width: 0;
}

.fab-process__photo .badge--overlay {
  max-width: calc(100% - 24px);
}

@media (min-width: 900px) {
  /* A sobra de altura (vistas mais altas que título + foto) fica abaixo da
     foto, que sobe para junto do título */
  .fab-process__intro--pair {
    grid-template-areas:
      "head drawing"
      "photo drawing";
    grid-template-rows: auto 1fr;
    row-gap: clamp(24px, 3vw, 36px);
  }

  .fab-process__intro--pair > .fab-process__head {
    grid-area: head;
  }

  .fab-process__intro--pair > .fab-process__photo {
    grid-area: photo;
  }

  .fab-process__intro--pair > .fab-drawing {
    grid-area: drawing;
    align-self: center;
  }
}

.fab-drawing {
  min-width: 0;
  margin: 0;
}

/* Reserva o espaço do desenho técnico (viewBox 1200 × 760): sem deslocamento de layout */
.fab-drawing__stage {
  aspect-ratio: 1200 / 760;
}

/* Celular: diagramação compacta do desenho (viewBox 720 × 840) */
@media (max-width: 599.98px) {
  .fab-drawing__stage {
    aspect-ratio: 720 / 840;
  }
}

/* Legenda: selo do desenho + texto técnico na mesma linha (quebra no celular) */
.fab-drawing__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.fab-drawing__caption .stage__caption {
  min-width: 0;
  margin: 0;
}

/* Vistas sem cotas (v2.5): legenda dos números das peças, numa linha própria
   da legenda (o número em mono, na cor de destaque: ≥ 7:1 sobre o fundo claro) */
.fab-drawing__legend {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.5;
}

.fab-drawing__legend-num {
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Grade das etapas (só texto). O filete superior de cada .step marca o
   começo da etapa; a ordem está na lista ordenada e no número. */
.fab-steps {
  gap: clamp(28px, 3.5vw, 44px) clamp(20px, 3vw, 40px);
}

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

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

.fab-steps .step__num {
  font-size: .875rem;
}

.fab-step__total {
  color: var(--fg-3);
}

.fab-steps .step__title {
  font-size: clamp(1.25rem, .5vw + 1.1rem, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.fab-steps .step__text {
  max-width: 44ch;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Revelação das etapas pela rolagem (v2.2). A animação acompanha a posição
   de cada etapa na tela (animation-timeline: view()), sem JavaScript e sem
   relógio: rolar devagar revela devagar, parar no meio deixa no meio. A
   etapa sobe 28 px e ganha opacidade nos primeiros 260 px depois de a borda
   de cima entrar na tela. Ao saltar para uma etapa pelo índice ela já chega
   no estado final (a posição, não o tempo, decide). Só na tela, só onde o
   navegador suporta e sem movimento reduzido: nos demais casos nada fica
   oculto nem se move. O shorthand "animation" vem antes de
   animation-timeline (ele a reinicia). */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fab-step {
      animation: fab-step-rise var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 260px;
    }
  }
}

@keyframes fab-step-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   04 O resultado: três fotografias reais (moldura 3:2, foto inteira sobre
   --paper-2) com o selo "Fotografia real EVM", legenda e "Ver modelo".
   1 coluna < 600 · a primeira larga + duas lado a lado em 600–899 · três
   colunas ≥ 900. O filete separa do processo (seção sem respiro superior).
   -------------------------------------------------------------------------- */
.fab-result__head {
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--rule-strong);
}

.fab-result__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fab-result__item {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 2px;
  min-width: 0;
}

.fab-result__photo {
  width: 100%;
}

/* Moldura fixa: as três fotos alinham, sem cortar o produto (contain) */
.fab-result__photo .photo__img,
.fab-result__photo .photo__open > img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.fab-result__link {
  margin-top: 2px;
}

.fab-result__note {
  margin-top: clamp(24px, 3vw, 36px);
}

.fab-result__more {
  margin-top: 12px;
}

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

  .fab-result__item:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .fab-result__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px clamp(16px, 2vw, 28px);
  }

  .fab-result__item:first-child {
    grid-column: auto;
  }
}


/* --------------------------------------------------------------------------
   05 Painéis recuados (v2): como a faixa de chamada, 12 px das bordas da
   janela e cantos --radius-lg. Margens verticais colapsam entre painéis.
   -------------------------------------------------------------------------- */
.fab-inset {
  margin: 12px;
  border-radius: var(--radius-lg);
}


/* --------------------------------------------------------------------------
   06 Controle de qualidade: cartões brancos arredondados sobre o painel
   -------------------------------------------------------------------------- */
.fab-checks {
  gap: 12px;
}

.fab-checks > li {
  padding: 20px 22px 22px 46px;
  background-color: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

/* Marcador alinhado à primeira linha do título, dentro do cartão */
.fab-checks > li::before {
  top: calc(20px + .62em);
  left: 22px;
  border-radius: 2px;
}

.fab-checks > li strong {
  font-size: 1.0625rem;
  line-height: 1.45;
}

.fab-checks > li span {
  display: block;
  max-width: 40ch;
  margin-top: 4px;
  font-size: .9375rem;
  line-height: 1.55;
}


/* --------------------------------------------------------------------------
   07 Componentes: figura numerada (desenho ilustrativo) + lista dos comuns;
   abaixo, "O que muda com a aplicação" em cartões com foto real + 3D
   -------------------------------------------------------------------------- */
.fab-parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
}

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

.fab-parts__figure {
  min-width: 0;
  margin: 0;
}

/* Mesmo formato do viewBox (1200 × 800) para que as âncoras em % coincidam.
   O filete claro que separa o palco do fundo escuro vem de styles.css (.section--dark .stage). */
.fab-parts__stage {
  aspect-ratio: 3 / 2;
}

.fab-parts__aside {
  display: grid;
  gap: 24px;
  min-width: 0;
}

/* Subtítulos "Em todos os modelos" / "O que muda com a aplicação" */
.fab-parts__subtitle {
  color: var(--fg);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Número à esquerda, título e texto alinhados na segunda coluna */
.fab-part {
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
}

.fab-part > * {
  grid-column: 2;
}

.fab-part > .fab-part__num {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
}

.fab-part > .feature__title {
  align-self: baseline;
}

/* Marcadores numerados sobre a ilustração (decorativos: a lista é o conteúdo) */
.fab-markers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.fab-marker {
  position: absolute;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background-color: rgba(7, 18, 43, .88);
  border: 1.5px solid var(--accent-on-dark);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(127, 178, 240, .2);
  color: var(--stage-ink);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 599.98px) {
  .fab-marker {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    box-shadow: 0 0 0 3px rgba(127, 178, 240, .2);
    font-size: .625rem;
  }
}

/* O que muda com a aplicação: 1 → 2 (≥ 600) → 4 colunas (≥ 1200; antes disso a miniatura 3D cobriria os selos) */
.fab-apps {
  display: grid;
  justify-items: start;
  gap: 20px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}

.fab-apps__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@media (min-width: 1200px) {
  .fab-apps__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Cartão sobre o painel escuro: véu claro de 4 % e filete do contexto.
   Texto --stage-ink / --stage-muted sobre ≈ #111C36: ≥ 8:1 */
.fab-app {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 24px);
  background-color: rgba(244, 247, 252, .04);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

/* Foto real + miniatura do 3D (v2.5, .media-pair de styles.css; sem
   o componente, só a foto com o selo). Moldura fixa 16:9: as duas vistas
   do par se sobrepõem nela, então os cartões alinham (fotos de proporções
   diferentes) e a troca foto ↔ 3D não pula; a foto aparece inteira
   (contain) sobre --paper-2 e o pôster 3D ocupa a moldura toda. */
.fab-app__media {
  min-width: 0;
  margin-bottom: 6px;
}

/* O cartão fica no painel escuro, mas tudo o que está dentro da moldura
   ("Girar em 3D", miniatura, anéis de foco) fica sobre a foto (fundo
   --paper-2) ou o pôster claro: valem os tokens do contexto claro, como
   em .stage--light (styles.css) */
.fab-app__media .media-pair__main {
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3-panel);
  --fg-title: var(--brand-navy);
  --accent-fg: var(--accent);
  --accent-fg-hover: var(--accent-hover);
  --focus: var(--accent);
  position: relative;
  aspect-ratio: 16 / 9;
}

.fab-app__media .media-pair__view {
  position: absolute;
  inset: 0;
}

.fab-app__media .media-pair__view .photo,
.fab-app__media .media-pair__poster {
  position: absolute;
  inset: 0;
  margin: 0;
}

.fab-app__media .media-pair__view .photo__open,
.fab-app__media .media-pair__view :is(.photo__img, .photo > img, .photo__open > img),
.fab-app__media .media-pair__poster > svg {
  width: 100%;
  height: 100%;
}

.fab-app__media .media-pair__view :is(.photo__img, .photo > img, .photo__open > img) {
  aspect-ratio: auto;
  object-fit: contain;
}

/* Reserva (só a foto) e versão sem script: a mesma moldura 16:9 */
.fab-app__photo :is(.photo__img, .photo__open > img),
.fab-app__photo > img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Selo sobre a foto: no cartão estreito o texto pode quebrar */
.fab-app__media .badge--overlay {
  max-width: calc(100% - 24px);
}

.fab-app__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  color: var(--accent-fg);
}

.fab-app__icon > svg {
  width: 100%;
  height: 100%;
}

.fab-app__name {
  color: var(--fg);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.fab-app__name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.fab-app__name a:hover {
  color: var(--accent-fg-hover);
  text-decoration-color: currentColor;
}

.fab-app__parts {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.fab-app__parts > li {
  color: var(--fg-2);
  font-size: .9375rem;
  line-height: 1.5;
}

.fab-app__parts strong {
  color: var(--fg);
  font-weight: 700;
}

/* "Perguntar no WhatsApp" do modelo: no fim do cartão, só a largura do texto
   (o anel de foco acompanha o link, não o cartão) */
.fab-app__wa {
  justify-self: start;
  margin-top: 4px;
}

.fab-apps__link {
  margin-top: 4px;
}


/* --------------------------------------------------------------------------
   08 Evidência: três tipos de evidência lado a lado (≥ 900) e, com a ficha
   validada, o link para a ficha técnica
   -------------------------------------------------------------------------- */
.fab-evidence__link {
  margin-top: clamp(20px, 3vw, 32px);
}


/* --------------------------------------------------------------------------
   Impressão: sem painéis recuados, sem botão do 3D nem legenda sobreposta
   -------------------------------------------------------------------------- */
@media print {
  .fab-inset {
    margin: 0;
    border-radius: 0;
  }

  .fab-hero__figure {
    display: block;
  }

  .fab-hero__scene > .scene__poster {
    right: 0;
  }

  .fab-hero__load {
    display: none !important;
  }

  .fab-hero__caption {
    width: auto;
    margin: 8px 0 0;
  }

  .fab-app {
    background: none;
    border-color: #999;
  }
}