/* ============================================================
   HISTÓRIA r3 — fita contínua de 12 frames fechados
   Layout lido do PDF do marketing (build/historia_frames.py → data/historia.json).
   Unidade: design-px ÷ 10 = rem. O canvas é 1920×1080; o painel escuro ocupa
   582 à esquerda e cada frame, os 1338 restantes.
   ============================================================ */

.hist {
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--cream);
  color: var(--hist-dark);
  overflow: hidden;
  --hist-dark: #2C2827;
  --hist-panel: 58.2rem;             /* sobrescrito pelo JSON (meta.panelWidth) */
}

/* ---------- pista ---------- */
.hist__scroll {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.hist__scroll::-webkit-scrollbar { display: none; }
.hist.is-dragging .hist__scroll { cursor: grabbing; }

.hist__track {
  position: relative;
  height: 108rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- itens ---------- */
.hist-i,
.hist-t,
.hist-card,
.hist-line,
.hist-rule {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.hist-i {
  overflow: hidden;
  background: rgba(44, 40, 39, 0.06);
  padding: 0;
  border: none;
}
.hist-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-line { background: var(--hist-dark); opacity: 1; }
.hist-rule { height: 1.5px; background: var(--accent); }

/* Vídeo: roda no lugar da composição, sem play e SEM INTERAÇÃO (não é clicável,
   não pega arrasto — o gesto pertence à fita). */
.hist-v {
  object-fit: cover;
  pointer-events: none;
  border: none;
  background: rgba(44, 40, 39, 0.06);
}
.hist-v::-webkit-media-controls { display: none !important; }

/* ---------- tipografia (corpos e entrelinhas vêm do JSON) ---------- */
.hist-t { white-space: pre; font-family: var(--font-display); color: var(--hist-dark); }
.hist-t .l { display: block; }
.hist-t strong { font-weight: 600; }
.hist-t em { font-style: italic; font-weight: inherit; }

/* Papéis: o PDF novo usa só Mundial (Bold vira Demibold — a licença não traz
   Bold upright; pendência registrada no CLAUDE.md). */
.hist-t--covertitle { font-weight: 600; letter-spacing: 0.005em; }
.hist-t--year { font-weight: 600; letter-spacing: 0.01em; }
.hist-t--sectitle { font-weight: 600; letter-spacing: 0.01em; }
.hist-t--marco { font-weight: 600; }
.hist-t--capsbody,
.hist-t--genlabel { font-weight: 600; }
.hist-t--coverbody { font-weight: 300; }
.hist-t--body { font-weight: 100; }
.hist-t--body strong { font-weight: 600; }
.hist-t--caption,
.hist-t--credit,
.hist-t--genname,
.hist-t--genrole { font-weight: 300; }
.hist-t--genname strong { font-weight: 600; }

.hist-t.is-dark { color: var(--hist-dark); }
.hist-t.is-light { color: var(--cream); }
.hist-t.is-olive { color: var(--olive); }

/* ---------- tarjas/cards escuros ---------- */
.hist-card { background: var(--hist-dark); }
.hist-card__t {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--cream);
  white-space: pre;
}
.hist-card__t .l { display: block; }
.hist-card__t--year,
.hist-card__t--marco,
.hist-card__t--sectitle { font-weight: 600; }
.hist-card__btn {
  position: absolute;
  background: var(--cream);
  color: var(--hist-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  transition: background var(--t-touch) ease;
}
.hist-card__btn:active { background: #cfc9b8; }

/* ---------- painel fixo ---------- */
.hist__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--hist-panel);
  background: var(--hist-dark);
  z-index: 20;
  overflow: hidden;
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hist__panel .hist-t.is-fixed { opacity: 1; color: var(--cream); }
.hist__panel .hist-t--covertitle { font-size: 5.63rem; }
/* Painel reduzido (frames 2+): só o título e a frase de apoio */
.hist__panel .hist-t {
  transition: opacity 320ms ease, font-size 480ms cubic-bezier(0.22, 1, 0.36, 1),
              left 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hist.is-narrow .hist__panel .hist-t--covertitle {
  font-size: 3.4rem !important;   /* vence o inline vindo do JSON */
  left: 3.2rem !important;
}
.hist.is-narrow .hist__panel .hist-t.is-fixed:not(.hist-t--covertitle) {
  opacity: 0;
  pointer-events: none;
}
.hist__panel-short {
  position: absolute;
  left: 3.2rem;
  right: 3.2rem;
  top: 50rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 380ms ease;
}
.hist.is-narrow .hist__panel-short { opacity: 0.9; }

/* ---------- chrome ---------- */
.hist__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 40;
  width: 15.5rem;
  height: 6.5rem;
  background: var(--hist-dark);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: none;
  transition: background var(--t-touch) ease;
}
.hist__close:active { background: #3a3634; }
.hist__close svg { width: 1.8rem; height: 1.8rem; }

.hist__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: none;
  background: var(--hist-dark);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-touch) ease, opacity var(--t-touch) ease,
              transform var(--t-touch) ease;
}
.hist__nav svg { width: 2.4rem; height: 2.4rem; }
.hist__nav:active { transform: translateY(-50%) scale(0.94); }
.hist__nav--next { right: 3.4rem; }
.hist__nav--prev { left: calc(var(--hist-panel) + 3.4rem); }
.hist__nav[disabled] { opacity: 0; pointer-events: none; }

/* ---------- barra de progresso ---------- */
.hist__prog {
  position: absolute;
  left: calc(var(--hist-panel) + 14.9rem);
  right: 10rem;
  bottom: 8.7rem;
  height: 0.8rem;
  z-index: 30;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(var(--hist-dark), var(--hist-dark)) center/100% 1px no-repeat;
}
/* o segmento percorre o trilho: left 0% → 100% menos a própria largura */
.hist__prog::before {          /* área de toque confortável (48px lógicos) */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -2.2rem; bottom: -2.2rem;
}
.hist__prog-seg {
  position: absolute;
  top: 0;
  left: 0;
  width: 23.8rem;
  max-width: 100%;
  height: 0.8rem;
  background: var(--hist-dark);
  transition: margin-left 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- contato: ao lado do FECHAR, formando a barra do topo ---------- */
.hist__contact {
  position: absolute;
  top: 0;
  right: 15.5rem;                /* largura do FECHAR */
  height: 6.5rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0 2.8rem;
  /* cores opostas ao FECHAR: transparente, texto e borda chumbo/bronze */
  color: var(--hist-dark);
  background: transparent;
  border: 1px solid rgba(44, 40, 39, 0.38);
  border-right: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-touch) ease;
}
.hist__contact:hover { border-color: var(--accent); }
.hist__contact:active { background: rgba(44, 40, 39, 0.08); }
.hist__contact .icon { flex: none; color: var(--accent); }


/* ---------- arraste: discreto, canto direito, some ao rolar ---------- */
.hist__hint {
  position: absolute;
  right: 3.4rem;
  bottom: 3.6rem;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(44, 40, 39, 0.55);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  transition: opacity 500ms ease;
}
.hist__hint.is-gone { opacity: 0; pointer-events: none; }
.hist__hint-arrows {
  display: inline-flex;
  color: var(--accent);
  animation: hist-nudge 2.4s ease-in-out infinite;
}
.hist__hint-arrows svg:last-child { margin-left: -0.9rem; opacity: 0.5; }
@keyframes hist-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.7rem); }
}

/* ---------- chrome da experiência ---------- */
.hist__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 40;
  width: 15.5rem;
  height: 6.5rem;
  background: var(--hist-dark);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: none;
  transition: background var(--t-touch) ease;
}
.hist__close:active { background: #3a3634; }
.hist__close svg { width: 1.8rem; height: 1.8rem; }

.hist__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: none;
  background: var(--hist-dark);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-touch) ease, opacity var(--t-touch) ease,
              transform var(--t-touch) ease, left 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hist__nav svg { width: 2.4rem; height: 2.4rem; }
.hist__nav:active { transform: translateY(-50%) scale(0.94); }
.hist__nav--next { right: 3.4rem; }
.hist__nav--prev { left: calc(var(--hist-panel) + 3.4rem); }
.hist__nav[disabled] { opacity: 0; pointer-events: none; }

/* ---------- barra de progresso ---------- */
.hist__prog {
  position: absolute;
  left: calc(var(--hist-panel) + 14.9rem);
  right: 10rem;
  bottom: 8.7rem;
  height: 0.8rem;
  z-index: 30;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(var(--hist-dark), var(--hist-dark)) center/100% 1px no-repeat;
  transition: left 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hist__prog::before {          /* área de toque confortável */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -2.2rem; bottom: -2.2rem;
}
.hist__prog-seg {
  position: absolute;
  top: 0;
  left: 0;
  width: 23.8rem;
  max-width: 100%;
  height: 0.8rem;
  background: var(--hist-dark);
  transition: margin-left 520ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* Tela imersiva: escondemos a barra de topo e o rodapé — NUNCA o #chrome
   inteiro, que é o container flex onde as telas montam (some tudo). O FAB já
   é ocultado pelo widgets/contact.js na História. */
.chrome[data-screen="historia"] .chrome__top,
.chrome[data-screen="historia"] .chrome__foot { display: none !important; }