@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Container for main content and sidebar */
.content-section {
    display: flex;
    gap: 20px;
    padding: 20px;
    width: calc(50% - 20px); /* Ancho de cada tarjeta (50% del contenedor menos el espacio entre ellas) */
    margin: 0 auto; /* Centra el contenedor horizontalmente */


}

/* Main content styles */
.main-content {
    flex: 3;
}

.main-content h1 {
    color: #333;
    font-family: 'Poppins', sans-serif;

}

.main-content p {
    color: #555;
    line-height: 1.6;
    text-align: justify;
    font-family: 'Poppins', sans-serif;

}

.main-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 20px 0;
}



/* MENU DEL COSTADOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */

/* Sidebar styles */
.sidebar {
    flex: 1;
    background-color: #ffffff;
    height: 100%;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid #e1e1e1;
}

.sidebar h2 {
    margin-top: 0;
    color: #222;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    border-bottom: 5px solid #37d48d;
    padding-bottom: 10px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 15px;
}

.sidebar-button {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    background-color: #37d48d; /* Blue color */
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-align: center;
    font-size: 0.9em;
}

.sidebar-button:hover {
    background-color: #a6a6a6; /* Darker blue for hover */
    transform: translateY(-2px);
  }
  
.sidebar-button:active {
    background-color: #a6a6a6; /* Even darker blue for active state */
    transform: translateY(1px);
  }

/* Responsive styles */
/* Estilos para pantallas de hasta 768px (tabletas y dispositivos más pequeños) */
@media (max-width: 768px) {
    .content-section {
        display: flex;
        flex-direction: column; /* Apila el contenido y la barra lateral verticalmente */
        gap: 20px; /* Espacio entre el contenido principal y la barra lateral */
        padding: 10px; /* Padding reducido para pantallas pequeñas */
        width: 100%; /* Asegura que el contenedor use el ancho completo */
        box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho */
    }

    .main-content,
    .sidebar {
        width: 100%; /* Ancho completo para ambas secciones */
        box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho */
    }

    .main-content {
        margin-bottom: 20px; /* Margen inferior para separación del contenido principal */
    }

    .main-content h1 {
        font-size: 1.5em; /* Tamaño de fuente ajustado para el título */
        margin: 0 0 15px; /* Ajusta el margen inferior para separación del texto */
        color: #222; /* Color de texto para mejor contraste */
    }

    .main-content p {
        font-size: 1em; /* Tamaño de fuente ajustado para el texto */
        line-height: 1.6; /* Aumenta el interlineado para mejorar la legibilidad */
        margin: 0; /* Elimina el margen para un ajuste más limpio */
    }

    .main-image {
        width: 100%; /* Asegura que la imagen ocupe el ancho completo */
        max-width: 100%; /* Asegura que la imagen no se expanda más allá del contenedor */
        height: auto; /* Mantiene la relación de aspecto de la imagen */
        margin: 20px 0; /* Espacio vertical alrededor de la imagen */
    }

    .sidebar {
        margin-top: 20px; /* Margen superior para separación de la barra lateral */
        padding: 20px; /* Padding adicional para un espacio más cómodo */
        background-color: #f9f9f9; /* Color de fondo más claro para la barra lateral */
        border-radius: 8px; /* Bordes redondeados para un aspecto más moderno */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para resaltar la barra lateral */
    }

    .sidebar h2 {
        font-size: 1.4em; /* Tamaño de fuente ajustado para el título */
        margin: 0 0 15px; /* Margen inferior para separación de la lista */
        color: #333; /* Color de texto para mejor contraste */
    }

    .sidebar ul {
        padding: 0; /* Elimina el padding de la lista */
        list-style: none; /* Elimina los puntos de la lista */
        margin: 0; /* Elimina el margen para un ajuste más limpio */
    }

    .sidebar ul li {
        margin-bottom: 12px; /* Margen inferior entre los elementos de la lista */
        font-size: 0.9em; /* Tamaño de fuente ajustado para los elementos de la lista */
    }

    .sidebar-button {
        display: block;
        width: 100%; /* Ancho completo para los botones */
        padding: 12px; /* Padding adicional para un tamaño más cómodo */
        font-size: 0.9em; /* Tamaño de fuente ajustado para los botones */
        text-align: center; /* Centra el texto dentro del botón */
        color: #ffffff; /* Color del texto del botón */
        background-color: #007bff; /* Color de fondo del botón */
        border-radius: 5px; /* Bordes redondeados para el botón */
        text-decoration: none; /* Elimina el subrayado del texto del botón */
        transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
    }

    .sidebar-button:hover {
        background-color: #0056b3; /* Color de fondo más oscuro para el estado hover */
        transform: translateY(-2px); /* Efecto de elevación al pasar el ratón sobre el botón */
    }

    .sidebar-button:active {
        background-color: #004494; /* Color de fondo aún más oscuro para el estado activo */
        transform: translateY(1px); /* Efecto de depresión al hacer clic en el botón */
    }
}









/* SELECTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT */



/* Sección de acordeón */
.accordion-section {
    margin-top: 20px;
    width: 100%; /* Ocupa todo el ancho del contenedor */
    max-width: 800px; /* Establece un ancho máximo para mayor control */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho total */
}

/* Elemento del acordeón */
.accordion-item {
    margin-bottom: 10px;
}

/* Botón del acordeón */
.accordion-button {
    background-color: #9fa7ad; /* Grey color */
    color: #ffffff; /* Texto blanco para buen contraste */
    padding: 15px;
    width: 100%;
    border: none; /* Sin borde para un diseño limpio */
    border-radius: 0; /* Bordes redondeados para un diseño moderno */
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
}

.accordion-button:hover {
    background-color: #37d48d; /* Color azul profesional */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada en hover */
}

/* Icono del acordeón */
.accordion-button::after {
    content: '▼'; /* Flecha hacia abajo */
    font-size: 18px;
    color: #ffffff;
    margin-left: 10px;
    transition: transform 0.3s ease; /* Transición suave para la rotación */
}

/* Estado activo del botón */
.accordion-button.active::after {
    content: '▲'; /* Flecha hacia arriba */
    transform: rotate(180deg); /* Rota la flecha cuando está activo */
}

/* Contenido del acordeón */
.accordion-content {
    display: none;
    padding: 15px;
    border: 1px solid #ddd; /* Borde sutil para definición */
    border-radius: 8px; /* Bordes redondeados para un diseño moderno */
    background-color: #ffffff; /* Fondo blanco para el contenido */
    margin-top: 5px;
    color: #333; /* Color de texto oscuro para contraste */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
}

/* Contenido visible del acordeón */
.accordion-content.show {
    display: block; /* Muestra el contenido cuando está activo */
}



/* ABAJO DEL HEADERRRRRRRRRRRRRRRRRRRRRRRR*/

.container1 {
    background-image: url('../images/servicios/corporativo.jpg'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir completamente el contenedor */
    background-position: center; /* Centra la imagen de fondo dentro del contenedor */
    padding: 20px; /* Espacio de relleno opcional para separar el contenido del borde */
    height: 100vh; /* Altura del contenedor igual al 100% de la altura de la ventana (viewport height) */
    display: flex; /* Utiliza flexbox para centrar el contenido verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */

}

.hero-title {
    color: #ffffff; /* Color blanco para el texto */
    text-align: center; /* Alineación centrada */
    font-size: clamp(3rem, 5vw, 6rem); /* Tamaño de fuente adaptable, entre 3rem y 6rem */
    line-height: 1.2; /* Ajusta el espaciado entre líneas para mejorar la legibilidad */
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8); /* Sombra más sutil y profunda */
    font-family: 'Poppins', sans-serif; /* Fuente moderna y profesional */
    padding: 30px 20px; /* Espaciado interno más equilibrado */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)); /* Fondo con gradiente más pronunciado */
    border-radius: 20px; /* Bordes más redondeados para un diseño más moderno */
    margin: 0 auto; /* Centra el título horizontalmente en su contenedor */
    max-width: 90%; /* Limita el ancho máximo para mantener el diseño equilibrado */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra para un efecto de profundidad */
    position: relative; /* Necesario para aplicar el efecto de sombra del texto */
}



@media (max-width: 768px) {
    .container1 {
        height: auto; /* Ajusta la altura automáticamente para adaptarse al contenido */
        min-height: 40vh; /* Mayor altura mínima para mejorar el equilibrio visual */
        padding: 20px; /* Espaciado interno adecuado para pantallas más pequeñas */
        box-sizing: border-box; /* Incluye padding y borde en el tamaño total del contenedor */
    }
  
    .hero-title {
        font-size: clamp(1.4rem, 3.5vw, 2rem); /* Tamaño de fuente más reducido para mejorar la legibilidad */
        padding: 10px 20px; /* Ajusta el padding para mantener el texto espacioso sin ser demasiado estrecho */
        max-width: 85%; /* Reduce el ancho máximo para evitar que el texto se expanda demasiado */
        margin: 0 auto; /* Centra el título horizontalmente */
        text-align: center; /* Alineación centrada del texto */
        line-height: 1.4; /* Mejora el espaciado entre líneas para facilitar la lectura */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra de texto más sutil para mejorar la legibilidad sin ser abrumadora */
    }
  }