/* CONTENEDOR */
.historia-container{
  display:flex;
  gap:40px;
  padding:120px 40px;
  align-items:center;
  justify-content:center;
}

/* VIDEO BOX */
.video-box{
  position:relative;
  width:500px;
  border-radius:20px;
  overflow:hidden;

  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);

  box-shadow:0 10px 40px rgba(0,0,0,0.4);
}

.video-box video{
  width:100%;
}

/* PLAY */
.play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:40px;
  color:white;
  cursor:pointer;

  background: rgba(0,0,0,0.5);
  padding:20px;
  border-radius:50%;

  transition:0.3s;
}

.play-btn:hover{
  transform:translate(-50%, -50%) scale(1.1);
}

/* CONTROLES */
.controls{
  display:flex;
  gap:10px;
  padding:10px;
  background: rgba(0,0,0,0.6);
}

.controls input{
  flex:1;
}

/* TEXTO */
.texto-box{
  max-width:500px;
  padding:30px;

  border-radius:20px;

  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);

  color:white;
  font-size:18px;
  line-height:1.6;

  text-shadow:
    0 0 10px rgba(79,195,247,0.6),
    0 0 20px rgba(79,195,247,0.4);
}

/* 🎬 EFECTO CINEMATIC */
.video-box.playing{
  box-shadow:
    0 0 40px rgba(79,195,247,0.6),
    0 0 80px rgba(79,195,247,0.3);
}

.texto-box.playing{
  box-shadow:
    0 0 40px rgba(79,195,247,0.6);
}

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

  .historia-container{
    flex-direction:column;
    padding:100px 15px;
  }

  .video-box{
    width:100%;
  }

  .texto-box{
    width:100%;
    font-size:16px;
  }

}

/* CONTENEDOR */
.historia-header{
  width:100%;
  text-align:center;
  margin-top:120px;
}

/* TITULO */
.historia-title{
  font-size:clamp(36px, 6vw, 70px);
  font-weight:800;

  background: linear-gradient(90deg, #ffffff, #4fc3f7, #0d47a1);
  background-size:200%;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;

  text-shadow:
    0 0 20px rgba(79,195,247,0.8),
    0 0 40px rgba(79,195,247,0.5);

  letter-spacing:2px;

  animation: glowMove 4s linear infinite;
}

/* ANIMACION */
@keyframes glowMove{
  0%{ background-position:0% }
  100%{ background-position:200% }
}

@media(max-width:768px){

  .historia-header{
    margin-top:90px;
    padding:0 10px;
  }

  .historia-title{
    font-size:32px;
    line-height:1.2;
  }

}

.historia-title{
  animation: glowMove 4s linear infinite, fadeIn 1s ease;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}