/* TITULO PAGINA DINAMICA 1: ODR */

/* TITULO DE LA PAGINA CONTACTO */

.contenedorCabecera{
  display: flex;
  text-align: center;
  margin-bottom: 0; 
  margin-top: 50px;
}

.columnaCabecera {
  flex: 1;
}

.columnaCabecera h1 {
  font-family: "DM Sans", serif;
  font-optical-sizing: auto;
  font-size: clamp(24px, 4vw, 38px); 
  color: #000000;
  font-weight: 700; 
  margin-bottom: 0px;
  word-wrap: break-word; 
  margin-top: 0;
}

.lineaVerdeCabecera {
  width: 150px; 
  height: 2px; 
  background-color: #00761a; 
  margin: 10px auto 0;
  margin-bottom: 5px;
}


/* SECCION INFORMACION - PRIMERA PARTE  */

.contenedorColumnasOptimizacion {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;
}


/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .contenedorColumnasOptimizacion {
    flex-direction: column; /* Hace que los elementos se acomoden en columna */
    align-items: center; /* Centra los elementos */
  }

}

.columnaOptimizacion_1 {
    flex: 3;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px;
}

.columnaOptimizacion_1 h2{
    font-family: "Inter", serif;
    font-weight: 750;
    font-style: normal;
    color: #3e3e3e;
    font-size: clamp(1rem, 6vw, 22px); /* Tamaño de fuente responsivo */
}

.columnaOptimizacion_1 p {
  font-family: "DM Sans", serif;
  font-weight: 220;
  font-style: normal;
  font-size: clamp(1rem, 20vw, 15px); /* Tamaño de fuente responsivo */
}

/* SUBMENU DINAMICAS*/

.columnaOptimizacion_2{
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 0; /* Alinear texto al centro */
    margin-top: 10px;
}

/* TITULO DEL SUBMENU */

.contenedorTituloMenuDinamicas {
  display: flex;
  text-align: center;
}

.columnaTituloMenuDinamicas {

  flex: 1;
}

.columnaTituloMenuDinamicas h2 {

  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;
}


.circuloVerdeMenuDinamicas {
    width: 60px; /* Tamaño del círculo */
    height: 60px; /* Tamaño del círculo */
    background-color: #00761a; /* Color verde */
    border-radius: 50%; /* Hacerlo circular */
    display: flex; /* Usamos flexbox para centrar el ícono */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    margin: 0 auto 10px; /* Centrar el círculo y agregar espacio debajo */
}

.logoMenuDinamicas {
    width: 40px; /* Tamaño del ícono */
    height: 40px; /* Tamaño del ícono */
}


.lineaVerdeMenuDinamicas {
    width: 150px; /* Ancho de la línea */
    height: 1px; /* Grosor de la línea */
    background-color: #00761a; /* Color verde */
    align-items: center;
    margin: 0 auto;
}

.contenedorMenuDinamicas{

    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    margin-top: 100px;

}

.menuDinamicas {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

}

.menuDinamicasElemento{

    background-color: #006400;
    color: white;
    padding: 15px 20px;
    width: 250px;
    text-align: center;
    font-family: "Inter", serif;
    font-size: 15px;
    font-weight: 550;
    font-style: normal;
    border-radius: 5px;
}

.menuDinamicasElemento:hover {
    background-color: #004d00;
    transform: scale(1.05);
}

.lineaVerdeOptimizacion {
    width: 80%;
    max-width: 280px; /* Ancho de la línea */
    height: 2px; /* Grosor de la línea */
    background-color: #00761a; /* Color verde */
    margin: 10px auto 0; /* Centrar la línea y agregar espacio arriba */
    margin-bottom: 50px;
    margin-left: -5px;
}

a {
  color: inherit;
  text-decoration: none;
}

.subColumnaOptimizacion_1{
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px;
    margin-left: -40px;
}

.subColumnaOptimizacion_2{
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px;
}


/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .subColumnaOptimizacion_2{
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px;
    margin-left: -35px;
}
}

/* SECCION BENEFICIOS */

.contenedorBeneficios {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  box-sizing: border-box;
  margin-top: -70px;
}

.columnaBeneficios {
  flex: 1;
  padding-left: 20px;
  box-sizing: border-box;
  margin: 10px;
}

/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .columnaBeneficios{
    flex-direction: column; /* Hace que los elementos se acomoden en columna */
    align-items: center; /* Centra los elementos */
    margin-top: 150px;
    margin-right: 100px;
  }

  .columnaBeneficiosFoto,.columnaBeneficiosFoto_2,.columnaBeneficiosFoto_3,.columnaBeneficiosFoto_4,.columnaBeneficiosFoto_5,.columnaBeneficiosFoto_6,.columnaBeneficiosFoto_7 {
    display: none;
  }

}


.columnaBeneficios h1{
  font-family: "Inter", serif;
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;
  font-size: clamp(1rem, 6vw, 22px); /* Tamaño de fuente responsivo */
}

.columnaBeneficios p{

  font-family: "DM Sans", serif;
  font-weight: 220;
  font-style: normal;
  font-size: clamp(1rem, 20vw, 15px); /* Tamaño de fuente responsivo */
  
}

/* FOTOS PARA LAS EXPERIENCIAS */

.columnaBeneficiosFoto {
  flex: 1;
  padding : 30px;
  border-radius: 10px;
  margin-top: 60px;
  background-image: url("../imagenes/imagen_experiencia_1.jpg");
  height: 130px;
  margin-right: 45px;
  margin-left: 50px;
  background-size: cover;

}

.columnaBeneficiosFoto_2 {
  flex: 1;
  padding : 30px;
  border-radius: 10px;
  margin-top: 100px;
  background-image: url("../imagenes/imagen_experiencia_2.jpg");
  height: 130px;
  margin-right: 45px;
  margin-left: 50px;
  background-size: cover;

}

.columnaBeneficiosFoto_3 {
  flex: 1;
  padding : 30px;
  border-radius: 10px;
  margin-top: 60px;
  background-image: url("../imagenes/imagen_experiencia_3.jpg");
  height: 130px;
  margin-right: 45px;
  margin-left: 50px;
  background-size: cover;

}

.columnaBeneficiosFoto_4 {
  flex: 1;
  padding : 30px;
  border-radius: 10px;
  margin-top: 80px;
  background-image: url("../imagenes/imagen_experiencia_4.jpg");
  height: 130px;
  margin-right: 45px;
  margin-left: 50px;
  background-size: cover;

}

.columnaBeneficiosFoto_5 {
  flex: 1;
  padding : 30px;
  border-radius: 10px;
  margin-top: 70px;
  background-image: url("../imagenes/imagen_experiencia_5.jpg");
  height: 130px;
  margin-right: 45px;
  margin-left: 50px;
  background-size: cover;

}

.columnaBeneficiosFoto_6 {
  flex: 1;
  padding : 30px;
  border-radius: 10px;
  margin-top: 50px;
  background-image: url("../imagenes/imagen_experiencia_6.jpg");
  height: 130px;
  margin-right: 45px;
  margin-left: 50px;
  background-size: cover;

}

.columnaBeneficiosFoto_7 {
  flex: 1;
  padding : 30px;
  border-radius: 10px;
  margin-top: 70px;
  background-image: url("../imagenes/imagen_experiencia_7.jpg");
  height: 130px;
  margin-right: 45px;
  margin-left: 50px;
  background-size: cover;

}

.columnaBeneficiosFoto_8 {
  flex: 1;
  padding : 30px;
  border-radius: 10px;
  margin-top: 70px;
  background-image: url("../imagenes/imagen_experiencia_8.jpg");
  height: 130px;
  margin-right: 45px;
  margin-left: 50px;
  background-size: cover;

}

/* SECCION INCLUYE */

.contenedorIncluye {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  box-sizing: border-box;
  margin-top: -30px;
}

.columnaIncluye {
  flex: 1;
  padding-left: 10px;
  box-sizing: border-box;
  margin: 10px;
  min-width: 250px; /* Define un ancho mínimo para cada columna */
  max-width: 100%; /* Evita que se agranden demasiado */

}


/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .contenedorIncluye {
    flex-direction: column; /* Hace que los elementos se acomoden en columna */
    align-items: center; /* Centra los elementos */
  }

  .columnaIncluye {
    width: 90%; /* Ocupa la mayoría del ancho en móviles */
    max-width: 400px; /* Evita que sea demasiado ancho */
  }

  .lineaSeparadoraValores{
    display: none;
  }

}

.columnaIncluye h1 {
  font-family: "Inter", serif;
  font-size: clamp(1rem, 6vw, 22px);
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;
}

.columnaIncluye p {
  font-family: "DM Sans", serif;
  font-size: clamp(1rem, 20vw, 15px);
  font-weight: 220;
  font-style: normal;
}

/* ELEMENTOS DE INCLUYE */

.contendorElementosIncluye {
  display: flex;
  flex-wrap: wrap;
  padding-right: 70px;
  padding-left: 90px;
  align-items: start;
  margin-bottom: 30px;
}

.columnaElementosIncluye {
  flex: 1;
  flex-direction: column;
  min-width: 250px; /* Define un ancho mínimo para cada columna */
  max-width: 100%; /* Evita que se agranden demasiado */
}

.subColumnaElementosIncluye {
  flex: 1;
  padding-bottom: 10px;
}

.subColumnaElementosIncluye h1 {

  font-family: "Inter", serif;
  font-size: clamp(1rem, 6vw, 17px);
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;
  
}

.subColumnaElementosIncluye p{

  font-family: "DM Sans", serif;
  font-size: clamp(1rem, 20vw, 15px);
  font-weight: 220;
  font-style: normal;
  padding-right: 50px;

}

/* ESTILOS DESARROLLO */

.contenedorDesarrollo {
  display: flex;
  flex-wrap: wrap;
  padding-left: 80px;
  padding-right: 80px;
  margin-bottom: 50px;
}

.columnaDesarrollo {
  flex: 1;
  text-align: center;
  padding: 30px;
  position: relative; 
  min-width: 250px; /* Define un ancho mínimo para cada columna */
  max-width: 100%; /* Evita que se agranden demasiado */
}


.columnaDesarrollo:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100px; 
  right: 0; 
  width: 0.5px; 
  height: 50%;
  background-color: green; 
  opacity: 40%;
}

.columnaDesarrollo h1 {
  font-family: "Inter", serif;
  font-size: clamp(1rem, 6vw, 17px);
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;
  flex-wrap: wrap;

}

.columnaDesarrollo p {
  font-family: "DM Sans", serif;
  font-size: clamp(1rem, 20vw, 15px);
  font-weight: 220;
  font-style: normal;
}

.logoDesarrollo {
  width: 40px;
  height: 40px;
}

/* METODOLOGIA DE DESARROLLO */

.contenedorDescripcion p{
  padding-right: 150px;
}

.contenedorMetodologiaDesarrollo{
  display: flex;
  flex-wrap: wrap;
  padding-left: 80px;
  padding-right: 80px;
  margin-bottom: 50px;  
}

.columnaMetodologiaDesarrollo {
  flex: 1;
  text-align: center;
  position: relative; /* Necesario para posicionar la línea correctamente */
  max-width: 100%;
  min-width: 400px;
}

@media (max-width: 768px) {
  .contenedorMetodologiaDesarrollo {
    flex-direction: column; /* Hace que los elementos se acomoden en columna */
    align-items: center; /* Centra los elementos */
  }

  .columnaMetodologiaDesarrollo {
    width: 90%; /* Ocupa la mayoría del ancho en móviles */
    max-width: 400px; /* Evita que sea demasiado ancho */
  }

  .lineaSeparadoraValores {
    display: none; /* Oculta las líneas separadoras en móviles */
  }
}

/* Línea verde separadora entre columnas */
.columnaMetodologiaDesarrollo:first-child::after {
  content: "";
  position: absolute;
  top: 40px; /* Ajusta según sea necesario */
  right: 0; /* Se coloca al extremo derecho de la primera columna */
  width: 0.5px; /* Grosor de la línea */
  height: 90%; /* Largo de la línea */
  opacity: 30%;
  background-color: green; /* Color de la línea */
}

.columnaMetodologiaDesarrollo h1 {

  font-family: "Inter", serif;
  font-size: clamp(1rem, 6vw, 17px);
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;

}

.columnaMetodologiaDesarrollo p {

  font-family: "DM Sans", serif;
  font-size: clamp(1rem, 20vw, 15px);
  font-weight: 220;
  font-style: normal;
}

.descripcionMetodologiaDesarrollo {
  padding-left: 40px;
  padding-right: 40px;
}

.informacionMetodologaDesarrollo {
  flex: 1;
  text-align: left;
  padding-top: 20px;
}

.informacionMetodologaDesarrollo h2{

  font-family: "Inter", serif;
  font-size: clamp(1rem, 6vw, 17px);
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;

}

.informacionMetodologaDesarrollo p {

  font-family: "DM Sans", serif;
  font-size: clamp(1rem, 20vw, 15px);
  font-weight: 220;
  font-style: normal;
  padding-right: 50px;
  margin-bottom: 30px;

}

.informacionMetodologaDesarrollo_2 {
  flex: 1;
  text-align: left;
  padding-top: 20px;
  padding-left: 40px;
}

.informacionMetodologaDesarrollo_2 h2{

  font-family: "Inter", serif;
  font-size: clamp(1rem, 6vw, 17px);
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;
  padding-top: 20px;

}

.informacionMetodologaDesarrollo_2 p {

  font-family: "DM Sans", serif;
  font-size: clamp(1rem, 20vw, 15px);
  font-weight: 220;
  font-style: normal;
  padding-right: 50px;
  margin-bottom: 30px;
  align-items: top;

}

/* ESTILOS COMPONENTES CLAVE */

.lineaVerdeOptimizacion_2 {
  width: 80%;
  max-width: 280px; /* Ancho de la línea */
  height: 2px; /* Grosor de la línea */
  background-color: #00761a; /* Color verde */
  margin: 10px auto 0; /* Centrar la línea y agregar espacio arriba */
  margin-left: -5px;
}

/* SECCION RESUMEN */

.resumen {
  display: flex;
  text-align: center;
  padding-left: 120px;
  padding-right: 120px;
  margin-bottom: 10px;
}

.columnaResumen {
  flex: 1;
}

.columnaResumen p {
  font-family: "DM Sans", serif;
  font-size: clamp(1rem, 20vw, 15px);
  font-weight: 300;
  font-style: normal;
}

.contenedorBotonValores{
  text-align: center;
}

.botonValores {
  background-color: #005212; 
  color: #ffffff; 
  padding: 15px 30px; 
  border-radius: 10px; 
  text-decoration: none; 
  font-size: 18px; 
  font-weight: 700; 
  font-family: "Inter", serif; 
  display: inline-block; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  margin-bottom: 60px;
}

.contenedorResumen {
  margin-top: 50px;
  text-align: center;
}

.contenedorDesarrollo_2 {
  display: flex;
  margin-bottom: 60px;

}

.columnaDesarrollo_2 {
  flex: 1;
  text-align: center;
  position: relative; 
}

.columnaDesarrollo_2 h1 {
  font-family: "Inter", serif;
  font-size: clamp(1rem, 6vw, 17px);
  font-weight: 750;
  font-style: normal;
  color: #3e3e3e;
}

.columnaDesarrollo_2 p {
  font-family: "DM Sans", serif;
  font-size: clamp(1rem, 20vw, 15px);
  font-weight: 220;
  font-style: normal;
}