/* ========================================================================== 
   CUJR · Sitio institucional sobre base BISAE
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-padding-top: 6rem; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-hero);
  line-height: var(--line-height-body);
}

img, svg, video { max-inline-size: 100%; block-size: auto; }

a { color: var(--text-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--color-primary-hover); }
main { overflow: clip; }

.container-shell { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 1.5rem); }
.container-narrow { max-inline-size: var(--content-max); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 1.5rem); }
.text-balance { text-wrap: balance; }

.site-header {
  border-block-end: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-card), transparent 12%);
  backdrop-filter: blur(18px);
  transition: background var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.navbar { padding-block: .45rem; }
.navbar-brand { display: inline-flex; align-items: center; min-block-size: var(--min-target); }
.navbar-brand img { display: block; inline-size: clamp(4.2rem, 9vw, 6.25rem); max-block-size: 4.25rem; object-fit: contain; }
.navbar-toggler { border-color: var(--border-default); background: var(--bg-card); }

.nav-link { border-radius: var(--radius-pill); color: var(--text-primary); font-weight: 760; padding-inline: .78rem !important; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary), transparent 90%); }
.dropdown-menu { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-md); padding: .55rem; }
.dropdown-item { border-radius: var(--radius-md); color: var(--text-primary); font-weight: 650; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary), transparent 91%); }
.dropdown-divider { border-color: var(--border-soft); }

.btn-brand, .btn-outline-brand { min-block-size: var(--min-target); border-radius: var(--radius-pill); font-weight: 820; }
.btn-brand { border: 0; color: var(--text-inverse); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); box-shadow: var(--shadow-md); }
.btn-brand:hover, .btn-brand:focus-visible { color: var(--text-inverse); transform: translateY(-1px); }
.btn-outline-brand { color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary), transparent 72%); background: color-mix(in srgb, var(--color-primary), transparent 96%); }
.btn-outline-brand:hover, .btn-outline-brand:focus-visible { color: var(--color-primary-hover); background: color-mix(in srgb, var(--color-primary), transparent 91%); }

.institutional-hero, .page-hero { padding-block: clamp(7rem, 11vw, 9.5rem) clamp(4rem, 7vw, 6rem); position: relative; }
.institutional-hero::before, .page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--color-primary), transparent 86%), transparent 22rem), radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--color-secondary), transparent 88%), transparent 20rem);
}
.institutional-hero > .container-shell, .page-hero > .container-shell, .page-hero > .container-narrow { position: relative; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .625rem; padding: .58rem 1rem; border: 1px solid color-mix(in srgb, var(--color-primary), transparent 84%); border-radius: var(--radius-pill); background: var(--bg-elevated); box-shadow: var(--shadow-sm); color: var(--color-primary); font-weight: 850; }
.hero-title { max-inline-size: 12ch; margin: 1.35rem 0 0; font-size: clamp(2.85rem, 7vw, 6.35rem); font-weight: 930; line-height: .98; letter-spacing: -.058em; }
.hero-title span { color: var(--color-primary); }
.page-title { max-inline-size: 14ch; margin: 1.25rem 0 0; font-size: clamp(2.7rem, 6vw, 5.5rem); font-weight: 920; line-height: .98; letter-spacing: -.052em; }
.hero-copy { max-inline-size: 62ch; margin-block-start: 1.35rem; color: var(--text-secondary); font-size: clamp(1.0625rem, 1.4vw, 1.23rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-block-start: 1.75rem; }

.hero-stage { position: relative; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid color-mix(in srgb, var(--color-primary), transparent 84%); border-radius: var(--radius-xl); background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card), transparent 4%), color-mix(in srgb, var(--bg-muted), transparent 8%)); box-shadow: var(--shadow-brand); isolation: isolate; overflow: hidden; }
.hero-stage::before, .hero-stage::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; filter: blur(52px); }
.hero-stage::before { inline-size: 13rem; block-size: 13rem; inset-block-start: -3rem; inset-inline-end: -2rem; background: color-mix(in srgb, var(--color-primary), transparent 72%); }
.hero-stage::after { inline-size: 11rem; block-size: 11rem; inset-block-end: -3rem; inset-inline-start: -2rem; background: color-mix(in srgb, var(--color-secondary), transparent 76%); }
.campus-mark { position: absolute; inset: 1rem 1rem auto auto; inline-size: 5rem; block-size: 5rem; border: 1px solid color-mix(in srgb, var(--color-accent), transparent 42%); border-radius: 50%; opacity: .55; }
.campus-mark::before, .campus-mark::after { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); border-radius: inherit; border: 1px solid color-mix(in srgb, var(--color-primary), transparent 55%); }
.campus-mark::before { inline-size: 3.4rem; block-size: 3.4rem; } .campus-mark::after { inline-size: 1.8rem; block-size: 1.8rem; }
.logo-showcase { display: grid; place-items: center; margin-block-end: 1rem; padding: clamp(1rem, 3vw, 1.6rem); border-radius: var(--radius-lg); background: linear-gradient(135deg, #ffffff, #f8fafc); border: 1px solid #e2e8f0; }
.logo-showcase img { inline-size: min(24rem, 100%); max-block-size: 20rem; object-fit: contain; }
.institutional-logo { min-block-size: 21rem; }
.portal-preview { display: grid; gap: .8rem; }
.preview-hero { padding: 1rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: var(--text-inverse); }
.preview-line, .preview-pill, .preview-card { display: block; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-primary), transparent 88%); }
.preview-hero .preview-line { background: rgba(255, 255, 255, .72); }
.preview-line { block-size: .75rem; inline-size: 76%; margin-block: .45rem; } .preview-line.short { inline-size: 42%; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.preview-card { min-block-size: 4.6rem; border-radius: var(--radius-md); background: var(--bg-muted); border: 1px solid var(--border-soft); }

.section-pad { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-soft { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-muted), transparent 35%), transparent); }
.section-heading { max-inline-size: 48rem; margin-inline: auto; text-align: center; }
.section-kicker { color: var(--color-primary); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; font-size: .86rem; }
.section-title { margin-block: .55rem .9rem; font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 900; line-height: 1.02; letter-spacing: -.045em; }
.section-copy { margin-inline: auto; color: var(--text-secondary); font-size: clamp(1rem, 1.2vw, 1.12rem); }

.content-card, .feature-card, .showcase-card, .step-card, .contact-card { block-size: 100%; padding: clamp(1.1rem, 2vw, 1.5rem); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-md); }
.content-card { position: relative; overflow: hidden; }
.content-card::after { content: ""; position: absolute; inline-size: 6rem; block-size: 6rem; inset-inline-end: -3rem; inset-block-start: -3rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary), transparent 92%); }
.icon-badge { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary), transparent 84%), color-mix(in srgb, var(--color-secondary), transparent 84%)); color: var(--color-primary); font-weight: 900; position: relative; z-index: 1; }
.content-card h3, .feature-card h3, .showcase-card h3, .step-card h3, .contact-card h3 { margin-block-start: 1rem; font-size: 1.18rem; font-weight: 850; position: relative; z-index: 1; }
.content-card p, .feature-card p, .showcase-card p, .step-card p, .contact-card p { color: var(--text-secondary); position: relative; z-index: 1; }
.card-link { display: inline-flex; gap: .35rem; align-items: center; margin-block-start: .35rem; font-weight: 820; position: relative; z-index: 1; }

.breadcrumb-wrap { margin-block-end: 2rem; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); margin: 0; }
.breadcrumb a { color: var(--text-muted); font-weight: 700; text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-item.active { color: var(--text-secondary); font-weight: 800; }

.page-symbol { display: grid; place-items: center; aspect-ratio: 1; border-radius: 2rem; border: 1px solid color-mix(in srgb, var(--color-primary), transparent 75%); background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card), transparent 6%), color-mix(in srgb, var(--color-primary), transparent 91%)); box-shadow: var(--shadow-brand); }
.page-symbol span { font-size: clamp(4rem, 10vw, 8rem); font-weight: 950; line-height: 1; color: color-mix(in srgb, var(--color-primary), transparent 12%); }

.related-panel { padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); background: var(--bg-elevated); box-shadow: var(--shadow-md); }
.related-panel h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 900; margin-block-end: 1rem; }
.related-panel ul { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.related-panel a { display: inline-flex; align-items: center; min-block-size: 2.55rem; padding-inline: 1rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-primary), transparent 93%); text-decoration: none; font-weight: 760; }

.cta-panel { padding: clamp(1.5rem, 5vw, 3rem); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: var(--text-inverse); box-shadow: var(--shadow-brand); overflow: hidden; position: relative; }
.cta-panel::after { content: ""; position: absolute; inline-size: 18rem; block-size: 18rem; inset-inline-end: -6rem; inset-block-start: -8rem; border-radius: 999px; background: rgba(255,255,255,.16); }
.cta-panel p { color: rgba(255,255,255,.88); }
.footer { color: rgba(255,255,255,.84); background: #07120f; }
.footer a { color: rgba(255,255,255,.92); }
.footer-brand { padding: .55rem; border-radius: var(--radius-lg); background: rgba(255,255,255,.96); }
.footer-brand img { inline-size: min(7rem, 42vw); max-block-size: 5rem; object-fit: contain; }
.footer hr { border-color: rgba(255,255,255,.14); }

.back-to-top { position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; z-index: 1000; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border: 0; border-radius: 999px; color: var(--text-inverse); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(.65rem); transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard), visibility var(--motion-base); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(1.1rem); transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.tilt-card { transform-style: preserve-3d; transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); will-change: transform; }
.tilt-card > * { transform: translateZ(1rem); }
.error-page { min-block-size: 76vh; display: grid; align-items: center; }

@media (max-width: 1199.98px) { .navbar-nav { font-size: .94rem; } .nav-link { padding-inline: .55rem !important; } }
@media (max-width: 991.98px) { .site-header .navbar-collapse { margin-block-start: .85rem; padding: .85rem; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-md); max-block-size: calc(100vh - 6rem); overflow-y: auto; } .language-switcher, .theme-switcher, .nav-control { inline-size: 100%; } .language-switcher select, .theme-switcher select { inline-size: 100%; } .dropdown-menu { box-shadow: none; } .page-symbol { max-inline-size: 18rem; margin-inline: auto; } }
@media (max-width: 767.98px) { .hero-title, .page-title { max-inline-size: 100%; } .preview-grid { grid-template-columns: 1fr; } .institutional-logo { min-block-size: 15rem; } }
@supports not (color: color-mix(in srgb, white, black)) { .site-header, .content-card, .hero-eyebrow, .related-panel { background: var(--bg-card); } }


/* ========================================================================== 
   BISAE · Corrección de encabezado CUJR
   Evita que el menú se comprima letra por letra y mantiene el logotipo visible.
   ========================================================================== */
.site-header .container-shell {
  inline-size: 100%;
}

.site-header .navbar > .container-shell {
  max-inline-size: min(100%, 1680px);
  gap: clamp(.75rem, 1.4vw, 1.5rem);
}

.site-header .navbar-brand {
  flex: 0 0 auto;
  max-inline-size: 9rem;
  overflow: hidden;
}

.site-header .navbar-brand img,
.footer-brand img,
.logo-showcase img {
  display: block;
  object-fit: contain;
  overflow-wrap: normal;
  word-break: normal;
}

.site-header .navbar-brand img {
  inline-size: clamp(3.35rem, 5vw, 4.9rem);
  block-size: auto;
  max-block-size: 3.75rem;
}

.site-header .navbar-collapse {
  min-inline-size: 0;
}

.site-header .navbar-nav {
  min-inline-size: 0;
  align-items: center;
}

.site-header .navbar-nav > .nav-item {
  flex: 0 0 auto;
}

.site-header .nav-link,
.site-header .dropdown-item,
.site-header .navbar-brand,
.site-header .nav-control-label,
.site-header .btn,
.site-header select {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.site-header .nav-link {
  line-height: 1.15;
}

.site-header .language-switcher select {
  min-inline-size: 7.4rem;
}

.site-header .theme-switcher select {
  min-inline-size: 6.7rem;
}

.site-header .a11y-toggle {
  min-block-size: 2.45rem;
}

@media (min-width: 992px) {
  html { scroll-padding-top: 5.25rem; }

  .site-header .navbar {
    padding-block: .38rem;
  }

  .site-header .navbar-nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: .15rem !important;
  }

  .site-header .nav-link {
    padding-inline: .52rem !important;
    font-size: .92rem;
  }

  .site-header .nav-control-label {
    display: none;
  }

  .site-header .form-select-sm,
  .site-header .btn-sm {
    font-size: .86rem;
  }

  .institutional-hero,
  .page-hero {
    padding-block-start: clamp(6rem, 8vw, 8rem);
  }
}

@media (min-width: 992px) and (max-width: 1340px) {
  .site-header .navbar > .container-shell {
    max-inline-size: 100%;
  }

  .site-header .navbar-nav {
    flex-wrap: wrap;
    row-gap: .35rem;
  }

  .site-header .nav-link {
    font-size: .88rem;
    padding-inline: .44rem !important;
  }

  .site-header .language-switcher select,
  .site-header .theme-switcher select {
    min-inline-size: 6.3rem;
    max-inline-size: 7.3rem;
  }

  .site-header .a11y-toggle {
    padding-inline: .6rem;
  }

  .institutional-hero,
  .page-hero {
    padding-block-start: 8.75rem;
  }
}

@media (max-width: 991.98px) {
  .site-header .navbar-brand img {
    inline-size: 4.25rem;
    max-block-size: 3.4rem;
  }

  .site-header .navbar-nav > .nav-item {
    inline-size: 100%;
  }

  .site-header .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
  }
}

/* Defensa visual: si el navegador conserva en caché una respuesta HTML/403 para el logo,
   el texto alternativo no debe romper la maquetación del encabezado. */
img[src*="logo-principal.png"] {
  color: transparent;
  font-size: 0;
}