:root {
            --azul-unam: #003366;
            --oro-unam: #C3A343;
            --gris-fondo: #f4f4f4;
        }

        body {
            background: var(--gris-fondo);
            font-family: "Segoe UI", sans-serif;
        }

        /* NAVBAR */
        .navbar {
            background: white !important;
            border-bottom: 4px solid var(--oro-unam);
        }
        .navbar-nav .nav-link {
            color: var(--azul-unam) !important;
            font-weight: 600;
        }
        .navbar-nav .nav-link:hover {
            color: var(--oro-unam) !important;
        }

        /* HERO */
        .hero {
  position: relative;
  background: var(--azul-unam);
  background-image: url('../img/bannerCE.png');
  padding: 120px 0 140px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Overlay oscuro */
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* negro semi-transparente para oscurecer imagen */
  z-index: 1;
}

.hero h1, .hero p {
  position: relative; /* para estar sobre el overlay */
  color: #fff; /* texto blanco */
  font: size 300px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* sombra para destacar */
  z-index: 2;
}
        /* TITULOS DE SECCIÓN */
        .section-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--azul-unam);
            border-left: 6px solid var(--oro-unam);
            padding-left: 12px;
            margin-bottom: 25px;
        }

        /* CONTENEDOR */
        .content-box {
            background: white;
            padding: 35px;
            border-radius: 6px;
            border-left: 6px solid var(--azul-unam);
            box-shadow: 0 3px 10px rgba(0,0,0,0.07);
            margin-bottom: 45px;
        }

        /* FOOTER */
        footer {
            background: var(--azul-unam);
            color: white;
            padding: 30px 0;
            text-align: center;
            border-top: 4px solid var(--oro-unam);
        }
 #btnTop {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #003366; /* azul UNAM */
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 999;
    transition: 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

#btnTop.show {
    opacity: 1;
    visibility: visible;
}

#btnTop:hover {
    background: #C3A343; /* dorado UNAM */
    color: #003366;
}