@import url("flex-box.css");
@import url("fonts.css");
@import url("modal.css");
@import url("nav.css");
@import url("banner.css");
@import url("card.css");
@import url("form.css");
@import url("preload-bar-spinner.css");
@import url("icons.css");
@import url("table.css");

:root{
	/*primary colors*/
	--color-primary-blue:#0071E3;
	--color-primary-lightblue:#98CBFF;	
	--color-primary-black:#1C242B;
	--color-primary-dimgray:#353A40;
	--color-primary-slategrey:#ADB8BE;
	--color-primary-whitesmoke:#F7F5F5;
	/* --color-primary-whitesmoke:#F5F5F5; */

	/*secondary colors*/
	--color-secondary-green:#13BC0C;
	--color-secondary-tomato:#EF5923;
	--color-secondary-white:#fff;
	
	/* Tipografía Roboto */	
	--exta-large-text-title:3em;
	--large-text-title:2.25em;
	--medium-text-title:1.5em;
	--small-text-title:1.5em;
	
}



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

.pag__body{

	font-family: Arial, sans-serif;
	
	/* padding:.3em; */
	max-width:100%;
}
.pag__header{
	background-color:var(--color-primary-blue);	
	max-width:100%;
}
.background-app{
	position:relative;
}
.background-app{
	position:absolute;
}
.pag__main{
	 
}
.pag__footer{
	
}

.container-wrapper{
  display: flex;
  flex-wrap: wrap;
  /* gap:.5em; */
  justify-content: center;
  
  width:80%;
  margin:0 auto;

}

.block-card { 
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
  padding:1.5em;;
  flex: 1 1 auto;
  max-width:98vw; /*300px*/
}

.pag__footer{
	
	min-height:5em;
	background-color:#454545;
	color:#fff;
}
.footer-section, .section-right{
	margin:2em;
	text-align:center;
}
.pag__footer .foo-menu{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around;
	
	padding:.8em;
}
.pag__footer .foo-copy{
	/* text-align:center; */
	
	padding:.8em;
	border:0;
	background-color:var(--color-primary-dimgray);
	
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}
.pag__header, .pag__main, .pag__footer{
	
}
.main__section{
	
}
.section__como_participar{
	
}
.section__como_participar .container-ico{
	
}
.section__como_participar img{
	margin:0 auto;
	
}
.pag__main .text-height{
	font-size:var(--large-text-title);
}
.pag__main .text-light{
	font-family:'Roboto-Light';
}
.pag__main .text-bold, .pag__main .text-black{
	font-family:'Roboto-Black';
	font-weight:bold;
}
.pag__main .text-slategrey{
	font-weight:bold;
	color:var(--color-primary-slategrey);
}
.pag__main .text-black{
	color:var(--color-primary-black)
}

.section__como_participar li{
	font-family:'Roboto-Light', "Times New Roman", Times, serif;
	font-size:1.15em;
	text-align:justify;
	/* color:#808b96; */
	margin:.95em 2em;
	padding:0;	
}
.section__como_participar .video-tutorial{
	border:0;
	border-radius:.3em;
	padding:.5em;
	margin:.3em;
	color:var(--color-secondary-white);
	background-color:var(--color-secondary-tomato);
	line-height:1em;
	cursor:pointer;
	position:relative;
}

.section__boletos{
	margin: 6em auto;
	padding:3em .5em;
	background-color:var(--color-primary-whitesmoke);
	
	
}
.paquetes-title{
	/* border:1px solid red; */
	margin:.48em auto;
}

/* PIE STATUS*/
	@keyframes rellenar{
	  to{
		stroke-dasharray: var(--porcentaje) 100;
	  }
	}
	.section__porcentaje-grafico{
		margin: 2em auto;
	}
	.porcentaje-grafico{
	  display:flex;
	  justify-content:center;
    }
    .porcentaje-grafico text{
		stroke:var(--color-primary-lightblue);
		font: 14px/1em Verdana;
    }
    .porcentaje-grafico circle{
		--dgCirculo:linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(152, 203, 255, 1) 100%);
      fill: none;
      stroke-width:25;
      transform: rotate(-90deg);
      transform-origin: 50%;
      stroke-dasharray: 100 100;
      stroke:var(--color-primary-lightblue);
    }
    .porcentaje-grafico circle:nth-child(2){ /* el segundo círculo, es el que se ve por encima del anterior y debe tener el color mas intenso y el area del porcentaje */
      stroke:var(--color);
      stroke-dasharray: 0 100;
      animation: rellenar .35s linear forwards;
    }
	.porcentaje-detalle .caja{
		width:3em;
		height:2em;
		border-radius:.3em;
		border:1px solid var(--color-secondary-green);
		margin:.5em auto;
		font-size:1.6em;
		color:var(--color-primary-lightblue);
		line-height:1.85em;
		text-align:center;
		font-weight:bold;
	}
	.porcentaje-detalle strong{
		margin-right:0.3em;
	}
	.porcentaje-detalle p{
		font-size:.85em;
		font-family:'Roboto-Light';
	}

	.section__consultar_numeros{
		margin:2em auto;
		padding:.2em;
	}
	.section__consultar_numeros input, .section__consultar_numeros button{
		padding:.3em;
		border-radius:.3em;
		border:1px solid var(--color-secondary-tomato);
	}
	.section__consultar_numeros button{
		background-color:var(--color-secondary-tomato);
		color:#fff;		
	}
	
	.section__sorteo-premios{
		padding:3em .5em;
		color:#fff;
		
	}
	.section-premios{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		padding:3em 0;
		
	}
	.section__sorteo-premios .sorteo-title{
		color:var(--secondary-white);
		margin:.5em auto;
		
	}
	.section__sorteo-premios .sorteo-paragraph{
		margin:.3em 0;
	}
	.card-container-premios{
		border-radius:.3em;
		/* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
		overflow: hidden;
		width:11em;
		height:16em;
		transition: transform 0.3s;
		
		margin:.5em;
		
	}
	.card-premios-img{
		
		width: 100%;
		min-height:10em;
		height:10em;
		object-fit: cover;
		
		border:1px solid #fff;
		border-radius:.4em;
		padding:.2em;
	}
	
	.card-premios-legend{
		font-family:'Roboto-Black';
		font-size:1.8em;
		padding:.2em;
		height:6em;
		line-height:1em;
		text-align:center;
		
	}
	
	/*AUSPICIANTES*/
	.section-auspiciantes{
		margin:6em auto;
	}
	.section-auspiciantes .auspiciantes-title{
	
		margin-bottom:.4em;
		
	}
	.auspiciantes{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
	}
	.auspiciante-logo{
		width:10em;
		height:8em;
		border:1px solid #ccc;
		border-radius:.5em;
		margin:0.3em;
		
		display:flex;
		justify-content:center;
		align-items:center;
		
	}
	.auspiciante-logo img{
		width:100%;
		height:100%;
	}
	.auspiciante-logo a{
		color:var(--color-secondary-green);
		text-decoration:none;
	}
	
	.main__block-title{
		font-family:'Roboto-Black';
		padding:.3em;
		margin:.2em;
	}
	.main__block-paragraph{
		font-family:'Roboto-Light';
		padding:.3em;
		margin:.2em;
	}
	
@media all and (max-width: 940px) {
	:root{
		--exta-large-text-title:2.5em;
		--large-text-title:1.85em;
	
	}
	
	.pag__header .container-logo, .pag__header .navigation{
		justify-content:center;
		align-items:center;
		width:100%;
	}
	.pag__header .container-logo{
		display:flex;
	}
			
	 .pag__header,.pag__main,.pag__footer{
		justify-content:center;
	
		padding:0.2em;
	 }
		.pag__header .container-logo, .container-title{			
			align-items:center;
			flex-wrap:nowrap;
			
		}	
			.pag__header .container-logo{
				margin:0 auto;
			}
			.pag__header .social-bar{
				width:95vw;
				justify-content:center;
			}
			.pag__header .social-bar i{
				width:1.2em;
				height:1.2em;
			}
			
			.pag__header .fa-cart-shoping--wite::before{
				margin-top:-.8em;
				margin-left:-1.5em;
			}
			
			.pag__header .navigation{
				margin:0 auto;
			}
			
		.pag__logo-title{
			font-size:1.5em;
		}
		.pag__logo-subtitle{
			font-size:.8em;
		}
	.pag__main, .pag__footer{
		flex-direction:column;
	}
	.nav  ul{
		justify-content:center;		
	}
	.pag__footer {
		align-content:center;
	}
	.container-banner{
		width:100%;
		height:auto;
	}
		.banner .container-title{
			font-size:1em;
		}
	.slogan{   
	   display:block;
	}
	.container-card-premios{
		width:80%;
	}
	.container-card-premios .premio-img{
		width:10em;
		height:8em;		
	}
	.pag__title{
		font-size:1.2em;
		line-height:1em
	}
	.pag__subtitle{
		font-size:1em;
		line-height:.8em
	}
	
}
@media (max-width: 600px) {
	.container-wrapper{
		width:100%;
	 }
	.block-card {
		flex: 1 1 100%;
	}
}
@media screen and (max-width: 480px) {
	.container-card-premios{
		width:100%;
	}
	.container-card-premios .premio-img{
		width:7em;
		height:6em;		
	}
}