:root {
  --bg: #0a0a0a;
  --fg: #ededed;
  --muted: #8c8c8c;
  --dim: #7a7a7a; /* palavras ainda apagadas da V1: 4.6:1 */
  --line: rgba(255, 255, 255, 0.1);
  --pad: clamp(16px, 4vw, 48px);
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
video { display: block; width: 100%; height: 100%; object-fit: cover; background: #111; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* Player em tela cheia */
.player { border: 0; padding: 0; margin: 0; background: transparent; width: 100vw; height: 100dvh; max-width: none; max-height: none; color: var(--fg); }
.player[open] { display: grid; place-items: center; }
.player::backdrop { background: rgba(0, 0, 0, 0.98); }
.player video { width: auto; height: auto; max-width: min(92vw, 1400px); max-height: 80dvh; object-fit: contain; background: #000; }
.player iframe { border: 0; background: #000; width: min(92vw, 1400px, 142dvh); aspect-ratio: 16 / 9; }
.player iframe.vertical { width: min(92vw, 45dvh); aspect-ratio: 9 / 16; }
.player iframe.insta { width: min(92vw, 400px); height: min(82dvh, 620px); aspect-ratio: auto; background: #fff; border-radius: 8px; }

/* Capas (imagem) e cartaz para vídeos sem capa */
.quadro > img, .tela > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cartaz { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: clamp(14px, 2vw, 22px); background: #181818; color: var(--fg); }
.cartaz strong { font-size: clamp(34px, 4vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; margin-top: 18%; }
.cartaz span { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.cartaz p { margin-top: 14px; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cartaz .selinho { margin-top: auto; color: var(--fg); text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }

.player .fechar { position: fixed; top: 16px; right: 16px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; color: var(--fg); cursor: pointer; }
.player .legenda { position: fixed; left: var(--pad); bottom: 20px; }

/* Só do protótipo */
.versoes { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 50; display: flex; gap: 2px; padding: 4px; background: rgba(18, 18, 18, 0.94); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; font: 12px var(--mono); }
.versoes a { padding: 7px 11px; border-radius: 999px; color: #c8c8c8; white-space: nowrap; }
.versoes a[aria-current] { background: var(--fg); color: var(--bg); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
