/* gate.css — portada común de los vídeos (teaser, apertura, Mov. A) */
@font-face { font-family: 'Russo One'; src: url('fonts/RussoOne.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'VT323'; src: url('fonts/VT323.ttf') format('truetype'); font-display: swap; }
:root {
  --bg: #06040e; --ink: #a0f8e8; --dim: #7c84a8; --amber: #ffb86a; --amber-d: #c46a10;
}
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden;
  font-family: 'VT323', ui-monospace, monospace; color: var(--ink); }
#gate { position: fixed; inset: 0; display: flex; flex-direction: column; gap: clamp(14px, 3vmin, 26px);
  align-items: center; justify-content: center; text-align: center; padding: 20px; box-sizing: border-box; }
/* póster pixel-art de fondo, oscurecido */
#gate { isolation: isolate; }
#gate .bg { position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat; image-rendering: pixelated;
  filter: brightness(.38) saturate(1.1); }
#gate::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(6,4,14,.15) 0%, rgba(6,4,14,.85) 75%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px); }
#gate .t { font-family: 'Russo One', sans-serif; font-size: clamp(26px, 7.5vmin, 64px); line-height: 1.05; padding-top: .15em;
  letter-spacing: .04em; margin: 0;
  background: linear-gradient(180deg, #ffe7a8 0%, var(--amber) 45%, var(--amber-d) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px rgba(255,160,60,.35)); }
#gate .t small { display: block; font-size: .5em; letter-spacing: .08em; margin-top: .25em; }
#gate .k { font-size: clamp(18px, 3.2vmin, 26px); letter-spacing: .2em; color: var(--ink); margin: 0; }
#gate .play { width: 88px; height: 88px; border: 3px solid rgba(160,248,232,.85); border-radius: 50%;
  background: rgba(6,4,14,.45); color: inherit; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; animation: pulse 2.4s ease-in-out infinite; }
#gate .play:hover, #gate .play:focus-visible { background: rgba(160,248,232,.15); outline: none;
  box-shadow: 0 0 0 4px rgba(160,248,232,.25); }
#gate .play svg { width: 36px; height: 36px; fill: var(--ink); margin-left: 5px; }
#gate .s { font-size: clamp(16px, 2.6vmin, 20px); letter-spacing: .18em; color: var(--dim); margin: 0; }
#gate nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: clamp(17px, 2.6vmin, 21px); }
#gate nav a { color: var(--dim); text-decoration: none; letter-spacing: .12em; padding: 2px 6px; border: 1px solid transparent; }
#gate nav a:hover, #gate nav a:focus-visible { color: var(--ink); border-color: rgba(160,248,232,.4); outline: none; }
#gate nav a[aria-current] { color: var(--amber); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { #gate .play { animation: none; } }
video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; }
.hidden { display: none !important; }