:root {
			/* fuente */
			/* --primary-color: #1aa29f;
			--secondary-color: #644080; */
			--fontSizeXS: 11px;
			--fontSizeLG: 2.5rem;
			--paddingTitulos: 0px 11px 1px 11px;
		}




		/* Estilos básicos de la imagen */
		.heartbeat-image {
			/* width: 300px;
			margin: 20px; */
			transition: transform 0.3s ease;
		}

		/* Animación de pálpito */
		@keyframes heartbeat {

			0%,
			100% {
				transform: scale(1);
			}

			50% {
				/* transform: scale(0.9); */
				transform: scale(0.9);
			}
		}

		@keyframes heartbeat-somos {

			0%,
			100% {
				transform: scale(1);
				/* Escala inicial y final */
			}

			50% {
				transform: scale(1.5);
				/* Escala al doble */
			}
		}

		/* Aplicar la animación solo cuando no esté el puntero sobre la imagen */
		.heartbeat {
			animation: heartbeat 0.9s ease-in-out 1;
		}

		/* Aplicar la animación solo cuando no esté el puntero sobre la imagen */
		.heartbeat-somos {
			animation: heartbeat-somos 0.9s ease-in-out 1;
		}


		/* Desactivar la animación al hacer hover */
		.heartbeat-image:hover {
			animation: none;
		}



		/* LOGO CM */

		.logo-cm {
			margin-left: 1.5%;
			margin-top: 2%;
			width: 8%;
		}

		/* barra superior */
		.top-bar {
			width: 100%;
			background: #ffecd394;
			z-index: 1;
			top: -6px;
			position: absolute;
			padding: 10px 20px;
			display: flex;
			align-items: center;
		}

		.top-logo {
			width: 10%;
			padding: 5px 5px 5px 5px;
		}

		.logo img {
			height: 50px;
			/* Ajusta el tamaño de la imagen del logo */
		}

		.nav-links {
			margin-top: 15px;
			list-style: none;
			margin-left: 29%;
			padding: 0;
			display: flex;
		}

		.nav-links li {
			margin-left: 50px;
		}

		.nav-links a {
			text-decoration: none;
			color: rgb(11, 29, 192);
			font-size: 30px;
			padding: 8px 12px;
			/* border-radius: 4px; */
			transition: background-color 0.3s ease;
		}

		.nav-links a:hover {
			background-color: #c20a0a;
			color: white;
			/* Texto blanco en hover */
		}


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

		/* FONDO */

		body {

			background-size: cover;
			height: 100vh;
		}

		.bodyDia {
			position: fixed !important;
			background: url(../img/menu_principal/V6/AMBIENTE_DIA/CIELO.png) no-repeat;
			background-attachment: fixed;
			background-size: cover;
		}

		.bodyTarde {
			background-size: cover !important;
			background: url('../img/menu_principal/V6/AMBIENTE_TARDE/CIELO.png')no-repeat;
		}

		.bodyNoche {
			background: url('../img/menu_principal/V6/AMBIENTE_NOCHE/CIELO.png')no-repeat;
		}

		.container {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;

		}

		.container img {
			position: absolute;
			/* width: 100%; */
			/* height:100%; */
			top: 0;
			left: 0;
			object-fit: contain;
		}


		.container h2 {
			z-index: 1;
			position: relative;

		}

		.cordilleras {
			left: -4%;
			width: 105%;
			height: auto;
		}

		/* NUBES */

		.nubes {
			left: -2% !important;
			width: 100vw;
			/* 100% del ancho de la pantalla */
			height: auto;
		}

		.nubes-ad {
			left: -2%;
		}

		.mina {
			top: 1% !important;
			width: 100vw;
			/* 100% del ancho de la pantalla */
			height: auto;
		}


		.container h2 {
			color: beige;
			font-size: 60px;

		}

		.animation-container {
			/* position: absolute; */
			position: fixed;
			top: 17%;
			left: -50%;
			/* left: 38%;  */
			transform: translateY(-50%);
			display: flex;
			align-items: center;
		}

		.moving-image {
			height: 6rem;

		}

		.banner-container {
			background-color: white;
		}


		.banner-text {
			font-weight: bolder;
			margin-top: 8%;
			font-style: italic;
			z-index: 1;
			font-size: 28px;
			color: #630e0e;
			white-space: nowrap;
			margin-left: 70%;
		}

		.banner-text-xl {
			font-weight: bolder;
			margin-top: 5%;
			font-style: italic;
			z-index: 1;
			font-size: 28px;
			color: #630e0e;
			white-space: nowrap;
			margin-left: 37%;
		}


		.banner-text-xxl {
			font-weight: bolder;
			margin-top: 5%;
			font-style: italic;
			z-index: 1;
			font-size: 24px;
			color: #630e0e;
			white-space: nowrap;
			margin-left: 35%;
		}

		@keyframes moveHorizontal {
			0% {
				left: -50%;
			}

			100% {
				left: 100%;
			}
		}

		.wavy {
			animation-name: wavy;
			animation-duration: 1.3s;
			animation-timing-function: ease;
			animation-iteration-count: infinite;
			position: relative;
			top: 0;
			left: 0;
		}

		@keyframes wavy {
			0% {
				top: 0px;
			}

			50% {
				top: -15px;
			}

			100% {
				top: 0px;
			}
		}



		.transparente {
			opacity: 1;
			padding: 20px;
		}

		.academia_ {
			z-index: 1;
			width: 24%;
			margin-top: 34%;
			margin-left: 6%;
			height: auto;
			transition: transform 1s ease, filter 1.0s ease;
		}

		.distrito_ {
			margin-left: 67%;
			margin-top: 33%;
			width: 31%;
			height: auto;
			transition: transform 1s ease, filter 1.0s ease;
		}

		.momentos_ {
			margin-left: 43%;
			margin-top: 22%;
			width: 11%;
			height: auto;
			height: auto;
			transition: transform 1s ease, filter 1.0s ease;
		}

		.somos_ {
			margin-left: 89%;
			margin-top: 24%;
			width: 8%;
			height: auto;
			transition: transform 1s ease, filter 1.0s ease;
		}

		.puerto_ {
			margin-left: 1%;
			margin-top: 22%;
			width: 22%;
			height: auto;
			transition: transform 1s ease, filter 1.0s ease;
		}



		.academia_:hover {
			transform: scale(1.1);
			filter: drop-shadow(0 0 90px #cbd514de)
		}


		.distrito_:hover {
			transform: scale(1.1);
			filter: drop-shadow(0 0 90px #cbd514de)
		}

		.momentos_:hover {
			transform: scale(1.1);
			filter: drop-shadow(0 0 90px #cbd514de)
		}

		.somos_:hover {
			transform: scale(1.1);
			filter: drop-shadow(0 0 90px #cbd514de)
		}

		.puerto_:hover {
			transform: scale(1.1);
			filter: drop-shadow(0 0 90px #cbd514de)
		}


		.estructuras-container img {
			cursor: pointer;
			/* margin-top: 30%; */
			position: absolute;
			object-fit: contain;
		}


		/* academia  */

		.academia-container {
			/* position: relative; */
			display: inline-block;
		}

		.academia-texto {
			padding: var(--paddingTitulos);
			font-size: var(--fontSizeLG);
			font-style: italic;
			border-radius: 10px;
			background-color: #cbd514db;
			z-index: 1;
			margin-top: 6%;
			margin-left: -30%;
			position: absolute;
			transform: translate(-50%, -50%);
			color: #0c0c0c;
			opacity: 0;
			transition: opacity 0.5s ease;
			pointer-events: none;
		}


		.academia-container:hover .academia-texto {
			opacity: 1;
		}

		.academiaTitulo {
			z-index: 1;
			top: 59% !important;
			left: 10% !important;
			opacity: 0.5;
			transition: opacity 0.5s ease;
			width: 15%;
		}

		.academia-container:hover .academiaTitulo {
			opacity: 1;
		}



		/* distrito */

		.distrito-container {
			/* position: relative; */
			display: inline-block;
		}

		.distrito-texto {
			padding: var(--paddingTitulos);
			font-size: var(--fontSizeLG);
			font-style: italic;
			border-radius: 10px;
			background-color: #cbd514db;

			margin-top: 8%;
			margin-left: 30%;
			position: absolute;
			transform: translate(-50%, -50%);
			color: #0c0c0c;
			opacity: 0;
			transition: opacity 0.5s ease;
			pointer-events: none;
		}

		.distrito-container:hover .distrito-texto {
			opacity: 1;
		}


		.distritoTitulo {
			z-index: 1;
			top: 59% !important;
			left: 70% !important;
			opacity: 0.5;
			transition: opacity 0.5s ease;
			width: 15%;
		}

		.distrito-container:hover .distritoTitulo {
			opacity: 1;
		}

		/* somos  */

		.somos-container {
			/* position: relative; */
			display: inline-block;
		}

		

		.somos-texto {
			padding: var(--paddingTitulos);
			font-size: var(--fontSizeLG);
			font-style: italic;
			border-radius: 10px;
			background-color: #cbd514db;
			margin-top: -5%;
			margin-left: 41%;
			position: absolute;
			transform: translate(-50%, -50%);
			color: #0c0c0c;
			opacity: 0;
			transition: opacity 0.5s ease;
			pointer-events: none;
		}



		.somos-container:hover .somos-texto {
			opacity: 1;
		}


		.somosTitulo {
			z-index: 1;
			/* top: 40% !important; */
			top: 22rem !important;

			left: 84% !important;
			opacity: 0.5;
			transition: opacity 0.5s ease;
			width: 15%;
		}

		.somos-container:hover .somosTitulo {
			opacity: 1;
		}

		/* momentos */

		.momentos-container {
			/* position: relative; */
			display: inline-block;
		}

		.inscribete-container {
			/* position: relative; */
			display: inline-block;
		}

		.momentos-texto {
			padding: var(--paddingTitulos);
			font-size: var(--fontSizeLG);
			font-style: italic;
			border-radius: 10px;
			background-color: #cbd514db;
			margin-top: -8%;
			margin-left: -2%;
			position: absolute;
			transform: translate(-50%, -50%);
			color: #0c0c0c;
			opacity: 0;
			transition: opacity 0.5s ease;
			pointer-events: none;
		}


		.momentos-container:hover .momentos-texto {
			opacity: 1;
		}


		.momentosTitulo {
			z-index: 1;
			top: 35% !important;
			left: 42% !important;
			opacity: 0.5;
			transition: opacity 0.5s ease;
			width: 15%;
		}

		.momentos-container:hover .momentosTitulo {
			opacity: 1;
		}


		.momentosTitulo {
			z-index: 1;
			top: 35% !important;
			left: 42% !important;
			opacity: 0.5;
			transition: opacity 0.5s ease;
			width: 15%;
		}

		/* puerto */

		.puerto-container {
			display: inline-block;
		}

		.puerto-texto {
			padding: var(--paddingTitulos);
			font-size: var(--fontSizeLG);
			font-style: italic;
			border-radius: 10px;
			background-color: #cbd514db;
			margin-top: -6%;
			margin-left: -38%;
			position: absolute;
			transform: translate(-50%, -50%);
			color: #0c0c0c;
			opacity: 0;
			transition: opacity 0.5s ease;
			pointer-events: none;
		}


		.puerto-container:hover .puerto-texto {
			opacity: 1;
		}


		.puertoTitulo {
			z-index: 1;
			top: 35% !important;
			left: 8% !important;
			opacity: 0.5;
			transition: opacity 0.5s ease;
			width: 15%;
		}

		.puerto-container:hover .puertoTitulo {
			opacity: 1;
		}

		/* notificación estática */


		.planeBanner {

			/* opacity: 1; */
			opacity: 0;
			/* position: absolute; */
			transition: opacity 2s ease-in-out;

		}

		#planeBanner img {
			top: 22%;
			left: 38%;
			width: 40rem;
		}

		#bannerText2 {
			font-size: 30px;
			top: 24%;
			left: 41%;
			position: absolute;
			font-style: italic;
		}


		/* PERFIL */

		.perfil-container {
			width: 100px;
			height: 100px;
			z-index: 2;
			position: absolute;
			background-color: #c20a0a;
		}

		/* BORRAR: botón noti estática */

		.btn-estatico {
			height: 3%;
			top: 6%;
			position: absolute;
			left: 4%;
		}


		/* CARD PERFIL */

		.card-fondo {
			width: 103%;
			height: 192px;
			z-index: -1;
			margin-top: -3%;
			margin-left: -2%;
		}


		.perfil-bar {
			width: 375px;
			height: 160px;
			position: fixed;
			top: 2%;
			right: -324px;
			background-color: #EFE4D0;
			box-shadow: 0 0 10px rgba(0, 0, 0, 1.3);
			transition: right 0.3s ease;
			border-radius: 8px 0 0 8px;
			z-index: 1000;
		}

		/*.perfil-bar {*/
		/*	width: 375px;*/
		/*	height: 160px;*/
		/*	position: fixed;*/
		/*	top: 2%;*/
		/*	right: -324px;*/
		/*	background-color: antiquewhite;*/
		/*	box-shadow: 0 0 10px rgba(0, 0, 0, 1.3);*/
		/*	transition: right 0.3s ease;*/
		/*	border-radius: 8px 0 0 8px;*/
		/*	z-index: 1000;*/
		/*}*/

		.perfil-bar.open {
			right: 0;
			/* Muestra toda la tarjeta */
		}



		.toggle-button {
			width: 31px;
			height: 95%;
			background-color: #EFE4D0;
			color: black;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			position: absolute;
			top: 0;
			border-radius: 5px 5px 5px 0px;
			writing-mode: vertical-rl;
			text-orientation: mixed;
			transform: rotate(180deg);
			font-family: 'Arial Black', sans-serif;
			font-weight: 900;
			font-size: 18px;
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
		}




		.img-perfil-container {
			border-radius: 0px 0px 8px 8px;
			height: 120px;
			width: 140px;
			margin-left: 11%;
			padding: 0px;
			background: rgb(199, 124, 26);
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			/* Asegura que la imagen no se salga del contenedor */
		}

		.img-perfil-container img {
			top: 6%;
			left: 17%;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			object-fit: cover;
		}



		.data-perfil-container {
			top: 26%;
			width: 173px;
			left: 50%;
			position: absolute;
			color: black;
			font-family: 'Arial Black', sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		#nombrePerfil {
			font-size: 18px;
		}

		#puestoPerfil {
			font-size: 12px;
		}

		.logo-perfil {
			margin-top: 29%;
			margin-left: 72%;
			width: 91px;
		}

		/* GALERIA */
		.galeria {
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease;
		}

		.imgGaleria {
			height: 550px;
			width: 550px;
			margin-top: 13%;
			margin-left: 35%;
			pointer-events: none !important;
		}

		/* FORMULARIO LANDING */
		.form-container {
			width: 100%;
			max-width: 500px;
			margin: 50px auto;
			background-color: white;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
		}

		.form-container h2 {
			text-align: center;
		}

		.form-container input,
		.form-container textarea {
			width: 100%;
			padding: 10px;
			margin: 10px 0;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-sizing: border-box;
		}

		.form-container button {
			width: 100%;
			padding: 10px;
			background-color: #0050FF;
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 16px;
			cursor: pointer;
		}

		.form-container button:hover {
			background-color: #003EB5;
		}

		.recaptcha-container {
			margin: 20px 0;
			text-align: center;
		}





		/* Media query para pantallas pequeñas (celulares) */
		@media (max-width: 768px) {

			/* TOP BAR */
			.top-bar {
				background: #ffffff69;
				z-index: 1;
				top: -7px;
				position: absolute;
				display: flex;
				align-items: center;
			}

			.top-logo {
				width: 13%;
				padding: 0px 0px 0px 5px;
			}

			/* avión movimiento */
			.moving-image {
				height: 1rem;
			}

			.banner-text {
				margin-top: -35% !important;
				font-size: 7px;
				margin-left: -15%;
			}

			.animation-container {
				top: 7%;
				/* Ajuste de posición para móviles */
			}

			.nav-links li {
				margin-left: 2px;
			}

			.nav-links {
				margin-top: 5px;
				list-style: none;
				margin-left: 24%;
				padding: 0;
				display: flex;
			}

			.nav-links a {
				text-decoration: none;
				color: rgb(11, 29, 192);
				font-size: 8px;
				padding: 1px 4px;
				transition: background-color 0.3s ease;
			}

			/* avión estático */


			#planeBanner img {
				top: 3%;
				left: 32%;
				width: 14rem;
			}

			#bannerText2 {
				font-size: 13px;
				top: 33px;
				left: 36%;
				position: absolute;
				font-style: italic;
			}


			.btn-estatico {
				font-size: 10px;
				height: 30px;
				/* width: 30px; */
				top: 4%;
				position: absolute;
				left: 4%;
			}


			.academia-texto {
				padding: var(--paddingTitulos);
				font-style: italic;
				border-radius: 10px;
				background-color: #cbd514db;
				z-index: 1;
				margin-top: -73%;
				margin-left: -29%;
				position: absolute;
				transform: translate(-50%, -50%);
				color: #0c0c0c;
				font-size: var(--fontSizeXS);
				opacity: 0;
				transition: opacity 0.5s ease;
				pointer-events: none;
			}

			.academia_ {
				width: 20%;
				margin-top: 39%;
				margin-left: 9%;
				height: auto;
				transition: transform 1s ease, filter 1.0s ease;
			}

			.distrito-texto {
				padding: var(--paddingTitulos);
				font-size: var(--fontSizeXS);
				font-style: italic;
				border-radius: 10px;
				background-color: #cbd514db;
				margin-top: -76%;
				margin-left: 33%;
				position: absolute;
				transform: translate(-50%, -50%);
				color: #0c0c0c;
				opacity: 0;
				transition: opacity 0.5s ease;
				pointer-events: none;
			}

			.distrito_ {
				margin-left: 71%;
				margin-top: 36%;
				width: 25%;
				height: auto;
				transition: transform 1s ease, filter 1.0s ease;
			}

			.puerto-texto {
				padding: var(--paddingTitulos);
				font-size: var(--fontSizeXS);
				font-style: italic;
				border-radius: 10px;
				background-color: #cbd514db;
				margin-top: -88%;
				margin-left: -33%;
				position: absolute;
				transform: translate(-50%, -50%);
				color: #0c0c0c;
				opacity: 0;
				transition: opacity 0.5s ease;
				pointer-events: none;
			}

			.puerto_ {
				margin-left: 5px;
				margin-top: 24%;
				width: 26%;
				height: auto;
				transition: transform 1s ease, filter 1.0s ease;
			}



			.momentos-texto {
				padding: var(--paddingTitulos);
				font-size: var(--fontSizeXS);
				font-style: italic;
				border-radius: 10px;
				background-color: #cbd514db;
				margin-top: -96%;
				margin-left: -1%;
				position: absolute;
				transform: translate(-50%, -50%);
				color: #0c0c0c;
				opacity: 0;
				transition: opacity 0.5s ease;
				pointer-events: none;
			}

			.somos-texto {
				padding: var(--paddingTitulos);
				font-size: var(--fontSizeXS);
				font-style: italic;
				border-radius: 10px;
				background-color: #cbd514db;
				margin-top: -93%;
				margin-left: 40%;
				position: absolute;
				transform: translate(-50%, -50%);
				color: #0c0c0c;
				opacity: 0;
				transition: opacity 0.5s ease;
				pointer-events: none;
			}
		}

		/* 14: 1366 x 768 
		
		
		1366x768 notebook 15,6"
        1311x955 escritorio 18"
        1879x949 escritorio 24"
        
        
		17: 1680 x 1050 */



		@media (max-width: 1366px) {


			.animation-container {
				position: absolute;
				top: 17%;
				left: -100%;
				/* left: 38%; */
				transform: translateY(-80%);
				display: flex;
				align-items: center;
			}

			.imgGaleria {
				height: 50%;
				width: 100%;
				margin-top: 19%;
				margin-left: -2%;
				pointer-events: none !important;
			}


		}