/* Animación suave para las etiquetas flotantes del contacto */
.floating-label-input:placeholder-shown~.floating-label {
    top: 1rem;
    font-size: 0.95rem;
    color: #9ca3af;
}

.floating-label-input:focus~.floating-label,
.floating-label-input:not(:placeholder-shown)~.floating-label {
    top: -0.6rem;
    font-size: 0.75rem;
    color: #66cd00;
    font-weight: 600;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-box-bottom {
    grid-column: 6 / 13;
    grid-row: 3;
    z-index: 10;
    align-self: start;
    margin-top: -2rem;
    padding-left: 1rem;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.delay-100 {
    animation-delay: 0.15s;
}

.delay-200 {
    animation-delay: 0.3s;
}

.delay-300 {
    animation-delay: 0.45s;
}

.delay-400 {
    animation-delay: 0.6s;
}

.delay-500 {
    animation-delay: 0.75s;
}

/* SVG Outline Drawing Animation */
@keyframes drawOutline {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.animated-stroke {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawOutline 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.delay-draw-grey {
    animation-delay: 0.4s;
}

/* Ambient floating animations for glassmorphism cards */
@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(0.5deg);
    }
}

@keyframes floatMedium {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(-1deg);
    }
}

@keyframes floatFast {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(0.5deg);
    }
}

.animate-float-slow {
    animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-medium {
    animation: floatMedium 5s ease-in-out infinite;
}

.animate-float-fast {
    animation: floatFast 4s ease-in-out infinite;
}

/* Fine Technical Grid Background */
.hero-grid-bg {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
}

@keyframes floatHorizontalLeft {
    0% {
        transform: translateX(-400px);
    }

    100% {
        transform: translateX(100vw);
    }
}

@keyframes floatHorizontalRight {
    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-400px);
    }
}

.animate-float-h-slow {
    animation: floatHorizontalLeft 25s linear infinite;
}

.animate-float-h-medium {
    animation: floatHorizontalLeft 18s linear infinite;
}

.animate-float-h-reverse {
    animation: floatHorizontalRight 22s linear infinite;
}

.animate-float-h-reverse-fast {
    animation: floatHorizontalRight 14s linear infinite;
}