/*Styles de inicio index*/


/*Fuentes importadas*/

@import url(https://fonts.googleapis.com);
@import url(https://fonts.gstatic.com);
@import url(https://fonts.googleapis.com/css2?family=Quicksand&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap);

/*Desde cero*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/*Estilo de la página*/

body{
    font-family: 'Quicksand', sans-serif;
    background-color: #ffd2c2;
}

p{
    font-size: 1vmax;
}

/*header*/

.encabezado{
    display: flex;
    justify-content: center;
    position: fixed;
    padding: 1vh;
    width: 100%;
    top: 0;
    margin: 1vh;
    font-family: 'Bebas Neue', cursive;
    text-transform: uppercase;
}


/*barra de navegación*/

.navbar{
    display: flex;
    justify-content: space-between;
    padding: 1vh;
    margin-top: 7vh;
    width: 100%;
    background-color: salmon;
}

.nombre{
    margin-left: 2vh;
    width: 70%;
    text-transform: uppercase;
    font-size: 2.741vmax;
    color: black;
}

.espacios_botones{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

a{
    margin: 0 2vw;
    text-decoration: none;
    color: black;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5vmax;
}


/*Cuerpo de la página*/

.container{
    background-color: salmon;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin: 1vw;
    padding: 7vmin 2vmin;
    min-height: calc(100vh - 24vh);
}

.texto{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 1vw;
    text-align: center;
    margin-top: -2cm; 
}

.texto p{
    margin: 0.3vw 0 0.3vw 2vh;
    padding: 0 2cm;
    text-align: justify;
    text-indent: 1vmax;
    font-size: 17px;
    line-height: 1.6;
}

.descripcion{
    padding-bottom: 4vh;
    font-family: 'Ms Madi', cursive;
    font-size: 2.7vmax;
    color: black;
}

.container-img{
    width: 30%;
    margin-left: 3vw;
}

.foto_perfil{
    width: 70%;
}

/*Pie de página*/

.mainfooter{
    display: flex;
    justify-content: center;
    padding: 1vh;
    width: 100%;
    margin-top: 1vh;
    bottom: 0;
    font-family: 'Bebas Neue', cursive;
    text-transform: uppercase;
    position: fixed;
}



/*Boton Ingresar*/
button.ingresar {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
}

button.ingresar {
    width: 12vmax;
    height: auto;
}
   
button.ingresar .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3vmax;
    height: 3vmax;
    background: black;
    border-radius: 1.625vmax;
}
   
button.ingresar .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: white;
}
   
button.ingresar .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625vmax;
    width: 1.125vmax;
    height: 0.125vmax;
    background: none;
}
   
button.ingresar .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29vmax;
    right: 0.0625vmax;
    width: 0.625vmax;
    height: 0.625vmax;
    border-top: 0.125vmax solid white;
    border-right: 0.125vmax solid white;
    transform: rotate(45deg);
}
   
button.ingresar .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5vmax 0;
    margin: 0 0 0 1.85vmax;
    color: black;
    line-height: 1.6;
    text-align: center;
}
   
.ingresar:hover .circle {
    width: 100%;
}


.ingresar:hover .circle .icon.arrow {
    background: white;
    transform: translate(1vmax, 0);
}
   
.ingresar:hover .button-text a {
    color: white
    ;
}

/* Boton volver */

button.volver {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    cursor: pointer;
    border: 0;
    vertical-align: middle;
    background: transparent;
    padding: 0;
}
   
button.volver {
    width: 12vmax;
    height: auto;
}
   
button.volver .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3vmax;
    height: 3vmax;
    background: black;
    border-radius: 1.625vmax;
}
   
button.volver .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: white;
}
   
button.volver .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    right: 0.625vmax;
    width: 1.125vmax;
    height: 0.125vmax;
    background: none;
}
   
button.volver .circle .arrow::before {
    position: absolute;
    content: "";
    top: -0.29vmax;
    left: 0.0625vmax;
    width: 0.625vmax;
    height: 0.625vmax;
    border-top: 0.125vmax solid white;
    border-right: 0.125vmax solid white;
    transform: rotate(225deg);
}
   
button.volver .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5vmax 0;
    margin: 0 1.85vmax 0 0;
    color: black;
    line-height: 1.6;
    text-align: center;
}
   
.volver:hover .circle {
    width: 100%;
}
   
.volver:hover .circle .icon.arrow {
    background: white;
    transform: translate(-1vmax, 0);
}
   
.volver:hover .button-text a {
    color: white;
}