img {
    max-width: 100%;
    height: auto;
    display: block;
}
.logo {
    margin-right: 20px;
    height: auto;
    width:  100px; 
    float:  left;    
   
}

header {
    background-color: #223035;
    color: #ffffff;
    padding: 20px;
}

/* Cambia el color de los enlaces a blanco */
/* .menu a {
    color: #ffffff;
    text-decoration: none;
    align-items: center;
}

/* Cambia el color al pasar el mouse */
/* .menu a:hover {
    text-decoration: underline;
} */ */

.navbar {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 10px 20px;
}

/* Estilos para centrar el texto del título h2 */
.navbar h2 {
    text-align: center;
    font-size: 18px; /* Ajusta según el diseño de tu sitio */
    margin: 0;
}

/* Agrupa horizontalmente el menú ul y las redes sociales */
.nav-derecha {
    display: flex;
    align-items: center;
    gap: 25px; /* Distancia entre las opciones de texto y los iconos */
}

/* Menú en línea horizontal */
.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
}

/* Contenedor de iconos */
.redes-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Enlaces de los iconos */
.redes-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transition: transform 0.2s ease;
}

/* Configuración de color y tamaño del gráfico SVG */
.redes-nav svg {
    width: 18px;
    height: 18px;
    fill: #333333; /* Color por defecto. Cambiar a #ffffff si tu barra es oscura */
    transition: fill 0.2s ease;
}

/* Colores de marca interactivos (Hover) */
.redes-nav a.nav-fb:hover svg { fill: #1877F2; }
.redes-nav a.nav-ig:hover svg { fill: #E1306C; }
.redes-nav a.nav-wa:hover svg { fill: #25D366; }

.redes-nav a:hover {
    transform: scale(1.1);
}
.header {
    position: relative;
    width: 100%;        /* Fluida en ancho */
    height: 100px;    /* Fija en alto */
    object-fit: cover;
    background-color: #022727b6;
    border: 1px solid #0e0202;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    align-items: center;
}
.container img {
    display: block;       /* Convierte la imagen en bloque para poder centrarla */
    margin: 5px auto;    /* Centra horizontalmente (auto) y añade margen arriba/abajo */
    width: 50%;          
    height: 600px;        
    object-fit: cover;    
    object-position: center;
    background-color: #fcf9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.container {
    display: flex;         /* Activa el diseño en paralelo */
    align-items: center;   /* Centra la imagen y el texto verticalmente */
    gap: 40px;             /* Añade separación entre la imagen y el texto */
    max-width: 1100px;     /* Limita el ancho máximo en pantallas grandes */
    margin: 30px auto;     /* Centra todo el bloque en la pantalla */
    padding: 0 50px;       /* Margen interno para que no toque los bordes */
}
.contenedor-principal {
    display: flex;         /* Activa el diseño en paralelo */
    align-items: center;   /* Centra la imagen y el texto verticalmente */
    gap: 40px;             /* Añade separación entre la imagen y el texto */
    max-width: 1100px;     /* Limita el ancho máximo en pantallas grandes */
    margin: 30px auto;     /* Centra todo el bloque en la pantalla */
    padding: 0 50px;       /* Margen interno para que no toque los bordes */
}
.containernos {
  position: relative;
  width: 100%;        
  height: 600px;         /* Ajustado para contener la altura de la imagen */
  overflow: hidden;      /* CRUCIAL: Recorta la imagen borrosa para que no tape el footer */
  background-color: #022727b6;
  border: 1px solid #0e0202;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.containernos img {
  display: block;       
  width: 100%;           /* Cambiado de 400% a 100% para que no desborde hacia los lados */
  height: 100%;          /* Ocupa el alto del contenedor principal */
  object-fit: cover;    
  object-position: center;
  filter: blur(1px);     /* EFECTO BORROSO: Ajusta los píxeles a tu gusto */
  transform: scale(1.1);
  padding: 20px;         /* Evita que los bordes de la imagen se vean blancos por el blur */
}
.txt4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 24px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 2;            /* Asegura que el texto quede siempre por encima de la imagen */
}
.caja, .txt {
    flex: 1;  
    font-family: Arial, sans-serif;
    color: #333333;
    margin: 0;   
     line-height: 1.5;         /* Distribuye el espacio en partes iguales (50% cada uno) */
}

.caja img {
    width: 100%;           /* Ocupa todo el espacio de su columna */
    height: 400px;         /* Define la altura fija */
    object-fit: cover;     /* Recorta la imagen perfectamente sin deformarla */
    border-radius: 8px;    /* Suaviza las esquinas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Añade una sombra sutil */
}

.caja1 {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  color: #333333;
}
.caja1 img {
    width: 100%;        /* Fluida en ancho */
    height: 400px   ;      /* Fija en alto */
    object-fit: cover;
    border-radius: 5px;
    
}
.caja2 {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #ffffff;
   font-family: Arial, sans-serif;
  color: #333333;
}
.caja2 img {
    width: 100%;        /* Fluida en ancho */
    height: 400px   ;      /* Fija en alto */
    object-fit: cover;
    border-radius: 5px;
}
.caja3 {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #ffffff;
   font-family: Arial, sans-serif;
  color: #333333;   
}
.caja3 img {
    width: 100%;        /* Fluida en ancho */
    height: 400px   ;      /* Fija en alto */
    object-fit: cover;
    border-radius: 5px;
   
}
.caja4 {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #ffffff;
   font-family: Arial, sans-serif;
  color: #333333;       
}
.caja4 img {
    width: 100%;        /* Fluida en ancho */
    height: 400px   ;      /* Fija en alto */
    object-fit: cover;
    border-radius: 5px;
   
}
.contenedor-segundo {
  display: flex;
  justify-content: space-between; /* Espacio uniforme entre cajas */
  gap: 20px;                     /* Separación fija entre ellas */
  max-width: 1200px;
  margin: 0 auto;                /* Centra todo el bloque en la pantalla */
  padding: 20px;
}
.solu {
    padding: 40px;
    gap: 20px;
    background-color: #ffffff; /* Fondo limpio para el texto */
    text-align: center;         /* Color gris oscuro profesional para la lectura */
    font-family: Arial, sans-serif;
    color: #333333;
    line-height: 5.5;         /* Distribuye el espacio en partes iguales (50% cada uno) */
}
.contenedor-tercero {
  display: flex;
  justify-content: space-between; /* Espacio uniforme entre cajas */
  gap: 80px;                     /* Separación fija entre ellas */
  max-width: 1200px;
  margin: 0 auto;                /* Centra todo el bloque en la pantalla */
  padding: 70px;
}
.txt1, .txt2, .txt3 {
  flex: 1;                       /* Hace que las 3 midan exactamente lo mismo */
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  color: #333333;  
}

.container2 {
  display: flex;
  justify-content: space-between; /* Espacio uniforme entre cajas */
  gap: 20px;                     /* Separación fija entre ellas */
  max-width: 1200px;
  margin: 0 auto;                /* Centra todo el bloque en la pantalla */
  padding: 20px;
}
.foo_txt {
  flex: 1;      
  padding: 50px;                 /* Hace que las 3 midan exactamente lo mismo */
  border: 1px soli ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: left;            /* Centra el texto debajo de la imagen */
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  color: #333333;       
}

footer {
    background-color: #223035;
    color: #ffffff;
    padding: 20px;
}
/* //.CSS formulario de contacto */
.container-contacto {
  max-width: 550px;
  width: 90%;
  margin: 50px auto;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(58, 87, 154, 0.08);
  flex: 1;
}
h1, h4, {
    flex: 1;  
    font-family: Arial, sans-serif;
    font-size: 56px;
    color: #333333;
    /* margin: 0;    */
    text-align: center;
     line-height: 1.5;         /* Distribuye el espacio en partes iguales (50% cada uno) */
}
.grupo-input {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.grupo-input label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #4a5568;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grupo-input input,
.grupo-input textarea {
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  color: #1a202c;
  background-color: #f8fafc;
  transition: all 0.3s ease;
}

.grupo-input input:focus,
.grupo-input textarea:focus {
  outline: none;
  border-color: #00a896;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 168, 150, 0.15);
}

.grupo-input textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-enviar {
  background-color: #223035;
  color: #ffffff;
  padding: 16px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  width: 40%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 168, 150, 0.2);
}

.btn-enviar:hover {
  background-color: #028074;
  transform: translateY(-1px);
}

.btn-enviar:active {
  transform: translateY(1px);
}
.btn-contacto {
  background-color: #6ac4e6;
  color: #f0e6e6; /* Texto blanco inicial */
  padding: 16px 20px;
  border: none;
  border-radius: 8px; /* Esquinas redondeadas */
  font-size: 1.1rem;
  font-weight: 700;
  font-family: Arial, sans-serif;
  cursor: pointer;
  width: 40%;
  transition: all 0.3s ease; /* Hace el cambio suave */
  box-shadow: 0 4px 12px rgba(0, 168, 150, 0.2);
}

.btn-contacto:hover {
  background-color: #028074;
  color: #ee0707; /* Cambia el texto a rojo al pasar el mouse */
  transform: translateY(-1px);
}

.btn-contacto:active {
  transform: translateY(1px);
}

.textpie {
  padding: 20px;
  border: 1px solid #ccc;        /* Borde gris sutil */
  border-radius: 8px;            /* Esquinas redondeadas */
  overflow: hidden;              /* Corta la imagen si sobresale del borde */
  text-align: center;            /* Centra el texto debajo de la imagen */
  background-color: #223035;
  font-family: Arial, sans-serif;
  color: #ffffff;     
}
/* CSS para servicios.html */
.contenedor-servicios {
  display: flex;
  justify-content: space-between; /* Espacio uniforme entre cajas */
  gap: 40px;                     /* Separación fija entre ellas */
  max-width: 1200px;
  margin: 0 auto;                /* Centra todo el bloque en la pantalla */
  padding: 70px;
}

.innova {
    display: flex;
    justify-content: space-between; 
    font-family: Arial, sans-serif;
    color: #333333;
    margin: 0;   
    gap: 20px;
    text-align: left;
    line-height: 1.5;    
    padding: 70px;     /* Distribuye el espacio en partes iguales (50% cada uno) */
}
.solu2 {
    padding: 40px;
    gap: 10px;
    background-color: #ffffff; /* Fondo limpio para el texto */
    text-align: center;         /* Color gris oscuro profesional para la lectura */
    font-family: Arial, sans-serif;
    color: #333333;
    
}
.tituloserv {
    flex: 1;  
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    /* margin: 0;    */
    text-align: center;
     
}
.contenedor-servicios > div {
    overflow: hidden; /* Evita que la imagen se salga al agrandarse */
    border-radius: 8px; /* Bordes redondeados suaves */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Animación de la caja al pasar el mouse */
.contenedor-servicios > div:hover {
    transform: translateY(-10px); /* Eleva la tarjeta */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15); /* Crea sombra de profundidad */
}

/* Transición suave para la imagen interna */
.contenedor-servicios > div img {
    transition: transform 0.4s ease;
    width: 100%;
    display: block;
}

/* Zoom de la imagen al pasar el mouse */
.contenedor-servicios > div:hover img {
    transform: scale(1.08); /* Agranda la imagen un 8% */
}
.contenedor-segundo > div {
    overflow: hidden; /* Evita que la imagen se salga al agrandarse */
    border-radius: 8px; /* Bordes redondeados suaves */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Animación de la caja al pasar el mouse */
.contenedor-segundo > div:hover {
    transform: translateY(-10px); /* Eleva la tarjeta */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15); /* Crea sombra de profundidad */
}

/* Transición suave para la imagen interna */
.contenedor-segundo > div img {
    transition: transform 0.4s ease;
    width: 100%;
    display: block;
}

/* Contenedor de la línea de iconos */
.textpie .redes-sociales {
    display: flex;
    justify-content: center; 
    gap: 15px;               
    margin: 20px 0;          
}

/* Base circular del botón */
.textpie .redes-sociales a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;      
    background-color: #f5f5f5; /* Un gris muy suave por defecto */
    transition: all 0.3s ease; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Control exacto del tamaño y color del dibujo SVG */
.textpie .redes-sociales svg {
    width: 20px;
    height: 20px;
    fill: #444444; /* Color gris oscuro inicial para los iconos */
    transition: fill 0.3s ease;
}

/* Animaciones y colores oficiales al pasar el mouse por encima (Hover) */
.textpie .redes-sociales a.icon-fb:hover {
    background-color: #1877F2; 
    transform: translateY(-3px);
}
.textpie .redes-sociales a.icon-fb:hover svg {
    fill: #ffffff; /* El icono cambia a blanco */
}

.textpie .redes-sociales a.icon-ig:hover {
    background-color: #E1306C; 
    transform: translateY(-3px);
}
.textpie .redes-sociales a.icon-ig:hover svg {
    fill: #ffffff;
}

.textpie .redes-sociales a.icon-wa:hover {
    background-color: #25D366; 
    transform: translateY(-3px);
}
.textpie .redes-sociales a.icon-wa:hover svg {
    fill: #ffffff;
}

.meta-navbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Control del bloque del logo */
.meta-logo-box {
    flex: 0 1 auto !important;
}
.meta-logo-img {
    height: 80px !important; /* Ajusta la altura de tu logo si es necesario */
    width: auto !important;
    display: block !important;
}

/* Control estricto del título central */
.meta-titulo {
    flex: 1 1 auto !important;
    text-align: left !important;
    margin: 0 20px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
}

/* Contenedor derecho: Agrupa el menú y las redes sociales juntos */
.meta-derecha {
    display: flex !important;
    align-items: center !important;
    gap: 25px !important;
    flex: 0 1 auto !important;
}

/* Forzar que el menú sea una línea horizontal */
.meta-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px !important;
}
.meta-menu li a {
    text-decoration: none !important;
    display: inline-block !important;
}

/* Contenedor de iconos de redes sociales */
.meta-redes {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Forzar tamaño real en los enlaces y evitar que colapsen */
.meta-redes a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    transition: transform 0.2s ease !important;
}

/* Forzar visualización de los SVG internos */
.meta-redes svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: #d5d5e0 !important; /* Cambia a #ffffff si tu menú es negro/oscuro */
    transition: fill 0.2s ease !important;
}

/* Colores interactivos al pasar el puntero */
.meta-redes a.m-fb:hover svg { fill: #1877F2 !important; }
.meta-redes a.m-ig:hover svg { fill: #E1306C !important; }
.meta-redes a.m-wa:hover svg { fill: #25D366 !important; }

.meta-redes a:hover {
    transform: scale(1.15) !important;
}
/* Zoom de la imagen al pasar el mouse */
.contenedor-segundo > div:hover img {
    transform: scale(1.08); /* Agranda la imagen un 8% */
}
.meta-menu li a {
    color: #ffffff !important;
}

/* Opcional: Cambia el color a un gris claro cuando pasas el mouse por encima para que se note el clic */
.meta-menu li a:hover {
    color: #cccccc !important; 
}

/* Si tu fondo es oscuro, aprovechemos de cambiar los iconos de redes sociales a blanco por defecto */
.meta-redes svg {
    fill: #ffffff !important;
}
@media (max-width: 768px) {
    .contenedor {
        width: 100%;
        flex-direction: column;
    }
}