/* Viatura Ronda — seção e visualizador da viatura do Projeto BASTA!
   Arquivo compartilhado entre basta.app.br (Gob-main) e o site do Instituto BASTA!.
   Cada site ajusta cores e fonte pelas variáveis --vtr-* (veja o fim de cada folha de estilo do site). */

/* :where() deixa os valores padrão sem prioridade, para o site sobrescrever em qualquer ordem */
:where(.vtr) {
  --vtr-ink: #280163;
  --vtr-text: #5a5a6a;
  --vtr-accent: #fc1c85;
  --vtr-navy: #1b1060;
  --vtr-stage: #f3eefb;
  --vtr-card: #ffffff;
  --vtr-line: #e4dcef;
  --vtr-radius: 18px;
}
.vtr {
  position: relative;
  padding-block: clamp(48px, 5vw, 88px);
  background: linear-gradient(180deg, #fff 0%, var(--vtr-stage) 100%);
  color: var(--vtr-text);
  overflow-x: clip;
}

.vtr__inner { width: min(calc(100% - 32px), 1240px); margin-inline: auto; }

.vtr__head { max-width: 820px; margin: 0 auto clamp(20px, 3vw, 36px); text-align: center; }
.vtr__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding: 6px 14px; border-radius: 999px;
  background: var(--vtr-navy); color: #fff;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.vtr__eyebrow::before {
  content: ""; width: 26px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #ff2b3d 0 48%, transparent 48% 52%, #2b6bff 52%);
  box-shadow: 0 0 10px rgba(255, 43, 61, .6), 0 0 10px rgba(43, 107, 255, .6);
}
.vtr__title { margin: 0; color: var(--vtr-ink); font-size: clamp(1.7rem, 1.1rem + 2vw, 2.75rem); font-weight: 800; line-height: 1.15; }
.vtr__title em { font-style: normal; color: var(--vtr-accent); }
.vtr__lead { margin: 14px 0 0; font-size: clamp(1rem, .9rem + .35vw, 1.2rem); line-height: 1.6; }

/* ---------- Visualizador ---------- */
.vtr-viewer { position: relative; }

.vtr-stage {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: var(--vtr-radius);
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, #fff 0%, #fff 35%, var(--vtr-stage) 100%);
  box-shadow: inset 0 0 0 1px var(--vtr-line);
  perspective: 1400px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  outline: none;
}
.vtr-stage:focus-visible { box-shadow: inset 0 0 0 1px var(--vtr-line), 0 0 0 3px var(--vtr-accent); }
.vtr-stage.is-dragging { cursor: grabbing; }

/* sombra no chão */
.vtr-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 7%;
  width: 70%; height: 9%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(27, 16, 96, .28) 0%, rgba(27, 16, 96, 0) 70%);
  pointer-events: none;
}

.vtr-view {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;          /* o fundo branco das fotos some sobre o palco claro */
  pointer-events: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
  z-index: 1;
}
.vtr-view[data-vtr-view="90"] { width: 90%; height: auto; }
.vtr-view[data-vtr-view="0"],
.vtr-view[data-vtr-view="180"] { height: 86%; width: auto; }
/* antes do script rodar, só a lateral aparece */
.vtr-view:not([data-vtr-view="90"]) { opacity: 0; }

.vtr-hint {
  position: absolute; left: 50%; bottom: 12px; z-index: 300;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(27, 16, 96, .82); color: #fff;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s ease;
}
.vtr-hint svg { width: 18px; height: 18px; }
.vtr-hint.is-hidden { opacity: 0; }

.vtr-controls {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 16px;
}
.vtr-controls button {
  min-width: 112px; padding: 10px 18px;
  border: 1.5px solid var(--vtr-navy); border-radius: 999px;
  background: #fff; color: var(--vtr-navy);
  font: inherit; font-size: .92rem; font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.vtr-controls button:hover { border-color: var(--vtr-accent); color: var(--vtr-accent); }
.vtr-controls button[aria-pressed="true"] { background: var(--vtr-navy); border-color: var(--vtr-navy); color: #fff; }
.vtr-controls button:focus-visible { outline: 3px solid var(--vtr-accent); outline-offset: 2px; }

.vtr-caption { min-height: 3em; margin: 12px auto 0; max-width: 640px; text-align: center; font-size: .98rem; line-height: 1.5; }
.vtr-caption[hidden] { display: none; }

/* modo 3D (.glb) */
.vtr--model .vtr-stage { cursor: auto; }
.vtr--model .vtr-controls,
.vtr--model .vtr-caption,
.vtr--model .vtr-hint { display: none; }
.vtr-model { display: block; width: 100%; height: 100%; --poster-color: transparent; }

/* ---------- Destaques ---------- */
.vtr-features {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none;
}
.vtr-feature {
  padding: 22px 20px; border-radius: var(--vtr-radius);
  background: var(--vtr-card); box-shadow: 0 6px 22px rgba(40, 1, 99, .08);
  border-top: 4px solid var(--vtr-accent);
  text-align: left;
}
.vtr-feature:nth-child(even) { border-top-color: var(--vtr-navy); }
.vtr-feature h3 { margin: 0 0 8px; color: var(--vtr-ink); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.vtr-feature p { margin: 0; font-size: .95rem; line-height: 1.55; }

.vtr__note { margin: 20px 0 0; text-align: center; font-size: .82rem; opacity: .8; }

@media (max-width: 1000px) {
  .vtr-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .vtr-stage { aspect-ratio: 16 / 10; }
  .vtr-view[data-vtr-view="90"] { width: 96%; }
  .vtr-view[data-vtr-view="0"],
  .vtr-view[data-vtr-view="180"] { height: 80%; }
  .vtr-hint { bottom: 8px; padding: 5px 11px; font-size: .75rem; }
  .vtr-controls button { min-width: 0; flex: 1 1 0; padding-inline: 10px; }
  .vtr-features { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vtr-hint { transition: none; }
}