/* Estilo para la imagen del exterior de la empresa */
.imagen-superior-empresa {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: unset;
    height: 350px;
    opacity: 0;
    animation: fadeInUp 2.9s ease-out forwards;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    z-index: 1;
}

/* Centrar los elementos <h2> */
.pagina-empresa h2 {
    text-align: center;
    margin: 20px 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #4A4A4A;
    z-index: 2;
    position: relative;
}

/* Estilo moderno para el <h1> */
.pagina-empresa h1 {
    color: #2C3E50;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    text-align: center;
    z-index: 2;
    position: relative;
}

/* Imagen de fondo para el párrafo de valores */
.fondo-parrafo-valores {
    background-image: url('/images/empresa/valores-2.jpg');
    background-size: cover; /* Cubre el fondo del párrafo */
    background-repeat: no-repeat;
    color: white;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;

    /* Nuevos estilos para hacerlo más alto y ancho */
    min-height: 450px;
    width: 100%; /* Ocupa todo el ancho de su contenedor */
    display: flex; /* Para centrar el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}

.fondo-parrafo-valores p {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px 20px; /* Aumenta el padding para más espacio alrededor del texto */
    border-radius: 5px;
    text-align: left; /* Alinea el texto a la izquierda */
}

.fondo-parrafo-valores ul {
    color: white;
    font-size: 18px;
    margin-left: 50px;
    border: 1px solid #ccc;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 25px; /* Aumenté el padding según tu último código */
    border-radius: 5px;
    margin-top: 20px; /* Añade margen superior */
}

/* Estilos para la sección de valores (tarjetas) */
.valores-wrapper-full {
    width: 100%;
    padding: 4rem 2rem;
    background-image: url('/images/fondos/white_brick_wall-800x600.jpg'); /* Fondo de ladrillos blancos */
    background-size: cover;
    background-color: #f8f9fa; /* Color de respaldo si la imagen no carga */
}

.valores-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1600px;
    margin: 0 auto;
    gap: 2rem;
}

.valor {
    flex: 1 1 200px;
    min-width: 250px;
    max-width: 300px;
    background: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
    padding: 1.5rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Borde sutil */
}

.valor h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.valor p {
    color: #666;
    font-size: 1em;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 768px) {
    .valor {
        width: 80%;
        margin: 10px auto;
    }
}




/* Estilos para las tarjetas de la página de empresa */
.card-empresa {
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem; /* Espacio entre tarjetas */
}

.card-empresa .card-body {
    padding: 2rem;
}

.card-empresa .card-title {
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.75em;
    font-weight: bold;
    margin-bottom: 1.5rem; /* Más espacio debajo del título dentro de la tarjeta */
    line-height: 1.3;
}

.card-empresa .card-text {
    color: #555;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 1rem; /* Espacio entre párrafos dentro de la tarjeta */
}

.card-empresa .card-text:last-child {
    margin-bottom: 0; /* Elimina el margen inferior del último párrafo en la tarjeta */
}

.card-empresa em {
    font-style: italic;
    color: #007bff;
}