body {
  /* background-color: #ebecef; */
  color: #595959;
  width: 100%;
  overflow-x: hidden; /* Esto ocultará cualquier desbordamiento horizontal */
  margin: auto;
  align-items: center;
  align-content: center;
}

/* Headers - Comfortaa font */
h1
{
  font-family: 'Comfortaa', sans-serif;
  color: #595959;
  font-size: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
}
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Comfortaa', sans-serif;
  color: #12659A;
  font-size: 30px;
  line-height: 1.5;
}
h1 img {
  margin-left: 10px;
  margin-right: 10px;
}
.image img {
  max-width: 100px;
}
.text-lato {
  font-family: 'lato', sans-serif;
  color: #595959;
  font-size: 24px;
  text-align: justify;
  line-height: 1.5;
  max-width: 65ch;
}
a:link {
  color: #DE865C;
}

/* Para enlaces visitados */
a:visited {
  color: #6B859F;
}
/* Establece un estilo para las líneas */

.line {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px; /
}

.line .logo,
.line .header {
  margin-right: 0px;
  width: 100%;
}
.header img {
  max-width: 100vw; /* Esto limitará la imagen a no ser más ancha que su contenedor */
  height: auto;
  padding: 30px;
}

.image img {
  max-width: 200px; /* Cambia el ancho máximo de la imagen según tus preferencias */
  padding-right: 50px;
}


/* Estilos para Entaina signigica espabila */
.line-50 {
  display: flex; /*  flexbox para alinear los elementos en la misma línea */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.line-50 .img-rigth {
  display: flex;
  justify-content: flex-end; /* Alinea la imagen a la derecha */
}

.line-50 .text-50 {
  display: flex;
  justify-content: flex-start; /* Alinea el texto a la izquierda */
  align-items: flex-end
}
/* Estilos para el contenedor de la imagen de cabecera */
.line-100 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px; /* Espacio entre los divs */
  align-items: start; /* Alinea los elementos en la parte superior */
  text-align: center;
  display: grid;
  padding: 30px;
}


/* Establece estilos para la clase que usa CSS Grid (3 cajas de 3 colores) */
.grid-container {
  display: flex;
  justify-content: center; /* Esto centra el .content-wrapper horizontalmente */
  gap: 60px;
  padding: 50px;
  background-image: url(/images/bg_gris@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Esto distribuirá los divs horizontalmente */
  align-items: stretch; /* Esto hace que los hijos se estiren verticalmente */
  width: 80%; /* Esto hace que el contenido ocupe el 70% del ancho de .grid-container */
}


.content-wrapper > div {
  flex-basis: calc(33.33% - 40px); /* Ajusta este valor según el gap deseado entre los divs */
  /* Ajustar el margen si es necesario para el espacio entre los divs */
}

.box {
  flex: 1;
  font-family: 'lato', sans-serif;
  color: #595959;
  font-size: 24px;
  display: flex;
  flex-direction: column; /* Alinear los elementos verticalmente dentro de los .box */
  align-items: center;
  text-align: center;
  position: relative;
  padding: 10px;
  box-sizing: border-box; /* Incluye el borde en el cálculo del tamaño del div */
  margin: 0; /* Asegura que no haya márgenes predeterminados */
  flex: 1; /* Hace que los .box se expandan para llenar el espacio horizontal */
  min-width: 250px; /* Tamaño mínimo para cada .box */
  max-width: calc(33.33% - 40px); /* Máximo tamaño para asegurar que se ajusten 3 por fila con espacio entre ellos */
  background-color: white;
  line-height: 1.5;
}

/* Estilo base para el borde */
.box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: inherit; /* para mantener las esquinas redondeadas si tu caja las tiene */
  padding: 2px; /* grosor del borde */
  margin: -2px; /* para compensar el padding */
}

/* Borde naranja */
.box.border-orange::before {
  background: linear-gradient(to bottom right, white, #DE865C);
}

/* Borde amarillo */
.box.border-yellow::before {
  background: linear-gradient(to bottom right, white, #F8CF73);
}

/* Borde azul */
.box.border-blue::before {
  background: linear-gradient(to bottom right, white, #6B859F);
}

/* Establece estilos para las imágenes dentro de los .box */

.box img {
  width: 100%; /* Ocupa todo el ancho del div */
  max-width: none; /* Anula el ancho máximo si lo hubiera */
  height: auto; /* Ajusta la altura automáticamente */
}

/* Estilos para la sección de creemos que la tecnologia */
.section {
  display: flex; /*  flexbox para crear dos columnas */
  justify-content: space-between; /* Espacio entre las columnas */
  align-items: flex-start; /* Alinea los elementos en la parte superior */
  width: 80%;
  margin: 0 auto; 
  padding-top: 50px;
  padding-bottom: 50px;  
}

/* Estilos para la columna que ocupa 3/4 del espacio disponible */

.resaltado {
  color: #6B859F; /* Cambia el color a azul */
}
.resaltado-amarillo {
  color: #F8CF73; /* Cambia el color a amarillo */
}
.resaltado-naranja {
  color: #DE865C; /* Cambia el color a naranja */
}

/*Estilos para la sección de valores*/

/* Estilos para el contenido de la primera columna */
.column-content {
  display: flex;
  flex-direction: column;
  width: 65%;
}
.p{
  font-size: 28px;
}

/* Estilos para el título */
.title {
  margin-bottom: 10px;
  font-size: 30px;
  font-family: 'Comfortaa', sans-serif;
  color: #6C6E73;
}
.title-2 {
  margin-bottom: 10px;
  font-size: 20px;
  font-family: 'Comfortaa', sans-serif;
  color: #595959;
  text-align: center;
}
.custom-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style: none; /* Oculta los bullets predeterminados */
  padding: 0;
  margin: 0;
  font-size: 22px;
  font-family: 'lato', sans-serif;
  color: #595959;
  width: 80%;
}

.custom-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.custom-list li img {
  width: 80px; /* Tamaño del bullet personalizado */
  height: 80px;
  margin-right: 10px; /* Espacio entre el bullet y el texto */
}

.column-2-4 {
  flex: 2; /* Hace que esta columna ocupe 3/4 del espacio disponible */
  display: flex; /* Activa Flexbox */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  text-align: left;
}

.column-2-4 img {
  max-width: 100%;
  height: auto; /* Esto asegura que la imagen mantenga su aspecto */
}

/* Estilo para aumentar el tamaño de la imagen de las bombillas */
img[src="/images/bombilla.png"] {
  width: 120px; /* Cambia el valor según el tamaño deseado */
  height: auto; /* Mantiene la proporción original de la imagen */
}

/* Bloque valores */

.valores {
  width: 70%; /* Ocupa el 70% del ancho total */
  margin-left: auto; /* Centra horizontalmente */
  margin-right: auto;
  box-sizing: border-box;
}

/* 1. Fila con texto centrado */
.fila-texto {
  text-align: center;
  margin-bottom: 20px; /* Espacio entre la primera y segunda fila */
  font-family: 'Comfortaa', sans-serif;
  color: #595959;
  font-size: 24px;
  line-height: 1.5;
  max-width: 65ch;
}

/* 2. Segunda fila */
.fila {
  display: flex; /* Flexbox para colocar las columnas una al lado de la otra */
  justify-content: space-between; /* Espacio entre las columnas */
}

/* 2.1 Columna con imagen */
.columna-imagen {
  flex: 2; /* Ocupa 1/3 del espacio disponible */
  padding: 10px;
}

.columna-imagen img {
  max-width: 100%; /* Asegura que la imagen no se desborde de su contenedor */
  height: auto;
  justify-content: flex-end;
}

/* 2.2 Columna con dos columnas */
.columna-doble {
  flex: 2; /* Ocupa 2/3 del espacio disponible */
  display: flex; /* Flexbox para las subcolumnas */
  gap: 20px; /* Espacio entre las subcolumnas */
  align-items: center;
}

/* 2.2.1 y 2.2.2 Columnas con 4 filas */
.subcolumna {
  flex: 1; /* Ocupa 1/3 del espacio disponible, igual que .columna-imagen */
  display: flex;
  flex-direction: column; /* Flexbox en dirección vertical para las filas */
  gap: 10px;
}

.fila-subcolumna {
  padding: 10px;
  box-sizing: border-box;
}
.image-container {
  background-image: url('/images/marco-amarillo.png'); /* Reemplaza con la ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen de fondo */
  width: 210px;
  height: 70px;
  display: flex; /* Usamos flexbox para centrar el texto */
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
}

.image-container p {
  text-align: center; /* Alinea el texto al centro */
  margin: 0; /* Elimina el margen predeterminado del párrafo */
  font-family: 'Comfortaa', sans-serif;
  color: #595959;
  font-size: 20px;
}
.image-container-seleccionado {
  background-image: url('/images/marco-seleccionado.png'); /* Reemplaza con la ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen de fondo */
  width: 210px;
  height: 70px;
  display: flex; /* Usamos flexbox para centrar el texto */
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
}

.image-container-seleccionado p {
  text-align: center; /* Alinea el texto al centro */
  margin: 0; /* Elimina el margen predeterminado del párrafo */
  font-family: 'Comfortaa', sans-serif;
  color: #595959;
  font-size: 20px;
}

/* Estilos la sección elegimos */

.title-center {
  text-align: center;
/* Espacio entre la primera y segunda fila */
  font-family: 'Comfortaa', sans-serif;
  color: #595959;
  font-size: 30px;
  line-height: 1.5;
}
.grid-container-elegimos {
  display: flex;
  justify-content: center; /* Esto centra el .content-wrapper horizontalmente */
  gap: 60px;
  padding: 50px;
  
 }

.container-titulo-elegimos {
  display: row;
  flex-wrap: wrap; /* Permitir que los .box se envuelvan a la siguiente fila */
  gap: 60px;
  padding: 50px;

}
.image-container-azul {
  background-image: url('/images/marco-azul.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 350px;
  height: 100px;
  margin-top: 50px;
  display: flex; /*  flexbox para centrar el texto */
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
  font-family: 'Comfortaa', sans-serif;
  color: #6B859F;
  font-size: 24px;
  /* Propiedades para centrar el div */
  position:relative;
  left: 50%;
  transform: translate(-50%, -50%);
}
.grid-container-separador {
  display: flex;
  flex-wrap: wrap; /* Permitir que los .box se envuelvan a la siguiente fila */
  gap: 60px; /* Espacio entre los .box */
  padding: 50px; /* Espaciado dentro del contenedor */
  background-image: url('/images/separador-bombilla.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  box-sizing: border-box;
}

/* pie + formulario */
.pie-formulario {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /*background-image: url('/images/bg_gris@3x.png');*/
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.Footer {
  display: flex;
  justify-content: center;
  align-items: center; /*  centrará verticalmente el texto si el contenedor tiene una altura específica */
  width: 100%; /* Asegura que el pie de página ocupe todo el ancho */
}

.footer-text {
  margin-bottom: 10px;
  font-size: 22px;
  font-family: 'Comfortaa', sans-serif;
  color: #595959;
  text-align: center; /*  centrará el texto dentro del elemento <p> */
}
.box-news {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 20px auto;
  font-family: 'Comfortaa', sans-serif;
  color: #595959;
  font-size: 24px;
  line-height: 1.5;
  box-sizing: border-box;
  max-width: 55ch;
  margin-bottom: 50px;
  background: #FFF;
  padding: 10px;
  border-radius: 8px;
  z-index: 10;
  opacity: 0.8;
}


/* Estilos específicos para dispositivos móviles */
@media (max-width: 768px) { /* Ajusta el valor 768px según el punto de ruptura que desees */
  body {
    width: 100vw;
    max-width: 1200px; /* O el valor máximo que prefieras */
    margin-left: auto;
    margin-right: auto;
}

.text-lato {
    line-height: 1.5;
    text-align: left;
  }
.box{
    line-height: 1.5; 
  }
.line-100 {
    position: relative;
    display: flex; /* O grid, según lo que necesites */
    justify-content: center;
    gap: 60px;
    text-align: center;
  }

  
.line-50 {
    flex-direction: column; /* Cambia la dirección de los elementos a columna */
    width: 100%;
    padding: 10px;
    
  }
.grid-container{
    justify-content: center;
    padding: 0%;
  }
.content-wrapper {
    gap: 50px;
    width:90%;
  }
.line-50 .img-rigth, .line-50 .text-50 {
    justify-content: center; /* Centra los elementos horizontalmente */
    width: 100%; /* Ocupa todo el ancho disponible */
  }
.valores {
    width: 100%; /* Ocupa el 100% del ancho en móviles */
  }

.fila {
    flex-direction: column; /* Cambia la dirección de los elementos a columna */
  }


.columna-imagen, .columna-doble {
    width: 100%; /* Ocupa todo el ancho disponible */
  }

.columna-doble {
    flex-direction: column; /* Las subcolumnas se muestran una debajo de la otra */
  }

.subcolumna {
    width: 100%; /* Ocupa todo el ancho disponible */
  }

.custom-list {
  flex-direction: column;
  margin-top: 40px;
}

.custom-list li {
    width: 100%; /* Ocupa todo el ancho disponible */
    flex-direction: row; /* Asegura que la dirección de flexbox sea en fila */
    align-items: flex-start; /* Alinea los elementos al inicio (parte superior) */
    margin: 20px;
    line-height: 1.5;
    max-width: 65ch;
  }

.custom-list li img {
    margin-right: 10px; /* Añade un margen derecho para separar la imagen del texto */
    width: 50px;
    height: 50px;
  }
  .subcolumna{
    align-items: center;
  }
  .fila-subcolumna{
    justify-content: center;
  }
  .grid-container-separador{
  height: 30px;
  }
  .grid-container-elegimos {
    justify-content:center;
   }
  .header img{
    min-height: 200px; /* Establece una altura mínima para la imagen */
    object-fit: cover;
  }
  .pie-formulario {
    box-sizing: content-box;
  }
  .section {
    flex-direction: column; /* Cambia la disposición a una columna vertical */
  }

.column-2-4 {
    width: 100%; /* Hace que cada columna tome el ancho completo */
    flex: none; /* Desactiva la proporción flex para que no afecte */
    justify-content:center; /* Alinea el contenido al inicio en la dirección del eje principal */
    align-items: flex-start; /* Alinea los elementos al inicio en la dirección del eje transversal */
    text-align: left; /* Centra el texto si es necesario */
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .column-2-4 img {
    max-width: 100%;
    height: auto; /* Esto asegura que la imagen mantenga su aspecto */
    align-content: center;
  }
.box-news{
    position: relative;
    background: linear-gradient(to bottom right, white, #d8d8da);
    top: auto;
    left: 10px;
    transform: none;
    text-align: center;
    margin: 20px auto;
    font-family: 'Comfortaa', sans-serif;
    color: #595959;
    font-size: 24px;
  }
  .column-2-4 img[src="/images/conbombilla.png"] {
    display: none;
  }
  .columna img[src="/images/pi-manos-cabeza.png"] {
    display: none;
  }
}