@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

:root{
    --ibague-logo: #003D7C; /* azul del logo institucional */
    --ibague-navy: #014182;
    --ibague-navy-dark: #002245;
    --ibague-blue: #056BD6;
    --ibague-green: #1bb4b6;       /* turquesa de marca: solo superficies */
    --ibague-teal-text: #127b7c;   /* mismo tono, legible sobre blanco (5.06:1) */
    --ibague-purple: #8a358b;
    --ibague-admin: #15427e;
    --ibague-bg: #f2f5fa;
    --ibague-border: #e3e8f2;
}

body {font-family: 'Figtree', sans-serif; color: #3f4658 !important; background-color: #fff;}
h1, h2, h3, h4, h5 {color: var(--ibague-navy);}

.color-primary{color: var(--ibague-navy) !important;}
.color-secondary{color: var(--ibague-blue) !important;}
.color-light{color: var(--ibague-bg) !important;}

.background-primary-transparent{background-color: rgb(1 65 130 / 72%) !important;}
.background-secondary-transparent{background-color: rgb(5 107 214 / 70%) !important;}
.background-secondary-transparent > *, .background-secondary-transparent > * > *{background-color: rgba(5, 107, 214, 0.7) !important;}
.background-primary-light-transparent{background-color: rgba(1, 65, 130, 0.08) !important;}
.background-light{background-color: var(--ibague-bg) !important;}
.background-primary > *, .background-primary > * > *{background-color: var(--ibague-navy) !important;}
.background-secondary, .background-secondary > *, .background-secondary > * > *{background-color: var(--ibague-blue) !important;}
.background-grey-light > *, .background-grey-light > * > *{background-color: #eaeaea !important;}
.heading-block h1 {font-weight: 700 !important;}
.slide-companies .slide img{filter: none;}

/*************************************************************************************
    BUTTONS
**************************************************************************************/
.btn{border-radius: 8px !important; box-shadow: none; font-weight: 600;}

.btn-primary, .btn-primary:focus{color: #fff; background-color: var(--ibague-blue); border-color: var(--ibague-blue); border-radius: 8px;}
.btn-primary:hover, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .show>.dropdown-toggle.btn-primary{color: #fff !important; background-color: var(--ibague-navy); border-color: var(--ibague-navy);}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary{color: #888 !important; background-color: #ccc; border-color: #ccc;}

.btn-outline-primary, .btn-outline-primary:focus{background-color: #fff; color: var(--ibague-navy); border-color: var(--ibague-navy); border-radius: 8px;}
.btn-outline-primary:hover{background-color: var(--ibague-navy); color: #fff; border-color: var(--ibague-navy); transition: border .3s ease, background .3s ease;}
.btn-outline-primary:disabled{color: #888 !important; background-color: #ccc; border-color: #ccc;}

.btn-secondary{background-color: var(--ibague-navy); border-color: var(--ibague-navy); color: #fff; border-radius: 8px;}
.btn-secondary:hover{filter: brightness(120%); transition: border .3s ease, background .3s ease; color: #fff;}

.btn-transparent, .btn-transparent:focus{color: #fff; background-color: #0000004d; border-color: #fff; border-radius: 8px;}
.btn-transparent:hover, .btn-transparent.focus, .btn-transparent:active, .btn-transparent.active{color: var(--ibague-navy) !important; background-color: #ffffffe6; border-color: #ffffffe6;}

.btn-alumni{color: #fff; background-color: var(--ibague-blue); border-color: var(--ibague-blue); border-width: 2px; padding: 5px 12px; border-radius: 8px; font-weight: 600;}
.btn-alumni:hover, .btn-alumni:active{color: #fff !important; background-color: var(--ibague-navy); border-color: var(--ibague-navy); border-width: 2px;}
.btn-alumni:disabled{color: #888; background-color: #ccc; border-color: #ccc;}

.btn-alumni-secondary{color: #fff; background-color: var(--ibague-navy); border-color: var(--ibague-navy); border-width: 2px; padding: 5px 12px; border-radius: 8px; font-weight: 600;}
.btn-alumni-secondary:hover, .btn-alumni-secondary:active{filter: brightness(120%); transition: border .3s ease, background .3s ease; color: #fff;}

.btn-success, .btn-success:focus{border-radius: 8px; font-weight: 600;}
#filters .btn-success:hover, #filters .btn-success:active{color: #fff !important; background-color: var(--ibague-navy); border-color: var(--ibague-navy);}

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active{color: #fff; background-color: var(--ibague-blue); border-radius: 8px;}

#job_offer .btn-success{background-color: var(--ibague-blue); color: #fff; border-color: var(--ibague-blue); border-radius: 8px;}
#job_offer .btn-success:hover, #job_offer .btn-success:active{background-color: var(--ibague-navy); color: #fff !important; border-color: var(--ibague-navy);}

.btn-info{color: #fff; background-color: var(--ibague-blue); border-color: var(--ibague-blue); border-radius: 8px; font-weight: 600;}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .show>.dropdown-toggle.btn-info{background-color: var(--ibague-navy); border-color: var(--ibague-navy); color: #fff !important;}
.btn-info:disabled{color: #888; background-color: #ccc; border-color: #ccc;}

.job_offer_list .info .apply:hover, .job_offer_list .info .apply:active{color: #fff !important;}

/*************************************************************************************
    HEADER
**************************************************************************************/
#header{background-color: #fff; border-bottom: 1px solid var(--ibague-border); box-shadow: 0 2px 10px rgba(1, 65, 130, .06); padding: 8px 0;}

/* Brand: logo institucional + separador + rótulo del portal */
#header .navbar-brand{display: flex; align-items: center; gap: 18px; padding: 0;}
#header .logo-ibague{max-width: 260px; max-height: 62px;}
#header .brand-divider{width: 2px; height: 42px; background-color: var(--ibague-logo);}
#header .brand-label{color: var(--ibague-logo); font-size: 19px; font-weight: 700; white-space: nowrap; text-transform: none !important;}
#header .lower-logo{color: var(--ibague-navy);}

/* Menú principal */
#header .navbar-nav .nav-link{color: var(--ibague-navy) !important; font-size: 15px; font-weight: 600; text-transform: none !important; padding: 8px 14px !important; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease;}
#header .navbar-nav .nav-link:hover, #header .navbar-nav .nav-link:focus{color: var(--ibague-blue) !important; border-bottom-color: var(--ibague-blue);}
#header .navbar-nav .nav-link.active{color: var(--ibague-blue) !important; border-bottom-color: var(--ibague-blue);}

/* Dropdown "Cuenta" (logueado) */
#header .navbar-nav .dropdown-menu{background-color: #fff; box-shadow: 0 8px 24px rgba(1, 65, 130, .14); border: 1px solid var(--ibague-border); border-radius: 10px;}
#header .navbar-nav .dropdown-menu .dropdown-item{color: var(--ibague-navy) !important;}
#header .navbar-nav .dropdown-menu .dropdown-item:hover, #header .navbar-nav .dropdown-menu .dropdown-item:focus{background-color: var(--ibague-bg); color: var(--ibague-blue) !important;}

/* Acciones (deslogueado) */
.header-actions{display: flex; align-items: center; gap: 12px;}
.btn-header{display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; font-size: 14px; font-weight: 600; border-radius: 8px; text-decoration: none; white-space: nowrap; text-transform: none !important; transition: background-color .2s ease, color .2s ease;}
.btn-header--outline{color: var(--ibague-navy) !important; background-color: #fff; border: 1.5px solid var(--ibague-navy);}
.btn-header--outline:hover{color: #fff !important; background-color: var(--ibague-navy);}
.btn-header--solid{color: #fff !important; background-color: var(--ibague-navy); border: 1.5px solid var(--ibague-navy);}
.btn-header--solid:hover{color: #fff !important; background-color: var(--ibague-blue); border-color: var(--ibague-blue);}

@media (max-width: 1199px){
    #header .navbar-nav{padding: 10px 0;}
    #header .navbar-nav .nav-link{display: inline-block; border-bottom: none;}
    .header-actions{align-items: stretch; flex-direction: column; margin-top: 10px;}
    .btn-header{justify-content: center;}
}
@media (max-width: 767px){
    #header .navbar-brand{gap: 10px;}
    #header .logo-ibague{max-width: 180px;}
    #header .brand-label{font-size: 15px;}
}

/*************************************************************************************
    HERO / CAROUSEL
**************************************************************************************/
/* Altura común: evita el salto entre el hero y los slides de noticia (foto full-bleed) */
#featuredNewsCarousel .carousel-item{min-height: 460px;}
#featuredNewsCarousel .item-image{height: 460px; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;}

.ibague-hero{position: relative; overflow: hidden; background-color: var(--ibague-bg); min-height: 460px; display: flex; align-items: center;}
/* Halo suave detrás del texto */
.ibague-hero::before{content: ""; position: absolute; top: -30%; left: -10%; width: 45%; height: 130%; background: radial-gradient(ellipse at center, rgba(5, 107, 214, .10) 0%, transparent 68%); pointer-events: none;}
/* Trama de puntos: franja baja y ancha. Con el hero en 460px y el título en 4 líneas, el
   bloque de 120px que había antes se cruzaba con el texto; ahora vive en el espacio libre
   bajo la reglita. Alto y ancho son múltiplos de 14px (el paso de la trama) para que no
   quede una fila de puntos cortada al borde. */
.ibague-hero-dots{position: absolute; left: 24px; bottom: 28px; width: 154px; height: 42px; background-image: radial-gradient(circle, var(--ibague-blue) 2px, transparent 2px); background-size: 14px 14px; opacity: .35; z-index: 0;}
.ibague-hero .container{position: relative; z-index: 1;}

.ibague-hero-copy h1{font-size: 54px; font-weight: 800; line-height: 1.12; color: var(--ibague-navy); margin: 0; max-width: 420px;}
.ibague-hero-copy h1 span{color: var(--ibague-blue);}
.ibague-hero-rule{display: block; width: 62px; height: 3px; background-color: var(--ibague-green); margin-top: 28px;}

/* Ocupa el 58% derecho: sale del .container para llegar al borde de la ventana.
   El max-width existe porque el .container deja de crecer en 1320px y en pantallas
   ultra-anchas se despega del borde izquierdo mientras un 58% seguiría creciendo; sin
   tope, el texto quedaría bajo la foto pasados los ~2850px.
   Los max-* de la img neutralizan a .slide img (185x80) de ibague_alumni.css: Bootstrap
   marca el carousel como .slide y ese selector alcanza la foto del hero. */
.ibague-hero-visual{position: absolute; top: 0; right: 0; bottom: 0; width: 58%; max-width: 1400px;}
.ibague-hero-visual img{width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover;}

/* La foto se mide sobre la ventana y el texto sobre el .container (más angosto y centrado).
   Bajo 1200px el container casi iguala a la ventana y un 58/42 ahogaría al título, así que
   ahí vuelve a mitades exactas, donde ambos bordes coinciden solos. */
@media (min-width: 992px) and (max-width: 1199px){
    .ibague-hero-visual{width: 50%;}
}

@media (max-width: 991px){
    #featuredNewsCarousel .carousel-item{min-height: 0;}
    #featuredNewsCarousel .item-image{height: 340px;}
    /* Sin foto queda solo el texto: 320px evitan que el bloque se vea aplastado */
    .ibague-hero{min-height: 320px; padding: 40px 0;}
    .ibague-hero-copy h1{font-size: 34px;}
    .ibague-hero-rule{margin-top: 20px;}
    .ibague-hero-visual{display: none;} /* solo el texto sobre el fondo neutro */
    .ibague-hero-dots{width: 112px; height: 28px; left: 16px; bottom: 16px;}
}

/*************************************************************************************
    ACCESOS POR PERFIL
**************************************************************************************/
.ibague-accesos{padding: 60px 0;}
.acceso-card{position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #fff; border: 1px solid var(--ibague-border); border-bottom: 4px solid var(--ibague-blue); border-radius: 14px; padding: 36px 28px 32px; box-shadow: 0 8px 24px rgba(1, 65, 130, .08); transition: transform .25s ease, box-shadow .25s ease;}
.acceso-card:hover{transform: translateY(-6px); box-shadow: 0 18px 36px rgba(1, 65, 130, .14);}

.acceso-card-icon{display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background-color: var(--ibague-blue); color: #fff; font-size: 30px; margin-bottom: 22px;}
.acceso-card-title{font-size: 23px; font-weight: 700; color: var(--ibague-blue); margin: 0;}
.acceso-card-rule{display: block; width: 54px; height: 3px; background-color: var(--ibague-blue); margin: 14px 0 18px;}
.acceso-card-btn{display: inline-flex; align-items: center; gap: 12px; margin-top: auto; padding: 11px 30px; border-radius: 8px; background-color: var(--ibague-blue); color: #fff !important; font-weight: 600; text-decoration: none; transition: filter .2s ease;}
.acceso-card-btn:hover{filter: brightness(112%);}
.acceso-card-btn i{transition: transform .2s ease;}
.acceso-card-btn:hover i{transform: translateX(4px);}

/* Descripción: ocupa su espacio siempre (altura de tarjeta constante) y solo se revela */
.acceso-card-desc{font-size: 15px; line-height: 1.5; color: #3f4658; margin: 0 0 26px; opacity: 0; transition: opacity .25s ease;}
.acceso-card:hover .acceso-card-desc, .acceso-card:focus-within .acceso-card-desc{opacity: 1;}

.acceso-card--admin{border-bottom-color: var(--ibague-admin);}
.acceso-card--admin .acceso-card-icon, .acceso-card--admin .acceso-card-rule, .acceso-card--admin .acceso-card-btn{background-color: var(--ibague-admin);}
.acceso-card--admin .acceso-card-title{color: var(--ibague-admin);}

/* El turquesa de marca queda en las superficies; el texto usa el tono oscuro legible */
.acceso-card--student{border-bottom-color: var(--ibague-green);}
.acceso-card--student .acceso-card-icon, .acceso-card--student .acceso-card-rule{background-color: var(--ibague-green);}
.acceso-card--student .acceso-card-btn{background-color: var(--ibague-teal-text);}
.acceso-card--student .acceso-card-title{color: var(--ibague-teal-text);}
/* Este botón oscurece en vez de aclarar: el brightness(112%) de la base lo dejaba en 4.17:1 */
.acceso-card--student .acceso-card-btn:hover{filter: brightness(90%);}

.acceso-card--company{border-bottom-color: var(--ibague-purple);}
.acceso-card--company .acceso-card-icon, .acceso-card--company .acceso-card-rule, .acceso-card--company .acceso-card-btn{background-color: var(--ibague-purple);}
.acceso-card--company .acceso-card-title{color: var(--ibague-purple);}

@media (max-width: 767px){
    .ibague-accesos{padding: 36px 0;}
    .acceso-card{padding: 30px 22px 26px;}
    .acceso-card-title{font-size: 20px;}
    .acceso-card-desc{opacity: 1;} /* en táctil no hay hover */
}

/*************************************************************************************
    EMPRESAS ALIADAS
**************************************************************************************/
.ibague-empresas{padding: 10px 0 60px;}
.ibague-empresas-title{font-size: 26px; font-weight: 700; color: var(--ibague-blue); margin-bottom: 6px;}
.ibague-empresas .slide-companies{background-color: #fff; border: 1px solid var(--ibague-border); border-radius: 14px; padding: 10px 0;}
.ibague-empresas .slide-companies img{max-height: 70px; width: auto; margin: 0 auto;}

@media (max-width: 767px){
    .ibague-empresas{padding: 0 0 36px;}
    .ibague-empresas-title{font-size: 21px;}
}

/*************************************************************************************
    FOOTER
**************************************************************************************/
#footer{color: #fff; background-color: var(--ibague-navy-dark); border-top: none; padding: 52px 0 44px;}
#footer p, #footer strong, #footer span, #footer a{color: #fff;}
#footer .footer-heading{color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 22px;}

#footer .footer-contact{list-style: none; padding: 0; margin: 0;}
#footer .footer-contact li{display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 15px; line-height: 1.45;}
#footer .footer-contact i{color: #fff; font-size: 16px; margin-top: 3px; flex-shrink: 0;}
#footer .footer-contact a{text-decoration: none;}
#footer .footer-contact a:hover{text-decoration: underline;}

#footer .footer-social{display: flex; gap: 14px;}
#footer .footer-social a{display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #fff; font-size: 17px; transition: background-color .2s ease, color .2s ease;}
#footer .footer-social a:hover{background-color: #fff; color: var(--ibague-navy-dark) !important;}

#footer .footer-legal{text-align: right; font-size: 15px; line-height: 1.6;}

@media (max-width: 991px){
    #footer{padding: 40px 0 32px; text-align: center;}
    #footer .footer-contact li{justify-content: center;}
    #footer .footer-social{justify-content: center;}
    #footer .footer-legal{text-align: center; margin-top: 24px;}
}

.copyright{background-color: #001a34;}
a.footer_link{color: #c6cde0; padding: 2px 0; display: inline-block;}
a.footer_link:hover{color: #fff;}
.footer_column p, .footer_column a{color: #c6cde0;}