:root {
  --tab-h: 24px;   /* alto de cada etiqueta */
  --tab-gap: 3px;  /* separación entre etiquetas */
  --pad: clamp(16px, 2vw, 28px);
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body {
  font-family: "Chakra Petch", "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ── VÍDEO a pantalla completa ───────────── */
.stage { position: fixed; inset: 0; overflow: hidden; }
.video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity .3s;
}
.video.fade { opacity: 0; }

/* ── COLUMNA IZQUIERDA ───────────────────── */
.tabs {
  position: fixed; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--tab-gap);
  z-index: 2;
}
.tab {
  --base: 0px;    /* escalón propio de cada etiqueta */
  --shift: 0px;   /* sale o entra según el estado */
  display: flex; align-items: stretch;
  height: var(--tab-h); flex: 0 0 var(--tab-h);
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; color: inherit;
  opacity: .78;
  transition: opacity .25s;
}
/* Miniatura ultrapanorámica, en color */
.tab-thumb {
  position: relative;
  width: calc(64px + var(--base) + var(--shift));
  background-size: cover; background-position: center;
  transition: width .4s var(--ease);
}
.tab-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #fff; }
/* Nombre corto, sobre negro semitransparente */
.tab-name {
  display: flex; align-items: center;
  padding: 0 10px;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}

/* FEED: arriba del todo, barra negra alargada */
.tab.feed { opacity: 1; }
.tab.feed .tab-name { width: 150px; padding-left: var(--pad); }

/* La que se está viendo */
.tab.on { --shift: 34px; opacity: 1; }
/* Con el ratón encima: la señalada sale del todo, las demás se recogen */
.tabs:hover .tab:not(.feed) { --shift: -14px; opacity: .55; }
.tabs:hover .tab.on { --shift: 10px; opacity: .8; }
.tabs .tab:not(.feed):hover { --shift: 64px; opacity: 1; }

/* ── TEXTOS ──────────────────────────────── */
.top, .sign {
  position: fixed; z-index: 3;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
  transition: opacity .2s;
}
.top { top: var(--pad); font-weight: 500; font-size: 20px; letter-spacing: .02em; }
.top:hover { opacity: .65; }
.top-center { left: 50%; transform: translateX(-50%); }
.top-right { right: var(--pad); }

.sign {
  left: 50%; bottom: var(--pad); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  line-height: 1.25;
  pointer-events: none;
}
.sign-name { font-weight: 600; font-size: 20px; letter-spacing: .02em; }
.sign-role { font-weight: 300; font-size: 17px; opacity: .85; }

/* ── MÓVIL ───────────────────────────────── */
@media (max-width: 600px) {
  :root { --tab-h: 20px; }
  .tab-thumb { width: calc(36px + var(--base) + var(--shift)); }
  .tab-name { font-size: 10px; padding: 0 7px; }
  .tab.feed .tab-name { width: 110px; }
  .top { font-size: 16px; }
  .sign { left: auto; right: var(--pad); transform: none; align-items: flex-end; text-align: right; }
  .sign-name { font-size: 16px; }
  .sign-role { font-size: 14px; }
}