/* :root {
  --offset: calc(0.2557 * 100vw - 61.824px);
} */

.hero-section::before,
.hero-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 🚀 Permite que los botones sigan siendo interactivos */
}

/* Patrón de textura */
.hero-section::after {
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); 
    opacity: 0.5;
    z-index: 0;
/*     background-image: url("https://www.transparenttextures.com/patterns/bright-squares.png"); */
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.contenedorCentral{
  background: var(--gradiente-contenedor-central);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(47, 48, 64,0.5);
  width: 900px;
}



.contenedorIzq{

    justify-items: center;
    justify-self: center;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color:  var(--fondo-blanco);

}

.contenedorDerecho{

    justify-items: center;
    justify-self: center;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
   
}

.fw-bold{
  font-weight: 300!important;
}

/* .contenedorGif{
  width: fit-content;
  width: -webkit-fill-available;
}

.contenedorGif img{
  width:100%;
  background: var(--gradiente-morado);
} */




.carousel {
    position: relative;
    grid-area: contenedorDerecho;
    margin:3em;
    overflow: hidden; /* Evita que las imágenes sobresalgan */

}

.carousel-inner {
    border-radius: 15px;
    
}

.carousel-inner img{
    max-height: 45vh;
    width: 100%; /* Asegura que las imágenes ocupen todo el ancho del carrusel */
    object-fit: cover; /* Ajusta las imágenes sin distorsión */
}

.carousel-control-next-icon, .carousel-control-prev-icon{
background-color: var(--color-border-focus);
border-radius: 8px;
}

.oculto {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    display: none;
}
.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
    display: block;
}


/********** ESTILO ANIMACION HERO SECTION H1 ******/
/********** Animacion hero-section h1 ***************/
@keyframes slideIn {
  0% {
      transform: translateX(-100vw);
      opacity: 0;
  }
  50% {
      transform: translateX(40vw);
      opacity: 1;
  }
  100% {
      transform: translateX(0);
  }
}

.hero-section h1 {
  display: inline-block; /* Para que la animación afecte solo el texto */
  animation: slideIn 4s ease-in-out;
}

/*
/********** Animación hero-section h1 estilo Tetris **************
@keyframes tetrisSlide {
0% {
    transform: translateX(-75vw);
    opacity: 0;
}
20% {
    transform: translateX(-50vw);
    opacity: 1;
}
40% {
    transform: translateX(-25vw);
}
60% {
    transform: translateX(-0vw);
}
80% {
    transform: translateX(25vw);
}
100% {
    transform: translateX(0);
}
}

.hero-section h1 {
 display: inline-block; /* Para que la animación afecte solo el texto 
  animation: tetrisSlide 5s steps(1, end)  ; 
}


/*  /* Animación con pausas marcadas 
/* Animación con pausas marcadas para el movimiento horizontal por PALABRAS 
@keyframes tetrisWord {
  0% { transform: translateX(-60vw); opacity: 0; }
  25% { transform: translateX(-45vw); opacity: 1; }
  50% { transform: translateX(-30vw); opacity: 1; }
  75% { transform: translateX(-15vw); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Animación de caída (vertical) 
@keyframes tetrisWordVertical {
  0% { transform: translateY(-60vh); opacity: 0; }
  25% { transform: translateY(-45vh); opacity: 1; }
  50% { transform: translateY(-30vh); opacity: 1; }
  75% { transform: translateY(-15vh); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
/* Diferente delay para cada palabra 
.word:nth-child(1) { animation-delay: 0s; }
.word:nth-child(3) { animation-delay: 0s; }
.word:nth-child(5) { animation-delay: 0s; }
.word:nth-child(6) { animation-delay: 0s; }

/* Palabras con animación vertical (caída) 
.word:nth-child(2), /* Palabra 2 
.word:nth-child(4) { /* Palabra 4 
  animation: tetrisWordVertical 4s ease-in-out forwards;
}

/* Palabra 2 y 4 tienen un retraso en la animación para que caigan después 
.word:nth-child(2) { animation-delay: 1s; }
.word:nth-child(4) { animation-delay: 1s; }

/* Aseguramos que la animación vertical y horizontal no se mezclen 
.word:nth-child(2) {
  animation: tetrisWordVertical 4s ease-in-out forwards;
}
.word:nth-child(4) {
  animation: tetrisWordVertical 4s ease-in-out forwards;
}


.hero-section h1 {

  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Ocultamos inicialmente cada palabra 
.word {
display: inline-block;
animation: tetrisWord 3s steps(1, end) forwards;
/*        border: solid 1px white;
          border-radius: 2px;
          background-color: var(--color-morado);
          opacity: 1;
          padding: 2px; 
} */



.hero-section h2 {
  opacity: 0;
  transform: translateY(20px); /* Efecto de deslizamiento */
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 3s; /* Espera 2 segundos antes de aparecer */
}

        /* Animación de fade-in con transparencia progresiva */
        @keyframes fadeIn {
          0% {
              opacity: 0;
              transform: translateY(20px);
          }
          50% {
              opacity: 0.5; /* Mitad de la animación con transparencia intermedia */
          }
          100% {
              opacity: 1;
              transform: translateY(0);
          }
}



/********* ESTILOS ANIMACION ENCHUFES ****************/
/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .contenedorAnimacion{
    width: 100%;
    background: var(--gradiente-morado);
  }
  
/*   .animation-container img{
    width: 100%;
  } */
  
  /* Contenedor Principal */
  .animation-container {
    position: relative;
    width:1024px;
    height: 620px; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  /* Estilo de los enchufes */
  .plug {
    position: absolute;
    width: 300px; 
    height: auto;
    opacity: 1; /* Siempre visible */
  }
  
  /* Enchufe Macho */
  .plug-macho.animate {
    left: 12px; /* Empieza fuera del contenedor, a la izquierda */
    animation: move-right 2s ease-in-out forwards;
  }
  
  /* Enchufe Hembra */
  .plug-hembra.animate {
    right: 12px; /* Empieza fuera del contenedor, a la derecha */
    animation: move-left 2s ease-in-out forwards;
  }


  
  /* Animación de movimiento hacia el centro */
  @keyframes move-right {
    0% {
      transform: translateX(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translateX(200px); /* Ajusta este valor según la distancia requerida */
    }
  }
  
  @keyframes move-left {
    0% {
      transform: translateX(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translateX(-200px); /* Ajusta este valor según la distancia requerida */
    }
  }



/*********************** MEDIAS QUERYS *********************/
/* Media query para tabletas para contenedores del centro */
 @media (max-width: 600px) {

    .contenedorCentral{ 

        width: 100vw;
    }

}



/* Media query para tabletas 
@media (min-width: 1024px) {

    .contenedorIzq{
        width: 35%;
    }
    .contenedorDerecho{
        width: 65%;
    }

    .contenedorCentral{
        display: flex;
        flex-direction: row;
        width: 100vh;
    }

} */




/******************* Media query para la animacion enchufes ***********************/
@media (max-width: 768px) {
  .animation-container{
    width: 100vw;
    height: 500px;
  }

  .plug{
    width:calc(100vw/2.5);
  }


    /* Animación de movimiento hacia el centro */
    @keyframes move-right {
      0% {
        transform: translateX(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(65px); /* Ajusta este valor según la distancia requerida */
      }
    }
    
    /* Animación de movimiento hacia el centro */
    @keyframes move-left {
      0% {
        transform: translateX(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(-65px); /* Ajusta este valor según la distancia requerida */
      }
    }
}


 /* Media query para la animacion */
 @media (max-width: 425px) {
  .animation-container{
    width: 100vw;
    height: 300px;
  }

  .plug{
    width:calc(100vw/2.5);
  }


    /* Animación de movimiento hacia el centro */
    @keyframes move-right {
      0% {
        transform: translateX(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(31px); /* Ajusta este valor según la distancia requerida */
      }
    }
    
    /* Animación de movimiento hacia el centro */
    @keyframes move-left {
      0% {
        transform: translateX(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(-31px); /* Ajusta este valor según la distancia requerida */
      }
    }
}

/* Media query para la animacion */
@media (max-width: 375px) {
  .animation-container{
    width: 100vw;
    height: 310px;
  }

  .plug{
    width:calc(100vw/2.5);
  }


    /* Animación de movimiento hacia el centro */
    @keyframes move-right {
      0% {
        transform: translateX(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(26px); /* Ajusta este valor según la distancia requerida */
      }
    }
    
    /* Animación de movimiento hacia el centro */
    @keyframes move-left {
      0% {
        transform: translateX(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(-26px); /* Ajusta este valor según la distancia requerida */
      }
    }
}





/* Media query para la animacion */
@media (max-width: 320px) {
  .animation-container{
    width: 100vw;
    height: 310px;
  }

  .plug{
    width:128px;
  }


    /* Animación de movimiento hacia el centro */
    @keyframes move-right {
      0% {
        transform: translateX(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(20px); /* Ajusta este valor según la distancia requerida */
      }
    }
    
    /* Animación de movimiento hacia el centro */
    @keyframes move-left {
      0% {
        transform: translateX(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(-20px); /* Ajusta este valor según la distancia requerida */
      }
    }
}


/***** ESTILOS ANIMACION PIEZAS TETRIS *****************************/
/* .contenedorAnimacion2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #222;
  overflow: hidden;
}

.tetris-container {
  position: relative;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.piece {
  position: absolute;
/*   width: 75px;
  height: 75px; 
  display: grid;
  grid-template-columns: repeat(3, 25px);
  gap: 0px;
}

/* Bloques 
.piece div {
  width: 25px;
  height: 25px;
  background-color: currentColor;
}

/* L Piezas 
.L {
  color: #416d8e;
  left: -100px;
  animation: moveL 3s steps(4) forwards;
}

.L div:nth-child(n){
  border: 1px solid white;
  margin: 0;
  padding: 0;
}

.L .extra {
  grid-column: 1;
  grid-row: 2;
  
}

/* J Piezas 
.J {
  color: #64566f;
  right: -100px;
  animation: moveJ 3s steps(4) forwards;
}

.J div:nth-child(n) {
  border: 1px solid white;
  margin: 0;
  padding: 0;
}

.J .extra {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid white;
}
/* Animaciones 
@keyframes moveL {
  0% { left: -100px; }
  25% { left: -50px; }
  50% { left: 0px; }
  75% { left: 50px; }
  100% { left: 60px; }
}

@keyframes moveJ {
  0% { right: -100px; }
  25% { right: -50px; }
  50% { right: 0px; }
  75% { right: 50px; }
  100% { right: 60px; }
} */
/************ ANIMACION TETRIS *************************/



/* /********* ESTILOS ANIMACION ENCHUFES RESPONSIVE ****************/
/* General Reset 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Contenedor Principal 
.animation-container {
  position: relative;
  width: 100%; /* Ocupa el ancho completo del contenedor 
  max-width: 1024px; /* Limita el ancho máximo 
  aspect-ratio: 1024 / 620; /* Mantén una proporción del contenedor 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Estilo de los enchufes 
.plug {
  position: absolute;
  width: 20%; /* Usa un ancho relativo al contenedor 
  height: auto;
  opacity: 1; /* Siempre visible 
}

/* Enchufe Macho 
.plug-macho.animate {
  left: -10%; /* Empieza fuera del contenedor, a la izquierda 
  animation: move-right 2s ease-in-out forwards;
}

/* Enchufe Hembra 
.plug-hembra.animate {
  right: -10%; /* Empieza fuera del contenedor, a la derecha 
  animation: move-left 2s ease-in-out forwards;
}

/* Animación de movimiento hacia el centro 
@keyframes move-right {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(50.5%); /* Ajusta según el tamaño del enchufe 
  }
}

@keyframes move-left {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50.5%); /* Ajusta según el tamaño del enchufe 
  }
}

/* Media Queries para ajustar el tamaño en pantallas pequeñas 
@media (max-width: 768px) {
  .animation-container {
    max-width: 100%;
    aspect-ratio: 16 / 9; /* Ajusta la proporción para pantallas más pequeñas 
  }

  .plug {
    width: 30%; /* Ajusta el tamaño de los enchufes 
  }
}

@media (max-width: 480px) {
  .animation-container {
    aspect-ratio: 4 / 3; /* Proporción más cuadrada para móviles 
  }

  .plug {
    width: 40%; /* Aumenta el tamaño para pantallas pequeñas 
  }
} */