@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*************************************************************************************
    DESIGN TOKENS — paleta oficial UTDT Desarrollo Profesional
**************************************************************************************/
:root {
    --utdt-turquesa:      #2ECABB;  /* primario: acentos, fondos, hover */
    --utdt-turquesa-btn:  #00CEBB;  /* fondo de botones generales */
    --utdt-turquesa-top:  #00D2BB;  /* barra superior */
    --utdt-teal-ink:      #12776E;  /* derivado: texto/iconos sobre superficies claras */
    --utdt-teal-dark:     #0C5A54;  /* derivado: hover de superficies turquesas */
    --utdt-magenta:       #E31E93;  /* bordes decorativos (hr, hero, video) */
    --utdt-magenta-h2:    #F80096;  /* números de stats */
    --utdt-azul-suave:    #7DAFD3;
    --utdt-menta:         #CEF3EF;  /* fondo de sección Actividades */
    --utdt-gris-bg:       #EBEAEA;  /* fondo de banda de sección */
    --utdt-texto:         #414042;  /* texto de cards y títulos de sección */
    --utdt-texto-2:       #626262;
    --utdt-borde:         #D1D5DA;
    --utdt-gris-suave:    #999999;
    --utdt-overlay:       #111111;  /* overlay de video / fondo del hero */
}

/*************************************************************************************
    BASE
**************************************************************************************/
body *{font-family: 'Montserrat', sans-serif; font-size: 14px;}
h1, h2, h3, h4, h5, h6{font-family: 'Montserrat', sans-serif !important;}

.background-primary > *, .background-primary > * > *{background-color: var(--utdt-turquesa) !important;}
.background-secondary > *, .background-secondary > * > *{background-color: #000 !important;}
.background-primary-transparent{background-color: rgba(46, 202, 187, 0.7) !important;}
.background-secondary-transparent{background-color: rgba(0, 0, 0, 0.7) !important;}
.background-secondary-transparent > *, .background-secondary-transparent > * > *{background-color: rgba(0, 0, 0, 0.7) !important;}
.background-grey-transparent{background-color: rgba(72, 72, 72, 0.7) !important;}
.background-grey-light, .background-grey-light > *, .background-grey-light > * > *{background-color: #bcc2c6 !important;}

/*************************************************************************************
    HEADER — blanco sólido, un único botón de sesión
**************************************************************************************/
.navbar-default{border-bottom: none;}
#header{background-color: #fff; text-transform: inherit !important;}
#header .logo-utdt{max-width: 120px; margin: 0;}
.lower-logo{margin-left: -5px;}

/* Todo el header en una sola escala: mismo tamaño de fuente para links y botones,
   y centrado vertical de los <li> para que no queden escalonados. */
#header .navbar-nav{align-items: center;}
.navbar-default .navbar-nav>li>a{font-weight: 600; font-size: 15px; line-height: 22.5px; color: var(--utdt-texto);}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{color: var(--utdt-teal-ink); background-color: transparent;}
.navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:hover, .navbar-default .navbar-nav>.show>a:focus,
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{color: var(--utdt-teal-ink); background-color: #fff;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{border: none;}

.navbar-default .navbar-nav>li .dropdown-menu{background-color: #fff;}
.navbar-default .navbar-nav>li .dropdown-menu>li>a{color: var(--utdt-teal-ink);}
.navbar-default .navbar-nav>li .dropdown-menu>li>a:hover, .navbar-default .navbar-nav>li .dropdown-menu>li>a:focus{color: var(--utdt-teal-dark); background-color: transparent;}

/* Botón "Iniciar sesión": turquesa de marca con texto blanco, como la maqueta.
   Decisión de marca tomada por el cliente: el contraste es ~2:1 y no cumple WCAG AA. */
.navbar-default .navbar-nav>li>a.login{
    background: var(--utdt-turquesa-btn);
    border: 2px solid var(--utdt-turquesa-btn) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 22px !important;
}
.navbar-default .navbar-nav>li>a.login:hover, .navbar-default .navbar-nav>li>a.login:focus{
    background: var(--utdt-teal-ink);
    border-color: var(--utdt-teal-ink) !important;
    color: #fff !important;
}

/* Botón "Empleadores": outline turquesa, secundario respecto de "Iniciar sesión".
   El borde va en el turquesa de marca, pero el texto en --utdt-teal-ink: el turquesa
   puro sobre blanco mide ~1,9:1 y no se leería (distinto del botón sólido, donde es fondo). */
.navbar-default .navbar-nav>li>a.portalCompany{
    background: transparent !important;
    border: 2px solid var(--utdt-turquesa-btn) !important;
    color: var(--utdt-teal-ink) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 22px !important;
    border-radius: 0;
    margin: 0 10px 0 0 !important;
}
.navbar-default .navbar-nav>li>a.portalCompany:hover, .navbar-default .navbar-nav>li>a.portalCompany:focus{
    background: var(--utdt-turquesa-btn) !important;
    border-color: var(--utdt-turquesa-btn) !important;
    color: #fff !important;
}

@media (min-width: 768px) and (max-width: 1199px){
    .nav>li>a{padding-left: 7px; padding-right: 7px;}
}

/*************************************************************************************
    HERO — video full-bleed + overlay + texto centrado
**************************************************************************************/
.utdt-hero{position: relative; overflow: hidden; border-bottom: 6px solid var(--utdt-magenta);}

.utdt-hero__slide{
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--utdt-overlay); /* último fallback si fallan video y poster */
}

.utdt-hero__video{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
/* El video es una clase con mucha luz: el overlay se refuerza al centro para que
   el texto blanco mantenga contraste sobre los frames más claros. */
.utdt-hero__overlay{
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(17, 17, 17, 0.62) 0%, rgba(17, 17, 17, 0.48) 100%);
    z-index: 1;
}

.utdt-hero__content{position: relative; z-index: 2; text-align: center; padding: 60px 20px; color: #fff; max-width: 900px;}
.utdt-hero__title{font-weight: 700; font-size: clamp(34px, 6vw, 64px); line-height: 1.05; color: #fff; margin: 0 0 14px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);}
.utdt-hero__subtitle{font-weight: 400; font-size: clamp(16px, 2.2vw, 24px); line-height: 1.35; color: #fff; margin: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);}

@media (max-width: 767px){
    .utdt-hero__slide{min-height: 320px;}
    .utdt-hero__content{padding: 40px 18px;}
}

/*************************************************************************************
    STATS — número grande en magenta y descripción debajo
**************************************************************************************/
.utdt-stats{background-color: #fff; padding: 48px 0;}

.utdt-stat{display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 24px;}
.utdt-stat__icon{font-size: 32px; line-height: 1; color: var(--utdt-magenta-h2); margin-bottom: 12px;}
.utdt-stat__value{
    font-weight: 700;
    font-size: clamp(34px, 4vw, 46px);
    line-height: 1.1;
    color: var(--utdt-magenta-h2);
    margin-bottom: 10px;
}
.utdt-stat__label{font-size: 17px; line-height: 1.35; color: var(--utdt-texto); max-width: 300px;}

@media (max-width: 767px){
    .utdt-stat{padding: 14px 12px;}
}

/*************************************************************************************
    SECCIONES — título común y estado vacío
**************************************************************************************/
.utdt-section-title{
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    color: var(--utdt-texto);
    text-align: center;
    margin: 0 0 32px;
}
.utdt-empty{text-align: center; color: var(--utdt-texto-2); font-size: 16px; margin: 0; padding: 8px 0 16px;}

/*************************************************************************************
    BÚSQUEDAS DESTACADAS — carrusel de ofertas
**************************************************************************************/
.utdt-jobs{background-color: var(--utdt-gris-bg); padding: 56px 0;}
.utdt-jobs .utdt-jobs__track{margin-bottom: 0;}
.utdt-jobs__item{padding: 10px 12px;}

.utdt-job{
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    padding: 24px 18px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 250px;
}
.utdt-job__logo{height: 78px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;}
.utdt-job__logo img{max-height: 70px; max-width: 160px; object-fit: contain;}

.utdt-job__title{font-size: 17px; font-weight: 500; text-align: center; line-height: 1.3; margin: 0 0 18px; flex-grow: 1;}
.utdt-job__title a{color: var(--utdt-texto); text-decoration: none;}
.utdt-job__title a:hover{color: var(--utdt-teal-ink); text-decoration: none;}

.utdt-job__arrow{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f1f1;
    color: var(--utdt-teal-ink);
    font-size: 17px;
    transition: background-color .2s ease, color .2s ease;
}
.utdt-job__arrow:hover, .utdt-job__arrow:focus{background: var(--utdt-teal-ink); color: #fff;}

/* Flechas del carrusel de ofertas (fuera de las cards, como en la maqueta) */
.utdt-jobs .slick-list{margin: 0 40px;}
.utdt-jobs .utdt-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--utdt-texto);
    font-size: 24px;
    z-index: 2;
}
.utdt-jobs .utdt-arrow:hover{color: var(--utdt-teal-ink);}
.utdt-jobs .slick-prev.utdt-arrow{left: 0;}
.utdt-jobs .slick-next.utdt-arrow{right: 0;}
.utdt-jobs .utdt-arrow:before{content: none;}
.utdt-jobs .slick-track{display: flex;}
.utdt-jobs .slick-slide{height: auto;}
.utdt-jobs .slick-slide > div{height: 100%;}

@media (max-width: 767px){
    .utdt-jobs .slick-list{margin: 0 28px;}
}

/*************************************************************************************
    PRÓXIMAS ACTIVIDADES — skin del partial compartido rq-card
**************************************************************************************/
.utdt-events{background-color: #fff; padding: 56px 0;}
.utdt-events .rq-card{background-color: #fff; border: 1px solid var(--utdt-borde); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);}
.utdt-events .rq-card__title a{color: var(--utdt-texto);}
.utdt-events .rq-card__title a:hover{color: var(--utdt-teal-ink);}
.utdt-events .rq-card__meta{color: var(--utdt-texto-2);}
.utdt-events .rq-card__footer{border-top: 1px solid var(--utdt-borde);}

/* El CTA del partial es un .btn-primary; en la maqueta es un link tipo "Leer más" */
.utdt-events .rq-card__actions .btn{
    background: transparent !important;
    border: none !important;
    color: var(--utdt-teal-ink) !important;
    font-weight: 600;
    padding: 0;
    text-align: left;
    width: auto !important;
}
.utdt-events .rq-card__actions .btn:hover{color: var(--utdt-teal-dark) !important; text-decoration: underline;}

/*************************************************************************************
    EMPRESAS QUE TRABAJAN CON NOSOTROS — carrusel de logos
**************************************************************************************/
.utdt-companies{background-color: #fff; padding: 20px 0 56px;}
/* El partial compartido es un .container-fluid: lo acoto al ancho del contenido
   para que las flechas queden junto a los logos y no pegadas al borde del viewport. */
.utdt-companies .slide-companies{max-width: 1320px; margin-left: auto; margin-right: auto;}

.slide-companies{position: relative;}
.slide-companies .slide-content{height: 80px; display: flex; align-items: center; justify-content: center;}
.slide-companies .slide-content img{max-height: 70px; max-width: 165px; object-fit: contain;}
/* alumni_styles (alumni.css.twig) aplica grayscale a los logos; la maqueta los pide en color */
.slide-companies .slide img{filter: none;}
.slide-companies .slick-list{margin: 0 44px;}
.slide-companies .slick-prev, .slide-companies .slick-next{width: 34px; height: 34px; z-index: 2;}
.slide-companies .slick-prev{left: 0;}
.slide-companies .slick-next{right: 0;}
.slide-companies .slick-prev:before, .slide-companies .slick-next:before{content: none;}
.slide-companies .companies-arrow{background: transparent; border: none; color: var(--utdt-texto); font-size: 24px; padding: 0;}
.slide-companies .companies-arrow:hover{color: var(--utdt-teal-ink);}
.slide-companies .slick-disabled.companies-arrow{opacity: .3; pointer-events: none;}
.slick-slider{margin-bottom: 0;}

@media (max-width: 767px){
    .slide-companies .slick-list{margin: 0 32px;}
    .slide-companies .slide-content{height: 60px;}
    .slide-companies .slide-content img{max-height: 50px;}
}

/*************************************************************************************
    FOOTER — banda turquesa de marca con texto blanco, como la maqueta.
    Decisión de marca tomada por el cliente: el contraste blanco sobre #2ECABB
    es ~2:1 y no cumple WCAG AA.
**************************************************************************************/
#footer.utdt-footer{background: var(--utdt-turquesa); color: #fff; padding: 44px 0 36px; position: relative;}
.utdt-footer__title{font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 20px;}
.utdt-footer__line{font-size: 15px; line-height: 1.6; color: #fff; margin-bottom: 8px;}
.utdt-footer__line i{width: 22px; text-align: center; margin-right: 6px; font-size: 16px;}
.utdt-footer__line a{color: #fff; text-decoration: none;}
.utdt-footer__line a:hover{color: #fff; text-decoration: underline;}

.utdt-footer__social{margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.4); display: flex; flex-wrap: wrap; gap: 24px;}
.utdt-footer__social a{color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;}
.utdt-footer__social a:hover{color: #fff; text-decoration: underline;}
.utdt-footer__social i{font-size: 18px; margin-right: 6px;}

.copyright{background: #000; filter: brightness(80%);}
a.footer_link{color: #fff; font-size: 1rem; font-weight: 250; line-height: 120%; display: inline-block; margin-bottom: 8px !important;}
a.footer_link:hover{color: var(--utdt-turquesa); transition: color 0.3s ease;}
.footer_link i{font-size: 1.5rem; margin-right: 3px;}

/*************************************************************************************
    TRANSVERSALES — clases que consumen templates compartidos fuera de la home.
    No las usa la home nueva, pero sí showCarouselVideo, las noticias destacadas
    y las vistas de comunidad. No borrar.
**************************************************************************************/
.hero{position: relative; width: 100%; margin-bottom: 50px; min-height: 350px;}
.hero__media{width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
.hero__media-image, .hero__media-image--mobile{position: absolute; display: block; min-width: 100%; height: auto; min-height: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: -2;}
.hero__media--align-bottom .hero__media-image, .hero__media--align-bottom .hero__media-image--mobile{top: auto; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.hero__media--align-top .hero__media-image, .hero__media--align-top .hero__media-image--mobile{top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.hero__content{position: absolute; bottom: 0; left: 25px; right: 25px; padding-bottom: 1rem; color: #fff;}
@media (min-width: 768px){
    .hero__media-image--mobile{display: none;}
}
@media (min-width: 992px){
    .hero h2{font-size: 44px;}
    .hero__content{padding-bottom: 2rem;}
}

.btn-border-bottom{background: var(--utdt-teal-ink); border-bottom: 4px solid var(--utdt-teal-ink); color: #fff; display: block; font-size: 12px; padding: 20px 0;}
.btn-border-bottom .text-header{font-size: 20px; font-weight: bold;}
.btn-border-bottom i{font-size: 70px;}
.btn-border-bottom:hover{color: #000 !important; background-color: #f4f3f3; text-decoration: none;}
.btn-border-bottom.no-hover:hover{color: #000 !important; background: #f4f3f3 !important;}

.community .box .icon .fas, .community .box .icon .fab, .community .box .icon .far{color: var(--utdt-texto); font-size: 45px; border: none !important;}
.community .box .titulo{color: var(--utdt-texto);}

#featuredNewsCarousel .carousel-inner .cuadrotrans{width: 100%;}
#featuredNewsCarousel .carousel-inner .carousel-item .item-image h1{margin-top: 0;}
#featuredNewsCarousel .carousel-inner .cuadrotrans h1{margin-top: 0; color: #fff; text-transform: uppercase; margin-bottom: 10px; font-size: 22px;}
#featuredNewsCarousel .carousel-inner .cuadrotrans h2{color: #fff; font-size: 16px;}
@media (max-width: 767px){
    #featuredNewsCarousel .carousel-inner .cuadrotrans{padding: 20px; margin-top: 20px;}
    #featuredNewsCarousel .carousel-inner .cuadrotrans h1{font-size: 20px;}
    #featuredNewsCarousel .carousel-inner .carousel-item .item-image{height: 180px;}
}
@media (min-width: 768px) and (max-width: 991px){
    #featuredNewsCarousel .carousel-inner .cuadrotrans{padding: 40px; margin-top: 60px;}
    #featuredNewsCarousel .carousel-container{height: 450px;}
    #featuredNewsCarousel .carousel-caption{bottom: 50px;}
    #featuredNewsCarousel .carousel-inner .carousel-item .item-image{height: 300px;}
}
@media (min-width: 992px){
    #featuredNewsCarousel .carousel-inner .cuadrotrans{padding: 40px; margin-top: 80px;}
    #featuredNewsCarousel .carousel-container{height: 550px;}
    #featuredNewsCarousel .carousel-caption{bottom: 125px;}
    #featuredNewsCarousel .carousel-inner .carousel-item .item-image{height: 450px;}
}