*{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 ----------- */
/* Blog Intro */
.wrapper-header {max-width: 1300px; margin: 0px auto; min-height: 250px; padding-left: 70px; background-image: url(../img/blog/DVN_BLG-tendencias-desarrollo-web-y-movil-head.webp); background-repeat: no-repeat ; background-repeat: none; background-size: cover;}

.bnr-ttl { width: 80%; padding-top: 50px;}
.bnr-ttl h1 {font-family: "Montserrat"; font-size: 26px ; color:#fff; position: relative; margin-top: 10px;}
.bnr-ttl p {font-family: "Montserrat"; font-size: 14px ; color:#fff; 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: #fff; position: relative;}
.ltt-cap {font-family: "Montserrat"; font-size: 14px; color: #fff; position: relative; margin-bottom: 15px;}
.ltt-cap {text-transform: uppercase; }

/* CONTENEDORES */

/* Generales */
.card-blog {position: relative; max-width: 1200px; background-color: rgba(16, 16, 16, 0.5); border: 1px solid #575757; border-radius: 25px; margin:50px auto; padding: 20px 20px;}

/* Lista */
ul { position: relative; }

.qoute {position: relative; display: flex; margin-top: 0px; align-items: center; justify-content: center;}

/* Estilos textos*/
.title-blog {font-family: "Montserrat"; font-size: 36px; font-weight: 600 ; color: #ffffff; padding: 50px 0px 20px 20px;}
.title-intro {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 ;}
.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;}
.blog-autor { position: relative; font-family: "Montserrat"; font-size: 18px; line-height: 1.5; color: #7D4CFF; padding-left: 20px; text-align: justify; text-transform: uppercase; }

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


/* Share Button */
.container{ width: 100%; height: 10vh; display: flex; justify-content: left; align-items: left; padding-left: 20px; padding-top: 20px;}

.share-btn { position: relative; border: none; background: #7D4CFF; color:#fff; border-radius: 30%; width: 30px; height: 30px; font-size: 20px; padding-top: 3px; padding-right: 3px; cursor: pointer; z-index: 2;}
.share-options { position: relative; bottom: 170px; left: 5px; max-width: 370px; height: 130px; transform-origin: bottom left; transform: scale(0); border-top-left-radius: 20px; border-bottom-right-radius: 20px; background: rgb(137, 137, 137); color: #fff; padding: 20px; font-family:"Montserrat"; font-size: 16px; transition: .5s; transition-delay: .5s;}
.share-options.active{ transform: scale(1); transition-delay: 0s;}
.share-title {opacity: 1; transition: 0.5s; transition-delay: 0s; font-family:"Montserrat"; text-transform: uppercase; font-size: 20px; border-bottom: 1px solid #fff; padding: 0 20px 3px 0;}
.social-media{ opacity: 1; transition: 0.5s; transition-delay: 0s; width: auto; display: flex; align-items: center; flex-wrap: wrap; margin: 10px 0;}
.social-media-btn { border: none; width: 35px; height: 35px; border-radius: 50%; background: #000; color: #fff; line-height: 35px; font-size: 20px; cursor: pointer; margin: 0 5px;text-align: center;}

.social-media-btn:nth-child(1){ background: #FFA654;}
.social-media-btn:nth-child(2){ background: #25D366;}
.social-media-btn:nth-child(3){ background: #E4405F;}
.social-media-btn:nth-child(4){ background: #1DA1F2;}
.social-media-btn:nth-child(5){ background: #1877F2;}
.social-media-btn:nth-child(6){ background: #0A66C2;}

.link-container {opacity: 1; transition: 0.5s; transition-delay: 0s; width: 100%; position: relative; height: 40px; display: flex; align-items: center; border-radius: 40px; background-color: #fff; overflow: hidden; padding: 0 5px;}
.link { width: 80%; height: 100%; line-height: 40px; color: #000;}
.copy-btn {position: absolute; right: 0; cursor: pointer; background: #000; color: #fff; border: none; height: 100%; width: 30%; text-transform: capitalize; font-size: 16px;}

.share-options.active .title
.share-options.active .social-media
.share-options.active .link-container {opacity: 1; transition: 0.5s; transition-delay: 0.5s; }


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