html {
  scroll-behavior: smooth;
}

.bloque {
  display: flex;
        position: relative;
      height: 140vh;
      display: flex;
      justify-content: center;
     /*  align-items: center; */
      font-size: 2rem;
      color: white;
      background-color: blue;
         background: #f0f0f0;
      z-index: 1;

    }


    .bloque2 {
      position: relative;
      height: 340vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      color: white;
      background: blue;

    }

    .bloque3 {
     /*  border-top: 1px solid black; */
  display: flex;
        position: relative;
      height: 80vh;
      display: flex;
      justify-content: center;
     /*  align-items: center; */
      font-size: 2rem;
      color: white;
      background-color: #fff;
     /*     background: #f0f0f0; */
      z-index: 1;

    }


  .backgroundSuport {
      
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
  
      background-color: #f0f0f0;
       animation: blokk 0.1s linear forwards; 
  }

  @keyframes blokk {
  0% { background-color: #222 ;  }
    100% {  background-color: #f0f0f0 ; } 
}

  .backgroundSuport.activoo {
      background-color: #f0f0f0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
  
      background-color: #f0f0f0;
      animation: blok 0.5s linear forwards;
  }

@keyframes blok {
  0% { background-color: #f0f0f0 ;  }
    100% {  background-color: #222 ;   } 
}

/*     .parallax2 h2 {
      position: sticky;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      font-size: 3rem;
      z-index: 2;
    }
 */

  .stickyBlock{
        position: sticky;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      font-size: 3rem;
      z-index: 2;
      background-color: red;


    background-color: #fb3232 ;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25em;
    max-width: 25em;

    height: 12em;
    color: black;
    font-size: clamp(0.7rem, 2.7vw, 1.5rem);
    border-radius: 2%;
  
  }
  
  
  .model-button2{
    margin-right: 2em;
  }



    .parallax1 {
   /*      background-color: #222; */
/*       background-image: url("https://picsum.photos/1920/1080?random=1");
      background-attachment: fixed;
      background-size: cover;
      background-position: center; */
    }

.normal {
/*   background: linear-gradient(to bottom, #f0f0f0 0%, #222 100%); */
  background-size: 60% 200%; /* hacemos más grande el fondo para animarlo */
  background-position: top;   /* posición inicial */
  animation: blok0 2s linear forwards;

background: #222;
background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 0.81) 25%, rgba(34, 34, 34, 0.41) 45%, rgba(34, 34, 34, 0.13) 70%, rgba(240, 240, 240, 0) 93%);

}



/* Animación del gradiente */
/* @keyframes blok0 {
  0% {
    background-position: top; 
  }
  100% {
    background-position: bottom; /
  }
} */


/*     .bloque2.normal.activoo {
      background-color: #222;
      animation: blok 0.4s linear forwards;
  }

@keyframes blok {
  0% { background-color: #f0f0f0 ;  }
    100% {  background-color: #222 ; } 
}
 */



    .parallax2 {
/*       background-image: url("/static/images/backgrounds/5570834.jpg");
      background-attachment: fixed;
      background-size: cover;
      background-position: center; */
/*       background-color: #222; */
    }



/* ----------model---------- */

#model {
  position: relative;
    z-index: 7;

    width: 10em;
/*     max-width: 1870px; */
    height: 10em;
    cursor: pointer;
    --progress-bar-color: none;
    --progress-bar-height: 0px;

  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-in-out;
transition-delay: 0.4s;
}


#model.modelAnimation2 {
  opacity: 1;
  transform: translateY(0);
}



/* SMALLER SCREENS */
@media (max-width: 768px) {
    #model2 {

        width: 100%;
        max-width: 100%;
        height: 50vh;
    }
}













.try-btn {
  width: 10em;
  height: 4em;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-weight: 800;
  font-size: 0.6em;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
}


.btn-system {
  background: #37b8df;
  border: none;
  z-index: 1;
}
.btn-system:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #18e9f8;
  background-image: linear-gradient(315deg, #18cff8 0%, #9ce6fc 74%);

  transition: all 0.3s ease;
}
.btn-system:hover {
  color: #003453;
}
.btn-system:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-system:active {
  top: 2px;
}


/* =======end model=========== */





/* 
    ------------------scroll text reveal-------------- */

    html {
/* 	overflow-x: hidden;
	overflow-y: scroll;
	height: 100%; */

}

/* body { height: 200% } */


.bloque2 h1 {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 23em);
  font-size: clamp(2.5em, 4vw, 4em) ;
  letter-spacing: 0.18em;

}

.bloque2 h3 {
  position: fixed;
  top: 65%;
  left: 50%;

  transform: translate(-50%, -50%);
/*   width: min(90%, 23em); */
  font-size: clamp(1.2em, 3vw, 3em) ;
  letter-spacing: 0.3em;
 /*  color: #13c554; */

}


.bloque2 h3.activated {
  mix-blend-mode: difference;
  position: sticky;
  z-index: 60;

}


#ii {
  display: block;
  background: #fff;
  width: 10px;
  height: 1px;
  position: fixed;
  top: 66%;
  left: 62%;
  z-index: 1;
  mix-blend-mode: difference;
  z-index: 0;
}



#ii.LineDotAnimate {
z-index: 1;
  mix-blend-mode: difference;
}

#ii.LineDotAnimate2 {
z-index: -1;
opacity: 0;
  mix-blend-mode: difference;
}

/* --------btn--------- */




/* 
=============end btn=============== */


.blast{
  position: absolute;
bottom: 0px;
  height: 55vh;
  width: 100%;
  background: #fff;
  bottom: 0;
  z-index: 0;
}



.fluidColumn1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;           
  height: 20%;
  background: #222;
  margin-top: -1px;
  clip-path: polygon(0 0, 100% 0, 0 100%); 
}


.fluidColumn2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;       
  height: 20%;
  background: #222;
  margin-top: -1px;
  clip-path: polygon(100% 0, 0 0, 100% 100%); 
}

.tryout{z-index: 30;
  color: #fff;
  position: fixed;
  top: 200px;
    mix-blend-mode: difference;
}




.bloque2 h1 span {
  background:
    linear-gradient(90deg, #fff 0 0) 0 / calc(var(--n)*4ch) no-repeat,
    #222;
  -webkit-background-clip: text;
  color: transparent;
 animation: text 20s linear forwards;

  animation-timeline: scroll(root);
  animation-range: 51vh 400vh; 
  z-index: -1;
}

@keyframes text {
  0% { background-size: 0 ;   top: 20%;}
  99% { background-size: calc(var(--n)*1ch) ;   top: 65%;}
    100% {  z-index: -1; } 
}


.bloque2 h3 span {
  background: linear-gradient(90deg, #fff 0 0) 0 / 0 no-repeat, #222; 
  -webkit-background-clip: text;
  color: transparent;

  animation: text 20s linear forwards;
  animation-timeline: scroll(root);
  animation-range: 190vh 540vh;
  z-index: -1;
transition: 0.4s ease-in-out;
/* color: black; */
  
}

@keyframes text {
  0% { background-size: 0 }    
  99% { background-size: calc(var(--n)*1ch) }
  100% {  z-index: -2; }  
}

.bloque2 span.activated3 {
/* color:#00000099 ; */
color:#fff ;
font-weight:600;

}

/* .bloque2 span.activated3:hover {
color:#fff ;
} */
















    .containerr {
       position: sticky;
     background: #f0f0f0;
        
     top: 0px;
          /*   background: #f0f0f000; */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 90vh;
    }


    .boxx {

  position: sticky;
/*   top: 100%;    */   
  transform: translateY(-50%);

      border-radius: 20px;
        width: 18em;
        height: 10em;
      background: #f0f0f0;
      box-shadow:  0 0 0 #cccccc,
                   0 0 0 #ffffff,
                    10px 10px 10px #cccccc inset,
                    -10px -10px 10px #ffffff inset;
      animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s  ;

      opacity: 0;
        animation-fill-mode: forwards; 
        color: black;
    }

    @keyframes anime {
      0% {
        opacity: 0;
        width: 60px;
        height: 60px;
        background: #f0f0f0;
        box-shadow:  0 0 0 #cccccc,
                     0 0 0 #ffffff,
                      10px 10px 10px #cccccc inset,
                      -10px -10px 10px #ffffff inset;
      }
      25% {
        margin-top: 13em;
        width: 60px;
        height: 60px;
        background: #f8f8f8;
        box-shadow:  10px 10px 10px #cccccc,
                     10px 10px 10px #ffffff,
                     0 0 0 #cccccc inset,
                     0 0 0 #ffffff inset;
      }
      50% {
            opacity: 1;
        width: 60px;
        height: 10em;
        background: #f8f8f8;
        box-shadow:  10px 10px 10px #cccccc,
                     10px 10px 10px #ffffff,
                     0 0 0 #cccccc inset,
                     0 0 0 #ffffff inset;
      }
      100% {
        margin-top: 13em;
        opacity: 1;
        width: 18em;
        height: 10em;
        background: #fafafa;
        box-shadow:  40px 40px 40px #cccccc,
                     0 0 0 #ffffff,
                     0 0 0 #cccccc inset,
                     2px 2px 2px #ffffff inset;
      }
    }
















  /* ------------------start halo--------------------- */

  .bod {
      position: relative;
  /*     background-color: #fff ;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20em;
      height: 10em; */
      color: black;
      color: black;
      font-family: Arial, sans-serif;
      font-size: clamp(0.7rem, 2.7vw, 1.5rem);
      border-radius: 2%;
      animation-delay: 3s;

      opacity: 0;
    display: none;
    transition: opacity 1.5s ease-in, visibility 1s ease-in; 
    }

    .bod.visible {
    opacity: 1;
    display:block;
  }

    .bod b{
  /*     z-index: -1; */

  /* color: transparent;
    opacity: 0;

    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: rgb(0, 76, 139);
    text-stroke-width: 1px;
    text-stroke-color: rgb(0, 76, 139); */

    font-weight: bold;
    font-size: 1.7rem;
    letter-spacing: 0.3rem;
      animation: letterStroke 0.3s ease-in-out forwards; 
    animation-delay: 1s;
    }


  /* animación */
  @keyframes letterStroke {
    10% {
      opacity: 0;
      color: transparent;
    }
  /*    50% {
      opacity: 0.8;
    } */
    
      100% {
        opacity: 1;
      color: #222;
    }
  }



  .texto-animado {
      font-weight: bold;
      font-size: 1.7rem;
      letter-spacing: 0.3rem;
      display: inline-block;
      white-space: nowrap; 

      color: transparent;
    opacity: 0;

    -webkit-text-stroke-width: 0px; 
    -webkit-text-stroke-color: rgb(0, 76, 139);
    text-stroke-width: 0px;
    text-stroke-color: rgb(0, 76, 139);
  }

  .texto-animado span {
        color: transparent;
      opacity: 0;
      animation-name: fadeIn;
      animation-duration: 0.4s; 
      animation-fill-mode: forwards;
      animation-delay: 2s;
  }

  /* Animación de entrada */
  @keyframes fadeIn {
      0% {
        color: transparent;
          opacity: 0;
      }
      50% {
        color: #22222222;
          opacity: 0.8;
      }
      100% {
        color: #222;
          opacity: 1;
      }
  }

    

    .halo-wrap {
    position: relative;
      display: inline-block; 
          font-size: clamp(3rem, 5vw, 4rem);
      
  }



  .texto-halo {
    position: absolute;
    font-weight: bold;
    z-index: 0;
    transform: translateX(-4em);
    opacity: 0; 
    animation: none; 
      animation-delay: 0.6s;
      color: #47a8f2;

      
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: #47a8f2;
    text-stroke-width: 2px;
    text-stroke-color: rgb(91, 2, 2);
  }

.texto-halo.animate {
  animation: subTitleMmove 1s cubic-bezier(0.77,0.16,0.02,0.76)forwards;
      animation-delay: 0.6s;
}

@keyframes subTitleMmove {
  0% {
    opacity: 0;
    transform: translateX(-3em);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(-0em);
  }
}



.texto-halo, .halo-wrap {
  position: relative; 
}


.texto-halo{
  
}


.texto-halo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;   
  height: 1.8em;  
  border: 0.2em solid #bababa; 
  border-radius: 50%;
  transform: translate(-43%, -50%) rotateX(70deg) rotateZ(60deg);
  clip-path: inset(50% 0% 0% 50%); 
  z-index: 1;
  opacity: 0;
    transform-style: preserve-3d;
}

.texto-halo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;
  height: 1.8em;
  border: 0.2em solid #757575;
  border-radius: 50%;
  transform: translate(-43%, -50%) rotateX(70deg) rotateZ(60deg);
  clip-path: inset(0% 50% 0% 0%); 
  z-index: 1;
    opacity: 0;

}


.halo-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;
  height: 1.8em;
  border: 0.2em solid #dbdbdb;
  border-radius: 50%;
  transform: translate(-43%, -50%) rotateX(70deg) rotateZ(60deg);
  clip-path: inset(0% 0% 50% 50%);
  z-index: -1;
  opacity: 1;

}

@keyframes revealRed {
  0% { clip-path: inset(0% 0% 550% 0%);   opacity: 0;}  
  100% { clip-path: inset(0% 50% 0% 0%);   opacity: 1;}  
}

@keyframes revealBlue {
  0% { clip-path: inset(100% 0% 0% 20%);  opacity: 0.7; }  
  100% { clip-path: inset(50% 0% 0% 50%);  opacity: 1; } 

}


.texto-halo.animate::after {
  animation: revealRed 1.4s ease-in-out forwards;
    animation-delay: 0.6s;
}

.texto-halo.animate::before {
  animation: revealBlue 0.4s cubic-bezier(0.25,0.80,0.92,0.29) forwards;
  animation-delay: 2s;
}




/* ==========end halo============== */


/* --------------after halo, card text--------------- */

.afterHalo{
display: flex;
opacity: 0;

  background: linear-gradient(to right, red 0%, red 0%, black 0%, black 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: afterHaloAn 0.9s ease-in-out forwards;
  animation-delay: 4s;
}


@keyframes afterHaloAn {
  0% {
    opacity: 0;            

  }
  100% {
    opacity: 1;         

  }
}







.afterHalo b{
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  font-size: 0.8em;
}

.lastHaloBox{
  display: flex;
 opacity: 0;  
  animation: lastHaloBoxAn 0.9s ease-in-out forwards;
  animation-delay: 4s;
}

@keyframes lastHaloBoxAn {
  0% {
    opacity: 0;            

  }
  100% {
    opacity: 1;         

  }
}




.lastHaloBox b{ 
    margin-left: auto;
  margin-right: auto;
  transform: translateX(1.8em);
  font-weight: 0.3em;

  font-size: 0.6em;
opacity: 0;
 }



/* ==========end after halo============ */




/* --------partial borders-------- */




.half-borders {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
}


.half-borders::before {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;      
  width: 50%;
  border-top: 2px solid #bdbdd2;

  transform: scaleX(0);           
  transform-origin: right center;   
  animation: growLine 0.9s ease-in-out forwards; 
}


.half-borders::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;      
  width: 50%;
  border-bottom: 2px solid #bdbdd2;

  transform: scaleX(0);          
  transform-origin: left center;   
  animation: growLine 0.9s ease-in-out forwards; 
}


@keyframes growLine {
  to {
    transform: scaleX(1);
  }
}


/* =======end partial borders========== */









/* ----------------line svg ---------------- */











.line-container {
  position: absolute;
  width: 90%;
  top: 6%;
  left: 3vw;
  height: 100%; 
  background: #22222200;
  z-index: -3;
}

.animated-line {
  width: 100%;
  height: 100%;
    position: sticky;
  top: 0;
}

.line {
  fill: none;
  stroke: #fff;
  stroke-width: 0.01em;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;

  animation: draw linear forwards;
  animation-timeline: scroll();
  animation-range: 20vh 60vh;
}

.dot {
  fill: #ffffff;
  opacity: 0; 
  transition: opacity 0.5s ease;
    r: 2; 
  vector-effect: non-scaling-stroke;
  
  width: 100%;
  height: auto; 
  position: sticky;
  top: 0;
    r: 2; 
  vector-effect: non-scaling-stroke;
}

.dot.start {
  animation: showStart 0.5s forwards;
  animation-timeline: scroll();
  animation-range: 10vh 20vh;
}

.dot.end {
  animation: showEnd 0.5s forwards;
  animation-timeline: scroll();
  animation-range: 45vh 50vh;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes showStart {
  to { opacity: 1; }
}

@keyframes showEnd {
  to { opacity: 1; }
}







.dot {
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #fff;
}

.end{
  width: 1.5em;
  height: 1.5em;  
}



/* posicion los dots en relación al SVG (aproximadamente) */
.dot.start { top: 50%; left: 80%; transform: translate(-50%, -50%); }
.dot.end   { top: 95%; left: 5%; transform: translate(-50%, -50%); }




















.bloque2 h3 {

  transition: font-size 0.3s ease;
  padding: 0.2em 0.5em; 
}

/* Activación */
.bloque2 h3.activated2 {
  position: sticky;
  z-index: 60;
  font-size: 0.8em;
  letter-spacing: 0.15em;
  mix-blend-mode: normal;

/*   background-color: #eeeeeeb6; */
  background-color: #37b8df;
  border: none;
  border-radius: 10px;
/*   box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); */
  transition: all 0.2s ease 0.1s;
  cursor: pointer;
padding-left: 1em;
padding-right: 1em;
color: #ffffff;

background: #37B8DF;
background: linear-gradient(0deg, rgba(55, 184, 223, 1) 0%, rgba(55, 184, 223, 1) 28%, rgba(55, 184, 223, 1) 100%);
}


.bloque2 h3.activated2:hover {
  background-color: #37b8df;
/*   box-shadow: 0px 15px 13px rgba(67, 67, 67, 0.158); */
/* box-shadow: -1px 13px 10px -1px rgba(0,0,0,0.06);
-webkit-box-shadow: -1px 13px 10px -1px rgba(0,0,0,0.06);
-moz-box-shadow: -1px 13px 10px -1px rgba(0,0,0,0.06);
  color: #fff;
  margin-bottom: 0.5em; */
box-shadow: 0px 6px 11px -6px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 6px 11px -6px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 6px 11px -6px rgba(0,0,0,0.25);
  background: #37B8DF;
background: linear-gradient(0deg, rgba(55, 184, 223, 1) 0%, rgba(117, 203, 230, 1) 56%, rgba(143, 229, 255, 1) 100%);
}


.bloque2 h3.activated2:hover span.activated3 {
  color: #fff;
}







.CardModel-container {
  /* Define las propiedades iniciales del contenedor */
  height: 10em;
  width: 7em;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Aplica la transición a todas las propiedades.
     "all" se refiere a todas las propiedades que cambian.
     "2s" es la duración de la animación.
     "ease-in-out" es la curva de velocidad para una animación suave. */
  transition: all 1s ease-in-out;
}

.CardModel-container.modelAnimation {
  /* Define las propiedades finales del estado animado */
  background-color: #FAFAFA;
  border-radius: 1rem;
  box-shadow: inset 0 0 1.2rem #f3f3f7c2, 0 2px 0.18rem rgba(0, 0, 0, 0.5);
  height: 13em;
  position: relative;
  width: 24em;
  padding-bottom: 1em;
}


/* 
-----------------animate ball fixed------------------- */



  .blastBall {
    position: sticky;
    top: 80%; /* posición vertical fija */
    left: 58.5%; /* posición horizontal */
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background: black;
    transform: scale(0); /* empieza invisible */
    z-index: 100;
    /* transform: translateY(-6em); */
    margin-bottom: -1.7em;
  }
/* =================end animated ball======================= */



/*-----------------scroll down icon------------------- */



.scroll-down {
	position: fixed;
	left: 50%;
	bottom: 20px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid #222;
  border-right: 2px solid #222;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}

.scroll-down.scrollIiconAppear {
  border-bottom: 0px solid #22222200;
  border-right: 0px solid #22222200;
  transition: 1s ease-in-out;
}



@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
/* =================end scroll down icon======================= */






/* ----------------------- vackground videeo  ---------------------------- */
.backgroundVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    

    transform: translateY(-4em);
    overflow: hidden; 
    z-index: -1;
    opacity: 0;
     transition: opacity 1s ease-in-out; 
}

.videoElement {

    width: 100%;
    height: 100%; 
    
    object-fit: cover; 
}


.backgroundVideo.videoActive {
 opacity: 1;
}

/* -====================  ========================= */


































/* ======================r4esponsive======================= */

@media (max-width: 900px) {

  






/* ---------initial box--------- */


    .boxx {

  position: sticky;
/*   top: 100%;    */   
  transform: translateY(-50%);

      border-radius: 20px;
        width: 70%;
        height: 10em;
      background: #f0f0f0;
      box-shadow:  0 0 0 #cccccc,
                   0 0 0 #ffffff,
                    10px 10px 10px #cccccc inset,
                    -10px -10px 10px #ffffff inset;
      animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s  ;

      opacity: 0;
        animation-fill-mode: forwards; 
        color: black;
    }

    @keyframes anime {
      0% {
        opacity: 0;
        width: 60px;
        height: 60px;
        background: #f0f0f0;
        box-shadow:  0 0 0 #cccccc,
                     0 0 0 #ffffff,
                      10px 10px 10px #cccccc inset,
                      -10px -10px 10px #ffffff inset;
      }
      25% {
        margin-top: 13em;
        width: 60px;
        height: 60px;
        background: #f8f8f8;
        box-shadow:  10px 10px 10px #cccccc,
                     10px 10px 10px #ffffff,
                     0 0 0 #cccccc inset,
                     0 0 0 #ffffff inset;
      }
      50% {
        width: 60px;
        height: 10em;
      }
      100% {
        margin-top: 13em;
        opacity: 1;
        width: 70%;
        height: 10em;
        background: #fafafa;
        box-shadow:  40px 40px 40px #cccccc,
                     0 0 0 #ffffff,
                     0 0 0 #cccccc inset,
                     2px 2px 2px #ffffff inset;
      }
    }












    .bloque2 h3 {
  position: fixed;
  top: 65%;
  left: 15%;

  transform: translate(0%, 0%);
/*   width: min(90%, 23em); */
  font-size: 1em;
  letter-spacing: 0.3em;
 /*  color: #13c554; */

}


.bloque2 h3.activated {
  mix-blend-mode: difference;
  position: sticky;
  z-index: 60;
}


.bloque2 h3.activated2 {
    left: 22%;
  position: sticky;
  z-index: 60;
  font-size: 0.8em;
  letter-spacing: 0.15em;
  mix-blend-mode: normal;

/*   background-color: #eeeeeeb6; */
  background-color: #37b8df;
  border: none;
  border-radius: 10px;
/*   box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); */
  transition: all 0.2s ease 0.1s;
  cursor: pointer;
padding-left: 1em;
padding-right: 1em;
color: #ffffff;

background: #37B8DF;
background: linear-gradient(0deg, rgba(55, 184, 223, 1) 0%, rgba(55, 184, 223, 1) 28%, rgba(55, 184, 223, 1) 100%);
}



#ii {
  display: block;
  background: #fff;
  width: 10px;
  height: 1px;
  position: fixed;
  top: 69%;
  left: 82%;
  z-index: 1;
  mix-blend-mode: difference;
  z-index: 0;
}

  .blastBall {
    display: none;
    position: sticky;
    top: 80%; /* posición vertical fija */
    left: 58.5%; /* posición horizontal */
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background: black;
    transform: scale(0); /* empieza invisible */
    z-index: 100;
    /* transform: translateY(-6em); */
    margin-bottom: -1.7em;
  }

  
    .bloque3 {
      margin-top: -0.2em;

    }


}










































/* -----------------responsive halo------------- */

@media(max-width: 900px){





  /* ------------------start halo--------------------- */

  .bod {
      position: relative;
  /*     background-color: #fff ;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20em;
      height: 10em; */
      color: black;
      color: black;
      font-family: Arial, sans-serif;
      font-size: clamp(0.7rem, 2.7vw, 1.5rem);
      border-radius: 2%;
      animation-delay: 3s;

      opacity: 0;
    display: none;
    transition: opacity 1.5s ease-in, visibility 1s ease-in; 
    }

    .bod.visible {
    opacity: 1;
    display:block;
  }

    .bod b{
  /*     z-index: -1; */

  /* color: transparent;
    opacity: 0;

    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: rgb(0, 76, 139);
    text-stroke-width: 1px;
    text-stroke-color: rgb(0, 76, 139); */

    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 0.2rem;
      animation: letterStroke 0.3s ease-in-out forwards; 
    animation-delay: 1s;
    }


  /* animación */
  @keyframes letterStroke {
    10% {
      opacity: 0;
      color: transparent;
    }
  /*    50% {
      opacity: 0.8;
    } */
    
      100% {
        opacity: 1;
      color: #222;
    }
  }



  .texto-animado {
      font-weight: bold;
      font-size: 1.2rem;
      letter-spacing: 0.3rem;
      display: inline-block;
      white-space: nowrap; 

      color: transparent;
    opacity: 0;

    -webkit-text-stroke-width: 0px; 
    -webkit-text-stroke-color: rgb(0, 76, 139);
    text-stroke-width: 0px;
    text-stroke-color: rgb(0, 76, 139);
  }

  .texto-animado span {
        color: transparent;
      opacity: 0;
      animation-name: fadeIn;
      animation-duration: 0.4s; 
      animation-fill-mode: forwards;
      animation-delay: 2s;
  }

  /* Animación de entrada */
  @keyframes fadeIn {
      0% {
        color: transparent;
          opacity: 0;
      }
      50% {
        color: #22222222;
          opacity: 0.8;
      }
      100% {
        color: #222;
          opacity: 1;
      }
  }

    

    .halo-wrap {
    position: relative;
      display: inline-block; 
          font-size: 4em;
      
  }



  .texto-halo {
    position: absolute;
    font-weight: bold;
    z-index: 0;
    transform: translateX(-1.3em);
    opacity: 0; 
    animation: none; 
      animation-delay: 0.6s;
      color: #47a8f2;

      
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: #47a8f2;
    text-stroke-width: 2px;
    text-stroke-color: rgb(91, 2, 2);
  }

.texto-halo.animate {
  animation: subTitleMmove 1s cubic-bezier(0.77,0.16,0.02,0.76)forwards;
      animation-delay: 0.6s;
}

@keyframes subTitleMmove {
  0% {
    opacity: 0;
    transform: translateX(-3em);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(-0em);
  }
}



.texto-halo, .halo-wrap {
  position: relative; 
}


.texto-halo{
  
}


.texto-halo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;   
  height: 1.8em;  
  border: 0.2em solid #bababa; 
  border-radius: 50%;
  transform: translate(-43%, -50%) rotateX(70deg) rotateZ(60deg);
  clip-path: inset(50% 0% 0% 50%); 
  z-index: 1;
  opacity: 0;
    transform-style: preserve-3d;
}

.texto-halo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;
  height: 1.8em;
  border: 0.2em solid #757575;
  border-radius: 50%;
  transform: translate(-43%, -50%) rotateX(70deg) rotateZ(60deg);
  clip-path: inset(0% 50% 0% 0%); 
  z-index: 1;
    opacity: 0;

}


.halo-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;
  height: 1.8em;
  border: 0.2em solid #dbdbdb;
  border-radius: 50%;
  transform: translate(-43%, -50%) rotateX(70deg) rotateZ(60deg);
  clip-path: inset(0% 0% 50% 50%);
  z-index: -1;
  opacity: 1;

}

@keyframes revealRed {
  0% { clip-path: inset(0% 0% 550% 0%);   opacity: 0;}  
  100% { clip-path: inset(0% 50% 0% 0%);   opacity: 1;}  
}

@keyframes revealBlue {
  0% { clip-path: inset(100% 0% 0% 20%);  opacity: 0.7; }  
  100% { clip-path: inset(50% 0% 0% 50%);  opacity: 1; } 

}


.texto-halo.animate::after {
  animation: revealRed 1.4s ease-in-out forwards;
    animation-delay: 0.6s;
}

.texto-halo.animate::before {
  animation: revealBlue 0.4s cubic-bezier(0.25,0.80,0.92,0.29) forwards;
  animation-delay: 2s;
}




/* ==========end halo============== */




}