@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

 body:hover {
    color:none !important;

  }

a:hover {
    color:none !important;

  }

/*fin iconos*/



/*inicio*/

.Titulo1{text-shadow: 0px 0px 4px #bababa; color: #273147 !important;}




/*pagina animacion bg*/
.page-header {
	background: linear-gradient(-45deg, #fff, #fff, #fff, #fff);
	background-size: 400% 400%;
	animation: gradient 20s ease infinite;
	/*height: 100vh;*/
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


/*pagina animacion bg*/




/*Animacion svg*/

#text-outline path{
  stroke: #59af31;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
  animation: a-text-lines 3s 0s forwards infinite;/*inicio tiempo*/
}
#text-fill path{
  fill: #59af31;
  opacity:0;
  animation: a-fill 1s 2s forwards ;

}

	#text-outline polygon{
  stroke: #59af31;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
  animation: a-text-lines 3s 0s forwards infinite;/*inicio tiempo*/
}
#text-fill polygon{
  fill: #59af31;
  opacity:0;
  animation: a-fill 1s 2s forwards ;
}


svg lines{
  animation: fadeout 2s 10s;
}
@keyframes a-h-lines{
  0%{stroke-dashoffset: 1300;}
  100%{stroke-dashoffset: 0;}
}
@keyframes a-text-lines{
  0%{stroke-dashoffset: 800;}
  100%{stroke-dashoffset: 0;}
}
@keyframes a-fill{
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes fadeout{
  0%{opacity: .5;}
  100%{opacity: 0;}
}









/*
############
############
inicio
############
############
*/



/*Estilos seccion APP home*/


.Fondo-app{
        margin:0 auto;
        background-size: cover;
        background-color:white;
        background-image: url("../img/back-App.png");
        background-position: 100% 100%;/*aqui ocupara el 50 por ciento a ambos lados*/
		background-repeat: no-repeat;
		}


.img-line{position:relative;
top:150px;
z-index:800; }

.img-line2{position:relative;
top: -225px;
z-index:800; }

	.app-text-1{
		position:relative;
		top:-750px;
		left: 300px;
		z-index:800;
		border: 0px solid #f00;
	}

		.app-text-2{
		position:relative;
		top:-550px;
		right: 80px;
		z-index:800;
		border: 0px solid #f00;
	}


		.app-text-3{
		position:relative;
		top:-450px;
			left: 60px;
		z-index:800;
		border: 0px solid #f00;
	}




.tiendas{
    top: -150px;
}

.card-tiendas
{
    padding: unset !important;
}

@media (max-width:991.98px) {
    .tiendas{
        top: -110px;
    }
}
@media (max-width: 576px) {


.img-line{position:relative;
top:50px;
z-index:800; }

.img-line2{position:relative;
top: -25px;
z-index:800; display: none;}

	.app-text-1{
		position:relative;
		top:-350px;
		left: 250px;
		z-index:800;
		border: 0px solid #f00;
	}

		.app-text-2{
		position:relative;
		top:-250px;
		right: 50px;
		z-index:800;
		border: 0px solid #f00;
	}


		.app-text-3{
		position:relative;
		top:-450px;
			left: -140px;
		z-index:800;
		border: 0px solid #f00;
	}


}














/*circulo WP*/


.wrapper {
   display: grid;

  justify-content: center;
  align-items: center;
 /*width: 100vw;*/
  height:68vh;
  overflow-x: hidden; border: 0px solid #f00 !important;
}

@media (max-width:798px) { /*Meter el boton para que suba en mobil */


.wrapper {
  display: grid;

  justify-content: center;
  /*width: 100vw;*/
  height: 80vh;
  overflow-x: hidden; border: 0px solid #f0f !important;
}

}


@media (min-width:1200px) { /*Meter el boton para que suba en mobil */
.wrapper {
   display: grid;

  justify-content: center;
  align-items: center;
 /*width: 100vw;*/
  height:58vh;
  overflow-x: hidden; border: 0px solid #f00 !important;
}

}



@media (min-width:1929px) { /*Meter el boton para que suba en mobil */
.wrapper {
   display: grid;

  justify-content: center;
  align-items: center;
 /*width: 100vw;*/
  height:35vh;
  overflow-x: hidden; border: 0px solid #0f0 !important;
}

}


.wrapper .containerWP {
  margin: 0 auto;
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.wrapper .containerWP .scene {
  position: absolute;
  width: 100vw;
  height: 100vh;
  vertical-align: middle;
}
.wrapper .containerWP .one,
.wrapper .containerWP .two,
.wrapper .containerWP .three,
.wrapper .containerWP .circle,
.wrapper .containerWP .p404 {
  width: 60%;
  height: 60%;
  top: 20% !important;
  left: 20% !important;
  min-width: 400px;
  min-height: 400px;
}
.wrapper .containerWP .one .content,
.wrapper .containerWP .two .content,
.wrapper .containerWP .three .content,
.wrapper .containerWP .circle .content,
.wrapper .containerWP .p404 .content {
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: content 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
@keyframes content {
  0% {
    width: 0;
  }
}
.wrapper .containerWP .one .content .piece,
.wrapper .containerWP .two .content .piece,
.wrapper .containerWP .three .content .piece,
.wrapper .containerWP .circle .content .piece,
.wrapper .containerWP .p404 .content .piece {
  width: 200px;
  height: 80px;
  display: flex;
  position: absolute;
  border-radius: 80px;
  z-index: 1;
  animation: pieceLeft 8s cubic-bezier(1, 0.06, 0.25, 1) infinite both;/*AGREGAR CENTRADO ABOLUTO de TEXTOS*/
}
@keyframes pieceLeft {
  50% {
    left: 80%;
    width: 10%;
  }
}
@keyframes pieceRight {
  50% {
    right: 80%;
    width: 10%;
  }
}
@media screen and (max-width: 799px) {
  .wrapper .containerWP .one,
.wrapper .containerWP .two,
.wrapper .containerWP .three,
.wrapper .containerWP .circle,
.wrapper .containerWP .p404 {
    width: 90%;
    height: 90%;
    top: 5% !important;
    left: 5% !important;
    min-width: 280px;
    min-height: 280px;
  }
}
@media screen and (max-height: 660px) {
  .wrapper .containerWP .one,
.wrapper .containerWP .two,
.wrapper .containerWP .three,
.wrapper .containerWP .circle,
.wrapper .containerWP .p404 {
    min-width: 280px;
    min-height: 280px;
    /*width: 60%;*/
    height: 60%;
    top: 20% !important;
    /*left: 20% !important;*/
  }
}
.wrapper .containerWP .text {
  width: 60%;
  height: 40%;
  min-width: 400px;
  min-height: 500px;
  position: absolute;
  margin: 40px 0;
  animation: text 0.6s 1.8s ease backwards;
}
@keyframes text {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
}
@media screen and (max-width: 799px) {
  .wrapper .containerWP .text {
    min-height: 400px;
    height: 80%;
  }
}
.wrapper .containerWP .text .article {
  width: 400px;
  position: absolute;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  bottom: -53%;
  left: 50%;
  transform: translateX(-50%);border: 0px solid #f00;
}
@media screen and (max-width: 799px) {
  .wrapper .containerWP .text .article {
    width: 100%;
  }
}
.wrapper .containerWP .text .article {
  color: white;
  font-size: 18px;
  letter-spacing: 0.6px;
  margin-bottom: 40px;
  text-shadow: 6px 6px 10px #32243e;
}
/**/
.wrapper .containerWP .text .article .wpbutton {


  box-shadow: 0px 15px 20px rgba(54, 24, 79, 0.5);
  z-index: 3;


  transition: all 0.3s ease;
}
.wrapper .containerWP .text .article .wpbutton:hover {
  box-shadow: 0px 10px 10px -10px rgba(54, 24, 79, 0.5);
  transform: translateY(5px);


}

.wrapper .containerWP .p404 {
  font-size: 200px;
  font-weight: 700;
  letter-spacing: 4px;
  color: white;
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both;
  animation-delay: 1.2s;
}
@media screen and (max-width: 799px) {
  .wrapper .containerWP .p404 {
    font-size: 100px;
  }
}
@keyframes anime404 {
  0% {
    opacity: 0;
    transform: scale(10) skew(20deg, 20deg);
  }
}
.wrapper .containerWP .p404:nth-of-type(2) {
  color: #3f00;
  z-index: 1;
  animation-delay: 1s;
  filter: blur(10px);
  opacity: 0.8;
}
.wrapper .containerWP .circle {
  position: absolute;
}
.wrapper .containerWP .circle:before {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  background-color: #E9FBEF;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
  animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;border: 1px solid #ADEEC5;
}
@keyframes circle {
  0% {
    width: 0;
    height: 0;
  }
}

@media screen and (max-width: 799px) {
  .wrapper .containerWP .circle:before {
    width: 100px;
    height: 100px;
  }
}

.wrapper .containerWP .one .content:before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background-color: #E9FBEF;
  border-radius: 100%;
	border: 40px solid #ADEEC5;


}
@media screen and (max-width: 799px) {
  .wrapper .containerWP .one .content:before {
    width: 300px;
    height: 300px;
  }
}



.wrapper .containerWP .one .content .piece {
  background: #ffffff; border: 1px solid #1ECE7A; text-align: center !important; align-items: center !important; color:#198754;align-content: center!important;
}
.wrapper .containerWP .one .content .piece:nth-child(1) {
  right: 15%;
  top: 18%;
  height: 40px;
  width: 150px;
  animation-delay: 0.5s;
  animation-name: pieceRight;
	text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .containerWP .one .content .piece:nth-child(2) {
  left: 15%;
  top: 45%;
   height: 40px;
  width: 150px;
  animation-delay: 1s;
  animation-name: pieceLeft;
	text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .containerWP .one .content .piece:nth-child(3) {
  left: 10%;
  top: 75%;
  height: 40px;
  width: 150px;
  animation-delay: 1.5s;
  animation-name: pieceLeft;
	text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .containerWP .two .content .piece {
  background: #ffffff; border: 1px solid #1ECE7A; color:#198754;
	text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .containerWP .two .content .piece:nth-child(1) {
  left: 0%;
  top: 25%;
  height: 40px;
  width: 150px;
  animation-delay: 2s;
  animation-name: pieceLeft;
		text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .containerWP .two .content .piece:nth-child(2) {
  right: 15%;
  top: 35%;
 height: 40px;
  width: 150px;
  animation-delay: 2.5s;
  animation-name: pieceRight;
		text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .containerWP .two .content .piece:nth-child(3) {
  right: 10%;
  top: 80%;
 height: 40px;
  width: 150px;
  animation-delay: 3s;
  animation-name: pieceRight;
		text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;

}
.wrapper .containerWP .three .content .piece {
 background: #ffffff; border: 1px solid #1ECE7A; color:#198754;
	 height: 40px;
  width: 150px;
		text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .containerWP .three .content .piece:nth-child(1) {
  left: 25%;
  top: 35%;
  height: 40px;
  width: 150px;
  animation-name: pieceLeft;
  animation-delay: 3.5s;
		text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;

}
.wrapper .containerWP .three .content .piece:nth-child(2) {
  right: 10%;
  top: 55%;
   height: 40px;
  width: 150px;
  animation-name: pieceRight;
  animation-delay: 4s;
		text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .containerWP .three .content .piece:nth-child(3) {
  left: 40%;
  top: 68%;
  height: 40px;
  width: 150px;
  animation-name: pieceLeft;
  animation-delay: 4.5s;
		text-align: center !important;
	align-items: center !important;
	padding: 10px;
	display: flex;
  align-items: center;
  justify-content: center;
}

.btn-success
{
    --bs-btn-bg: #59AF31 !important;
}

.text-success{
    color: #59AF31 !important;
}

.bg-success
{
    background-color: #59AF31 !important;
}