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

/* --- Variables de Color --- */
:root {
    --primary-blue-dark: #222536; /* Azul oscuro principal, usado en el fondo del hero */
    --text-color: #333333; /* Color de texto general */
    --light-grey-bg: #f8f9fa; /* Fondo gris claro */
    --bootstrap-primary: #0d6efd; /* Azul de Bootstrap para el badge */
    --white: #ffffff;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    background-color: var(--light-grey-bg);
}

/* --- Hero Section - Grupo CC --- */
.grupo-cc-hero {
    min-height: 600px; /* Ajusta la altura según sea necesario */
    background-color: var(--primary-blue-dark); /* Color de fallback si la imagen no carga */
    position: relative;
}

.hero-bg-image {
    object-position: center bottom; /* Asegura que la parte superior del edificio sea visible */
    opacity: 0.3; /* Ajusta la opacidad de la imagen de fondo */
}

.hero-background-overlay {
    background-color: rgba(34, 37, 54, 0.75); /* Oscurece la imagen de fondo */
    z-index: 0; /* Asegura que la superposición esté detrás del contenido */
}

.grupo-cc-hero .container {
    padding-top: 100px; /* Ajusta el padding superior para centrar */
    padding-bottom: 100px; /* Ajusta el padding inferior para centrar */
}

.grupo-cc-hero .hero-logo {
    height: 70px; /* Tamaño del logo del grupo CC */
    filter: brightness(0) invert(1); /* Si el logo es oscuro, lo hace blanco */
}

.grupo-cc-hero .lead-text {
    font-size: 1.1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.8); /* Texto más claro para contraste */
}

.grupo-cc-hero h2 {
    color: var(--white);
    line-height: 1.3;
}

.fa-solid, .fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    margin-right: 20px;
}
/* --- Companies List Section --- */
.companies-list {
    background-color: var(--light-grey-bg);
    padding-top: 60px;
    padding-bottom: 80px;
}

.companies-list .card {
    background-color: var(--white);
    border-radius: 15px !important; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.companies-list .card-header .badge {
    background-color: var(--primary-blue-dark) !important; /* Fondo del badge oscuro */
    border-radius: 50px;
    font-size: 0.85em;
    padding: 0.5em 1.2em !important;
}

.list-group-item a {
text-decoration: none;

}
.company-items .list-group-item {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* Separador suave */
    transition: background-color 0.3s ease;
}


.company-items .list-group-item:first-child {
    border-top: none; /* Elimina el borde superior del primer elemento */
}

.company-items .list-group-item:hover {
    background-color: var(--light-grey-bg); /* Resaltar al pasar el ratón */
    cursor: pointer;
}

.company-logo {
    height: 35px; /* Tamaño de los logos de las empresas */
    width: 35px;
    object-fit: contain;
}

.company-name {
    font-size: 1.1em;
    color: var(--text-color);
}

.company-items .fa-arrow-right {
    color: var(--text-secondary-light); /* Color de las flechas */
    font-size: 1.1em;
}

.contencard {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* --- Footer Grupo CC --- */
.grupo-cc-footer {
    background-color: var(--white) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: var(--text-secondary-light);
    padding-top: 25px;
    padding-bottom: 25px;
}

.grupo-cc-footer a {
    color: var(--text-secondary-light);
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
}

.grupo-cc-footer a:hover {
    text-decoration: underline;
}
.mt-n1 {
  margin-top: 0.75rem !important;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) { /* Tablets y pantallas medianas */
    .grupo-cc-hero {
        min-height: 500px;
    }
    .grupo-cc-hero h2 {
        font-size: 2.5rem;
    }
    .grupo-cc-hero .lead-text {
        font-size: 1rem;
    }
    .hero-logo {
        height: 60px;
    }

    .companies-list {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    .company-items .list-group-item {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .company-logo {
        height: 30px;
        width: 30px;
    }
    .company-name {
        font-size: 1em;
    }
}

@media (max-width: 767.98px) { /* Móviles y pantallas pequeñas */
    .grupo-cc-hero {
        min-height: 400px;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .grupo-cc-hero h2 {
        font-size: 2rem;
    }
    .grupo-cc-hero .lead-text {
        font-size: 0.9rem;
    }
    .hero-logo {
        height: 50px;
    }

    .companies-list {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    .companies-list .card {
        padding: 15px !important;
    }
    .companies-list .card-header .badge {
        font-size: 0.75em;
    }
    .company-logo {
        height: 28px;
        width: 28px;
    }
    .company-name {
        font-size: 0.9em;
    }
}