* {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	transition: all .5s;
	box-sizing: border-box;
}

:root {
	--fp: 'Roboto', sans-serif;
	--ft: 'Montserrat', sans-serif;
	--c1: #610C63;
	--c2: #441877;
	--c3: #2D2D2D;
	--c4: #F8F8F8;
}

html {}

body {
	margin: auto;
	display: grid;
	background: rgba(204, 203, 203, 1);
	height: 100%;
}

h1 {
	font-size: clamp(1.5rem, -0.875rem+ 7.333vw, 2.5rem);
	font-family: var(--ft);
}

h2 {
	font-size: clamp(1rem, -0.875rem+ 8.333vw, 2.5rem);
	font-family: var(--ft);
}

h3 {
	font-size: clamp(0.8rem, -0.875rem+ 8.333vw, 2rem);
	font-family: var(--ft);
}

li {
	list-style: none;
}

a,
mark {
	text-decoration: none;
	font-family: var(--fp);
	background: none;
	text-decoration: none;
	font-size: clamp(0.6rem, -0.875rem+ 8.333vw, 1rem);
}

p {
	/*font-family: var(--fp); Comentado por arsenio*/
	font-size: clamp(0.7em, 8rem, 0.9rem);
}

main {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	width: 100%;
	max-width: 100em;
	margin: auto;
	height: 100%;
	background: linear-gradient(20deg, rgba(204, 203, 203, 1) 0%, rgba(243, 239, 239, 1) 100%);
}

.span1 {
	background-color: var(--c1);
	color: var(--c4);
	text-align: center;
	grid-column: 1/-1;
}


/*=========Header========*/

.box_header_title {
	grid-column: 1/-1;
	background: linear-gradient(110.47deg, #CCCBCB 36.41%, #F3EFEF 69.2%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	z-index: 5;
	max-height: 15em;
}

.div_headerUp {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: center;
	flex-wrap: wrap;
	margin: 13px 0px 13px 0px;
}

.logo {
	width: 15rem;
}

.header_navUp {
	position: absolute;
	right: 1%;
	top: 0%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.div_headerUp nav button {
	color: white;
	height: 3em;
	margin-right: 13px;
	background: var(--c1);
	border: 1px solid var(--c1);
	padding: 5px;
	cursor: pointer;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	transition: 0.4s;
}

.div_headerUp nav button:hover {
	scale: 1.04;
}

#nav_button {
	display: flex;
	align-items: center;
	justify-content: center;
}

.botonmenu {
	background-color: var(--c4);
	border: 1px solid var(--c1);
	transition: 1s ease;
	cursor: pointer;
	display: none;
}

.botonmenu:hover {
	transform: scale(1.1);
	border-radius: 6px;
	transition: 1s ease;
}

.box_header_title hr {
	width: 100%;
	margin-top: 13px;
	border: 1px solid var(--c1);
	transition: 0.4s;
	transition-delay: 0.3s;
}

.menupd {
	width: 100%;
	height: 2rem;
	display: flex;
	margin-top: 13px;
	align-items: center;
	justify-content: space-around;
	transition: 0.3s;
}

.menupd a {
	color: var(--c3);
	font-size: 1rem;
	opacity: 80%;
	transition-delay: 1.3s;
	transition: 0.5s;
}

.menupd a:hover {
	opacity: 100%;
	transform: scale(1.1);
}

.menupd .X,
.menupd .logo_monocromatico {
	display: none;
}

.active {
	border-bottom: 1px solid var(--c3);
}

.menupd a img {
	display: none;
}

.logo_monocromatico {
	width: 100px;
	height: 100px;
}

.menupd a p {
	font-family: arial;
}


/*===========Top============*/

#inicio {
	grid-column: 1/-1;
}

#inicio .banner_inicio {
	width: 100%;
	display: flex;
	height: 415px;
	justify-content: safe right;
	align-items: center;
	background: url('../pictures/background/baner_inicio.svg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0px 13px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.35);
	border-radius: 2px;
}

.banner_inicio div {
	width: 35%;
	display: flex;
	align-items: center;
	text-align: center;
	flex-direction: column;
	height: auto;
	color: white;
	text-transform: uppercase;
}

.banner_inicio div h1 {
	font-size: clamp(1.5rem, -0.875rem+ 7.333vw, 2rem);
	font-family: var(--fp);
	font-weight: 400;
}

.banner_inicio div p {
	font-size: 1.3rem;
}

.banner_inicio div a {
	width: 100%;
	min-height: 2.5em;
	display: flex;
	font-size: clamp(1rem, -0.875rem+ 3.333vw, 2rem);
	margin-top: 13px;
	align-items: center;
	justify-content: center;
	color: var(--c4);
	background: linear-gradient(97.5deg, #8F1E70 44.19%, #610C61 65.64%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
}

.banner_inicio div a:hover {
	scale: 1.03;
}

#somos {
	display: flex;
	text-transform: uppercase;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 6em;
	flex-direction: column;
	z-index: 1;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	height: 198px;
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(218, 218, 218, 0.86) 100%);
}

#somos h3 {
	font-size: clamp(0.8rem, -0.875rem+ 8.333vw, 1.6rem);
}


/*=================Servicios==============*/

#servicio {
	grid-column: 1/-1;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background: rgb(82, 42, 129);
	grid-gap: 13px;
	background: linear-gradient(184deg, rgba(82, 42, 129, 1) 0%, rgba(203, 203, 201, 1) 100%);
}

#servicio article img {
	width: 100%;
}

#servicio article {
	width: 100%;
	display: flex;
	align-items: center;
	height: 18EM;
}

#servicio article:nth-child(1) {
	background: url(../pictures/background/caja.svg);
	width: 100%;
	background-size: cover;
	grid-column: 1/-1;
	background-repeat: no-repeat;
}

#servicio article:nth-child(1) .contenido_servicio h3 {
	padding-left: 2rem;
}

#servicio article:nth-child(2) {
	background: url(../pictures/background/caja2.svg);
	width: 100%;
	grid-column: 2;
	height: 17rem;
	background-repeat: no-repeat;
	background-size: cover;
}

#servicio article:nth-child(2) .contenido_servicio {
	width: 100%;
	align-items: center;
}

#servicio article:nth-child(1) .contenido_servicio p {
	margin-left: 3rem;
}

.contenido_servicio {
	display: flex;
	flex-direction: column;
	width: 60%;
	text-align: justify;
	color: var(--c4);
}

.contenido_servicio h3 {
	text-transform: uppercase;
	font-size: clamp(1rem, -0.875rem+ 8.333vw, 1.9rem);
}

.contenido_servicio p {
	font-size: clamp(0.9rem, -0.975rem+ 3.333vw, 0.8rem);
	text-indent: 13px;
	width: 60%;
	margin-top: 13px;
}

.contenido_aside {
	box-shadow: 0px 0px 10px 0px var(--c3);
	height: 16.5rem;
	width: 100%;
	grid-column: 1;
	grid-row: 2;
	background: var(--c2);
	color: var(--c4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-transform: uppercase;
	padding-left: 2rem;
}

.contenido_aside button {
	margin-top: 13px;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	background: linear-gradient(97.5deg, #8F1E70 44.19%, #610C61 65.64%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	width: 65%;
	height: 2.4em;
	color: white;
	padding: 5px;
	font-size: clamp(1rem, 2rem, 1.5rem);
}

.contenido_aside button:hover {
	scale: 1.03;
}


/*==========Nosotros==========*/

#nosotros {
	grid-column: 1/-1;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background: rgba(0, 0, 0, 0.3);
}

.contenedor_mision_vision {
	background: #441877;
	background: linear-gradient(270deg, #441877 0%, rgba(0, 0, 0, 1) 66%);
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	padding: 13px;
	grid-column: 1/-1;
	height: auto;
}

#vision {
	width: 50%;
	background: var(--c2);
}

.caja_nosotros {
	min-height: 19em;
}

.caja_nosotros div {
	font-family: var(--fp);
	display: flex;
	text-indent: 13px;
	flex-direction: column;
	padding: 2em;
}

.caja_nosotros figure {
	color: white;
	display: flex;
	align-items: center;
}

.caja_nosotros figure h4 {
	font-size: clamp(0.9rem, -0.975rem+ 8.333vw, 1.4rem);
}

.caja_nosotros div figure img {
	padding: 0.2px;
	margin-left: 0.8em;
	width: 7%;
	min-width: 1em;
	border: 3px solid white;
	border-radius: 50%;
}

.caja_nosotros div p {
	margin-top: 20px;
	font-weight: 100;
	text-align: justify;
	color: white;
}

#mision {
	width: 50%;
	background: var(--c3);
}

#corporation {
	background: rgb(68, 24, 119);
	background: linear-gradient(90deg, rgba(68, 24, 119, 1) 0%, rgba(202, 202, 200, 1) 100%);
	width: 100%;
	height: 100%;
	grid-column: 1/-1;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#nosotros .header_nosotros {
	color: white;
	text-align: center;
	font-weight: 400;
	font-size: ;
	font-family: var(--fp);
	height: 8rem;
	width: 100%;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1/-1;
	font-size: clamp(1.5rem, -0.875rem+ 7.333vw, 1.6rem);
	background: url(../pictures/background/header_nosotros1.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#corporation .header_nosotros {
	background: url(../pictures/background/header_nosotros2.svg);
}

#corporation .conten {
	padding: 0;
	grid-column: 1/-1;
	width: 100%;
}

.conten h2,
.conten p {
	color: white;
}

#chao {
	height: 100%;
	width: 100%;
}

#corporation .content_list {
	display: grid;
	padding: 13px;
	grid-template-columns: 0.9fr 0.9fr 1fr;
	grid-gap: 13px;
}

.columna_1,
.columna_2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;
	text-align: justify;
}

.columna_1 .target li,
.columna_2 .target li {
	width: 100%;
	font-weight: 400;
	font-family: var(--fp);
}

.content_list .columna_1 .target {
	width: 100%;
	height: 30%;
	min-height: 10em;
	padding: 13px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #441877;
	color: var(--c4);
	font-family: var(--fp);
}

.content_list .columna_1 .target p {
	margin-top: 13px;
	font-size: 1em;
}

.columna_2 {
	background: rgb(223, 198, 252);
	background: linear-gradient(37deg, rgba(223, 198, 252, 1) 0%, rgba(233, 219, 219, 1) 100%);
}

.content_list .columna_2 .target {
	width: 100%;
	padding: 13px;
	font-family: var(--fp);
}

.columna_2 .target p {
	font-size: 0.9em;
}

.columna_2 .target li {
	color: #8F1E70;
}


/*===========clientes y aliados=======*/

#clientesyaliados {
	grid-column: 1/-1;
	width: 100%;
}

.header_clientes {
	color: white;
	text-align: center;
	font-weight: 400;
	font-size: ;
	font-family: var(--fp);
	height: 8rem;
	width: 100%;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1/-1;
	font-size: clamp(1.5rem, -0.875rem+ 7.333vw, 1.6rem);
	background: url(../pictures/background/baner_clientes.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#clientesyaliados .content_aliados {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	padding: 13px;
	background: rgb(204, 203, 203);
	background: linear-gradient(282deg, rgba(204, 203, 203, 1) 0%, rgba(246, 246, 246, 1) 100%);
}

.content_aliados img:nth-child(1) {
	width: 164px;
	height: 196px;
}

.content_aliados img:nth-child(2) {
	width: 255px;
	height: 130px;
}

.content_aliados img:nth-child(3) {
	width: 272px;
	height: 176px;
}

.content_aliados img:nth-child(4) {
	width: 159px;
	height: 184px;
}

.content_aliados img:nth-child(5) {
	width: 190px;
	height: 164px;
}

.content_aliados img:nth-child(6) {
	width: 240px;
	height: 154px;
}

.content_aliados img:nth-child(7) {
	width: 246px;
	height: 175px;
}

.content_aliados img:nth-child(8) {
	width: 362px;
	height: 54px;
}


/*========contacto*/

#contacto {
	grid-column: 1/-1;
	margin-bottom: 13px;
}

.content_form h2 {
	width: 100%;
	font-size: clamp(1rem, -0.875rem+ 8.333vw, 1.5rem);
	text-transform: uppercase;
	color: white;
	background: linear-gradient(97.5deg, #8F1E70 44.19%, #610C61 65.64%);
	padding: 1em;
	text-align: center;
}

#contacto article {
	width: 90%;
	margin: 30px auto;
	display: grid;
	grid-template-columns: 37em 20em;
	box-shadow: 0rem 0.1rem 0.8rem 0rem;
}

#contacto .content_form {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: rgb(223, 223, 223);
	background: linear-gradient(0deg, rgba(223, 223, 223, 1) 0%, rgba(242, 242, 242, 1) 99%);
	grid-column: 1/2;
}

#contacto aside {
	width: 100%;
	height: 100%;
	background: url(../pictures/background/4.jpg);
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	grid-column: 2/4;
	position: relative;
}

#contacto article form {
	display: flex;
	width: 90%;
	padding: 10px;
	flex-direction: column;
	align-items: center;
}

#contacto article form input {
	width: 90%;
	outline: none;
	text-indent: 15px;
	height: 4em;
	background: none;
	border-style: none;
	border-bottom: 1px solid var(--c2);
	margin-bottom: 10px;
}

#contacto article form input:nth-child(4) {
	height: 7em;
	border: 1px solid var(--c2);
	overflow: auto;
}

#contacto article form input:nth-child(5) {
	border-style: none;
	cursor: pointer;
	background: linear-gradient(97.5deg, #8F1E70 44.19%, #610C61 65.64%);
	color: white;
}

#contacto article form input:nth-child(5):hover {
	color: var(--c4);
	scale: 1.07;
}

#contacto aside button {
	position: absolute;
	bottom: 1em;
	border: none;
	padding: 8px 30px;
	display: flex;
	align-items: center;
	color: white;
	justify-content: space-around;
	background: #72B6AA;
	cursor: pointer;
	text-transform: capitalize;
}

#contacto aside button figure {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1em;
}

#contacto aside button:hover {
	background: white;
	color: green;
	transform: scale(1.02);
}

#contacto article h4 {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	background: rgb(0, 0, 0);
	background: linear-gradient(4deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6601879448140764) 35%, rgba(0, 0, 0, 1) 100%);
	color: var(--c4);
	background-blend-mode: screen;
	background-size: cover;
	background-position: center;
	text-align: center;
	font-weight: 400;
	font-family: var(--fp);
	font-size: clamp(1.4rem, 2rem, 1rem);
	padding: 2em;
}

.content_form p {
	width: 85%;
	text-transform: initial;
	text-align: center;
	color: #929191;
	margin-bottom: 1em;
}

#contacto .content_form h5 {
	text-align: center;
	margin-top: 2em;
	width: 80%;
	color: black;
	font-size: clamp(0.9em, 1.2em, 4em);
	font-family: var(--ft);
	margin-bottom: 1em;
	text-transform: uppercase;
}

#contactoDemanda .btn_spinner {
	border: none;
	/*display:;*/
	color: var(--c4);
	background: var(--c1);
	padding: 13px;
}

.loader,
.loader_inicio {
	margin: 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}

.loader_inicio .btn_spinner {
	padding: 3px 10px;
}


/*.content_loader, .content_loader_inicio{
	display:none;
}*/

#spin_inicio {
	margin: 0;
	padding: 3px 13px;
}

.notification_span {
	position: fixed;
	text-transform: uppercase;
	background: green;
	color: white;
	padding: 1em 13px;
	bottom: 5%;
	right: 0;
	z-index: 3000;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: clamp(0.8rem, 5rem, 1.5rem);
}

.notification_span img {
	margin-left: 13px;
}

.notification_span_error {
	position: fixed;
	text-transform: uppercase;
	background: red;
	color: white;
	z-index: 3000;
	padding: 1em 13px;
	bottom: 5%;
	right: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: clamp(0.8rem, 5rem, 1.5rem);
}

.notification_span_error img {
	margin-left: 13px;
}

.notification_span_error_sintaxis {
	position: fixed;
	text-transform: uppercase;
	background: red;
	color: white;
	z-index: 3000;
	padding: 1em 13px;
	bottom: 5%;
	right: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: clamp(0.8rem, 5rem, 1.5rem);
}

.notification_span_error_sintaxis img {
	margin-left: 13px;
}

.load1 {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	border-left-color: black;
	border-top-color: black;
	border-radius: 50%;
	animation: load 1.2s linear infinite;
}

.load2 {
	position: absolute;
	width: 70%;
	height: 70%;
	border: 1px solid transparent;
	border-left-color: var(--c1);
	border-top-color: var(--c1);
	border-radius: 50%;
	animation: load2 1.2s linear infinite;
}

@keyframes load {
	0% {
		translate: -50% -50%;
		rotate: 0deg;
	}
	100% {
		translate: -50% -50%;
		rotate: 360deg;
	}
}

@keyframes load2 {
	0% {
		translate: -50% -50%;
		rotate: 0deg;
	}
	100% {
		translate: -50% -50%;
		rotate: -360deg;
	}
}


/*===================contactopage====================*/


/*=====Galeria=========*/

#galeria {
	grid-column: 1/-1;
}

.header_galeri {
	color: white;
	text-align: center;
	font-weight: 400;
	font-size: ;
	font-family: var(--fp);
	height: 8rem;
	width: 100%;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1/-1;
	font-size: clamp(1.5rem, -0.875rem+ 7.333vw, 1.6rem);
	background: url(../pictures/background/baner_galeria.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.img_container {
	width: 60%;
	height: 500px;
	margin-bottom: 20px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.cont_galeria {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cont_galeria .img_container .main_img {
	width: 50%;
	height: 100%;
	border-radius: 5px;
	box-shadow: 0 5px 5px rgba(1, 23, 46, 0.6);
}

.thumbnail_container {
	height: 80px;
	width: 90%;
	display: flex;
	justify-content: space-around;
}

.thumbnail_container .thumbnail {
	width: 80px;
	height: 80px;
	border-radius: 5px;
	cursor: pointer;
	object-fit: cover;
	opacity: .7;
}

.thumbnail_container .thumbnail:hover {
	opacity: 1;
}

.pre_active {
	opacity: 1 !important;
	box-shadow: 0 5px 5px rgba(1, 23, 46, 0.6);
}

.container_galeria_telf {
	display: none;
}

.modalgaleria {
	position: fixed;
	z-index: 10000;
	top: 0;
	width: 100%;
	min-height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal__img {
	height: 50%;
	width: 80%;
}

.modal__cerrarimg {
	padding: 13px;
	top: 0;
	right: 0;
	position: absolute;
	background: purple;
	color: white;
	font-family: var(--fp);
	font-weight: 900;
}


/*
#galeria .thum_grande img{
	width: 100%;
	height: 25em;
}
.thum_grande{
	margin: auto;
	min-width: 100%;
	
}
.thum_grande:nth-child(1){
	margin-left: %;
}
.thumbs_contenedor{
	width: 50%;
	margin: auto;
	overflow: ;
	display: flex;
}


.min_thumbs{
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 13px;
}
.min_thumbs img{
	width: 10%;
	cursor: pointer;
	opacity: 0.7;
	scale: 0.9;
}
.min_thumbs img:hover{
	scale:1.03;
}

.contenedor_galeria{
	margin-top: 13px;
	
}
.pre-active{
	scale: 1 !important;
	opacity: 1 !important;
	box-shadow: 0px 0px 10px 0px;
}

.imagenes_grande{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	margin: auto;
	max-width: 55rem;
	height: 100%;
	min-height: 35em;
	max-height: 35em;

}
.imagenes_grande .thum-grande{
	height: 100%;
	width: 100%;
	background: linear-gradient(180deg, #441877 0%, #FFFFFF 100%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	padding: 10px;
}

.imagenes_chikita{
	width: 100%;
	min-height: 35em;
	max-height: 35em;
	overflow-y: auto;
	background: linear-gradient(180deg, #441877 0%, #FFFFFF 100%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	padding: 10px;
}
.imagenes_chikita img{
	width: 100%;
	opacity: 0.7;
	scale: 0.9;
	margin-bottom: 13px;
	cursor: pointer;
}

.imagenes_chikita img:hover{
	opacity: 1;
	scale: 1.03;
}
.direccion{
	position: absolute;
	border-radius: 50%;
	cursor: pointer;
	width: 13px;
}
#bnt_left{
	display: none;
	left: 0;
	height: 53px;
	width: 53px;
}
#btn_right{
	display: none;
	height: 53px;
	width: 53px;
	right: 0;
}
*/


/*=============CUENTA INICIADA================*/

#Foto_perfil {
	width: 70%;
	border-radius: 50%;
	height: 100%;
	box-shadow: 0em 0em 0.2em 0em;
}

.perfil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 9em;
	flex-direction: column;
}

.perfil h5 {
	display: block;
	width: 100%;
	margin-top: 10px;
	font-family: sans-serif;
}


/* ==================SECTION LOGUEAR */

.Logueo__Contenedor {
	width: 78%;
	max-width: 50em;
	height: 80%;
	display: flex;
	grid-gap: 0;
	grid-column: 1/-1;
	margin: auto;
	auto;
	font-family: var(--fp);
	border: none;
	margin-top: 1em;
}

.Logueo__Contenedor .Logueo__aside {
	flex-direction: column;
}

.crear {
	margin-bottom: 10em;
}

.Logueo__aside img#perfil_icon {
	margin-bottom: 13px;
	border-radius: 50%;
}

.Logueo__aside h4 {
	text-transform: capitalize;
	font-size: 1.5rem;
	color: white;
}

.edit_user .Input {
	background: none;
	height: 40%;
}

.edit_user .Input h4 {
	margin-top: 1em;
	color: purple;
}

.edit_user .Input input::focus {
	border: none;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.edit_user .Input input {
	border: none;
	height: 100%;
	border-radius: 0;
	border-bottom: 2px solid white;
	background: rgba(222, 220, 220, 0.3);
}

.edit_user .Input:hover {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.edit_user .Input:hover input {
	scale: 1.02;
}

.edit_user {
	background: #ffff !important;
	justify-content: initial;
	align-items: stretch;
}


/*
ELIMINADO PORQUE CON LA NUEVA FORMA ME LO OCULTA en vez de mostrarlo

La idea es que el modal antes de mostrarse, no esté en el dom (cosa que aqui pos está en el dom y por eso me
lo oculta cuando deberia mostrar, por lo que configurare uno nuevo usando la clase modal, la ide será para 
identificarlo)

#modal{ 
	max-height: 30em;
	height: 80%;
	position: absolute;
	display: flex;
	z-index: 100;
	opacity: 0;
	margin: -60% auto;
	border-style: none;
	box-shadow: 0px 10px 10px 0px;
	transition: 0.9s;
}
#modal::backdrop{
	transition: 1s;
	background: black;
	opacity: 0.8;
}*/


/* Diseño sencillo de modal agregado por arsenio */

.modal_container {
	border: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	/* Fondo semitransparente */
	display: none;
	z-index: 999;
	/* Establece un z-index menor que el modal */
}

.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000;
}

.modal {
	animation: show-modal 0.5s ease-in-out forwards;
}

@keyframes show-modal {
	0% {
		opacity: 0;
		transform: translate(-50%, -150%);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

.cerrar_modal {
	position: absolute;
	border: none;
	top: 0px;
	right: 0px;
	color: white;
	font-family: arial;
	cursor: pointer;
	padding: 13px;
	background: linear-gradient(97.5deg, var(--c1) 44.19%, #610C61 65.64%);
}

.modal.cerrando {
	animation: cerrar-modal 0.3s ease-in-out forwards;
}

@keyframes cerrar-modal {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -150%);
	}
}

.modal_container--oculto {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}


/* aside */

.Logueo__aside {
	width: 40%;
	background: #2D2D2D;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Logueo__aside img {
	width: 35%;
}

#icon2 {
	width: 55%;
}


/* container__Inputs */

.Logueo__Contenedor_input {
	height: auto !important;
	width: 70%;
	background: #8F1E70;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.Input {
	margin-bottom: 1em;
	width: 80%;
	display: flex;
	text-transform: capitalize;
	flex-direction: column;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	align-items: flex-start;
	color: #FFFFFF;
}

.Input input {
	margin-top: 3px;
	text-align: left;
	padding: 13px;
	width: 100%;
	height: 4em;
	border-style: none;
	background: rgba(218, 218, 218, 0.86);
	border-radius: 5px;
}

.Input input:focus,
.imput input:focus {
	scale: 1.03;
	outline: 2px solid var(--c3);
}

.Logueo_botonyrecuperar {
	width: 90%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.Logueo_botonyrecuperar h4 {
	width: 40%;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-size: 19px;
	text-align: center;
	color: #DADADA;
}

.Logueo_botonyrecuperar h4 a {
	color: #DADADA;
}

.Logueo_botonyrecuperar h4:hover a {
	color: #DADADA;
	border-bottom: 1px solid white;
}

.Logueo_botonyrecuperar button {
	border-style: none;
	text-transform: uppercase;
	width: 6em;
	height: 2em;
	background: #2D2D2D;
	box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	color: #FFFFFF;
	cursor: pointer;
}

.btnLoginUser:hover {
	scale: 1.03;
	color: black;
	background: whitesmoke;
}

.opci button:hover {
	transform: scale(1.1);
	background: white;
	color: black;
}


/*button:hover{
	transform: scale(1.1);
	background: white;
	color: black;
}*/

h5 {
	font-family: 'Roboto';
	font-style: normal;
	margin-top: 13px;
	font-weight: 400;
	font-size: 15px;
	color: #FFFFFF;
}

h5 a {
	color: var(--color5);
}

h5:hover a {
	border-bottom: 1px solid white;
}


/*--crear cuenta---*/

.imput {
	width: 100%;
	align-items: center;
}

.imput h4 {
	width: 92%;
}

.imput {
	margin-top: 1em;
	display: flex;
	flex-direction: column;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 28px;
	color: #FFFFFF;
	width: 83%;
}

.imput input {
	margin-top: 3px;
	text-align: left;
	padding: 13px;
	width: 100%;
	height: 3em;
	border-style: none;
	background: rgba(218, 218, 218, 0.86);
	border-radius: 5px;
}

.imput_chek {
	display: flex;
	align-items: center;
	width: 75%;
	margin-top: 13px;
	margin-bottom: 13px;
	margin-left: -1em;
	color: #ffff;
	justify-content: space-between;
}

.imput_chek input {
	margin-left: 10px;
	width: 1.5em;
	cursor: pointer;
}

.opci {
	width: 78%;
	display: flex;
	color: #fff;
	justify-content: space-around;
	align-items: center;
}

.opci button {
	border-style: none;
	text-transform: uppercase;
	width: 8em;
	background: #2D2D2D;
	box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 1em;
	line-height: 35px;
	color: #FFFFFF;
	cursor: pointer;
}


/*========Panel===========*/

.content_asidepanel {
	overflow-y: hidden;
	top: 19%;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	min-height: 50vw;
}

.header_cal img {
	width: 1.3em;
}

.header_cal div {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.header_cal div #botonPanel_pc {
	margin-left: 3px;
	padding: 5px;
	font-size: clamp(0.1rem, -0.125rem+ 2vw, 1rem);
	cursor: pointer;
	border: 1px solid purple;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.header_cal div #botonPanel_pc:hover {
	background: purple;
	border: 1px solid #fff;
	color: #ffffff;
}

.header_cal {
	display: flex;
	justify-content: space-between;
	width: 100%;
	z-index: 2;
	max-height: 5em;
	padding: 1em 2em;
	align-items: center;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.14);
	background: linear-gradient(90deg, #ffffff 0%, rgba(218, 218, 218, 0.86) 71.41%);
}

.header_cal a {
	display: flex;
	align-items: flex-end;
	color: var(--c1);
	font-size: clamp(0.6rem, -0.875rem+ 8.333vw, 1.2rem);
	font-weight: 600;
	line-height: 20px;
	border-bottom: 1px solid var(--c2);
	justify-content: safe flex-end;
}

.header_cal a:hover {
	scale: 1.1;
}

.aside_panel {
	width: 25%;
	min-width: 15em;
	height: 94vh;
	min-height: 100%;
	background: #ffffff;
	padding: 3em 2em;
	display: flex;
	/*position:absolute;*/
	flex-direction: column;
	/**/
	z-index: 100;
	margin-left: -25%;
	box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}

.activo {
	border-left: 1px solid var(--c2);
	z-index: 700 !important;
}

.activo_pc {
	position: ;
	margin-left: 0%;
}

.aside_panel footer {
	font-family: var(--fp);
	color: var(--c1);
	display: flex;
	text-transform: capitalize;
	justify-content: safe flex-start;
	padding: 13px;
}

.aside_panel ul a {
	text-transform: capitalize;
	display: flex;
	font-size: clamp(0.13rem, -0.9rem+ 8.333vw, 0.9em);
	;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 13px;
	height: 3em;
	padding: 12px;
	cursor: pointer;
	color: rgba(0, 0, 0, 1.0);
}

.aside_panel ul a img {
	width: 15%;
}

.aside_panel ul a:hover {
	border-left: 1px solid var(--c2);
}

#botonPanel {
	display: none;
	background: #D9D9D9;
	box-shadow: ;
	padding: 10px;
	cursor: pointer;
	border-radius: 0px 10px 10px 0px;
}


/*Panel home*/

.panel_home {
	margin-left: 13px;
	margin-bottom: 6em;
	padding: 13px 10px 0px 0px;
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.panel_home div {
	background: #FFFFFF;
	border-radius: 5px;
}

.contendido_per {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

.panel_home .info_delperfil {
	width: 60%;
	max-height: 35em;
}

.panel_home .historial {
	width: 38%;
	max-height: 25em;
	font-family:var(--ft);
}

.info_per {
	padding: 13px;
	margin-top: 3em;
	width: 38%;
}

.info_per p {
	font-weight: 200;
	color: #000000;
	text-align: justify;
}

.info_per h4 {
	text-transform: capitalize;
	font-size: clamp(1rem, 4rem, 1.5rem);
	font-family: var(--fp);
	margin-bottom: 13px;
}

.encabezado_per .perfilimage {
	position: absolute;
	width: 40%;
	max-width: 10em;
	bottom: -2.8em;
	left: 10px;
}

.info_delperfil {
	display: flex;
	flex-wrap: wrap;
}

.info_delperfil .encabezado_per {
	min-height: 9em;
	position: relative;
	width: 100%;
	background-image: url(../pictures/background/headerperfil.svg);
	background-size: cover;
	background-repeat: no-repeat;
}

.info_delperfil .encabezado_per h6 {
	color: black;
	cursor: pointer;
	font-family: var(--fp);
	font-weight: 700;
	padding: 6px 18px;
	position: absolute;
	right: 10px;
	bottom: -1.2em;
	font-size: clamp(0.9rem, 2rem, 1rem);
	display: inline-block;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.info_delperfil .encabezado_per h6:hover {
	scale: 1.05;
	color: white;
	background: var(--c3);
}

.info_delperfil hr {
	width: 0px;
	height: 80%;
	margin: auto;
	display: inline-block;
}

.articulos_per {
	padding: 13px;
	width: 60%;
}

.articulos_per h5 {
	margin-bottom: 13px;
	color: var(--c3);
	font-weight: 400;
	text-transform: capitalize;
}

.articulos_per .articulo_info_per {
	background: #E1E1E1;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	padding: 13px;
	margin-bottom: 13px;
}

.articulos_per .articulo_info_per p {
	font-weight: 300;
	margin-top: 13px;
}

.articulos_per .articulo_info_per h6 {
	font-family: var(--fp);
	text-transform: capitalize;
	font-size: clamp(0.6rem, 5rem, 1rem);
}

.historial {
	padding: 13px;
}

.historial h5 {
	color: var(--c3);
	font-weight: 200;
}

.historial table {
	margin-top: 13px;
	width: 100%;
}

td {
	border-bottom: 1px solid #E1E1E1;
	padding: 10px; /*Agregado por arsenio*/
}

.historial table tr:nth-child(1) {
	background: #E1E1E1;
}

.historial table tr {
	padding: 13px;
	width: 100%;
	height: 3em;
}


/**/


/*========CALCULADORA========*/


/*SLIDER=====*/

.boxslider {
	margin: auto;
	margin-top: 13px;
	height: 100%;
	width: 70%;
	grid-column: 1/-1;
	overflow: hidden;
	z-index: 1;
	max-height: 40em;
	box-shadow: 0px 0px 10px 0px;
	margin-bottom: 10em;
}

.boxslider header {
	display: flex;
	padding: 1.3em;
	background: rgb(60, 59, 59);
	background: linear-gradient(51deg, rgba(60, 59, 59, 1) 0%, rgba(32, 32, 32, 1) 100%);
	color: white;
	text-transform: uppercase;
	align-items: center;
}

.boxslider header h1 {
	margin-left: 1em;
	margin-right: 2em;
	font-size: clamp(1.5rem, 5rem, 0.1rem);
}

.slider {
	height: 100%;
	width: 300%;
	display: flex;
}

#btn_anterior {
	color: white;
}

.view_1 {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 95%;
	padding-bottom: 5rem;
	padding-top: 1em;
	min-height: 28em;
}

.view_1:nth-child(1) {
	background: url(../pictures/background/fondoCalculadora.png);
	background-repeat: no-repeat;
	background-size: 200% 210%;
	background-position: center;
}

.view_1:nth-child(2) {
	background: rgb(68, 24, 119);
	background: linear-gradient(321deg, rgba(68, 24, 119, 1) 0%, rgba(45, 45, 45, 1) 100%);
}

.view_1:nth-child(3) {
	background: rgb(68, 24, 119);
	background: linear-gradient(73deg, rgba(68, 24, 119, 1) 0%, rgba(45, 45, 45, 1) 100%);
}

.view_1:nth-child(3) form {
	min-width: 80%;
}

.containers_botones_cal {
	background: none;
    display: flex;
    align-self: flex-end;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#btn_next2 {
	margin-top: 13px;
}

.view_1 .btn-next,
.btn-back {
	font-family: var(--fp);
	font-weight: 900;
	font-size: clamp(0.8rem, 2rem, 0.6rem);
	cursor: pointer;
	text-transform: uppercase;
	align-self: flex-end;
	height: 15%;
	max-height: 4.5em;
	min-height: 2.5rem;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: var(--c3);
	width: 9em;
	border-style: none;
}

.view_1 .btn-next,
.btn-back:hover {
	scale: 1.05;
}

.fin_contrato:hover {
	background: purple;
}

.view_1 form {
	height: 100%;
	display: flex;
	width: 50%;
	justify-content: space-between;
	flex-direction: column;
}

.view_1 form h5 {
	text-transform: uppercase;
}

.view_1 form div {
	background: #DADADA;
	width: 100%;
	font-size: clamp(1rem, 2rem, 0.7rem);
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.view_1 form div label {
	text-transform: uppercase;
	font-weight: 400;
	font-family: var(--fp);
}

.view_1 form div input:focus {
	outline: none;
}

.view_1 form input {
	border: none;
	background: none;
	width: 100%;
	height: 2.5rem;
	padding-left: 13px;
}

.view_1 form input:placeholder-shown {
	text-transform: uppercase;
}

#trans,
#anticipos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	color: white;
	padding: 0;
}

#trans h5,
#anticipos h5 {
	margin-top: 0;
}

#trans input,
.radios input {
	width: 1rem !important;
	height: 1rem;
	cursor: pointer;
}

#anticipos input {
	width: 1rem !important;
	height: 1rem;
	cursor: pointer;
}

.radios {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none !important;
	color: white;
	padding: 0;
	border-bottom: 1px solid white;
}

.radios h5 {
	margin-top: 0;
}

#sueldoNoFijo,
#sueldoFijo {
	display: flex;
	align-items: center;
	justify-content: center;
}

#sueldoNoFijo {
	display: none;
}

.radios div label {
	color: white;
}

#riesgoARL input {
	height: 2rem;
	cursor: pointer;
	width: 2rem;
}

#resultado {
	box-shadow: 0px 0px 0.3rem black;
	padding: 13px;
	padding-bottom: 13px;
	margin: auto;
	!important;
	margin-bottom: 16px;
	width: 100% !important;
	font-family: var(--ft);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: auto !important;
}

#resultado img {
	width: 50%;
	margin: auto;
	max-width: 10em;
}

#resultado h5 {
	padding: 13px;
	text-decoration: underline;
	color: black;
	font-weight: 700;
	font-size: clamp(2rem, 5rem, 1rem);
}

#resultado div {
	border: 1px solid black;
	margin-bottom: 10px;
	padding: 3px 15px;
	display: flex;
	justify-content: center;
}

#resultado div:nth-child(2) {
	margin-top: 13px;
}

.divisorEyMa {}

#resultado div label {
	width: 50%;
}

#resultado div input {
	width: 40%;
}

#resultado,
#encabezado_result {
	border: none !important;
	width: 100%;
	padding: 1.5em;
	display: flex;
	align-items: center;
}

#resultado,
#encabezado_result h3 {
	font-size: clamp(0.7rem, 3rem, 1.7rem);
}

#resultado div img {
	width: 30% !important;
	left: 0;
	margin: 0;
	margin-right: 13px;
}


/*====Footer===*/

.Footer_page {
	background: rgb(202, 202, 200);
	background: linear-gradient(180deg, rgba(202, 202, 200, 1) 0%, rgba(255, 255, 255, 1) 100%);
	width: 100%;
}

.footer_top {
	display: flex;
	padding-top: 13px;
	justify-content: space-around;
	width: 100%;
	text-transform: uppercase;
	font-family: var(--ft);
	color: var(--c3);
}

.footer_top ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.footer_top ul:nth-child(1) {
	width: 50%;
}

.footer_top ul:nth-child(3) {
	width: 50%;
}

.footer_top ul li a {
	color: var(--c3);
	font-family: arial;
	font-size: clamp(0.7rem, 5rem, 0.2rem);
}

.footer_top ul h5 {
	margin-bottom: 13px;
	font-family: arial;
	color: var(--c3);
	width: 65%;
	text-align: center;
}

.footer_top ul li {
	margin-bottom: 13px;
	width: 65%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer_top figure {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60%;
	border-right: 1px solid var(--c3);
	border-left: 1px solid var(--c3);
}

.footer_mid {
	display: flex;
	justify-content: space-around;
	width: 100%;
	flex-wrap: wrap;
	padding: 13px;
}

.footer_bot {
	color: white;
	padding: 13px;
	text-align: center;
	font-family: var(--ft);
	width: 100%;
	background: #2D2D2D;
}


/*header iniciado*/

.cuentaIniciada {
	background: #F5F5F5;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	min-width: 10em;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 10px;
	position: relative;
	justify-content: space-around;
}

.cuentaIniciada a {
	font-weight: 400;
	text-transform: capitalize;
	color: var(--c3);
}

.box-name {
	width: 40%;
}

#drop-down {
	cursor: pointer;
}

#drop-down:hover {
	scale: 1.06;
}

.box-dropdow {
	top: 3.4em;
	left: 1.2em;
	position: absolute;
	display: none;
	z-index: 1;
}

.box-dropdow li {
	padding: 0.6em 1.4em;
	background: rgba(80, 80, 80, 1.0);
}

.chaodp {
	display: block;
}

.box-dropdow li:hover {
	scale: 1.03;
	background: white;
}

.box-dropdow li:hover a {
	color: black;
}

.box-dropdow li a {
	color: var(--c4);
}

.perfil_foto {
	max-width: 3em;
	height: 100%;
	border: 1px solid rgba(143, 30, 112, 0.62);
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05));
	border-radius: 5px;
}


/***ṔUBLICACIONES***/

#publicaciones {
	grid-column: 1/-1;
	display: grid;
	grid-template-columns: 1.5fr 0.4fr;
}

#publicaciones h3 {
	grid-column: 1/-1;
	color: var(--c4);
	text-transform: uppercase;
	background: url('../pictures/background/headerarticle.svg');
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	height: 8rem;
	width: 100%;
	font-size: clamp(1.5rem, -0.875rem+ 7.333vw, 1.6rem);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#publicaciones article {
	padding: 13px;
}

.conten_article {
	grid-column: 1;
}

.principal {
	background: url('../pictures/background/publifont.svg');
	display: flex;
	align-items: center;
	padding: 2em;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	justify-content: center;
}

.principal img {
	padding: 13px;
	width: 40%;
}
 
.sub-title {
	margin-left: 13px;
	text-transform: uppercase;
	color: var(--c2);
	font-size: clamp(1rem, 5rem, 1.1rem);
}

.principal .principal_cont {
	padding: 13px;
	text-align: justify;
	display: flex;
	background: linear-gradient(180deg, #FFFFFF 0%, #E1E1E1 100%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.principal_cont p {
	text-align: justify;
}

.principal_cont h5 {
	text-transform: capitalize;
	color: var(--c1);
	font-size: clamp(1rem, 5rem, 1.3rem);
}

.principal_cont li {
	font-family: var(--fp);
	margin-left: 13px;
	list-style: disc;
}

.contenido_p {
	background: linear-gradient(180deg, #FFFFFF 0%, #CBCBC9 100%);
	text-align: justify;
	padding: 13px;
}

.contenido_p strong {
	font-family: var(--fp);
	letter-spacing: 1px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--c2);
}

.asideoption {
	padding: 0px 13px;
	background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #CCCCCA 100%);
}

.asideoption .options {
	width: 100%;
	padding: 3px 8px;
	text-align: justify;
	font-family: var(--fp);
	border: 1px solid var(--c2);
	margin-bottom: 13px;
}

.asideoption .options li {
	list-style: disc;
	margin-left: 16px;
}

.asideoption .options h5 {
	color: var(--c2);
	font-family: var(--ft);
	margin-bottom: 13px;
	font-size: clamp(0.7rem, 1rem, 1rem);
}

.asideoption .options ul li:nth-child(1) {
	color: var(--c2);
	font-family: var(--fp);
	list-style: none;
	margin-left: 0px;
	text-align: left;
	font-size: 0.5rem, 2rem, 0.7rem;
}

.options #p_boton {
	cursor: pointer;
	margin-top: 14px;
	padding: 13px;
	max-width: 6em;
	color: white;
	border: none;
	background: linear-gradient(105.87deg, #441877 38.93%, #610C61 72.67%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


/****/


/**USUARIOS**/

.usuarios_p {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 13px;
	justify-content: space-between;
	font-family: var(--fp);
}

.targetU .profile {
	width: 50px;
}

.targetU {
	margin-top: 13px;
	background: white;
	display: flex;
	padding: 13px;
	width: 30%;
	justify-content: space-around;
	align-items: center;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.iconos_cont {
	display: flex;
	flex-direction: column;
}

.iconos_cont img {
	cursor: pointer;
	width: 1.2em !important;
}

.iconos_cont img:hover {
	scale: 1.07;
}


/**/


/*modales de usuario*/

dialog#view_user_modal {
	margin-top: 1em;
	height: 70%;
}

dialog#view_user_modal .Logueo__Contenedor_input {
	background: white;
	text-transform: capitalize;
	padding: 13px;
	align-items: flex-start;
}

dialog#view_user_modal .Logueo__Contenedor_input .input #rol {
	padding: 1.5em;
	margin-top: 13px;
	cursor: pointer;
	background: rgba(190, 190, 190, 0.4);
	border: none;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

dialog#view_user_modal .Logueo__Contenedor_input button {
	margin-top: 40px;
}

dialog#view_user_modal .Logueo__Contenedor_input .input #rol:focus {
	box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

dialog#view_user_modal .Logueo__Contenedor_input .input {
	color: rgba(100, 100, 100, 1.0);
	margin-bottom: 13px;
	font-size: clamp(1rem, 0.9886rem+ 0.9091vw, 1.5rem);
}

dialog#view_user_modal .Logueo__Contenedor_input span {
	color: black;
}


/**/


/***COntratos***/

.sect_contratos .slider {
	width: 1100% !important;
}

.sect_contratos {
	margin-top: 3em;
	display: flex;
	grid-template-columns: repeat(2, 1fr);
	width: 100%;
	/*flex-wrap: wrap;*/
	margin-bottom: 4em;
	margin-left: 15px;
	justify-content: center;
}

.wrap .cont_contrato {
	margin-top: -13em;
}

.wrap {
	transition: .5s;
	width: 80%;
	flex-wrap: wrap;
}

.input-row-hechos input,
.input-row-anexos input,
.input-row-peticiones input {
	height: 5em !important;
}

.input-container {
	width: 100%;
	max-height: 13em;
	overflow-y: scroll;
}
.cont_adds{
	display: flex;
	width: 40%;
	align-items: center;
    justify-content: space-around;
}
.add_hechos,
.add_peticiones,
.add_anexos,
.remove_hechos,
.remove_peticiones,
.remove_anexos {
    padding: 10px;
    margin-top: 3px;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    background: var(--c3);
    height: 2.4em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add_peticiones,
.add_anexos,
.add_hechos,.remove_hechos,
.remove_peticiones,
.remove_anexos :hover {
	scale: 1.07;
}

.boxwrap {
	width: 60% !important;
}

.sect_contratos .boxslider {
	width: 50%;
	grid-column: 1 !important;
	box-shadow: none;
	background: none;
	max-height: em;
}

.sect_contratos .view_1 {
	background: none;
	padding: 13px;
	flex-wrap: wrap;
	height: 100%;
	align-content: baseline;
	min-height: 0;
}
.form_header{
	margin-bottom: 13px;
	color: white;
	padding: 13px;
	background: var(--c3);
}
.options__form{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 13em;
}
.options__form a {
	    display: flex;
	 overflow: hidden;
    padding: 20px;
    background: white;
    border-radius: 6%;
    max-width: 13em;
    color: black;
    position: relative;
    font-size: 13px;
    text-align: center;
    align-items: center;
    transition: .5s;
    z-index: 3;
}
.options__form a:before{
	content: '';
	transition: .5s;
	top:-100%;
	z-index: -1;
	left: 0;
	background: var(--c1);
	position: absolute;
	width: 100%;
	height: 100%;
}
.options__form a:hover:before{
	top: 0;

}
.options__form a:hover{
	scale:1.04;
	color: white;
	  box-shadow: 0px -3px 17px 0px rgba(148, 19, 144, 0.3);

}
.sect_contratos .view_1 #containers_botones_cal {
	align-self: flex-start;
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.sect_contratos .view_1 button {
	position: relative;
}
.sect_contratos .view_1 .btn-next{
overflow: hidden;
background: var(--c1);

}
.sect_contratos .view_1 .btn-next:hover{
scale: 1.09;
transition-delay: .6s;
  box-shadow: -15px 0px 17px 0px rgba(148, 19, 144, 0.2);

}
.sect_contratos .view_1 .btn-next:before{
	content: '';
	background: purple;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	left: -100%;
	transition: .4s;
}
.sect_contratos .view_1 .btn-next:hover:before{
	left: 0;
	transition: .4s;

}
.containers_botones_cal .btn-back{
	overflow: hidden;
	background: var(--c1);
}
.sect_contratos .view_1 .containers_botones_cal button {
	margin: 0;
	margin: 0px 10px;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.rellenos {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.sect_contratos i {
	text-transform: capitalize;
	opacity: 0.5;
	position: relative;
	line-height: 1.4em;
	
}
.my-element::before{
	content:'';
	background: purple;
	height: 2px;
	padding: 1px;
	width: 100%;
	bottom: 0;
	box-shadow:  0px 0px 10px purple;
	position: absolute;
	
}

.sect_contratos input {
	padding: 13px;
	border: 1px solid rgba(122, 30, 220, 0.5);
	width: 90%;
	margin-top:13px;
	border-radius: 5px;
	margin-bottom: 13px;
}

.sect_contratos input:focus {
	outline: 1px solid purple;
}

.form_preguntas {
	margin-bottom: 2em;
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

.form_preguntas p {
	font-weight: 400;
}

.cont_contrato {
	overflow-x: hidden;
	grid-column: 2;
	width: 500px;
	margin-right: 13px;
}

.contratos {
	overflow-x: scroll;
	overflow-y: auto;
	width: 500%;
	display: flex;
	height: 700px;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.contratos input {
	display: none;
}

.page i {
	text-transform: uppercase;
	max-width: 500px !important;
	height: auto !important;
	word-wrap: anywhere;
	text-align:inherit;
	margin-bottom: 13px;
	display: inline-block;
}

.page {
	overflow-y: scroll;
	height: 100%;
	width: 100%;
	max-width: 500px;
	background: white;
}

.page hr {
	color: purple;
	width: 40%;
	margin-bottom: 5px;
	margin-left: 1.3em;
}

.page p u {
	font-weight: bold;
}

.page h5 {
	border-bottom: 1px solid purple;
	margin: 10px;
	color: var(--c2);
	padding: 13px;
	text-transform: capitalize;
	font-weight: 900;
}

.page p {
	line-height: 1.5em;
	padding: 0em 2em 3px 23px;
	text-align: justify;
	width: 100%;
	margin-bottom: 5px;
}

.page h6 {
	padding: 0px 23px;
	text-align: justify;
	width: 100%;
}

.page ul li {
	font-family: var(--fp);
	font-size: clamp(0.7em, 8rem, 0.9rem);
	padding: 1em 4em 1em 5em;
	text-align: justify;
	width: 100%;
}

.radios_confirm_naturalojuridica {
	width: 60%;
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3px;
}

.sec_nj {
	max-height: 5em;
	padding: 5px;
}

.radios_confirm_naturalojuridica input {
	margin: 0.8px;
	cursor: pointer;
	height: auto;
}
#juridica {
    align-items: flex-start;
    flex-direction: column;
    width: 90%;
}

#juridica label {
	font-family: var(--ft);
    font-weight: 400;
    font-size: clamp(0.2rem,1rem,0.8rem)
}

#juridica input {
	width: 100%;
	max-height: 10px;
}

#natural {
	display: none;
}

.manual-btn {
	border: 2px solid purple;
	padding: 5px;
	border-radius: 10px;
	cursor: pointer;
	transition: 1s;
	position: relative;
}

.manual-btn:nth-child(1) {
	background: green;
	border: 2px solid green;
}

.manual-btn:not(:last-child) {
	margin-right: 40px;
}

.manual-btn:hover {
	background: purple;
}

#radio4:checked~ .primer {
	margin-left: -60%;
}

#radio3:checked~ .primer {
	margin-left: -40%;
}

#radio2:checked~ .primer {
	margin-left: -20%;
}

#radio1:checked~ .primer {
	margin-left: -0%;
}

#radio5:checked~ .primer {
	margin-left: -80%;
}

.navegacionmanual {
	position: absolute;
	margin-top: -1.8em;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}

.navegacionmanual:nth-child(1) {}

.inputs {
    position: relative;
    display: flex;
    /* flex-wrap: wrap; */
    font-family: var(--fp);
    align-items: center;
    justify-content: space-around;
    background: #fff;
    /* min-height: 4em; */
    width: 100%;
    padding: 26px;
    margin-bottom: 2em;
    border-radius: 10px;
    margin: 10px;
    height: 15em;
    z-index: 2;
    font-size: clamp(0.7rem, 0.6045rem+ -0.8969vw, 0.6rem);
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.inputs input[type="text"]{
	height: 3.5em !important;

}
.inputs p,
.inputs,
i {
	font-size: 1.06em;
	font-weight: 400;
	text-align: center;
}

.inputs img {
	background: red;
	margin-bottom: 12px;
	margin-left: 4px;
	cursor: pointer;
}

.inputs img:hover {
	scale: 1.05;
}
.scroll-content{
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inputs .mensaje_span {
	margin-left: 200px;
	position: absolute;
	box-shadow: rgba(106, 4, 104, 0.4) 0px 0px 0px 2px, rgba(106, 4, 104, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
	opacity: 1;
	display: none;
	color: white;
	padding: 13px;
	width: 90%;
	overflow: ;
	font-size: clamp(0.7rem, 0.6045rem+ -0.8969vw, 0.6rem);
	margin-left: 15px;
	left: 0;
	background: purple;
	transition-delay: 2s;
	transition: 3s;
}

.interrogation:hover~ .mensaje_span {
	transition: 3s;
	transition-delay: 0.5s;
	display: block;
	opacity: 1;
	overflow: auto;
	z-index: 40!important;
}

.inputs .interrogation:hover {
	background: rgba(222, 220, 220, 1);
	color: purple;
}

.inputs .interrogation {
	position: absolute;
	padding: 7px;
	z-index: 100;
	border-radius: 50%;
	font-family: var(--fp);
	color: white;
	cursor: pointer;
	background: rgba(20, 20, 20, 0.6);
	top: -1em;
	right: -0.5em;
}


/****/


/*Lista de correr*/

#lista_de_correos {
	width: 100%;
	height: 100%;
	padding: 13px;
	font-family: var(--fp);
	text-align: left;
}

#titulos_tabla_info td {
	font-weight: 400;
}

#lista_de_correos table {
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	background: white;
}

#lista_de_correos table img {
	width: 60px;
}

#lista_de_correos table tr td {
	padding: 13px;
	width: 80%;
}

#titulo_tabla {
	margin-bottom: 13px;
	opacity: 0.8;
	color: var(--c3);
}

#no_hay_movimiento {
	opacity: 0.6;
	color: var(--c3);
}

#titulos_tabla_info {
	color: var(--c1);
}

#lista_de_correos .informacion_lista_correos {
	cursor: pointer;
}

#lista_de_correos .informacion_lista_correos:hover {
	scale: 1.01;
	background: white;
}

/*------------------------------------------__*/

.contratos_disponibles{
	margin:10px auto;
	width: 94%;
	
	max-height: 35em;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.contratos_disponibles header{
	color: white;
	padding: 13px;
	display: flex;
	background: var(--c3);
	align-items: center;
}
.contratos_disponibles header img{
	width: 4em;
	margin-left:3px;
}
.options_contratos{
position: relative;
overflow: hidden;
height: 17em;
margin: 10px;
width: 17em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 5%;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
cursor: pointer; /* Agregado por arsenio */
}
.options_contratos:hover{
	scale: 1.04;
}
.options_contratos:after{
content: '.';
width: 100%;
position: absolute;
height: 100%;
transform: translateX(100%);
background: purple;
transition: .5s;
}

.options_contratos:hover:after{
	transition: .5s;
	transform: translateX(0px);
}
.options_contratos:hover a{
	border-bottom: 1px solid white;
	width: 95%;
	bottom: 1em;
	color:white;
}
.options_contratos img{
	top:0;
	padding: 13px;
	z-index: 1;
	width: 50%;
	left: 0;
	
}
.views_contratos{
	overflow-x: auto;
	width: 100%;
	height:100%;
	display: flex;
	flex-wrap: wrap;

	align-items:center;
	background: rgba(255, 250, 250, 1.0);
}
.views_contratos a{
	z-index: 2;
	display: inline-block;
	padding: 13px;
	text-align: center;
	color: black;
	position: absolute;
	width: 100%;
	bottom: 0%;

	font-size: clamp(1rem, 1.5rem, 1.5rem);

}
/*Estilos agregados por arsenio (Por lo que se podrian mejorar xdddd)*/
/* Estilos para la barra de progreso */
.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  margin-top: 10px;
  /* Otros estilos, como márgenes o colores, pueden ser personalizados aquí */
}

.progress-fill {
  height: 100%;
  border-radius: 8px;
  background-color: #610C63;
  /* Otros estilos, como animaciones o gradientes, pueden ser personalizados aquí */
}

.dateDoc{
	color: #777; 
	font-size: 12px;
}