/* Tipografías de marca UPC servidas desde S3 (reqlut-images/upc/fonts/).
   UPC entregó solo el corte Bold de cada una, por eso las familias se declaran dos veces
   (normal y bold) sobre el mismo archivo: así el navegador no le suma negrita sintética
   encima de una fuente que ya es bold. Mismo patrón que toulouse3.css con Trocchi.
   El texto corrido sigue en Zilla Slab (Google) porque necesita pesos ligeros que Zizou
   Slab Bold no puede dar; Zizou queda para los textos destacados cortos.
   El @import va primero: la spec lo exige antes de cualquier otra at-rule salvo @charset
   y @layer, y si queda después de un @font-face el navegador lo descarta entero. */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: 'Solano Gothic';
    src: url('https://reqlut2.s3.sa-east-1.amazonaws.com/reqlut-images/upc/fonts/SolanoGothicMVB-Bd.otf') format('opentype');
    font-display: swap;
}
@font-face {
    font-family: 'Solano Gothic';
    font-weight: bold;
    src: url('https://reqlut2.s3.sa-east-1.amazonaws.com/reqlut-images/upc/fonts/SolanoGothicMVB-Bd.otf') format('opentype');
    font-display: swap;
}
@font-face {
    font-family: 'Zizou Slab';
    src: url('https://reqlut2.s3.sa-east-1.amazonaws.com/reqlut-images/upc/fonts/Zizou%20Slab-Bold_0.otf') format('opentype');
    font-display: swap;
}
@font-face {
    font-family: 'Zizou Slab';
    font-weight: bold;
    src: url('https://reqlut2.s3.sa-east-1.amazonaws.com/reqlut-images/upc/fonts/Zizou%20Slab-Bold_0.otf') format('opentype');
    font-display: swap;
}

body *{font-family: 'Zizou Slab', Georgia, serif;}
h1, h2, h3, h4, h5, h6{font-family: 'Solano Gothic', sans-serif !important; text-transform: uppercase;}

/* Paleta UPC: primario #e50a17, oscuro #b30812, hover #8a060e, secundario gris #333333 */
.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(179, 8, 18, 0.5) !important;}
.background-secondary{background-color: #333333 !important;}
.background-secondary, .background-secondary > *, .background-secondary > * > *{background-color: #333333 !important;}
.background-secondary-transparent{background-color: rgba(51, 51, 51, 0.7) !important;}

/*************************************************************************************
    BUTTONS
**************************************************************************************/
.btn{border-radius: 25px !important; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500; font-size: 15px;}
.btn-outline-primary, .btn-outline-primary:focus{background-color: #fff; color: #e50a17; border-color: #e50a17; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
.btn-outline-primary:hover { background-color: #fff; color: #b30812; border-color: #e50a17; 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; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
.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: #e50a17; border-color: #e50a17; }

.btn-secondary{background-color: #333333; border-color: #333333; color: #fff; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
.btn-secondary:hover{background-color: #333333; border-color: #333333; 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; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
.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: #b30812; border-color: #b30812; border-width: 2px; padding: 5px 12px; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
.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: #333333; border-color: #333333; border-width: 2px; padding: 5px 12px; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
.btn-alumni-secondary:hover, .btn-alumni-secondary:active{filter: brightness(120%); transition: border 0.3s ease, background 0.3s ease; color: #fff;}

.btn-success, .btn-success:focus{border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
#filters .btn-success:hover,
#filters .btn-success:active{color: #fff !important; background-color: #e50a17; border-color: #e50a17; border-width: 2px; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active{color: #fff; background-color: #e50a17; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
.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; font-weight: 500;}

#job_offer .btn-success{background-color: #b30812; color: #fff; border-color: #b30812; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
#job_offer .btn-success:hover, #job_offer .btn-success:active{background-color: #8a060e; color: #fff !important; border-color: #8a060e;}

.btn-info{color: #fff; background-color: #b30812; border-color: #b30812; border-radius: 25px; box-shadow:0 4px 8px rgba(0,0,0,0.1); font-weight: 500;}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .show.dropdown-toggle.btn-info{background-color: #8a060e; border-color: #8a060e; 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. Igualamos especificidad para fijar
   el hover en el rojo oscuro, sin depender de lo que tenga la DB. */
.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: #8a060e; border-color: #8a060e;}
#login_modal .modal-content .btn-info:hover, #login_modal .modal-content .btn-info:active{color: #fff; background-color: #8a060e; border-color: #8a060e;}

/* el CSS dinámico deja este hover en portal.colorSecondary (gris): lo fijamos al rojo oscuro */
.job_offer_list .info .apply:hover, .job_offer_list .info .apply:active{color: #fff !important; background-color: #b30812; border-color: #b30812;}


/*************************************************************************************
    HEADER
**************************************************************************************/

:root{--upc-red: #e50a17;} /* en :root, no en #header: las clases .login/.portalCompany también se usan fuera del header */
#header{background: #fff !important; padding-top: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid #e6e6e6;}

/* Brand: wordmark de texto + separador + isotipo */
#header .navbar-brand{padding: 0; margin-right: 0;}
#header .brand-wordmark{font-family: 'Solano Gothic', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: 1; color: #111; font-size: 30px;}
#header .brand-sep{display: inline-block; width: 2px; height: 26px; background: var(--upc-red); margin: 0 12px;}
#header .logo-upc{height: 34px; width: auto; margin: 0;}
#header .lower-logo{display: none !important;}

/* Menú */
#header .navbar-nav .nav-link{font-family: 'Solano Gothic', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #111; font-size: 18px; padding-left: 14px; padding-right: 14px;}
#header .navbar-nav .nav-link:hover, #header .navbar-nav .nav-link:focus{color: var(--upc-red);}
#header .navbar-nav .nav-item.active > .nav-link{color: var(--upc-red);}
#header .dropdown-toggle .caret{color: var(--upc-red);}
#header .dropdown-toggle::after{color: var(--upc-red);}

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

/* Acciones (login / empresa) */
#header .header-actions{display: flex; align-items: center; gap: 10px;}
#header a.nav-link.login, a.login,
#header a.nav-link.portalCompany, a.portalCompany{border: 2px solid var(--upc-red) !important; border-radius: 25px !important; color: #fff !important; padding: 8px 18px !important; background-color: var(--upc-red) !important; font-size: 15px;}
#header a.nav-link.login:hover, a.login:hover,
#header a.nav-link.portalCompany:hover, a.portalCompany:hover{color: var(--upc-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 .header-actions{justify-content: flex-start; padding: 10px 14px 0;}
    #header .navbar-nav{padding-left: 0;}
}
@media (max-width: 767px) {
    #header .brand-wordmark{font-size: 20px;}
    #header .brand-sep{height: 18px; margin: 0 8px;}
    #header .logo-upc{height: 24px;}
}
@media (min-width: 767px) and (max-width: 1150px) {
    .align-center-container{justify-content: flex-end !important; padding-right: 100px;}
}

/*************************************************************************************
    HOME — HERO
**************************************************************************************/
/* La altura la fijaba alumni.css.twig:331/340/349 con `height` en px (500/400/350), lo que
   recortaba el banner 1920x600 en cualquier ancho. Esa hoja la comparten ~90 portales alumni,
   así que no se toca: se repite acá el mismo selector (misma especificidad) y gana por orden
   de fuente, porque upc1.css carga después (base.html.twig:184 vs :186).
   min-height:0 desactiva el piso propio, que si no volvería a ganar en pantallas angostas.
   El color de fondo es el respaldo si la imagen de S3 falta o tarda: el titular es blanco.
   vertical-align: top mata la franja del color de fondo que asomaba bajo el hero: alumni.css.twig:355
   deja el .item-image en display:inline-block y su baseline reservaba 10px (5px con la altura vieja). */
#featuredNewsCarousel .carousel-inner .carousel-item .item-image{height: auto; min-height: 0; aspect-ratio: 1920 / 600; vertical-align: top; background-color: #2b2b2b;}
#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;}
/* 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. El !important del font-family es por la regla global de encabezados (línea 7). */
#featuredNewsCarousel .carousel-inner .carousel-item .item-image .carousel-caption h1{font-family: 'Solano Gothic', sans-serif !important; font-weight: 900; text-transform: uppercase; color: #fff; font-size: 46px; line-height: 1.1; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.45);}

@media (max-width: 991px){
    #featuredNewsCarousel .carousel-caption{padding: 0 30px;}
    #featuredNewsCarousel .carousel-inner .carousel-item .item-image .carousel-caption h1{font-size: 34px;}
}
/* Bajo 768px el 3.2:1 deja una franja de ~117px: el titular no entra. Se pasa a 16:9. */
@media (max-width: 767px){
    #featuredNewsCarousel .carousel-inner .carousel-item .item-image{aspect-ratio: 16 / 9;}
}
@media (max-width: 575px){
    #featuredNewsCarousel .carousel-inner .carousel-item .item-image .carousel-caption h1{font-size: 26px;}
}

/*************************************************************************************
    HOME — RITMO VERTICAL
**************************************************************************************/
/* Entre la última tarjeta de una sección y el título de la siguiente había ~110px:
   15px de .news-grid-item + 15px de .news-latest-section (content.css:6866 y :7204,
   1.5rem con el root en 10px de bootstrap.css:1072) + pb40 + mt40 de la sección siguiente.
   Los helpers son !important, así que no se pueden pisar desde acá: se les quitó la clase
   en el Twig y el ritmo se controla con .upc-home-section. Queda en ~47px. */
.upc-home-section{margin-top: 24px; padding-bottom: 8px;}
.upc-home-section .news-latest-section{margin-bottom: 0;}
/* Eventos no envuelve en .content-feature: su aire propio sale de content.css:6428 */
.upc-home-section .events-grid-section{padding-top: 0;}

/*************************************************************************************
    HOME — BLOQUE MISC (egresados destacados)
**************************************************************************************/
/* text-transform: none explícito — sin él gana el `h1..h6 {text-transform: uppercase}` global de la línea 35 */
.upc-misc-home__title{font-family: 'Solano Gothic', sans-serif; font-weight: 900; text-transform: none; color: #222; font-size: 30px; line-height: 1.15;}
.upc-misc-home__text{color: #555; font-size: 15px;}
.upc-misc-home__cta{border: 2px solid var(--upc-red); border-radius: 25px; background-color: var(--upc-red); color: #fff; padding: 8px 18px; font-size: 15px;}
.upc-misc-home__cta:hover{background-color: #fff; color: var(--upc-red);}

/* Slick no iguala alturas: los slides flotan y toman la altura de su propio texto.
   Con el track en flex, los slides en height:auto y la tarjeta al 100%, el
   .misc-card__content (que ya es flex:1) estira el gris hasta el borde inferior.
   La regla de la tarjeta sirve para los dos modos del misc: carrusel y grilla. */
.upc-misc-home .slick-track{display: flex;}
.upc-misc-home .slick-slide{height: auto;}
.upc-misc-home .misc-card{height: 100%;}
/* min-width:0 — sin esto la columna no puede encogerse por debajo del ancho del
   .slick-track (la suma de todos los slides) y la fila la manda abajo del texto. */
.upc-misc-home > .row > .col{min-width: 0;}
/* upc1.css tiene un `.align-center-container{padding-right:100px}` entre 767 y 1150px
   (más abajo en el archivo) que era código muerto: ningún template de Upc usaba la clase.
   Al ponérsela a esta fila se despierta y correría las tarjetas 100px. Se anula acá. */
.upc-misc-home > .align-center-container{padding-right: 0;}
/* El fragmento del misc abre con .container-fluid.content-feature, que trae
   padding-top:30px de main.css y baja las tarjetas respecto del título. */
.upc-misc-home .content-feature{padding-top: 0;}

/* El bloque de tarjetas llega al mismo borde que el resto del home: se le quitan los 12px
   del .col-12 interno, los 50px que el carrusel reservaba para las flechas y los 8px de
   gutter del primer y último slide (70px por lado).
   :has(.misc-carousel) acota el quite de padding al modo slide — en modo grid ese .col-12
   contiene una .row con márgenes negativos y las tarjetas se saldrían del container. */
.upc-misc-home #lazzy_misc .col-12:has(.misc-carousel){padding-left: 0; padding-right: 0;}
.upc-misc-home .misc-carousel{padding: 0 0 46px;}
.upc-misc-home .slick-list{margin-left: -8px; margin-right: -8px;}

/* Flechas debajo del carrusel, alineadas a la derecha. A los costados no entran: entre el
   párrafo de la izquierda y la primera tarjeta quedan 34px libres y la flecha mide 36, así
   que pisaría el texto o habría que robarle ancho a las tarjetas.
   Se resetean top y transform porque slick-theme.css las centra con translate(0,-50%) y
   alumni.css.twig:703 les mete un top:70% global (es para el carrusel de logos de empresas
   y se fuga a todo el portal).
   Los selectores llevan 3 clases a propósito: el <style> de lazzyMiscs.html.twig se inyecta
   por AJAX y queda después en el DOM, así que a igual especificidad ganaría él. */
.upc-misc-home .misc-carousel .slick-prev,
.upc-misc-home .misc-carousel .slick-next{top: auto; bottom: 0; transform: none;}
/* !important porque main.css:853 fija .slick-prev{left:0 !important} — es la única
   forma de soltar el anclaje izquierdo y poder alinear la flecha por la derecha. */
.upc-misc-home .misc-carousel .slick-prev{left: auto !important; right: 48px;}
.upc-misc-home .misc-carousel .slick-next{right: 0;}

/*************************************************************************************
    HOME — ¿QUÉ OFRECEMOS?
**************************************************************************************/
/* margen inferior corto a propósito: la maqueta pide poco aire entre el título y las imágenes */
.upc-section-title{font-family: 'Solano Gothic', sans-serif !important; font-weight: 900; text-transform: uppercase; color: #222; font-size: 32px; line-height: 1; border-left: 6px solid var(--upc-red); padding-left: 18px; margin: 0 0 20px 0;}
.upc-section-title__link{float: right; font-family: 'Zizou Slab', serif; font-weight: 500; text-transform: none; font-size: 16px; color: var(--upc-red); margin-top: 6px;}
.upc-section-title__link:hover{color: #b30812;}

.upc-offer__link{display: block; text-decoration: none;}
/* max-width: las imágenes son 1920x1080 y la columna da ~555px; UPC las pidió más chicas (medida provisional) */
.upc-offer__image{width: 100%; height: auto; display: block; max-width: 440px; margin-left: auto; margin-right: auto;}
.upc-offer__title{font-family: 'Solano Gothic', sans-serif !important; font-weight: 900; text-transform: uppercase; color: var(--upc-red); font-size: 26px; line-height: 1.1; margin: 16px 0 8px;}
.upc-offer__link:hover .upc-offer__title{text-decoration: underline;}
.upc-offer__lead{color: #333; font-size: 16px; margin-bottom: 10px;}

.upc-offer__list{list-style: none; padding-left: 0; margin-bottom: 0;}
/* la viñeta es el isotipo, servido desde el bucket variable: va como <img> en el Twig, no en el CSS */
.upc-offer__list li{position: relative; padding-left: 26px; margin-bottom: 10px; color: #333; font-size: 15px; break-inside: avoid;}
.upc-offer__bullet{position: absolute; left: 0; top: 2px; width: 14px; height: auto;}
@media (min-width: 768px){
    .upc-offer__list{column-count: 2; column-gap: 24px;}
}
@media (max-width: 767px){
    .upc-section-title{font-size: 24px; padding-left: 14px;}
    .upc-offer__title{font-size: 22px;}
}

/*************************************************************************************
    HOME — PREGUNTAS FRECUENTES
**************************************************************************************/
/* es la última sección antes del footer: los 8px de .upc-home-section dejan los botones pegados */
.upc-faq{padding-bottom: 40px;}
.upc-faq__image{width: 100%; height: auto; display: block;}
.upc-faq__list{list-style: none; padding-left: 0; margin: 0;}
.upc-faq__list li{margin: 0 0 14px 0; color: #555; font-size: 16px; line-height: 1.5;}
.upc-faq__note{color: #333; font-size: 16px; line-height: 1.5; margin: 18px 0 0 0;}
.upc-faq__actions{display: flex; gap: 24px; flex-wrap: wrap; margin-top: 28px;}
/* mismo pill que .upc-misc-home__cta: .btn ya trae el radio de 25px y la sombra */
.upc-faq__cta{border: 2px solid var(--upc-red); background-color: var(--upc-red); color: #fff; padding: 8px 18px; font-size: 15px;}
.upc-faq__cta:hover{background-color: #fff; color: var(--upc-red);}

@media (max-width: 767px){
    .upc-faq__list li, .upc-faq__note{font-size: 15px;}
    /* apilados y a ancho completo: en fila no entran dos etiquetas de este largo */
    .upc-faq__actions{flex-direction: column; gap: 14px;}
    .upc-faq__cta{padding: 12px 18px;}
}

/*************************************************************************************
    FOOTER
**************************************************************************************/
#footer{color: #333; background: #fff; position: relative; border-top: 1px solid #e6e6e6;}
.upc-footer__seal{max-height: 70px; width: auto;}
.upc-footer__book{font-size: 34px; color: #111; transition: color .25s ease;}
/* el ícono y el label van dentro de un <a>, pero tienen color propio por clase: el hover se marca acá */
#footer a:hover .upc-footer__book{color: var(--upc-red);}
.upc-footer__book-label{color: var(--upc-red); font-size: 12px; font-weight: 700; margin: 6px 0 0;}
.upc-footer__address{color: #333; font-size: 15px; line-height: 1.4; margin-bottom: 4px;}
.upc-footer__phone{color: var(--upc-red);}
/* !important en text-decoration: main.css trae `a{text-decoration:none !important}` */
#footer a.upc-footer__link{display: block; color: #333; font-size: 15px; text-decoration: underline !important; margin-bottom: 6px;}
#footer a.upc-footer__link:hover{color: var(--upc-red); text-decoration: underline !important;}

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

/*************************************************************************************
    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;}
}