.hero-lcai{

height:600px;
background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url('../img/slider5.jpg');

background-size:cover;
background-position:top;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
color:white;

}

.hero-texto h1{

font-size:40px;
margin-bottom:10px;

}

.logo {
    display: flex;
    align-items: center; /* Alinea verticalmente la imagen con el texto */
    gap: 5px;           /* Espacio entre el logo y el texto */
}

.logo img {
    height: 110px;        /* Ajusta el tamaño de tu logo aquí */
    width: auto;         /* Mantiene la proporción original */
}

/* SECCIONES */

.contenedor{

width:90%;
max-width:1200px;
margin:auto;

}

.info-derecho,
.perfil,
.perfil-egreso,
.campo-laboral,
.titulacion{

padding:70px 0;

}



/* LISTAS */

.perfil ul,
.perfil-egreso ul{

margin-top:20px;

}

.perfil li,
.perfil-egreso li{

margin-bottom:10px;

}



/* GRID LABORAL */

.grid-laboral{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

gap:20px;

margin-top:30px;

}

.grid-laboral div{

background:#1E3A8A;
color:white;
padding:20px;
text-align:center;
border-radius:8px;

}

/* EFECTO DE ELEVACIÓN Y SOMBRA PARA GRID LABORAL */
.grid-laboral div {
    transition: all 0.3s ease; /* Hace que el cambio sea suave */
    cursor: pointer;          /* Cambia el cursor al pasar por encima */
}

.grid-laboral div:hover {
    transform: translateY(-10px);              /* Eleva el bloque 10px */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Aplica la sombra al elevarse */
    background-color: #1a3075 !important;      /* Opcional: oscurece un poco el azul al pasar el mouse */
}

/* TITULACION */

.grid-titulacion{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:30px;

}

.grid-titulacion div{

background:#f5f5f5;
padding:25px;
border-radius:10px;

}



/* CTA */

.cta-derecho{

background:#1E3A8A;
padding:60px;
text-align:center;
color:white;

}

.btn-info{

display:inline-block;
margin-top:20px;

background:#D62828;
color:white;

padding:12px 25px;

text-decoration:none;

border-radius:5px;

}

/* EFECTO DE ILUMINACIÓN PARA EL BOTÓN */
.btn-info {
    transition: all 0.3s ease; /* Asegura que el cambio sea suave */
}

.btn-info:hover {
    background-color: #ff3333; /* Un rojo un poco más claro para "iluminar" */
    filter: brightness(1.2);    /* Aumenta el brillo un 20% adicional */
    transform: scale(1.05);    /* Un ligero zoom para dar sensación de interacción */
    box-shadow: 0 4px 15px rgba(214, 40, 40, 0.4); /* Sombra para resaltar */
}



/* PERFIL TABS */

.perfil-tabs{

padding:70px 0;
background:#f5f7fb;

}

.titulo-seccion{

text-align:center;
font-size:34px;
color:#1E3A8A;
margin-bottom:40px;

}

/* BOTONES */

.tabs{

display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin-bottom:30px;

}

.tab-btn{

background:#eee;
border:none;
padding:12px 25px;
font-size:16px;
cursor:pointer;
border-radius:6px;
transition:.3s;

}

.tab-btn:hover{

background:#D62828;
color:white;

}

.tab-btn.active{

background:#1E3A8A;
color:white;

}

/* CONTENIDO */

.tab-content{

display:none;
max-width:700px;
margin:auto;

}

.tab-content.active{

display:block;

}

.tab-content ul{

padding-left:20px;

}

.tab-content li{

margin-bottom:10px;
font-size:16px;

}

/* --- AJUSTE PARA DISPOSITIVOS MÓVILES (NUEVO) --- */
@media (max-width: 768px) {
    .navbar {
        height: 70px;
    }

    .hero-lcai {
        margin-top: 70px !important;
        height: auto;
        padding: 60px 20px;
    }

    .hero-texto h1 {
        font-size: 28px;
    }

    .grid-laboral, .grid-titulacion {
        grid-template-columns: 1fr; /* Una sola columna en celulares */
    }

    .tabs {
        flex-direction: column;
        width: 100%;
    }

    .tab-btn {
        width: 100%;
    }
}

/* EFECTO HOVER PARA OPCIONES DE TITULACIÓN */
.grid-titulacion div {
    transition: all 0.3s ease; /* Suaviza la transición */
    cursor: pointer;
}

.grid-titulacion div:hover {
    transform: translateY(-10px); /* Eleva el bloque al pasar el mouse */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Sombra elegante */
    background-color: #ffffff !important; /* Mantiene el fondo limpio al elevarse */
}