/* Tela inicial: abertura, vitrine, 42 anos, linhas e contato.
   Mesmo desenho do protótipo, agora só com tokens. */

:root {
  --topo: calc(var(--nav-height) + 1px);
}

/* ---------------- abertura ---------------- */
.abertura > .w {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  padding-block: 72px 56px;
}
.abertura-texto {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.abertura h1 {
  font-size: clamp(48px, 7.6vw, 118px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}
.abertura h1 span {
  display: block;
  color: var(--color-text-muted);
}
.abertura .lead {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--color-text-muted);
  /* era 40ch: "ch" é a largura do zero da fonte em uso, que muda entre a
     reserva e a Geist e fazia o parágrafo quebrar em outra linha na troca.
     Em "em" a medida é a mesma nas duas (zero da Geist = 0,663em). */
  max-width: 26.5em;
}
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mira {
  position: relative;
  padding: 28px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mira::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-glow), transparent);
}
.lanc-palco {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 7;
  max-height: min(74vh, 640px);
}
.lanc {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s;
}
.lanc.ativo {
  opacity: 1;
  pointer-events: auto;
}
.lanc img {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-height: 0;
  height: 0;
  width: 100%;
  max-width: 520px;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px var(--color-shadow));
  transform: translateY(14px) scale(0.97);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.lanc.ativo img {
  transform: none;
}
.lanc figcaption {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  width: 100%;
}
.lanc-pontos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 100%;
}
/* cada ponto é um alvo de toque de 44 x 44 px; o traço visível fica no meio */
.lanc-pontos button:not(.lanc-pausa) {
  flex: 0 1 44px;
  min-width: 0;
  height: 44px;
  position: relative;
}
.lanc-pontos button:not(.lanc-pausa)::before {
  content: "";
  position: absolute;
  inset: 21px 5px;
  background: var(--color-border);
  transition: background-color 0.3s;
}
.lanc-pontos button.ativo::before {
  background: var(--color-accent);
}

/* Botão de pausa (rodada v3): no fluxo, na mesma linha dos pontos e antes deles,
   para nunca cobrir um ponto, de 320 px para cima. Já vem no HTML; sem script ou
   com "movimento reduzido" não há troca automática e ele não aparece. */
.lanc-pausa {
  position: relative;
  z-index: 1;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: 6px;
  display: none;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text);
}
.lanc-pausa:hover {
  box-shadow: inset 0 0 0 1px var(--color-text);
}
/* duas barras: pausar */
.lanc-pausa::before {
  content: "";
  box-sizing: border-box;
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}
/* triângulo: retomar */
.lanc-pausa[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-block: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}

@media (max-width: 900px) {
  .abertura > .w {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 48px 40px;
    gap: 32px;
  }
  .lanc-palco {
    max-width: 420px;
  }
}
/* celular estreito: a linha da pausa e dos pontos usa também o recuo da moldura,
   para os seis alvos de 44 px caberem lado a lado a partir de 320 px */
@media (max-width: 480px) {
  .lanc-pontos {
    align-self: stretch;
    max-width: none;
    margin-inline: -28px;
  }
}

/* Link "Pular os destaques" (criado por home.js): só aparece com foco e
   fica sobre o topo da vitrine, sem ocupar espaço. */
.vit-pular {
  position: absolute;
  z-index: 5;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vit-pular:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  margin: var(--space-3) 0 0 var(--gutter-left);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-surface);
  text-decoration: none;
}

/* ---------------- vitrine: versão estática ---------------- */
.vitrine {
  background: var(--color-surface-alt);
  border-block: 1px solid var(--color-border);
  transition: background-color var(--duration-normal);
}
.vit-palco {
  position: relative;
  --ml: max(var(--gutter-left), calc((100% - 1272px) / 2));
  --mr: max(var(--gutter-right), calc((100% - 1272px) / 2));
}
.vit-cab {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--mr) 0 var(--ml);
}
.prod {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 56px var(--mr) 56px var(--ml);
  border-top: 1px solid var(--color-border);
}
.prod:first-of-type {
  border-top: 0;
}
.prod-fantasma {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  font-size: clamp(170px, 34vw, 540px);
  font-weight: var(--weight-semibold);
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: var(--color-surface-sunken);
  white-space: nowrap;
  user-select: none;
  transition: color var(--duration-normal);
}
.prod-fantasma.longo {
  font-size: clamp(110px, 21vw, 330px);
}
.prod-foto {
  position: relative;
  height: min(56vh, 460px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-foto::before {
  content: "";
  position: absolute;
  width: min(70%, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-glow), transparent);
}
.prod-foto img {
  position: relative;
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(100%, 860px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 36px 44px var(--color-shadow));
}
.prod-foto.dupla {
  gap: clamp(16px, 4vw, 64px);
  align-items: flex-end;
}
.prod-foto.dupla img:first-child {
  max-width: min(62%, 640px);
  align-self: center;
}
.prod-foto.dupla img:last-child {
  max-width: 20%;
  max-height: 88%;
}
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .js .vitrine .prod-foto.dupla {
    padding: 0 17% 0 6%;
  }
}
.prod-foto.cena::before {
  display: none;
}
.prod-foto.cena img {
  border-radius: 14px;
  filter: none;
  box-shadow: 0 30px 44px var(--color-shadow);
}
.prod-info {
  position: relative;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.prod-info h2 {
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1;
}
.prod-info h2 span {
  color: var(--color-text-muted);
}
.mais {
  font-size: 15px;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: 6px;
}
.mais:hover {
  text-decoration: underline;
}
.vit-indice,
.vit-conta {
  display: none;
}

/* ---------------- vitrine: versão viva (fixa, troca na rolagem) ----------------
   Vale desde a primeira pintura: a classe "js" entra no <html> antes do CSS e
   o desenho não depende de home.js ter rodado. Antes o script trocava a lista
   pela versão fixa depois da pintura e o conteúdo saltava (CLS).
   Com "movimento reduzido" nada disto se aplica e a vitrine fica em lista. */
@media (prefers-reduced-motion: no-preference) {
  /* até home.js marcar o equipamento em cena, mostra o primeiro */
  .js .vitrine:not(.viva) .prod:first-of-type {
    opacity: 1;
    pointer-events: auto;
  }

  /* Percurso: um terço de tela por equipamento. Com 6 equipamentos são cerca de
     2 telas de rolagem presa mais a do próprio palco, perto de 3 no total
     (antes eram mais de 6). */
  .js .vitrine {
    height: calc(var(--n, 6) * min(33vh, 300px) + min(100vh, 920px) - var(--topo));
  }
  .js .vitrine .vit-palco {
    position: sticky;
    top: calc(var(--topo) + env(safe-area-inset-top, 0px));
    height: calc(min(100vh, 920px) - var(--topo));
    overflow: hidden;
  }
  .js .vitrine .vit-cab {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
  }
  .js .vitrine .prod {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    /* Fora de cena fica só transparente: com visibility: hidden os links
       sumiam do Tab e do leitor de tela. home.js traz o equipamento para a
       cena quando um link dele recebe foco. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s;
  }
  .js .vitrine .prod.ativo {
    opacity: 1;
    pointer-events: auto;
  }
  .js .vitrine .prod-fantasma {
    transform: translate(calc(-50% + (0.5 - var(--q, 0.5)) * 9vw), -50%);
  }
  .js .vitrine .prod-foto {
    position: absolute;
    inset: 9% var(--gutter-right) 21% var(--gutter-left);
    width: auto;
    height: auto;
  }
  .js .vitrine .prod-foto img {
    transform: translateY(70px) scale(0.9);
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
  }
  .js .vitrine .prod.ativo .prod-foto img {
    transform: translateY(calc((0.5 - var(--q, 0.5)) * 26px)) scale(1);
  }
  .js .vitrine .prod-info {
    position: absolute;
    left: var(--ml);
    bottom: 7%;
    max-width: calc(100% - var(--ml) - var(--mr) - 280px);
    transform: translateY(24px);
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1);
  }
  .js .vitrine .prod.ativo .prod-info {
    transform: none;
  }
  .js .vitrine .vit-indice {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: var(--mr);
    bottom: 7%;
    z-index: 2;
    width: 232px;
    border-left: 1px solid var(--color-border);
    counter-reset: ind;
  }
  .vit-indice li {
    counter-increment: ind;
  }
  .vit-indice button {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 6px 0 6px 16px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    text-align: left;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: var(--tracking-dado);
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition:
      color 0.3s,
      border-color 0.3s;
  }
  .vit-indice button::before {
    content: counter(ind, decimal-leading-zero);
  }
  .vit-indice button.ativo {
    color: var(--color-text);
    border-left-color: var(--color-accent);
    box-shadow: inset 1px 0 0 var(--color-accent);
  }
  .vit-indice button:hover {
    color: var(--color-text);
  }
  /* Um só indicador de posição por vez (rodada v3): o índice na tela larga,
     o contador "01 / 06" no celular. Não há barra de progresso. */
  @media (max-width: 720px) {
    .js .vitrine .vit-indice {
      display: none;
    }
    .js .vitrine .vit-conta {
      display: inline;
    }
    .js .vitrine .prod-info {
      max-width: calc(100% - var(--ml) - var(--mr));
    }
    .js .vitrine .prod-foto {
      inset: 13% var(--gutter-right) 30% var(--gutter-left);
    }
    .js .vitrine .prod-fantasma {
      top: 40%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lanc,
  .lanc img {
    transition: none;
  }
  .js .lanc-pausa {
    display: none;
  }
}

/* Prévias do carrossel: a foto é um link para a página (ou cartão) do equipamento */
.lanc-foto {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}
.lanc-foto img {
  flex: none;
  height: 100%;
}
.lanc figcaption .lanc-aviso {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* vitrine: o nome do equipamento é link para a página dele, sem sublinhado
   (mesmo tratamento dos cartões das categorias) */
.prod-info h2 a {
  text-decoration: none;
}
.prod-info h2 a:hover {
  color: var(--color-accent);
}

/* índice da vitrine: nome longo quebra em duas linhas em vez de sair da tela */
@media (min-width: 861px) {
  .js .vitrine .vit-indice {
    width: 264px;
  }
  .vit-indice button {
    white-space: normal;
    line-height: 1.35;
  }
  .vit-indice button::before {
    flex: none;
  }
}

/* pausa do carrossel: só com script e com troca automática */
.js .lanc-pausa {
  display: grid;
}