@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

:root {
  --mainBlack: #1d2025;
  --mainGreen: #c0e136;
  --colorFont: #083b57;
  --maingray: #f0f1f3;
  --secondaryGreen:#b3d61c;
  --mainwhite: #fdfdfd;
  --secondarygray: #667085;
   --thirdgray: #b9bdc7;
  --secondaryBlue: #62d3d2;
  --orange: #f2994a;
  --white: #fff;
  --mainColorFooter: linear-gradient(180deg, #052435 0%, #094160 100%);
  --mainColorFooterV2:#094160;
   --backColorForm: #052435;
  --formLabel:#383e49;
  --maincolorTeamComponent: linear-gradient(to bottom, #022A40, #13608D);
}

html{
scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a{
  margin: 0;
  padding: 0;
  font-weight:normal;
}


/*Estilos de sombra para el texto*/
.shadowText {
  filter: drop-shadow(5px 5px 19px #0d222e);
}


.mainContainer {
  width: 100%;
  margin: 0 auto;

}

/* breakpoints generales contenedor principal */

@media (min-width: 640px) {
  .mainContainer {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .mainContainer {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .mainContainer {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .mainContainer {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .mainContainer {
    max-width: 1536px;
  }
}

body {
  width: 100%;
 
}
.main{
  min-height:50vh;
}

.full-height{
  
  height: 100%;
}

/*Layout personalizado usando grid*/

/* Estilo para una sola columna */
.single-column{
  display: grid;
  grid-template-columns: 1fr;
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
}

@media (max-width: 768px) {
  .two-column {
    grid-template-columns: 1fr;
  }
}

.thirty-seventy-section {
  display: grid;
  grid-template-columns: 30% 70%;

}

@media (max-width: 1024px) {
  .thirty-seventy-section {
    grid-template-columns: 1fr;
  }
}
.seventy-thirty-section {
  display: grid;
  grid-template-columns: 70% 30%;
  
}

@media (max-width: 1024px) {
  .seventy-thirty-section {
    grid-template-columns: 1fr;
  }
}

.sixty-forty-section {
  display: grid;
  grid-template-columns: 60% 40%;
}

@media (max-width: 1024px) {
  .sixty-forty-section {
    grid-template-columns: 1fr;
  }
}

.three-column-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 
}

@media (max-width: 1024px) {
  .three-column-section {
   grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .three-column-section {
    grid-template-columns: 1fr;
  }
}



.four-column-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

}

@media (max-width: 1024px) {
  .four-column-section {
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .four-column-section {
    grid-template-columns: 1fr;
  }
} 




/*Layout personalizado usando flexbox*/


.columna-unica {
  display: flex;
  flex-direction: column;
}

.dos-columnas {
  display: flex;
 
}

.dos-columnas > * {
  flex: 1 1 50%;
  min-width: 50%;
}

@media (max-width: 1024px) {
  .dos-columnas {
    flex-direction: column !important;
  }
}

.division-30-70 {
  display: flex;
  
}

.division-30-70 > *:nth-child(1) {
  flex: 1 1 30%;
  min-width: 30%;
}

.division-30-70 > *:nth-child(2) {
  flex: 1 1 70%;
  min-width: 70%;
}

@media (max-width: 1024px) {
  .division-30-70 {
    flex-direction: column !important;
  }
}

.division-70-30 {
  display: flex;

}

.division-70-30 > *:nth-child(1) {
  flex: 1 1 70%;
  min-width: 70%;
}

.division-70-30 > *:nth-child(2) {
  flex: 1 1 30%;
  min-width: 30%;
}

@media (max-width: 1024px) {
  .division-70-30 {
    flex-direction: column !important;
  }
}

.division-60-40 {
  display: flex;
  
}

.division-60-40 > *:nth-child(1) {
  flex: 1 1 60%;
  min-width: 60%;
}

.division-60-40 > *:nth-child(2) {
  flex: 1 1 40%;
  min-width: 40%;
}

@media (max-width: 1024px) {
  .division-60-40 {
    flex-direction: column !important;
  }
}

.tres-columnas {
  display: flex;
 
}

.tres-columnas > * {
  flex: 1 1 33.33%;
  min-width: 33.33%;
}

@media (max-width: 1024px) {
  .tres-columnas{
  flex-direction: column !important;
  }
  .tres-columnas > * {
    
    flex: 1 1 100%;
    min-width: 100%;
  }
}


.cuatro-columnas {
  display: flex;
}

.cuatro-columnas > * {
  flex: 1 1 25%;
  min-width: 25%;
}

@media (max-width: 1024px) {
  .cuatro-columnas > * {
    flex: 1 1 50%;
    min-width: 50%;
  }
}

@media (max-width: 768px) {
  .cuatro-columnas > * {
    flex: 1 1 100%;
    min-width: 100%;
  }
}


/*Estilos generales para componentes*/

/* Estilos boton CTA  */

.btnCTA {
  background-color: var(--mainGreen);
  border: none;
  padding: 16px 24px 16px 24px;
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.5s;
  cursor: pointer;
  text-decoration: none;
  color:var(--colorFont);
   width:fit-content;
}
.btnCTA:hover {
  background-color: var(--secondaryGreen);
}


/* Estilos para que los slider no se peguen a todo el borde  */

.mainSlider {
  padding: 20px;
  position: relative;
}

/*Estilos para las cajas de texto enriquecido*/

/* Titulos  */

 .titleUser h1,.titleUser h2,.titleUser h3,.titleUser h4,.titleUser h5,.titleUser h6 , .titleUser p ,.titleUser span {
   font-size:  36px !important;
 
  }

@media (max-width: 768px) {
  .titleUser h1,.titleUser h2,.titleUser h3,.titleUser h4,.titleUser h5,.titleUser h6 , .titleUser p ,.titleUser span , .titleUser span p  {
   font-size:32px !important;
  }

  /*Textos personalizados*/
  
  .richTextUser p {
  font-size:  1rem !important;
   line-height: 32px;
  
  }
  
  .richTextUser h1,.richTextUser h2,.richTextUser h3,.richTextUser h4,.richTextUser h5,.richTextUser h6, .richTextUser span h2 ,.richTextUser span h3{
  font-size:  36px !important;
    line-height: 32px;
  }

@media (max-width: 768px) {
  .richTextUser h1,.richTextUser h2,.richTextUser h3,.richTextUser h4,.richTextUser h5,.richTextUser h6, .richTextUser span h2 ,.richTextUser span h3 {
    font-size:  32px !important;
    line-height: 32px;
  }
  
  
  
}

  
  /*Estilos para el lazy loading*/
  
.loader {
  width: 50px;
  aspect-ratio: 1;
  --_c: no-repeat radial-gradient(farthest-side, #c0e136 92%, #0000); /*Para cambiar el color poner en el segundo parametro el color*/
  background: var(--_c) top, var(--_c) left, var(--_c) right, var(--_c) bottom;
  background-size: 12px 12px;
  animation: l7 1s infinite;
}
@keyframes l7 {
  to {
    transform: rotate(0.5turn);
  }
} 
  
  img.loaded {
  animation: none; /* Detener la animación */
  background: none; /* Eliminar el fondo de la animación */
  transition: opacity 0.5s ease-in-out; /* Agregar una transición suave */
  opacity: 1; /* Mostrar la imagen con opacidad completa */
}