/* Bebas Neue: display (títulos, nav, botones). Roboto Slab: cuerpo.
   Ambas son las fuentes del sitio institucional alumni.upc.edu.pe. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Slab:wght@300;400;600;700&display=swap');

body *{font-family: 'Roboto Slab', Georgia, serif;}
/* Bebas Neue no tiene minúsculas: solo va en display, nunca en el cuerpo */
h1, h2, h3, h4, h5, h6{font-family: 'Bebas Neue', 'Roboto Slab', sans-serif !important; text-transform: uppercase; letter-spacing: .02em;}

/* Paleta Alumni UPC (tomada del sitio institucional): rojo #e50a17, morado #250c52, texto #3a3a3a */
:root{
    --upcalumni-red: #e50a17;
    --upcalumni-red-dark: #b30812;
    --upcalumni-red-darker: #8a060e;
    --upcalumni-purple: #250c52;
    --upcalumni-purple-light: #3a1a72;
    --upcalumni-text: #3a3a3a;
    --upcalumni-surface: #f2f2f2;
}

.background-primary{background-color: #e50a17 !important;}
.background-primary > *{background-color: #e50a17 !important;}
.background-primary-transparent{background-color: rgba(229, 10, 23, 0.7) !important;}
.background-primary-light{background-color: #b30812 !important;}
.background-primary-light-transparent{background-color: rgba(37, 12, 82, 0.55) !important;}
.background-secondary{background-color: #250c52 !important;}
.background-secondary, .background-secondary > *, .background-secondary > * > *{background-color: #250c52 !important;}
.background-secondary-transparent{background-color: rgba(37, 12, 82, 0.7) !important;}

/*************************************************************************************
    BUTTONS
**************************************************************************************/
.btn{border-radius: 4px !important; box-shadow: none; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .06em;}
.btn-outline-primary, .btn-outline-primary:focus{background-color: #fff; color: #e50a17; border-color: #e50a17;}
.btn-outline-primary:hover { background-color: #fff; color: #b30812; border-color: #b30812; transition: border 0.3s ease, background 0.3s ease; }
.btn-outline-primary:disabled {color: #888 !important; background-color: #ccc; border-color: #ccc;}

.btn-primary, .btn-primary:focus{color: #fff; background-color: #e50a17; border-color: #e50a17;}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .show.dropdown-toggle.btn-primary {color: #fff !important; background-color: #b30812; border-color: #b30812; }

.btn-secondary{background-color: #250c52; border-color: #250c52; color: #fff;}
.btn-secondary:hover{background-color: #3a1a72; border-color: #3a1a72; color: #fff; transition: border 0.3s ease, background 0.3s ease;}
.btn-secondary.disabled, .btn-secondary[disabled], fieldset[disabled] .btn-secondary, .btn-secondary.disabled:hover, .btn-secondary[disabled]:hover, fieldset[disabled] .btn-secondary:hover, .btn-secondary.disabled:focus, .btn-secondary[disabled]:focus, fieldset[disabled] .btn-secondary:focus, .btn-secondary.disabled.focus, .btn-secondary[disabled].focus, fieldset[disabled] .btn-secondary.focus, .btn-secondary.disabled:active, .btn-secondary[disabled]:active, fieldset[disabled] .btn-secondary:active, .btn-secondary.disabled.active, .btn-secondary[disabled].active, fieldset[disabled] .btn-secondary.active{filter: brightness(120%);}

.btn-transparent, .btn-transparent:focus{color: #fff; background-color: #0000004d; border-color: #fff;}
.btn-transparent:hover, .btn-transparent:focus, .btn-transparent.focus, .btn-transparent:active, .btn-transparent.active, .show.dropdown-toggle.btn-transparent {color: #444 !important; background-color: #ffffffab; border-color: #ffffffab; }

.btn-alumni{color: #fff; background-color: #e50a17; border-color: #e50a17; border-width: 2px; padding: 6px 18px;}
.btn-alumni:hover, .btn-alumni:active{color: #fff !important; background-color: #b30812; border-color: #b30812; border-width: 2px;}
.btn-alumni:disabled{color: #888; background-color: #ccc; border-color: #ccc;}

.btn-alumni-secondary{color: #fff; background-color: #250c52; border-color: #250c52; border-width: 2px; padding: 6px 18px;}
.btn-alumni-secondary:hover, .btn-alumni-secondary:active{filter: brightness(130%); transition: border 0.3s ease, background 0.3s ease; color: #fff;}

#filters .btn-success:hover,
#filters .btn-success:active{color: #fff !important; background-color: #e50a17; border-color: #e50a17; border-width: 2px;}

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active{color: #fff; background-color: #e50a17;}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active{color: #888 !important; background-color: #ccc; border-color: #ccc;}

#job_offer .btn-success{background-color: #e50a17; color: #fff; border-color: #e50a17;}
#job_offer .btn-success:hover, #job_offer .btn-success:active{background-color: #b30812; color: #fff !important; border-color: #b30812;}

.btn-info{color: #fff; background-color: #e50a17; border-color: #e50a17;}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .show.dropdown-toggle.btn-info{background-color: #b30812; border-color: #b30812; color: #fff !important;}
.btn-info:disabled{color: #888; background-color: #ccc; border-color: #ccc;}

/* Estos dos van con el selector completo a propósito: el CSS dinámico los define con
   más especificidad (`.bootstrap-select .btn-info:hover` y `#login_modal .modal-content
   .btn-info:hover`) usando portal.colorSecondary, que acá es el morado. Igualamos
   especificidad para que el hover quede en el rojo oscuro. */
.bootstrap-select .btn-info:hover,
.bootstrap-select .btn-info:active,
.bootstrap-select .btn-info:focus,
.bootstrap-select.show.dropdown-toggle.btn-info,
.bootstrap-select .dropdown-menu>.active>a{color: #fff; background-color: #b30812; border-color: #b30812;}
#login_modal .modal-content .btn-info:hover, #login_modal .modal-content .btn-info:active{color: #fff; background-color: #b30812; border-color: #b30812;}

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

/*************************************************************************************
    HEADER — FILA 1: top bar morado
**************************************************************************************/
.upcalumni-topbar{background-color: var(--upcalumni-purple);}
.upcalumni-topbar__inner{display: flex; align-items: center; justify-content: flex-end; gap: 26px; min-height: 48px; flex-wrap: wrap;}
.upcalumni-topbar__link,
.upcalumni-topbar__login{font-family: 'Bebas Neue', sans-serif; font-size: 21px; letter-spacing: .05em; color: #fff !important; text-decoration: none !important; white-space: nowrap;}
.upcalumni-topbar__link:hover,
.upcalumni-topbar__login:hover{color: #ffb3b8 !important;}

/* Buscador: recuadro con lupa + input inline que se ensancha al enfocar */
.upcalumni-topbar__search{display: flex; align-items: center; gap: 10px; margin: 0;}
.upcalumni-topbar__search-btn{display: flex; align-items: center; justify-content: center; width: 44px; height: 28px; padding: 0; background: transparent; border: 2px solid #fff; border-radius: 4px; color: #fff; font-size: 14px; transition: background .2s ease, color .2s ease;}
.upcalumni-topbar__search-btn:hover{background: #fff; color: var(--upcalumni-purple);}
/* ancho fijo a propósito: animar width provoca layout thrash y la maqueta muestra un campo estático */
.upcalumni-topbar__search-input{width: 150px; padding: 0; background: transparent; border: none; border-bottom: 1px solid transparent; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 21px; letter-spacing: .05em; transition: border-color .2s ease;}
.upcalumni-topbar__search-input::placeholder{color: #fff; opacity: 1;}
.upcalumni-topbar__search-input:focus{outline: none; border-bottom-color: #fff;}
/* la X nativa de type=search es negra sobre morado: se oculta */
.upcalumni-topbar__search-input::-webkit-search-cancel-button{-webkit-appearance: none; appearance: none;}

.upcalumni-topbar__account .dropdown-menu{margin-top: 6px;}
.upcalumni-topbar__login.dropdown-toggle::after{color: #fff;}

/* Accesos de usuario y de empresa: misma jerarquía, separados por una barra fina */
.upcalumni-topbar__access{display: flex; align-items: center; gap: 14px;}
.upcalumni-topbar__access > a + a{border-left: 1px solid rgba(255,255,255,.45); padding-left: 14px;}

@media (max-width: 767px){
    .upcalumni-topbar__inner{justify-content: center; gap: 16px; padding: 8px 0;}
    .upcalumni-topbar__link, .upcalumni-topbar__login, .upcalumni-topbar__search-input{font-size: 18px;}
    .upcalumni-topbar__search-input{width: 80px;}
}

/*************************************************************************************
    HEADER — FILA 2: barra blanca con logo y menú
**************************************************************************************/
#header.upcalumni-nav{background: #fff !important; padding-top: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid #e6e6e6;}

#header .navbar-brand{padding: 0; margin-right: 0;}
#header .logo-upcalumni{height: 42px; width: auto; margin: 0;}
#header .lower-logo{display: none !important;}

#header .navbar-nav .nav-link{font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #111; font-size: 23px; padding-left: 18px; padding-right: 18px;}
#header .navbar-nav .nav-link:hover, #header .navbar-nav .nav-link:focus{color: var(--upcalumni-red);}
#header .navbar-nav .nav-item.active > .nav-link{color: var(--upcalumni-red);}
#header .dropdown-toggle .caret{color: var(--upcalumni-red);}
#header .dropdown-toggle::after{color: var(--upcalumni-red);}

.dropdown-menu{background-color: #fff !important; border: 1px solid #e6e6e6; border-radius: 4px; box-shadow: 0 4px 12px rgb(0 0 0 / 8%);}
.dropdown-menu > li > a, .dropdown-menu .dropdown-item{color: #111; font-size: 15px;}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus{background-color: #f5f5f5 !important; color: var(--upcalumni-red) !important;}

/* .login/.portalCompany se usan también fuera del header (modales, páginas de cuenta) */
a.login, a.portalCompany{border: 2px solid var(--upcalumni-red) !important; border-radius: 4px !important; color: #fff !important; padding: 8px 18px !important; background-color: var(--upcalumni-red) !important; font-family: 'Bebas Neue', sans-serif; font-size: 18px;}
a.login:hover, a.portalCompany:hover{color: var(--upcalumni-red) !important; background-color: #fff !important;}

.border-rounded{border: 1px solid black; border-radius: 10px; padding: 20px;}
.shadow{box-shadow: 0 4px 5px darkgray;}

@media (max-width: 1199px) {
    #header .navbar-nav{padding-left: 0;}
    #header .navbar-nav .nav-link{padding-left: 0; padding-right: 0;}
}
@media (max-width: 767px) {
    #header .logo-upcalumni{height: 30px;}
}

/*************************************************************************************
    HOME — HERO
**************************************************************************************/
/* el color de fondo es el respaldo si la imagen de S3 falta o tarda: el titular es blanco */
#featuredNewsCarousel .item-image{min-height: 560px; background-color: var(--upcalumni-purple);}
#featuredNewsCarousel .carousel-caption{position: absolute; left: 0; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); width: 100%; max-width: 1100px; padding: 0 60px; text-align: left; background: none;}

/* El slide fijo del home va centrado, a diferencia de los slides de noticias */
#featuredNewsCarousel .carousel-caption.upcalumni-hero__caption{left: 0; right: 0; max-width: none; padding: 0 24px; text-align: center;}
/* Selector largo a propósito: el CSS dinámico /alumni/<lower>_alumni.css trae
   `#featuredNewsCarousel .carousel-inner .carousel-item .item-image h1 {font-size:22px; font-weight:300}`
   y le gana a un selector corto. */
#featuredNewsCarousel .carousel-inner .carousel-item .item-image .carousel-caption h1{font-family: 'Bebas Neue', sans-serif !important; font-weight: 400; text-transform: uppercase; color: #fff; font-size: 62px; line-height: 1; letter-spacing: .02em; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.5);}
.upcalumni-hero__lead{font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin: 14px 0 26px; text-shadow: 0 2px 10px rgba(0,0,0,.5);}
#featuredNewsCarousel .upcalumni-hero__cta{display: inline-block; background-color: var(--upcalumni-red); color: #fff !important; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 54px; text-decoration: none !important; text-shadow: none; transition: background-color .25s ease;}
#featuredNewsCarousel .upcalumni-hero__cta:hover{background-color: var(--upcalumni-red-dark);}

@media (max-width: 991px){
    #featuredNewsCarousel .item-image{min-height: 400px;}
    #featuredNewsCarousel .carousel-caption{padding: 0 30px;}
    #featuredNewsCarousel .carousel-inner .carousel-item .item-image .carousel-caption h1{font-size: 44px;}
    .upcalumni-hero__lead{font-size: 20px;}
}
@media (max-width: 575px){
    #featuredNewsCarousel .item-image{min-height: 320px;}
    #featuredNewsCarousel .carousel-inner .carousel-item .item-image .carousel-caption h1{font-size: 32px;}
    .upcalumni-hero__lead{font-size: 17px; margin-bottom: 18px;}
    #featuredNewsCarousel .upcalumni-hero__cta{font-size: 18px; padding: 10px 34px;}
}

/*************************************************************************************
    HOME — TÍTULOS DE SECCIÓN Y ENLACES "VER MÁS"
**************************************************************************************/
.upcalumni-section-title{font-family: 'Bebas Neue', sans-serif !important; font-weight: 400; text-transform: uppercase; color: #111; font-size: 42px; line-height: 1; letter-spacing: .03em; margin: 0 0 28px 0;}
/* !important en text-decoration: main.css trae `a{text-decoration:none !important}` */
a.upcalumni-more{color: #111; font-size: 15px; text-decoration: underline !important;}
a.upcalumni-more:hover{color: var(--upcalumni-red);}

@media (max-width: 767px){
    .upcalumni-section-title{font-size: 32px; margin-bottom: 20px;}
}

/*************************************************************************************
    HOME — HISTORIAS Y EVENTOS
**************************************************************************************/
/* franjas grises separadas por una banda blanca, como la maqueta */
.upcalumni-stories, .upcalumni-events{background-color: var(--upcalumni-surface); padding: 46px 0 36px;}
.upcalumni-events{margin-top: 26px;}

/* las tarjetas de misc y de evento vienen del design system: solo se les da fondo blanco y sombra suave */
.upcalumni-stories .misc-card, .upcalumni-events .rq-card{background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08);}
/* column-reverse en vez de tocar miscCard.html.twig (compartido por 12 portales):
   la maqueta pone el tag (#UPCinosQueInspiran, que es el subtítulo) ARRIBA del título */
.upcalumni-stories .misc-card__content{display: flex; flex-direction: column-reverse; justify-content: flex-end;}
.upcalumni-stories .misc-card__title{font-family: 'Roboto Slab', serif; font-size: 17px; line-height: 1.35; color: #111; margin: 0;}
.upcalumni-stories .misc-card__subtitle{font-size: 13px; color: #666; margin: 0 0 6px;}

/*************************************************************************************
    HOME — BENEFICIOS CON TU MEMBRESÍA
**************************************************************************************/
.upcalumni-benefits{margin-top: 10px;}
.upcalumni-benefits__heading{background-color: var(--upcalumni-red); color: #fff; text-align: center; font-family: 'Bebas Neue', sans-serif !important; font-size: 30px; letter-spacing: .12em; padding: 12px 20px; margin: 0;}

.upcalumni-benefits__track{margin-bottom: 0;}
.upcalumni-benefits__slide{padding: 0;}
.upcalumni-benefits__tile{position: relative; display: flex; align-items: flex-end; min-height: 430px; background-color: var(--upcalumni-purple); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden;}
/* Sin degradado: la foto se ve entera. El texto blanco se sostiene con sombra propia,
   que lo hace legible incluso sobre las fotos claras (fotografía, salud) sin taparlas. */
/* min-height fija: el body está anclado abajo, así que reservar altura hace que TODOS los
   títulos arranquen a la misma Y, tenga la descripción 1, 2 o 3 líneas (peor caso medido: 151px) */
.upcalumni-benefits__body{position: relative; width: 100%; min-height: 158px; display: flex; flex-direction: column; justify-content: flex-start; padding: 24px 24px 30px; color: #fff; text-align: center;}
.upcalumni-benefits__title{font-family: 'Bebas Neue', sans-serif !important; font-size: 27px; letter-spacing: .06em; color: #fff; margin: 0 0 8px; text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.7);}
.upcalumni-benefits__text{font-size: 13px; line-height: 1.45; color: #fff; margin: 0; text-shadow: 0 1px 5px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.8);}

/* slick: igualar alturas de los slides y flechas propias */
.upcalumni-benefits .slick-track{display: flex;}
.upcalumni-benefits .slick-slide{height: auto;}
.upcalumni-benefits .slick-slide > div{height: 100%;}
.upcalumni-benefits__arrow{position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--upcalumni-purple); font-size: 18px;}
.upcalumni-benefits__arrow:hover{background: #fff;}
.upcalumni-benefits .slick-prev.upcalumni-benefits__arrow{left: 14px;}
.upcalumni-benefits .slick-next.upcalumni-benefits__arrow{right: 14px;}
.upcalumni-benefits .upcalumni-benefits__arrow:before{content: none;}

@media (max-width: 767px){
    .upcalumni-benefits__heading{font-size: 24px; letter-spacing: .08em;}
    .upcalumni-benefits__tile{min-height: 380px;}
}
/* con un solo tile visible no hay nada que alinear: se libera la altura para que
   un texto largo no quede apretado contra el borde */
@media (max-width: 576px){
    .upcalumni-benefits__body{min-height: 0;}
}

/*************************************************************************************
    FOOTER
**************************************************************************************/
#footer.upcalumni-footer{background: var(--upcalumni-purple); color: #fff; border-top: none; position: relative;}
/* la regla global de encabezados pone uppercase: los títulos del footer van en caja normal */
#footer.upcalumni-footer .upcalumni-footer__title{font-family: 'Roboto Slab', serif !important; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 17px; color: #fff; margin: 0 0 18px;}
.upcalumni-footer__text{font-size: 15px; line-height: 1.6; color: #e8e5f0; margin-bottom: 14px;}
.upcalumni-footer__label{font-weight: 700; color: #fff;}
#footer a.upcalumni-footer__link{display: block; color: #e8e5f0; font-size: 15px; line-height: 1.5; margin-bottom: 14px; text-decoration: none !important;}
#footer a.upcalumni-footer__link:hover{color: #fff; text-decoration: underline !important;}

.upcalumni-footer__social{display: flex; gap: 16px; align-items: center;}
#footer .upcalumni-footer__social a{color: #fff; font-size: 30px; line-height: 1;}
#footer .upcalumni-footer__social a:hover{color: #ffb3b8;}

/* la franja de firma de Reqlut se mantiene oscura, y con ella los footer_link blancos */
.copyright{background: #14062e; filter: brightness(100%);}
a.footer_link{color: #fff;}
a.footer_link:hover{color: #ffb3b8;}

@media (max-width: 767px){
    #footer.upcalumni-footer .upcalumni-footer__title{margin-bottom: 12px;}
}

/*************************************************************************************
    MARKET
**************************************************************************************/
.main-content-detail li{font-size: 16px;}
.nice-list .nice-card.nice-card-border .nice-title a{color: #000; font-weight: 500;}

/*************************************************************************************
    CAROUSEL — slides de noticias destacadas
    (el hero y su caption están en la sección HOME — HERO, más arriba)
**************************************************************************************/
#featuredNewsCarousel .carousel-inner h2, #featuredNewsCarousel .carousel-inner h3, #featuredNewsCarousel .carousel-inner a{color: #fff; font-size: 24px; text-shadow: 1px 1px #444;}
@media (min-width: 768px) and (max-width: 991px){
    .carousel-indicators{bottom: 0;}
}