/* ===== Paleta institucional (tomada del logo UC) ===== */
:root {
    --uc-oscuro: #17418f;
    --uc-claro: #009fe3;
    --uc-dorado: #ffcc33;
    --uc-gris: #f4f7fb;
    --texto: #1f2a3d;
}

html { scroll-behavior: smooth; }
body { font-family: 'Open Sans', system-ui, sans-serif; color: var(--texto); background: #fff; overflow-x: hidden; }
h1, h2, h3, h4, h5, .navbar-brand { font-family: 'Montserrat', system-ui, sans-serif; }
a { color: var(--uc-oscuro); }
.text-uc { color: var(--uc-oscuro) !important; }
.text-uc-claro { color: var(--uc-claro) !important; }
.bg-uc-gris { background: var(--uc-gris); }

/* ===== Cargador ===== */
#cargador {
    position: fixed; inset: 0; background: #fff; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity .5s, visibility .5s;
}
#cargador img { width: 110px; }
#cargador span { font: 700 1.1rem Montserrat, sans-serif; color: var(--uc-oscuro); margin-top: .5rem; letter-spacing: 3px; }
#cargador.oculto { opacity: 0; visibility: hidden; }

/* ===== Barra superior y menú ===== */
.topbar { background: var(--uc-oscuro); font-size: .85rem; padding: .35rem 0; }
.topbar a { color: #dbe8ff; text-decoration: none; margin-right: 1.2rem; }
.topbar a:hover { color: #fff; }
.redes-mini a { margin: 0 0 0 .8rem; }

.navbar-uc { background: rgba(255, 255, 255, .97); box-shadow: 0 2px 18px rgba(23, 65, 143, .12); }
.navbar-uc .navbar-brand { color: var(--uc-oscuro); font-size: 1rem; }
.navbar-uc .navbar-brand small { color: var(--uc-claro); font-weight: 600; }
.navbar-uc .nav-link { color: var(--uc-oscuro); font-weight: 600; font-size: .92rem; padding: .5rem .7rem !important; border-radius: 8px; }
.navbar-uc .nav-link { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399px) {
    .navbar-uc .nav-link > .bi { display: none; }
    .navbar-uc .nav-link { font-size: .85rem; padding: .5rem .55rem !important; }
}
.navbar-uc .nav-link:hover, .navbar-uc .nav-link.active { background: var(--uc-oscuro); color: #fff !important; }
.dropdown-item.active, .dropdown-item:active { background: var(--uc-claro); }

/* ===== Botones ===== */
.btn-uc { background: var(--uc-oscuro); color: #fff; border: 0; border-radius: 50px; padding: .7rem 1.6rem; font-weight: 600; transition: .3s; }
.btn-uc:hover { background: var(--uc-claro); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 159, 227, .35); }
.btn-uc-outline { border: 2px solid #fff; color: #fff; border-radius: 50px; padding: .65rem 1.6rem; font-weight: 600; }
.btn-uc-outline:hover { background: #fff; color: var(--uc-oscuro); }

/* ===== Hero de inicio (carrusel) ===== */
.hero .carousel-item { height: 88vh; min-height: 520px; background-size: cover; background-position: center; }
.hero .carousel-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(23, 65, 143, .92) 10%, rgba(0, 159, 227, .45)); }
.hero .caption { position: absolute; inset: 0; display: flex; align-items: center; color: #fff; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; }
.hero .text-dorado { color: var(--uc-dorado); }
.hero .estrella-flotante { position: absolute; right: 8%; bottom: 12%; width: 160px; opacity: .9; animation: flotar 4s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-18px); } }

/* ===== Encabezado de páginas internas ===== */
.page-hero { background-size: cover; background-position: center; color: #fff; padding: 5rem 0 3.5rem; position: relative; overflow: hidden; }
.page-hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.page-hero .breadcrumb a { color: #fff; }
.page-hero .breadcrumb-item.active, .page-hero .breadcrumb-item + .breadcrumb-item::before { color: #cfe6ff; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; background: #fff; clip-path: ellipse(60% 100% at 50% 100%); }

/* ===== Secciones ===== */
.seccion { padding: 5rem 0; }
.titulo-seccion { text-align: center; margin-bottom: 3rem; }
.titulo-seccion h2 { font-weight: 800; color: var(--uc-oscuro); }
.titulo-seccion .linea { width: 70px; height: 4px; background: linear-gradient(90deg, var(--uc-oscuro), var(--uc-claro)); margin: .8rem auto; border-radius: 4px; }

.tarjeta { background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(23, 65, 143, .1); padding: 2rem; height: 100%; transition: .35s; border-top: 4px solid transparent; }
.tarjeta:hover { transform: translateY(-8px); border-top-color: var(--uc-claro); box-shadow: 0 18px 40px rgba(23, 65, 143, .18); }
.tarjeta .icono { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, var(--uc-oscuro), var(--uc-claro)); margin-bottom: 1rem; }
.tarjeta h4 { color: var(--uc-oscuro); font-weight: 700; font-size: 1.15rem; }

.img-redonda { border-radius: 22px; box-shadow: 0 20px 45px rgba(23, 65, 143, .25); width: 100%; object-fit: cover; }

/* Contadores */
.contadores { background: linear-gradient(120deg, var(--uc-oscuro), var(--uc-claro)); color: #fff; }
.contadores .num { font: 800 3rem Montserrat, sans-serif; }

/* Cita destacada (misión/visión) */
.cita { font-size: 1.35rem; line-height: 1.7; border-left: 6px solid var(--uc-claro); padding: 1.5rem 2rem; background: var(--uc-gris); border-radius: 0 18px 18px 0; }

/* ===== Organigrama ===== */
.organigrama { text-align: center; }
.organigrama .nivel { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; position: relative; padding-top: 1.8rem; }
.organigrama .nivel::before { content: ""; position: absolute; top: 0; left: 50%; height: 1.8rem; border-left: 3px dashed var(--uc-claro); }
.organigrama .nivel:first-child { padding-top: 0; }
.organigrama .nivel:first-child::before { display: none; }
.organigrama .caja { background: #fff; border: 2px solid var(--uc-claro); border-radius: 14px; padding: .8rem 1.1rem; min-width: 190px; max-width: 260px; box-shadow: 0 6px 18px rgba(23, 65, 143, .1); transition: .3s; }
.organigrama .caja:hover { transform: scale(1.05); }
.organigrama .caja.principal { background: linear-gradient(135deg, var(--uc-oscuro), var(--uc-claro)); color: #fff; border: 0; }
.organigrama .caja.local { border-color: var(--uc-oscuro); background: #eef5ff; }
.organigrama .caja b { display: block; font-family: Montserrat, sans-serif; font-size: .95rem; }
.organigrama .caja small { opacity: .85; }

/* ===== Directivos ===== */
.directivo { text-align: center; }
.directivo .avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center; font: 800 2.4rem Montserrat, sans-serif; color: #fff; background: linear-gradient(135deg, var(--uc-oscuro), var(--uc-claro)); box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--uc-claro); }
.directivo .cargo { color: var(--uc-claro); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; }

/* ===== Carreras ===== */
.badge-grado { background: var(--uc-oscuro); }
.badge-posgrado { background: var(--uc-dorado); color: #1f2a3d; }
.filtros .btn { border-radius: 50px; }
.filtros .btn.active { background: var(--uc-oscuro); color: #fff; }

/* ===== Galería ===== */
.galeria a { display: block; overflow: hidden; border-radius: 16px; position: relative; }
.galeria img { width: 100%; height: 240px; object-fit: cover; transition: .5s; }
.galeria a:hover img { transform: scale(1.12) rotate(1deg); }
.galeria a span { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem 1rem; color: #fff; background: linear-gradient(transparent, rgba(23, 65, 143, .9)); font-weight: 600; }

/* ===== FAQ ===== */
.accordion-button:not(.collapsed) { background: var(--uc-oscuro); color: #fff; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(0, 159, 227, .35); }
.accordion-item { border-radius: 12px !important; overflow: hidden; margin-bottom: .8rem; border: 1px solid #dbe6f5; }

/* ===== Integrantes ===== */
.integrante { background: #fff; border-radius: 18px; padding: 1.5rem; text-align: center; box-shadow: 0 8px 26px rgba(23, 65, 143, .12); }
.integrante .avatar { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto .8rem; display: grid; place-items: center; background: var(--uc-gris); font-size: 2.6rem; color: var(--uc-oscuro); }

/* ===== Contacto ===== */
.mapa { border: 0; width: 100%; height: 380px; border-radius: 18px; box-shadow: 0 10px 30px rgba(23, 65, 143, .15); }
.form-control:focus, .form-select:focus { border-color: var(--uc-claro); box-shadow: 0 0 0 .2rem rgba(0, 159, 227, .2); }
.dato-contacto { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.dato-contacto i { font-size: 1.5rem; color: #fff; background: var(--uc-claro); width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; }

/* Botones de redes grandes */
.red-grande { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 50px; color: #fff; text-decoration: none; font-weight: 600; margin: .3rem; transition: .3s; }
.red-grande:hover { transform: translateY(-4px); color: #fff; }
.red-facebook { background: #1877f2; }
.red-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.red-x-twitter { background: #111; }
.red-youtube { background: #ff0000; }
.red-whatsapp { background: #25d366; }
.red-maps { background: #ea4335; }

/* ===== Pie ===== */
.footer-uc { background: #0f2c63; color: #c9d7f2; padding: 4rem 0 1.5rem; }
.footer-uc h5 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.footer-uc a { color: #c9d7f2; text-decoration: none; }
.footer-uc a:hover { color: #fff; }
.footer-uc li { margin-bottom: .45rem; }
.footer-logo { width: 110px; background: #fff; border-radius: 16px; padding: 6px; }
.footer-uc .redes a { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); margin-right: .4rem; font-size: 1.15rem; transition: .3s; }
.footer-uc .redes a:hover { background: var(--uc-claro); transform: rotate(360deg); }
.contacto-lista i { color: var(--uc-claro); margin-right: .4rem; }

/* Flotantes */
.btn-whatsapp { position: fixed; right: 22px; bottom: 22px; width: 62px; height: 62px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 2rem; z-index: 1000; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); animation: latido 2s infinite; }
.btn-whatsapp:hover { color: #fff; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } }
.btn-arriba { position: fixed; right: 30px; bottom: 96px; width: 46px; height: 46px; border-radius: 50%; background: var(--uc-oscuro); color: #fff; display: grid; place-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: .3s; }
.btn-arriba.visible { opacity: 1; visibility: visible; }
.btn-arriba:hover { color: #fff; background: var(--uc-claro); }

/* Banner GIF */
.banner-gif { width: 100%; border-radius: 18px; box-shadow: 0 12px 30px rgba(23, 65, 143, .25); }

@media (max-width: 576px) {
    .seccion { padding: 3rem 0; }
    .hero .estrella-flotante { display: none; }
    .cita { font-size: 1.1rem; padding: 1rem 1.2rem; }
}