@charset "utf-8";
/* CSS Document */

@font-face{
    font-family: AlvaradoVar;
    src:url(fonts/AlvaradoVar.ttf);
}


*{
    margin:0;
    border:0;
    padding:0;
}

html,body{
  /*  width:100%;
	min-height: 100%;*/
	 		height: 100%;
    		margin: 0;
    		display: flex;
    		flex-direction: column;
            background-color: black;
            color: #f9a600;
            font: alvaradovar;
}

#navegacion{
	background-color:#f9a600;
	width: 100%;
	height: 10vh;
	position: absolute;
	top:0;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	flex-direction: column;
}
#navegacion img{
	height: 100%;
}
main {
	flex: 1;
            padding: 1rem;
            background-color: black;
            display: flex;
            flex-direction: column;
}
.wrapper2{
	flex: 1;
            padding: 1rem;
            background-color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
}

.wrapper {
            display: flex;
            flex-direction: column;
            flex: 1;
}

  header, footer {
            background-color: black;
            color: #b1aca4;
            text-align: center;
            padding: 1rem;
			font-weight: bold;
        }

footer{
	letter-spacing:0.03em;
	background-color: #171717;
	margin-top: 6vh;

}
footer p a {
            text-decoration: none; 
            color: #b1aca4;
}
	footer p img{
				width:1.5vh;
		
				text-align: center;
				margin-right:0.7vh;
			}
#EventoPrincipal{
	margin-bottom: 10em;
	margin-top: 4em;
}

.Next div, .Next p, #EventoPrincipal h2{
	color: #f9a600;
	
}


.Next{
	display: grid;
	grid-template-rows: auto auto auto auto;
	grid-template-columns: repeat(4, minmax(10%, 1fr));
	margin-left: 30%;
	row-gap: 6px;
	width: 42%;
	max-width:1000px;
	container-type:normal;
}
.Next div{
	row-gap: 7%;
	font: alvaradovar;
	
	
}

.hora, .direccion, .lugar{
	font-size:clamp(0.3em, 1.4vw, 1.4vw);
	letter-spacing:0.05em;
}
.Dia{
	grid-area: 1/ 1 / 3 / 3;
	font-size: clamp(40px, 11cqw, 11cqw);
	text-align: start;
	align-self:center;
	font-weight: 800;
}
.De{
	grid-area: 1/ 2 / 3 / 3;
	/* font-size: 3.8em; */
	font-size: clamp(10px, 3.8cqw, 4.5cqw);
	display: grid;
	align-items: center;
	place-items:center;
	font-weight: 800;
}
.Mes{
	grid-area: 1/ 3 / 3 / 5;
	font-size: clamp(40px, 3.8cqw, 6.5cqw);
	display: grid;
	align-items: center;
	text-align: end;
	font-weight: 800;
}
.Next2{
	display: grid;
	grid-area: 3 / 1 / 4 / -1; 
	grid-template-rows: repeat(auto, auto);
	grid-template-columns: repeat(2, minmax(30%, 1fr));
	container-type:inline-size;
}

.NombreEvento{
	display: grid;
	align-items: center;
	place-items:center;
	grid-area: 1 / 1 / 2 / -1;
	font-size:clamp(1.3em, 2.29vw, 2.39vw);
	letter-spacing: 0.228em;
	width: 100%;
	margin-bottom: 3%;
	container-type:inline-size;
	font-weight: 500;
}
.Lugar, .Direccion, .Hora{
	font-size:clamp(17px, 1.415vw, 1.417vw);
	font: alvaradovar;
	font-weight: 400;
	font-style: italic;
}


.Direccion{
	grid-area: 4 / 1 / 5 / 2;
	text-align:start;
	
}
.Lugar{
	grid-area: 3 / 1 / 4 / 2;
	
	
}
.Hora{
	grid-area: 3 / 2 / 4 / -1;
	text-align: end;
}

@container(width < 700px) {
	.Next{
		width:60%;
	}
	.next2 {
        grid-template-columns: 1fr;
		
			
    }
    
    .Hora {
        grid-area: 4 / 1 / 5 / -1; 
        text-align: start; 
    }
	.Lugar{
		grid-area: 2 / 1 / 3 / -1;
		
	}
	.Direccion{
		grid-area: 3 / 1 / 4 / -1;
	}
}
	.OtrosEventos{
		
		margin: auto;
		margin-top:12%;	
		padding-top: 1.3%;
		font: alvaradovar;
		display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            width: 80%;
            justify-content: center;
	
		
		
	}
	
  .secondary-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            width: 80%;
            justify-content: center;
	 
	   		
        }
        .secondary {
            background-color: black;
            padding-left: 1rem;
            flex: 1 1 calc(33.333% - 2rem);
            box-sizing: border-box;
            border-left: 1px solid #f9a600;
			
        }
.secondary h3{
	font-size: 1.7REM;
	margin-bottom: 2%;
}
.secondary p{
	font-size: 1.24rem;
}
.secondary p a{
	text-decoration: none;
}
.fecha{
	margin-top: 2%;
	letter-spacing: -0.05em;
	font-size: 1.5rem !important;
	font-style: italic;
}
        @media (max-width: 768px) {
			#EventoPrincipal{
				margin-bottom: 4em;
				margin-top:8em;
			}
			.Next{
				height:40vh;
				width:50%;
				margin-left:15%;
			}
			.Dia, .Mes{
				font-size:calc(40px + 4vw);
			}
			.NombreEvento{
				font-size:calc(1.3em + 2vw);
			}
			.Direccion, .Lugar, .Hora{
				font-size:calc(20px + 0.2vw);
			}
            .secondary {
                flex: 1 1 calc(50% - 2rem);
            }
        }
        @media (max-width: 480px) {
			.Dia, .Mes{
				font-size:calc(40px + 4vw);
			}
            .secondary {
                flex: 1 1 100%;
            }