@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

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

html {
    font-size: 62.5%;
    font-family:'Dancing Script', cursive;
}
html::-webkit-scrollbar {
    background-color: #000;
    width: 12px;
    border-radius: 10px;
}

html::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}

html::-webkit-scrollbar-thumb {
    background-image: -webkit-gradient(linear, left bottom, left top, 
    color-stop(.5, #a520ca), color-stop(1, #2681cc));
}


header {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #00AFB9;
    position:fixed;
    box-shadow: 0.1rem 1.6rem 2rem #F07167;
}

body {
    overflow-x: hidden;
    font-size: 1.6rem;
}

.icon {
margin-left: 1rem;
}

.menu {   
    display: flex;
    justify-content: center;
    top: 0;
    list-style: none;
    margin-right: 2rem;
    
    
    
    
    
}

.menu-items{
    background-color: #0081A7;
    text-decoration: none;
    list-style: none;
    font-size: 3rem;
    font-weight: bold;
    margin-left: 10px;
    padding:10px;
    color:aliceblue;
    border-radius:25%;
}

.menu-items {
    display: block;
    position: relative;
    overflow: hidden;
}

.menu-items span {
    transition: transform 0.2s ease-out;
  }
   

.menu-items span:first-child {
    display: inline-block;
    padding: 1rem;
  }

.menu-items span:last-child {
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left:0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
}

.menu i {
    font-size: 3rem;
  }


.menu-items:hover {
    color: #FED9B7;
    border-radius: 50%;
}

  .menu-items:hover span:first-child {
    transform: translateY(100%);
  }
   
  .menu-items:hover span:last-child {
    transform: none;
  }

  .menu[data-animation="to-top"] a span:last-child {
    transform: translateY(100%);
  }
.info {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FDFCDC ;
    flex-direction: column;

    
}
.info_img {
    display: flex;
    flex-direction: column;
    align-items: center;

}
.titulo_prin {
    margin-top: 20rem;
    font-size: 4rem;
    color: #F07167;
    text-shadow: 0px 0.2rem 1rem #e3b78f;

}

.vaca-sexy{
    margin-top: 2rem;
    margin-bottom: 2rem;
}
    


.explica {
    margin-bottom: 1rem;
    font-weight: bold;
    color: rgba(160, 9, 9, 0.468);
    font-size: 2.5rem;
    width: 25%;
}


#boton {
    background-color: #F07167;
    border:5px solid rgba(9, 127, 111, 0.516);
    padding: 1rem;
    border-radius: 25%;
    margin-top: 2rem;
    width: max-content;
    color: #FDFCDC;
    font-size: 3rem;

}
#boton:link,
#boton:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    position: absolute;
}

#boton:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px #ba0b0b8b;
}
#boton:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px #ba0b0b8b;
}




.main-tarjetas {
    display: flex;
    flex-wrap: wrap;
}


.tarjetas {
    height: 20rem;
    width: 20rem;
    margin-left: 2rem;
    margin-top: 2rem;
    border-style:outset;
    border-color: #00AFB9;
    background-color:#00AFB9;
    box-shadow: 0.3rem 0.5rem 1rem 0.2rem #0f046f;
    transition-duration: 1s;
    
}

.tarjetas:hover {
    transform: translateY(-2rem);
    transition-duration: 1s;
}
.container_secu {
    display: flex;
    flex-direction: column;
    align-items: center;

}
.border{
	padding: 0.5rem;
		background: linear-gradient(110deg, #ffeead 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #C5E7D7 34%, #88d8b0 34%);
	background-size: 400% 400%;
	height: 28rem;
	background-position: 25% 50%;
	-webkit-animation: Gradient 12s ease infinite;
	-moz-animation: Gradient 5s ease infinite;
}
.inner-cutout{
	padding: 0.2rem 0;
	display: block;
	background-color:#ff6f69;/*#ff6f69*/
		
	margin: 2%;
	padding-bottom: 4rem;
	height: 25rem;
	background: radial-gradient(#ff6f69, #ff8b87);
	 background-size: 300%;
	background-position:50% 50%;

}
.titulo_secu {
    margin-top: 5rem;
    margin-bottom: 5rem;
    font-size: 4rem;
    color: #F07167;
    text-shadow: 0px 0.2rem 1rem #e3b78f;
}
.titulo_secu {
	
	vertical-align: middle;
	text-align: center;
	
	font-size:50pt;
	color: blue;
	color: #fff;
	background: linear-gradient(110deg, #ffeead 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #C5E7D7 34%, #88d8b0 34%);
	background-size: 400%;
	 -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.titulo_secu{
		animation: Gradient 5s ease infinite;
		-webkit-animation: Gradient 15s ease infinite;
		-moz-animation: Gradient 5s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 30% 50%
	}
	50% {
		background-position: 25% 50%
	}
	100% {
		background-position: 30% 50%
	}
	
}


@media (min-width: 460px) {
.explica {
    width: 100%;
}

.header{
    flex-direction: column;
}
.menu{
    display: none;
    flex-direction: column;
}



}

@media (min-width: 960px) {
    .explica {
        width: 25%;
    }
    .menu{
        display: flex;
        flex-direction: row;
    }
}+