/* Definimos la animación */
@keyframes zoomRespiracion {
    0% {
      transform: scale(1); /* Tamaño original */
    }
    50% {
      transform: scale(1.1); /* Zoom in (10% más grande) */
    }
    100% {
      transform: scale(1); /* Regresa al original */
    }
  }
  
  /* La clase que aplicaremos */
  .animacion-zoom {
    display: inline-block; /* Importante para que el transform funcione bien */
    animation: zoomRespiracion 3s ease-in-out infinite;
  }

  /* efecto giro */
  .logo.gira{
    /* Estado inicial: rotado 145 grados */
    transform: rotate(145deg);
    transition: transform 0.2s ease-out; /* Suaviza el movimiento al hacer scroll */
    will-change: transform; /* Optimización para el navegador */
  }

  /* efecto zoom cambio color */

  :root {
    --color-zoom: #B78E24;
  }
  
  .zoom.change_color {
    display: inline-block; /* Crucial para transformaciones */
    width: 100%;           /* Para que siga centrado si es necesario */
    text-align: center;
    color: #000;           /* Define un color base siempre */
    transition: all 0.8s ease-out;
    transform: scale(.5);
}

  .zoom.change_color.active {
    color: var(--color-zoom);
    transform: scale(1); /* Zoom ligero del 15% */
  }


    /* sticky 3 elementos */

  .contenedor-magico {
    position: relative;
    width: 100%;
  }
  
 
  .bloque.right {
    position: relative;
    z-index: 2; /* Por encima de la regresiva */
  /* Este margen negativo es el que hace que el bloque "suba" sobre la imagen */
  margin-top: -300px; 
  }
  
  /* La imagen final que empuja todo */
  .imagen-final {
    position: relative;
    z-index: 3; 
    display: block;
    width: 100%;
  }


  /* ------ fade up --------- */
.fade-up {
    opacity: 0;
    transform: translateY(30px); /* Empieza 30px más abajo */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Optimización de rendimiento */
}

/* Clase que el JS añadirá automáticamente */
.fade-up.visible {
    opacity: 1;
    transform: translateY(0); /* Sube a su posición original */
}

  /* ------ fade left --------- */

.fade-left {
    opacity: 0;
    transform: translateX(-50px); /* Ajusta a -100px para un recorrido más largo */
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: opacity, transform;
}

/* Estado final: posición original */
.fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}