*{
	margin: 0;
	padding: 0;
	width: auto;
}
body{
    background: #0F1724;
	font-family: sans-serif;
}
/*encabezado y logo*/
header{
	width: 100%;
	/*background: yellow;*/
	height: 80px;
}
.head{
	width: 100%;
	height: 80px;
	/*background: blue;*/
    margin-top: 0px;
	/*margin: auto;*/
	margin-left: 1px;
}
.encuadrar{
    width: 30%;
    height: 30px;
    /*background: blueviolet;*/
    margin-left: 7.5%;
    padding-top: 20px;
}
.logo{
	width: 2%;
	height: 60px;
    margin-left: 5%;
	padding-top: 10px;
	/*background: red;*/
	float: left;
	box-sizing: border-box;
}
nav{
	width: 40%;
	height: 50px;
    margin-top: -30px;
    margin-left: 25%;
	/*background: rgb(172, 189, 137);*/
	float: left;
	text-align: center;
	padding-top: 10px;
	box-sizing: border-box;
}
nav ul li {
    display: inline;
}
nav ul li a{
	color: #77797f;
	font-size: 15px;
	text-decoration: none;
	padding-left: 20px; 
	font-weight: bold;
	letter-spacing: 1px;
	font-family: IBM_semibold;
}
nav ul li a:hover{
	color: #ffffff;
}
.proyectar_izq{
	width: 200px;
	height: 50px;
	margin-top: -30px;
	margin-left: 80%;
	/*background: red;*/
	padding-top: 5px;
	padding-left: 60px;
}
.hr_header{
	color: #77797f;
	height: 1px;
}
/*estilo de secciones*/
.estilo_1{
	width: 100%;
	height: auto;
	background: #0f1724;
	margin-top: 0px;
	padding-bottom: 80px;
}
.estilo_2{
	width: 100%;
	height: auto;
	background: #1a2639;
	padding-top: 35px;
	padding-bottom: 50px;
}
.content_dos_colum{
	display: flex;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}
.colum_izq{
	width: 50%; /* Ancho fijo para la columna izquierda */
    background-color: #1a2639;
    padding: 20px;
    flex-shrink: 0; /* Evita que se encoja */
}
.colum_der{
	flex-grow: 1; /* Hace que ocupe el espacio restante */
    background-color: #1a2639;
    padding-top: 40px;
    overflow-y: auto; /* ¡La clave! Habilita el scroll solo en esta columna */
}
.tope{
	background: #ff6a00;
	display: flex;
	margin-left: 5%;
	margin-top: 80px;
	text-decoration: none;
	width: 50px;
	height: 5px;
}
.grilla_3x1{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0px;
}
.grilla_2x2-1{
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 15px;
}
.div1{
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column: span 2/ span 2;
}
.div2 {
    grid-column-start: 1;
    grid-row-start: 2;
}

.div3 {
    grid-column-start: 1;
    grid-row-start: 3;
}

.div4 {
    grid-column-start: 2;
    grid-row-start: 2;
}

.div5 {
    grid-column-start: 2;
    grid-row-start: 3;
}

.div6 {
    grid-column: span 2 / span 2;
    grid-row: span 4 / span 4;
    grid-column-start: 3;
    grid-row-start: 1;
}
.formulario_base input[type="text"], .formulario_base input[type="password"] {
	background: none;
	display: block;
	margin: 20px auto;
	text-align: center;
	border: 1px solid #879db3;
	padding: 14px 1px; 
	width: 200px;
	outline: none;
	color: #d2d2d2;
	border-radius: 24px;
	transition: 0.35s;
}
.formulario_base input[type="submit"]{
	background: #0057B8;
	/*display: block;*/
	/*margin-left: 40px;*/
	text-align: center;
	text-decoration: none;
	width: 150px;
	padding: 10px 4px;
	outline: none;
	color: #ffffff;
	border-radius: 30px;
	box-shadow:0 0 10px #0057B8;
}
.formulario_base input[type="text"]:focus , .formulario_base input[type="password"]:focus{
	border-color: #0057b8;
}
.formulario_base input[type="submit"]:hover{
	background: #0077ff;
	box-shadow: 2px 2px 0 #0077ff;
}


/*estilo de imagenes*/
.img_1{
	max-width: 165%;
	height: auto;
	border-radius: 10px;
	display: block;
	margin-top: -500px;
}

/*estilo de letras*/

.emblema p a{
    text-decoration: none;
    font-size: 25px;
	color: #ffffff;
    margin-left: 1.5%;
}
.estilo_1 h3{
	font-size: 65px;
	color: #ffffff;
	margin-left: 5%;
	letter-spacing: -0.05em;
	line-height: 1;
}
.estilo_2 h3{
	font-size: 65px;
	color: #0057B8;
	margin-left: 5%;
	letter-spacing: -0.05em;
	line-height: 1;
}
.estilo_1 h2{
	font-size: 35px;
	font-weight: bold;
	height: auto;
	text-align: center;
	color: #ffffff;
	margin-left:0%;
	letter-spacing: -0.05em;
	line-height: 1;
}
.estilo_2 h2{
	font-size: 35px;
	font-weight: bold;
	height: auto;
	text-align: center;
	color: #ffffff;
	margin-top: 35px;
	margin-left: 0%;
	letter-spacing: -0.05em;
}
.estilo_1 h1{
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
	color: #d2d2d2;
    margin-left: 0%;
	margin-top: 5%;
	text-align: center;
	line-height: 1.2;	
}
.colum_izq h2{
	font-size: 35px;
	height: auto;
	color: #ffffff;
	margin-left: 5%;
	letter-spacing: -0.05em;
	line-height: 1;
}
.estilo_1 p{
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 23px;
	color: #d2d2d2;
    margin-left: 0%;
	line-height: 1.2
}
.p2_estilo_1{
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 23px;
	color: #0057B8;
	text-align: center;
    margin-top: 80px;
	line-height: 1.2;
}
.colum_izq p{
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 22px;
	color: #d2d2d2;
    margin-left: 5%;
	line-height: 1.2;
}
.btn_section h1{
	font-size: 30px;
	color: #ff6a00;
	margin-left: 5%;
}
.btn_section p{
	font-size: 20px;
	color: #77797f;
	margin-left: 5%;
}
.btn_section_2 h1{
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
	color: #d2d2d2;
    margin-left: 17%;
	margin-top: -60px;
	line-height: 1.2;	
}
.btn_section_5 h1{
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-size: 20px;
	color: #d2d2d2;
	margin-left: 15%;
	margin-top: -30px;
	line-height: 1.1;
}
.btn_section_2 p{
	font-size: 15px;
	color: #77797f;
	margin-left: 17%;
	margin-top: 1%;
} 
.btn_section_3 p{
	font-size: 20px;
	color: #77797f;
	margin-left: 0%;
	margin-top: 5%;
	padding-left: 20px;
	padding-right: 20px;
}
.btn_section_6 p{
	font-size: 15px;
	color: #77797f;
	margin-left: 0%;
	margin-top: 1%;
}
.btn_section_7 p{
	font-size: 15px;
	color: #77797f;
	margin-left: 0%;
	margin-top: 1%;
}

/*estilo de botones*/
.btn_1{
	background: #0057B8;
	display: block;
	/*margin-left: 40px;*/
	text-align: center;
	text-decoration: none;
	width: 150px;
	padding: 10px 4px;
	outline: none;
	color: #ffffff;
	border-radius: 30px;
	box-shadow:0 0 10px #0057B8;
}
.btn_pulso{
	border: 1px solid #77797f;
	background: #0F1724;
	padding: 10px 8px;
	display: flex;
	margin-top: 100px;
	margin-left: 5%;
	text-align: left;
	justify-content: center;
	width: 230px;
	height: 20px;
	color: #77797f;
	border-radius: 20px;
}

.btn_1:hover{
	background: #0077ff;
	box-shadow: 0 0 0;
}
.content_2{
	width: 700px;
	height: 100px;
	/*background: blue;*/
	margin-left: 3%;
	float: left;
}
.btn_2{
	background: #28a745;
	display: block;
	margin: left;
	margin-left: 5%;
	text-align: center;
	text-decoration: none;
	width: 350px;
	padding: 15px 4px;
	outline: none;
	color: #ffffff;
	border-radius: 30px;
	box-shadow:0 0 3px #28a745;
}
.btn_3{
	background: #ffffff;
	display: block;
	margin-left: 15px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	width: 480px;
	padding: 15px 4px;
	outline: none;
	color: #000000;
	border-radius: 30px;
	box-shadow:0 0 0px #28a745;
}
.btn_3 :focus{
	background: #1f2937;
}


.btn_section{
	border: 1px solid #77797f;
	background: #1a2639;
	padding: 20px 35px 30px 20px;
	margin-top: 40px;
	margin-left: 5%;
	text-align: justify;
	justify-content: center;
	width: 600px;
	height: 100px;
	color: #77797f;
	border-radius: 30px;	
}
.btn_section_2{
	border: 1px solid #1f2937;
	background: #0f1724;
	padding: 20px 35px 30px 20px;
	margin-top: 20px;
	margin-left: 5%;
	text-align: left;
	justify-content: center;
	width: 600px;
	height: 60px;
	color: #77797f;
	border-radius: 30px;	
}
.btn_section_4{
	background: #0F1724;
	margin-top: 30px;
	margin-left: 5%;
	text-align: left;
	justify-content: center;
	width: 200px;
	height: 30px;
	color: #77797f;
	border-radius: 10px;
}
.btn_section_3{
	background: #1a2639;
	border: 1px solid #1a2639;
	border-radius: 20px;
	padding: 30px 0px;
	margin-left: 10%;
	margin-top: 50px;
	text-align: center;
	align-items: center;
	width: 400px;
	height: 225px;
}
.btn_section_3:hover{
	border: 2px solid #003a7c;
	background: #151e2e;
	transition: 0.5s;
}
.btn_section_5{
	background: #0f1724;
	padding: 15px 10px 25px 10px;
	margin-top: 25px;
	margin-left: 35%;
	text-align: left;
	justify-content: center;
	width: 300px;
	height: 20px;
	color: #ffffff;
	border-radius: 15px;
}
.btn_section_6{
	background: #0F1724;
	padding: 20px 40px 10px 40px;
	margin-top: 30px;
	margin-left: 25%;
	margin-right: -30%;
	margin-bottom: -30px;
	text-align: center;
	justify-content: center;
	/*width: 300px;
	height: 20px;*/
	color: #ffffff;
	border-radius: 15px;
	box-shadow: 5px 5px 10px 0px #0e3e73, -5px -5px 10px  #02ee51be ;
}
.btn_section_7{
	background: #1a2639;
	width: 500px;
	height: auto;
	padding: 50px 40px 40px 40px;
	margin-top: 80px;
	margin-left: 30%;
	text-align: center;
	color: #ffffff;
	border: 3px solid #28a745;
	border-radius: 15px;
}


/* animaciones */
.btn_animacion_1{
	background: #251b27;
	display: block;
	margin: left;
	margin-left: 20px;
	margin-top: 0px;
	text-align: center;
	justify-content: center;
	width: 45px;
	padding: 10px 5px 5px 5px;
	outline: none;
	color: #ffffff;
	border-radius: 30px;
}
.btn_animacion_3{
	background: #0F1724;
	display: block;
	margin-left: 20px;
	margin-top: 0px;
	text-align: left;
	justify-content: center;
	width: 50px;
	height: 40px;
}
.btn_animacion_2{
	background: #142f52;
	display: block;
	margin-left: 45%;
	margin-top: 0px;
	width: 60px;
	height: 60px;
	border-radius: 15px;
}
@keyframes pulse {
    0% {
        transform: scale(1.0);
		background-color: #00802bbe;
        box-shadow: 0px 0px 0px #00bb3ebe, 0px 0px 0px #00bb3ebe, 0px 0px 0px #00bb3ebe;
    }
    50% {
        transform: scale(1.2);
        box-shadow: 1px 1px 8px #02ee51be, 0px 0px 8px #02ee51be, 0px 0px 0px #02ee51be; 
    }
    100% {
        transform: scale(1.3);
		background-color: #48ff85be;
        box-shadow: 1px 1px 10px #02ee51be, 0px 0px 10px #02ee51be, 0px 0px 0px #02ee51be; /* Sombra más grande al pulsar */
    }
	50% {
        transform: scale(1.2);
        box-shadow: 0px 0px 5px #02ee51be, 0px 0px 0px #02ee51be, 0px 0px 0px #02ee51be; 
    }	
}

/*efecto pulsante*/
.pulsing-dot {
    width: 10px;
    height: 10px;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 10px;
    background-color: #00bb3ebe; /* Color base del punto */
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0px rgb(218, 218, 233), 0 0 0px #01d849be, 0 0 0px #01d849be; /* Sombra inicial */
    animation: pulse 3s infinite ease-in-out; /* Aplica la animación */
}

/*iconos*/
.btn_animacion_1 svg{
	width: 35px;
	height: 35px;
}

.btn_animacion_1 ellipse{
	fill: #ef4444;
}
.btn_animacion_1 path{
	fill: #ef4444;
}
.btn_animacion_1 circle{
	fill: #ef4444;
}
.btn_animacion_2 svg{
	width: 35px;
	height: 35px;
	margin-top: 15%;
}
.btn_animacion_2 path{
	fill: #0057b8;
}
.btn_section_2:hover{
	border: 1.5px solid #6e0a20;
		.btn_animacion_1{
		background: #ef4444;
		svg ellipse{
			fill: #e0d2d2;
		}
		svg path {
			fill: #e0d2d2;
		}
		svg circle{
			fill: #e0d2d2;
		}
	}
}
.btn_section_5 svg{
	width: 30px;
	height: 30px;
}
.btn_section_5 path{
	fill: #20d610;
}

/* Estilos pie de pagina */

footer{
	width: 100%;
	height: 310px;
	color: #d2d2d2;
	background:#3c3c3c;
	/*font-family: NanumGothic-Regular;*/
}
.container-footer-all{
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
.container-body{
	display: flex;
	justify-content: space-between;
}
.colum_1{
	max-width: 400px;
	height: 100%;
	margin-top: 35px;
	padding-right: 20px;
	
}
.colum_1 p a{
	color: #20d610;
	font-size: 25px;
	text-decoration: none;
	font-family:  "IBM Plex Sans", sans-serif;
	letter-spacing: 0.2px;
	line-height: 0.8;
	font-weight: bold;
}
.colum_1 h1 {
	font-size: 20px;
}
.colum_1 p{
	font-size: 12px;
	margin-top: 5px;
}
.colum_2{
	max-width: 300px;
	height: 100%;
	margin-top: 40px;
	padding-left: 20px;
/*	background: red; */
}
.colum_2 h1 a{
	color: #d2d2d2;
	font-size: 20px;
	text-decoration: none;
}
.colum_2 h1{
	font-size: 20px;
}
.colum_2 p{
	font-size: 12px;
}
.row{
	margin-top: 10px;
}
.row2{
	margin-top: 10px;
}
.row3{
	margin-top: 10px;
}
.row a img{
	width: 32px;
	height: 32px;
	float: left;
}
.row2 a img{
	width: 32px;
	height: 32px;
	float: left;
	padding-left: 10px;
}
.icono a img{
	width: 120px;
	height: 65px;
	object-fit: contain;
}
.colum_3{
	max-width: 300px;
	height: 100%;
	margin-top: 40px;
	padding-left: 20px;
}

.colum_3 h1{
	font-size: 20px;
}

.colum_3 h1 a{
	color: #d2d2d2;
	font-size: 20px;
	text-decoration: none;
}

.colum_3 p {
	font-size: 12px;
	margin-top: 5px;
	padding-top: 8px;
	display: flex;
}

.colum_3 img{
	width: 32px;
	height: 32px;
	float: left;
	margin-top: 5px;
}
.colum_4{
	max-width: 300px;
	height: 100%;
	margin-top: 40px;
	padding-left: 20px;
}
.colum_4 h1 a{
	color: #d2d2d2;
	font-size: 20px;
	text-decoration: none;
}
.colum_4 h1{
	color: #d2d2d2;
	font-size: 20px;
	text-decoration: none;
}
.colum_4 label{
	margin-top:12px;
	font-size: 12px;
	padding-left: 10px;
	display: flex;
	color: #d2d2d2;
}

/* footer derechos */
.container-footer{
	width: 100%;
	height: 40px;
	background: #101010;	
	margin-top: 0.5%;
}
.container_derechos{
	width: 40%;
	margin-left: 30%;
/*	background: yellow; */
	color: #d2d2d2;
	padding-top: 8px;
	text-align: center;	
}
.container_derechos a{
	text-decoration: none;
	color: #20d610;
}