@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    --body-color: hsl(13, 100%, 74%);
    --nav-color:orangered;
    --side-nav:#010718;
    --text-color:#fff;
    --search-bar:#F2F2F2;
    --search-text:#010718;
    --negro--luna:#242526;
    --accent: rgb(212, 255, 0);
    --accent-hover: rgb(190, 228, 0);
    --accent-active: #72d534;
    --control: #49aa00;
    --secondary: #ECEFEB;
    --secondary-hover: #E0E4DE;
    --secondary-active: #6c6c6b;
    --headline-color: rgba(100, 105, 150, 1);
    --event-text: rgba(29, 32, 59, 1);
    --success: rgba(80, 189, 85, 1);
    --error: rgba(232, 113, 113, 1);
    --white: rgba(255, 255, 255, 1);
    --accent-text: #163300;
    --hue: 14;
    --first-color: hsl(var(--hue), 91%, 54%);
    --first-color-light: hsl(38, 100%, 78%);
    --first-color-alt: hsl(32, 75%, 50%);
    --second-color: hsl(195, 75%, 52%);
    --dark-color: hsl(212, 40%, 12%);
    --white-color: hsl(212, 4%, 95%);
    --container-color: hsl(212, 42%, 20%);
    --white: #FFF;
    --gray: #F3F3F3;
    --background: #060D23;
    --tab-background: #383D4F;
    --gray-dark: #3e3e3e;
    --gray-hover: #F7F7F7;
    --primary-blue: #00E0FE;
    --blue-gray: #BBCFD5;
    --text-white: #F7FAFF;
    --text-gray: #B5B8BC;
    --card-bg: #222429;
    --bg: #141419;

}


body{
    height: 100vh;
    background-image: linear-gradient(90deg, var(--body-color) 0%, hsl(321, 93%, 28%) 50%, hsl(321, 93%, 18%) 100%);
}

body.dark{
    --body-color:#18191A;
    --nav-color:#242526;
    --side-nav:#242526;
    --text-color:#CCC;
    --search-bar:#242526;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    width: 100%;
    background-image: linear-gradient(90deg, var(--body-color) 0%, hsl(321, 93%, 28%) 50%, hsl(321, 93%, 18%) 100%);
    z-index: 100;
}

body.dark nav {
    background-image: linear-gradient(to right, var(--negro--luna) 0%, var(--negro--luna) 100%);
}

nav .nav-bar {
    position: relative;
    height: 100%;
    max-width: 1200px;
    width: 100%;
    background-image: z-gradient(to right, var(--body-color) 0%, hsl(9, 92%, 54%) 50%, hsl(9, 92%, 54%) 100%);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.dark .nav-bar{
    background-image: linear-gradient(to right, var(--negro--luna) 0%, var(--negro--luna) 100%);
}

nav .nav-bar .sidebarOpen{
    color: var(--text-color);
    font-size: 25px;
    padding: 5px;
    cursor: pointer;
    display: none;
}

nav .nav-bar .logo a{
    font-size: 25px;
    font-weight: 500;
    color:var(--text-color);
    text-decoration: none;
}

.menu .logo-toggle{
    display: none;
}

.nav-bar .nav-links{
    display: flex;
    align-items: center;
}

.nav-bar .nav-links li{
    margin: 0 5px;
    list-style: none;
}

.nav-links li a{
    position: relative;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    padding: 10px;
}

.nav-links li a::before{
    content: '';
    position: absolute;
    left: 50px;
    bottom: 0;
    transform: translate(50%);
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: var(--text-color);
    opacity: 0;
    transition: all 0.3s ease;
}

.nav-links li:hover a::before{
    opacity: 1;
}

.nav-bar .darkLight-searchBox{
 display: flex;
 align-items: center;
}

.logo-img{
    width: 3rem;
    height: 3rem;
}

@media (max-width: 48.0rem) {
    .logo-img{
        width: 8rem;
        height: 2rem;
        margin-left: 3rem;
        display: none;
       
    }
}

.darkLight-searchBox .dark-light,
.darkLight-searchBox .searchToggle{
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: z-gradient(to right, var(--body-color) 0%, hsl(9, 92%, 54%) 50%, hsl(9, 92%, 54%) 100%);
    margin: 0 5px;
}

.dark-light i,
.searchBox i{
    position: absolute;
    color: var(--text-color);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3 ease;
}

.dark-light i.sun{
    opacity: 0;
    pointer-events: none;
}

.dark-light.active i.sun{
    opacity: 1;
    pointer-events: auto;
}

.dark-light.active i.moon{
    opacity: 0;
    pointer-events: none;
}

.searchToggle i.cancel{
    opacity: 0;
    pointer-events: none;
}

.searchToggle.active i.cancel{
    opacity: 1;
    pointer-events: auto;
}

.searchToggle.active i.search{
    opacity: 0;
    pointer-events: none;
}

.searchBox .search-field{
    position: absolute;
    bottom: -85px;
    right: 5px;
    height: 50px;
    width: 300px;
    display: flex;
    align-items: center;
    background-color: var(--nav-color);
    padding: 3px;
    border-radius: 6px;
    box-shadow: 0 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transform: all 0.3s ease;
}

.searchToggle.active ~ .search-field{
    bottom: -74px;
    opacity: 1;
    pointer-events: auto;

}

.search-field::before{
    content: '';
    position: absolute;
    right: 14px;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: var(--nav-color);
    transform: rotate(-45deg);
    z-index: -1;
}

.search-field input{
    height: 100%;
    width: 100%;
    padding: 0 45px 0 15px;
    outline:  none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--search-text);
    background-color: var(--search-bar);
}

body.dark .subtitulo-container1.search-field input{
    color: var(--text-color);
}

body.dark .subtitulo-container1,
body.dark .event-description h2{
    color: #CCC;
}

body.dark .search-field i{
    color: var(--text-color);
}

body.dark .dispositivos,
body.dark .dispositivos_des{
    background-color:var(--side-nav);
    color: #ccc;
}

.search-field i{
    position: absolute;
    color: var(--nav-color);
    right: 15px;font-size: 22px;
    cursor: pointer;
}

@media (max-width: 790px) {

    nav .nav-bar .sidebarOpen{
      display: block;
    }

    .menu{
        position: fixed;
        height: 100%;
        width: 320px;
        left: -100%;
        top: 0;
        padding: 20px;
        background-image: linear-gradient(to right, #000000 0%, #333333 100%);
        z-index: 100;
        transition: all 0.4s ease;
    }

    .menu .logo-toggle{
        display: block ;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    nav.active .menu{
        left: -0%;
    }

    nav.active .nav-bar .navLogo a{
        opacity: 0;
        transition: all 0.3s ease;
    }

    .logo-toggle .sidebarClose{
        color: var(--text-color);
        font-size: 24px;
        cursor: pointer;
    }

    .nav-bar .nav-links{
       flex-direction: column;
       padding-top: 30px;
       background-image: z-gradient(to right, var(--body-color) 0%, hsl(9, 92%, 54%) 50%, hsl(9, 92%, 54%) 100%);
    }

    .nav-links li a{
        display: block;
        margin-top: 20px;
    }

}

.e {
    background-image: linear-gradient(90deg, var(--body-color) 0%, var(--body-color) 50%, var(--body-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @media (max-width: 48.0rem) {
    .e {
        background-image: linear-gradient(90deg, var(--body-color) 0%, var(--body-color) 50%, var(--body-color) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      } 
  }
  
  
  
  .tv {
    background: linear-gradient(90deg, #f6ff4c 0%, #fd8f08 90%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
   }


   .title {
    display: flex;
    align-items: center; 
}


.ecu-menu{
    width: 2.5rem;
    height: 1.5rem;
    margin-left: 0.5rem;
}

@media (max-width: 48.0rem) {
    .ecu-menu{
        width: 10rem;
        height: 6rem;
        margin-left: 3.8rem;
    }
}

.ecu-menu1{
    width: 2.5rem;
    height: 1.5rem;
    margin-left: 0.5rem;
}
@media (max-width: 48.0rem) {
    .ecu-menu1{
        width: 2rem;
        height: 1.3rem;
        margin-top: 0.1rem;
    }
}

.topic{
    margin-top: -0.5rem;
    margin-bottom: 2rem;

}
.des{
    margin-bottom: 3rem;
 }


@media (max-width: 76.8rem) {
    .title{
        margin-top: 1.2rem;
    }
    .topic{
        margin-top: 0.25rem;
        margin-bottom: 1.5rem;
        
    }
    .des{
       margin-bottom: 5rem;
    }
    }

.carousel .list .item .topic{
    color: #f3f2f2;
}

body.dark .carousel .list .item .topic {
    color: #CCC; 
}

.carousel .list .item .buttons{
    display: grid;
    grid-template-columns: repeat(2, 170px);
    grid-template-rows: 40px;
    gap: 20px;
    margin-top: 25px;
}

@media (max-width: 76.8rem) {
    .carousel .list .item .buttons{
        grid-template-columns: repeat(2, 150px);
        grid-template-rows: 40px;
        gap: 10px;
        margin-top: -3rem;
    }
}

.carousel .list .item .buttons a{
    border: none;
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    letter-spacing: 0px;
    font-family: Poppins;
    font-weight: 500;
    border-radius: 1rem;
    color: #f3f2f2;
}

.carousel .list .item .buttons a:nth-child(2){
    background-color: transparent;
    border: 1px solid #fff;
    color: #eee;
    border-radius: 1rem;
}

.carousel .list .item .buttons a:hover {
    background-image: linear-gradient(to right, #9cff9c 0%, #006400 100%);
    color: var(--f3f2f2) !important; 
}

body.dark .carousel .list .item .buttons a:hover {
    background-image: linear-gradient(to right, #9cff9c 0%, #006400 100%);
    color: var(--f3f2f2) !important; 
}

.carousel .list .item .buttons a:hover i {
    color: #f3f2f2 !important; 
}

a {
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-decoration: none;
    font-size: 0.8rem; 
    text-align: center;
    color: var(--side-nav);
    font-weight: 300;
}

.buttons i{
    color: #00b421;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
}
.thumbnail {
    position: absolute;
    bottom: 20%;
    left: 60%; 
    transform: translate(-50%, 50px); 
    z-index: 1;
    display: flex;
    gap: 20px;
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s 1.5s linear 1 forwards;
    background-color: #00E0FE;
}


@media (max-width: 48.0rem) {
    .thumbnail {
            display: none;
    }
}


.thumbnail img{
    width: 80%;
}

@media (max-width: 48.0rem) {
    .thumbnail img{
        width: 80%;
    }
      
}


.arrows{
    position: absolute;
    top: 80%;
    right: 52%;
    z-index: 1;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 76.8rem) {
    .arrows{
        right: 62%;
    }
}

.arrows button{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee4;
    border: none;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    transition: .5s;
}
.arrows button:hover{
    background-color: #fff;
    color: #000;
}



@keyframes showImage{
    to{
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}


.dispositivos{
    padding: 8rem 2rem 0rem 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 40rem;
    color: #fff;
    background-image: url(../image/metodo3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 76.8rem) {
    .dispositivos{
        background-image: url(../image/metodo3.jpg);

        padding: 8rem 2rem 0rem 2rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        height: 40rem;
    }
}

.dispositivos h2, .dispositivos_des h2, .reseller h2, .cli h2{
font-weight: bold;
font-size: 2.4rem; 
color: #fff;
}

@media (max-width: 76.8rem) {
    .dispositivos h2{
        font-weight: bold;
        font-size: 1.8rem;
        }
}

@media (max-width: 76.8rem) {
     .dispositivos_des h2 {
        font-weight: bold;
        font-size: 1.8rem;
        padding: 0rem 1rem 0rem 1rem;
        }
}

@media (max-width: 76.8rem) {
    .reseller h2{
       font-weight: bold;
       font-size: 1.8rem;
       padding: 0rem 1.8rem 0rem 1.8rem;
       }
}

@media (max-width: 76.8rem) {
    .cli h2{
       font-weight: bold;
       font-size: 1.8rem;
       padding: 0rem 1.8rem 0rem 1.8rem;
       
       }
}

.dispositivos p{
    margin-top: 2rem;
    margin-bottom: 3rem;
    line-height: 1.6rem;
    color: #f3f2f2;
}

@media (max-width: 76.8rem) {
    .dispositivos p{
        margin-top: 2rem;
        margin-bottom: 4rem;
        line-height: 1.6rem;
    }
}

a {
    text-decoration: none;
  }

.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.dispositivos.fade-in-visible .fade-in,
.dispositivos_des.fade-in-visible .fade-in,
.cli.fade-in-visible .fade-in,
.reseller.fade-in-visible .fade-in
  {
    opacity: 1;
    transform: translateY(0);
}

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .container {
    margin-top: -2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30vh;
  }

  @media (max-width: 76.8rem) {
    .container {
        margin-top: 1rem; 
        height: 33vh;
      }
  }

  .card__container {
    padding-block: 5rem;
    height: 85%; 
  }

  @media (max-width: 76.8rem) {
    .card__container {
        padding-block: 5rem;
        height:90%;
      }
  }

  .card__content {
    margin-inline: 1.75rem;
    border-radius: 1.25rem;
    overflow: hidden;
  }

  .card__article {
    width: 300px;
    border-radius: 1.25rem;
    overflow: hidden;
  }

  body.dark .card__image{
    /* background-image: linear-gradient(to left, #000000 100%, #4a4a4a 100%); */
  }

  .card__image {
    position: relative;
    /* background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%); */
    padding-top: 1.5rem;
    margin-bottom: -.75rem;
    height: 10rem;
  }

  .card__data {
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    padding: 1.5rem 1.5rem;
    border-radius: 0rem 0rem 1rem 1rem;
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: 0.5rem;
  }

  body.dark .card__data{
    background-image: linear-gradient(to left, #000000 100%, #4a4a4a 100%);
  }

  body.dark .card__data p{
    color: var(--negro--luna);
  }

  .card__img {
    width: 180px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    border-radius: 1rem;
  }

  .card__shadow {
    width: 200px;
    height: 200px;
    /* background-color: var(--negro--luna); */
    border-radius: 50%;
    position: absolute;
    top: 3.75rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    filter: blur(45px);
  }

  body.dark .card__shadow{
    /* background-color: #000; */
  }

  .card__name {
    font-size: var(--h2-font-size);
    color: var(--second-color);
    margin-bottom: .75rem;
    color: #fff;
  }

  body.dark .card__name{
    color: #F3F2F2;
  }

  .card__description {
    font-weight: 500;
    margin-bottom: 1.75rem;
    color: #81848f;
    font-size: 0.9em;
  }

  body.dark .card__description:hover{
    color: #fff;
  }

  .card__description:hover {
    color: #fff;
  }

  .card__description li{
    list-style: none;
  }

  body.dark .card__description{
    color: var(--secondary-active);
  }

  .card__button {
    display: inline-block;
    background:  linear-gradient(90deg, hsl(296, 94%, 69%) 30%, hsl(303, 100%, 13%) 100%);
    padding: .5rem 2rem;
    border-radius: 1.5rem;
    color: #fff;
    font-weight: 600;
  }

  .card__button:hover {
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    border: 1px solid var(--first-color);
  }

  body.dark .card__button{
    background-color: var(--first-color);
    color: #F3F2F2;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    content: "";
  }

  .swiper-button-prev,
  .swiper-button-next {

    width: initial;
    height: initial;
    font-size: 3rem;
    color: var(--second-color);
    display: none;
  }

.swiper-button-next .bx.bxs-caret-right-circle,
.swiper-button-prev .bx.bxs-caret-left-circle {
    color: #F3F2F2; 
    /* margin-bottom: 3rem; */
    margin-bottom: 7rem;
    /* revisar3 */
}


.swiper-button-next .bx.bxs-caret-right-circle:hover,
.swiper-button-prev .bx.bxs-caret-left-circle:hover {
    color: #cecbcb; 
}

body.dark .swiper-button-next .bx.bxs-caret-right-circle:hover,
body.dark .swiper-button-prev .bx.bxs-caret-left-circle:hover {
    color: #fff; 
}

@media (max-width: 76.8rem) {
    .swiper-button-next .bx.bxs-caret-right-circle,
.swiper-button-prev .bx.bxs-caret-left-circle {
    color: #F3F2F2;
    margin-bottom: 5rem;
}
}

body.dark .swiper-button-next .bx.bxs-caret-right-circle,
body.dark .swiper-button-prev .bx.bxs-caret-left-circle{
    color: #b7b7b7;
}

  .swiper-button-prev {
    left: 0;
  }

  .swiper-button-next {
    right: 0;
  }

  .swiper-pagination-bullet {
    background-color: hsl(212, 32%, 40%);
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    background-color: var(--second-color);
  }

  @media screen and (max-width: 320px) {
    .card__data {
      padding: 1rem;
    }
  }

  @media screen and (min-width: 768px) {
    .card__content {
      margin-inline: 3rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
      display: block;
    }
  }

  @media screen and (min-width: 1120px) {
    .card__container {
      max-width: 1120px;
    }

    .swiper-button-prev {
      left: -1rem;
    }
    .swiper-button-next {
      right: -1rem;
    }
  }

.dispositivos_des{
    background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%);
    padding: 6rem 2rem 0rem 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 55rem;
    color: #fff;
}

@media (max-width: 76.8rem) {
    .dispositivos_des{
        background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%);
        height: 60rem;
    }
}

body.dark .dispositivos_des,
body.dark .contenedor1{
    background-color: var(--side-nav);
}

.dispositivos_des p{
    margin-top: 2rem;
    line-height: 1.6rem;
    padding: 0rem 0rem 4rem 0rem;
    color: #f3f2f2;
}
.contenedor1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 36rem;
    border-radius: 1rem;
    background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%);
}


.fondo{
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    width: 68rem;
    padding: 5rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    margin-top: 0rem;

    background-color: #39f039;
}

body.dark .fondo{
    background-image: linear-gradient(to left, #000000 100%, #4a4a4a 100%);
}

@media (max-width: 76.8rem) {
    .fondo{
        background-color: var(--negro--luna);
        width: 20.9rem;
        padding: 3rem 1.5rem 3.5rem 1.5rem;
        border-radius: 1rem;
        margin-top: 1rem;
    }
}

.container-top-ten {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: bold;
}

header {
    position: relative;
}

.tab-content {
    display: none;
}

.tab-content--active {
    display: block;
}

.tabs {
    position: relative;
    display: flex;
    flex-grow: 1;
    gap: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    flex-wrap: nowrap;
    border-bottom: 1px solid #797979;
}

.tabs > a {
    position: relative;
    display: flex;
    text-decoration: none;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--white);
    text-align: left;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}

.tabs > a img {
    height: 1.25rem;
    width: 1.25rem;
}

.tabs > .active {
    font-weight: 610;
    outline: none;
    border-radius: 0.5rem;
    color: var(--control);
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
}

.tabs > a:hover {
    background-color: var(--tab-background);
    border-radius: 0.5rem;
}

.tabs > a > svg {
    stroke: var(--white);
}



  .content_des {
    max-width: 100%; 
    word-wrap: break-word; 

  }
  
  .title-description {
    font-size: 14px; 
    line-height: 1.2; /
  }


  @media (max-width: 48.0rem) {
    .content_des {
        max-width: 70%; 
        word-wrap: break-word; 
      }
  }

  @media (max-width: 48.0rem) {
    .title-description {
        font-size: 14px; 
        line-height: 1.2; 
      }
  }


  /* fin */



.record {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;
    gap: 1.5rem;
    color: var(--white);
    height: 4rem;
    opacity: 1;
    margin-top: 0.7rem;
    padding: 3rem 0rem;
    animation: fadein 0.3s ease-in-out;
}

@media (max-width: 76.8rem) {
    .record {
        margin-top: 0.5rem;
        gap:1rem;
        padding: 3rem 0rem; 
        animation: fadein 0.3s ease-in-out;
    }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.record .avatar {
    display: block;
    border-radius: 50%;
    flex-grow: 0;
    height: 4rem;
    width: 4rem;
    border: 1px solid var(--tab-background);
    object-fit: cover;
}

.content_des {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 1rem;
    align-items: center;
}

.content .title {
    font-weight: 700;
    color: var(--white);
}

.content .description {
    font-size: smaller;
}

.title-description {
    display: flex;
    flex-direction: column;
    color: var(--secondary-active);
    }

.title-description:hover {
    color: #FFF;
    }

.explore-button {
    text-decoration: none;
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);


    margin-left: auto;
    border: none;
    color: var(--white);
    border-radius: 0.5rem;
    height: fit-content;
    transition: all 0.2s ease-in-out;
    padding: .75rem 1.5rem;
    font-weight: 600;
}

.explore-button:hover {
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    border: 1px solid var(--first-color);
  }

@media (max-width: 76.8rem) {
    .explore-button {
        text-decoration: none;
        background-color: var(--first-color);
        margin-left: auto;
        border: none;
        color: var(--white);
        border-radius: 0.5rem;
        height: fit-content;
        padding: 0.375rem 0.5rem;
        transition: all 0.2s ease-in-out;
        padding: 0.6rem 0.5rem;
    }
}

.explore-button:hover {
    border: 1px solid var(--control);
    color: #31ec34;
}

.cli{
    padding: 4rem 2rem 0rem 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: -2.5rem;
    color: #fff;
    
}

@media (max-width: 76.8rem) {
    .cli{
        background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%);
        padding: 6rem 2rem 0rem 2rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-bottom: -2.5rem;
        margin-top: -2.8rem;

    }
}




.cli p{
    margin-top: 2rem;
    line-height: 1.6rem;
    padding: 0rem 0rem 4rem 0rem;
    color: #f3f2f2;
}

body.dark .cli p,
body.dark .cli h2{
    color: #ccc;
}

body.dark .cli,
body.dark .user-cards{
    background-color: var(--negro--luna);
}

.user-cards{
    padding: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: auto;
    background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%);
}

.card{
    margin: 3em 1em 1em 1em;
    width: 15.5em;
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    color: #fff;
    padding: 2em;
    text-align: center;
    border-radius: 0.8em;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    position: relative;
    backdrop-filter: blur(4px);
    border: none;
}
@media (max-width: 76.8rem) {
    .card{
        width: 19.5em;
    }
}


.card1 {
    background-image: url('../image/gambito1.jpg');
    background-size: cover;
    background-repeat: none;
}

.card2 {
    background-image: url('../image/gambito3.jpg'); 
    background-size: cover;
    background-repeat: none;
}
.card3 {
    background-image: url('../image/gambito2.jpg');
    background-size: cover;
    background-repeat: none;
}

.card4 {
    background-image: url('../image/gambito4.jpg'); 
    background-size: cover;
    background-repeat: none;}




body.dark .card{
    background-image: linear-gradient(to left, #000000 100%, #4a4a4a 100%);
    border: none;
}

.card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    background-image: linear-gradient(to right, #000000 10%, #4a4a4a 100%);

    width: 0;
    height: 0;
    z-index: -1;
    border-radius: inherit;
}

.profile-img{
    width:  6em;
    height: 6em;
    margin: -4em auto 0 auto;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        #e1e1e1,
        #9f1a65
    );
    
    display: flex;justify-content: center;
    align-items: center;
    box-shadow: 0 0 0 0.5em #26293e;
}

.profile-img img{
    width: 90%;
    height: 90%;
    border-radius: inherit;
}

.card h2 {
   margin: 1em 0 0 0; 
   background-image: linear-gradient(90deg, hsl(13, 100%, 74%) 0%, hsl(13, 100%, 74%) 50%, hsl(13, 100%, 74%) 100%);
   -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.5rem;
    word-spacing: 0.2em; /
}



.card h3 {
    /* color: #fff; */
    background: linear-gradient(90deg, #f6ff4c 0%, #fd8f08 90%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   
    margin: 2em 0 0.5em 0;
    font-weight: 700;
    font-size: 1.5rem;
}



.card p{
    color: #81848f;
    font-size: 0.9rem;
    line-height: 27px;
    max-width: 20em;
    margin: 0.2em auto 2em auto;
}

.card ul{
    color: #81848f;
    font-size: 0.9rem;
    line-height: 27px;
    /* max-width: 20em; */
   
    list-style-type: none;
}

@media (max-width: 48.0rem) {
    .card ul{
        color: #81848f;
        font-size: 0.9rem;
        line-height: 27px;
        /* max-width: 20em; */
        width: 17em;
        margin: 0.2em auto 2em auto;
        list-style-type: none;
    }
}




.card small{
    color: #646771;
    font-size: 0.9em;
}

.card p,
.card small{
    transition: 0.2s;
}

.card a {
    /* background:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%); */
    background-image: linear-gradient(to right, #9cff9c 0%, #006400 100%);

    width: fit-content;
    display: block; 
    margin: 0 auto; 
    border: none;
    border-radius: 3em;
    padding: 0.5rem 2rem;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    text-decoration: none;
    font-weight: 550;
    margin-top: 3rem;
}

@media (max-width: 48.0rem) {
    .card a {
        margin-top: 3rem;

    }
}

.card:hover a{
    background: #eee;
    color: #111;
}

.card:hover p,
.card:hover small,
.card:hover ul{
    color: #fff;
    
}

.card:hover:before{
    animation: fill 1s ease-in-out forwards;
}

.card:nth-child(2) .profile-img{
    background: linear-gradient(
        90deg,
        #e1e1e1,
        #9f1a65
    );

}
.card:nth-child(2)::before{
    background-image: linear-gradient(to right, #000000 10%, #4a4a4a 100%);

}

.card:nth-child(3) .profile-img{
    background: linear-gradient(
        90deg,
        #e1e1e1,
        #9f1a65
        
    );
 

}

.card:nth-child(3)::before{
    background-image: linear-gradient(to right, #000000 10%, #4a4a4a 100%);

}

@keyframes fill{
    40% {
        width: 100%;
        height: 0.5em;
    }
    50%{
        width: 100%;
        height: 0.5em;
    }
    100%{
        width: 100%;
        height: 100%;
    }

}


.reseller{

    display: flex;
    flex-direction: column;
    text-align: center; 
    color: #fff;
}

.reseller h2{

    margin-top: 6rem;
}

@media (max-width: 48.0rem) {
    .reseller h2{

        margin-top: 4rem;
    }
    
}

body.dark .reseller{
    background-color: var(--side-nav);

}

@media (max-width: 76.8rem) {
    .reseller{
        padding: 4rem 2rem 0rem 2rem;
        display: flex;
        flex-direction: column;
        text-align: center;

    }
}

.reseller p{
    margin-top: 2rem;
    line-height: 1.6rem;
    padding: 0rem 0rem 4rem 0rem;
    color: #f3f2f2;
}

  .pricing-container {
    margin: 0 auto;
    width: 70%;
    max-width: 68rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem 2rem; 
}

@media (max-width: 48.0rem) {
    .pricing-container {
        margin: 0 auto;
        width: 90%;
        max-width: 90rem;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 4rem 2rem; 
        padding: 0 1rem; 

    }
}

  body.dark .pricing-card {
    background-image: linear-gradient(to left, #000000 100%, #4a4a4a 100%);
}


  .pricing-card {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    width: 100%;
    max-width: 21.5rem;
    border-radius: 1rem 1rem 1rem 1rem !important;
    padding: 2rem;
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    color: var(--text-gray);
    transition: all 0.5s ease-in-out;
    margin-top: 0.8;
    color: #81848f;
  }

@media (max-width: 48.0rem) {
    .pricing-card {
      
        max-width: 19rem;
       
      }
}


.pricing-card img{
    width: 9rem;
    height: 7rem;
    margin-bottom: 1rem;
}

@media (max-width: 48.0rem) {
    .pricing-card img{
        width: 10rem;
        height: 7rem;
        margin-bottom: 1rem;
    }  
}



.pricing-card li{
   
    margin: 0rem -1.9rem;
}

@media (max-width: 48.0rem) {
    .pricing-card li{
   
        margin: 0rem 0rem;
    }
}
  
  
   .bx.bxs-check-circle {
    color: #00b421;
    }

  .bx.bxs-x-circle {
    color: var(--first-color); 
    }

  

  .pricing-card:hover,
  .pricing-card:hover{
    color: #fff;
  }

  .pricing-card:hover {
    transform: translateY(-2rem);
  }

  .pricing-card--primary {
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .pricing-card__price {
    background: linear-gradient(90deg, #f6ff4c 0%, #fd8f08 90%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    font-weight: 700;
    flex-wrap: wrap;
    font-size: 2rem;
  }

  @media (max-width: 48.0rem) {
    .pricing-card__price {
    
        font-size: 1.5rem;
      }
  }

  .pricing-card__banner+.pricing-card {
    border-radius: 0 0 0.5rem 0.5rem;
    
  }

  .pricing-card__price--original {
    background-image: linear-gradient(90deg, hsl(13, 100%, 74%) 0%, hsl(13, 100%, 74%) 50%, hsl(13, 100%, 74%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
      font-weight: 500;
    margin-top: 2rem;
    font-size: 1.5rem;
  }
  
  


  .pricing-card>h3 {
    margin: 0;
    font-weight: 700;
    text-align: center;
    font-size: 2rem;
    /* color: var(--text-white); */
    background: linear-gradient(90deg, #ff96e8, #ffd1f4 50%, #ff70ff); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
  }

  @media (max-width: 48.0rem) {
    .pricing-card>h3 {
       
       
        font-size: 1.5rem;
       
      }
  }

  .pricing-card>.enroll {
    display: block;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    border-radius: 0.5rem;
    color: var(--text-white);
    margin-top: auto;
    text-decoration: none;
    letter-spacing: 0.75px;
    border: 1px solid col;

    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);

    transition: all 0.3s ease-in-out;
    border-radius: 1.5rem;
    padding: 0.5rem 2.5rem;
    border: 1px solid var(--control);

  }

  .pricing-card>.enroll:hover {
        background-image: linear-gradient(to right, #9cff9c 0%, #006400 100%);

    /* background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%); */
    border: 1px solid var(--control);

  }

  .pricing-card__banner {
    height: 1.8rem;
    width: 100%;
    position: absolute;
    color: white;
    top: -1.6rem;
    border-radius: 1rem 1rem 0rem 0rem !important; 
  }

  @media (max-width: 76.8rem) {
    .pricing-card__banner {
        height: 1.5rem;
        top: -1.5rem;
      }
  }

  .pricing-card__banner {
    width: 100%;
    min-height: 0rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: var(--primary-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700; 
  }

  @media (max-width: 76.8rem) {
  .pricing-card__banner {
    min-height: 1rem;
     }
  }

  .pricing-card>ul {
    width: 100%;
    display: flex;
    margin-top: 2.5rem;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  .pricing-card>ul>li {
    position: relative;
    font-weight: 100;
    list-style-type: none;
    font-size: 1rem; 
    text-align:justify;
    padding: 0rem 0rem 0rem 1rem;
    font-size: 1rem; 
  }

  .pricing-card ul{
    font-weight: 700;
    
  }

  .show-more-btn {
    margin-top: 2rem;
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .show-more-btn button {
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 2rem;
    background-color: #f3f2f2;
    color:#000;
    font-weight: 550;
    cursor: pointer;
  }

 .show-more-btn button:hover{
    background-color: #000;
    border: 0.2rem solid var(--control);
    color: #f3f2f2;
  }

  body.dark .show-more-btn button {
    background-color: #ccc;
    color: var(--negro--luna);
  }

  body.dark .show-more-btn button:hover {
    background-color: #000;
    border: 0.1rem solid #ff6f00cd;
    color: #FFF;
  }

  .hidden {
    display: none;
  }

  .foo{
    /* background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%); */
    padding: 8rem 2rem 0rem 2rem;
    display: flex;
    flex-direction: column;
    text-align: center; 
}

@media (max-width: 76.8rem) {
    .foo{
        background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%);
        padding: 4rem 2rem 0rem 2rem; 
        display: flex;
        flex-direction: column;
        text-align: center;
    }
}

.foo p{
    margin-top: 2rem;
    line-height: 1.6rem;
    padding: 0rem 0rem 4rem 0rem;
}

body.dark .foo, 
body.dark footer {
    background-color: var(--negro--luna) !important;
    background-image: none;
}


  footer {
    position: relative;
    width: 100%;
    /* background-image: linear-gradient(90deg, var(--body-color) 0%, hsl(281, 100%, 13%) 100%); */

    min-height: 100px;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

footer .social_icon,
footer .menuf {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

footer .social_icon li,
footer .menuf li {
    list-style: none;
    color: #fff;
}

footer .social_icon li a {
    font-size: 2em;
    color: #fff;
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
}

footer .social_icon li a:hover {
    transform: translateY(-10px);
}

footer .menuf li a {
    font-size: 1.2em;
    color: #fff;
    margin: 0 10px;
    display: inline-block;
    text-decoration: none;
    opacity: 0.75;
}

footer .menuf li a:hover {
    opacity: 1;
}

footer p {
    color: #fff;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.1em;
}

footer .wave {
    position: absolute !important;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(../image/wave13.png);
    background-size: 1000px 100px;
}

.waves{
    z-index: 1;
}

body.dark footer .wave{
    background: url(../image/wave3.png);
}

footer .wave#wave1 {
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWave 4s linear infinite;
}

footer .wave#wave2 {
    z-index: 999;
    opacity: 0.5;
    bottom: 10px;
    animation: animateWave_02 4s linear infinite;
}

footer .wave#wave3 {
    z-index: 1000;
    opacity: 0.2;
    bottom: 15px;
    animation: animateWave 3s linear infinite;
}

footer .wave#wave4 {
    z-index: 999;
    opacity: 0.7;
    bottom: 20px;
    animation: animateWave_02 3s linear infinite;
}

@keyframes animateWave {
    0% {
        background-position-x: 1000px;
    }
    100% {
        background-position-x: 0px;
    }
}

@keyframes animateWave_02 {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: 1000px;
    }
}

@media screen and (max-width: 48.0rem) {
    footer .menuf {
        flex-direction: column;
        align-items: center;
    }

    footer .menuf li {
        margin: 10px 0;
    }
}

.container-redes{
    position: fixed;
    bottom: 5rem;
    right:  0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 9999;  
  }    

  .container-redes a {
    margin-bottom: -1.7rem; 
}
  
  .container-redes img{
    width: 6rem;
    padding: 1.1rem; 
    background: rgba(0,0,0,0.0);
    cursor: pointer;
    border-radius: 100%;
    transition: all 300ms;
  }
          
  .container-redes :hover img{
    background: rgba(0,0,0,0.10);
  }
  
  
  
  
  .portada img{
    width: auto;
    margin: 0 auto;
    padding: 10rem 0rem 0rem 0rem;
  }

  @media (max-width: 76.8rem) {
    .portada img{
        width: 100%;
        padding: 8rem 0rem 0rem 0rem;
      }    
  }

  body.dark .portada,
  body.dark .banner-free{
    background-color: var(--nav-color);
  }

.banner-free{
    background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%);
    width: 100%;
}

  .container-free{
    position: relative;
    min-height: 100vh;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    background-color:  linear-gradient(90deg, hsl(23, 84%, 75%) 0%, hsl(9, 92%, 54%) 100%);
}

.container-free .search-box{
    position: relative;
    height: 42px;
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.search-box input{
    position: absolute;
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: rgb(255, 255, 255);
    padding: 0 15px 0 45px;
    color: #ccc;
    border-radius: 6px;
}

@media (max-width: 76.8rem) {
    .search-box{
        width: 80%;
        margin: 0 auto;  
        }
}

.search-box i {
    position: absolute;
    z-index: 2;
    color: #999;
    top: 50%;
    left: 15px;
    font-size: 20px;
    transform: translateY(-50%);
}

.container-free .images .image-box{
    position: relative;
    height: 400px;
    width: 300px;
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    border-radius: 1rem;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 3.5rem;
}

@media (max-width: 76.8rem) {
    .container-free .images .image-box{
    
        margin-top: 2.5rem;
    }
}

.images{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

@media (max-width: 76.8rem) {
    .images{
        width: 100%;
        grid-template-columns: repeat(1, 1fr);    
        border-radius: 1.5rem;
        gap: 2rem;
    }    
}

.images .image-box{
    margin: 8px;
}

.images .image-box img{
    height: 60%;
    width: 80%;
    padding: 2rem;
    border-radius: 50%;
    transition: transform 0.2s linear;
    margin: 0 auto;
}

.image-box:hover img{
    transform: scale(1.05);
}

.image-box h6{
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;  
    text-align: center;
}

.image-box p{
    color: var(--first-color);
    font-size: 1rem;
    font-weight: 600;  
    text-align: center;
    margin-top: 0.5rem;
}


.image-box a{
    background-image: linear-gradient(90deg, hsl(23, 84%, 75%), hsl(9, 92%, 54%));
    width: 50%;
    margin: 0 auto;
    border-radius: 1rem;
    padding: 0.5rem;
    margin-top: 1rem;
    color: #FFF;
    font-weight: 600;
    text-transform: uppercase;
}

.image-box a:hover{
    background-image: linear-gradient(to left, #000000 0%, #4a4a4a 100%);
    border: 1px solid var(--first-color);
}

.batalla{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    
}
@media (max-width: 76.8rem) {
    .batalla{
        display: grid;
        grid-template-columns: repeat(1,1fr)
        
    }
}

.batalla img{
    width: 30rem;
    height: 40rem;
    grid-column: 3/4;
    margin-top: -30rem;
    margin-left: -10rem;

}

@media (max-width: 76.8rem) {
    .batalla img{
        width: 30rem;
        height: 30rem;
        grid-column: 3/4;
        margin-top: 1rem;
        margin-left: 0rem;
    }
    
}

body.dark .batalla{
    background-color: var(--negro--luna);
}

.msm{
    display: grid;
    grid-column: 2/3;
    color: #FFF;
    text-align: center;
}

@media (max-width: 76.8rem) {
    .msm{
        color: #FFF;
        text-align: center;
        grid-column: 1/2;

    }
       
}


.background-container {
    background-image: url('../image/banner.webp');
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    padding: 20px; 
}


/* Estructura básica de la sección */
.image-text-section {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    max-width: 1100px; 
    margin: 40px auto; 
    padding: 20px;
    text-align: left; 
}

.left-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    margin-top: 7rem;
}

@media (max-width: 48.0rem) {
    .left-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 3rem;
    }
}

.image-text-section .image img {
    width: 100%; 
    max-width: 300px; 
    height: auto;
}


.image.left {
    align-self: center; 
}


.image.right {
    align-self: center;
    justify-self: end; 
    width: 15rem;
    margin-top: 6rem;
}

@media (max-width: 48.0rem) {
    .image.right {
        justify-self: center; 
        
    }
}

.content h2, .content p {
    margin: 0 0 10px; 
}

.buttons {
    display: flex;
    gap: 1.5rem;
    margin-top: 10px;
    
}

@media (max-width: 48.0rem) {
    .buttons {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
        margin-top: 2rem;
        
    }
}

.buttons .btn {
    padding: 10px 35px;
    background-image: linear-gradient(90deg, var(--body-color) 0%, hsl(321, 93%, 28%) 50%, hsl(321, 93%, 18%) 100%);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
        border-radius: 2rem;

}

.buttons .btn:hover {
    background-image: linear-gradient(to right, #9cff9c 0%, #006400 100%);
}

.left-content h2,p{
    color: #fff;
}


@media (max-width: 768px) {
    .image-text-section {
        grid-template-columns: 1fr;
        text-align: center; 
    }

    .left-content {
        align-items: center;
        line-height: 1.5rem;
        
    }

    .left-content h2{
        align-items: center;
        line-height: 2.5rem;
        
    }

    .image {
        justify-self: center; 
        margin: 3rem 0rem;
    }
}