*{padding: 0; margin: 0;text-decoration: none; list-style: none; scroll-behavior: smooth;}

body {background-color: #000000 !important ; }
.topbar{ background-color: #000; font-family: 'Montserrat', sans-serif; font-size: 14px; display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; padding-top: 8px; padding-bottom: 8px; }
.icon-whatsapp{color: #0d57ff; text-decoration: none;}
.icon-social{color: #0d57ff; padding-right: 10px; padding-left: 10px;}

/*  ----------- HEADER/Menú Desktop ----------- */
header {background-color: rgba(0,0,0,1); display: flex; position: sticky; top: 0; justify-content: space-between; align-items: center; z-index: 999; animation: enhance-header linear both;}
.logo-header img{height: 30px;  padding-left: 30px; padding-top: 0px;}
.nav-menu ul{ display: flex; align-items: center;}
.nav-menu li{ margin-right: 1.5rem;}
.nav-menu a, li {font-family: 'Montserrat', sans-serif; font-size: 16px; color: #fff; text-decoration: none !important;}
.nav-menu a:hover{color: rgb(0, 192, 102);}

/*  ----------- HEADER/Menú Mobile ----------- */
.menu-icon img{width: 50px; height: 50px; border-radius: 2px;}
.menu-icon, #check{display: none;}

/* Media Querys para el responsive del menú */
@media (max-width:768px){
.checkbtn{display: block;}
.menu-icon{display: block; position: relative; top:5px; right: 10px; cursor: pointer;} 
.nav-menu ul{display: block; position: fixed; top:50px; left: -100%; background: #0f0f0f; width:100%; height:100vh; right: 0; z-index: 1;}
.nav-menu ul li{padding: 2rem; display:flex; justify-content: center; margin: 0;}
.nav-menu ul li:last-child{background: none; padding: 1rem;}
#check:checked ~ ul{left: 0; transition: all 1.5s;}
}

/* Media Querys Animación Back Menú */
@keyframes enhance-header {
    to { background: rgba(0,0,0,.4);
    backdrop-filter: blur(15px);}
}

/* ----------- CONTENIDO ----------- */
/* Descripción proyecto */
.description-bluenet { background-color: #a9c6ed; min-height: 800px;}
.description-corona {background-color: #ededed;min-height: 800px;}
.description-royal { background-color: #f89d26; min-height: 800px;}
.description-soriana { background-color: #84bd8a; min-height: 800px;}
.description-solaz { background-color: #968679; min-height: 800px;}

/* Actualización 14 Febrero, se agrega el parámetro max width para forzar las imágenes a la medida*/
/* #imghead {position: absolute; margin-left: 45%; max-width:700px;}
@media only screen and (max-width:1200px){ #imghead {opacity: 0.25;}} */

.astro-corona {position: absolute; z-index: 0; right: 0; margin: -1% 8% 0 0; /*margin-left: 45%;*/}
@media (max-width: 575px) {.astro-corona {margin: 10% 0 0 0;}}
@media (min-width: 576px) and (max-width: 768px) {.astro-corona {margin: 0 3% 0 0;}}
@media (min-width: 768px) and (max-width: 991px) {.astro-corona {margin: 0 3% 0 0;}}
@media (min-width: 992px) and (max-width: 1200px) {.astro-corona {margin: 0 5% 0 0;}}

.astro-corona img {height: 600px;width: auto;}
@media (max-width: 575px) {.astro-corona img {width: 400px;height: auto;}}
@media only screen and (max-width:1200px) {.astro-corona img{opacity: 0.25;}}

.wrapper-description {position: relative; z-index: 0; padding: 20vh 3vw; max-width: 1300px; margin: 0 auto; min-height: 350px;}
@media (max-width: 575px) {.wrapper-description {padding: 0vh 3vw; max-width: 1300px; margin: 0 auto; min-height: 350px;}}

.client-logo {max-width: 300px; position: relative; margin-top: 100px;}
.main-logo {max-width: 400px; position: relative; margin-top: 150px;}
@media (max-width: 575px) {.main-logo { max-width: 300px;position: relative;margin-top: 150px;}
}
.bnr-ttl { width: 80%; padding-top: 70px;}
.bnr-ttl h1 {font-family: "Montserrat"; font-size: 26px ; color:#292929; position: relative; margin-top: 10px;}
.bnr-ttl p {font-family: "Montserrat"; font-size: 14px ; color:#292929; position: relative;margin-top: 10px}
.bnr-ttl p {text-transform: uppercase;}
.bnr-opt {display:flex; width: 80%; margin-top: 40px; justify-content: space-between; flex-wrap: wrap;}
.bnr-opts strong {font-family: "Montserrat"; font-size: 14px; color: #292929; position: relative;}
.ltt-cap {font-family: "Montserrat"; font-size: 14px; color: #292929; position: relative; margin-bottom: 15px;}
.ltt-cap {text-transform: uppercase; }

/* CONTENEDORES */

/* Generales */
.card-container-gral {width: 80rem; height: 50dvh auto; background-color: #0f1317; border: 1px solid #575757; border-radius: 25px; position: relative; margin: 20px auto; padding: 20px 20px;  animation: cardreveal linear both; animation-timeline: view(); animation-range: entry 40% cover 50%;}
.card-container-int {width: auto; height: 50dvh auto; border-radius: 25px; position: relative; margin: 20px auto; padding: 20px 20px;}
.container-clean {position: relative; max-width: 1010px; margin: 100px auto; animation: cardreveal linear both; animation-timeline: view(); animation-range: entry 30% cover 40%;}
.card-border {position: relative; max-width: 1010px; height: 40dvh auto; background-color: rgba(16, 16, 16, 0.5); border: 1px solid #575757; border-radius: 25px; margin:10px auto; padding: 20px 20px; backdrop-filter:blur(7px); animation: cardreveal linear both; animation-timeline: view(); animation-range: entry 30% cover 40%;}
.card-numbers {position: relative; max-width: 850px; height: 40dvh auto; border: 1px solid #7D4CFF; border-radius: 25px; margin:10px auto; padding: 20px 20px;}
.card-contacto {position: relative; max-width: 1010px; height: 40dvh auto; background-color: rgb(0, 0, 0,); border: 1px solid #575757; border-radius: 25px; margin:10px auto; padding: 20px 20px; }

.focus-logo {position: relative; height: 50vh; display: flex; max-width: 1350px; margin: 100px auto; align-items: center; justify-content: center;}
.qoute {position: relative; display: flex; margin-top: 0px; align-items: center; justify-content: center;}

/* Contador */
.counter-up { background:black; min-height: 50vh; display: flex; align-items: center; padding: 0 50px; position: relative;}
.counter-up .content { position: relative; display: flex; width: 100%; height: 100%; flex-wrap: wrap; align-items: center;justify-content: space-between;}
.content .box { width: calc(25% - 30px); background-color: #4d44b4; padding: 20px; display: flex; align-items: center; justify-content: space-evenly; color: #fff; flex-direction: column; border-radius: 5px; margin-top: 10px; margin-bottom: 10px;}
.content .box .icon {font-size: 40px;color: #776cf0;}
.content .box .counter {font-size: 50px; color: #ffffff; font-weight: 500; font-family: sans-serif;}
.content .box .text1 { color: #776cf0; font-weight: 400; font-family: sans-serif; align-content: center;}
.content .box .text2 { color: #ffffff; font-weight: 400; font-family: sans-serif; align-content: center;}

@media (max-width: 1036px) {.counter-up{padding: 50px 50px 0 50px;} .content .box { width: calc(25% - 30px); margin-bottom: 50px; }}

/* Postals */
.postals {columns: 2; max-width: 1000px; column-gap: 10px; margin: 50px auto;}
.postals img {border-radius: 4px; width: 100%; height: auto; margin-bottom: 32px; animation: reveal linear both; animation-timeline: view();animation-range:  entry 20% cover 50%;}

/* Output */
.output {margin:100 auto;}

/* Estilos textos*/
.title-intro {font-family: "Montserrat"; font-size: 36px; font-weight: 600 ; color: #ffffff; padding: 50px 0px 20px 20px; animation: textreveal linear both; animation-timeline: view(); animation-range: entry 30% cover 50%;}
.title-contacto {font-family: "Montserrat"; font-size: 36px; font-weight: 600 ; color: #ffffff; padding: 50px 0px 20px 20px;}
.title-cta {font-family: "Montserrat"; font-size: 36px; font-weight: 600 ; color: #ffffff; padding: 50px 0px 20px 20px;}
.subnumber-intro {font-family: "Montserrat"; font-size: 36px; font-weight: 600; color: #7D4CFF; padding: 20px 0px 0px 20px ; animation: textreveal linear both; animation-timeline: view(); animation-range: entry 30% cover 50%;}
.subnumber-contacto {font-family: "Montserrat"; font-size: 36px; font-weight: 600; color: #7D4CFF; padding: 20px 0px 0px 20px ; }
.link-proyecto {font-family: "Montserrat"; font-size: 18px; line-height: 1.5; color: #7D4CFF; text-align: justify; text-decoration: underline;}

.subtitle {font-family: "Montserrat"; font-size: 18px; line-height: 1.5; color: #7D4CFF; padding-left: 20px; text-align: justify; text-transform: uppercase; }
.copy {font-family: "Montserrat"; font-size: 18px; line-height: 1.5; color: #c5c5c5; margin-top: 5px; padding: 20px ; text-align: justify;}

/* Media Querys Animaciones Textos*/
@keyframes textreveal {from { opacity: 0; translate: 0px 100px;} to { opacity: 1; translate: 0 0;}}
@keyframes cardreveal {from { opacity: 0; translate: 0px 100px;} to { opacity: 1; translate: 0 0;}}

/* Imágenes FadeIn */
.mockup img { width: 100vw; margin: auto; animation: reveal linear both; animation-timeline: view(); animation-range: entry 25% cover 50%;}
/* Media Querys Imágenes FadeIn*/
@keyframes reveal {from {opacity: 0; translate: 0px 100px;} to {opacity: 1;  translate: 0px 0px;}}

/* Backgrounds*/
.background-general {width: 100%; height: 100%; position: relative; display:flex; align-items: center;}


/*  ----------- FOOTER ----------- */
.footer{background-color: #000000; position: absolute; padding-bottom: 0; width: 100%; display: flex; padding-top:8px; padding-bottom:8px; z-index: -10;}
.footer ul {display:flex; }
.footer li {margin-left: 15px;}
.nav-footer a, li {font-family: 'Montserrat', sans-serif; font-size: 12px; color: #7D4CFF;}