:root{
  --brand:#ff6a00; --brand-2:#fd8c2d; --ink:#0f172a; --muted:#6b7280;
  --bg:#ffffff; --radius:16px; --container:1260px;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;
  overflow-x: hidden;
  overflow-y: scroll;
    }
img{display:block;max-width:100%}

.container{max-width:var(--container);margin:0 auto;padding:0 1.4rem}

.section{padding:3rem 0}
.btn{display:flex;justify-content:center;gap:.5rem;border:0;border-radius:999px;padding:.9rem 1.2rem;font-weight:700;text-decoration:none;background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(253,140,45,.35);transition:filter .2s, transform .2s; margin: 0 auto !important;}
.btn:hover{transform:translateY(-1px);filter:brightness(.95)}
.btn-small{padding:.55rem .9rem;font-size:.92rem}
.bottoncertificados{
  text-decoration: none;
  padding: 10px 25px;
  background-color:#ff9000;
  border: 0;
  border-radius: 20px;
  margin: 0 auto;
  width: 270px;
  justify-content: center;
  font-size: 18px;
  margin-top: 40px;
  color: #ffffff;
  display: flex;

}
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eef2f7;box-shadow:0 2px 10px rgba(17,24,39,.03)}
.topbar .container{display:flex;align-items:center;gap:1.6rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:800;text-decoration:none;color:var(--ink)}
.logo-dot{width:300px;height:40px; margin-top: 20px;}
.logo-dot{position: relative; left: -65px !important;}
.brand .brand-text{text-transform:lowercase;letter-spacing:.2px}

.nav{
  padding: 30px 0px;

}
.nav li{
  position: relative !important;
}
.nav ul{
  display: flex;
  gap: 1vw;
  position: relative;
  left: 23vw;
  list-style: none;


}



.nav a{
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  font-size: 18px;

}
.nav a:hover{
  color: #ff6600;
}



.search-icon{
background: rgb(225, 102, 0) url("https://ucompensar.edu.co/wp-content/themes/wp-compensar/assets/img/search-icon.svg" ) no-repeat center center;;
width: 40px;
height: 40px;
display: inline-block;
border-radius: 50%;
margin-left: 40px;
background-size: 24px 24px;
position: relative;
left: -40px;
}
.menusuperior{
  position: relative;
}
.menusuperior a{
text-decoration: none;
color: black;
font-size: 13px;

}


.submenu-institucion{
  position: absolute !important;
  top: 100% !important;
  left: -200% !important;
  display: none !important;
  list-style: none !important; 
  width: 80vw;
  background-color: #fff !important;
}
.submenu-institucion li a{
  color: #000000;
  font-weight: normal ;
  font-size: 13px;
  text-decoration: none;
}
.submenu-institucion li{
  width: 20%;
  padding: 5px !important;
  background-color: #fff  ;
  box-shadow: none;
  z-index: 100 !important;
}
.submenu-institucion li:hover{
  background-color: rgba(221, 132, 29, 0.3);

}
.submenu-institucion > li:hover > a{
  color: #000000;
 font-weight: bold !important ;
}
.submenu-institucion li{
  position: relative !important;
}
.nav li:hover .submenu-institucion{
  display: block !important;
}


.institucion-submenu{
  display: none !important;
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  width: 50vw !important;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1)
}


.submenu-institucion li:hover > .institucion-submenu{
  display: block !important;
  position: absolute !important;
  box-shadow: none;
}
.institucion-submenu li:hover > a {
  font-weight: bold !important;
  color: #000000;
}


.idiomas-subdominio{
  display: none !important;
  position: absolute !important;
  left: 100% !important;
  top: -600% !important;
  height: 40vh !important;

}
.idiomas-subdominio li:hover > a{
  font-weight: bold ;
  color: #000000;
}
.idiomas-subdominio li:hover {
  width: 10vw;
}
.submenu-institucion li:hover > .idiomas-subdominio{
  display: block !important;
  position: absolute;
}



.submenuestudianosotros{
  display: none !important;
  background-color: #fff;
  width: 14vw;
  position:absolute !important;
  top: 100% !important;
  left: 0 !important;
}

.submenuestudianosotros li{
  padding: 5px;
}
.submenuestudianosotros li a{
  font-size: 13px;
  font-weight: normal;
}
.submenuestudianosotros li:hover a{
  color: #000000;
  font-weight: bold;
}
.nav li:hover .submenuestudianosotros{
  display: block !important;

 
}

.submenu-programas{
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: -600% !important;
  background-color: #fff !important;
  width: 1500px ;
}
.submenu-programas li{
  background-color: #fff;
  padding: 5px !important;
  width: 15vw !important;
  z-index: 100% !important;
  position: relative !important;
}
.submenu-programas li a{
  color: #000000;
  font-weight: normal;
  font-size: 13px;
}

.submenu-programas li:hover {
  background-color: rgba(221, 132, 29, 0.3);

}

.submenu-programas li:hover a{
  font-weight: bold;
  color: #ff6a00;
}
.nav li:hover .submenu-programas{
  display: block !important;
}

.submenu-progra-proacademicos{
  display: none !important;
  position: absolute !important;
  top: 0;
  left:  100% !important;
}
.submenu-progra-proacademicos li{
  position: relative !important;
}
.submenu-progra-proacademicos li a{
  color: #000000 !important;
  font-weight: normal !important;
}
.submenu-progra-proacademicos > li:hover > a{
  font-weight: bold !important;
  color: #ff6a00 !important;
}
.submenu-programas li:hover .submenu-progra-proacademicos{
  display: block !important;
}




.submenu-progra-proacademicos-prebogota{
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
}
.submenu-progra-proacademicos-prebogota li a{
  color: #000000 !important;
  font-weight: normal !important;
}

.submenu-progra-proacademicos-prebogota > li:hover > a{
  color: #ff6a00 !important;
  font-weight: bold !important;

}

.submenu-progra-proacademicos li:hover .submenu-progra-proacademicos-prebogota{
  display: block !important;
}



.submenu-pregradovirtual{
  display: none !important;
  position: absolute !important;
  Top: -40px !important;
  left: 100% !important;
  background-color: #fff !important;
}

.submenu-pregradovirtual li{
  background-color: #fff;
  width: 20vw !important;
  z-index: 100 !important;
}
.submenu-pregradovirtual li:hover a{
  color: #ff6a00 !important;
  font-weight: bold !important;

}
.submenu-progra-proacademicos li:hover .submenu-pregradovirtual{
  display: block !important;
}





.submenu-posgrado-bogota{
  display: none !important;
  position: absolute !important;
  left: 100% !important;
  top: -190%;
  width: 70vw !important;
  background-color: #fff;
}
.submenu-posgrado-bogota li{
  width: 22vw !important;
}
.submenu-posgrado-bogota li:hover a{
  color:#ff6a00 !important;
  font-weight: bold !important;
}




.submenu-progra-proacademicos li:hover .submenu-posgrado-bogota{
  display: block !important;
}


.submenu-posgradovirtual{
  display: none !important;
  position:absolute !important;
  top: -320% !important;
  left: 100% !important;
  background-color: #fff;
}
.submenu-posgradovirtual li:hover a{
  color: #ff6a00 !important;
  font-weight: bold !important ; 
}
.submenu-progra-proacademicos li:hover .submenu-posgradovirtual{
  display: block !important;

}




.submenu-proyectos-especiales{
  display: none !important;
  position: absolute !important;
  top: -310% !important;
  left: 100% !important;
  height: 20vh;
}
.submenu-proyectos-especiales li a{
color: #000000 !important;
font-weight: normal !important;
}

.submenu-proyectos-especiales li:hover a{
  font-weight: bold !important;
  color: #ff6a00 !important;
}
.submenu-programas li:hover .submenu-proyectos-especiales{
display: block !important;
}












.submenu-faculta-de-ingenieria-pregrado-bogota{
  display: none !important;
  position: absolute !important;
  left: 100% !important;
  top: 0% !important;
  background-color: #fff;
}
.submenu-faculta-de-ingenieria-pregrado-bogota li:hover a{
  color: #ff6a00 !important;
  font-weight: bold !important;
}


.submenu-progra-proacademicos-prebogota li:hover .submenu-faculta-de-ingenieria-pregrado-bogota{
  display: block !important;
}

.submenu-faculta-de-ciencias{
  
  display: none !important;
  position: absolute !important;
  left: 100% !important;
  top: -70% !important;
  background-color: #fff ;
}
.submenu-faculta-de-ciencias li:hover a{
 color: #ff9000 !important;
 font-weight: bold !important;
}

.submenu-progra-proacademicos-prebogota li:hover .submenu-faculta-de-ciencias{
display: block !important;

}


.submenu-esculadenegocios{
  display: none !important;
  position: absolute !important;
  left: 100% !important;
  top: -300%;
  background-color: #fff;
}


.submenu-esculadenegocios li:hover a{
  
color: #ff6a00 !important;
font-weight: bold !important;

}


.submenu-progra-proacademicos-prebogota li:hover .submenu-esculadenegocios{
  display: block !important;
}








.submenu-financiera{
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0% !important;
  background-color: #fff;
  width: 30vw;
}
.submenu-financiera a{
  font-weight: normal;
  font-size: 12px !important;
  margin-left: 5% !important;
}

.submenu-financiera li:hover a{
color: #000000 ;
font-weight: bold;

}
.submenu-financiera2{
left: 8% !important;
list-style:  square !important;

}
.submenu-financiera2 a{
  margin-left: -1% !important;
}
.nav li:hover .submenu-financiera{
  display: block !important;
}















.menu-superiror a:hover{
  text-decoration: dotted;
  
}
.menusuperior ul{
display:flex;align-items:center;gap:1.4rem;list-style:none;flex-wrap:nowrap}
.menusuperior ul li{
white-space: nowrap;
}
.hero{position:relative;overflow:hidden}
.hero-media{
  position:absolute; inset:0;
  background-image:url('https://ucompensar.edu.co/wp-content/uploads/2023/07/baner-estudisntes.jpg?id=14666');
  background-position:center;
  background-repeat: no-repeat;
  height: 245px;
  filter:contrast(1.05) saturate(.95);
}
.hero-overlay{
  position:absolute; inset:0;
}
.hero .hero-inner{position:relative;display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;padding:3.4rem 0 2.8rem}
.hero h1{color:#fff;font-size:clamp(1.9rem,2.6vw + 1rem,3rem);font-weight:800;letter-spacing:.2px}
.hero .btn{background:#fff;color:#111;box-shadow:none}

.cards{display:grid;gap:1.8rem;grid-template-columns:repeat(3, minmax(0,1fr))}
.card{
  position:relative;border-radius:22px;overflow:hidden;min-height:250px;background:#0b1220;color:#fff;text-decoration:none;outline:0;
  transform:translateZ(0);transition:transform .25s ease, box-shadow .25s ease;will-change:transform
}
.card:focus-visible{box-shadow:0 0 0 3px rgba(255,106,0,.45)}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 40px rgba(2,6,23,.28)}
.card-media{position:absolute;inset:0;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .35s ease}
.card:hover .card-media img{transform:scale(1.1)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.1) 20%, rgba(0,0,0,.55) 100%);pointer-events:none}

.card-content{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
}
.card-title{font-size:1.4rem;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.card-subtitle{
  margin-top:.35rem; font-size:1rem; font-weight:600; opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease; color:#e5e7eb
}
.card:hover .card-subtitle, .card:focus-visible .card-subtitle{opacity:1; transform:translateY(0)}

.footer{
  background-color: #4e5357;
  width: 100% !important;
  height: 80vh;
  position: relative;
}
.footer-logo{
  position: absolute !important;
  left: -2%;
  top: 5%;
  bottom: unset;
  margin: 5%;
  margin-bottom: 110px;
  max-width: 350px;
}

#correo{
  color: #ff6600;
  text-decoration: underline;
  transition: all 0.3s ease;
  transition-behavior: normal;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;
    position: absolute;
    top: 54%;
    left: 3%;
    font-size: 12px;
    
}
.footer-tex-uni{
  color: #ffffff;
  font-size: 12px;
  line-height: 24px;
  position: absolute;
  top: 35%;
  left: 3%;
  margin: 0px 0px 15px 0px;
}

.footer-redes{
  color: #ffffff;
  font-size: 16px;
  float: left;
  position: absolute;
  top: 59%;
  left: 3%;
  white-space: nowrap;
  margin-top: 10px;
}

.footer-redes-imagenes{
  display: flex;
  gap: 5px;
  position: absolute;
  top: 62%;
  left: 19%;
}



.container-info{
  background-color: #707070;
  display: flex;
  flex-wrap: wrap;
  width: 50vw !important;
  height: 35vh;
  position: absolute;
  top: 55%;
  bottom: 0;
  margin-top: -15%;
  border-radius: 10px;
  gap: 2%;
}
.info-box{
  padding: 20px 30px;
}
.info-box h3{
color: #ff6600;
margin-bottom: 20px;
}
.info-box p{
  color: #ffffff;
  font-size: 12px !important;
}

.info-box hr{
  margin-top: 20px;
  margin-bottom: 20px;
}

.info-box-imagenes{
  width: 146px;
  height: 200px;
  max-width: 130%;
  margin-top: 20px;
}


.info-footer-links{
  position: absolute;
  bottom: 0%;
  left: 25%;
  text-align: center;
  font-size: 12px;
  margin-bottom: 60px;
}
.info-footer-links a{
  text-decoration: none;
  padding-left: 10px;
  color: #ffffff;
}
#info-link{
  margin-bottom: 10px;
  color: #ff6a00;
  font-size: 16px;
}
.info-footer-links button{
  border-radius: 40px;
  background-color: #ff6a00;
  border-color: #ff6a00;
  width: 10vw;
  margin-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  
}
.info-footer-links hr{
  margin-bottom: 10px;
  width: auto;
}










.fab{position:fixed;right:18px;bottom:18px;border:0;border-radius:999px;width:54px;height:54px;font-size:22px;cursor:pointer;box-shadow:0 12px 26px rgba(0,0,0,.3);background:#fff}
.fab-whatsapp{bottom:82px}
@media (min-width: 1366px) and (max-width: 1920px) {
  :root {
    --container: 1200px; /* ancho del contenedor más grande */
    --radius: 20px;      /* bordes ligeramente más redondeados */
  }

  body {
    font-size: 18px;     /* texto más grande */
  }

  .logo-dot {
    width: 350px;
    height: 50px;
    left: -50px !important;
  }

  .nav a {
    font-size: 20px;
  }

  .btn {
    padding: 1rem 1.5rem;
  }

  .card {
    min-height: 300px;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 2.8vw + 1rem, 3.5rem);
  }

  .container-info {
    width: 900px;
    left: 650px;
    gap: 20px;
  }
}