.bounce-right {
    animation: bounce-right .9s linear both
}

@keyframes bounce-right {
    0% {
        transform: translateX(48px);
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        transform: translateX(26px);
        animation-timing-function: ease-in
    }

    65% {
        transform: translateX(13px);
        animation-timing-function: ease-in
    }

    82% {
        transform: translateX(6.5px);
        animation-timing-function: ease-in
    }

    93% {
        transform: translateX(4px);
        animation-timing-function: ease-in
    }

    25%,
    55%,
    75%,
    87%,
    98% {
        transform: translateX(0);
        animation-timing-function: ease-out
    }

    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1
    }
}

.transformacionBlind {
    opacity: 1;
    transform: translateY(-50px);
    transition: opacity 1.5s, transform 1.5s;
}

.transformacionBlind:not(.intersected) {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 1.5s, transform 1.5s;

}

.styleVision {
    opacity: 1;
    transform: translateY(-50px);
    transition: opacity 1.5s, transform 1.5s;
}

.styleVision:not(.intersectedVision) {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 1.5s, transform 1.5s;

}

.imagen2Class {
    opacity: 1;
    transform: translateX(50px);
    transition: opacity 1.5s, transform 1.5s;
}

.imagen2Class:not(.imagesStyle) {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1.5s, transform 1.5s;

}

.imagen3Class {
    opacity: 1;
    transform: translateX(-50px);
    transition: opacity 1.5s, transform 1.5s;
}

.imagen3Class:not(.imagesStyle) {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1.5s, transform 1.5s;

}

.imagen4Class {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 1.5s, transform 1.5s;
}

.imagen4Class:not(.imagesStyle) {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 1.5s, transform 1.5s;

}

.glow_light {
    width: 60%;
    height: 180px;
    background-image: linear-gradient(225deg, #4b39ef, #ee8b60 65%, rgba(26, 31, 36, 0));
    filter: blur(50px);
    border-radius: 100%;
    margin-top: -300px;
    margin-left: 20%;
}

.glow_light.ffdc {
    margin-top: -150px;
}

section {

    text-align: center;
    padding: 50px 20px;
}

section header {
    color: #ECF0F1;
    padding: 20px;
}

section img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

button {
    padding: 15px 30px;
    font-size: 16px;
    background-color: #3498DB;
    color: #ECF0F1;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #2980B9;
}

:root {
    --lightGreen: rgb(153, 198, 164);
    --izquierda: rgb(52, 107, 69);
    --derecha: rgb(29, 155, 82);
    --black: black;
    --subtitlesGreen: rgb(153, 198, 164);
    --gray: #A9A9A9;
    --backgroundGreen: #B7E4C7;
    --principalGradient: linear-gradient(90deg, var(--izquierda) 9.38%, var(--derecha) 72.4%);
    --fontFamily: 'SF Compact Display';
    --fontSizeTitle: 4rem;
    --fontSizeSubtitle: 1.5rem;
    --cardBackground: #F0FFF0;
    /* Color verde pastel para las cards */
    --cardHover: #D3E4CD;
    /* Color al pasar el ratón sobre las cards */
    --green: #4CAF50;
    --dark-green: #388E3C;
}

header {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lightGreen);
    text-align: center;
    position: relative;
    font-family: var(--fontFamily);
    
}
.contenedor1 {
    position: relative;
  }
  
  .contenedor1::before {
    content: "";
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1; /* Asegura que el filtro esté por encima de la imagen de fondo */
  }
  
  /* Establece la imagen de fondo */
  .contenedor1 {
    background-image: url(../img/fondo-pantalla-concepto-ecologia-tecnologica_23-2148432195.jpg);
    background-size: cover;
    position: relative; /* Asegura que el contenido esté sobre el filtro */
    z-index: 0; /* Asegura que la imagen de fondo esté detrás del filtro */
  }
  


.tituloPortada {
    font-size: var(--fontSizeTitle);
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.5s forwards;
    color: var(--lightGreen);
    text-align: center;
    font-family: var(--fontFamily);
}

.parrafoPortada {
    font-size: var(--fontSizeSubtitle);
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 1s forwards;
    font-family: var(--fontFamily);
    color: var(--gray);
}

.btn-explore {
    padding: 15px 30px;
    font-size: 1.2rem;
    background-color: var(--green);
    color: white;
    border: none;
    cursor: pointer;

    border-radius: 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease;
    margin: auto;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 1.5s forwards;
    font-family: var(--fontFamily);

}

.btn-explore:hover {
    background-color: var(--dark-green);
}


.text {
    font-family: var(--fontFamily);
    font-size: 14px;
    color: #f5f5f7;
    margin: 0 1.2rem;
    white-space: nowrap;

}

.cards-container {
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 2s forwards;
    font-family: var(--fontFamily);
}

.cards-wrapper {
    display: flex;
    justify-content: center;
    overflow-y: auto;
    /* Permitir desplazamiento vertical en la sección de las cards */
    flex-wrap: wrap;
}

.value-card {
    width: 350px;
    /* Aumentamos un poco el ancho */

    margin: 20px;
    /* Espaciado uniforme */
    background-color: #fff;
    /* Fondo blanco */
    border-radius: 10px;
    /* Bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Transiciones suaves */
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.5s ease-out forwards, moveUp 1s ease-out forwards;
    margin-bottom: 20px;

    text-align: center;
    font-family: var(--fontFamily);
    color: var(--black);
    /* Color de texto */
}

.value-card:hover {
    transform: scale(1.05);
    /* Escalamos la tarjeta al pasar el mouse */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    /* Sombra más pronunciada al pasar el mouse */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes moveUp {
    from {
        transform: translateY(20px);
    }

    to {
        transform: translateY(0);
    }
}


.h2Portada {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--lightGreen);
    font-family: var(--fontFamily);

}

#vision {
    scroll-margin-top: 100px;
}
#market {
    scroll-margin-top: 100px;
}
#competitive {
    scroll-margin-top: 100px;
}


@media(max-width: 700px) {
    .tituloPortada {
        font-size: 1.8rem;  
    }
    .parrafoPortada {
        font-size: 1rem;
        
    }
    .section2P{
        font-family: var(--fontFamily);
        font-style: normal;
        font-weight: bold;
        font-size: 1rem;
        line-height: 1.8rem;
        width: 100% !important;       
        margin-top: 1rem; 
        margin-bottom:2rem
      }
      .section2{
          width: 100%;
          padding: 0;
          
      }
      .widthGeneral{
          padding: 0;
      }

      .imagen2Class,
      .imagen3Class,
      .imagen4Class {
        /* Los estilos específicos para pantallas con un ancho menor a 700px van aquí */
        opacity: 1; /* Mantener la opacidad en 1 */
        transform: translateY(0); /* Mantener la transformación en su lugar */
        transition: none; /* Eliminar la transición */
      }
    
      .imagen2Class:not(.imagesStyle),
      .imagen3Class:not(.imagesStyle),
      .imagen4Class:not(.imagesStyle) {
        /* Los estilos específicos para pantallas con un ancho menor a 700px van aquí */
        opacity: 0; /* Mantener la opacidad en 0 */
        transform: translateY(0); /* Mantener la transformación en su lugar */
        transition: none; /* Eliminar la transición */
      }
  /* Estilos generales sin efecto */
.imagen2Class,
.imagen3Class,
.imagen4Class {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 1.5s, transform 1.5s;
}

.imagen2Class:not(.imagesStyle),
.imagen3Class:not(.imagesStyle),
.imagen4Class:not(.imagesStyle) {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 1.5s, transform 1.5s;
}

.textoModuleBlindToChat{
    margin: 0;
    width: 100% !important;
}

.titleItems{
    
font-style: var(--fontStyle);
font-weight: var(--fontWeight);
font-size: 42px !important;
line-height: 3rem !important;
margin-top: 8rem;
margin-bottom: 0rem;
    
  }

.section5{
    margin-top: 0 !important;
}
  }
.textoEquipo1{
  font-family: var(--fontFamily);
    font-style: normal;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.8rem;
    text-align: start;
    width: 100% !important;
    margin-top: 1rem;
    margin-bottom: 2rem;
    color: #A9A9A9;
}

.textoEquipo2{
    font-family: var(--fontFamily);
      font-style: normal;
      font-weight: bold;
      font-size: 1rem;
      line-height: 1.8rem;
      text-align: start;
      width: 100% !important;
      margin-top: 1rem;
      margin-bottom: 2rem;
      color: #A9A9A9;
  }
  .textoEquipo3{
    font-family: var(--fontFamily);
      font-style: normal;
      font-weight: bold;
      font-size: 1rem;
      line-height: 1.8rem;
      text-align: start;
      width: 100% !important;
      margin-top: 1rem;
      margin-bottom: 2rem;
      color: #A9A9A9;
  }

  .innovateSimple{
    display: flex;
    width: 100%;
    justify-content: center;
 text-align: center;
font-family: var(--fontFamily) !important;
font-style: var(--fontStyle);
font-weight: var(--fontWeight);
font-size: 64px;
color: var(--black);
margin-top: 8rem;
margin-bottom: 0rem;


  }
  .titleItems{
    color:var(--black);
    font-family: var(--fontFamily);
    text-align: start;
    width: 100%;
font-style: var(--fontStyle);
font-weight: var(--fontWeight);
font-size: 64px;
line-height: 4rem;
margin-top: 8rem;
margin-bottom: 0rem;
    
  }

  .sidebar{
    position: fixed; 
    height: 100%;   
  }