:root{
  --brand-red:#dc3545;
  --brand-blue:#032e58;
}
body{ background-color:#ffffff; }
.topbar{background:var(--brand-blue); color:#fff; font-size:.925rem}
.navbar{ box-shadow: 0 6px 18px rgba(0,0,0,.06) }
.hero{
  position:relative; overflow:hidden; min-height: 56vh;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(220,53,69,.12), transparent),
              radial-gradient(800px 400px at 90% 20%, rgba(3,46,88,.12), transparent),
              linear-gradient(180deg, #fff, #f8f9fa 60%);
}
.hero .overlay{
  position:absolute; inset:0; background: linear-gradient(90deg, rgba(3,46,88,.08), rgba(220,53,69,.06));
  pointer-events:none;
}
.section-title{ color:var(--brand-blue); font-weight:800 }
.card-border-top{ border-top:4px solid var(--brand-red) }
.icon-badge{ width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:#fff; border:1px solid #eee }
.footer{ background:#0f1f36; color:#d0d7e2 }
.footer a{ color:#d0d7e2 }


/* === Mejora de visibilidad del menú (UNSXX Contaduría) === */
.navbar { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.navbar .nav-link { color:#fff !important; font-weight:600; letter-spacing:.2px; font-size:1.05rem; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color:#fff !important; text-decoration: underline; text-underline-offset: .2rem; }
.navbar .nav-link.active, .navbar .nav-link.show { text-decoration: underline; }
.navbar .dropdown-menu { border-radius:.75rem; border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 30px rgba(0,0,0,.1); }
.navbar .dropdown-item { padding:.6rem 1rem; }
.navbar .dropdown-item:hover { background:#ffffff; }
.navbar-brand img { background:#fff; border-radius: 50%; padding:2px; }



/* === Aparición hacia arriba & contadores === */
.reveal-up { opacity: 0; transform: translateY(16px); transition: transform .6s ease, opacity .6s ease; will-change: transform, opacity; }
.reveal-up.show { opacity: 1; transform: translateY(0); }
.counter { font-variant-numeric: tabular-nums; }



/* === Program cards (Técnico / Licenciatura) === */
.program-card{ background:#ffffff; border:1px solid rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
.program-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.program-header{ background: linear-gradient(135deg, #dc3545 0%, #b42b39 50%, #032e58 120%); }
.badge-soft{ font-weight:600; border-radius:999px; padding:.35rem .6rem; border:1px solid rgba(255,255,255,.55); }
.badge-soft-light{ color:#fff; background: rgba(255,255,255,.15); }
.program-features li{ padding:.45rem 0; display:flex; gap:.5rem; align-items:flex-start; }
.program-features li i{ color:#dc3545; margin-top:.2rem; }



/* === Tipografía unificada (Poppins) === */
:root{ --heading-weight:700; --text-weight:400; }
html, body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--heading-weight); letter-spacing: .2px; }
.lead { font-weight: 400; }
.navbar .nav-link { font-weight: 600; }
.display-5, .display-6 { letter-spacing: .3px; }





/* === Separadores verticales en navbar === */
.navbar .vbar{display:inline-block;width:1px;height:26px;background:rgba(255,255,255,.55);margin:0 .75rem;flex:0 0 1px;border-radius:.5px;}
.navbar .vbar--after-brand{height:64px;margin-left:1rem;margin-right:.75rem;opacity:.8;}
.navbar .vbar--after-logo{height:64px;margin-left:.5rem;margin-right:.75rem;opacity:.75;background:rgba(255,255,255,.65);}
.navbar.navbar-light .vbar{background:rgba(0,0,0,.2);} /* fallback en barras claras */










/* === UNSXX: hover blanco + texto rojo (solo al pasar el mouse) === */
.navbar .nav-link:hover,
.navbar .dropdown:hover > .nav-link {
  font-weight: 700 !important;
  background-color: #ffffff !important;
  color: var(--unsxx-red, #dc3545) !important;
  border-radius: .375rem;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  font-weight: 700 !important;
  background-color: #ffffff !important;
  color: var(--unsxx-red, #dc3545) !important;
}
/* === FIN UNSXX === */



/* === UNSXX: quitar subrayados del menú y dropdown === */
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar .dropdown-toggle,
.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus,
.navbar .dropdown-toggle:active,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
  text-decoration: none !important;
}
/* === FIN UNSXX === */


<!-- Opcional: Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>
:root{
  --brand-red:#dc3545;        /* institucional */
  --brand-blue:#032e58;
  --card-radius:1rem;
}

.program-card{
  border:0; border-radius:var(--card-radius);
  background:#fff;
  box-shadow:0 6px 18px rgba(3,46,88,.06);
  overflow:hidden; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.program-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(3,46,88,.12);
}

.program-head{
  padding:1rem 1.25rem;
  color:#fff; position:relative;
}
.program-head .title{
  display:flex; align-items:center; gap:.5rem; margin:0;
  font-weight:700; letter-spacing:.2px;
}
.program-head .bi{font-size:1.25rem}

.program-meta{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;
}
.badge-soft{
  background:rgba(255,255,255,.18);
  color:#fff; border:1px solid rgba(255,255,255,.35);
  backdrop-filter:saturate(140%) blur(2px);
}

.program-body{ padding:1.25rem }
.icon-list{
  list-style:none; padding:0; margin:0;
}
.icon-list li{
  display:grid; grid-template-columns: 22px 1fr; gap:.5rem;
  padding:.25rem 0;
}
.icon-list li .bi{opacity:.85}

.program-cta{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem;
}
.btn-ghost{
  border:1px solid currentColor; background:transparent;
}

/* Temas por nivel */
.program-card.ts .program-head{
  background:linear-gradient(90deg, #c92a3a, #ff0000);
}
.program-card.lc .program-head{
  background:linear-gradient(90deg, #032e58, #2784e6);
}

/* Accesibilidad / responsive pequeños */
@media (max-width: 575.98px){
  .program-head .title{font-size:1.05rem}
}




<style>
/* Recorte a N líneas */
.clamp{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-5{ -webkit-line-clamp:5; }

/* Botón */
.btn-toggle{ padding:.35rem .75rem; }








/* Botonera flotante */
.contact-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1050; /* por encima del contenido */
}
.fab-btn{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  border: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease;
}
.fab-btn i{ font-size: 1.35rem; line-height: 1; }
.fab-btn:hover{ transform: translateY(-2px); filter: brightness(1.08); }

.fab-whatsapp{ background: #25D366; }
.fab-telegram{ background: #229ED9; }
.fab-facebook{ background: #1877F2; }
.fab-top{ background: #6c757d; display: none; cursor: pointer; }

/* Ajuste en pantallas pequeñas */
@media (max-width: 576px){
  .contact-fab{ right: 12px; bottom: 12px; gap: 8px; }
  .fab-btn{ width: 46px; height: 46px; }
}






</style>

</style>