/* =====================================================================
   facultades2026.css
   Estilos mínimos para portadas de facultad sobre Bootstrap 5.3.3
   (el mismo Bootstrap que usa inicio.html).
   Reemplaza a: /mk/prontus_unap/facultades/css/bootstrap.css (BS 3.3.4)
                /mk/prontus_unap/css/bootstrap.min.css      (BS 3 modificado)
                /prontus_unap/css/facultades.css            (plantilla W3layouts)
                /mk/prontus_unap/facultades/css/flexslider.css
                /mk/prontus_unap/facultades/css/font-awesome.css
   Solo contiene las reglas que realmente usan las portadas de facultad,
   con los valores medidos sobre la página actual en producción.
   ===================================================================== */

/* ---------- Base (valores heredados del BS3 modificado + facultades.css) ---------- */
html { font-size: 10px; }                  /* igual que inicio.html; footer_2020 usa rem */
body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 1.6em; color: #046dab; background: #fff; }
a { color: #337ab7; text-decoration: none; transition: .5s all; }
a:hover, a:focus { color: #23527c; text-decoration: none; outline: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: inherit; font-weight: normal; line-height: normal; color: #024e6a; }
p { margin: 0; }
ul, label { margin: 0; padding: 0; }
.responsive-img, .img-responsive { display: block; max-width: 100%; height: auto; }
.img-hover:hover { opacity: .8; }          /* venía del BS3 modificado (/mk/.../bootstrap.min.css) */
.clearfix { clear: both; }

/* ---------- Grilla: mismos anchos y gutter que tenía Bootstrap 3 ----------
   BS5 usa 540/720/960/1140/1320 y gutter 24px; BS3 usaba 750/970/1170 y 30px.
   Si se prefiere adoptar los anchos de BS5 (como inicio.html), borrar este bloque. */
.container, .row { --bs-gutter-x: 30px; }
.container { max-width: none; }
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* ---------- Banner (carrusel BS5, antes FlexSlider) ---------- */
.banner-w3layouts { position: relative; }
.fac-port-banner-img { width: 100%; min-height: 800px; object-fit: cover; display: block; }

.banner-w3layouts .carousel-control-prev,
.banner-w3layouts .carousel-control-next { top: 42%; bottom: auto; left: 6%; width: 47px; height: 66px; opacity: 1; justify-content: flex-start; transition: transform .3s ease-in-out; }
.banner-w3layouts .carousel-control-next { left: auto; right: 6%; }
.banner-w3layouts .carousel-control-prev:hover,
.banner-w3layouts .carousel-control-next:hover { opacity: 1; transform: scale(1.5); }
.banner-w3layouts .carousel-control-prev-icon,
.banner-w3layouts .carousel-control-next-icon { width: 22px; height: 47px; background-size: contain; }
/* flechas: glifos fa-angle-left / fa-angle-right de FontAwesome 4 en SVG (evita cargar la fuente completa) */
.banner-w3layouts .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 448 640 1024'%3E%3Cpath fill='%23fff' d='M627 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z'/%3E%3C/svg%3E"); }
.banner-w3layouts .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 448 640 1024'%3E%3Cpath transform='matrix(-1 0 0 1 672 0)' fill='%23fff' d='M627 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z'/%3E%3C/svg%3E"); }

/* Capa con menú y texto sobre el banner */
.banner-agileinfo { position: absolute; top: 0; width: 100%; margin: 0 auto; }
.w3header { padding: 2em 0; }

/* ---------- Menú superior (navbar BS5 con el aspecto del navbar BS3 anterior) ---------- */
.w3header .navbar { padding: 0; flex-wrap: wrap; align-items: flex-start; }
.w3header .navbar-nav > li { margin: 0 .8em; position: relative; }
.w3header .navbar-nav .nav-link { color: #fff; font-size: 1.2em; line-height: 20px; padding: 1.3em .5em; position: relative; }
.w3header .navbar-nav .nav-link:hover, .w3header .navbar-nav .nav-link:focus,
.w3header .navbar-nav .nav-link.active { color: #ff7200; }
.w3header .navbar-nav .nav-link.show:not(:hover):not(:focus) { color: #fff; }
.w3header .navbar-nav .nav-link:before { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 3px; background: #ff7200; transition: .5s all; }
.w3header .navbar-nav .nav-link:hover:before, .w3header .navbar-nav .nav-link.active:before { width: 100%; }
.w3header .dropdown-toggle::after { display: none; }        /* se usa el span.caret original */
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }

.w3header .dropdown-menu {
    --bs-dropdown-font-size: 13px; --bs-dropdown-color: #046dab; --bs-dropdown-min-width: 0; --bs-dropdown-padding-y: 5px;
    --bs-dropdown-spacer: 0; --bs-dropdown-border-color: rgba(0,0,0,.15); --bs-dropdown-border-radius: 4px;
    --bs-dropdown-item-padding-x: 20px; --bs-dropdown-item-padding-y: 3px; --bs-dropdown-link-color: #333;
    --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: #00bcd4;
    --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: #00bcd4;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.w3header .dropdown-menu[data-bs-popper] { top: 102%; }
.w3header .dropdown-item { line-height: 1.42857143; }
.w3header .dropdown-menu hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid #eee; opacity: 1; }

/* Botón hamburguesa (mismo aspecto que el navbar-toggle BS3) */
.w3header .navbar-toggler { margin: 8px 0 0 auto; padding: 9px 10px; border: 1px solid #0fdfe2; border-radius: 4px; background: #0fdfe2; line-height: normal; }
.w3header .navbar-toggler:focus { box-shadow: none; }
.w3header .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background: #fff; }
.w3header .icon-bar + .icon-bar { margin-top: 4px; }

/* ---------- Texto del banner y botón ---------- */
.banner-w3text { padding-top: 20%; text-align: center; }
.banner-w3text h4 { font-size: 2em; color: #00bcd4; font-weight: 300; letter-spacing: 4px; }
.banner-w3text h2 { font-size: 3.8em; color: #fff; text-transform: uppercase; font-weight: 800; margin: .6em 0; }
.w3btn { position: relative; display: inline-block; overflow: hidden; margin: 2.5em 0 0; padding: 12px 60px 12px 25px; border: none; color: #fff; background: #ff7200; font-weight: 400; outline: none; transition: all .3s; }
.w3btn:hover, .w3btn:focus { color: #fff; }
.w3btn:after { content: ''; position: absolute; z-index: 1; right: 0; top: 0; width: 34%; height: 250%; margin: -5px 0 0 -5px; background: rgba(0,0,0,.2); transform-origin: 0 0; transform: rotate(-20deg); transition: all .5s; }
.w3btn:hover:after { width: 112%; }
.w3btn:before { content: ''; position: absolute; z-index: 2; right: 9%; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1.5 4.5 5 1 8.5M5 1.5 8.5 5 5 8.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- FACE: Facultad de Ciencias Empresariales (antes con style="" en la plantilla) ---------- */
.face-titulo-seccion    { margin-top: 30px; text-align: center; }
.face-titulo-seccion h3 { font-family: 'Open Sans Condensed', sans-serif; font-size: 3em; color: #000; }
.face-noticia           { max-width: 320px; margin-bottom: 30px; }
.face-noticia-fecha     { font-size: 1.2em; color: #454545; }
.face-noticia-titulo    { margin-top: 10px; }
.face-noticia-titulo a  { font-size: 1.4em; }
.face-noticia-titulo a:hover { opacity: .8; }
.face-noticia-texto     { font-size: 1.2em; color: #454545; }

/* ---------- Responsive (mismos cortes que facultades.css) ---------- */
@media (max-width: 1280px) {
    .banner-w3text { padding-top: 18%; }
    .banner-w3layouts .carousel-control-prev, .banner-w3layouts .carousel-control-next { top: 33%; }
}
@media (max-width: 1080px) {
    .banner-w3text h2 { font-size: 3.3em; }
    .banner-w3text h4 { letter-spacing: 2px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .w3header .navbar-nav { margin-right: -15px; }           /* así quedaba en BS3 (navbar-right sin padding del collapse) */
    .footer-franja-base .col-md-3 { width: 100%; }           /* footer_2020: col-md-3 era >=992px en BS3, en BS5 es >=768px */
}
@media (max-width: 991px) {
    .w3header .navbar-nav .nav-link { font-size: 1em; padding: 1.2em .2em; }
    .banner-w3text { padding-top: 22%; }
    .banner-w3text h2 { font-size: 2.8em; }
    .banner-w3text h4 { letter-spacing: 1px; font-size: 1.8em; }
    .banner-w3layouts .carousel-control-prev { left: 3%; }
    .banner-w3layouts .carousel-control-next { right: 3%; }
}
@media (max-width: 800px) {
    .w3header .navbar-nav .nav-link { padding: 1.1em .2em; }
    .banner-w3text h2 { font-size: 2.6em; line-height: 1.5em; }
    .banner-w3text h4 { letter-spacing: 0; font-size: 1.6em; }
    .banner-w3layouts .carousel-control-prev, .banner-w3layouts .carousel-control-next { top: 43%; }
}
@media (max-width: 768px) {
    .banner-w3layouts .carousel-control-prev, .banner-w3layouts .carousel-control-next { top: 34%; }
}
@media (max-width: 767px) {
    .w3header { padding: 2em; }
    .w3header .navbar-collapse { position: absolute; top: 100%; left: 0; z-index: 999; width: 100%; margin-top: 1em; padding: 0; background: rgba(0,0,0,.83); }
    .w3header .navbar-nav > li { margin: 0; text-align: center; }
    .w3header .navbar-nav .nav-link { padding: 1em .2em; }
    .w3header .navbar-nav .nav-link:before { display: none; }
    .w3header .dropdown-menu { --bs-dropdown-bg: transparent; --bs-dropdown-link-color: #fff; --bs-dropdown-link-hover-color: #333; --bs-dropdown-link-hover-bg: transparent;
                               margin-top: 0; padding: 0; border: 0; box-shadow: none; }
    .w3header .dropdown-menu > li:first-child { margin: .5em 0; }
    .w3header .dropdown-item { padding: 5px 15px 5px 25px; line-height: 20px; text-align: center; }
}
@media (max-width: 667px) {
    .banner-w3text { padding-top: 20%; }
    .banner-w3text h2 { margin: .4em 0; }
    .banner-w3text h4 { font-size: 1.2em; }
}
@media (max-width: 600px) {
    .banner-w3text h2 { font-size: 2.3em; }
}
@media (max-width: 480px) {
    .w3header { padding: 2em 1em; }
    .banner-w3text { padding-top: 18%; }
    .banner-w3text h2 { font-size: 1.8em; }
    .w3btn { padding: 10px 53px 10px 16px; font-size: .9em; }
    p { font-size: .9em; }
}
@media (max-width: 414px) {
    .w3header { padding: 1em .5em; }
    .w3header .navbar-nav .nav-link { padding: .8em .2em; }
    .banner-w3text h2 { font-size: 1.6em; }
    .banner-w3layouts .carousel-control-prev-icon, .banner-w3layouts .carousel-control-next-icon { width: 12px; height: 30px; }
}
@media (max-width: 320px) {
    .w3header { padding: 1em 0; }
    .w3header .navbar-collapse { margin-top: .5em; }
    .banner-w3text { padding-top: 17%; }
    .banner-w3text h2 { font-size: 1.3em; }
    .banner-w3text h4 { font-size: 1em; }
}