body{ 
  box-sizing: border-box;
  padding-top: 15vh;
}

/* Por defecto, la navbar NO es fija */
.custom-navbar {
  position: static;
}
.header-bg{  
  background-image: url(../img/footer.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;  
  
}
h2, .tabla{
  text-shadow: 1px 2px rgb(18, 18, 19);
}
.titulo{
  text-shadow: 3px 3px  black !important;
}
.sombra-nav{
  width: fit-content;
  text-shadow: 1px  2px  black;
 
}
.sombra-nav:hover{
  box-shadow: 3px 3px 4px rgb(8, 8, 8);
  text-shadow: none;
  
}
.sombra-nav:active{
  transform: translateX(3px) translateY(3px);
  box-shadow: none;
  color: black !important;
}
.iframe-container:hover{
  box-shadow: 3px 3px 4px rgb(7, 7, 7) !important;
}
/*imagen de portada*/



.form-control:focus{
  border: 2px solid rgb(191, 216, 248);
  box-shadow: none !important;
}
.form-control:hover{
  box-shadow: 2px 2px  3px rgb(7, 7, 7) ;
}
/*animacion de la portada*/
/* Animación para que la copa crezca desde más pequeña */
.copa {
  transform-origin: center bottom;
  transform: scale(0);
  animation: crecer 1s ease-out forwards;
}

@keyframes crecer {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* Animación para que las estrellas aparezcan con retraso */
.estrella {
  opacity: 0;
  animation: aparecer 1s ease-out forwards;
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*animacion de portada de index*/
.hombre-bici {  
  
  animation: avanzar 2s ease-in-out forwards;
}

@keyframes avanzar {
  from {
    transform:  scale(0.8);
  }
  to {
    transform:  scale(1);
  }
}
/*anmacion de portada dimension*/
.humo {
  position: absolute;  
  width: 60%;
  height: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 20%, rgba(243, 243, 208, 0.5) 60%, transparent 100%);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  filter: blur(1px); 
  animation: ondaPortal 2.5s ease-out forwards;
  z-index: 0;
  opacity: 1;
}

@keyframes ondaPortal {
  from {
    transform:  scale(0.5);
    opacity: 1;
    filter: blur(0px);
  }
  
  to {
    transform:  scale(2);
    opacity: 0;
    filter: blur(1px);
  }
}




.mujer-bici{
  animation: avanzar 2s ease-in-out forwards;
}
@keyframes avanzar {
  0% {
      
      transform: scale(0.5);
  }
  100% {
      
      transform: scale(1);
  }
}
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

/* Estilo de cada papelito */
.confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: red; /* Se cambiará dinámicamente */
  opacity: 0;
  animation: explode 1s ease-out forwards;
}
@keyframes explode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0.5);
    opacity: 0;
  }
}
/*sombra de las fotos*/
.sombra-fotos:hover{
  box-shadow: 4px 4px 4px rgb(7, 7, 7) !important;
}
.sombra-fotos:active{
  transform: translateX(3px) translateY(3px) !important;
  box-shadow: none !important;
}
.hr-dotted {
  
  border-top: 3px dashed rgba(255, 255, 255, 0.5); 
 
}


  /* ================== Animaciones =================== */
/* Animaciones por tipo */
.block {
  opacity: 0;
  transition: all 0.8s ease-out;
}

/* Desde la izquierda */
.block.left.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.block.left {
  transform: translateX(-100px) scale(0.5);
}

/* Desde la derecha */
.block.right.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.block.right {
  transform: translateX(100px) scale(0.5);
}

/* Rebote */
.block.bounce.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.block.bounce {
  transform: translateY(20px) scale(0.8);
}

/* Título con glow */
.titulo-animado {
  transition: color 0.6s ease-out, filter 0.6s ease-out;
}
.titulo-animado.visible {
  color: #ffc107;
  filter: brightness(1.2);
}

/* Íconos con pop */
.icono-pop {
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.icono-pop.visible {
  transform: scale(1);
  opacity: 1;
}