/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Cabecera */
.cabecera {
    background-color: #fff;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

/* Logo y nombre de la empresa */
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 70px;
    margin-right: 10px;
}

.logo span {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* Menú central */
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.menu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu ul li a:hover {
    background-color: #007BFF;
    color: #fff;
}

/* Menú de ingreso */
.ingreso {
    position: relative;
}

#botonIngreso {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#botonIngreso:hover {
    background-color: #0056b3;
}

.formulario-ingreso {
    display: none;
    width: 22vw;
    position: absolute;
    top: 50px;
    right: 0;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1000;
}

.formulario-ingreso input {
  display: block;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 20vw;
}

.formulario-ingreso button {
  background-color: #007BFF;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  width: inherit;
}

/* Efecto de cabecera al hacer scroll */
.cabecera.scroll {
    background-color: rgba(255, 255, 255, 0.9);
}




/*Seccion 1------------------------------*/




/* Sección Transformación con degradado ajustable */


.transformacion-section {
    background: linear-gradient(135deg, #0056b3, #000000);
    padding: 150px 0px;
    color: #fff;
   }

.transformacion-section .container {
    display: flex;
    align-items: center;
}

.transformacion-section .contenido {
    display: flex;
    gap: 90px;
    align-items: stretch;
    /* Hace que los elementos hijos ocupen toda la altura */
}

.transformacion-section .imagen {
    flex: 1;
    /* La imagen ocupará más espacio */
    display: flex;
    align-items: center;
    justify-content: center;
}

.transformacion-section .imagen img {
    width: 100%;
    max-width: 600px;
    /* Aumentamos el ancho máximo de la imagen */
    height: auto;
    border-radius: 150px 0 150px 0px;
    /* Esquina superior izquierda e inferior izquierda redondeadas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    /* Asegura que la imagen cubra el espacio sin distorsionarse */
}

.transformacion-section .texto {
    flex: 1;
    /* El texto ocupará el mismo espacio que la imagen */
    max-width: 600px;
    /* Limita el ancho del texto */
}

.transformacion-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.3rem;
    /* Equivalente a 5xl */
    font-weight: bold;
    margin-bottom: 50px;
}

.transformacion-section .numeros {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
    /* Más espacio debajo del número */
}

.transformacion-section .numero {
    font-size: 3rem;
    font-weight: bold;
    color: #0056b3;
}

.transformacion-section .imagenes {
    display: block;
    gap: 10px;
}

.transformacion-section .imagenes img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.transformacion-section .especialistas {
    font-size: 0.9rem;
    margin-bottom: 30px;
    /* Más espacio debajo del texto */
    color: #686464;
}

.transformacion-section .conoce-mas {
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: 50px;
    /* Más espacio debajo del enlace */
    transition: background-color 0.3s ease;
}

.transformacion-section .conoce-mas:hover {
    background-color: #f0f0f0;
}

.transformacion-section .flecha {
    margin-left: 10px;
}

.transformacion-section .redes-sociales {
    display: flex;
    gap: 150px;
    margin-bottom: 50px;
    /* Más espacio debajo de los logos */
    justify-content: center;

}

.transformacion-section .redes-sociales img {
    width: 24px;
    height: 24px;


}

.transformacion-section .descripcion {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    /* Sin margen inferior */
    color: #7ea4ce;
}


/*----Seccion 2----------------*/



/* Sección con fondo degradado */
.info-section {
    background: linear-gradient(135deg, #0056b3, #000000);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 30px;
}

.info-section1 {
    background: linear-gradient(135deg, white, white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 30px;
}

/* Contenedor principal */
.info-container {
    display: flex;
    gap: 20px;
    /* Espacio entre elementos */
    padding: 20px;
}

/* Estilo de cada sección */
.info-box {
    text-align: justify;
    hyphens: auto;
}

/* Números */
.info-box .number {
    font-family: 'Montserrat', sans-serif;
    font-size: 55px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 20px;
}

/* Descripción */
.info-box .description {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #EAEAEA;
    margin-top: 0px;
    max-width: 500px;
}

.info-box .description1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000000;
    margin-top: 0px;
    max-width: 500px;
}

/* Separadores */
.separator {
    width: 2px;
    background-color: #626885;
    height: 100px;
}


/*---------Seccion 3-----------*/



/* Sección de soluciones tecnológicas */
.solutions-section {
    background: #ffffff;
    /* Fondo blanco o puedes usar un degradado */
    padding: 45px 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor principal con distribución en dos columnas */
.content {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
}

/* Columna de texto */
.text-content {
    flex: 1;
}

/* Encabezado principal */
.text-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #003366;
    font-weight: bold;
    margin-bottom: 1px;
    text-align: center;
}

/* Subtítulo */
.text-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    color: #0d0d0e;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

/* Texto descriptivo */
.text-content p {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #202020;
    line-height: 1.6;
    text-align: center;
}

/*-----seccion 4----------*/

/* Nueva sección de imagen */
.imagen-section {
    background: #5c5850;
    /* Fondo suave */
    padding: 5px 0px;
    display: flex;
    justify-content: center;
}

/* Contenedor de imagen con espacio en los lados */
.imagen-container {
    width: 90%;
    /* Ajuste del ancho con espacio a los lados */
    max-width: 1200px;
    /* Límite para evitar que sea demasiado grande */
    margin: 0 auto;
    /* Centrar el contenedor */
    display: block;
    /* Asegurar un correcto comportamiento */
}

.imagen-container img {
    width: 100%;
    height: 500px;
    border-radius: 10px;
    /* Opcional: Bordes redondeados */
}

.imagen-difuminada {
    width: 100%;
    /* Ajuste al tamaño del contenedor */
    display: block;

    /* Aplicando el difuminado en la parte inferior */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
}



/*----section 5--------------*/


/* Nueva sección de testimonios */
.testimonios {
    background-color: #c6dfeb;
    /* Azul Verdoso Elegante y Suave */
    padding: 50px 0;
    display: flex;
    justify-content: center;
}

/* Contenedor de los cuadros */
.contenedor-cuadros {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    width: 90%;
    justify-content: center;
}

/* Cuadros de testimonios */
.cuadro {
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 350px;
    text-align: center;
    font-size: 19px;
}

/* Línea punteada elegante */
.linea-punteada {
    border: none;
    border-top: 1px dotted #777;
    margin: 15px 0;
}

/* Estilo del autor */
.autor {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: #333;
    justify-content: center;
    margin-bottom: 30px;
}

/* Imagen del autor */
.autor img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
}


/*----section 6--------------*/



/* Sección completa */
.logros {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F4F4F4;
    /* Fondo claro y elegante */
    padding: 60px 0;
}

/* Contenedor principal */
.contenido {
    display: flex;
    max-width: 1200px;
    width: 90%;
    align-items: center;
    gap: 50px;
}

/* Imagen más ancha y alta */
.imagen-logros img {
    width: 600px;
    /* Más ancho */
    height: 550px;
    /* Más alto */
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Texto a la derecha */
.texto-logros {
    flex: 1;
    text-align: left;
}

/* Títulos */
.texto-logros h2 {
    font-size: 18px;
    font-weight: bold;
    color: #0337c5;
}

.texto-logros h3 {
    font-size: 28px;
    color: #000000;
    /* Azul Verdoso Elegante */
}

.texto-logros p {
    font-size: 25px;
    color: #555;
    margin-top: 10px;
}

/* Contenedor de logros con dos columnas */
.logros-detalle {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

/* Fila con dos columnas */
.fila {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

/* Cada columna dentro de la fila */
.columna {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

/* Línea vertical */
.linea-vertical {
    width: 3px;
    height: 50px;
    background-color: #5F9EA0;
    /* Azul Verdoso */
    border-radius: 2px;
}

/* Texto alineado a la derecha de la línea */
.columna p {
    font-size: 16px;
    color: #333;
    margin: 0;
}



/*----section 7------------*/



/* Sección completa */
.logros1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bbdee2;
    /* Fondo claro y elegante */
    padding: 60px 0;
}

/* Contenedor principal */
.contenido1 {
    display: flex;
    max-width: 1200px;
    width: 90%;
    align-items: center;
    gap: 50px;
}

/* Imagen más ancha y alta */
.imagen-logros1 img {
    width: 600px;
    /* Más ancho */
    height: 650px;
    /* Más alto */
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Texto a la derecha */
.texto-logros1 {
    flex: 1;
    text-align: left;
}

/* Títulos */
.texto-logros1 h2 {
    font-size: 18px;
    font-weight: bold;
    color: #0337c5;
}

.texto-logros1 h3 {
    font-size: 28px;
    color: #000000;
    /* Azul Verdoso Elegante */
}

.texto-logros1 p {
    font-size: 25px;
    color: #555;
    margin-top: 10px;
}

/* Contenedor de logros con dos columnas */
.logros1-detalle {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 100px;
}

/* Fila con dos columnas */
.fila {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

/* Cada columna dentro de la fila */
.columna {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}


/* Texto alineado a la derecha de la línea */
.columna p {
    font-size: 16px;
    color: #333;
    margin: 0;
}

.columna i {
    font-size: 20px;
    /* Tamaño del chulito */
    color: #0337c5;
    /* Azul Verdoso */
}


/* Estilo del botón */
.contacto-btn {
    display: inline-flex;
    /* Mantiene la flecha alineada con el texto */
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #007BFF;
    /* Azul */
    text-decoration: none;
    height: 45px;
    width: 180px;
        /* Puedes ajustar el valor */
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    border: 2px solid #007BFF;
}

/* Flecha antes del texto */
.contacto-btn .flecha {
    margin-right: 9px;
    /* Espacio entre la flecha y el texto */
    font-size: 20px;
}

/* Efecto al pasar el mouse */
.contacto-btn:hover {
    background-color: #0056b3;
    /* Azul más oscuro */
    border-color: #0056b3;
}

/* Efecto al hacer clic */
.contacto-btn:active {
    transform: scale(0.95);
    /* Pequeño efecto de presión */
}



/*-----------------------------------------*/


.seccion-empresas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
}

.contenido-izquierdo {
    width: 60%;
    padding: 30px;
}

.contenido-izquierdo h2 {
    font-size: 45px;
    margin-bottom: 10px;
}

.contenido-izquierdo p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
}

.contenedor-botones {
    display: flex;
    align-items: center;
    /* Alinea verticalmente */
    gap: 20px;
    /* Espacio entre el botón y el texto */
}

.boton-azul {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: /*background*/ 0.3s ease;
}

.boton-azul:hover {
    background-color: #0056b3;
}

.texto-flecha {
    font-size: 18px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #292828;
    font-weight: bold;
}

.texto-flecha .flecha {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.texto-flecha:hover .flecha {
    transform: translateX(5px);
}

.contenido-derecho {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.empresa {
    width: 45%;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    padding: 10px;
}

.empresa i {
    font-size: 24px;
    margin-right: 10px;
    color: #007bff;
}



/*------Seccion 1.1-----------*/


/*Pagina de servicios*/




/* Sección principal con imagen de fondo */
.hero {
    position: relative;
    background: url('Oficina.webp') no-repeat center center/cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10vw 20px;
}

/* Difuminado azul sobre la imagen */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 47, 75, 0.6);
    /* Azul oscuro semitransparente */
}

/* Contenido principal */
.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: white;
    text-align: left;

}

.hero-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    color: #f8e8e8;

}

/* Contenedor de características */
.feature-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

/* Estilos de cada rectángulo */
.feature-box {
    background: #002f4b;
    /* Azul oscuro */
    padding: 20px;
    width: 350px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    text-align: left;
    transition: transform 0.3s ease;
}

.feature-box:hover {
    transform: scale(1.05);
}

/* Iconos */
.feature-box i {
    font-size: 30px;
    margin-right: 15px;
    color: #00bcd4;
    /* Azul celeste para resaltar */
}

/* Texto de cada rectángulo */
.feature-text h3 {
    font-size: 1.5rem;
    margin: 0;
    color: white;
}

.feature-text p {
    font-size: 1rem;
    margin-top: 5px;
    color: #c7c0c0;
}



/*---seccion 2-------------*/



.services-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #b4d2d6;
}

.services-section h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #3f3d3d;
    font-family: Work Sans Light;
}

.services-section .highlight {
    font-size: 50px;
    font-weight: normal;
    color: #1d242c;
    margin-bottom: 40px;
}

.steps-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.step {
    width: 30%;
    margin-bottom: 20px;
}

.step-text {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
}

.image-container {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.animated-image {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.animated-image:hover {
    transform: translateY(-10px);
}

.image-description {
    font-size: 16px;
    margin-top: 15px;
    color: #4b4646;
    text-align: justify;
}




/*----seccion 3-1------------------*/




/* Asegura que la sección ocupe toda la pantalla */
.content1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 60vh;
    /* Ocupa toda la altura de la pantalla */
    text-align: center;

    background-color: #b4d2d6;
}

/* Contenedor de texto */
.text-container {
    margin-bottom: 10px;
    /* Espacio entre el texto y los cuadros */
}

/* Título principal */
.title {
    font-size: 3rem;
    color: #333;
    margin-bottom: 10px;
}

/* Subtítulo */
.subtitle {
    font-size: 1.2rem;
    color: #666;
}

/* Contenedor de los cuadros (alineados en línea) */
.cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    /* Asegura que en pantallas pequeñas se ajusten correctamente */
    margin-bottom: 70px;
}

/* Estilo de cada tarjeta */
.card {
    background: white;
    padding: 20px;
    width: 200px;
    text-align: left;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* Iconos dentro de las tarjetas */
.card i {
    font-size: 2rem;
    color: #007bff;
    margin-bottom: 10px;
}

/* Efecto hover */
.card:hover {
    transform: translateY(-5px);
}

/*---Seccion -4-1-------------------*/


.content2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 110vh;
    /* Ocupa toda la altura de la pantalla */
    text-align: center;
    padding: 30px;
    background-color: #ffffff;
}

/* Contenedor de texto */
.text-container1 {
    margin-bottom: 30px;
    /* Espacio entre el texto y los cuadros */

}

/* Título principal */
.title1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
}

/* Subtítulo */
.subtitle {
    font-size: 1.2rem;
    color: #666;
}

/* Contenedor de los cuadros (alineados en línea) */
.cards1 {
    display: flex;
    justify-content: center;
    gap: 45px;
    flex-wrap: wrap;
    /* Asegura que en pantallas pequeñas se ajusten correctamente */
    margin-bottom: 70px;
}

/* Estilo de cada tarjeta */
.card1 {
    background: white;
    padding: 20px;
    width: 340px;
    text-align: left;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* Iconos dentro de las tarjetas */
.card1 i {
    font-size: 1.5rem;
    color: #121213;
    margin-bottom: 10px;
}

/* Efecto hover */
.card:hover {
    transform: translateY(-5px);
}


/*---Seccion 5-1----------------*/


.process-section {
    text-align: center;
    padding: 20px 30px;
    background-color: #fff;
    margin-bottom: 1px;
    background-color: #e7e5e5;
}

.process-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #212222;
}

.separator-line {
    border: 0;
    /* Elimina el borde por defecto */
    height: 2px;
    /* Grosor de la línea */
    background: linear-gradient(90deg, transparent, #4c4e50, transparent);
    /* Efecto degradado */
    margin: 0 auto 40px;
    /* Centra la línea y añade margen inferior */
    width: 80%;
    /* Ancho de la línea */
    max-width: 600px;
    /* Ancho máximo */
}

.process-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.process-column {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    text-align: left;
}

.process-column h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #333;
}

.process-column ul {
    list-style-type: none;
    padding: 0;
}

.process-column ul li {
    font-size: 1rem;
    margin-bottom: 30px;
    color: #555;
    display: flex;
    align-items: center;
}

.process-column ul li i {
    font-size: 1.2rem;
    color: #007bff;
    margin-right: 10px;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .process-column {
        flex: 1 1 45%;
        /* Dos columnas en tablets */
    }
}

@media (max-width: 480px) {
    .process-column {
        flex: 1 1 100%;
        /* Una columna en móviles */
    }
}


/*---Seccion 6----------*/

/* Estilos generales */
.container3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;

}

.titulo3 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.subtitulo3 {
    font-size: 1.2rem;
    text-align: center;
    color: #666;
    margin-bottom: 60px;
}

/* Estilos para la sección de logros */
.logros-grid3 {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.logro-item3 {
    padding: 20px;
}

.logro-numero3 {
    font-size: 3rem;
    color: #007BFF;
    margin-bottom: 10px;
}

.logro-descripcion3 {
    font-size: 1.2rem;
    color: #555;
}

/* Estilos para la sección de soluciones */
.soluciones-grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.solucion-item3 {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.solucion-titulo3 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 15px;
}

.solucion-descripcion3 {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 20px;
}

.solucion-beneficios3 {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.solucion-beneficios3 li {
    font-size: 1rem;
    color: #444;
    margin-bottom: 10px;
}

.solucion-precio3 {
    font-size: 1.5rem;
    color: #007BFF;
    font-weight: bold;
}

.separator1 {
    width: 2px;
    background-color: #67677e;
    height: 220px;
}

/*------Seccion 1- Contacto*/

/* Estilos generales */
.contacto4 {
    margin-top: 150px;
    /* Margen superior para toda la sección */
    margin-bottom: 50px;
}

.container4 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Estilos para la sección de contacto */
.contacto-grid4 {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Contenedor de la imagen con efecto */
.imagen-container4 {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 10px;
    padding: 10px;
    /* Espacio adicional alrededor de la imagen */
    background-color: rgba(0, 123, 255, 0.1);
    /* Fondo azul claro */
}

.fondo-azul4 {
    position: absolute;
    top: 20px;
    /* Ajusta para que el fondo sea más grande */
    left: 20px;
    /* Ajusta para que el fondo sea más grande */
    width: calc(100% + 40px);
    /* Aumenta el ancho */
    height: calc(100% + 40px);
    /* Aumenta la altura */
    background-color: rgba(0, 123, 255, 0.1);
    /* Azul claro con transparencia */
    z-index: 1;
    border-radius: 5px;
    /* Mantén el borde redondeado */
}

.imagen4 {
    width: 98%;
    height: auto;
    display: block;
    transform: translateY(100%);
    /* Inicia fuera de la vista */
    animation: aparecer4 1.5s ease-out forwards;
    /* Animación de aparición */
    border-radius: 10px;
    position: relative;
    /* Asegura que la imagen esté sobre el fondo */
    z-index: 2;
    /* Coloca la imagen por encima del fondo */
}

@keyframes aparecer4 {
    to {
        transform: translateY(-5%);
        /* Termina en su posición original */
    }
}

/* Estilos para la información de contacto */
.info-contacto4 {
    flex: 1;
    padding: 20px;
}

.titulo-contacto4 {
    font-size: 3.5rem;
    color: #333;
    text-align: left;
    /* Alineado a la izquierda */
    margin-bottom: 50px;

}

.info-grid4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Dos columnas */
    gap: 20px;
    /* Espacio entre elementos */
}

.info-item4 {
    text-align: left;
    /* Alineado a la izquierda */
}

.subtitulo4 {
    font-size: 1.5rem;
    color: #007BFF;
    margin-bottom: 15px;
}

.info-item4 p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .contacto-grid4 {
        flex-direction: column;
    }

    .imagen-container4 {
        width: 100%;
    }

    .info-contacto4 {
        text-align: center;
    }

    .info-grid4 {
        grid-template-columns: 1fr;
        /* Una columna en móviles */
    }

    .info-item4 {
        text-align: center;
        /* Centrado en móviles */
    }
}

/*Seccion 2----------------------*/



/* Estilos para la sección de ubicación */
.ubicacion4 {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.mapa-container4 {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mapa4 {
    width: 100%;
    height: 500px;
    /* Altura del mapa */
    cursor: grab;
    /* Cambia el cursor al pasar el mouse */
}

.mapa4:active {
    cursor: grabbing;
    /* Cambia el cursor al hacer clic y mover */
}

.info-mapa4 {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(0, 123, 255, 0.9);
    /* Fondo azul con transparencia */
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    max-width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.info-mapa4 h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.info-mapa4 p {
    font-size: 1rem;
    margin-bottom: 10px;
}

.link-ubicacion4 {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    margin-top: 10px;
    transition: color 0.3s ease;
}

.link-ubicacion4 i {
    margin-right: 8px;
    font-size: 1.2rem;
}

.link-ubicacion4:hover {
    color: #ffdd57;
    /* Cambia el color al pasar el mouse */
}

/*Seccion 3------------*/


/* Estilos generales */
.soluciones-negocio5 {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    padding: 60px 0;
}

.contenedor-soluciones5 {
    display: flex;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

/* Imagen grande */
.imagen-soluciones5 {
    flex: 1;
    height: 600px; /* Altura de la imagen */
    overflow: hidden;
}

.imagen-soluciones5 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen al contenedor */
}

/* Información al lado derecho */
.info-soluciones5 {
    flex: 1;
    padding: 0 40px;
}

.info-soluciones5 h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

.descripcion-soluciones5 {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Lista de características */
.caracteristicas-soluciones5 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.caracteristica-item5 {
   /* display: flex;*/
    align-items: flex-start;
    gap: 15px;
}

.icono-soluciones5 {
    font-size: 1.5rem;
    color: #007BFF;
    margin-top: 5px;
}

.caracteristica-item5 h3 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 5px;
}

.caracteristica-item5 p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

/* Botón */
.boton-soluciones5 {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 30px;
    background-color: #007BFF;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.boton-soluciones5:hover {
    background-color: #0056b3; /* Cambia de color al pasar el mouse */
    transform: translateY(-3px); /* Efecto de elevación */
}

/* Responsive */
@media (max-width: 768px) {
    .contenedor-soluciones5 {
        flex-direction: column;
    }

    .imagen-soluciones5 {
        height: 300px; /* Altura reducida en móviles */
    }

    .info-soluciones5 {
        padding: 20px;
    }

    .info-soluciones5 h2 {
        font-size: 2rem;
    }
}

/*---------------------*/

.faq-section {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    gap: 40px;
    align-items: center;
}

.faq-image {
    flex: 1;
}

.faq-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.faq-content {
    flex: 1;
}

.faq-small-title {
    color: #666;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.faq-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 30px;
}

.faq-item {
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    padding: 15px 20px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: #f0f0f0;
}

.faq-toggle {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    background-color: #fff;
}

.faq-item.active .faq-answer {
    padding: 20px;
    max-height: 200px;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

/*---------------------*/



/*---------------------*/

/* Estilos Generales del Footer */
.footer {
    background-color: #000000;
    color: #c0c0c0;
    padding: 30px 0;
    text-align: center;

}

/* Contenedor principal */
.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
    flex-wrap: wrap;
    padding: 20px;
}

/* Columnas del footer */
.footer-col {
    width: 30%;
    min-width: 250px;
    padding: 10px;
    text-align: left;
    font-size: 14px;
}

.footer-logo {
    font-size: 24px;
    color: #007bff;
    margin-bottom: 10px;
}

.logo3 {
    width: 80px;
    /* Aumenta el tamaño */
    height: auto;
}

.footer-col h3 {
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 2px solid #007bff;
    display: inline-block;
    padding-bottom: 5px;
}

/* Enlaces */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: #007bff;
}

/* Información de contacto */
.footer-col p {
    margin: 10px 0;
}

.footer-col i {
    margin-right: 10px;
    color: #007bff;
}

/* Redes Sociales */
.redes-sociales {
    margin-top: 10px;
}

.redes-sociales a {
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
    color: #bbb;
    transition: color 0.3s ease-in-out;
}

.redes-sociales a:hover {
    color: #007bff;
}

/* Derechos de autor */
.footer-bottom {
    background-color: #111;
    padding: 10px 0;
    text-align: center;
    margin-top: 20px;
}

.footer-bottom p {
    margin: 0;
    font-size: 14px;
    color: #bbb;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-col {
        width: 100%;
    }
}