/* ==========================================================================
   EVM Reboques — página inicial (v2.2 · transições fluidas sobre a v2.1
   "fotos reais em primeiro plano")
   Complementa styles.css (§08 cabeçalho, §26 cena e rolagem guiada, §27
   fotos reais). Ordem da página (DESIGN-SYSTEM §8.5):
   1 Cena presa (.home-scene): 1.1 herói · 1.2 como escolher · 1.3 capítulos
     · 1.4 entrada e saída dos cartões
   2 O que você leva? (.home-pick)     3 Conheça de perto (.home-photos)
   4 Fábrica (.home-fab, só texto)     5 FAQ (.home-faq)
   6 Faixa de chamada (.home-callout: WhatsApp e telefone)
   7 Movimento reduzido, impressão
   v2.4 (produção e contato): herói com "Falar no WhatsApp" (.btn--whatsapp,
   styles.css) e o link "Planejar meu reboque"; painel com o selo
   .sob-consulta (styles.css) no lugar dos números; sem faixa no topo da
   página, o herói ocupa a altura da tela inteira; em tela baixa (< 500), o
   trilho 01–05 fica à esquerda do botão flutuante de WhatsApp (1.3).
   v2.5 (foto + 3D): a mídia do painel de "O que você leva?" é o par foto
   real + 3D (.media-pair, styles.css); aqui só a moldura 3:2 e o botão das
   fotos (2).
   v2.6 (docs/UX-2.6.md §1 e §4): selo "Representação 3D" e aviso de
   representação virtual visível perto do 3D grande (legenda do herói no modo
   3D, introdução da história, sob a mídia do painel); painel com o 3D ao vivo
   (.media-pair__scene, styles.css §07.6), a pílula "Ver o produto"
   (.media-pair__cta) no canto inferior direito e a lupa da foto no superior
   direito; chamadas "Ver o produto" (marinho) + WhatsApp (verde); < 600, os
   cartões de aplicação em 2 × 2 compactos; "Pular para os modelos" na
   introdução da história.
   (A antiga seção 6, ponte da galeria e do lightbox, saiu: o styles.css
   §27.3–27.4 estiliza a marcação do site.js 1.3. Aqui fica só o layout do
   painel: --gallery-ratio e o fundo branco da foto, em 2.)
   Estado vindo do index.js no invólucro [data-home-scene]:
   [data-hero-mode="photo" | "study"] — foto real ou janela do estudo 3D no
   herói ("photo" é o padrão do HTML: sem JS, a foto fica);
   [data-phase="hero" | "story"] — trilho e pontos da história;
   --look-mix (0 claro … 1 escuro) — mistura contínua do estúdio, valor-alvo
   ligado à rolagem; na .scene o motor escreve o valor amortecido
   (studio3d v2.2, setLookMix). Nada vira de uma vez: as camadas escuras
   entram por opacidade;
   .is-cards-js — o navegador não tem animação ligada à rolagem: o index.js
   escreve --p (−1 … 1) em cada cartão.
   "Lado a lado" = ≥ 900 ou celular deitado (≥ 560 × < 500): o index.js usa
   a mesma consulta (SIDE_QUERY).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 Cena presa (herói + como escolher + capítulos)
   Um invólucro alto com o palco grudado (.home-scene__stage, sticky, 100svh)
   e o fluxo de texto (.home-scene__flow) subindo 100svh para rolar por cima
   dele. Há UM estúdio 3D na página. O herói no modo "photo" e a faixa
   "Como escolher" são opacos e cobrem o palco; no modo "study" o herói é
   transparente e a caixa da mídia vira a janela do estudo.
   -------------------------------------------------------------------------- */
.home-scene {
  position: relative;
  isolation: isolate;
  background-color: var(--study-light-bottom);
}

/* No celular as barras do navegador recolhem durante a rolagem e a janela
   cresce além do palco de 100svh: a faixa de baixo mostra o invólucro, que
   acompanha o estúdio escuro da história pela mesma mistura (--look-mix),
   sem transição própria (o valor já muda a cada quadro de rolagem). */
.home-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--stage-2);
  opacity: var(--look-mix, 0);
  pointer-events: none;
}

/* Estúdio escuro da cena (styles.css §26.2: camada .scene::before) por
   mistura: a opacidade segue o --look-mix que o motor escreve na .scene a
   cada quadro, em vez da virada por data-look (que continua só para as
   cores de pontos e avisos, --scene-*, no meio da mistura). */
.home-scene .home-scene__scene::before,
.home-scene .home-scene__scene[data-look]::before {
  opacity: var(--look-mix, 0);
  transition: none;
}

.home-scene__stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.home-scene__flow {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;           /* áreas vazias deixam passar o clique para a cena */
}

/* Camada do trilho: cobre o invólucro inteiro, depois do texto no código
   (ordem de foco) e acima dele na tela; o .home-scene__pin gruda como o palco
   e posiciona o .story__rail (absoluto, styles.css §26.5). */
.home-scene__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.home-scene__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

/* Trilho 01–05: só na história (ou quando recebe o foco pelo teclado;
   opacidade em vez de visibility para continuar focável) */
.home-scene__rail {
  pointer-events: auto;
  transition: opacity var(--dur-2) var(--ease-out);
}

.home-scene:not([data-phase="story"]) .home-scene__rail:not(:focus-within) {
  opacity: 0;
  pointer-events: none;
}

/* Capítulo ativo: troca no meio do caminho entre duas paradas (index.js),
   com transição curta de 200 ms */
.home-scene__rail .story__rail-link {
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

/* Pontos de detalhe: só nos capítulos e só para ponteiro (camada aria-hidden,
   botões fora da tabulação; o trilho é o equivalente de teclado). Entram e
   saem por opacidade (200 ms); visibility só muda no fim da saída. */
.home-scene .scene__hotspots {
  opacity: 1;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 0s;
}

.home-scene:not([data-phase="story"]) .scene__hotspots {
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}

/* Ponto ativo (motor: .is-active) com a mesma transição de 200 ms do trilho */
@media (prefers-reduced-motion: no-preference) {
  .home-scene .hotspot::before {
    transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out);
  }

  .home-scene .hotspot__label {
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
}

/* O motor cria span.hotspot__dot dentro do botão (grade de 1 célula): ponto
   desenhado (::before) e span na mesma célula, sem deslocar o ponto */
.home-scene .hotspot::before,
.home-scene .hotspot__dot {
  grid-area: 1 / 1;
}

/* Pôster SVG na mesma caixa em que o 3D enquadra o reboque no herói
   (--home-band-*, medidas pelo index.js a partir da mídia do herói) */
.home-scene__scene .scene__poster {
  top: var(--home-band-top, calc(var(--header-top) + var(--header-h) + 16px));
  right: auto;
  bottom: auto;
  left: var(--home-band-left, var(--gutter));
  width: var(--home-band-w, calc(100% - var(--gutter) * 2));
  height: var(--home-band-h, 42%);
}

/* Troca pôster → 3D: corte, não crossfade (o SVG e o render enquadram com
   pequenas diferenças; juntos dariam um reboque "fantasma") */
.home-scene__scene.is-ready .scene__poster {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

/* Selo "Representação 3D" (sempre visível sobre o 3D/pôster). < 900: no alto
   da faixa do herói; na história, abaixo do trilho 01–05. */
.home-scene__badge {
  position: absolute;
  top: calc(var(--header-top) + var(--header-h) + 28px);
  left: calc(var(--gutter) + 12px);
  z-index: 4;
  max-width: calc(100% - var(--gutter) * 2 - 24px);
  pointer-events: none;
  box-shadow: 0 6px 16px -10px rgba(1, 32, 112, .55);
  transition: top var(--dur-2) var(--ease-out);
}

.home-scene[data-phase="story"] .home-scene__badge {
  top: calc(var(--header-top) + var(--header-h) + 72px);
  left: var(--gutter);
}

/* Sem JS não há pôster nem 3D no palco: sem selo do 3D sobre o vazio */
html.no-js .home-scene__badge {
  display: none;
}

/* Aviso "3D indisponível": abaixo do selo */
.home-scene .scene__note {
  top: calc(var(--header-top) + var(--header-h) + 72px);
  bottom: auto;
  left: var(--gutter);
  max-width: calc(100% - var(--gutter) * 2);
}

.home-scene[data-phase="story"] .scene__note {
  top: calc(var(--header-top) + var(--header-h) + 116px);
}


/* 1.1 Herói ------------------------------------------------------------------
   < 900 em pé: mídia em cima (foto real 4:3 ou a janela do estudo), texto
   embaixo. Lado a lado: texto à esquerda (6/12), mídia à direita (6/12).
   Título leve em duas linhas (a segunda em .title-accent). */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-top) + var(--header-h) + 16px);
  padding-bottom: 76px;           /* espaço do "Role para explorar" */
  background-color: var(--study-light-bottom);
  background-image: linear-gradient(180deg, var(--study-light-top) 0%, var(--study-light-bottom) 100%);
  color: var(--ink);
}

/* Estudo: o herói fica transparente e deixa ver o palco preso */
.home-scene[data-hero-mode="study"] .home-hero {
  background: none;
}

.home-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.home-hero__content {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: 16px;
  min-width: 0;
  pointer-events: auto;
}

.home-hero__content > * {
  max-width: 100%;
}

.home-hero__title {
  max-width: none;
  font-size: clamp(2rem, 6.4vw + .4rem, 2.75rem);
  line-height: 1.04;
}

.home-hero__lead {
  max-width: 40ch;
  color: var(--ink-2);
  font-size: 1rem;
}

.home-hero__actions {
  gap: 10px;
  margin-top: 2px;
}

/* Celular: botões com a largura da linha (lado a lado se couberem) */
@media (max-width: 599.98px) {
  .home-hero__actions .btn--lg {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 10px 18px;
    font-size: .9375rem;
  }
}

/* "Planejar meu reboque": ação de texto logo abaixo dos botões (o alvo de
   44 px do .link-arrow já dá o respiro; a margem negativa compensa o gap) */
.home-hero__plan {
  margin-top: -8px;
}

/* < 900, modo estudo: ao rolar, o texto passa sobre o reboque (o palco fica
   preso). Véu claro preso ao bloco de texto: rampa de 0 → 90 % nos 20 px
   acima dele; todo o texto fica sobre 90–94 % de branco (--ink-2 ≥ 8:1
   mesmo sobre a parte escura do reboque). */
.home-scene[data-hero-mode="study"] .home-hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20px;
  right: calc(var(--gutter) * -1);
  bottom: -76px;
  left: calc(var(--gutter) * -1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .9) 20px, rgba(255, 255, 255, .94) 100%);
  pointer-events: none;
}

/* Cartão "Fotografia real EVM" (modo estudo): o modelo do 3D na foto */
.home-hero__card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 25rem;
  margin-top: 4px;
  padding: 8px 16px 8px 8px;
  background-color: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.home-hero__card::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--brand-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M5.5 4H12v6.5' fill='none' stroke='%23000' stroke-width='1.6'/%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='M4 12L12 4M5.5 4H12v6.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-hero__card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  text-decoration: none;
}

.home-hero__card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.home-hero__card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--paper-2);
  border-radius: 8px;
}

.home-hero__card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-hero__card-body {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.home-hero__card-title {
  color: var(--brand-navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-hero__card-text {
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.4;
}

.home-scene:not([data-hero-mode="study"]) .home-hero__card {
  display: none;
}

/* Mídia: a caixa (.home-hero__frame) tem o mesmo tamanho nos dois modos —
   no "photo" mostra a foto real; no "study" fica vazia e o 3D do palco é
   enquadrado nela (index.js). */
.home-hero__media {
  order: -1;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.home-hero__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 46vh;
  max-height: 46svh;
}

/* Foto de campo: preenche a caixa cortando céu e árvores (o reboque fica
   inteiro: object-position no terço de baixo) */
.home-hero__photo {
  --photo-radius: var(--radius-lg);
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.home-hero__photo .photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 80%;
}

.home-scene[data-hero-mode="study"] .home-hero__photo {
  display: none;
}

.home-hero__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  pointer-events: auto;
}

.home-hero__caption {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.45;
  letter-spacing: .04em;
}

.home-hero__caption a {
  color: var(--brand-navy);
  font-weight: 500;
}

.home-scene[data-hero-mode="study"] .home-hero__caption--photo,
.home-scene:not([data-hero-mode="study"]) .home-hero__caption--study {
  display: none;
}

/* Modo 3D: "Representação 3D do …" + o aviso de representação virtual, em
   texto visível sob a janela do 3D (--ink-3 sobre o estúdio claro ≥ 5,7:1).
   Como o "Role para explorar", some na primeira metade da mistura claro →
   escuro (o herói já está quase fora da tela), para não ficar cinza sobre o
   estúdio escurecendo. */
.home-hero__caption--study {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 56ch;
  opacity: calc(1 - var(--look-mix, 0) * 2);
}

/* "Explorar em 3D" ↔ "Ver a foto real": ícone de cubo / câmera desenhado */
.home-hero__toggle {
  margin-left: auto;
  background-color: var(--paper-0);
}

.home-hero__toggle::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M8 1.5l5.5 3v7L8 14.5l-5.5-3v-7z'/%3E%3Cpath d='M2.5 4.5L8 7.5l5.5-3M8 7.5v7'/%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' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M8 1.5l5.5 3v7L8 14.5l-5.5-3v-7z'/%3E%3Cpath d='M2.5 4.5L8 7.5l5.5-3M8 7.5v7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-scene[data-hero-mode="study"] .home-hero__toggle::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M4 10.5h6l2.2-3h7.6l2.2 3h6v15H4z'/%3E%3Ccircle cx='16' cy='17.5' r='5'/%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 32 32' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M4 10.5h6l2.2-3h7.6l2.2 3h6v15H4z'/%3E%3Ccircle cx='16' cy='17.5' r='5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-hero__toggle[aria-disabled="true"]::before {
  display: none;
}

/* "Role para explorar" some na primeira metade da mistura claro → escuro
   (ligado à rolagem, sem transição); com o foco, volta inteiro */
.home-hero__cue {
  pointer-events: auto;
  opacity: calc(1 - var(--look-mix, 0) * 2);
}

.home-hero__cue:focus-visible {
  opacity: 1;
}

/* Lado a lado (≥ 900 ou celular deitado) */
@media (min-width: 900px), (min-width: 560px) and (max-height: 499.98px) and (orientation: landscape) {
  .home-hero {
    padding-top: calc(var(--header-top) + var(--header-h) + 32px);
    padding-bottom: clamp(80px, 11vh, 120px);
  }

  .home-hero__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(28px, 4vw, 64px);
  }

  .home-hero__media {
    order: 0;
  }

  .home-hero__frame {
    max-height: max(160px, calc(100vh - var(--header-top) - var(--header-h) - 160px));
    max-height: max(160px, calc(100svh - var(--header-top) - var(--header-h) - 160px));
  }

  .home-hero__title {
    font-size: clamp(2.5rem, 3.9vw + .5rem, 4.5rem);
  }

  .home-hero__lead {
    font-size: var(--fs-lead);
  }

  /* o reboque fica na coluna da direita: o texto não passa sobre ele */
  .home-scene[data-hero-mode="study"] .home-hero__content::before {
    content: none;
  }

  .home-scene__scene .scene__poster {
    top: var(--home-band-top, 22%);
    left: var(--home-band-left, 52%);
    width: var(--home-band-w, 44%);
    height: var(--home-band-h, 56%);
  }

  /* selo no canto superior direito, sobre a coluna do estudo (na história o
     trilho fica no meio da altura, à direita) */
  .home-scene__badge,
  .home-scene[data-phase="story"] .home-scene__badge {
    top: calc(var(--header-top) + var(--header-h) + 20px);
    right: var(--gutter);
    left: auto;
    max-width: min(30rem, calc(50% - var(--gutter)));
  }

  .home-scene .scene__note,
  .home-scene[data-phase="story"] .scene__note {
    top: calc(var(--header-top) + var(--header-h) + 64px);
    right: var(--gutter);
    left: auto;
    max-width: min(30rem, calc(50% - var(--gutter)));
  }
}

/* Tela baixa deitada (< 500 de altura): herói compacto; o cartão de foto
   sai (o selo e o link "Ver as fotos reais" da história continuam) */
@media (max-height: 499.98px) and (orientation: landscape) {
  .home-hero {
    padding-top: calc(var(--header-top) + var(--header-h) + 16px);
    padding-bottom: 64px;
  }

  .home-hero__title {
    font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  }

  .home-hero__lead {
    max-width: 34ch;
    font-size: 1rem;
  }

  .home-hero__actions .btn--lg {
    min-height: 48px;
    padding: 10px 20px;
    font-size: .9375rem;
  }

  .home-scene[data-hero-mode="study"] .home-hero__card {
    display: none;
  }
}


/* 1.2 Como escolher -----------------------------------------------------------
   Faixa opaca (styles.css §27.7) que passa sobre o palco preso entre o herói
   e a história; a câmera muda de pose atrás dela. */
.home-howto {
  position: relative;
  background-color: var(--paper);
  pointer-events: auto;
}

.home-howto__link {
  justify-self: start;
  font-size: .875rem;
}


/* 1.3 Capítulos ("Um olhar mais de perto") -----------------------------------
   Cartões de vidro escuro de styles.css (.story__intro / .story__chapter):
   embaixo no celular, à esquerda e centrados no desktop. Cada um numa linha
   de 100svh; o index.js usa o centro da linha para mover a câmera. */
.home-story {
  position: relative;
}

.home-story__blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.home-story__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
}

.home-story .story__intro .link-arrow,
.home-story__start {
  justify-self: start;
}

/* Aviso de representação virtual (.note) no vidro escuro: --fg-3 do cartão
   (--stage-muted, ≥ 5,9:1) e filete --accent-fg (claro sobre o escuro) */
.home-story__study {
  margin: 2px 0 0;
}

/* "Pular para os modelos" (→ #aplicacoes): visível no cartão de abertura,
   antes do link das fotos; pula a rolagem guiada e o trilho 01–05 */
.home-story__skip {
  margin-top: 2px;
}

/* Foco programático (trilho, botão "Carregar o 3D"): anel no cartão */
.home-story .story__intro:focus-visible,
.home-story .story__chapter:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 4px;
}

/* Celular deitado: cartões à esquerda e centrados; trilho vertical à direita;
   selo e aviso embaixo, à esquerda (o trilho ocupa a direita) */
@media (max-width: 899.98px) and (max-height: 499.98px) and (orientation: landscape) {
  .home-story .story__chapter,
  .home-story .story__intro {
    align-self: center;
    justify-self: start;
    max-width: min(26rem, 56%);
    margin-bottom: 0;
  }

  .home-story .story__intro {
    max-width: min(30rem, 60%);
  }

  .home-scene__rail {
    top: calc(50% + (var(--header-top) + var(--header-h)) / 2);
    right: var(--gutter);
    left: auto;
    max-width: none;
    transform: translateY(-50%);
  }

  .home-scene__rail .story__rail-list {
    flex-direction: column;
    align-items: flex-end;
    border-radius: 26px;
  }

  .home-scene[data-phase="story"] .home-scene__badge {
    top: auto;
    right: auto;
    bottom: 12px;
    left: var(--gutter);
  }

  .home-scene[data-phase="story"] .scene__note {
    top: auto;
    right: auto;
    bottom: 52px;
    left: var(--gutter);
  }
}

/* Tela baixa (< 500 de altura) a partir de 600 px de largura: o trilho em
   coluna, centrado na altura, desce até o canto do botão flutuante de
   WhatsApp (.wa-float, styles.css §07.1: 56 px a 24 px da borda, acima da
   cena) e o 05 ficaria coberto, inclusive com o foco (WCAG 2.4.11). O trilho
   passa para a esquerda do botão, com 12 px de folga, em qualquer fase (o
   foco pelo teclado também o mostra no herói). Abaixo de 600 px de largura
   não há botão flutuante: a barra do celular some abaixo de 480 de altura
   (styles.css §07.2) e, de 480 a 500, fica abaixo do fim do trilho. */
@media (min-width: 600px) and (max-height: 499.98px) {
  html.has-contact-dock .home-scene__rail {
    right: 92px;                  /* 24 + 56 + 12 */
    right: calc(max(24px, env(safe-area-inset-right, 0px)) + 68px);
  }
}


/* 1.4 Entrada e saída dos cartões ---------------------------------------------
   Opacidade e deslocamento vêm da distância do centro da LINHA (100svh) ao
   centro da tela, d (fração da altura da linha): inteiro até |d| = 0,22;
   some por completo em |d| = 0,48; abaixo do centro entra subindo, acima
   sai subindo. Com animation-timeline (linha do tempo de vista nomeada da
   linha), o navegador anima sozinho, fora da thread principal; sem ela, o
   index.js escreve --p (−1 … 1) no cartão no mesmo quadro da câmera. Os
   quadros-chave usam os mesmos limites: no intervalo "cover" da linha
   (altura ≈ tela), progresso = 0,5 − d/2 → 26 %, 39 %, 61 % e 74 %.
   Movimento reduzido: nenhum deslocamento (cartões sempre inteiros).
   O foco dentro de um cartão o mostra inteiro (o !important vence a
   animação). */
.home-story .story__intro,
.home-story .story__chapter {
  --card-travel: clamp(24px, 5vh, 48px);
}

@keyframes home-card {
  0%,
  26% {
    opacity: 0;
    transform: translate3d(0, var(--card-travel, 40px), 0);
  }

  39%,
  61% {
    opacity: 1;
    transform: none;
  }

  74%,
  100% {
    opacity: 0;
    transform: translate3d(0, calc(var(--card-travel, 40px) * -1), 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .home-scene.is-cards-js .story__intro,
  html.js .home-scene.is-cards-js .story__chapter {
    opacity: calc(1 - max(var(--p, 0), -1 * var(--p, 0)));
    transform: translate3d(0, calc(var(--p, 0) * var(--card-travel, 40px)), 0);
  }
}

@supports (animation-timeline: view()) and (view-timeline-name: --home-row) {
  .home-story__row {
    view-timeline: --home-row block;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* animation-timeline depois do atalho animation (que o reinicia) */
    html.js .home-story .story__intro,
    html.js .home-story .story__chapter {
      animation: home-card linear both;
      animation-duration: auto;
      animation-timeline: --home-row;
      animation-range: cover 0% cover 100%;
    }
  }
}

.home-story .story__intro:focus-within,
.home-story .story__chapter:focus-within {
  opacity: 1 !important;
  transform: none !important;
}


/* --------------------------------------------------------------------------
   2 O que você leva? (cartões de aplicação + painel do modelo)
   Painel: foto real + 3D (7/12) e informações (5/12) ≥ 900; no celular, a
   mídia, o nome, as chamadas e "Visto nas fotos", nessa ordem.
   -------------------------------------------------------------------------- */
.home-pick__cards {
  margin-bottom: clamp(20px, 3vw, 36px);
}

/* Estado do cartão: a forma longa ("Aplicação selecionada"); a curta só nos
   cartões compactos (< 600) */
.home-pick__state-short {
  display: none;
}

/* < 600: os quatro cartões em 2 × 2 compactos (foto, nome e estado), para o
   painel ficar perto e a troca de aplicação não exigir subir a página. O
   número/contagem e a frase saem da vista (a contagem continua no nome
   acessível); o cartão inteiro continua sendo o alvo (≥ 44 px). */
@media (max-width: 599.98px) {
  .home-pick__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-pick__cards .app-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "media"
      "name"
      "state";
    column-gap: 0;
    padding: 10px;
  }

  .home-pick__cards .app-card__top,
  .home-pick__cards .app-card__text {
    display: none;
  }

  .home-pick__cards .app-card__media {
    align-self: stretch;
    aspect-ratio: 16 / 10;
  }

  .home-pick__cards .app-card__name {
    margin-top: 8px;
    font-size: 1rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .home-pick__cards .app-card__state {
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    font-size: .8125rem;
  }

  .home-pick__cards .app-card__state-on {
    gap: 6px;
  }

  .home-pick__cards .home-pick__state-long {
    display: none;
  }

  .home-pick__cards .home-pick__state-short {
    display: inline;
  }
}

.home-pick__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(14px, 2.5vw, 32px);
  background-color: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  scroll-margin-top: calc(var(--header-top) + var(--header-h) + 16px);
}

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

/* Mídia do painel: o par foto real + 3D (.media-pair, styles.css §07.6;
   docs/FOTO-3D.md §1) no palco [data-pick-stage], o aviso de representação
   virtual (só com o 3D grande) e o botão "Ver as N fotos reais" (lightbox).
   Sem o componente, a galeria da v2.4 no mesmo palco. */
.home-pick__media {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.home-pick__stage {
  min-width: 0;
}

/* copy3d.disclaimer sob a mídia quando o 3D é a vista grande (.note:
   --fg-3 sobre o painel ≥ 5,6:1) */
.home-pick__disclaimer {
  max-width: none;
  margin: 0;
}

/* Moldura fixa 3:2: as duas vistas do par se sobrepõem nela, então trocar
   de aplicação (fotos de proporções diferentes) ou de vista (foto ↔ 3D) não
   faz a página pular. A foto aparece inteira (contain) sobre branco; o
   pôster 3D ocupa a moldura toda. */
.home-pick__pair .media-pair__main {
  position: relative;
  aspect-ratio: 3 / 2;
}

.home-pick__pair .media-pair__view {
  position: absolute;
  inset: 0;
}

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

/* v2.6: o 3D ao vivo (.scene.scene--fill.media-pair__scene) ocupa a vista,
   com os cantos da moldura (o .scene corta o canvas) */
.home-pick__pair .media-pair__scene {
  border-radius: var(--media-pair-radius, var(--radius-lg));
}

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

.home-pick__pair .media-pair__view :is(.photo__img, .photo > img, .photo__open > img) {
  aspect-ratio: auto;
  background-color: var(--paper-0);
  object-fit: contain;
}

/* A foto do par amplia (botão .photo__open na moldura toda): a miniatura e a
   pílula "Ver o produto" ficam acima dele, para clique e foco chegarem a
   elas */
.home-pick__pair .media-pair__pip,
.home-pick__pair .media-pair__cta {
  z-index: 5;
}

/* Cantos (v2.6): inferior esquerdo = miniatura; inferior direito = pílula
   "Ver o produto" (nas duas vistas); a lupa da foto ampliável sobe para o
   canto superior direito (o selo "Fotografia real EVM" fica à esquerda) */
.home-pick__pair .photo__open::before {
  top: 12px;
  bottom: auto;
}

.home-pick__pair .photo__open::after {
  top: 22px;
  bottom: auto;
}

.home-pick__photos {
  margin: 0;
}

/* Reserva (site.js sem o .media-pair): a galeria da v2.4, moldura fixa 3:2
   (a troca de foto não pula); foto inteira sobre branco */
.home-pick__gallery {
  --gallery-ratio: 3 / 2;
  min-width: 0;
}

.home-pick__gallery .photo__img,
.home-pick__gallery .photo > img {
  background-color: var(--paper-0);
}

.home-pick__info {
  container-type: inline-size;
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.home-pick__name {
  color: var(--brand-navy);
  font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.home-pick__summary {
  max-width: 52ch;
  color: var(--ink-2);
}

/* Dados-chave (ficha validada) ou o selo "sob consulta", logo acima das
   chamadas (DESIGN-SYSTEM §8.10) */
.home-pick__specs .keyspecs,
.home-pick__specs .sob-consulta {
  margin: 0;
}

/* Nota das fotos, depois de "Visto nas fotos" */
.home-pick__info .home-pick__note {
  margin-top: 0;
}

/* Chamadas (v2.6): "Ver o produto" (.btn--primary, marinho sólido) e
   "Perguntar no WhatsApp" (verde) */
.home-pick__actions {
  gap: 10px;
  margin-top: 4px;
}

/* Celular: os dois botões dividem a linha (ou cada um a sua, se não couber) */
@media (max-width: 599.98px) {
  .home-pick__actions .btn {
    flex: 1 1 auto;
  }
}

/* "Planejar meu reboque": ação de texto abaixo dos botões */
.home-pick__plan {
  margin-top: -8px;
}

.home-pick__more {
  color: var(--ink-2);
  font-size: .9375rem;
}


/* --------------------------------------------------------------------------
   3 Conheça de perto (#fotos): todas as fotos reais, filtro e lightbox
   Grade 2 colunas (celular) · 3 (≥ 900) · 4 (≥ 1200); moldura 4:3 com a foto
   inteira (contain) sobre branco; o botão .photo__open abre o lightbox.
   -------------------------------------------------------------------------- */
.home-photos__meta {
  margin-top: 8px;
}

.home-photos__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px) clamp(10px, 1.6vw, 24px);
  margin: clamp(16px, 2.5vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

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

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

.home-photos__item {
  min-width: 0;
}

.home-photos__photo {
  --photo-radius: var(--radius);
}

.home-photos__photo .photo__img {
  background-color: var(--paper-0);
}

.home-photos__photo .photo__caption {
  margin-top: 8px;
}


/* --------------------------------------------------------------------------
   4 Feito na nossa fábrica (faixa compacta, só texto)
   Três etapas de EVM.process (index.js); a página de fabricação tem o resto.
   -------------------------------------------------------------------------- */
.home-fab__step {
  padding-top: 16px;
}


/* --------------------------------------------------------------------------
   5 FAQ
   -------------------------------------------------------------------------- */
.home-faq__head {
  display: grid;
  gap: 14px;
}

.home-faq__head h2 {
  max-width: 18ch;
}


/* --------------------------------------------------------------------------
   6 Faixa de chamada (WhatsApp e telefone)
   Cores pelos tokens escuros da .callout (styles.css §21). ≥ 900: os dois
   botões empilhados na coluna da direita, com a mesma largura (lado a lado
   eles apertariam o texto entre 900 e 1100 px).
   -------------------------------------------------------------------------- */
.home-callout__hours {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .04em;
}

@media (min-width: 900px) {
  .home-callout__actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* --------------------------------------------------------------------------
   7 Movimento reduzido, impressão
   -------------------------------------------------------------------------- */
/* Movimento reduzido: trilho, pontos e selo trocam na hora; cartões sem
   animação nem deslocamento (o index.js também para de escrever --p); a
   câmera corta para a parada mais próxima e a aparência vira de uma vez
   (setPathProgress / setLookMix com smooth: false no index.js) */
@media (prefers-reduced-motion: reduce) {
  .home-scene__rail,
  .home-scene__rail .story__rail-link,
  .home-scene .scene__hotspots,
  .home-scene:not([data-phase="story"]) .scene__hotspots,
  .home-scene__badge,
  .home-hero__card {
    transition: none;
  }

  .home-story .story__intro,
  .home-story .story__chapter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media print {
  .home-scene {
    background: #fff !important;
  }

  .home-scene::before {
    display: none !important;
  }

  .home-story .story__intro,
  .home-story .story__chapter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* O palco 3D não imprime; a foto real do herói, sim */
  .home-scene__stage,
  .home-scene__overlay,
  .home-hero__toggle,
  .home-hero__card {
    display: none !important;
  }

  .home-scene__flow {
    margin-top: 0 !important;
  }

  .home-hero {
    min-height: 0 !important;
    padding: 0 0 6mm !important;
    background: none !important;
  }

  .home-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .home-hero__media {
    order: 0;
  }

  .home-hero__photo {
    display: block !important;
  }

  .home-hero__caption--photo {
    display: block !important;
  }

  /* o 3D não imprime: sem a legenda nem o aviso dele (nem o atalho da
     história, que só serve na tela) */
  .home-hero__caption--study,
  .home-pick__disclaimer,
  .home-story__skip {
    display: none !important;
  }

  .home-hero__content::before {
    display: none !important;
  }

  .home-howto {
    background: none !important;
  }

  .home-story__row {
    display: block;
    min-height: 0 !important;
    margin-bottom: 4mm;
  }

  .home-pick__panel {
    background: #fff !important;
    border: 1px solid #999;
  }

  .home-photos__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}