html{
	scroll-behavior: smooth;
}

p, h2, h3, li, a{
	color: #000;
	font-family: "DM Sans", sans-serif;
}

.outfit {
  font-family: "Outfit", sans-serif;
}


.logo-siglo-21-menu{
	min-height: 40px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background: transparent;
  transition:
    padding 0.35s ease,
    backdrop-filter 0.35s ease,
    color 0.2s ease;
  z-index: 1100;
}

/* PSEUDO ELEMENTO CON IMAGEN (siempre presente pero oculto por opacity) */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../imagenes/fondo-formas-verdes-footer.webp");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: -1;
}

/* ESTADO scrolled / menu abierto */
.navbar.navbar-scrolled {
  padding: 10px 0;            /* navbar más pequeña */
  backdrop-filter: blur(6px); /* blur del fondo */
}

/* mostrar la imagen con fade */
.navbar.navbar-scrolled::before {
  opacity: 1;
}

/* Opcional: si querés que el contenido del nav (links) cambie color al scrollear */
.navbar.navbar-scrolled .nav-link,
.navbar.navbar-scrolled .navbar-brand {
  color: #000; /* o el color que necesites */
  transition: color 0.2s ease;
}

.nav-link{
	font-size: 15px;
	color: #000000;
	background: rgba(255, 255, 255, 0.7);
	padding: 3px;
	padding-left: 15px !important;
	padding-right: 15px !important;
	border-radius: 30px;
	margin-right: 15px;
}

.cstm-btn-1{	
	background: #4A528C;
	background: linear-gradient(90deg,rgba(95, 230, 205, 1) 0%, rgba(74, 82, 140, 1) 101%);
  padding: 5px 17px;
	color: #ffffff;
	border-radius: 30px;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
}

.cstm-btn-2{
	color: #ffffff;
	padding: 10px 25px;
	border-radius: 50px;
	background: #4A528C;
	background: linear-gradient(90deg,rgba(74, 82, 140, 1) 0%, rgba(95, 230, 205, 1) 100%);
	text-decoration: none;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	border: 0;
	font-family: "DM Sans", sans-serif;
	display: inline-block;
	line-height: 1;
}

.cstm-btn-3{
  display: inline-flex;
	color: #ffffff;
	padding: 10px 45px;
	border-radius: 50px;
	background: #4A528C;
	background: linear-gradient(90deg,rgba(74, 82, 140, 1) 0%, rgba(79, 118, 156, 1) 100%);
	text-decoration: none;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 1;
  margin: auto;
  white-space: normal;
  text-align: center;
  width: auto;
  cursor: pointer;
	border: 0;
}

.btns-1{
	display: inline-block; /* o block, según tu caso */
  position: relative;
  transform: translateY(50%);
  text-align: center;
  z-index: 3;
}

.box-logo-hero{
	padding: 100px 20px;
	background-color: rgba(0, 0, 0, 0.2);
}

.logo-hero-global{
	max-height: 120px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.hero{
	background-image: url('../../imagenes/fondo-formas-verdes-hero.webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 90px;
	text-align: center;
}

.bajada-hero{
	padding: 40px 20px;
}

.bajada-hero h2{
	color: #ffffff;
	font-size: 18px;
	letter-spacing: 8px;
	font-weight: 400;
	margin-bottom: 0;
}

.max-w-1{
	max-width: 700px;
	margin: 0 auto;
}

.max-w-2{
	max-width: 950px;
	margin: 0 auto;
}

.max-w-3{
	max-width: 300px;
	margin: 0 auto;
}

.mr-1{
	margin-right: 15px;
}

.cstm-txt-1{
	font-size: 25px;
}

.cstm-txt-2{
	color: #22a98c;
	font-size: 25px;
	font-weight: 500;
	text-align: center;
	margin-top: 20px;
	line-height: 1.2;
}

.cstm-txt-3{
	color: #ffffff;
	font-size: 30px;
	letter-spacing: 8px;
	margin: 20px 0;
}

.cstm-txt-4{
	color: #ffffff;
}


.cstm-txt-5{
	font-weight: 500;
}

.cstm-txt-7{
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	font-size: 20px;
	line-height: 1.1;
	padding: 15px 50px;	
	background: #4A528C;
	background: linear-gradient(90deg,rgba(74, 82, 140, 1) 0%, rgba(95, 230, 205, 1) 100%);
	display: block;	
}

.cstm-txt-8{
	font-size: 14px;
	color: #1b1464;
	font-weight: 700;
}

.cstm-title-1{
	text-align: center;
	color: #051d23;
	font-size: 35px;
	font-weight: 700;
	letter-spacing: 5px;
	margin-bottom: 80px;
}

.cstm-title-2{
	text-align: center;
	color: #051d23;
	font-size: 35px;
	font-weight: 700;
	letter-spacing: 5px;
	margin-bottom: 0;
}

.cstm-title-3{
	text-align: center;
	color: #083435;
	font-size: 35px;
	font-weight: 700;
	letter-spacing: 5px;
	margin-bottom: 50px;
}

.cstm-title-4{
	color: #051d23;
	font-size: 25px;
	font-weight: 700;
	margin-bottom: 0;
}

.content-1{
	padding: 50px 0;
}

.content-2{
	background-image: url('../../imagenes/mujer-con-dedo-apuntanto-a-mundo-holografico.webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 80px 20px 50px 20px;	
	position: relative;
}

.content-2 h2{
	font-size: 25px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 2px;
	margin-bottom: 15px;
}

.content-2 p{
	color: #fff;
}

.content-3{
	background-color: #ffffff;
	padding: 80px 20px;
}

.content-3 h2{
	background-color: #22a98c;
	padding: 10px 25px;
	border-radius: 50px;
	font-size: 25px;
	font-weight: 600;
	color: #ffffff;
	display: inline-block;
	margin-bottom: 20px;
}

.content-4{
	background: #FFF;
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
	padding: 100px 20px;
  position: relative;
  overflow: hidden; /* asegura que el pseudo-elemento no se salga */
}

.content-4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* altura de la franja de sombra */
  pointer-events: none; /* no bloquea clics */
  background: radial-gradient(
    ellipse at center top,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.10) 20%,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0) 60%

  );
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
}

.content-5{
	background-image: url('../../imagenes/fondo-formas-verdes-contenido-1.webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.box-eje{
	padding: 50px;
	border-radius: 20px;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
	position: relative;
	height: 100%;
}

.eje-n{
	position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #22a98c;
  padding: 15px 25px;
  border-radius: 50px;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: 3px;
  font-weight: 600;
  box-shadow: 0 0 35px #22a98c;
  text-align: center;
  line-height: 1;
}

.eje-titulo{
  text-align: center;
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 25px;
  line-height: 1.2;
  margin-top: 10px;
}

.hr-1{
	border-top: 2px solid #051d23;
}

.hr-2{
	border-top: 2px solid #000;
	opacity: 1;
}

.eje-description{
	font-size: 16px;
	line-height: 1.2;
}

.box-cstm-1{
	background: rgba(0, 0, 0, 0.3);
	padding: 50px 20px;
}

.box-cstm-2{
	background-color: #ffffff;
	padding: 50px;
	border-radius: 30px;
}

.box-cstm-3 {
  position: relative;
  border: 3px solid transparent;
  border-radius: 25px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, rgba(74, 82, 140, 1) 0%, rgba(95, 230, 205, 1) 100%) border-box;
  padding: 50px 30px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-cstm-4 {
  position: relative;
  border: 3px solid transparent;
  border-radius: 25px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(270deg, rgba(74, 82, 140, 1) 0%, rgba(95, 230, 205, 1) 100%) border-box;
  padding: 50px 30px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-cstm-5{
	padding-top: 50px;
	text-align: center;
}

.box-cstm-6{
	padding: 50px 20px;
	text-align: center;
	background: #FFF;
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.box-cstm-7{
	border-radius: 20px;
	border: 3px solid #083435;
	padding: 50px;
	background-color: rgba(255,255,255, 0.5);
}

.flecha-1{
	max-height: 26px;
	margin-right: 8px;
}

.flecha-2{
	max-height: 20px;
	margin-right: 0px;
}

.sm-txt-1{
	font-size: 20px;
}

.icono-1{
	max-height: 50px;
	margin-bottom: 30px;
}

.linea-1{
	max-width: 150px;
	margin: 30px 0;
}

.modal-formulario .modal-dialog{
	margin-top: 80px;
}

.modal-formulario .modal-content{
	padding: 0 50px 50px 50px;
	border-radius: 30px;
}

#form-inspirarme input, #form-capacitarme input, #form-conectar input, #form-liderar input,
#form-inspirarme textarea, #form-capacitarme textarea, #form-conectar textarea, #form-liderar textarea,
#form-inspirarme select, #form-capacitarme select, #form-conectar select, #form-liderar select{
	border: 0;
	border-radius: 0;
	border-bottom: 2px solid #000;
}

#form-sumate .campo-cstm-1{
	border: 0;
	border-radius: 0;
	border-bottom: 2px solid #000;
	background: transparent;
}

.form-check-input:focus{
	box-shadow: 0;
}

.form-check-input:checked {
  background-color: #fff;
  border-color: #000;
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='black' d='M16.7 5.3a1 1 0 0 0-1.4-1.4L8 11.17 4.7 7.88a1 1 0 0 0-1.4 1.42l4 4a1 1 0 0 0 1.4 0l8-8z'/%3e%3c/svg%3e");
}

#form-sumate .form-check {
  display: inline-flex;
  justify-content: center;
  background-color: #22a98c;
  padding: 3px 25px 5px 40px;
  border-radius: 50px;
}

#form-sumate .form-check label{
	color: #ffffff;
	font-weight: 600;
}

#form-sumate .form-check input {
  margin-right: 10px;
  height: 20px;
  width: 20px;
  border-radius: 50px;
}

.campo-chico{
	height: 20px;
}

.btn-enviar{
	display: inline-block;
  padding: 7px 30px 12px 30px;
	background-color: #ffffff;
	border-radius: 80px;
	font-size: 25px;
	color: #000;
	text-align: center;
	margin: 0 auto;
	border: 2px solid #000;
	font-weight: 600;
}

footer{	
	background-image: url('../../imagenes/fondo-formas-verdes-footer.webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

footer p{
	color: #fff;
}

footer .container{
	padding: 40px 0;
}

.box-footer{
	padding: 25px;
	background-color: rgba(0, 0, 0, 0.2);
	text-align: center;
}

.box-footer p{
	letter-spacing: 8px;
	font-size: 18px;
	margin-bottom: 0;
	text-transform: uppercase;
}

.logo-innova-educa{
	max-height: 240px;
	margin: 0 auto; 
}

.logo-siglo-21-footer{
	max-height: 40px;
	margin-right: 20px;
}

.logo-global-footer{
	max-height: 40px;
	padding-left: 20px;
	border-left: 2px solid #fff;
}

@media(min-width:768px){
	.hide-desktop{
		display: none !important;
	}
}

@media(max-width:1499px){
}

@media(max-width:1199px){
}

@media(max-width:1199px){
}

@media(max-width:991px){
}

@media(max-width:767px){
	.hide-mobile{
		display: none !important;
	}

	.box-cstm-2 {
    padding: 30px 0px;
	}	

	.box-cstm-3, .box-cstm-4 {
	  padding: 30px 15px;
	}

	.cstm-btn-3 {
		font-size: 18px;
		letter-spacing: 0;		
    padding: 10px 25px;
	}

	.flecha-1 {
	    max-height: 20px;
	}

	.cstm-title-3 {
	  font-size: 30px;
	  line-height: 1;
	  margin-bottom: 30px;
	  letter-spacing: 0;
	}

	.cstm-title-1{
	  font-size: 30px;
	  line-height: 1;
	  letter-spacing: 0;
	}

	.cstm-txt-1 {
	  font-size: 22px;
	  line-height: 1.2;
	}

	.modal-formulario .modal-content {
	  padding: 0 30px 30px 30px;
	  border-radius: 30px;
	}

	.nav-link {
	    font-size: 19px;
	    display: inline-block;
	    margin-top: 15px;
	}

	.cstm-btn-1 {
	    font-size: 19px;
	    display: inline-block;
	    margin-top: 15px;
	}

	footer .container {
	    padding: 40px 20px;
	}

}

@media(max-width:576px){
	}

@media(max-width:529px){
	.mr-1{
		margin-right: 0;
		margin-bottom: 15px;
	}

	.btns-1 {
	  transform: translateY(23%);
	}

	.cstm-txt-3{
		letter-spacing: 0;
		line-height: 1;
		font-size: 20px;
	}

	.box-footer p {
    letter-spacing: 3px;
  }

  .cstm-title-2 {
      letter-spacing: 1px;
      margin-bottom: 0;
      margin-top: 15px;
  }

  .bajada-hero h2 {
      letter-spacing: 5px;
  }

  .box-cstm-1 {
      padding: 50px 5px;
  }

  .box-cstm-7 {
      padding: 35px 15px;
  }

  .box-cstm-6 {
      padding: 50px 5px;
  }

  .modal-formulario .modal-content {
      padding: 0 5px 30px 5px;
  }

  .cstm-txt-7 {
      font-size: 18px;	
      padding: 15px 20px;
  }

  .eje-n {
      font-size: 20px;
      letter-spacing: 0;
  }

  .cstm-title-4 {
      line-height: 1;
  }

  .box-eje {
      padding: 30px 25px;
  }

  .content-4 {
      padding: 100px 10px;
  }

  .cstm-title-3 {
      font-size: 26px;
  }

  #form-sumate .form-check {
      display: inline-flex;
      justify-content: center;
      background-color: #22a98c;
      padding: 3px 25px 5px 40px;
      align-items: center;
      text-align: left;
      line-height: 1;
  }

@media(max-width:350px){
  .max-w-3 {
      max-width: 200px;
  }
}