/* Cabecera y mega menú: adaptación del menú v3 de institutoserca.com
   (barra superior verde, logo centrado, barra blanca con desplegables y panel inmersivo). */

/* ===== Barra superior ===== */
.topbar { background: var(--primary-dark); color: #fff; font-size: .9rem; }
.topbar .container-xl { display: flex; align-items: center; gap: 1.1rem; min-height: 46px; flex-wrap: wrap; }
.topbar-spacer { flex: 1; }
.topbar-link { display: inline-flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none; font-weight: 600; opacity: .92; white-space: nowrap; }
.topbar-link:hover { color: var(--secondary); opacity: 1; }
.topbar-cta { display: inline-flex; align-items: center; gap: .4rem; color: var(--secondary); border: 1px solid var(--secondary); border-radius: 4px; padding: .3rem .8rem; text-decoration: none; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.topbar-cta:hover { background: var(--secondary); color: #fff; }
.topbar-cta i { font-size: .7rem; }
.topbar-btn { display: inline-flex; align-items: center; background: rgba(255,255,255,.14); color: #fff; padding: .35rem .9rem; border-radius: 4px; text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; transition: background .2s; }
.topbar-btn:hover { background: var(--secondary); color: #fff; }

/* ===== Fila del logo ===== */
.logo-row { background: #fff; }
.logo-row .container-xl { display: flex; align-items: center; justify-content: center; position: relative; padding-top: 14px; padding-bottom: 10px; }
.logo-top img { max-width: 100%; height: auto; max-height: 56px; }
.menu-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 2px solid var(--primary); color: var(--primary); border-radius: 6px; padding: .35rem .8rem; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .95rem; }
.menu-toggle i { margin-left: .3rem; }

/* ===== Barra del menú (sticky, es la que mide site.js como --header-h) ===== */
.menu-bar { background: #fff; border-bottom: 1px solid #e0e0e0; }
.menu-items { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: stretch; }
.menu-item { position: static; }
.menu-btn { background: none; border: 0; padding: 20px 22px; font-family: 'Montserrat', sans-serif; color: var(--primary); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: color .2s; cursor: pointer; }
.menu-btn-label { font-size: 15px; font-weight: 600; white-space: nowrap; }
.menu-btn-label i { font-size: .7rem; margin-left: .35rem; transition: transform .2s; }
.menu-btn-sub { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; white-space: nowrap; }
.menu-item:hover .menu-btn, .menu-item.open .menu-btn, .menu-btn:focus-visible { color: var(--secondary); }
.menu-item.open .menu-btn-label i { transform: rotate(180deg); }
.menu-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }

/* ===== Panel inmersivo ===== */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 3px solid var(--secondary); box-shadow: 0 18px 40px rgba(0,0,0,.18); display: none; z-index: 1030; }
.menu-item.open .mega { display: block; }
.mega-inner { display: flex; min-height: 380px; }
.mega-sidebar { background: var(--primary); display: flex; flex-direction: column; min-width: 230px; padding-left: 75px; }
.mega-tab { color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 600; padding: 15px 24px; border-left: 4px solid transparent; border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none; transition: all .3s; white-space: nowrap; }
.mega-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.mega-tab.active { color: var(--secondary); background: rgba(255,130,0,.1); border-left-color: var(--secondary); }
.mega-content { flex: 1; position: relative; }
.mega-pane { display: none; position: relative; min-height: 380px; height: 100%; background-size: cover; background-position: center; }
.mega-pane.active { display: flex; }
.mega-pane::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,83,72,.87), rgba(0,40,35,.93)); }
.mega-overlay { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 20px 100px 20px 50px; color: #fff; overflow: hidden; }
.mega-logo { position: absolute; top: 18px; right: 100px; width: auto; max-width: 240px; height: auto; max-height: 50px; object-fit: contain; object-position: right top; opacity: .95; z-index: 2; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }
.mega-logo-oscuro { background: #fff; padding: 6px 10px; border-radius: 8px; filter: none; }
.mega-title { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 800; margin-bottom: 16px; max-width: calc(100% - 270px); line-height: 1.2; min-height: 52px; }
.mega-line { display: block; height: 3px; background: var(--secondary); margin-top: 8px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 3px; padding-bottom: 44px; }
.mega-card { background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; display: block; transition: all .2s; }
.mega-card:hover { background: rgba(255,130,0,.25); border-color: rgba(255,130,0,.4); transform: translateY(-2px); color: #fff; }
.mega-more { position: absolute; bottom: 17px; right: 100px; }
.mega-more a { color: var(--secondary); font-weight: 600; font-size: 14px; text-decoration: none; }
.mega-more a:hover { color: #fff; }
.mega-all { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 2px solid rgba(0,83,72,.12); padding: 18px 0; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: var(--primary); text-decoration: none; transition: all .2s; }
.mega-all:hover { color: var(--secondary); border-top-color: var(--secondary); }
.mega-all i { color: var(--secondary); font-size: 15px; }

/* Anclas de las listas de programas en la ficha de universidad */
.section-title[id] { scroll-margin-top: calc(var(--header-h, 74px) + 24px); }

/* ===== Portátil (992-1400px) ===== */
@media (min-width: 992px) and (max-width: 1400px) {
  .mega-sidebar { padding-left: 15px; min-width: 200px; }
  .mega-tab { padding: 16px 16px; font-size: 12px; }
  .mega-overlay { padding: 20px 30px 20px 25px; }
  .mega-logo { right: 30px; max-width: 200px; max-height: 44px; }
  .mega-title { font-size: 20px; max-width: calc(100% - 180px); }
  .mega-more { right: 30px; }
  .mega-card { font-size: 13px; padding: 8px 12px; }
  .menu-btn { padding: 20px 14px; }
  .menu-btn-label { font-size: 14px; }
}

/* ===== Móvil y tablet (<992px): offcanvas con acordeón ===== */
@media (max-width: 991.98px) {
  .topbar .container-xl { min-height: 40px; gap: .8rem; font-size: .85rem; }
  .logo-row .container-xl { justify-content: flex-start; }
  .logo-top img { max-height: 46px; }
}
.menu-movil { width: min(92vw, 400px); }
.menu-movil .offcanvas-header { border-bottom: 1px solid #e5e5e5; }
.menu-movil .accordion-button { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary); padding: 1rem .25rem; }
.menu-movil .accordion-button:not(.collapsed) { background: rgba(0,83,72,.06); color: var(--primary); box-shadow: none; }
.menu-movil .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(255,130,0,.25); }
.menu-movil .accordion-button small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; margin-top: 2px; }
.menu-movil .accordion-body { padding: .25rem .25rem 1rem; }
.mm-cat { font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary-dark); margin: .9rem 0 .35rem; }
.mm-lista { list-style: none; margin: 0; padding: 0; }
.mm-lista a { display: block; padding: .45rem 0; color: var(--text-dark); text-decoration: none; font-size: .92rem; border-bottom: 1px solid #f0f0f0; }
.mm-lista a:hover { color: var(--primary); }
.mm-todos { display: block; margin-top: .9rem; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary); text-decoration: none; font-size: .92rem; }
.mm-todos i { color: var(--secondary); font-size: .8rem; }
.mm-pie { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e5e5e5; }
.mm-link { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; color: var(--primary); text-decoration: none; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .menu-btn, .menu-btn-label i, .mega-tab, .mega-card, .mega-all, .topbar-cta, .topbar-btn { transition: none; }
}

/* Secciones con una sola categoría: sin sidebar */
.mega-inner-sin-sidebar .mega-overlay { padding-left: 100px; }
@media (min-width: 992px) and (max-width: 1400px) { .mega-inner-sin-sidebar .mega-overlay { padding-left: 30px; } }

/* Cursos sueltos del diplomado, bajo la tarjeta del diplomado */
.mega-card-curso { font-weight: 500; font-size: 13px; background: rgba(255,255,255,.06); }
.mega-card-curso span { color: var(--secondary); font-weight: 700; margin-right: .25rem; }
.mm-curso a { padding-left: 1rem; font-size: .88rem; }
.mm-curso span { color: var(--secondary-dark); font-weight: 700; }
.mega-grid-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.mega-col { display: flex; flex-direction: column; gap: 8px; }

/* Marca "Red Universitaria" junto al logo */
.logo-top { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.logo-red { display: flex; flex-direction: column; justify-content: center; padding-left: 16px; border-left: 2px solid #c9c9c9; line-height: .95; }
.logo-red-pre { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 1.05rem; color: var(--secondary); letter-spacing: .02em; }
.logo-red-titulo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--primary); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.logo-top-movil { gap: 12px; }
.logo-top-movil .logo-red { padding-left: 12px; }
.logo-top-movil .logo-red-pre { font-size: .8rem; }
.logo-top-movil .logo-red-titulo { font-size: .85rem; }
@media (max-width: 575.98px) {
  .logo-top { gap: 10px; }
  .logo-red { padding-left: 10px; }
  .logo-red-pre { font-size: .72rem; }
  .logo-red-titulo { font-size: .78rem; }
  .logo-row .container-xl { padding-right: 118px; }
  .logo-top img { max-height: 40px; }
}

/* Logo de la Fundación General de la USAL un 20 % más grande */
.mega-logo[src*="logo-fusal"] { max-width: 346px; max-height: 72px; }
@media (min-width: 992px) and (max-width: 1400px) { .mega-logo[src*="logo-fusal"] { max-width: 288px; max-height: 64px; } }
.mega-overlay:has(.mega-logo[src*="logo-fusal"]) .mega-title { min-height: 80px; }