@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');/* tipografia Roboto*/

/* bloque1********************************************************************************************* */


#seccion1{
    display: flex;
    justify-content: center;
    align-items: center;
}
.containerPortada {
    display: flex;              
    width: 100%;                

   
}

.textoPortada, .textoImg {
    flex: 1;                    
    height: 100%;          
}
.textoPortada h1{
font-size: 3.8rem;
color:white;
}
.textoPortada h2{
    color:white;
    font-family: 'Helvetica Neuer bold';
    font-weight: 500;
    font-size: 2.2rem;
}
.textoPortada h3{
    font-size: 3.5rem;
    color:#fb7900;
}
.textoPortada h4{
    color:white;
    font-family: 'Helvetica Neuer';
    font-weight: 400;

}
.textoPortada h5{
    color:white;
    font-family: 'Helvetica Neuer';
    font-weight: 200;

}

#bloque1{
    width: 100%;
    height: auto;
    background-color: var(--color-c1);
    background-image: var(--img-pc);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
}

/* SMARPHONES Y TABLETS****************************************************************************************  */
/* bloque1********************************************************************************************* */
@media (max-width: 1100px){

    .textoPortada h1{
        font-size: 2rem;
       
    }
 
    .textoPortada h3{
        font-size: 1.8rem;
        color:#fb7900;
    }
}

@media (max-width: 980px) {
    #bloque1{
        width: 100%;
        height: auto;
        background-color: var(--color-c1);
        background-image: var(--img-pc);
        background-size: cover;
        background-position:left ;
        padding: 20px;
    }
    


}

@media (max-width: 767px) {

    #bloque1{
        width: 100%;
        height: auto;
        background-color: var(--color-c1);
        background-image: var(--img-movil);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
        padding: 10px;
    }
    .containerPortada {
        flex-direction: column;  
    }
    .textoPortada, .textoImg {
        flex: none;              
        width: 100%;
        padding-bottom: 150px;
    }

}

@media (max-width: 380px) {
    .textoPortada h1{
        font-size: 2.4rem;
       
    }
    
}