﻿@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
	--colorMunicipio: #001e58;
}
.font-montserrat {
	font-family: 'Montserrat', sans-serif;
}

.font-work-sans {
	font-family: 'Work Sans', sans-serif;
}

.bg-gradient-gray {
	background: #828282;
	background: repeating-linear-gradient(to top, #828282 0%, #ffffff 100%);
}

.splide__arrow--prev svg,
.splide__arrow--next svg {
	fill: #fff;
}

.splide__pagination__page.is-active {
	background: var(--colorMunicipio) !important;
	transform: scale(1) !important;
	border: none !important;
}

.activeTab {
	background-color: #6b7280;
	color: #fff;
}

/* ------------------------------------------------------------------------- ITEMS DE TURIMOS ------------------------------------------------------------------------- */
.content__turismo .item__turismo img {
	width: 100%;
	max-width: 100%;
}

.content__turismo .item__turismo {
	max-width: 90vw;
}

.content__turismo .item__turismo:nth-child(2) img,
.content__turismo .item__turismo:nth-child(3) img {
	object-fit: cover;
	height: 70%;
	width: 100%;
}

.info__turismo {
	width: 100%;
	height: 30%;
	background-color: #3c3c3b;
	color: white;
	padding-inline: 20px;
	padding-block: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 10px;
	border-radius: 15px;
	font-weight: 600px;
	font-size: 20px;
}

.info__turismo h3 {
	font-weight: 600;
}

@media (width >= 1200px) {
	.content__turismo .item__turismo:nth-child(1) {
		border-radius: 10px;
		min-height: 652px;
	}

	.content__turismo .item__turismo:nth-child(1) img {
		width: 100%;
		max-width: 100%;
		min-height: 70%;
		border-radius: 10px 10px 0px 0px;
	}

	.content__turismo .item__turismo:nth-child(2),
	.content__turismo .item__turismo:nth-child(3) {
		display: flex;
		flex-direction: row;
		height: 313px;
	}
	.content__turismo .item__turismo:nth-child(2) img,
	.content__turismo .item__turismo:nth-child(3) img {
		width: 50%;
		height: 100%;
	}

	.content__turismo .item__turismo:nth-child(3) img {
		order: 2;
	}

	.info__turismo {
		display: flex;
		width: 50%;
		height: 100%;
	}
}

.content__turismo .item__turismo:nth-child(1) section {
	height: 30%;
	background-color: #3c3c3b;
	color: white;
	padding-inline: 20px;
	padding-block: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-radius: 0px 0px 10px 10px;
}

.content__turismo .item__turismo section h3 {
	font-size: 20px;
	font-weight: 500px;
}

.content__turismo .item__turismo section a {
	font-weight: 20px;
	background-color: white;
	display: inline-block;
	width: max-content;
	padding: 10px;
	border-radius: 20px;
	color: var(--colorMunicipio);
	font-weight: 600;
}
.content__turismo .item__turismo section a:hover {
	text-decoration: underline;
}

.info__turismo {
	width: 100%;
}

/* ------------------------------------------------------------------------- seccion de noticias ------------------------------------------------------------------------- */
/* noticias.css */
.noticias__contenedor {
	width: 100%;
	padding: 2.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem 1.5rem;
	max-width: 1280px;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.noticias__contenedor {
		grid-template-columns: repeat(3, 1fr);
	}
}

.noticia {
	background-color: #f5f4f4;
	border-radius: 0.375rem;
	position: relative;
	height: 520px;
	display: flex;
	flex-direction: column;
}

.noticia:nth-child(2),
.noticia:nth-child(3) {
	grid-column: span 1;
}

@media (min-width: 1024px) {
	.noticia:nth-child(2),
	.noticia:nth-child(3) {
		grid-column: span 2;
	}
}

.noticia__imagen {
	width: 100%;
	height: 50%;
	border-top-left-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
	object-fit: cover;
}

.noticia__fecha {
	background-color: var(--color-municipio);
	color: white;
	padding: 0.25rem 1.25rem;
	font-size: 0.875rem;
	border-radius: 0.125rem;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.noticia__contenido {
	padding: 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 50%;
}

.noticia__titulo {
	font-size: 1.125rem;
	color: #1f2937;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.noticia__descripcion {
	font-size: 0.875rem;
	color: #6b7280;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.noticia__icono i {
	color: var(--color-municipio);
	font-size: 2rem;
	transition: transform 0.5s ease;
}

.noticia__icono i:hover {
	transform: rotate(180deg);
}

/* Variables de color */
:root {
	--color-municipio: #007acc; /* Reemplaza con tu color real */
}

/* ------------------------------------------------------------------------- seccion de turismo ------------------------------------------------------------------------- */
#ctl00_PlaceHolderEnlacesInteres_g_bff30d72_67e5_49a7_95e2_be5d1424f4f8 img,
#ctl00_PlaceHolderServicioCiudadano_g_cb71e9de_d059_4e92_bfa4_1abb8a809232_ctl00_servicio_ciudadano img {
	max-width: 100%;
	filter: invert(1);
}
#ctl00_PlaceHolderEnlacesInteres_g_bff30d72_67e5_49a7_95e2_be5d1424f4f8 img:hover,
#ctl00_PlaceHolderServicioCiudadano_g_cb71e9de_d059_4e92_bfa4_1abb8a809232_ctl00_servicio_ciudadano img:hover {
	filter: invert(0);
}

/* estilo de tabla de sharepoint */

table#\{3E7609C9-3F71-40CA-810F-A8DC6691E4F7\}-\{CB8B29F9-CD5D-487A-9879-C210D17434A8\} #js-listviewthead-WPQ1 {
	background: #001e58;
	color: white !important;
}

table#\{3E7609C9-3F71-40CA-810F-A8DC6691E4F7\}-\{CB8B29F9-CD5D-487A-9879-C210D17434A8\} .ms-headerSortTitleLink {
	color: white !important;
}

table#\{9D4E35EA-F16A-4A06-A307-2CB2FBA67192\}-\{DDC24580-EBB9-4293-82B4-8D461E7F0290\} thead {
	background: #001e58;
}

table#\{9D4E35EA-F16A-4A06-A307-2CB2FBA67192\}-\{DDC24580-EBB9-4293-82B4-8D461E7F0290\} .ms-headerSortTitleLink {
	color: white !important;
}
.ms-vh-div {
	padding: 10px;
}

/* ------------------------------------------------------------------------- scrolltop ------------------------------------------------------------------------- */

.scrollTop {
	position: fixed;
	bottom: 45px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #001e58;
	box-shadow: 4px 4px 6px #00000029;
	text-align: center;
	opacity: 0;
	transition: all 300ms;
	transform: scale(0);
	overflow: hidden;
	cursor: pointer;
	z-index: 99;
}

.scrollTop__div {
	background-color: #fff;
	border-radius: 50%;
	width: 26px;
	min-width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 300ms;
	margin-left: 9px;
}

.scrollTop__icon {
	color: #001e58;
	font-size: 27px;
	font-weight: 700;
	text-align: center;
	transition: all 300ms;
}

.scrollTop__p {
	opacity: 0;
	transition: all 400ms;
	width: 30px;
	text-align: center;
	margin-right: 20px;
	margin-bottom: 0;
	font-size: 15px;
}

.scrollTop:hover {
	width: 118px;
	border-radius: 27px 10px 10px 27px;
	background: #001e58 0% 0% no-repeat padding-box;
}

.scrollTop:hover .scrollTop__div {
	margin-left: 0px;
	margin-right: 0px;
}

.scrollTop:hover .scrollTop__p {
	opacity: 1;
	color: #fff;
}

.scrollTop:hover .scrollTop__icon {
	color: #001e58;
}

.scrollTop:focus {
	border: 1px solid #000;
}
#js-listviewthead-WPQ1 {
	background: #001e58;
}
.ms-vh2 a {
	color: #fff !important;
}
.ms-vh-div span {
	color: #fff !important;
}
.ms-webpart-chrome.ms-webpart-chrome-vertical.ms-webpart-chrome-fullWidth table {
	display: flex;
	justify-content: center;
}
table#onetidDoclibViewTbl0 {
	display: block;
}
