/* GALERIA SLIDER */
.caja2{
    display: none;
    height: 100dvh;
}


/* ESTILOS DEL CONTENEDOR */
#sliderContainer{
    display: flex;
    align-items: center;
    overflow-y: hidden;
    gap: 50dvw;
    height: 100%;
    width: auto;
    margin: 0;
    padding: 0;
    padding-left: 50dvw;
    padding-right: 50dvw;
    scroll-snap-type: x mandatory;
  }

  /* ESTILOS DE LAS IMAGENES */

  #sliderContainer img{
    object-fit: cover;
    height: auto;
    width: auto;
    max-height: 80dvh;
    max-width: 80dvw;
    scroll-snap-align: center;
    border-radius: 10px;
  }

.logout{
    display: none;
    width: 50px;
    height: 50px;
    z-index: 3;
    fill: #05ADEA;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
}


.first-galeria{
    columns: 2;
    padding: 16px 32px;
    gap: 32px;
}

.first-galeria img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 32px;
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 3% cover 10%;
  object-fit: contain;
  cursor: pointer;
}

.titulo {
 text-align: center;
 margin-top: 90px;
}

/* TEMA CLARO */
.tema-claro .navar *{
  fill: white;
  animation: changeColoronLightMode linear forwards;
  animation-timeline: scroll(root);
  animation-range: 250px 300px;
}
.tema-claro .navar a svg:hover path{
  animation: changeColoronLightModeHover .3s linear both;
}
.tema-claro .navar .tema:hover path{
  animation: changeColoronLightModeHover .3s linear both;
}
.tema-claro .navar a .scroll:hover path{
  animation: changeColoronLightModeHovero .3s linear both;
}
.tema-claro .navar .scroll:hover path{
  animation: changeColoronLightModeHovero .3s linear both;
}
/* ANIMACIONES */

@keyframes header{
    to {
      background: rgba(255,255,255, .4);
      backdrop-filter: blur(32px);
      font-size: 18px;
      color: black;
    }
  }

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

  
/* ANIMACIONES */

@keyframes changeColoronLightMode {
  to{
      fill: black;
  }
}
@keyframes changeColoronLightModeHover {
  from{
      fill: white;
  }
  to{
      fill: #05ADEA;
  }
}
@keyframes changeColoronLightModeHovero {
  from{
      fill: black;
  }
  to{
      fill: #05ADEA;
  }
}