/* CONTENEDOR PRINCIPAL */
.containerx10 {
  position:fixed; 
    top: 60px;
    bottom: 60px;
    width: 100%;
z-index:0;
 /* border: 1px solid red;*/

  /* 🔥 SCROLL REAL */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* 🔥 OCULTAR BARRAS */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}

.containerx10::-webkit-scrollbar {
  display: none;              /* Chrome/Safari */
}}

/* BORDE ENERGÍA */
.containerx10::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:
    linear-gradient(90deg, transparent, rgba(0,150,255,0.8), transparent) top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(0,150,255,0.8), transparent) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent, rgba(0,150,255,0.8), transparent) left / 2px 100% no-repeat,
    linear-gradient(180deg, transparent, rgba(0,150,255,0.8), transparent) right / 2px 100% no-repeat;
  pointer-events:none;
 z-index:1; /* 🔥 para que se vea encima */

}
/* PORTADA */
.portada{
  position:relative;
  width:100%;
  height:400px;
  overflow:hidden;
}

/* MEDIA (IMG o VIDEO) */
.portada-media{
 /* position:absolute;
  top:0;
  left:0;*/
  width:100%;
  height:100%;
  object-fit:cover;
}

/* TEXTO */
.portada-texto{
  position:absolute;
  top:20px;
  right:30px;
  color:white;
  text-align:right;
  z-index:2;
}

.portada-texto h1{
  font-size:32px;
  margin:0;
}

.portada-texto p{
  font-size:16px;
  margin:0;
}

@media (max-width:768px){

  .portada{
    height:300px;
  }

  .portada-texto{
    right:50%;
    top:50%;
    transform:translate(50%, -50%);
    text-align:center;
  }

  .portada-texto h1{
    font-size:24px;
  }

  .portada-texto p{
    font-size:14px;
  }

}
@media (min-width:769px) and (max-width:1024px){

  .portada{
    height:350px;
  }

  .portada-texto{
    right:20px;
    top:20px;
  }

  .portada-texto h1{
    font-size:28px;
  }

}