:root {
	--primario: #174dd9;
	--sombra-card: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

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

body {
	font-family: 'Open Sans', sans-serif;
	background: #f2f2f2;
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100vh;
}

:is(h1, h2, h3, h4, h5, h6) {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
}

a {
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

img {
	vertical-align: top;
}

.contenedor {
	width: 90%;
	max-width: 1200px;
	margin: auto;
}

/* ----- HEADER -----  */
.header {
	background: #000;
	color: #fff;
	display: grid;
	grid-template-rows: auto 1fr;
	margin-bottom: 40px;

	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 5px;
		img {
			width: 8vw;
			min-width: 50px;
		}
	}

	.navbar {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		list-style: none;
		& a {
			color: #fff;
			padding: 10px 15px;
			display: block;
			transition: 0.2s ease background;
			&:hover {
				background: var(--primario);
				text-decoration: none;
			}
		}
	}

	.btn-menu {
		display: none;
		border: 1px solid rgba(255, 255, 255, 0.5);
		background: none;
		color: #fff;
		border-radius: 5px;
		padding: 10px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
		align-items: center;
		gap: 7px;
		cursor: pointer;
		&:hover {
			border: 1px solid rgba(255, 255, 255, 1);
		}

		.icono {
			width: 20px;
			height: 20px;
		}
	}

	@media screen and (max-width: 576px) {
		& {
			.logo {
				justify-content: space-between;
				.btn-menu {
					display: flex;
				}
			}
			.contenedor-navbar {
				position: fixed;
				z-index: 10;
				left: 0;
				top: 0;
				height: 100vh;
				width: 100vw;
				background: rgba(0, 0, 0, 0.5);
				display: none;
				&.active {
					display: block;
				}
				.navbar {
					background: #000;
					width: 70%;
					height: 100%;
					flex-direction: column;
					flex-wrap: nowrap;
					justify-content: flex-start;
					overflow: auto;
					height: 100%;
					padding-top: 46px;
					a {
						padding: 20px;
					}
				}
			}
		}
	}
}

/* ----- COMPONENTES ----- */
/* ----- CARD ----- */
.card {
	width: 100%;
	display: grid;
	grid-template-columns: auto 60%;
	color: #000;
	box-shadow: var(--sombra-card);
	&:hover {
		text-decoration: none;
	}

	.thumb {
		overflow: hidden;
		border-radius: 7px 0 0 7px;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform: scale(105%);
			transition: 0.3s ease all;
		}

		&:hover img {
			transform: scale(100%);
		}
	}

	.info {
		padding: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		border-radius: 0 7px 7px 0;
		background: #fff;
		.titulo {
			line-height: 22px;
			font-size: 20px;
		}

		.meta {
			display: flex;
			flex-wrap: wrap;
			gap: 20px;
			align-items: center;
			.categoria {
				font-weight: 600;
				font-size: 14px;
				color: #174dd9;
			}

			.fecha {
				font-size: 14px;
				color: #3c3c3c;
			}
		}

		.extracto {
			line-height: 170%;
			font-size: 14px;
			color: #0a0a0a;
		}
	}

	@media screen and (max-width: 768px) {
		& {
			grid-template-columns: auto 75%;
		}
	}
}

/* ----- MAIN ----- */
.main {
	/* ----- NOTICIA PRINCIPALES ----- */
	.noticias-principales {
		display: grid;
		grid-template-columns: 60% 1fr;
		gap: 20px;
		margin-bottom: 40px;
		.principal {
			position: relative;
			.thumb {
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: 10px;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transform: scale(105%);
					transition: 0.5s ease all;
				}
			}

			&:hover img {
				transform: scale(100%);
			}

			.info {
				position: absolute;
				bottom: 40px;
				left: -40px;
				width: 70%;
				background: #fff;
				border-radius: 5px;
				padding: 20px;
				display: flex;
				flex-direction: column;
				gap: 10px;
				box-shadow: var(--sombra-card);
				.titulo {
					font-size: 26px;
					line-height: 140%;
					color: #000;
				}
				.meta {
					display: flex;
					flex-wrap: wrap;
					gap: 20px;
					font-size: 14px;
					.categoria {
						font-weight: 600;
					}

					.fecha {
						color: #3c3c3c;
					}
				}
				.extracto {
					color: #0a0a0a;
					line-height: 24px;
					font-size: 14px;
				}
			}
		}

		@media screen and (max-width: 992px) {
			& {
				display: flex;
				flex-direction: column;
			}
		}

		@media screen and (max-width: 768px) {
			& {
				display: flex;
				flex-direction: column;
				.principal {
					background: #fff;
					border-radius: 10px;
					&:hover {
						text-decoration: none;
					}
					.thumb {
						border-radius: 10px 10px 0 0;
					}
					.info {
						position: relative;
						width: 100%;
						left: 0;
						right: 0;
						bottom: 0;
						background: none;
					}
				}
			}
		}
	}

	/* ----- NOTICIAS DESTACADAS ----- */
	.noticias-destacadas {
		display: grid;
		grid-template-columns: 1fr;
		gap: 15px;
		.card .info .titulo {
			font-size: 18px;
		}

		.titulo-seccion {
			font-size: 18px;
			font-family: 'Open Sans', sans-serif;
		}

		@media screen and (max-width: 992px) {
			& {
				grid-template-columns: 1fr 1fr;
				.titulo-seccion {
					grid-column: span 2;
				}
			}
		}

		@media screen and (max-width: 768px) {
			& {
				grid-template-columns: 1fr;
				.titulo-seccion {
					grid-column: span 1;
				}
			}
		}
	}

	/* ----- MAIN GRID ----- */
	.grid {
		display: grid;
		grid-template-columns: 70% 1fr;
		gap: 20px;
		margin-bottom: 40px;
		&.single-col {
			grid-template-columns: 1fr;
		}
		.card .titulo {
			font-size: 20px;
			line-height: 120%;
		}

		.noticias {
			display: flex;
			flex-direction: row;
			gap: 20px;
		}

		@media screen and (max-width: 768px) {
			& {
				grid-template-columns: 1fr;
			}
		}
	}

	/* ----- PAGINACION ----- */
	.paginacion {
		display: flex;
		gap: 20px;
		justify-content: space-between;
		margin-bottom: 20px;
		.boton {
			cursor: pointer;
			padding: 10px 20px;
			border-radius: 100px;
			border: none;
			color: #fff;
			font-weight: 600;
			font-family: 'Open Sans', sans-serif;
			transition: 0.3s ease background;
			background: #000;
			font-size: 14px;
			&:hover {
				background: var(--primario);
			}
			&.desactivado {
				cursor: default;
				opacity: 0.2;
				&:hover {
					background: #000;
				}
			}
		}
	}

	/* ----- ANUNCIOS ----- */
	.anuncios {
		display: flex;
		justify-content: center;
		.anuncio {
			width: 80%;
			height: 130px;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.leyenda {
				font-size: 14px;
				color: #3c3c3c;
				margin-top: 3px;
			}
		}

		@media screen and (max-width: 992px) {
			& .anuncio {
				width: 100%;
			}
		}
	}
}

/* ----- SIDEBAR ----- */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	.widgets {
		display: flex;
		flex-direction: column;
		gap: 20px;

		p {
			color: #3c3c3c;
			line-height: 160%;
			font-size: 14px;
		}
		.redes-sociales {
			display: flex;
			flex-direction: column;
			gap: 10px;
			.redes {
				display: grid;
				grid-template-columns: 1fr;
				gap: 10px;
				a {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 10px;
					background: #000;
					color: #fff;
					padding: 10px;
					border-radius: 3px;
					font-weight: 600;
					&:hover {
						text-decoration: none;
					}

					&.twitter {
						background: #1da1f2;
					}

					&.facebook {
						background: #1877f2;
					}

					&.youtube {
						background: #ff0000;
					}

					&.instagram {
						background: #c13584;
					}
				}

				@media screen and (max-width: 768px) {
					& {
						display: grid;
						grid-template-columns: 1fr 1fr;
					}
				}
			}
		}

		.publicidad {
			display: flex;
			justify-content: center;
			align-items: center;
			img {
				width: 100%;
				max-width: 350px;
				aspect-ratio: 1/1;
				object-fit: cover;
			}

			.anuncio {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
		}
	}
}

/* ----- FOOTER ----- */
footer {
	background: #000;
	padding: 40px 0;

	.logo {
		display: flex;
		justify-content: center;
		text-align: center;
		img {
			width: 10vw;
			min-width: 150px;
		}
	}

	.widgets {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		.enlaces {
			& ul {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 10px;
			}
			a {
				color: #fff;
			}
		}

		.redes-sociales {
			display: flex;
			flex-direction: column;
			gap: 10px;
			.redes {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 10px;
				a {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 10px;
					background: #000;
					color: #fff;
					padding: 10px;
					border-radius: 3px;
					font-weight: 600;
					&:hover {
						text-decoration: none;
					}

					&.twitter {
						background: #1da1f2;
					}

					&.facebook {
						background: #1877f2;
					}

					&.youtube {
						background: #ff0000;
					}

					&.instagram {
						background: #c13584;
					}
				}

				@media screen and (max-width: 768px) {
					& {
						display: grid;
						grid-template-columns: 1fr 1fr;
					}
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		& {
			.widgets {
				grid-template-columns: repeat(2, 1fr);
				.enlaces {
					align-items: center;
				}
			}
		}
	}

	@media screen and (max-width: 576px) {
		& {
			.widgets {
				gap: 40px;
				grid-template-columns: repeat(1, auto);
			}
		}
	}
}

/* ----- 404 ----- */
.pagina-404 {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 40px;
	.subtitulo {
		font-size: 20px;
	}
	.titulo {
		font-size: 40px;
	}
}