#historia-scroll-grafico-general {
  font-family: 'Heebo', 'Open Sans', sans-serif;
  background: linear-gradient(to right, var(--bg-a), var(--bg-b), var(--bg-c));

}


/* ======= PORTADA (hero) ======= */


/* Contenedor a pantalla completa (como ya lo tenías) */
#portada-historia-scroll-linea-tiempo {
  position: relative !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  min-height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 0;
}

/* Vídeo de fondo a cubrir */
.portada-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Capa negra al 90% por encima del vídeo */
#portada-historia-scroll-linea-tiempo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  /* si la quieres más oscura, sube este .25 */
  z-index: 1;
  pointer-events: none;
}

#portada-historia-scroll-linea-tiempo::after {
  content: "";
  position: absolute;
  inset: -8%;
  /* un poco más grande para evitar bordes */
  z-index: 2;
  pointer-events: none;
  opacity: .9;
  /* <- lo que pediste */
  background:
    radial-gradient(1200px 800px at 60% 30%,
      /* posición/forma del foco */
      rgba(27, 27, 27, 1) 0%,
      rgba(12, 12, 12, 1) 55%,
      rgba(0, 0, 0, 1) 100%);
}

/* El contenido va por encima de la capa */
.portada-hero {
  position: absolute;
  z-index: 3;
  width: min(1024px, 92vw);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 80px) 0;
  text-align: center;
  color: #fff;
}



.portada-hero__inner {
  transform: translateY(-6vh);
}

.portada-hero__kicker {
  font: 700 clamp(16px, 2.2vw, 22px)/1.2 "Heebo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffc116;
  margin: 0 0 .5rem 0;
}

.portada-hero__title {
  font: 800 clamp(32px, 7vw, 68px)/1.05 "Heebo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .35);

}

.portada-hero__hint {
  margin-top: clamp(18px, 3.5vw, 36px);
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  padding: .65rem .9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
}

.portada-hero__hint .hint-text {
  font: 500 clamp(13px, 1.6vw, 15px)/1.2 "Heebo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #ddd;
}

/* Chevron animado (puntero) */
.portada-hero__hint .chev {
  --s: 14px;
  position: relative;
  width: var(--s);
  height: var(--s);
  display: inline-block;
  border-right: 2px solid #ffc116;
  border-bottom: 2px solid #ffc116;
  transform: rotate(45deg);
  animation: chev-bounce 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 193, 22, .35));
  bottom: 7px;
}

@keyframes chev-bounce {

  0%,
  100% {
    transform: translateY(-2px) rotate(45deg);
    opacity: .9;
  }

  50% {
    transform: translateY(4px) rotate(45deg);
    opacity: 1;
  }
}

/* En portada e intro ocultamos panel lateral si tu script ya añade la clase;
   esto refuerza la ocultación por si hay FOUC */
body.hide-timeline #tl-panel {
  opacity: 0;
  pointer-events: none;
}

body.hide-timeline #historia-scroll-linea-tiempo {
  opacity: 0;
  pointer-events: none;
}


/* --- Responsive --- */
@media (max-width: 768px) {

  /* Sacamos el panel del flujo y lo colocamos a pantalla completa detrás */
  #tl-panel {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    z-index: 0;
    /* detrás del contenido por defecto */
    pointer-events: none;
    /* evita que desplace/intercepte toques */
  }

  /* Forzar que el contenido principal quede por encima cuando el panel está cerrado */
  #portada-historia-scroll-linea-tiempo,
  .portada-hero,
  #historia-scroll-grafico-general {
    position: relative;
    z-index: 3;
  }
}

@media (max-width: 769px) {
  .portada-bg-video {
    position: absolute;
    display: none !important;
  }

  .portada-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
}