*{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: #868686; min-height: 800px;}
.description-soriana { background-color: #b8e0b5; 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; margin-left: -45px;}
.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: 1350px; margin: 100px auto; animation: cardreveal linear both; animation-timeline: view(); animation-range: entry 30% cover 40%;}
.card-border {position: relative; max-width: 1350px; 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-contacto {position: relative; max-width: 1000px; 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;}


/* 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;}
.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 ; }

.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;}