/* BLOQUE1...........................................................*/
  
#bloque1 {
    width: 100%;
    position: relative;
    height: 100vh;
    overflow: hidden;  
    z-index: 1;
 
   
}


/* Video a pantalla completa */
#video-bloque1 {
   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;           
}

  #video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
background-color: black ;
    opacity: 0.5;

}    
 




.contenido {
    position: relative;
    z-index: 2;          
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;        
    text-align: center;
    margin-top: 40px;
}

/* Títulos */



h1 {
    font-size: 5.5rem;
    margin: 0px;
    line-height: 1.2;
    font-weight: 300;
    color: white;

 text-shadow: 2px 2px 10px rgba(0,0,0,0.8);

}
#bloque1 h1 span {
        color: var(--color-c1);
     display: inline-block;      
    transform-origin: center center;
    backface-visibility: hidden; 
    font-weight: 500;
    font-style: italic;
   
}
h2  {
    font-size: 5.5rem;
    margin: 0px;
    line-height: 1.2;
    font-weight: 300;
    color: white;
    
   text-shadow: 2px 2px 10px rgba(0,0,0,0.8);

}
#bloque1 h2 span {
    color: var(--color-c2);
     display: inline-block;       
    transform-origin: center center;
    backface-visibility: hidden; 
        font-weight: 500;
     
}
.anim-letter {
  display: inline-block;
  transform-origin: center center;
  backface-visibility: hidden;  
  transform-style: preserve-3d; 
  perspective: 600px;           
}

.arrowPortada{
    margin-top: 100px;
}


@media (max-width: 1450px) {

h1,h2{
    font-size: 4rem;
}

.arrowPortada{
    margin-top: 50px;
}


}

@media (max-width: 1200px) {
.contenido {
    margin-top: 0px;

}
}


@media (max-width: 990px) {


h1,h2{
    font-size: 3rem;
}


}

@media (max-width: 765px) {
    #bloque1 {
        height: auto;
        background-size: contain;
    }


.contenido{
    margin-top: -30px;
  
}


.arrowPortada{
margin-top: 30px;
}


}

@media (max-width: 380px) {
    .contenido{
    margin-top: 0px;
}
h1,h2{
    font-size: 2.5rem;
}

}

@media (max-width: 340px) {

    .contenido{
    margin-top: 20px;
    }
h1,h2{
    font-size: 1.8rem;
}

}