:root {
    scroll-behavior: smooth;
    --total-brand: 7;
    --logo-width: 300px;
    --total-logo-width: calc((var(--total-brand) * var(--logo-width) * 2));


    /* --orange: #FF7143;
    --blue: #5454d4;
    --background: #F9F8FE; */
}

* {
    margin: 0;
    /* padding: 0; */
    box-sizing: border-box;
}

html{
    background-color: #000000;
    overscroll-behavior-y: none;
    overflow-x: hidden;
    --vh: 1vh;
}

body {
    background-color: #00000000;
    font-family: "SN Pro", sans-serif;
    overflow-x: hidden;
}

.menu__block__on{
    overflow: hidden;
}

.container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    /* overflow: hidden; */
    padding: 80px 0; 
}

.container--hero {
    padding: 0;
}


/* NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU NAVBAR Y MENU */

.nav__bkg{
    background-color: #00000000;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    transition: .3s ease-in-out;
}

/* .logo__container{
    height: auto;
} */

.nav {
    /* background-color: #000000; */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* position: relative; */
    /* overscroll-behavior-y: none ; */

}

.nav__logo{
    height: 40px;
    z-index: 100;
}

.nav__menu {
    background-color: #00000000;
    width: 55px;
    cursor: pointer;
    z-index: 100;
    border-radius: 5px;
}

.nav__list{
    display: none;
}

/* AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU  AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU AHORA ESTE UL ESTA POR DEBAJO DEL MAIN POR QUE EL FIXED MAS POSICIONAMIENTO TIENE MAS JERARQUIA QUE UN ABSOLUTE, POR ESO ESTA DEBAJO Y BUYU */

.nav__list2{
    position: fixed;
    z-index: 10;
    height: 100;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* background-color: #000000; */
    backdrop-filter: blur(50px);
    padding: 80px 0;

    display: grid;
    place-content: center;
    text-align: center;
    gap: 2.5rem;

    list-style: none;

    transform: translate(-100%);
    transition: transform .3s;

    /* font-weight: 300; */
    font-size: 1rem;


}

.nav__link_contacto{
    display: none;
}


.nav__list--show {
    transform: translate(0);
    height: 100%;
}

.nav__link {
    text-decoration: none;
    color: #fff;
    font-weight: 300;
    /* font-size: 1rem; */
}


.ocultar__arriba{
    transform: translateY(-100%);
}

.navbar__color{
    backdrop-filter: blur(50px);
    /* background-color: #8d2d2d; */
}



/* HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER  */


.miVideo{
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
    z-index: -1;
}

.hero__main{
    height: 100svh; 
    /* max-height: 100vh; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.hero__texts{
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    color: #fff;
}

.typewriter-text{
    font-size: 2rem;
    font-weight: 700;
    color: #ccecff;
}

.typewriter label{
    font-size: 2rem;
}

.hero__title strong{
    border-radius: 10px;
    color: #e1f0ff;
    font-weight: 700;
}

/* MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN */
.gradient__separation1{
    width: 100%;
    height: 500px;
    /* position: relative; */
    background-color: #000000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.021) 10%, rgba(0, 0, 0, 0.143) 20%,rgba(0, 0, 0, 0.323) 30%, rgba(0, 0, 0, 0.484) 40%, rgba(0, 0, 0, 0.609) 50%, rgba(0, 0, 0, 0.752) 60%, rgba(0, 0, 0, 0.883) 70%, rgb(0, 0, 0) 80%);
}
.gradient__separation2{
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0px;
    background-color: #000000;
    background: linear-gradient(360deg,rgba(0, 0, 0, 0.021) 10%, rgba(0, 0, 0, 0.143) 20%,rgba(0, 0, 0, 0.323) 30%, rgba(0, 0, 0, 0.484) 40%, rgba(0, 0, 0, 0.609) 50%, rgba(0, 0, 0, 0.752) 60%, rgba(0, 0, 0, 0.883) 70%, rgb(0, 0, 0) 80%);
}


main{
    background-color: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgb(10, 11, 12) 20%,rgb(28, 0, 111) 50%,rgb(10, 11, 12) 80%);
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES SERVICES  */



.services__bkg{
    position: relative;
    width: 100vw;
    /* backdrop-filter: blur(100px); */
}

.services__glass{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 1;
}

.servicesbox{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3em;
    flex-wrap: wrap;
    /* padding-top: 150px; */
}

.glassballs1{
    position: absolute;
    top: 210px;
    left: -250px;
    /* background-color: rgb(0, 0, 0); */
    background-color: rgb(48, 0, 0);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    
    box-shadow: 
    inset 0 0 50px #fff,
    inset 20px 0 60px #0000ff, /* sombreado 1 interior */
    inset -20px 0 60px rgb(0, 38, 255),/* sombreado 2 interior */
    
    inset 20px 0 300px #0400ff, /* circulo del centro 1 */
    inset -20px 0 300px rgb(0, 8, 255), /* circulo del centro 2 */
    
    0 0 5px #ffffff, /* alo exterior 1 */
    -10px 0 60px #080cff, /* alo exterior principal */
    10px 0 60px rgb(0, 21, 255); /* alo exterior 3 */

    /* box-shadow: 
    inset 0 0 50px #fff,
    inset 20px 0 60px #498b8e,
    inset -20px 0 60px #000dff,
    
    inset 20px 0 300px #4d94ff,
    inset -20px 0 300px #0ff,
    
    0 0 5px #fff,
    -10px 0 60px #0011ff,
    10px 0 60px rgb(0, 162, 255); */

    animation: load 5s infinite;
}

.glassballs2{
    position: absolute;
    top: 210px;
    left: -550px;
    /* background-color: rgb(0, 0, 0); */
    background-color: rgb(48, 0, 0);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    
    box-shadow: 
    inset 0 0 50px #fff,
    inset 20px 0 60px #0000ff, /* sombreado 1 interior */
    inset -20px 0 60px rgb(0, 38, 255),/* sombreado 2 interior */
    
    inset 20px 0 300px #0400ff, /* circulo del centro 1 */
    inset -20px 0 300px rgb(0, 8, 255), /* circulo del centro 2 */
    
    0 0 5px #ffffff, /* alo exterior 1 */
    -10px 0 60px #080cff, /* alo exterior principal */
    10px 0 60px rgb(0, 21, 255); /* alo exterior 3 */

    animation: load 5s infinite;
}


@keyframes load{
    0%{
        transform: rotate(0);
        filter: hue-rotate(0deg);
    }
    50%{
        filter: hue-rotate(20deg);
    }
    100%{
        transform: rotate(360deg);
    }
}


.servicebox1{
    display: flex;
    justify-content: center;
    align-items: center;
}

.services__title{
    color: #e1f0ff;
    font-size: 2rem;
    text-align: center;
    z-index: 2;
}

.services__paragraph{
    padding: 20px 0;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    z-index: 2;
}

.servicesbox2{
    z-index: 2;
}

.servicescontent {
    position: relative;
    width: auto;
    max-width: 1400px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    /* transform-style: preserve-3d; */
    /* perspective: 500px; */
    /* margin: auto; */
}

.servicescontent .box {
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    width: 300px;
    height: 400px;
    transition: 0.5s;
    overflow: hidden;

   
  }

  .imgBx{
     animation: reveal both;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
  }

@keyframes reveal {
    from{
        opacity: 0;
        translate: 0 100px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

  .servicescontent:hover .box {
    /* transform: rotateY(25deg); */
    transform: rotateY(0.95);
  }

  .servicescontent .box:hover ~ .box {
    /* transform: rotateY(-25deg); */
    transform: scale(0.95);
  }

  /* .servicescontent .box:hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 1;
    box-shadow: 
    0 0 5px #fff,
    -10px 0 20px #0011ff,
    10px 0 20px rgb(123, 0, 255);
  } */

  .servicescontent .box:nth-child(1):hover {
      transform: rotateY(0deg) scale(1.1);
      z-index: 1;
      box-shadow: 
      0 0 5px #fff,
      -10px 0 20px #8400ff,
      10px 0 20px rgb(75, 0, 166);
  }

  .servicescontent .box:nth-child(1):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

  .servicescontent .box:nth-child(2):hover {
      transform: rotateY(0deg) scale(1.1);
      z-index: 1;
      box-shadow: 
      0 0 5px #fff,
      -10px 0 20px #fff2ba,
      10px 0 20px rgb(255, 187, 0);
  }

    .servicescontent .box:nth-child(2):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

  .servicescontent .box:nth-child(3):hover {
      transform: rotateY(0deg) scale(1.1);
      z-index: 1;
      box-shadow: 
      0 0 5px #fff,
      -10px 0 20px #00bbff,
      10px 0 20px rgb(0, 242, 255);
  }

    .servicescontent .box:nth-child(3):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

  .servicescontent .box:nth-child(4):hover {
      transform: rotateY(0deg) scale(1.1);
      z-index: 1;
      box-shadow: 
      0 0 5px #fff,
      -10px 0 20px #4d4646,
      10px 0 20px rgb(73, 127, 148);
  }

  .servicescontent .box:nth-child(4):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }
  
  .servicescontent .box:nth-child(5):hover {
      transform: rotateY(0deg) scale(1.1);
      z-index: 1;
      box-shadow: 
      0 0 5px #fff,
      -10px 0 20px #ffcf69,
      10px 0 20px rgb(0, 255, 115);
      /* backdrop-filter: blur(20px); */
  }

  .servicescontent .box:nth-child(5):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

.servicescontent .box:nth-child(6):hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 1;
    box-shadow: 
    0 0 5px #fff,
    -10px 0 20px #ff0000,
    10px 0 20px rgb(255, 0, 0);
}

  .servicescontent .box:nth-child(6):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

.servicescontent .box:nth-child(7):hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 1;
    box-shadow: 
    0 0 5px #fff,
    -10px 0 20px #ef90c0,
    10px 0 20px rgb(255, 75, 255);
}

  .servicescontent .box:nth-child(7):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

.servicescontent .box:nth-child(8):hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 1;
    box-shadow: 
    0 0 5px #fff,
    -10px 0 20px #007b5a,
    10px 0 20px rgb(75, 255, 180);
}

  .servicescontent .box:nth-child(8):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

.servicescontent .box:nth-child(9):hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 1;
    box-shadow: 
    0 0 5px #fff,
    -10px 0 20px #ff9101,
    10px 0 20px rgb(255, 204, 0);
}

  .servicescontent .box:nth-child(9):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

.servicescontent .box:nth-child(10):hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 1;
    box-shadow: 
    0 0 5px #fff,
    -10px 0 20px #01c0ff,
    10px 0 20px rgb(255, 0, 242);
}

  .servicescontent .box:nth-child(10):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

.servicescontent .box:nth-child(11):hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 1;
    box-shadow: 
    0 0 5px #fff,
    -10px 0 20px #cfea00,
    10px 0 20px rgb(255, 0, 21);
}

  .servicescontent .box:nth-child(11):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }

.servicescontent .box:nth-child(12):hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 1;
    box-shadow: 
    0 0 5px #fff,
    -10px 0 20px #55615e,
    10px 0 20px rgb(188, 181, 86);
}

  .servicescontent .box:nth-child(12):hover .content{
    backdrop-filter: blur(5px);
    transition: backdrop-filter 1s ease-in;
  }


.escalado{
    transform: rotateY(0deg) scale(1.1);
}

  .servicescontent .box .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;



  }
  /* .servicescontent .box .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(0, 140, 255),#000000);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  } */

  .servicescontent .box:nth-child(1) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(140, 0, 255),#5a58588e);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }
  
  .servicescontent .box:nth-child(2) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(255, 225, 0),#5a58588e);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
  }

  .servicescontent .box:nth-child(3) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(255, 255, 255),#7070708e);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }
  
  .servicescontent .box:nth-child(4) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(180deg,rgb(255, 255, 255),#ff00008e); */
    background: linear-gradient(180deg, rgba(16, 16, 15, 0.426) 45%,rgb(136, 233, 255) 100%);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }
  .servicescontent .box:nth-child(5) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(0, 255, 166),#7070708e);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }

  .servicescontent .box:nth-child(6) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(255, 0, 0),#3c3c3caa);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }

  .servicescontent .box:nth-child(7) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(255, 152, 243),#3c3c3caa);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }
  .servicescontent .box:nth-child(8) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(0, 255, 221),#3c3c3caa);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }
  .servicescontent .box:nth-child(9) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgb(255, 115, 0),#3c3c3caa);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }
  .servicescontent .box:nth-child(10) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(180deg,rgb(255, 115, 0),#3c3c3caa); */
    background: linear-gradient(90deg, rgb(234, 0, 255) 20%,rgb(0, 221, 255) 50%,rgb(255, 0, 247) 80%);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }
  .servicescontent .box:nth-child(11) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(180deg,rgb(255, 115, 0),#3c3c3caa); */
    background: linear-gradient(90deg, rgb(16, 16, 15) 20%,rgb(122, 7, 36) 50%,rgb(25, 3, 12) 80%);
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }
  .servicescontent .box:nth-child(12) .imgBx:before {
    content: '';
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(180deg,rgb(255, 115, 0),#3c3c3caa); */
    background: linear-gradient(45deg, rgba(16, 16, 15, 0.426) 45%,rgb(122, 114, 21) 100%);
    z-index: 1; 
    opacity: 0;
    transition: 0.5s;
    mix-blend-mode: multiply;
    backdrop-filter: blur(5px);
  }

  .servicescontent .box:hover .imgBx:before {
    opacity: 1;
    
  }
  .servicescontent .box .imgBx img {
    background: linear-gradient(180deg,rgb(0, 140, 255),#000000);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .servicescontent .box .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 10px;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    padding: 20px;
    align-items: center;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(180deg, #000000d2 10%, #00000000 50%);
  }

  .servicescontent .box .content h2 {
    padding: 20px 0;
    text-align: center;
    color: #fff;
    transition: 0.5s;
    text-transform: uppercase;
    /* margin-bottom: 5px; */
    font-size: 20px;
    transform: translateY(20px);
    transition-delay: 0.3s;
  }
  .servicescontent .box:hover .content h2 {
    transform: translateY(0);
  }
  .servicescontent .box .content p {
    color: #fff;
    transition: 0.5s;
    font-size: 14px;
    transform: translateY(360px);
    transition-delay: 0.4s;
    /* backdrop-filter: blur(5px); */

  }
  .servicescontent .box:hover .content p {
    transform: translateY(0);
  }

/* SOLUCION AL FALLO DEL ESCALAMIENTO CUADRADO */
/* .imgBx{
    border-radius: 10px;
} */
/* SOLUCION AL FALLO DEL ESCALAMIENTO CUADRADO */



/* PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS WORK PREVIOUS */

.carrousel__bkg{
    width: 100vw;
    background-color: #00000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: auto;
}

.carrouselbox1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    text-align: center;
    color: #e4e3e3;
    z-index: 3;
}

.carrousel__title{
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
}

.carrousel__title strong{
    border-radius: 10px;
    font-weight: 700;
}
.carrousel__title strong:nth-child(4){
    background-color: #6a08fe;;
    border-radius: 10px;
    font-size: 1.5rem;
}






.container__carrousel{
    position: relative;
    min-height: 500px;
}

.container__slider{
    width: 100%;
    height: 500px;
}

.slide{
    width: 100%;
    height: 500px;
}

.container__slider .slide .item{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 0;
    /* object-fit: cover; */
    background-size: cover;
    display: inline-block;
    transition: 1s;
}

.slide .item:nth-child(1),
    .slide .item:nth-child(2){
        left: -420px;
        width: 200px;
        height: 100%;
        border-radius: 20px;
    }
    
    .slide .item:nth-child(3){
        width: 200px;
        left: -210px;
        border-radius: 20px;
    }
    .slide .item:nth-child(4){
        left: 0;
        border-radius: 20px;
    }
    .slide .item:nth-child(5){
        width: 200px;
        left: 102%;
        border-radius: 20px;
    }
    .slide .item:nth-child(6){
        width: 200px;
        left: calc(102% + 220px);
        border-radius: 20px;
    }

/* here n = 0, 1, 2, 3,... */
.slide .item:nth-child(n + 7){
    width: 200px;
    left: calc(102% + 440px);
    opacity: 0;
    border-radius: 20px;
    /* right: 20px; */
}



.item .content{
    position: absolute;
    top: 40%;
    width: 100%;
    text-align: center;
    color: #ffffff;
    -webkit-transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
}


.slide .item:nth-child(4) .content{
    display: inline-block;
}

.slide .item:nth-child(4) .content .name{
    font-size: 2rem;
    text-transform: unset;
    font-weight: bold;
    padding: 10px 30px;
    opacity: 0;
    -webkit-animation: animate .7s ease-in-out 1 forwards;
}

.slide .item:nth-child(4) .content .des{
    font-size: 1rem;
    margin: 20px 20px;
    opacity: 0;
    -webkit-animation: animate .7s ease-in-out .3s 1 forwards;
}

.content button{
    display: none;
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}


@keyframes animate {
    from{
        opacity: 0;
        -webkit-transform: translate(0, 100px);
        filter: blur(33px);
    }

    to{
        opacity: 1;
        -webkit-transform: translate(0);
        filter: blur(0);
    }
}


.button{
    position: absolute;
    top: 90%;
    left: 40%;
}

.button button{
    color: #5454d4;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 20px;
    border: 3px solid #0d0a0a;
}

.button button:hover{
    background: rgb(91, 59, 189);
    color: #fff;
}


/* CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES CUALIDADES */

.quality{
    height: 100%;
    width: 100%;
    /* background-color: #000000; */
}

.service{
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1{
    color: #ffffff;
    font-size: 3rem;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: transparent;
    letter-spacing: 4px;
    background-color: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%,rgb(179, 187, 236) 50%,rgb(255, 255, 255) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

p{
    position: relative;
}

.quality__title{
    font-size: 2rem;
    text-align: center;
}

/* h1::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 10%;
    height: 8px;
    width: 80%;
    border-radius: 8px;
    background-color: rgba(247, 241, 241, 0.082);
} */
/* h1 span{
    position: absolute;
    top: 100%;
    left: 10%;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #002fff;
    animation: anim 5s linear infinite;
} */

@keyframes anim {
    95%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        left: 88%;
    }

    
}

.cards{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 30px;
    margin-top: 80px;
}

.card{
    width: 100%;
    height: 300px;
    /* max-width: 300px; */
    /* width: auto; */
    max-width: 350px;
    background-color: #00133f31;
    backdrop-filter: blur(40px);
    padding:  8%;
    border: 0.2px solid #00ccffbf;
    border-radius: 8px;
    transition: .6s;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.card::after /* pseudoelemento: significa despues de*/{
    content: '';
    position: absolute;
    top: 150%;
    left: -200px;
    width: 120%;
    transform: rotate(50deg);
    background-color: #ffffff;
    height: 18px;
    filter: blur(30px);
    opacity: .5;
    transition: 1s;
}

.card:nth-child(2):hover{
    border-color: #fbeba0;
    background-color: #ffe45c1b;
}

.card:nth-child(2):hover i{
    color: #ffed92fa;
}

.card:nth-child(3):hover{
    border-color: #00e5ff;
    background-color: #00e5ff34;
}

.card:nth-child(4):hover i{
    color: #00e5ff;
}

.card:nth-child(4):hover{
    border-color: #BF00FF;
    background-color: #bf00ff2a;
}

.card:nth-child(4):hover i{
    color: #BF00FF;
}

.card:nth-child(5):hover{
    border-color: #00FF41;
    background-color: #00ff4036;
}

.card:nth-child(5):hover i{
    color: #00FF41;
}

.card:nth-child(6):hover{
    border-color: #d51616;
    background-color: #ff00001b;
}

.card:nth-child(6):hover i{
    color: #d51616;
}



.card:hover{
    background-color: transparent;
    transform: translateY(-8px);
    border-color: #ffffff;
}

.card:hover::after{
    width: 225%;
    top: -100%;
}

.card i{
    color: #869ff0;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 4.8rem;
}

.card h2{
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;

}

.card p{
    text-align: center;
    width: 100%;
    margin: 12px 0;
    color: rgba(255, 255, 255, 0.6);

}
.card:hover i{
    color: #ffffff;
}



/* SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS SOBRE NOSOTROS  */

.aboutus__bkg{
    width: 100vw;
    height: 100%;
    /* overflow: hidden; */
    /* background-color: #000000; */
}

.aboutus__container{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    /* height: 900px; */
}

.aboutus__image{
    width: 100px;
    height: auto;
    overflow: hidden;
    /* position: absolute; */
    left: 100px;
}

.aboutus__image img{
    width: 300px;
    border-radius: 20px;
    /* height: auto; */
}

.aboutus__box{
    /* position: absolute; */
    background-color: #54545434;
    backdrop-filter: blur(40px);
    border-radius: 20px;
    width: 100%;
    height: auto;
    top: 300px;
    right: 120px;
    padding: 40px;
}

.aboutus__subtitle{
    text-align: start;
    font-size: 3rem;
    color: #fff;
    padding-left: 30px;
    /* position: absolute; */
    /* right: 120px;
    top: 200px; */
}

.aboutus__paragraph{
    color: #fff;
    font-size: 1.2rem;
}






/* ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS ELLOS CONFIAN EN NOSOTROS */

.equipment__container{
    width: 100vw;
    padding: 100px 0;
    padding-bottom: 250px;
    /* background-color: #fff; */

    display: grid;
    place-items: center;
    gap: 9rem;
}

.eqp__title{
    text-align: center;
    font-weight: 400;
    font-size: 2REM;
}

.eqp__title strong{
    border-radius: 10px;
    /* background-color: #ba2e2e; */
    color: rgb(255, 255, 255);
    font-weight: 700;
}

.eqp__title strong:nth-child(1){
    /* background-color: #7788eb; */
    /* background-color: #3263ac; */

}



.slider{
    width: 100vw;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.brands{
    list-style: none;

    width: var(--total-logo-width);

    display: flex;

    justify-content: center;

    align-items: center;

    animation: slideLeft 30s linear infinite;
}

@keyframes slideLeft{
    100% {
        transform: translateX(calc(-100% /2));
    }
}

.brand-logo{
    width: var(--logo-width);
    /* margin-left: 5rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 70px */
}

.brand-logo a img{
    height: 100px ;
    /* max-width: 550px; */
}





/* @keyframes slide {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .logos {
    overflow: hidden;
    padding: 60px 0;
    white-space: nowrap;
    position: relative;
  }
  
  .logos:before,
  .logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
  }
  
  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255));

  }
  
  .logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
  }
  
  .logos:hover .logos-slide {
    animation-play-state:paused;
  }
  
  .logos-slide {
    display: inline-block;
    animation: 120s slide infinite linear;
  }
  .logos-slide a {
    text-decoration: none;
  }
  
  .logos-slide img {
    height: 100px;
    margin: 0 40px;
    z-index: 20;
  } */


/* FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER  */

.footer{
    width: 100vw;
    /* background-color: #000; */

    background-color: rgb(7, 7, 7);
    /* background: linear-gradient(180deg, #000000 0%,#120020 30%,#000328 40%, #1e0f38 60%,#120020 85%,#000000 100%); */
    color: #fff;
}

.logo__contacto{
    width: 90%;
    margin: 0 auto;
    padding-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%; */
    /* height: auto; */
    overflow: hidden;
    
}

.logo__contacto img{
    width: 100%;
}



.footer__container{
    /* height: 800px; */
    padding-bottom: 40px ;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4rem;
    flex-wrap: wrap-reverse;
}

.nav__footer{
    /* width: 500px */
    /* max-width: 90%; */
    height: 840px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.nav__link--footer{
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 6rem;
    flex-wrap: wrap;
}

.nav__items{
    list-style: none;
}

.nav__items a{
    text-align: center;
    text-decoration: none;
    color: #eee;
}

.footer__form{
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.footer__inputs{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    overflow: hidden;
}

.footer__inputs a{
    text-decoration: none;
    color: #e46f6f;
    font-size: 1.1rem;
}

.footer__input{
    width: 65%;
    background-color: #fff;
    height: 50px;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    border: none;
}

.footer__submit{
    width: 25%;
    display: inline-block;
    height: 50px;
    background-color: #072953;
    border: none;
    font-size: 1rem;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.footer__copy{
    padding-top: 40px;
    border-top: 1px solid white;
}

.footer__copyright{
    text-align: center;
    font-weight: 300;
    font-size: 1rem;
}

.footer__newsletter{
    font-size: 2rem;
}

.footer__form p{
    line-height: 1.5;
}

/* DEBAJO DE ESTE TITULO VA EL CODIGO DEL FORMULARIO */

.form-group {
            margin-bottom: 20px;
        }

        /* label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
        } */

        input, textarea {
            width: 300px;
            padding: 12px 15px;
            background-color: #262626; /* Gris oscuro para los inputs */
            border: none;
            border-radius: 8px;
            color: #9ca3af; /* Color del texto placeholder */
            font-size: 14px;
            box-sizing: border-box; /* Para que el padding no afecte el ancho total */
            font-family: inherit;
            outline: none;
            transition: 0.3s;
        }

        input:focus, textarea:focus {
            background-color: #333333;
            color: white;
        }

        /* Estilo específico para el textarea */
        textarea {
            height: 100px;
            resize: none; /* Evita que el usuario cambie el tamaño */
        }

        .char-count {
            text-align: right;
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }

        button {
            width: 120px;
            padding: 12px;
            background-color: #262626;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            text-transform: uppercase;
            font-weight: 500;
            margin-top: 10px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #3a3a3a;
        }


/* MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES MEDIA  */


@media (min-width:350px){

.nav__logo{
    height: 45px;
}

.nav__menu{
    /* height: 50; */
    width: 50px;
}

.nav__list2{
    font-size: 1.5rem;
}

.hero__title{
    font-size: 2.5rem;
}

.hero__paragraph{
    font-size: 1.2rem;
}

.about__title{
    font-size: 2.5rem;
}

.about__paragraph{
    font-size: 1.2rem;
}

.carrousel__title{
    font-size: 2.5rem;
}

.carrousel__title strong:nth-child(4){
    font-size: 3rem;
}


.carrousel__paragraph{
    font-size: 1.2rem;
    line-height: 1.5;
}

.services__title{
    font-size: 2.8rem;
}

.services__subtitle{
    font-size: 1.8rem;
}

.services__paragraph{
    font-size: 1.2rem;
    line-height: 1.5;
}

.eqp__title{
    font-size: 2.5rem;
}

.footer__newsletter{
    font-size: 2.5rem;
}

.footer__form p{
    font-size: 1.2rem;
}

.nav__link2{
    font-size: 1.2rem;
}

.footer__inputs a{
    text-decoration: none;
    color: #e46f6f;
    font-size: 1.3rem;
}

/* .footer__form p{
    line-height: 1.5;
} */

}




@media (min-width:1025px) {

    /* MAIN MAIN MAIN */

    .services__bkg{
        /* backdrop-filter: unset; */
    }

    .glassballs2{
    position: absolute;
    top: 110px;
    left: 1100px;
    /* background-color: rgb(0, 0, 0); */
    background-color: rgb(48, 0, 0);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    
    box-shadow: 
    inset 0 0 50px #fff,
    inset 20px 0 60px #3c3c3e, /* sombreado 1 interior */
    inset -20px 0 60px rgb(0, 0, 0),/* sombreado 2 interior */
    
    inset 20px 0 300px #000000, /* circulo del centro 1 */
    inset -20px 0 300px rgb(0, 0, 0), /* circulo del centro 2 */
    
    0 0 5px #ffffff, /* alo exterior 1 */
    -10px 0 60px #5b5b5d, /* alo exterior principal */
    10px 0 60px rgb(0, 0, 0); /* alo exterior 3 */

    animation: load 5s infinite;
}

    .glassballs3{
        position: absolute;
        top: 800px;
        right: -50px;
        /* background-color: rgb(0, 0, 139); */
        background-color: #00ffea98;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        /* box-shadow: 
        inset 0 0 50px #fff,
        inset 20px 0 60px #ee82ee,
        inset -20px 0 60px #0ff,
        
        inset 20px 0 300px #ee82ee,
        inset -20px 0 300px #0ff,
        
        0 0 5px #fff,
        -10px 0 60px #ee82ee,
        10px 0 60px #0ff; */
    
        box-shadow: 
        inset 0 0 50px #fff,
        inset 20px 0 60px #15ff00,
        inset -20px 0 60px #00ff6e,
        
        inset 20px 0 300px #4d94ff,
        inset -20px 0 300px #0ff,
        
        0 0 5px #fff,
        -10px 0 60px #00ffae,
        10px 0 60px rgb(0, 255, 55);
    
        animation: load 10s infinite;
    }

    .glassballs4{
    position: absolute;
    top: 800px;
    left: 320px;
    /* background-color: rgb(0, 0, 0); */
    background-color: rgb(99, 0, 0);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    
    box-shadow: 
    inset 0 0 50px #fff,
    inset 20px 0 60px #ff1111, /* sombreado 1 interior */
    inset -20px 0 60px rgb(255, 4, 4),/* sombreado 2 interior */
    
    inset 20px 0 300px #830000, /* circulo del centro 1 */
    inset -20px 0 300px rgb(152, 1, 1), /* circulo del centro 2 */
    
    0 0 5px #ffffff, /* alo exterior 1 */
    -10px 0 60px #ff0000, /* alo exterior principal */
    10px 0 60px rgb(241, 216, 216); /* alo exterior 3 */

    animation: load 5s infinite;
}

    .glassballbig{
        position: absolute;
        top: 200px;
        left: 150px;
        /* background-color: rgb(0, 0, 139); */
        background-color: rgb(86, 0, 139);
        width: 1000px;
        height: 1000px;
        border-radius: 50%;
        /* box-shadow: 
        inset 0 0 50px #fff,
        inset 20px 0 60px #ee82ee,
        inset -20px 0 60px #0ff,
        
        inset 20px 0 300px #ee82ee,
        inset -20px 0 300px #0ff,
        
        0 0 5px #fff,
        -10px 0 60px #ee82ee,
        10px 0 60px #0ff; */
    
        box-shadow: 
        inset 0 0 50px #fff,
        inset 20px 0 60px #498b8e,
        inset -20px 0 60px #000dff,
        
        inset 20px 0 300px #4d94ff,
        inset -20px 0 300px #0ff,
        
        0 0 5px #fff,
        -10px 0 60px #d900ff,
        10px 0 60px rgb(0, 72, 255);
    
        animation: load 30s infinite;
    }
    

    .nav__menu {
        display: none;
    }



    /* .nav__logo{
        width: 20rem;
        height: 200px;
        
    } */
    
    
    .nav__bkg{
        height: 90px;
    }

    .nav{
        height: 90px;
    }

    .nav__list {
        position: relative;
        height: 50px;
        backdrop-filter: blur(110px);
        /* background-color: #ffffff13; */
        padding: 15px;
        border-radius: 25px;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;

        list-style: none;

        transform: unset;
        transition: none;
    }

    .nav__list_color{
        position: relative;
        height: 50px;
        background-color: #c5d8ff00;
        padding: 15px;
        border-radius: 25px;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;

        list-style: none;

        transform: unset;
        transition: none;
    }

    .nav__item{
        z-index: 1;
    }

    .nav__list2{
        display: none;
    }

    
    .nav__list--show {
        transform: unset;
    }

    .nav__link {
        color: #ffffff;
        text-decoration: none;
        border: 1px solid transparent;
        padding: 10px 25px;
        border-radius: 10px;
        font-size: 1rem;

    }

    .nav__link_contacto{
        position: relative;
        display: inline-flex;
        padding: 10px 30px;
        border-radius: 10px;
        background-color: #ff000092;
        color: #ffffff;
        text-decoration: none;
        letter-spacing: 1px;
        overflow: hidden;
        transition: .5s ease;
        z-index: 101;
    }

    .nav__link_contacto:hover{
        transform: scale(1.11);
    }

    .nav__link_contacto span{
        position: relative;
        z-index: 1;
    }
    
    .nav__link_contacto::before{
        content: '';
        position: absolute;
        /* top: var(--y);
        left: var(--x); */
        /* top: 0; */
        bottom: 0;
        right: 50%;
        transform: translate(50%, 50%);
        width: 0;
        height: 0;
        border-radius: 50%;
        background-color: #d31818;
        transition: width 0.5s, height 0.5s;
        z-index: 0;
    }
    
    .nav__link_contacto:hover::before{
        width: 200px;
        height: 200px;
    }

    /* .nav__link__color{
        border: 1px solid rgb(255, 255, 255);
        
    } */

    .nav__span{
        position: absolute;
        top: 50;
        left: 0;
        width: 130px;
        height: 100%;
        background: linear-gradient(180deg,rgb(104, 179, 255) ,#1e00ff3e);
        /* background: linear-gradient(180deg,rgb(171, 171, 171) ,#5757573e); */
        border-radius: 25px;
        transition: ease-out .5s;

    }

    .nav__item:nth-child(1):hover~span{
        left:0;

    }
    .nav__item:nth-child(2):hover~span{
        left: 140px;

    }
    .nav__item:nth-child(3):hover~span{
        left: 306px;

    }
    
    .nav__item:nth-child(4):hover~span{
        left: 470px;
        width: 195px;
        
    }
    /* .nav__item{
        padding: 5px;
        border-radius: 25px;
    }

    .nav__item:hover{
        background-color: #ffffff;
        
    } */

    .nav__item_contacto{
        display: unset;
    }
    .nav__link:hover{
        /* color: rgb(0, 0, 0) ; */
    }

    /* .nav__link__color:hover{
        background-color: rgb(255, 255, 255);
        color: rgb(255, 0, 0);
    } */

    /* hero-main */

    .miVideo{
        display: unset;
        position: fixed;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .5;
        z-index: -1;
    }

    /* .hero{
        background-image: linear-gradient(125deg, #000000 40%, #764ba200 100% ), url(/assets/video_prueba_proevent.mov);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center
    } */

    
    .hero__main {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
        min-height: 550px;
        align-items: center;
    }

    .hero__figure {
        order: 0;
        padding: 0;
        width: 46%;
    }

    /* .hero__img {
        max-width: 450px;
    } */


    .nav__logo{
        height: 40px;
        padding: 0px;
        width: auto;
    }

    .hero__texts {
        width: 70%;
        text-align: center;
        gap: 2rem;
        padding-bottom: 0;
        padding-top: 0;
    }

    /* .hero__title {
        font-size: 3.5rem;
        line-height: 1.3;
    }


    .hero__title strong{
        font-size: 5rem;

    } */

    .typewriter{
        font-size: 3rem;
        /* line-height: 1; */
    }

    .typewriter label{
        font-size: 5rem;
    }

    .typewriter-text{
        font-size: 5rem;
        /* text-shadow: 0 0 50px #ffffff; */
        /* line-height: 0.5; */
    }

    .hero__paragraph {
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    .hero__cta {
        justify-self: start;
    }


    /* about */

    .about__title{
        font-size: 3rem;
    }

    .about__paragraph{
        font-size: 1.2rem ;
    }

    .about__container {
        flex-direction: row;
    }

    .about__figure {
        width: 30%;
    }

    .about__img {
        width: 100%;
    }


    .about__texts {
        width: 70%;
        text-align: start;
        place-content: center;
    }

    .subtitle {
        text-align: inherit;
        font-size: 2.5rem;
    }

    .container__carrousel{
        position: relative;
        aspect-ratio: 16/9;
        min-height: 100px;
        max-width: 1300px;
    }

    .container__slider .slide .item{
        
        width: 100%;
        height: 730px;
        border-radius: 20px;
        box-shadow:
        0px 0 100px #00000054;
    }

    
    /* .slide .item:nth-child(1),
    .slide .item:nth-child(2){
        top: 0;
        left: 0;
        transform: translate(0, 0);
        width: 100%;
        height: 100%;
        border-radius: 20px;
        box-shadow: 
        0px 0px 500px #1e00ff39;
    }
    
    .slide .item:nth-child(3){
    left: 102%;
    }
    .slide .item:nth-child(4){
    left: calc(102% + 220px);
    }
    .slide .item:nth-child(5){
    left: calc(102% + 440px);
}

.slide .item:nth-child(n + 6){
    left: calc(102% + 660px);
   
} */

    .slide .item:nth-child(1),
    .slide .item:nth-child(2){
        /* top: 0; */
        left: -35%;
        /* transform: translate(0, 0); */
        width: 200px;
        height: 100%;
        border-radius: 20px;
        /* box-shadow: 
        0px 0px 500px #1e00ff39; */
    }
    
    .slide .item:nth-child(3){
        width: 200px;
        left: -18%;
    }
    .slide .item:nth-child(4){
        /* width: 200px; */
        left: 0;
    }
    .slide .item:nth-child(5){
        width: 200px;
        left: 102%
    /* left: -18%; */
    }
    .slide .item:nth-child(6){
        width: 200px;
        left: calc(102% + 220px);
    /* left: -18%; */
    }

/* here n = 0, 1, 2, 3,... */
.slide .item:nth-child(n + 7){
    width: 200px;
    left: calc(102% + 440px);
    opacity: 0;
    /* right: 20px; */
}

.item .content{
    width: 500px;
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80;
    text-align: left;
    color: #ffffff;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
}

.content .name{
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0;
    animation: animate 1s ease-in-out 1 forwards;
}

.content .des{
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 20px;
    opacity: 0;
    animation: animate 1s ease-in-out .3s 1 forwards;
}

/* @keyframes animate {
    from{
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }

    to{
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
} */



    .carrousel__title{
        font-size: 3rem;
    }

    .carrousel__title strong:nth-child(4){
        font-size: 3.5rem;
    }

    .carrousel__paragraph{
        font-size: 1.2rem;
    }

    .button{
        top: 92%;
    }

    .button button{
        width: 50px;
        height: 50px;
    }

    /* QUALITY MANAGEMENT QUALITY MANAGEMENT QUALITY MANAGEMENT QUALITY MANAGEMENT */

    .cards{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 30px;
        margin-top: 80px;
    }

    .card{
        height: 300px;
        /* width: 370px; */
        width: auto;
        max-width: 350px;
        background-color: #00133f31;
        backdrop-filter: blur(40px);
        padding: 3% 8%;
        /* border: 0.2px solid rgba(255, 255, 255, 0.581); */
        border-radius: 8px;
        transition: .6s;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }
    

    /* SERVICES */

    .servicescontent .box {
        /* margin-right: 30px; */
    }

    .services__subtitle{
        font-size: 1.8rem;
    }

    .services__paragraph{
        font-size: 1.2rem;
    }

    .eqp__title{
        font-size: 3rem;
    }
    

    /* SOBRE NOSOTROS */

    .aboutus__container{
        height: 900px;
    }
    
    .aboutus__image{
        /* border-radius: 20px; */
        width: 500px;
        height: auto;
        overflow: hidden;
        position: absolute;
        /* top: 1; */
        left: 200px;
    }

    .aboutus__image img{
        width: 100%;
        border-radius: 20px;
        /* height: auto; */
    }

    .aboutus__box{
        position: absolute;
        background-color: #54545434;
        backdrop-filter: blur(40px);
        border-radius: 20px;
        width: 600px;
        height: auto;
        top: 300px;
        right: 120px;
        padding: 40px;
    }

    .aboutus__subtitle{
        font-size: 3rem;
        color: #fff;
        position: absolute;
        right: 120px;
        top: 200px;
    }

    .aboutus__paragraph{
        color: #fff;
    }
    

    /* footer */

    .footer {
        text-align: center;
    }

    .logo__contacto{
        padding-top: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .logo__contacto img{
        width: 600px;
    }



}