/* =====================
   BASE & RESET
======================*/
html,
body {
	width: 100%;
}

html {
	font-size: 10px;
}

body {
	font-family: "GothamRnd", "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	background-color: #d6f4ff;
	font-size: 14px !important;
}

/* =====================
   FONTS
======================*/
@font-face {
	font-family: "GothamRnd";
	src: url("../fonts/gothamrnd/gothamrnd_book.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "GothamRnd";
	src: url("../fonts/gothamrnd/gothamrnd_bold.otf") format("opentype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Slab";
	src: url("../fonts/roboto-slab/RobotoSlab-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto Slab";
	src: url("../fonts/roboto-slab/RobotoSlab-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

/* =====================
   NAVBAR & MENUS
======================*/
#wrapper {
	overflow-x: visible;
}

.navbar {
	font-family: GothamRnd !important;
	/*font-family: "Roboto Slab", serif !important;*/
	margin-bottom: 0 !important;
	border-radius: 0 !important;
}

	.navbar .nav:nth-child(1) {
		margin-top: 5px !important;
		flex-direction: row !important;
	}

	.navbar .nav:nth-child(2) {
		flex-direction: row !important;
	}

	.navbar .nav:nth-child(1) a {
		color: #fff !important;
		font-weight: bold !important;
		padding-left: 0 !important;
		padding-right: 50px !important;
		padding-top: 10px !important;
	}

		.navbar .nav:nth-child(1) a:focus {
			background: transparent !important;
		}

		.navbar .nav:nth-child(1) a:hover {
			background-color: transparent !important;
		}

.navbar-right {
	margin-right: 0 !important;
}

/*#mobile-dropdown-menu {*/
	/*	display: none;*/
	/*position: absolute;
	top: 40px;
	left: 40px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	min-width: 160px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}*/
#mobile-dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	transform: none;
	min-width: 180px;
	background: rgba(255,255,255,.95);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility .3s ease;
}

	#mobile-dropdown-menu a {
		display: block;
		color: #0068a5;
		padding: 10px 16px;
		text-decoration: none;
		transition: background-color 0.3s ease;
	}

		#mobile-dropdown-menu a:hover {
			background-color: #9becff;
			font-weight: bold;
			border-radius: 6px;
		}

/* =====================
   BUTTONS
======================*/
.btn-sigue-tu-caso,
.btn-ver-mas {
	background-color: transparent !important;
	border: 1px solid #00c0fa !important;
	color: white !important;
	padding: 8px !important;
	transition: background-color 0.3s ease !important;
	font-size: 14px;
	line-height: 1.42857143;
}

	.btn-sigue-tu-caso:hover {
		background-color: #0d94cf !important;
		border: 1px solid #0d94cf !important;
		color: white !important;
	}

#menus.scrolled-half .btn-sigue-tu-caso:hover {
	background-color: #0068a5 !important;
	border: 1px solid #0068a5 !important;
	color: white !important;
}

.btn-ver-mas:hover {
	color: white !important;
}

.btn-ver-mas.p1:hover {
	background-color: #662483 !important;
	border: 1px solid white !important;
	color: white !important;
}

.btn-ver-mas.p2:hover {
	background-color: #0068a5 !important;
	border: 1px solid white !important;
	color: white !important;
}

.btn-ver-mas.p3:hover {
	background-color: #12a19a !important;
	border: 1px solid white !important;
	color: white !important;
}

.btn-reporta {
	height: 50px !important;
	background-color: #662483 !important;
	border-bottom: 1px solid white !important;
	border-left: 1px solid white !important;
	border-right: 1px solid white !important;
	padding: 15px 20px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	color: white !important;
	font-weight: bold !important;
	font-size: 18px !important;
	margin-top: -5px;
}

/* =====================
   NAVIGATION & HEADER
======================*/
.navbar-nav > li > a {
	font-size: 18px !important;
}

.fixed-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	background-color: rgba(255, 255, 255, 0.2); /* Fondo semitransparente */
	backdrop-filter: blur(10px); /* Desenfoque del fondo */
	-webkit-backdrop-filter: blur(10px); /* Para soporte en Safari */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	border-bottom-color: transparent !important;
}

.top-bar {
	background-color: white;
	color: white;
	padding: 10px 0;
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	/*.top-bar > .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.top-bar .logo-siseve-cabecera {
		float: none !important;
		width: auto !important;
		max-width: 50%;
		flex: 0 1 50%;
	}

	.top-bar .logo-siseve-cabecera:first-child {
		justify-content: flex-start;
	}

	.top-bar .logo-siseve-cabecera:last-child {
		justify-content: flex-end;
	}

	.top-bar .logo-siseve-cabecera img {
		width: auto;
		max-width: 100%;
		height: auto;
	}*/

.bottom-bar {
	background-color: #0068a5 !important;
	color: white;
	padding: 10px 0;
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*font-family: GothamRnd !important;*/
}

.img-fluid {
	width: 250px;
	max-width: 100%;
	height: auto;
}

.main-nav {
	/*background-color: rgba(0, 38, 62, 0.4);
  border: none;*/
	background: linear-gradient(to bottom, rgba(0, 38, 62, 0.4), rgba(0, 38, 62, 0.2));
	border-bottom: none;
	box-shadow: none;
}

#spacer {
	display: none;
}

/* =====================
   BLOCKS & INFO
======================*/

.info-blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	background-color: #eee;
	transition: all 0.3s ease;
	/*height: 200px;*/
	height: 170px;
	width: 100%;
	position: relative;
}

	.info-blocks.stop {
		position: absolute;
		top: auto;
		bottom: 240px; /* altura del footer */
		left: 0;
		width: 100%;
	}

#menus {
	height: 60px;
}

	#menus.scrolled-half {
		background-color: #0094cd !important;
		transition: background-color 0.3s;
		box-shadow: none !important;
	}

.block {
	color: white;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	/*height: 200px;*/
	height: 170px;
	display: flex !important;
	/*justify-content: center;
    align-items: center;*/
	justify-content: flex-end;
	/* align-items: flex-end; */
	align-items: center;
	font-weight: bold;
	/*font-family: GothamRnd !important;*/
}

	.block > div h1 {
		font-size: 2.5rem !important;
		font-weight: bold !important;
		text-transform: uppercase;
		margin-top: 10px;
		margin-bottom: 10px;
		color: white !important;
	}

.info-blocks.sticky .block {
	height: 70px;
}

	.info-blocks.sticky .block > div {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

		.info-blocks.sticky .block > div h1 {
			font-size: 1.5rem !important;
		}

.block::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
	transition: transform 0.3s ease;
}

.block1::before {
	background-image: url("../images/botones/prevencion.jpg");
}

.block2::before {
	background-image: url("../images/botones/sobre.jpg");
}

.info-blocks.sticky .block1::before,
.info-blocks.sticky .block2::before,
.info-blocks.sticky .block3::before {
	background-image: none !important;
}

.block::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.75;
}

.block1::after {
	background-color: #662483;
}

.block2::after {
	background-color: #0068a5;
}

.block3::after {
	background-color: #038f88;
}

.block:hover::before {
	transform: scale(1.1);
	transition: transform 0.3s ease;
}

.block3::before {
	background-image: url("../images/botones/estadistica.jpg");
	transform: scaleX(-1);
	transition: transform 0.3s ease;
}

.block1:hover::before,
.block2:hover::before {
	transform: scale(1.1);
}

.block3:hover::before {
	transform: scaleX(-1) scale(1.1);
}

.block:hover::after {
	opacity: 0.9;
	transition: opacity 0.3s ease;
}

.info-blocks.sticky .block::after,
.info-blocks.sticky .block:hover::after {
	opacity: 1;
}

.block > div {
	position: relative;
	z-index: 2;
	padding: 0 5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: start;
	align-items: start;
	width: 100%;
}

/* =====================
   SLIDER & PLACEHOLDER
======================*/
.placeholder-image {
	/* height: 220px; */
	background-color: #d6f4ff;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333;
	font-size: 24px;
	width: 100%;
	position: relative;
	overflow: hidden;
	height: auto;
	padding-top: 40px;
}

.splide__slide {
	height: 220px;
	width: 100%;
	position: relative;
	overflow: hidden;
}


.splide__track {
	width: 100%;
}

.splide__pagination__page.is-active {
	background: #662483 !important;
}

.splide__pagination__page {
	width: 12px !important;
	height: 12px !important;
}

#main-slider.splide {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #d6f4ff !important;
	margin-bottom: 0 !important;
}

.splide__track,
.splide__list,
.splide__slide {
	height: 100%;
	min-height: 100%;
}


.placeholder-image {
	height: 600px;
	padding-top: 100px;
}

.splide__slide img {
	width: 100%;
	height: 600px;
	aspect-ratio: 1/1;
	object-fit: contain;
	object-position: top center;
}

.fixed-header + .placeholder-image {
	margin-top: 70px;
}

@media only screen and (max-width: 600px) {
	.placeholder-image {
		height: 500px;
	}

	.splide__slide img {
		object-position: center 50px;
	}
}

@media screen and (min-width: 1536px) {
	.placeholder-image {
		height: calc(100vh - 170px);
		padding-top: 0;
	}

	.splide__track,
	.splide__list,
	.splide__slide {
		height: 100%;
	}

		.splide__slide img {
			height: 100%;
			width: 100%;
			aspect-ratio: 1/1;
			object-fit: cover;
			object-position: center center;
		}

	.fixed-header + .placeholder-image {
		margin-top: 0;
	}
}

/* =====================
   CARDS
======================*/
.card {
	display: flex;
	flex-direction: column;
	width: clamp(20rem, calc(20rem + 2vw));
	overflow: hidden;
	box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
	border-radius: 1em;
	background: #fbfbfc;
	height: 430px;
	transition: all 0.3s ease;
	/*font-family: GothamRnd !important;*/
}

	.card:hover {
		box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.2);
	}

	.card img {
		max-width: 100%;
		display: block;
		object-fit: cover;
		height: 250px;
		transition: transform 0.3s ease;
		width: 600px;
		object-position: center center;
	}

	.card:hover img {
		transform: scale(1.05);
	}

.card__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: #0094cd !important;
	font-size: 1.5rem !important;
}

	.card__body a {
		display: none;
	}

	.card__body h4 {
		font-size: 2rem !important;
		text-transform: capitalize;
		color: #31aba7 !important;
		font-weight: bold;
		margin-bottom: unset;
	}

	.card__body p {
		font-size: 2rem !important;
		margin-bottom: unset;
		line-height: 1.1;
	}

.card__footer {
	display: flex;
	padding: 1rem;
	margin-top: auto;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
}

	.card__footer a:hover {
		background-color: #0d94cf !important;
		color: #fff !important;
	}

.user {
	display: flex;
	gap: 0.5rem;
}

.user__image {
	border-radius: 50%;
}

.user__info > small {
	color: #666;
}

.btn-protocolo {
	background-color: #9becff !important;
	color: #0d94cf !important;
	padding: 3px 20px !important;
	font-weight: bold !important;
	border-radius: 15px;
}

a.btn-protocolo:hover {
	color: #0094cd !important;
}

/* =====================
   VIDEO & PROTOCOL
======================*/
.content-video {
	padding-top: 50px;
	padding-bottom: 20px;
	background-color: #f8f8f8;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("../images/content-video.jpg");
}

.content-protocol {
	position: relative;
	overflow: hidden;
}

	.content-protocol::before {
		content: "";
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center top -50px;
		background-image: url("../images/content-protocol.jpg");
		z-index: 0;
	}

	.content-protocol::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		opacity: 0.9;
		background-color: #caf5ff;
	}

	.content-protocol > div {
		position: relative;
		z-index: 2;
		padding: 0 1rem;
	}

.wave-divider {
	background: #f8f8f8 !important;
}

#video-list {
	flex: 1;
	background: #fafafa;
	border-left: 1px solid #ddd;
	overflow-y: auto;
	max-height: 350px;
	padding: 20px 30px;
	border: 1px solid #ddd;
	border-radius: 5px;
	/*font-family: GothamRnd !important;*/
}

.video-list-item {
	display: flex;
	cursor: pointer;
	padding: 10px 20px;
	border-bottom: 1px solid #eee;
	transition: background 0.3s;
	border-radius: 4px;
}

	.video-list-item:hover {
		background: #ddd;
	}

	.video-list-item.active {
		background: #9becff;
	}

		.video-list-item.active .video-thumb {
			filter: brightness(55%);
		}

.video-thumb {
	width: 120px;
	height: 70px;
	background-size: cover;
	background-position: center;
	margin-right: 10px;
	border-radius: 4px;
	flex-shrink: 0;
	transition: filter 0.3s ease;
}

.video-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: GothamRnd !important;
}

.video-title {
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 5px 0;
	color: #0068a5;
}

.video-subtitle {
	font-size: 10px;
	font-weight: 300;
	margin: 0 0 5px 0;
	color: #0068a5;
}

#video-title-display {
	background-color: #a6fffc;
	height: 40px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 5px 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	color: #0068a5;
	text-align: center;
}

/* =====================
   FOOTER
======================*/
.footer {
	background-color: #1d1d1b;
	color: white;
	padding: 20px 0;
	text-align: center;
	height: 200px;
	position: relative !important;
	border: none !important;
	font-family: GothamRnd !important;
}

	.footer .content-footer {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		justify-content: space-between;
		align-items: center;
		padding-top: 10px;
	}

		.footer .content-footer .contact {
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: start;
			gap: 5px;
			margin-top: 20px;
			text-align: left;
		}

/* =====================
   UTILITIES & ANIMATIONS
======================*/
#btn-subir {
	position: fixed;
	bottom: 80px;
	right: 10px;
	z-index: 2000;
	cursor: pointer;
	background: transparent;
	border: none;
	outline: none;
	transition: opacity 0.3s;
	opacity: 0.85;
}

	#btn-subir img {
		width: 60px;
		height: 60px;
		display:;
		filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
		transition: transform 0.2s;
	}

	#btn-subir:hover img {
		transform: scale(1.1);
		opacity: 1;
	}

#testModal .modal-body {
	position: relative;
	padding: 0px;
}

#testModal .modal-dialog {
	max-width: 800px;
	margin: 30px auto;
	width: 100%;
}

#testModal .modal-content {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

#testModal .close {
	position: absolute;
	right: -30px;
	top: 0;
	z-index: 999;
	font-size: 2rem;
	font-weight: normal;
	color: #fff;
	opacity: 1;
}

.illustration {
	align-items: start !important;
}

#canales-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	justify-content: center;
	align-items: center;
	color: white !important;
	white-space: nowrap;
}

	#canales-container > div {
		display: flex;
		justify-content: center;
		align-content: center;
	}

		#canales-container > div .desc-canal {
			display: flex;
			flex-direction: row;
			font-size: 2.5rem;
		}

	#canales-container .desc-canal span {
		font-size: 18px !important;
	}

	#canales-container h1 {
		font-size: 2.5rem;
		font-weight: bold;
		margin: 0;
		margin-right: 5px;
		color: white !important;
	}

	#canales-container span {
		font-size: 2.5rem;
		font-weight: 400;
	}

#mobil-menu {
	opacity: 0;
	pointer-events: none;
}

/* =====================
   ANIMATIONS
======================*/
@keyframes shake-horizontal {
	0%, 100% {
		transform: translateX(0);
	}

	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-10px);
	}

	20%, 40%, 60%, 80% {
		transform: translateX(10px);
	}
}

.shake-horizontal {
	animation: shake-horizontal 0.6s;
}

@keyframes bell-ring {
	0% {
		transform: rotate(0);
	}

	10% {
		transform: rotate(-15deg);
	}

	20% {
		transform: rotate(10deg);
	}

	30% {
		transform: rotate(-10deg);
	}

	40% {
		transform: 6deg;
	}

	50% {
		transform: -4deg;
	}

	60% {
		transform: 2deg;
	}

	70% {
		transform: -1deg;
	}

	80%, 100% {
		transform: rotate(0);
	}
}

.bell-animate {
	animation: bell-ring 1s infinite;
	transform-origin: 50% 10%;
}

#cards-container {
	padding-bottom: 30px;
}

/* =====================
   MEDIA QUERIES (ordenados de menor a mayor)
======================*/
@media (min-width: 576px) and (max-width: 767.98px) {
	.container {
		max-width: 100%;
	}

	.splide__slide img {
		object-position: center 50px;
	}
}

@media (max-width: 767.98px) {
	.block > div h1 {
		font-size: 1.5rem !important;
		text-align: center;
	}

	.info-blocks.sticky .block > div h1 {
		font-size: 1.2rem !important;
	}

	.section {
		padding: 0;
	}

	#canales-container {
		grid-template-columns: repeat(3, max-content);
		justify-content: center;
		gap: 8px;
	}

		#canales-container div:nth-child(1) {
			grid-column: auto;
		}

		#canales-container div {
			grid-column: auto;
		}

		#canales-container > div .desc-canal {
			flex-direction: column;
		}

		#canales-container h1 {
			font-size: 1.2rem;
		}

		#canales-container span {
			font-size: 1rem !important;
		}

	.footer .content-footer .contact {
		font-size: 1rem;
	}

	.info-blocks {
		grid-template-columns: 1fr;
		height: auto;
	}

	#cards-container {
		padding: 0 30px;
	}

	/*.card {
		height: 200px;
		margin-bottom: 30px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"header body"
			"header footer";
		width: 100%;
	}

	.card__header {
		width: 100%;
		height: auto;
		grid-area: header;
	}

	.card__footer {
		display: flex;
	}*/

	.card {
		margin-bottom: 30px;
		display: grid;
		grid-template-columns: 45% 55%;
		grid-template-rows: auto auto;
		width: 100%;
		height: auto;
		min-height: 200px;
	}

	.card__header {
		grid-column: 1;
		grid-row: 1 / span 2;
		height: 100%;
	}

	.card__footer {
		display: flex;
		grid-column: 2;
		grid-row: 2;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}

	/*.card img {
		display: block;
		transition: transform 0.3s ease;
		width: 100%;
		height: 100%;
		object-position: center center;
	}

	.card:hover img {
		transform: scale(1);
	}*/

	.card img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		transition: transform 0.3s ease;
	}

	.card:hover img {
		transform: scale(1);
	}

	.card__body a {
		display: none;
	}

	/*.card__body a {
		display: inline-block;
		width: 100%;
		text-align: center;
	}*/

	/*.card__body {
		padding: 1rem;
		display: grid;
		flex-direction: column;
		gap: 0.5rem;
		color: #0094cd !important;
		font-size: 1.5rem !important;
		justify-items: center;
		align-items: flex-start;
		width: 100%;
		height: auto;
		top: 0;
		grid-area: body;
	}

		.card__body h4 {
			font-size: 1.5rem !important;
		}

		.card__body p {
			font-size: 1rem !important;
		}*/

	.card__body {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 15px;
		gap: 10px;
		width: 100%;
		height: auto;
		color: #0094cd !important;
		font-size: 1.5rem !important;
	}

		.card__body h4 {
			font-size: 1.5rem !important;
			margin: 0;
		}

		.card__body p {
			font-size: 2rem !important;
			margin: 0;
			flex: 1;
		}

	.img-fluid {
		width: 150px;
	}

	.top-bar .container {
		width: 100%;
	}

	#menus {
		height: 55px;
	}


	.block a.btn {
		margin-right: 0 !important;
		padding: 5px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.block > div {
		padding: 1rem;
		justify-content: center;
		align-items: center;
	}

	.block {
		height: 120px;
	}

	.block2::before {
		background-position: center top -60px;
	}

	.content-footer {
		align-items: start !important;
	}
}

@media (max-width: 850px) {

	#desktop-menu {
		display: none;
	}

	#mobil-menu {
		opacity: 1;
		pointer-events: auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		width: 100%;
		margin: 0;
		padding: 0;
		justify-content: center;
		align-content: center;
	}

		#mobil-menu div:nth-child(1) {
			grid-area: 1 / 1 / 2 / 2;
		}

		#mobil-menu div:nth-child(2) {
			grid-area: 1 / 5 / 2 / 6;
		}

	.btn-sigue-tu-caso,
	.btn-reporta {
		font-size: 1.2rem !important;
	}

	.btn-sigue-tu-caso {
		margin-right: 20px !important;
	}

	.logo-siseve-cabecera img {
		width: 70%;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.col-gap-6 {
		margin-bottom: 20px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-reporta {
		font-size: 14px !important;
	}

	.navbar-nav > li > a {
		font-size: 14px !important;
	}

	#canales-container > div .desc-canal {
		flex-direction: column;
	}

	.container {
		max-width: 90%;
	}

	#video-list {
		height: 300px;
	}

	.card img {
		height: 220px !important;
	}
}

@media (min-width: 768px) {
	.block > div h1 {
		font-size: 1.6rem !important;
	}

	.info-blocks.sticky .block > div h1 {
		font-size: 1.2rem !important;
	}

	#canales-container h1 {
		font-size: 2rem;
	}

	#canales-container span {
		font-size: 1.5rem !important;
	}

	.footer .content-footer .contact {
		font-size: 1.2rem;
	}

	#canales-container > div:nth-child(1) {
		justify-content: start;
	}

	.splide__slide img {
		width: 100%;
		display: block;
		aspect-ratio: 1/1;
		object-fit: contain;
		object-position: top center;
	}


	.placeholder-image {
		height: 700px;
		padding-top: 120px;
	}

	.splide__slide img {
		height: 700px;
	}
}

@media (min-width: 992px) and (max-width: 1449px) {
	#canales-container h1 {
		font-size: 2rem;
	}

	#canales-container span {
		font-size: 1.5rem !important;
	}

	.info-blocks.sticky {
		top: 145px;
	}

	.block > div h1 {
		font-size: 2rem !important;
	}

	.info-blocks.sticky .block > div h1 {
		font-size: 1.2rem !important;
	}

	#video-list {
		height: 300px;
	}

	.placeholder-image {
		height: 800px;
		padding-top: 120px;
	}

	.splide__slide img {
		height: 800px;
	}
}

@media (min-width: 1200px) and (max-width: 1349px) {
	.placeholder-image {
		height: 900px;
		padding-top: 120px;
	}

	.splide__slide img {
		height: 900px;
	}
}

@media (min-width: 1350px) and (max-width: 1449px) {
	.placeholder-image {
		height: 1000px;
		padding-top: 120px;
	}

	.splide__slide img {
		height: 1000px;
	}
}

@media only screen and (min-width: 1450px) {
	.logo-siseve-cabecera img {
		width: 72%;
	}

	.logo-minedu-cabecera img {
		width: 72%;
	}

	.info-blocks.sticky {
		position: fixed;
		top: 137px;
		left: 0;
		width: 100%;
		z-index: 999;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		height: 70px;
	}

	.block > div h1 {
		font-size: 2.5rem !important;
	}

	.info-blocks.sticky .block > div h1 {
		font-size: 1.5rem !important;
	}

	.block2::before {
		background-position: center top -40px;
	}

	.info-blocks.sticky .block > div h1 {
		font-size: 2.2rem !important;
	}

	.placeholder-image {
		height: calc(100vh - 170px);
		padding-top: 0;
	}

	.splide__track,
	.splide__list,
	.splide__slide {
		height: 100%;
	}

		.splide__slide img {
			height: 100%;
			width: 100%;
			object-fit: cover;
			object-position: center center;
			aspect-ratio: 1/1;
		}

	.fixed-header + .placeholder-image {
		margin-top: 0;
	}

	#mobil-menu{
		display: none !important
	}
}


@media (min-width: 1600px) and (max-height: 1080px) {
	.splide__slide img {
		width: 100%;
		margin: 0 auto;
	}
}

@media (min-width: 1600px) and (max-height: 950px) {
	.splide__slide img {
		width: 70%;
		margin: 0 auto;
		object-fit: contain;
		object-position: top center;
	}
}

@media (min-width: 1600px) and (max-height: 900px) {
	.splide__slide img {
		width: 60%;
		margin: 0 auto;
		object-fit: contain;
		object-position: top center;
	}
}


@media (min-width: 1920px) and (max-height: 1440px) {
	.splide__slide img {
		width: 100%;
		margin: 0 auto;
	}
}

@media (min-width: 1920px) and (max-height: 1080px) {
	.splide__slide img {
		width: 70%;
		margin: 0 auto;
	}
}

@media (min-width: 1920px) and (max-height: 950px) {
	.splide__slide img {
		width: 65%;
		margin: 0 auto;
		object-fit: contain;
		object-position: top center;
	}
}

@media (min-width: 1920px) and (max-height: 900px) {
	.splide__slide img {
		width: 60%;
		margin: 0 auto;
		object-fit: contain;
		object-position: top center;
	}
}



@media (min-width: 2560px) and (max-height: 1440px) {
	.splide__slide img {
		width: 100%;
		margin: 0 auto;
	}
}
/* 4K Ultra HD: 3840x2160 */
@media (min-width: 3840px) and (max-height: 2160px) {
	.splide__slide img {
		width: 100%;
		margin: 0 auto;
	}
}
/* UltraWide: 3440x1440, 5120x1440 */
@media (min-width: 3440px) and (max-height: 1440px) {
	.splide__slide img {
		width: 100%;
		margin: 0 auto;
	}
}

@media (min-width: 5120px) and (max-height: 1440px) {
	.splide__slide img {
		width: 100%;
		margin: 0 auto;
		object-fit: contain;
		object-position: top center;
	}
}

.navbar > .container, 
.navbar > .container-fluid {
	align-items: start !important;
}

/* Eliminar el override que rompe la relación de aspecto de Bootstrap */
/* .embed-responsive-16by9::before {
    padding-top: 0 !important;
} */

/* Si quieres padding interno visual, agrégalo así: */
.embed-responsive-16by9 {
	padding: 10px; /* Ajusta el valor según lo que necesites */
}

.embed-responsive .embed-responsive-item,
.embed-responsive img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* o 'contain' si prefieres ver toda la imagen */
}



.top-navigation .nav.navbar-nav > li:before {
	display: none !important;
}


#page-wrapper {
	padding: 0 !important;
}

select.form-control {
	height: auto !important;
}

#mobile-dropdown-menu.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mobile-dropdown-menu.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

input.form-control, select.form-control {
	font-size: 1.5rem !important;
	font-family: GothamRnd !important;
}

.form-group label {
	font-family: GothamRnd !important;
}

.modal-content {
	border-radius: 20px !important;
}

.tituloIntranet, .modal-header {
	border-top-left-radius: 20px !important;
	border-top-right-radius: 20px !important;
}

.cuerpo-login-modal, .mp-cont {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.close {
	font-size: 2.5rem;
	margin-right: 10px;
}

/* =====================
   ACERCA DE SISEVE (BANNER)
====================== */
.acerca-de_banner-nav {
	position: relative;
	height: 350px;
	margin-top: 70px;
	overflow: hidden;
}

	.acerca-de_banner-nav .acerca-de_banner-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url("../images/botones/sobre.jpg");
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 0;
	}

	.acerca-de_banner-nav .acerca-de_banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 98, 170, 0.95);
		z-index: 1;
	}

	.acerca-de_banner-nav .acerca-de_banner-content {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

.acerca-de_banner-title {
	text-align: center;
	color: #fff;
	font-size: 64px;
	font-weight: bold;
	margin-top: 60px;
	margin-bottom: 0;
	letter-spacing: 1px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.acerca-de_breadcumb {
	height: 120px;
	padding: 20px 30px;
}

.acerca-de_nav-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 30px;
	background: transparent;
	padding: 20px 30px;
	height: 140px;
	position: absolute;
	width: 100%;
	margin-top: -70px;
}

.acerca-de_nav-btn {
	padding: 15px 20px;
	border-radius: 15px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #0077a7;
	text-align: center;
	min-width: 180px;
	cursor: pointer;
	transition: transform 0.2s;
	border: none;
	margin: 0 2px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.acerca-de_nav-btn:after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-right: auto;
		margin-left: auto;
		top: 100%;
		width: 0;
		height: 0;
		border-top: 20px solid #f1c40f;
		border-right: 20px solid transparent;
		border-bottom: 0 solid transparent;
		border-left: 20px solid transparent;
	}

	.acerca-de_nav-btn.inactive:after {
		border-top: 10px solid transparent;
	}

	.acerca-de_nav-btn:hover {
		transform: translateY(-2px);
	}

	.acerca-de_nav-btn.active {
		background: #f1c40f;
	}

	.acerca-de_nav-btn.inactive {
		background: #bdc3c7;
		color: #2c3e50;
	}

.acerca-de_definicion {
	position: relative;
	margin-top: 70px;
}

	.acerca-de_definicion .main-content {
		display: flex;
		gap: 40px;
		margin-bottom: 40px;
	}

	.acerca-de_definicion #sobViolencia {
		position: relative;
		overflow: visible;
	}

		.acerca-de_definicion #sobViolencia::before {
			content: "";
			position: absolute;
			inset: 0;
            /*background-image: url("/img/acerca-de/v2/decorativos/deco_circulos_fondo.png");
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;*/
			z-index: 0;
			pointer-events: none;
		}

		.acerca-de_definicion #sobViolencia > * {
			position: relative;
			z-index: 1;
		}

		.acerca-de_definicion .main-content .text-section {
			flex: 1;
			text-align: left;
			color: #3498db;
		}

			.acerca-de_definicion .main-content .text-section .main-content-main-title {
				font-size: 5rem;
				color: #0368a6;
				font-weight: 500;
				margin-bottom: 30px;
				text-align: left;
			}

			.acerca-de_definicion .main-content .text-section .definition {
				color: #0368a6;
				font-size: 1.8rem;
			}

		.acerca-de_definicion .main-content .illustration {
			flex: 0 0 400px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
		}

			.acerca-de_definicion .main-content .illustration > .people-group, .acerca-de_definicion .main-content .illustration > .people-group2 {
				height: 300px;
				padding: 0;
				width: 100%;
				background: transparent;
				display: flex;
				justify-content: center;
				align-items: center;
			}

				.acerca-de_definicion .main-content .illustration > .people-group img {
					width: auto;
					height: 250px;
				}

				.acerca-de_definicion #sobReportar .illustration > .people-group img {
					width: 350px;
					height: auto;
					max-width: 100%;
				}

				.acerca-de_definicion .main-content .illustration > .people-group2 img {
					width: auto;
					height: 250px;
				}

				.acerca-de_definicion #sobImportante .illustration > .people-group2 img {
					width: 150px;
					height: auto;
					max-width: 100%;
				}

				.acerca-de_definicion #sobLuego .illustration > .people-group2 img {
					width: 150px;
					height: auto;
					max-width: 100%;
				}

@media (min-width: 768px) and (max-width: 991.98px) {
	.acerca-de_breadcumb {
		height: auto;
		padding: 20px 30px;
	}

	.acerca-de_definicion {
		margin-top: 0;
	}

		.acerca-de_definicion .main-content .text-section .main-content-main-title {
			font-size: 3rem;
		}

		.acerca-de_definicion .main-content .illustration > .people-group img {
			width: 250px;
			height: 150px;
		}

		.acerca-de_definicion .main-content .illustration > .people-group2 img {
			width: 130px;
			height: 150px;
		}

		.acerca-de_definicion .main-content .illustration {
			flex: 0 0 200px;
			align-items: start;
		}

	#sobViolencia {
		height: 400px !important;
	}

	#sobReportar {
		min-height: 350px !important;
	}

	#sobImportante > div:first-child {
		margin-bottom: 30px;
	}

		#sobImportante > div:first-child div {
			height: auto !important;
		}

	#sobLuego > div:first-child {
		margin-bottom: 30px;
	}

		#sobLuego > div:first-child div {
			height: auto !important;
		}

	.violence-card .violence-text .violence-description {
		font-size: 1.4rem !important;
	}

	.violence-type-banner > .violence-type-banner-main-content .violence-type-banner-description {
		font-size: 1.7rem !important;
	}

	.importante-datos {
		grid-template-columns: 1fr !important;
	}

	.importante-luego .importante-info-luego img {
		left: 30px !important;
	}
}

@media (min-width: 992px) and (max-width: 1217px) {
	.importante-luego .importante-info-luego img {
		left: 40px !important;
	}
}

@media (min-width: 996px) {
	.importante-luego .importante-info-luego {
		font-size: 1.8rem;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	.importante-datos .importante-info img {
		left: 0px !important;
	}
}

@media (max-width: 991.98px) {
	.acerca-de_nav-buttons {
		grid-template-columns: 1fr 1fr;
		height: auto;
		position: static;
		margin-top: 0;
		padding: 15px 10px;
		gap: 15px;
	}

	.acerca-de_nav-btn:after {
		display: none
	}
}

@media (max-width: 575.98px) {
	.acerca-de_nav-buttons {
		grid-template-columns: 1fr;
		padding: 10px 5px;
		gap: 10px;
	}

	.acerca-de_nav-btn {
		font-size: 1.1rem;
		min-width: 120px;
		padding: 10px 8px;
	}
}

/* --- Accordion Styles --- */
.accordion-mobile {
	display: none;
	width: 100%;
}

	.accordion-mobile .card2 {
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 0;
		margin-bottom: 1.2rem;
		/*		box-shadow: 0 2px 8px rgba(0,0,0,0.04);*/
		overflow: hidden;
	}

	.accordion-mobile .card2-header {
		background: transparent;
		border: none;
		padding: 0;
	}

	.accordion-mobile .accordion-title {
		display: flex;
		align-items: center;
		width: 100%;
		background: #bdc3c7;
		color: #0077a7;
		font-weight: bold;
		font-size: 1.6rem;
		border: none;
		border-bottom: none;
		padding: 15px 20px;
		text-align: left;
		transition: background 0.2s, color 0.2s;
		cursor: pointer;
		position: relative;
		text-decoration: none;
		border-radius: 0;
		min-width: 180px;
		justify-content: center;
		margin: 0;
	}

		.accordion-mobile .accordion-title[aria-expanded="true"] {
			background: #f1c40f;
			color: #0077a7;
			border-bottom: 1px solid #e5e5e5;
		}

		.accordion-mobile .accordion-title:not([aria-expanded="true"]) {
			color: #2c3e50;
			background: #bdc3c7;
		}

		.accordion-mobile .accordion-title:after {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			margin-right: auto;
			margin-left: auto;
			top: 100%;
			width: 0;
			height: 0;
			border-top: 20px solid #f1c40f;
			border-right: 20px solid transparent;
			border-bottom: 0 solid transparent;
			border-left: 20px solid transparent;
			transition: border-top 0.2s;
		}

		.accordion-mobile .accordion-title:not([aria-expanded="true"]):after {
			border-top: 10px solid transparent;
		}

	.accordion-mobile .collapse {
		background: #fff;
		border-radius: 0 0 8px 8px;
		border-top: 1px solid #e5e5e5;
		margin-bottom: 0;
		box-shadow: none;
	}

	.accordion-mobile .card2-body > div:first-child {
		padding: 2rem;
		background: #fff;
		font-size: 1rem;
		color: #222;
	}

.importante-que-violencia, .importante-que-reportar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

	.importante-que-violencia .importante-que-violencia-info, .importante-que-reportar .importante-que-reportar-info {
		width: 70%;
		background: #e8f9ff;
		min-height: 200px;
		font-size: 1.5rem;
		color: #0368a6;
		padding: 50px;
		padding-left: 110px;
		text-align: left;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		border-radius: 20px;
	}

		.importante-que-violencia .importante-que-violencia-info .violence-text .violence-title {
			font-size: 2rem;
			font-weight: bold;
			color: #0368a6;
		}

		.importante-que-violencia .importante-que-violencia-info .violence-text .violence-description,
		.importante-que-reportar .importante-que-reportar-info .violence-text .violence-description {
			font-size: 1.3rem;
			text-align: left;
			color: #0294cf;
			font-weight: 300;
		}

@media (min-width: 700px) and (max-width: 850px) {
	.importante-que-violencia .importante-que-violencia-info img,
	.importante-que-reportar .importante-que-reportar-info img,
	.importante-datos .importante-info img {
		left: 80px !important;
	}
}


@media (max-width: 850px) {
	.que_es_violencia > .container {
		padding: 0;
		margin: 0;
		max-width: 100%;
	}

	.acerca-de_breadcumb {
		height: auto;
		padding: 20px 30px;
	}

	.acerca-de_nav-buttons,
	.tab-section {
		display: none !important;
	}

	.accordion-mobile {
		display: block !important;
	}

	.accordion-mobile-bg {
		display: block;
		background: none;
	}

	.tab-dropdown {
		display: none;
	}

	.acerca-de_breadcumb {
		height: auto;
		padding: 20px 30px;
	}

	.acerca-de_definicion {
		margin-top: 0;
	}

		.acerca-de_definicion .main-content .text-section {
			font-size: 1.5rem;
		}

			.acerca-de_definicion .main-content .text-section .main-content-main-title {
				font-size: 3rem;
			}

		.acerca-de_definicion .main-content .illustration > .people-group img {
			width: 150px;
			height: 100px;
		}

		.acerca-de_definicion .main-content .illustration > .people-group2 img {
			width: 130px;
			height: 150px;
		}

		.acerca-de_definicion .main-content .illustration {
			flex: 0 0 200px;
			align-items: start;
			height: auto;
		}

		.acerca-de_definicion #sobViolenciaCollapse {
			flex-wrap: wrap;
			gap: 0;
			margin-bottom: 0;
			padding: 0 40px;
		}

			.acerca-de_definicion #sobViolenciaCollapse .illustration > .people-group, .acerca-de_definicion #sobViolenciaCollapse .illustration > .people-group2 {
				align-items: start;
				height: auto;
			}

	#accordionTabs .violence-type-banner {
		padding: 0 30px;
		margin-top: 30px;
	}

		#accordionTabs .violence-type-banner > .violence-type-banner-main-content .violence-type-banner-description {
			font-size: 1.6rem;
		}

		#accordionTabs .violence-type-banner > .violence-type-banner-main-content .violence-type-banner-image {
			display: flex;
			align-items: center;
		}

			#accordionTabs .violence-type-banner > .violence-type-banner-main-content .violence-type-banner-image .people-image {
				width: 150px;
				height: 150px;
			}

	#divProtocolos {
		opacity: 0;
		height: 50px !important;
	}

	#accordionTabs .main-content, #accordionTabs .main-content-detail {
		display: flex !important;
	}

	.importante-datos {
		grid-template-columns: 1fr !important;
	}

	.importante-luego {
		gap: 60px !important;
	}

	.importante-luego > div:nth-child(2),
	.importante-luego > div:nth-child(4) {
		margin-top: 40px !important;
	}

		.importante-luego .importante-info-luego {
			padding: 50px 20px !important;
			padding-top: 80px !important;
			flex-direction: column;
		}

			.importante-luego .importante-info-luego img {
				top: -70px;
				left: auto !important;
				margin: 0 auto;
			}

	.importante-que-reportar .importante-que-reportar-info .violence-text .violence-description {
		font-size: 1.6rem;
	}
}

.violence-types {
	width: 100%;
	position: relative;
}

.viol-contain {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
	margin-bottom: 40px;
	justify-content: space-between;
	position: absolute;
	margin-top: -200px;
	height: 350px;
}

.report-contain {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
	justify-content: space-between;
	height: 350px;
}

#sobReportarContent {
	/*background-color: #18caf9 !important;
	background-image: url("/img/acerca-de/v2/info2/decorativos/deco_texturas_fondo.png") !important;*/
	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}

/*#sobReportar,
#collapse2 #sobViolenciaCollapse,
#collapse2 .card2-body > .row:first-child {
	background-color: transparent !important;
	background-image: url("/img/acerca-de/v2/info2/decorativos/deco_fondo_circulos.png") !important;
	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}*/

#sobReportar .text-section,
#sobReportar .definition,
#collapse2 #sobViolenciaCollapse .text-section,
#collapse2 #sobViolenciaCollapse .definition {
	background-color: transparent;
}

/*#sobImportante > div:first-child {
	background-image: url("/img/acerca-de/v2/info3/Decorativos/deco_fondo_circulos.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}*/

.violence-card {
	flex: 1;
	padding: 30px 0;
	border-radius: 20px;
	text-align: center;
	position: relative;
	transition: transform 0.3s ease;
	background: #e8f9ff;
}

	.violence-card .violence-icon {
		position: absolute;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.violence-card .violence-icon > div {
			position: absolute;
			margin-bottom: 50px;
			border: 1px solid #e8f9ff;
			border-radius: 50%;
			padding: 0;
			background: #e8f9ff;
		}

		.violence-card .violence-icon img {
			width: auto;
			height: 100px;
		}

	.violence-card .violence-text {
		margin-top: 30px;
		color: #0077a7;
	}

		.violence-card .violence-text .violence-title {
			font-size: 3rem;
			font-weight: bold;
			color: #0368a6;
		}

		.violence-card .violence-text .violence-description {
			font-size: 1.8rem;
			padding: 10px 30px;
			text-align: center;
			color: #0294cf;
			font-weight: 300;
		}

.violence-type-banner {
	display: flex;
	width: 100vw;
	margin-top: 180px;
	margin-left: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	/*padding-right: calc(50vw - 50%);
	background-image: url("/img/acerca-de/v2/decorativos/deco_texturas_fondo.png");*/
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

	.violence-type-banner > .violence-type-banner-main-content {
		display: flex;
		gap: 40px;
		margin-bottom: 70px;
		width: 100%;
	}

		.violence-type-banner > .violence-type-banner-main-content .violence-type-banner-description {
			justify-content: start;
			align-items: center;
			padding: 40px 90px; /*padding: arriba derecha abajo izquierda;*/
			flex-grow: 3;
			color: #0368a6;
			font-size: 3.3rem;
			display: flex;
			text-align: left;
			/* Fondo elíptico */
			position: relative;
			background: #46d5fa;
			border-radius: 50%; /* Elíptico: ajusta los valores para la proporción */
			/*padding: 30px 40px;  Ajuste de padding para un efecto de nube */
			transform: scale(0.95);
		}

			.violence-type-banner > .violence-type-banner-main-content .violence-type-banner-description::after {
				content: '';
				position: absolute;
				top: 50%;
				right: -72px; /*Ajusta la distancia de la punta hacia la derecha */
				transform: translateY(-50%); /*Centra la punta verticalmente */
				width: 0;
				height: 0;
				/*Crear la flecha con un tamaño mayor */
				border-top: 18px solid transparent; /*Ajusta la flecha*/
				border-bottom: 18px solid transparent;
				border-left: 75px solid #46d5fa; /*Color de la flecha, igual que el fondo*/
				filter: drop-shadow(0 0 1px #46d5fa);
			}

		.violence-type-banner > .violence-type-banner-main-content .violence-type-banner-image {
			background: transparent;
			/*		padding: 20px;
			flex-grow: 2;*/
		}

			.violence-type-banner > .violence-type-banner-main-content .violence-type-banner-image .people-image {
				width: 350px;
				height: 250px;
			}

.violence-type-banner,
.violence-type-banner-main-content {
	/*min-height: 607px;*/
	height: auto;
}

.importante-datos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

	.importante-datos .importante-info {
		width: 70%;
		background: white;
		height: 200px;
		font-size: 1.5rem;
		color: #0368a6;
		padding: 50px;
		padding-left: 100px;
		text-align: left;
		display: flex;
		justify-content: center;
		align-items: center;
	}

.importante-luego {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

	.importante-luego .importante-info-luego {
		width: 70%;
		background: white;
		min-height: 200px;
		font-size: 1.5rem;
		color: #0368a6;
		padding: 50px;
		padding-left: 100px;
		text-align: left;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
/* =====================
   CONTACTANOS
====================== */

.contactanos_banner-nav {
	position: relative;
	height: 350px;
	margin-top: 70px;
	overflow: hidden;
}

	.contactanos_banner-nav .contactanos_banner-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url("../../img/contactanos/banner_01.png") center center/cover no-repeat;
		z-index: 0;
	}

	.contactanos_banner-nav .contactanos_banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(20, 160, 193, 0.55);
		z-index: 1;
	}

	.contactanos_banner-nav .contactanos_banner-content {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.contactanos_banner-title {
		text-align: center;
		color: #fff;
		font-size: 64px;
		font-weight: bold;
		margin-top: 60px;
		margin-bottom: 0;
		letter-spacing: 1px;
		text-shadow: 0 2px 8px rgba(0,0,0,0.2);
	}

/* =====================
   PREVENCION
====================== */

.prevencion_banner-nav {
	position: relative;
	height: 350px;
	margin-top: 70px;
	overflow: hidden;
}

	.prevencion_banner-nav .prevencion_banner-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url("../../img/prevencion/banner_01.png") center center/cover no-repeat;
		z-index: 0;
	}

	.prevencion_banner-nav .prevencion_banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/*background: rgba(20, 160, 193, 0.3);*/
		z-index: 1;
	}

	.prevencion_banner-nav .prevencion_banner-content {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

.prevencion_banner-title {
	text-align: center;
	color: #fff;
	font-size: 64px;
	font-weight: bold;
	margin-top: 60px;
	margin-bottom: 0;
	letter-spacing: 1px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
	.prevencion_banner-content {
		padding-left: 40px;
		padding-right: 40px;
	}
}

.prevencion_breadcumb {
	height: auto;
	padding: 20px 30px;
}

.violence-type-banner-description-simple {
	justify-content: start;
	align-items: center;
	padding: 20px;
	flex-grow: 3;
	color: white;
	font-size: 2.3rem;
	display: flex;
	text-align: left;
	position: relative;
	padding: 30px 40px;
}

.recursos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	gap: 30px;
	align-items: stretch;
}

.prevencion-resource-card {
	background-color: #FFFFFF;
	border-radius: 16px;
	/*box-shadow: 0 8px 25px rgba(0,0,0,0.12);*/
	border: 1px solid #2BB7E0;
	overflow: hidden;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	min-height: 180px;
	display: flex;
	align-items: flex-start;
	padding: 20px;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 25px;
}

.prevencion-resource-card .card-content-wrapper {
	display: flex;
	align-items: flex-start;
	flex-grow: 1;
}

.prevencion-resource-card .card-image {
	flex-shrink: 0;
	margin-right: 20px;
}

.prevencion-resource-card .card-image img {
	height: auto;
	width: 110px;
}

/*.prevencion-resource-card .card-content {
	flex-grow: 1;
	overflow: hidden;
	word-wrap: break-word;
}*/

	.prevencion-resource-card .card-content {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		word-wrap: break-word;
		height: 100%;
	}

.prevencion-resource-card .card-content p {
	/*font-family: Arial, Helvetica, sans-serif;*/
	color: #2BB7E0;
	/*font-size: 16px;*/
	/*line-height: 1.5;*/
	line-height: 18px;
	text-align: left;
	margin-bottom: 10px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.prevencion-resource-card .card-content span {
	font-size: 14px;
	font-weight: normal;
}

/*.prevencion-resource-card .card-button {
	align-self: flex-start;
	margin-top: 10px;
	margin-left: 100px;
}*/

	.prevencion-resource-card .card-button {
		margin-top: auto;
		/*margin-bottom: 0;*/
		/*align-self: flex-start;*/
	}

.prevencion-resource-card .card-button .btn-ver-mas-card {
	background-color: transparent;
	border: 1px solid #2BB7E0;
	color: #2BB7E0;
	padding: 3px 10px;
	transition: all 0.3s ease;
	font-size: 12px;
	line-height: 1.42857143;
	text-decoration: none;
	border-radius: 4px;
	display: inline-block;
}

.prevencion-resource-card .card-button .btn-ver-mas-card:hover {
	background-color: #2BB7E0;
	color: white;
}

.prevencion-texto-centrado {
	font-family: GothamRnd !important;
	display: flex;
	align-items: center; /* Centrado vertical */
	color: #195fab;
}

.prevencion-intro-text {
	font-size: 1.8rem;
}

.prevencion-titulo-centrado {
	color: #0368a6;
	font-weight: normal;
	font-size: 32px;
	margin-bottom: 20px;
}

.prevencion-fondo-textura {
	background-color: #f6f6f6;
	background: url("../../img/prevencion/deco_fondo_texturas.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 40px 20px;
	border-radius: 12px;
	padding-bottom: 0px;
}

@media (max-width: 850px) {
	.prevencion-fondo-textura {
		padding-left: 20px;
		padding-right: 20px;
	}

	#bloque-prevencion-tab1 {
		padding-left: 40px;
		padding-right: 40px;
	}
}

.acerca-de-fondo-textura {
	background-color: #f6f6f6;
	background: url("../../img/acerca-de/v2/decorativos/deco_texturas_fondo.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*.que_es_violencia-fondo-textura {*/
	/*background-color: #f6f6f6;*/
	/*background: url("../../img/acerca-de/v2/info2/decorativos/deco_fondo_circulos.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}*/

.que_es_violencia-fondo-textura {
	background-image: url(../../img/acerca-de/v2/info2/decorativos/deco_fondo_circulos.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
}

/*.prevencion-fondo-textura {
	background-color: #f6f6f6;
	background-image: url("../../img/prevencion/deco_fondo_texturas.png");
	background-repeat: repeat;
	background-size: auto;
	padding: 40px 20px;
	border-radius: 12px;
}*/

/* Recursos grid responsive - 2 columnas en tablet */
@media (max-width: 991px) {
	.recursos-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

/* Recursos grid responsive - 1 columna, tarjeta mantiene layout horizontal (imagen izquierda, texto/botón derecha) */
@media (max-width: 575px) {
	.recursos-grid {
		grid-template-columns: 1fr;
	}
}

.contactanos_banner-title {
	text-align: center;
	color: #fff;
	font-size: 64px;
	font-weight: bold;
	margin-top: 60px;
	margin-bottom: 0;
	letter-spacing: 1px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.canales_reporte {
	padding: 60px 0;
}

.canales_reporte_formulario {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	height: auto;
}

	.canales_reporte_formulario .formu_contactenos {
		max-width: 100%;
		padding: 20px;
		background: #f1f1f1;
		width: 100%;
		grid-column: 1 / 3;
		border-radius: 20px;
	}

	.canales_reporte_formulario .formu_icon {
		background: white;
		flex-direction: column;
		height: 100%;
		width: 100%;
		display: flex;
		gap: 20px;
	}

		.canales_reporte_formulario .formu_icon .formu_icon_title {
			flex: 0 1 50px;
			text-align: center;
			padding: 20px;
			font-size: 24px;
			font-weight: bold;
			justify-content: center;
			align-items: center;
			display: flex;
			color: #0077a7;
		}

		.canales_reporte_formulario .formu_icon .formu_icon_content {
			flex: 1; /* Se repartirán el espacio restante */
			display: flex;
			flex-direction: column;
			gap: 5px;
			justify-content: center;
			align-items: center;
			background: #f1f1f1;
			padding: 20px;
			font-size: 2.5rem;
			border-radius: 20px;
			color: #672f86;
		}

			.canales_reporte_formulario .formu_icon .formu_icon_content img {
				width: 60px;
				height: 60px;
			}

/* Solo cuando el input tiene foco o tiene contenido (clase .filled) */
.formu_contactenos input:focus ~ label,
.formu_contactenos textarea:focus ~ label,
.formu_contactenos input.filled ~ label,
.formu_contactenos textarea.filled ~ label {
	color: #999;
	top: -5px;
	-webkit-transition: all 0.225s ease;
	transition: all 0.225s ease;
}


.formu_contactenos .styled-input {
	float: left;
	width: 293px;
	margin: 1rem 0;
	position: relative;
	border-radius: 4px;
}

@media only screen and (max-width: 768px) {
	.formu_contactenos .styled-input {
		width: 100%;
	}
}

.formu_contactenos .styled-input label {
	color: #999;
	padding: 1.3rem 30px 1rem 30px;
	position: absolute;
	top: 10px;
	left: 0;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
	pointer-events: none;
}

.formu_contactenos .styled-input.wide {
	width: 100%;
	max-width: 100%;
}

.formu_contactenos input,
.formu_contactenos textarea {
	padding: 30px;
	border: 0;
	width: 100%;
	font-size: 1.5rem;
	background-color: white;
	color: black;
	border-radius: 4px;
}

	.formu_contactenos input:focus,
	.formu_contactenos textarea:focus {
		outline: 0;
	}

		.formu_contactenos input:focus ~ span,
		.formu_contactenos textarea:focus ~ span {
			width: 100%;
			-webkit-transition: all 0.075s ease;
			transition: all 0.075s ease;
		}

.formu_contactenos textarea {
	width: 100%;
	min-height: 15em;
}

/* Estilo para mensaje de error */
.formu_contactenos label.error {
	color: red;
	font-size: 0.9em;
	margin-top: 5px;
	display: block;
	position: relative;
	top: 0;
	left: 0;
	padding: 0 5px !important; 
	text-align: left;
}

/* Estilo para campo con error */
.formu_contactenos input.error,
.formu_contactenos textarea.error {
	border: 1px solid red;
}

/* Estilo para campo válido (opcional) */
.formu_contactenos input.valid,
.formu_contactenos textarea.valid {
	border: 1px solid green;
}

.formu_contactenos input.error,
.formu_contactenos textarea.error {
	border: 1px solid red;
	background-color: white; /* o lo que uses */
	pointer-events: auto;
	opacity: 1;
}

.formu_contactenos label.error {
	color: red;
	font-size: 0.9em;
	margin-top: 5px;
	padding: 0 30px;
	line-height: 1.2 !important; /* ✅ normaliza */
	display: block;
}

#frmContacto .error {
	top: 0 !important;
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.acerca-de_nav-buttons {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.acerca-de_nav-btn {
		font-size: 1.3rem;
		padding: 12px;
	}

		.acerca-de_nav-btn.active::after {
			border-left: 12px solid transparent;
			border-right: 12px solid transparent;
			border-top: 12px solid #f1c40f;
		}
}

/* 📱 Responsivo para móviles pequeños */
@media (max-width: 480px) {
	.acerca-de_nav-buttons {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.acerca-de_nav-btn {
		font-size: 1.2rem;
		padding: 10px;
	}

		.acerca-de_nav-btn.active::after {
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-top: 10px solid #f1c40f;
		}
}

@media (max-width: 767.98px) {
	#frmContactoCanales {
		display: none;
	}

	.canales_reporte_formulario .formu_contactenos {
		margin: 0 auto !important;
	}

	.canales_reporte_formulario {
		grid-template-columns: 1fr;
		gap: 0;
		margin: 20px;
	}
}

.recurso-texto {	
	font-size: 12.5px !important;
	font-weight: normal !important;	
	letter-spacing: -0.5px !important;
	line-height: 15px !important;
}

.onda-prevencion {	
	width: 100%;
	height: auto;
	overflow: hidden;
	line-height: 0;
	background: transparent;
}

	.onda-prevencion svg {
		width: 100%;
		height: 100%;
		display: block;
	}

.onda-acerca-de {
	width: 100%;
	height: auto;
	overflow: hidden;
	line-height: 0;
	background: transparent;
}

#formRecoveryInitial #btnRecovery {
    height: auto;
    padding: 0.5rem 1rem;
    line-height: 1.5;
	text-align: center;
}

@media (max-width: 768px) {
    #formRecoveryInitial #btnRecovery {
        width: auto !important;
        max-width: 150px;
        margin: 0 auto;
    }
}