html {height: 100%}

body {overflow-x: hidden}

h1 {text-align: left; font-family: "arial black"; font-size: 1.5rem; color:#ea2a6e }

h2 {text-align: left; font-family: arial; font-weight: 400; font-size: 1.3rem; color:#210440}

h3{text-align: left; font-family: "arial black"; font-size: 1.3rem; color:#210440}

h4{text-align: left; font-family: arial;font-weight:500}

h4 strong{color: #ea2a6e; font-size: 1.1rem}

h6 {text-align: center; font-family: arial; }

body{margin: 0; padding:0; max-width: 100%; min-height: 100%}

footer{background: #e5958e; padding-top: 5rem; margin:0}

nav a:hover {color:white;  }

nav a {
    padding-right:1.5rem;
    padding-left: 1.5rem;
    padding-top:1rem;
    padding-bottom:1rem;
    font-size: 1.5rem;
	display: inline-block;
	text-decoration: none;
	text-align: center;
    font-family: arial;
    font-size: 1.2rem;
	color: #ffc737;

}

.link-activo {color:#e5958e }

.div-menu {display: flex;
justify-content:center;}

.menu {
    flex: 1;
    background: #210440;
    font-size: 1rem; 
    justify-content: right; 
    padding-right: 1rem;
    padding-left: 5rem;
    display: flex;
  
}


.contenedor-mockup {background-image: linear-gradient(to bottom,#ffc737, white ); z-index: -1; padding-top:4rem;   display:flex; justify-content: center; width: 100%; max-width:100%; padding;5% 0 0 0}

.contenedor-mockup2{background:white;  padding-top:4rem; display:flex; justify-content: center; width: 100%; max-width:100%; padding;5% 0 0 0}

.contenedor-mockup3 {background: white; z-index: -1; padding-top:4rem;   display:flex; justify-content: center; width: 100%; max-width:100%; padding;5% 0 0 0}

.contenedor-mockup4 {background-image: linear-gradient(to bottom,white, #e5958e ); z-index: -1; padding-top:4rem;   display:flex; justify-content: center; width: 100%; max-width:100%; padding;5% 0 0 0 }

.texto-hero {margin-left: 10rem; margin-top: 5rem; max-width: 55%}

.texto {margin-left: 10rem; margin-top: 12rem; max-width: 60%; line-height: 1.2rem}

.texto2 {margin-right: 10rem; margin-top:10rem; margin-left:5rem; line-height: 1.2rem; padding-right: 4rem}

.imagen {padding-right:10rem }

.imagen2 {padding-left: 5rem}

.botones {max-width: 50%; margin-left: 10rem; margin-top: 5rem}

.legales{max-width: 80%;display: grid; align-content:  center; margin:auto}

legales p {text-align:center}

.logo {margin-top: 3rem; padding-bottom:3rem ;}

.pantallas {max-width:90%; z-index: 1}

.texto-hero img {max-width: 150px;}

.contenedor-mockup2 .pattern {position: absolute; z-index:  -0; opacity: 50%; padding-top: 6rem}