.iniciar-sesion, .iniciar-sesion * {box-sizing:border-box; }
.iniciar-sesion {background:#ffffff; position:relative; }
.iniciar-sesion2 {width:100%; display:flex; flex-direction:column; gap:0px; align-items:center; justify-content:flex-start; position:absolute;  top:0px; }
.group {background:#0e357a; border-radius:28px; padding:12px 24px 12px 24px; display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:hidden; }
.group2 {background:#55e6a5; border-radius:28px; padding:12px 24px 12px 24px; display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:hidden; }
.seccion-iniciosesion {display:flex; flex-direction:column; gap:0px; align-items:center; justify-content:flex-start; flex-shrink:0; position:relative; }
.iniciar-sesion4 {display:flex; flex-direction:column; gap:0px; align-items:center; justify-content:flex-start; width:100%; height:100%; position:absolute; right:0%; left:0%; bottom:0%; top:0%; }
.frame-101 {align-self:stretch; flex-shrink:0; height:311px; position:relative; overflow:hidden; }
.rectangle-54 {background:var(--celeste-200, #bbe2ef); width:100%; height:310px; position:absolute; left:0px; top:1px; }
.group-100 {position:absolute; inset:0; }
.group-99 {width:100%; height:311px; position:static; }
.group-98 {width:100%; height:311px; position:static; }
.rectangle-26 {background:#0e357a; width:100%; height:251px; position:absolute; left:0px; top:0px; }
.group-55 {width:29px; height:30px; position:static; }
.group-56 {width:29px; height:30px; position:static; }
.frame-13725 {display:flex; flex-direction:column; gap:0px; align-items:center; justify-content:flex-start; width:863px; position:absolute; left:calc(50% - 456px); top:calc(50% - 98.5px); }
.frame-13817 {display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:flex-start; flex-shrink:0; position:relative; }
.vector {width:78px; height:81px; position:absolute; right:0px; top:38px; overflow:visible; }
.iniciar-sesi-n {background:var(--celeste-200, #bbe2ef); flex-shrink:0; width:100%; height:906px; position:relative; overflow:hidden; }
.div-rounded-2-xl {background:#ffffff; border-radius:16px; padding:0px 32px 0px 32px; display:flex; flex-direction:column; gap:26px; align-items:center; justify-content:center; width:722px; height:810px; position:absolute; left:calc(50% - 347.5px); top:calc(50% - 434px); }
.frame-13729 {display:flex; flex-direction:column; gap:26px; align-items:center; justify-content:center; flex-shrink:0; height:610px; position:relative; }
.frame-13732 {display:flex; flex-direction:column; gap:26px; align-items:center; justify-content:flex-end; flex-shrink:0; height:607px; position:relative; }
.frame-13731 {display:flex; flex-direction:column; gap:26px; align-items:flex-start; justify-content:flex-start; align-self:stretch; flex:1; position:relative; }
.bienvenido-a-cumplimiento-online {color:#0e357a; text-align:center; font-family:var(--h2-font-family, 'Montserrat-Bold', sans-serif); font-size:var(--h2-font-size, 39.810001373291016px); font-weight:var(--h2-font-weight, 700); position:relative; width:422px; display:flex; align-items:center; justify-content:center; }
.frame-13730 {display:flex; flex-direction:column; gap:13px; align-items:flex-start; justify-content:center; flex-shrink:0; height:119px; position:relative; }
.mathew-john {color:var(--globalcolors-neutral-90, #4b4b4b); text-align:left; font-family:var(--h3-font-family, 'Montserrat-SemiBold', sans-serif); font-size:var(--h3-font-size, 33.18000030517578px); font-weight:var(--h3-font-weight, 600); position:relative; width:422px; height:45px; }
.line-9 {border-style:dashed; border-color:#000000; border-width:1px 0 0 0; opacity:0.20000000298023224; flex-shrink:0; width:348px; height:0px; position:relative; transform-origin:0 0; transform:rotate(0deg) scale(1, 1); }
.payments {color:#6d7175; text-align:left; font-family:'Montserrat-Regular', sans-serif; font-size:14px; line-height:28px; letter-spacing:0.25px; font-weight:400; opacity:0.9900000095367432; position:relative; width:326px; height:58px; }
.frame-13728 {display:flex; flex-direction:column; gap:20px; align-items:flex-start; justify-content:flex-start; flex-shrink:0; position:relative; }
.form-email {color:#18191c; text-align:left; font-family:'Montserrat-Medium', sans-serif; font-size:14px; line-height:20px; font-weight:500; position:relative; width:134px; height:20px; display:flex; align-items:center; justify-content:flex-start; }
.form-input {background:#ffffff; border-radius:6px; border-style:solid; border-color:var(--celeste-100, #ddf0f7); border-width:1px; flex-shrink:0; width:352px; height:52px; position:relative; }
.div-placeholder {width:318px; height:17px; position:absolute; left:17px; top:calc(50% - 9.75px); overflow:hidden; }
.su-correo-com {color:#dddddd; text-align:left; font-family:'Montserrat-Bold', sans-serif; font-size:14px; font-weight:700; position:absolute; left:0.12px; top:0.47px; width:169px; height:17px; display:flex; align-items:center; justify-content:flex-start; }
.frame-13727 {display:flex; flex-direction:column; gap:20px; align-items:flex-start; justify-content:flex-start; flex-shrink:0; position:relative; }
.form-password {color:#18191c; text-align:left; font-family:'Montserrat-Medium', sans-serif; font-size:14px; line-height:20px; font-weight:500; position:relative; width:96px; height:20px; display:flex; align-items:center; justify-content:flex-start; }
.form-svg {width:20px; height:20px; position:absolute; left:315px; top:16px; overflow:visible; }
.line-8 {border-style:dashed; border-color:#000000; border-width:1px 0 0 0; opacity:0.20000000298023224; flex-shrink:0; width:423px; height:0px; position:relative; transform-origin:0 0; transform:rotate(0deg) scale(1, 1); }
.form-link-forgot-password {color:var(--primary-4, #2d70e7); text-align:center; font-family:'Montserrat-Regular', sans-serif; font-size:15.875px; line-height:24px; font-weight:400; position:relative; width:212px; height:24px; display:flex; align-items:center; justify-content:center; }
.form-button {background:#55e6a5; border-radius:9999px; flex-shrink:0; width:431px; height:48px; position:relative; }
.ingresar {color:#0e357a; text-align:center; font-family:'Montserrat-Bold', sans-serif; font-size:18px; line-height:28px; font-weight:700; position:absolute; left:calc(50% - 26.5px); top:10.02px; width:79px; height:28px; display:flex; align-items:center; justify-content:center; }
.footer {display:flex; flex-direction:column; gap:0px; align-items:center; justify-content:flex-start; flex-shrink:0; width:100%; min-height:222px; position:relative; }
.seccion {display:flex; flex-direction:row; gap:317px; align-items:flex-start; justify-content:center; flex-shrink:0; position:relative; }
.texto {display:flex; flex-direction:row; gap:261px; align-items:center; justify-content:flex-start; flex-shrink:0; position:relative; }
.page-button-item1 {display:flex; flex-direction:row; gap:19px; align-items:center; justify-content:center; flex-shrink:0; width:263px; height:24px; position:relative; }
.page-button-text1 {color:#0e357a; text-align:center; font-family:'Montserrat-Bold', sans-serif; font-size:16px; line-height:24px; font-weight:700; position:relative; width:338px; height:24px; display:flex; align-items:center; justify-content:center; }
.page-button-item2 {display:flex; flex-direction:row; gap:19px; align-items:center; justify-content:center; flex-shrink:0; width:181px; position:relative; }
.page-button-text2 {color:#ffffff; text-align:left; font-family:'Montserrat-Bold', sans-serif; font-size:16px; line-height:24px; font-weight:700; position:relative; display:flex; align-items:center; justify-content:flex-start; }


/* Header container styles */
.header-section { width: 100%; padding: 3rem 1rem; background: linear-gradient(0deg, #0e357a, #00b8d8);  color: #fff; text-align: center; position: relative; overflow: hidden; border-bottom-left-radius: 30% 25%;  border-bottom-right-radius: 30% 25%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.header-content { max-width: 800px; margin: 0 auto; padding: 1rem; opacity: 0; transform: translateY(20px); animation: fadeInSlide 1s ease-out forwards; animation-delay: 0.5s;}
@keyframes fadeInSlide {
 to {  opacity: 1;  transform: translateY(0); }}
.header-title { font-size: 3rem; font-weight: 700; margin: 0; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);  color: white;}
.header-subtitle { font-size: 1.2rem; margin: 0.5rem 0 0; color: #d1e4f2; text-align:center}
.header { width: 100%; background-color: #ffffff;  padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.header-container { display: flex; justify-content: space-between; align-items: center; width: 100%;}
.logo img { max-height: 60px; width: auto;}
/* Estilo de los Botones */
.header-buttons { display: flex; gap: 1.5rem; justify-content: flex-end;  align-items: center; flex-grow: 1; /* Asegura que los botones se alineen correctamente */ margin-right: 20px; margin-left: 20px;}
.button-demo { background-color: #0e357a; color: #fff; padding: 1rem 2rem;  border-radius: 50px;  font-weight: 700;  text-decoration: none; text-transform: none;  font-size: 1rem; transition: background-color 0.3s, transform 0.3s ease-in-out, box-shadow 0.3s; text-align: center;}
.button-demo:hover { background-color: #154b8f;  transform: scale(1.05);  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.button-demo:visited {color: #fff;}
.button-login { background-color: #34cfa5;  color: #fff; padding: 1rem 2rem;  border-radius: 50px;  font-weight: 700;  text-decoration: none; text-transform: none;  font-size: 1rem; transition: background-color 0.3s, transform 0.3s ease-in-out, box-shadow 0.3s; text-align: center;text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);}
.button-login:hover { background-color: #28b795; transform: scale(1.05);  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.button-login:visited {color: #fff;}
.menu-icon img { width: 30px; height: 30px; transition: transform 0.3s ease-in-out;}
.menu-icon a:hover img { transform: rotate(90deg); /* Rotación sutil del ícono en hover */}
/* Estilo General del Nav Bar */
.navbar {  background-color: #0e357a;  padding: 0.8rem 2rem;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  width: 100%;}
.navbar-container { display: flex; justify-content: center;  align-items: center; gap: 2rem; }
.navbar-item { font-size: 1.1rem;  font-weight: 500;  text-align: center; justify-items: center; align-content: center; text-align: center;}
.navbar-item a { color: #fff;  text-decoration: none; padding: 0.5rem 1rem; transition: color 0.3s ease, transform 0.3s ease; border-radius: 4px;  display: flex; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);}
.navbar-item a:hover { color: #fff; transform: scale(1.05);  background-color: rgba(255, 255, 255, 0.2); }
/* Estilos para la sección de llamada a la acción (CTA) */
.cta-container {  background-color: #0e357a;  color: white;  display: flex;  justify-content: space-between;  padding: 30px 10%;  align-items: center;}
.cta-text {  max-width: 60%;}
.cta-heading {  font-size: 24px;  font-weight: bold;  margin-bottom: 10px;  color: white; }
.cta-description {  font-size: 16px;  margin-bottom: 20px;  color: white;   max-width: 424px;  line-height: 24px;}
.cta-buttons-container {  display: flex;  gap: 15px;  flex-direction: column;}
.cta-button {  padding: 12px 56px;  border-radius: 30px;  font-weight: bold;  text-align: center;  text-decoration: none;  display: flex;  justify-content: center;  align-items: center;  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;}
.cta-button-green {  background-color: #34cfa5;  border: none;  padding: 12px 56px;}
.cta-button-green a {  color: #0e357a;}
.cta-button-white {  background-color: transparent;  border: 2px solid white;  color: white;	padding: 12px 56px;}
.cta-button-white a {  color: white;}
.cta-button-green:hover {  transform: scale(1.05);   background-color: #28b795;   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.cta-button-white:hover {  transform: scale(1.05);   background-color: rgba(255, 255, 255, 0.2);   color: #0e357a;   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
/* Footer Estilos */
.footer {  font-family: 'Arial', sans-serif;  background-color: #fff;   color: #6d7175;   width: 100%;}
.footer-main {  display: flex;  justify-content: space-between;  padding: 40px 10%;  background-color: #fff;   color: #333; }
.footer-column {  width: 20%;  padding: 10px;}
.footer-logo {  max-width: 150px;}
.footer-section-title {  font-size: 18px;  font-weight: bold;  margin-bottom: 10px;  color: #0e357a;   max-width: 180px;}
.footer-links {  display: flex;  flex-direction: column;  gap: 10px;	align-items: flex-start;}
.footer-link {  font-size: 14px;  color: #18191c;   gap: 10px;  display: flex;}
.footer-link a {  color: #6d7175;   text-decoration: none;}
.footer-link a:hover {  text-decoration: underline;}
/* Footer de Derechos */
.footer-bottom {  background-color: #fff;   color: #333;   padding-left: 20px;  padding-right: 20px;  padding-bottom: 20px;}
.footer-divider {  border-top: 1px solid #ccc;  margin-bottom: 10px;}
.footer-copyright {  font-size: 14px;  color: #6d7175;   text-align: center;}
.footer-social-icons {  text-align: center;  margin-top: 10px;}
.footer-social-icon {  margin: 0 10px;}
.footer-social-icon-img {  width: 25px;  height: 25px;  filter: none; }
/* Animación para los iconos sociales */
.footer-social-icon {  transition: transform 0.3s ease, filter 0.3s ease;}
.footer-social-icon-img {  width: 30px;   height: 30px;  filter: grayscale(100%) brightness(0.6);  transition: filter 0.3s ease;}
.footer-social-icon:hover .footer-social-icon-img {  transform: scale(1.4);   filter: grayscale(0%) brightness(2); }
.footer-social-icon-img:hover {  transform: scale(1.4); }
.back-to-top {    position: fixed;    bottom: 20px;    right: 20px;    width: 50px;    height: 50px;    background-color: #0e357a; /* Main brand color */    border-radius: 50%;    display: flex;    justify-content: center;    align-items: center;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    cursor: pointer;    transition: transform 0.3s ease, background-color 0.3s ease;    }
.back-to-top:hover {    transform: scale(1.1);    background-color: #34cfa5; /* Hover color */}
.back-to-top-icon {    width: 24px;    height: 24px;    color: white;}
.back-to-top a {    text-decoration: none;    display: flex;    justify-content: center;    align-items: center;}
.page-button-top-item {     justify-content: center;  align-items: center;    }
.page-button-top-item img {      transition: transform 0.3s ease;}
.page-button-top-item:hover img {    transform: scale(1.1);}

@media (max-width: 768px) {	
.header-section {	padding: 1rem 1rem;	}
.footer-links { align-items: center;	}
.cta-container { flex-direction: column; align-items: center; padding: 20px;  }
.cta-buttons-container { flex-direction: column; gap: 10px;  }
.footer-main { flex-direction: column; align-items: center;  }
.cta-container { flex-direction: column; align-items: center; padding: 20px;  }
.cta-buttons-container { flex-direction: column; gap: 10px;  }
.footer-main { flex-direction: column; align-items: center;  }
.footer-column { width: 100%; text-align: center; margin-bottom: 20px; flex-direction: column; display: flex; align-items: center;  }
.page-button-top-item { display: none;	}
.navbar-container {  flex-wrap: wrap;  gap: 1rem; }
.cta-text {  text-align: center;  }
.header-container {  flex-direction: column;  align-items: center; }
.header-buttons {  margin-top: 1rem;  gap: 1rem; }
.header-title {  font-size: 2rem; }
.header-subtitle {  font-size: 1rem; }
}