/* Animación zoom/pulse lenta para la imagen de fondo */
@keyframes pulse-slow {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

.object-fit-cover {
    object-fit: cover;
    animation: pulse-slow 10s ease-in-out infinite;
}

/* Animación slide-in para título */
@keyframes slide-in-up {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación slide-in para párrafo */
@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-up {
    animation: slide-in-up 1.2s ease-out forwards;
}

.animate-slide-in-left {
    animation: slide-in-left 1.4s ease-out forwards;
    animation-delay: 0.2s;
}

/* Aplicar animaciones a los textos */
.position-relative.z-2 h1 {
    animation: slide-in-up 1.2s ease-out forwards;
}

.position-relative.z-2 p {
    animation: slide-in-left 1.4s ease-out forwards;
    animation-delay: 0.2s;
}

/* Contenedor que pinta el fondo y anima el color */
.btn-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;          /* ajustá al tamaño del PNG */
  border-radius: 12px;         /* podés cambiar a 9999px si lo querés pill */
  background-color: #ffffff;   /* color inicial del fondo */
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;       /* evitar subrayado del <a> */
  box-shadow: 0 0 14px rgba(178, 180, 180, 0.4); /* opcional glow suave */
}

/* Color del fondo al pasar el mouse */
.btn-flecha:hover {
  background-color: #ffe600;   /* color al hover */
  box-shadow: 0 0 16px rgba(255, 230, 0, 0.692);
}

/* La flecha siempre en negro */
.flecha-img {
  display: block;
  height: 40px;   /* ajustá al gusto */
  width: auto;
  filter: brightness(0) saturate(100%); /* fuerza negro sin tocar transparencia */
  padding-top: 3px;
}

/* Glassmorphism Text Hover (Trayectoria y Pistas) */
.glass-panel {
    cursor: default;
}

/* Trayectoria = Amarillo */
.panel-trayectoria h3, .panel-trayectoria h5, .panel-trayectoria li {
    transition: text-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}
.panel-trayectoria h3:hover, .panel-trayectoria h5:hover {
    text-shadow: 0 0 14px #ffc107, 0 0 20px rgba(255, 193, 7, 0.4) !important;
    color: #fff !important;
}
.panel-trayectoria li:hover {
    text-shadow: 0 0 10px #ffc107, 0 0 15px rgba(255, 193, 7, 0.4) !important;
    color: #fff !important;
    transform: translateX(6px);
}

/* Pistas = Rojo */
.panel-pistas > h3, .panel-pistas > ul > li {
    transition: text-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}
.panel-pistas > h3:hover {
    text-shadow: 0 0 14px #dc3545, 0 0 20px rgba(220, 53, 69, 0.4) !important;
    color: #fff !important;
}
.panel-pistas > ul > li:hover {
    text-shadow: 0 0 10px #dc3545, 0 0 15px rgba(220, 53, 69, 0.4) !important;
    color: #fff !important;
    transform: translateX(6px);
}

/* Exposiciones = Celeste */
.panel-exposicion h3, .panel-exposicion li {
    transition: text-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}
.panel-exposicion h3:hover {
    text-shadow: 0 0 14px #0dcaf0, 0 0 20px rgba(13, 202, 240, 0.4) !important;
    color: #fff !important;
}
.panel-exposicion li:hover {
    text-shadow: 0 0 10px #0dcaf0, 0 0 15px rgba(13, 202, 240, 0.4) !important;
    color: #fff !important;
    transform: translateX(6px);
}

/* Hover de Carrusel de Imágenes */
#portfolioCarousel .carousel-item img {
    transition: transform 0.3s ease, filter 0.3s ease !important;
    cursor: pointer;
}
#portfolioCarousel .carousel-item img:hover {
    transform: scale(1.04) !important;
    filter: brightness(1.2) !important;
    z-index: 10;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}