/* =========================================================
   FOCO CREATIVO
   Animaciones globales
========================================================= */


/* Entrada inicial de la primera sección */

.page-enter {
    opacity: 0;

    transform:
        translateY(24px);

    animation:
        pageEnter 0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}

@keyframes pageEnter {

    from {
        opacity: 0;

        transform:
            translateY(24px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* Entrada desde abajo */

.reveal {
    opacity: 0;

    transform:
        translateY(130px);

    transition:
        opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* Entrada desde izquierda */

.reveal-left {
    opacity: 0;

    transform:
        translateX(-160px);

    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.is-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* Entrada desde derecha */

.reveal-right {
    opacity: 0;

    transform:
        translateX(160px);

    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.is-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* Entrada con escala */

.reveal-scale {
    opacity: 0;

    transform:
        scale(0.96);

    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.is-visible {
    opacity: 1;

    transform:
        scale(1);
}

/* =========================================================
   Reveal especial tarjetas de proyectos
========================================================= */

.project-card.reveal-scale {
    opacity: 0;

    transform:
        translateY(140px)
        scale(0.78);

    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card.reveal-scale.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* Delays */

.delay-1 {
    transition-delay: 0.08s;
}

.delay-2 {
    transition-delay: 0.16s;
}

.delay-3 {
    transition-delay: 0.24s;
}

.delay-4 {
    transition-delay: 0.32s;
}

/* =========================================================
   Animación geométrica - Proyectos
========================================================= */

.project-card .project-visual::before,
.project-card .project-visual::after {
    opacity: 0;

    transition:
        opacity 0.8s ease,
        transform 1.55s cubic-bezier(0.16, 1, 0.3, 1);

    transition-delay:
        1.05s;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   Rombo exterior
========================================================= */

.project-card .project-visual::before {
    transform:
        translate(-50%, -50%)
        rotate(-135deg)
        scale(0.45);
}


/* =========================================================
   Rombo interior
========================================================= */

.project-card .project-visual::after {
    transform:
        translate(-50%, -50%)
        rotate(315deg)
        scale(0.35);
}


/* =========================================================
   Estado final
========================================================= */

.project-card.is-visible .project-visual::before,
.project-card.is-visible .project-visual::after {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        rotate(45deg)
        scale(1);
}


/* =========================================================
   Sincronización con aparición de tarjetas
========================================================= */

.project-card.delay-1 .project-visual::before,
.project-card.delay-1 .project-visual::after {
    transition-delay:
        1.05s;
}

.project-card.delay-2 .project-visual::before,
.project-card.delay-2 .project-visual::after {
    transition-delay:
        1.13s;
}

/* =========================================================
   Hero visual - Vida y movimiento
========================================================= */

@keyframes visualLogoPulse {

    0%,
    100% {
        transform:
            scale(0.96);

        filter:
            drop-shadow(
                0 0 10px rgba(23, 184, 144, 0.16)
            );
    }

    50% {
        transform:
            scale(1.04);

        filter:
            drop-shadow(
                0 0 24px rgba(23, 184, 144, 0.34)
            );
    }

}


@keyframes visualCoreFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-8px);
    }

}


@keyframes visualCoreBorder {

    0%,
    100% {
        border-color:
            rgba(23, 184, 144, 0.30);

        box-shadow:
            0 0 0 rgba(23, 184, 144, 0);
    }

    50% {
        border-color:
            rgba(60, 199, 214, 0.60);

        box-shadow:
            0 0 26px rgba(23, 184, 144, 0.08);
    }

}


@keyframes visualOrbitOne {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(180deg)
            scale(1.025);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg)
            scale(1);
    }

}


@keyframes visualOrbitTwo {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(180deg)
            scale(0.985);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg)
            scale(1);
    }

}


@keyframes visualNodeFloatOne {

    0%,
    100% {
        transform:
            translate(0, 0)
            scale(0.9);

        opacity: 0.55;
    }

    50% {
        transform:
            translate(10px, -12px)
            scale(1.2);

        opacity: 1;
    }

}


@keyframes visualNodeFloatTwo {

    0%,
    100% {
        transform:
            translate(0, 0)
            scale(0.9);

        opacity: 0.55;
    }

    50% {
        transform:
            translate(-12px, 8px)
            scale(1.18);

        opacity: 1;
    }

}


@keyframes visualNodeFloatThree {

    0%,
    100% {
        transform:
            translate(0, 0)
            scale(0.9);

        opacity: 0.55;
    }

    50% {
        transform:
            translate(8px, 12px)
            scale(1.15);

        opacity: 1;
    }

}

/* =========================================================
   Rotación orbital real
========================================================= */

@keyframes orbitRotateInner {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes orbitRotateOuter {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes orbitRotateOuterReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

/* =========================================================
   Inclinación suave del núcleo
========================================================= */

@keyframes visualCoreTilt {

    0%,
    100% {
        rotate: 0deg;
    }

    50% {
        rotate: 1.8deg;
    }

}

/* =========================================================
   Pulsación orbital
========================================================= */

@keyframes orbitNodePulse {

    0%,
    100% {
        opacity:
            0.72;

        scale:
            0.88;
    }

    50% {
        opacity:
            1;

        scale:
            1.22;
    }

}


/* =========================================================
   Glow del núcleo
========================================================= */

@keyframes visualCoreGlow {

    0%,
    100% {
        opacity:
            0.45;

        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {
        opacity:
            0.85;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

}

@keyframes serviceNodePulse {

    0%,
    100% {
        opacity: 0.35;
        scale: 0.75;

        box-shadow:
            0 0 4px rgba(60, 199, 214, 0.15);
    }

    50% {
        opacity: 1;
        scale: 1.45;

        box-shadow:
            0 0 22px rgba(60, 199, 214, 0.75);
    }
}

@keyframes appsModulePulse {

    0%,
    100% {
        border-color:
            rgba(111, 140, 255, 0.28);

        background:
            rgba(111, 140, 255, 0.02);

        box-shadow:
            0 0 0 rgba(111, 140, 255, 0);
    }

    50% {
        border-color:
            rgba(60, 199, 214, 0.95);

        background:
            rgba(60, 199, 214, 0.08);

        box-shadow:
            0 0 18px rgba(60, 199, 214, 0.28);
    }
}


@keyframes serviceCorePulse {

    0%,
    100% {
        box-shadow:
            0 0 10px rgba(23, 184, 144, 0.15);

        scale: 0.90;
    }

    50% {
        box-shadow:
            0 0 28px rgba(23, 184, 144, 0.42);

        scale: 1.18;
    }

}

/* =========================================================
   Aplicaciones empresariales - Flujo de información
========================================================= */

@keyframes appsSignalHorizontal {

    0% {
        left: 14px;

        opacity: 0;
        scale: 0.7;
    }

    10% {
        opacity: 1;
    }

    45% {
        scale: 1;
    }

    50% {
        scale: 1.45;
    }

    55% {
        scale: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left:
            calc(100% - 14px);

        opacity: 0;
        scale: 0.7;
    }

}


@keyframes appsSignalVertical {

    0% {
        top: 14px;

        opacity: 0;
        scale: 0.7;
    }

    10% {
        opacity: 1;
    }

    45% {
        scale: 1;
    }

    50% {
        scale: 1.45;
    }

    55% {
        scale: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top:
            calc(100% - 14px);

        opacity: 0;
        scale: 0.7;
    }

}

@keyframes uxSignalMove {

    0% {
        left: 12%;
    }

    50% {
        left: 88%;
    }

    100% {
        left: 12%;
    }

}


@keyframes supportSignalMove {

    0% {
        left: 8px;

        opacity: 0.4;
    }

    50% {
        left: calc(100% - 14px);

        opacity: 1;
    }

    100% {
        left: 8px;

        opacity: 0.4;
    }

}

/* =========================================================
   Escalabilidad
========================================================= */

@keyframes scaleBoxPulse {

    0%,
    100% {
        opacity: 0.35;

        scale: 0.85;
    }

    50% {
        opacity: 1;

        scale: 1.12;
    }

}


/* =========================================================
   Rendimiento
========================================================= */

@keyframes performanceLine {

    0%,
    100% {
        opacity: 0.22;

        transform:
            scaleX(0.55);
    }

    50% {
        opacity: 1;

        transform:
            scaleX(1);
    }

}


@keyframes performanceCorePulse {

    0%,
    100% {
        scale: 0.8;

        box-shadow:
            0 0 6px rgba(60, 199, 214, 0.18);
    }

    50% {
        scale: 1.35;

        box-shadow:
            0 0 22px rgba(60, 199, 214, 0.65);
    }

}


/* =========================================================
   Diseño responsive
========================================================= */

@keyframes responsiveScreenSmall {

    0%,
    100% {
        transform:
            translateY(4px);

        opacity: 0.45;
    }

    50% {
        transform:
            translateY(-4px);

        opacity: 1;
    }

}


@keyframes responsiveScreenMedium {

    0%,
    100% {
        transform:
            translateY(2px)
            scaleY(0.88);

        opacity: 0.5;
    }

    50% {
        transform:
            translateY(-3px)
            scaleY(1.05);

        opacity: 1;
    }

}


@keyframes responsiveScreenLarge {

    0%,
    100% {
        transform:
            translateY(0)
            scaleY(0.90);

        opacity: 0.5;
    }

    50% {
        transform:
            translateY(-5px)
            scaleY(1.08);

        opacity: 1;
    }

}


/* =========================================================
   Arquitectura limpia
========================================================= */

@keyframes architectureMainPulse {

    0%,
    100% {
        scale: 0.85;

        opacity: 0.55;
    }

    50% {
        scale: 1.35;

        opacity: 1;

        box-shadow:
            0 0 18px rgba(23, 184, 144, 0.55);
    }

}


@keyframes architectureNodePulse {

    0%,
    100% {
        scale: 0.75;

        opacity: 0.35;
    }

    50% {
        scale: 1.25;

        opacity: 1;

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.45);
    }

}

/* =========================================================
   Proceso - Señal de evolución
========================================================= */

@keyframes processSignalTravel {

    0% {
        top: 0%;

        opacity: 0;

        background:
            var(--color-primary);
    }

    5% {
        opacity: 1;
    }

    30% {
        background:
            var(--color-primary);
    }

    55% {
        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 10px rgba(60, 199, 214, 0.9),
            0 0 24px rgba(60, 199, 214, 0.45);
    }

    80% {
        background:
            var(--color-accent-blue);

        box-shadow:
            0 0 10px rgba(111, 140, 255, 0.85),
            0 0 24px rgba(111, 140, 255, 0.40);
    }

    95% {
        opacity: 1;
    }

    100% {
        top: 100%;

        opacity: 0;

        background:
            var(--color-accent-blue);
    }

}

/* =========================================================
   CTA Home
========================================================= */

@keyframes ctaGlowPulse {

    0%,
    100% {
        opacity: 0.45;

        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {
        opacity: 0.9;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

}


@keyframes ctaLayerBack {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translate(36px, -28px)
            rotate(42deg);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translate(48px, -36px)
            rotate(50deg);
    }

}


@keyframes ctaLayerMiddle {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translate(17px, -14px)
            rotate(45deg);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translate(22px, -19px)
            rotate(40deg);
    }

}


@keyframes ctaLayerFront {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            rotate(45deg)
            scale(0.96);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(45deg)
            scale(1.04);
    }

}


@keyframes ctaLogoPulse {

    0%,
    100% {
        transform:
            rotate(-45deg)
            scale(0.92);

        opacity: 0.78;
    }

    50% {
        transform:
            rotate(-45deg)
            scale(1.08);

        opacity: 1;
    }

}


@keyframes ctaSignalOne {

    0% {
        transform:
            translate(0, 0);

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform:
            translate(95px, 42px);

        opacity: 0;
    }

}


@keyframes ctaSignalTwo {

    0% {
        transform:
            translate(0, 0);

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-90px, 40px);

        opacity: 0;
    }

}

/* =========================================================
   Nosotros - Misión
========================================================= */

@keyframes problemParticleOne {

    0%,
    100% {
        transform:
            translate(0, 0);

        opacity: 0.45;
    }

    50% {
        transform:
            translate(34px, 48px);

        opacity: 1;
    }

}


@keyframes problemParticleTwo {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-32px, 42px);
    }

}


@keyframes problemParticleThree {

    0%,
    100% {
        transform:
            translate(0, 0);

        opacity: 0.5;
    }

    50% {
        transform:
            translate(20px, -52px);

        opacity: 1;
    }

}


@keyframes solutionCorePulse {

    0%,
    100% {
        scale: 0.85;

        opacity: 0.7;
    }

    50% {
        scale: 1.25;

        opacity: 1;
    }

}


@keyframes solutionCoreExpand {

    0% {
        scale: 0.45;

        opacity: 0;
    }

    30% {
        opacity: 0.8;
    }

    100% {
        scale: 1.25;

        opacity: 0;
    }

}


@keyframes evolutionRise {

    0% {
        bottom: 12px;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        bottom:
            calc(100% - 18px);

        opacity: 0;
    }

}


@keyframes missionFlow {

    0% {
        left: 0;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left:
            calc(100% - 7px);

        opacity: 0;
    }

}

/* =========================================================
   Nosotros - Visión
========================================================= */

@keyframes visionRoadTravel {

    0% {
        left: 12%;
        top: 58%;

        opacity: 0;

        background:
            var(--color-primary);
    }

    8% {
        opacity: 1;
    }

    48% {
        left: 52%;
        top: 48%;

        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 12px rgba(60, 199, 214, 0.95),
            0 0 30px rgba(60, 199, 214, 0.45);
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 88%;
        top: 38%;

        opacity: 0;

        background:
            var(--color-accent-blue);

        box-shadow:
            0 0 12px rgba(111, 140, 255, 0.9),
            0 0 30px rgba(111, 140, 255, 0.40);
    }
}

/* =========================================================
   Nosotros - Cómo trabajamos
========================================================= */


/* Claridad */

@keyframes clarityPointOne {

    0%,
    100% {
        top: 20%;
    }

    45%,
    65% {
        top: 50%;
    }

}


@keyframes clarityPointTwo {

    0%,
    100% {
        top: 68%;
    }

    45%,
    65% {
        top: 50%;
    }

}


@keyframes clarityPointThree {

    0%,
    100% {
        top: 28%;
    }

    45%,
    65% {
        top: 50%;
    }

}


@keyframes clarityPointFour {

    0%,
    100% {
        top: 72%;
    }

    45%,
    65% {
        top: 50%;
    }

}


/* Funcionalidad */

@keyframes functionSignal {

    0% {
        left: 15%;

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        left: 50%;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 85%;

        opacity: 0;
    }

}


/* Evolución */

@keyframes evolutionLayerPulse {

    0%,
    100% {
        opacity: 0.28;

        scale: 0.88;
    }

    50% {
        opacity: 1;

        scale: 1.05;
    }

}


@keyframes workEvolutionRise {

    0% {
        bottom: 12px;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        bottom: 68px;

        opacity: 0;
    }

}


/* Colaboración */

@keyframes collaborationLeft {

    0% {
        left: 4%;

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    70% {
        left: 50%;

        opacity: 1;
    }

    100% {
        left: 50%;

        opacity: 0;
    }

}


@keyframes collaborationRight {

    0% {
        left: 96%;

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    70% {
        left: 50%;

        opacity: 1;
    }

    100% {
        left: 50%;

        opacity: 0;
    }

}


@keyframes collaborationCore {

    0%,
    55%,
    100% {
        scale: 0.85;

        opacity: 0.60;
    }

    72% {
        scale: 1.40;

        opacity: 1;

        box-shadow:
            0 0 28px rgba(23, 184, 144, 0.58);
    }

}

/* =========================================================
   Nosotros - Pensamos
========================================================= */

@keyframes thinkingCorePulse {

    0%,
    100% {
        scale: 0.92;

        opacity: 0.72;
    }

    50% {
        scale: 1.08;

        opacity: 1;

        box-shadow:
            0 0 36px rgba(60, 199, 214, 0.20);
    }
}


@keyframes thinkingLinkPulse {

    0%,
    100% {
        opacity: 0.18;
    }

    50% {
        opacity: 0.72;
    }
}


@keyframes thinkingSignalOne {

    0% {
        left: 12%;
        top: 18%;

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 50%;
        top: 50%;

        opacity: 0;
    }
}


@keyframes thinkingSignalTwo {

    0% {
        right: 7%;
        top: 65%;

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        right: 50%;
        top: 50%;

        opacity: 0;
    }
}

@keyframes contactSignalTravel {

    0% {
        left: 0%;
        opacity: 0;
        background: var(--color-primary);
    }

    10% {
        opacity: 1;
    }

    50% {
        background:
            var(--color-accent-cyan);
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
        background: var(--color-accent-blue);
    }

}


@keyframes contactSourcePulse {

    0%,
    100% {
        scale: 0.85;
        opacity: 0.6;
    }

    50% {
        scale: 1.25;
        opacity: 1;
    }

}


@keyframes contactLogoPulse {

    0%,
    100% {
        transform:
            rotate(-45deg)
            scale(0.94);

        opacity: 0.8;
    }

    50% {
        transform:
            rotate(-45deg)
            scale(1.06);

        opacity: 1;
    }

}


@keyframes contactNodePulse {

    0%,
    100% {
        opacity: 0.35;
        scale: 0.8;
    }

    50% {
        opacity: 1;
        scale: 1.25;
    }

}

@keyframes serviceWebSignal {

    0% {
        left: 18px;
        top: 48px;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    45% {
        left: 128px;
        top: 48px;
    }

    65% {
        left: 108px;
        top: 70px;

        background:
            var(--color-primary);
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 148px;
        top: 92px;

        opacity: 0;

        background:
            var(--color-accent-blue);
    }
}

/* =========================================================
   Servicios - Aplicaciones Empresariales
========================================================= */

@keyframes businessCorePulse {

    0%,
    100% {
        scale: 0.85;
        opacity: 0.65;
    }

    50% {
        scale: 1.25;
        opacity: 1;

        box-shadow:
            0 0 20px rgba(23, 184, 144, 0.65),
            0 0 38px rgba(23, 184, 144, 0.20);
    }
}


@keyframes businessModulePulse {

    0%,
    100% {
        border-color:
            rgba(60, 199, 214, 0.24);

        background:
            rgba(60, 199, 214, 0.015);

        opacity: 0.55;
    }

    50% {
        border-color:
            rgba(60, 199, 214, 0.75);

        background:
            rgba(60, 199, 214, 0.07);

        opacity: 1;

        box-shadow:
            0 0 16px rgba(60, 199, 214, 0.12);
    }
}


@keyframes businessSignalHorizontal {

    0% {
        left: 17px;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        left: 50%;
    }

    90% {
        opacity: 1;
    }

    100% {
        left:
            calc(100% - 17px);

        opacity: 0;
    }
}


@keyframes businessSignalVertical {

    0% {
        top: 13px;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        top: 50%;
    }

    90% {
        opacity: 1;
    }

    100% {
        top:
            calc(100% - 13px);

        opacity: 0;
    }
}

/* =========================================================
   Servicios - Automatización
========================================================= */

@keyframes automationSignalTravel {

    0% {
        left: 8%;

        opacity: 0;

        background:
            var(--color-primary);
    }

    8% {
        opacity: 1;
    }

    35% {
        left: 36%;
    }

    62% {
        left: 64%;

        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 12px rgba(60, 199, 214, 0.95),
            0 0 24px rgba(60, 199, 214, 0.42);
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 92%;

        opacity: 0;

        background:
            var(--color-accent-blue);
    }

}


@keyframes automationStagePulse {

    0%,
    100% {
        opacity: 0.45;

        scale: 0.88;

        border-color:
            rgba(60, 199, 214, 0.30);
    }

    50% {
        opacity: 1;

        scale: 1.12;

        border-color:
            rgba(60, 199, 214, 0.80);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.16);
    }

}


@keyframes automationOutputPulse {

    0%,
    100% {
        opacity: 0.35;

        scale: 0.85;
    }

    50% {
        opacity: 1;

        scale: 1.20;

        box-shadow:
            0 0 16px rgba(111, 140, 255, 0.22);
    }

}

/* =========================================================
   Servicios - Diseño de Experiencia
========================================================= */

@keyframes uxBlockOne {

    0%,
    100% {
        width: 58px;
        height: 26px;

        transform:
            translate(0, 0);

        opacity: 0.55;
    }

    50% {
        width: 72px;
        height: 32px;

        transform:
            translate(6px, 5px);

        opacity: 1;
    }

}


@keyframes uxBlockTwo {

    0%,
    100% {
        width: 58px;
        height: 26px;

        transform:
            translate(0, 0);

        opacity: 0.55;
    }

    50% {
        width: 42px;
        height: 42px;

        transform:
            translate(-8px, 6px);

        opacity: 1;
    }

}


@keyframes uxBlockThree {

    0%,
    100% {
        width: 90px;

        transform:
            translate(0, 0);

        opacity: 0.55;
    }

    50% {
        width: 68px;

        transform:
            translate(8px, -5px);

        opacity: 1;
    }

}


@keyframes uxBlockFour {

    0%,
    100% {
        width: 34px;
        height: 34px;

        transform:
            translate(0, 0);

        opacity: 0.55;
    }

    50% {
        width: 48px;
        height: 28px;

        transform:
            translate(-10px, -4px);

        opacity: 1;
    }

}


@keyframes uxFocusTravel {

    0% {
        left: 28%;
        top: 30%;

        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    35% {
        left: 70%;
        top: 30%;
    }

    65% {
        left: 68%;
        top: 72%;

        background:
            var(--color-accent-cyan);
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 30%;
        top: 72%;

        opacity: 0;

        background:
            var(--color-accent-blue);
    }

}

/* =========================================================
   Servicios - Forma de trabajar
========================================================= */

@keyframes approachPieceFloat {

    0%,
    100% {
        opacity: 0.45;

        scale: 0.9;
    }

    50% {
        opacity: 1;

        scale: 1.08;
    }
}


@keyframes approachCorePulse {

    0%,
    100% {
        opacity: 0.65;

        scale: 0.92;
    }

    50% {
        opacity: 1;

        scale: 1.08;

        box-shadow:
            0 0 32px rgba(60, 199, 214, 0.18);
    }
}

/* =========================================================
   Servicios - CTA Proyecto
========================================================= */

@keyframes projectOriginRotate {

    from {
        transform:
            translateY(-50%)
            rotate(0deg);
    }

    to {
        transform:
            translateY(-50%)
            rotate(360deg);
    }

}


@keyframes projectOriginPulse {

    0%,
    100% {
        opacity: 0.35;

        scale: 0.8;
    }

    50% {
        opacity: 1;

        scale: 1.25;
    }

}


@keyframes projectSignalTravel {

    0% {
        left: 0%;

        opacity: 0;

        background:
            var(--color-primary);
    }

    10% {
        opacity: 1;
    }

    50% {
        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 12px rgba(60, 199, 214, 0.95),
            0 0 26px rgba(60, 199, 214, 0.42);
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 100%;

        opacity: 0;

        background:
            var(--color-accent-blue);
    }

}


@keyframes projectSolutionFloat {

    0%,
    100% {
        transform:
            translateY(-50%)
            rotate(45deg)
            translateY(0);
    }

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

}


@keyframes projectLogoPulse {

    0%,
    100% {
        transform:
            rotate(-45deg)
            scale(0.94);

        opacity: 0.78;
    }

    50% {
        transform:
            rotate(-45deg)
            scale(1.07);

        opacity: 1;
    }

}

/* =========================================================
   Soluciones - Información dispersa
========================================================= */

@keyframes solutionDataCore {

    0%,
    100% {
        scale: 0.82;

        opacity: 0.6;
    }

    50% {
        scale: 1.30;

        opacity: 1;

        box-shadow:
            0 0 20px rgba(23, 184, 144, 0.70),
            0 0 34px rgba(23, 184, 144, 0.18);
    }

}


/* =========================================================
   Soluciones - Información dispersa
   Señales convergiendo
========================================================= */


/* Superior izquierda */

@keyframes dataPacketOne {

    0% {
        left: 7%;
        top: 15%;

        opacity: 0;

        scale: 0.7;
    }

    10% {
        opacity: 1;
    }

    75% {
        opacity: 1;

        scale: 1;
    }

    100% {
        left: 50%;
        top: 50%;

        opacity: 0;

        scale: 1.35;
    }

}


/* Superior derecha */

@keyframes dataPacketTwo {

    0% {
        right: 8%;
        top: 20%;

        opacity: 0;

        scale: 0.7;
    }

    10% {
        opacity: 1;
    }

    75% {
        opacity: 1;

        scale: 1;
    }

    100% {
        right: 50%;
        top: 50%;

        opacity: 0;

        scale: 1.35;
    }

}


/* Inferior izquierda */

@keyframes dataPacketThree {

    0% {
        left: 9%;
        bottom: 12%;

        opacity: 0;

        scale: 0.7;
    }

    10% {
        opacity: 1;
    }

    75% {
        opacity: 1;

        scale: 1;
    }

    100% {
        left: 50%;
        bottom: 50%;

        opacity: 0;

        scale: 1.35;
    }

}


/* Inferior derecha */

@keyframes dataPacketFour {

    0% {
        right: 7%;
        bottom: 15%;

        opacity: 0;

        scale: 0.7;
    }

    10% {
        opacity: 1;
    }

    75% {
        opacity: 1;

        scale: 1;
    }

    100% {
        right: 50%;
        bottom: 50%;

        opacity: 0;

        scale: 1.35;
    }

}

/* =========================================================
   Soluciones - Procesos manuales
========================================================= */

@keyframes manualTaskPulse {

    0%,
    100% {
        opacity: 0.35;

        transform:
            translateX(0);
    }

    45% {
        opacity: 1;

        transform:
            translateX(5px);

        border-color:
            rgba(60, 199, 214, 0.72);
    }

    65% {
        opacity: 0.7;

        transform:
            translateX(8px);
    }

}


@keyframes processAutoCorePulse {

    0%,
    100% {
        opacity: 0.65;

        scale: 0.92;

        box-shadow:
            0 0 8px rgba(60, 199, 214, 0.04);
    }

    50% {
        opacity: 1;

        scale: 1.08;

        box-shadow:
            0 0 24px rgba(60, 199, 214, 0.20);
    }

}


@keyframes processAutoSignal {

    0% {
        left: 56%;

        opacity: 0;

        scale: 0.75;

        background:
            var(--color-primary);
    }

    10% {
        opacity: 1;
    }

    38% {
        left: 63%;
    }

    62% {
        left: 78%;

        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.95),
            0 0 24px rgba(60, 199, 214, 0.40);
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 94%;

        opacity: 0;

        scale: 1.2;

        background:
            var(--color-accent-blue);
    }

}

/* =========================================================
   Soluciones - Falta de visibilidad
========================================================= */

@keyframes visibilityBarGrow {

    0%,
    100% {
        scale: 1 0.55;

        opacity: 0.35;
    }

    45% {
        scale: 1 1;

        opacity: 1;

        box-shadow:
            0 0 14px rgba(23, 184, 144, 0.12);
    }

    70% {
        scale: 1 0.86;

        opacity: 0.75;
    }

}


@keyframes visibilityPointPulse {

    0%,
    100% {
        scale: 0.75;

        opacity: 0.35;
    }

    50% {
        scale: 1.35;

        opacity: 1;
    }

}


@keyframes visibilityScan {

    0% {
        left: 12px;

        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left:
            calc(100% - 12px);

        opacity: 0;
    }

}/* =========================================================
   Soluciones - Sistemas que no conversan
========================================================= */

@keyframes integrationSignalForward {

    0% {
        left: 53px;

        opacity: 0;

        scale: 0.7;
    }

    10% {
        opacity: 1;
    }

    50% {
        scale: 1.2;

        background:
            var(--color-accent-cyan);
    }

    90% {
        opacity: 1;
    }

    100% {
        left:
            calc(100% - 53px);

        opacity: 0;

        scale: 0.8;

        background:
            var(--color-accent-blue);
    }

}


@keyframes integrationSignalBackward {

    0% {
        right: 53px;

        opacity: 0;

        scale: 0.7;
    }

    10% {
        opacity: 1;
    }

    50% {
        scale: 1.2;

        background:
            var(--color-accent-cyan);
    }

    90% {
        opacity: 1;
    }

    100% {
        right:
            calc(100% - 53px);

        opacity: 0;

        scale: 0.8;

        background:
            var(--color-primary);
    }

}


@keyframes integrationSystemPulse {

    0%,
    100% {
        opacity: 0.55;

        border-color:
            rgba(60, 199, 214, 0.28);
    }

    50% {
        opacity: 1;

        border-color:
            rgba(60, 199, 214, 0.72);

        box-shadow:
            0 0 18px rgba(60, 199, 214, 0.10);
    }

}


@keyframes integrationSyncPulse {

    0%,
    100% {
        opacity: 0.45;

        scale: 0.9;
    }

    50% {
        opacity: 1;

        scale: 1.12;

        box-shadow:
            0 0 18px rgba(23, 184, 144, 0.18);
    }

}

/* =========================================================
   Soluciones - Herramientas poco intuitivas
========================================================= */

@keyframes intuitiveOrganize {

    0%,
    15% {
        opacity: 0.45;
    }

    45%,
    70% {
        opacity: 1;

        transform:
            rotate(0deg)
            translate(0, 0);

        border-color:
            rgba(60, 199, 214, 0.80);

        background:
            rgba(60, 199, 214, 0.065);

        box-shadow:
            0 0 12px rgba(60, 199, 214, 0.08);
    }

    100% {
        opacity: 0.45;
    }

}

/* =========================================================
   Soluciones - Crecimiento sin estructura
========================================================= */

@keyframes growthModuleBuild {

    0%,
    18% {
        opacity: 0.22;

        scale: 0.75;

        transform:
            translateY(8px);
    }

    45%,
    72% {
        opacity: 1;

        scale: 1;

        transform:
            translateY(0);

        border-color:
            rgba(60, 199, 214, 0.78);

        background:
            rgba(60, 199, 214, 0.065);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.10);
    }

    100% {
        opacity: 0.30;

        scale: 0.82;

        transform:
            translateY(5px);
    }

}


@keyframes growthSignalRise {

    0% {
        left: 50%;
        bottom: 12px;

        opacity: 0;

        background:
            var(--color-primary);
    }

    10% {
        opacity: 1;
    }

    42% {
        bottom: 34px;

        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.95),
            0 0 24px rgba(60, 199, 214, 0.40);
    }

    72% {
        bottom: 66px;
    }

    90% {
        opacity: 1;
    }

    100% {
        bottom: 94px;

        opacity: 0;

        background:
            var(--color-accent-blue);

        box-shadow:
            0 0 14px rgba(111, 140, 255, 0.90),
            0 0 24px rgba(111, 140, 255, 0.35);
    }

}

/* =========================================================
   Soluciones - Nuestro enfoque
========================================================= */

@keyframes solutionsFocusTravel {

    0% {
        top: 34px;

        opacity: 0;

        background:
            var(--color-primary);
    }

    8% {
        opacity: 1;
    }

    34% {
        background:
            var(--color-primary);
    }

    55% {
        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 12px rgba(60, 199, 214, 0.95),
            0 0 24px rgba(60, 199, 214, 0.42);
    }

    80% {
        background:
            var(--color-accent-blue);

        box-shadow:
            0 0 12px rgba(111, 140, 255, 0.90),
            0 0 24px rgba(111, 140, 255, 0.38);
    }

    92% {
        opacity: 1;
    }

    100% {
        top:
            calc(100% - 40px);

        opacity: 0;

        background:
            var(--color-accent-blue);
    }

}

/* =========================================================
   Soluciones - Enfoque / Microvisuales
========================================================= */

@keyframes focusAnalyzeScan {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes focusSimplifyOne {

    0%,
    100% {
        transform:
            translate(0, 0);

        opacity: 0.4;
    }

    55% {
        transform:
            translate(46px, 21px);

        opacity: 1;
    }

}


@keyframes focusSimplifyTwo {

    0%,
    100% {
        transform:
            translate(0, 0);

        opacity: 0.4;
    }

    55% {
        transform:
            translate(46px, 0);

        opacity: 1;
    }

}


@keyframes focusSimplifyThree {

    0%,
    100% {
        transform:
            translate(0, 0);

        opacity: 0.4;
    }

    55% {
        transform:
            translate(46px, -21px);

        opacity: 1;
    }

}


@keyframes focusSimplifyResult {

    0%,
    35%,
    100% {
        opacity: 0.35;

        scale: 0.82;
    }

    58%,
    75% {
        opacity: 1;

        scale: 1.1;

        box-shadow:
            0 0 18px rgba(23, 184, 144, 0.18);
    }

}


@keyframes focusBuildModule {

    0%,
    100% {
        opacity: 0.28;

        scale: 0.82;

        transform:
            translateY(6px);
    }

    50% {
        opacity: 1;

        scale: 1;

        transform:
            translateY(0);

        border-color:
            rgba(60, 199, 214, 0.78);
    }

}


@keyframes focusEvolveRise {

    0% {
        bottom: 8px;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        bottom: 65px;

        opacity: 0;

        background:
            var(--color-primary);
    }

}

/* =========================================================
   Soluciones - CTA final
========================================================= */

@keyframes diagnosticFragmentFloat {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;

        translate:
            5px -4px;

        scale: 1.08;
    }

}


@keyframes diagnosticRingRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes diagnosticScannerRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes diagnosticCorePulse {

    0%,
    100% {
        scale: 0.88;

        opacity: 0.65;
    }

    50% {
        scale: 1.18;

        opacity: 1;

        box-shadow:
            0 0 30px rgba(60, 199, 214, 0.28);
    }

}


@keyframes diagnosticSignalIn {

    0% {
        left: 23%;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 39%;

        opacity: 0;

        background:
            var(--color-accent-cyan);
    }

}


@keyframes diagnosticSignalOut {

    0% {
        left: 62%;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 79%;

        opacity: 0;

        background:
            var(--color-accent-blue);
    }

}


@keyframes diagnosticLogoPulse {

    0%,
    100% {
        transform:
            rotate(-45deg)
            scale(0.93);

        opacity: 0.75;
    }

    50% {
        transform:
            rotate(-45deg)
            scale(1.07);

        opacity: 1;
    }

}

/* =========================================================
   Proyectos - Sistemas de gestión
========================================================= */

@keyframes managementPanelPulse {

    0%,
    100% {
        opacity: 0.42;

        border-color:
            rgba(60, 199, 214, 0.28);

        scale: 0.94;
    }

    50% {
        opacity: 1;

        border-color:
            rgba(60, 199, 214, 0.78);

        background:
            rgba(60, 199, 214, 0.07);

        scale: 1.04;

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.10);
    }

}


@keyframes managementCorePulse {

    0%,
    100% {
        opacity: 0.72;

        scale: 0.92;
    }

    50% {
        opacity: 1;

        scale: 1.12;

        box-shadow:
            0 0 30px rgba(23, 184, 144, 0.20);
    }

}


@keyframes managementSignalOne {

    0% {
        left: 12px;
        top: 14px;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 50%;
        top: 50%;

        opacity: 0;

        background:
            var(--color-accent-cyan);
    }

}


@keyframes managementSignalTwo {

    0% {
        right: 12px;
        bottom: 14px;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        right: 50%;
        bottom: 50%;

        opacity: 0;

        background:
            var(--color-primary);
    }

}

/* =========================================================
   Proyectos - Sitios corporativos
========================================================= */

@keyframes corporateBlockPulse {

    0%,
    100% {
        opacity: 0.42;

        border-color:
            rgba(60, 199, 214, 0.28);

        background:
            rgba(60, 199, 214, 0.02);
    }

    50% {
        opacity: 1;

        border-color:
            rgba(60, 199, 214, 0.78);

        background:
            rgba(60, 199, 214, 0.07);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.10);
    }

}


@keyframes corporateSignalTravel {

    0% {
        left: 31px;
        top: 49px;

        opacity: 0;

        background:
            var(--color-primary);
    }

    10% {
        opacity: 1;
    }

    30% {
        left: 118px;
        top: 49px;
    }

    52% {
        left: 141px;
        top: 80px;

        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 14px var(--color-glow-cyan);
    }

    72% {
        left: 92px;
        top: 105px;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 31px;
        top: 105px;

        opacity: 0;

        background:
            var(--color-accent-blue);

        box-shadow:
            0 0 14px var(--color-glow-blue);
    }

}

/* =========================================================
   Proyectos - Control e inventario
========================================================= */

@keyframes inventoryBoxPulse {

    0%,
    100% {
        opacity: 0.40;

        scale: 0.90;

        border-color:
            rgba(60, 199, 214, 0.28);
    }

    50% {
        opacity: 1;

        scale: 1.06;

        border-color:
            rgba(60, 199, 214, 0.78);

        background:
            rgba(60, 199, 214, 0.07);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.10);
    }

}


@keyframes inventorySignalTravel {

    0% {
        left: 28px;

        opacity: 0;

        background:
            var(--color-primary);
    }

    10% {
        opacity: 1;
    }

    30% {
        left: 74px;
    }

    55% {
        left: 108px;

        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 14px var(--color-glow-cyan);
    }

    78% {
        left: 142px;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 162px;

        opacity: 0;

        background:
            var(--color-accent-blue);

        box-shadow:
            0 0 14px var(--color-glow-blue);
    }

}

/* =========================================================
   Proyectos - Procesos digitales
========================================================= */

@keyframes digitalProcessStagePulse {

    0%,
    100% {
        opacity: 0.38;

        scale: 0.90;

        border-color:
            rgba(60, 199, 214, 0.28);
    }

    50% {
        opacity: 1;

        scale: 1.08;

        border-color:
            rgba(60, 199, 214, 0.78);

        background:
            rgba(60, 199, 214, 0.07);

        box-shadow:
            0 0 16px rgba(60, 199, 214, 0.12);
    }

}


@keyframes digitalProcessOutputPulse {

    0%,
    100% {
        opacity: 0.30;

        scale: 0.86;
    }

    60%,
    75% {
        opacity: 1;

        scale: 1.08;

        border-color:
            rgba(111, 140, 255, 0.80);

        box-shadow:
            0 0 16px rgba(111, 140, 255, 0.16);
    }

}


@keyframes digitalProcessSignal {

    0% {
        left: 10%;

        opacity: 0;

        background:
            var(--color-primary);
    }

    8% {
        opacity: 1;
    }

    30% {
        left: 36%;

        scale: 1.15;
    }

    56% {
        left: 64%;

        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 14px var(--color-glow-cyan);

        scale: 1.25;
    }

    82% {
        left: 90%;

        background:
            var(--color-accent-blue);

        box-shadow:
            0 0 14px var(--color-glow-blue);
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 96%;

        opacity: 0;

        scale: 0.75;
    }

}

/* =========================================================
   Proyectos - Nuestra mirada
========================================================= */

@keyframes projectEvolutionLayer {

    0%,
    100% {
        opacity: 0.32;

        scale: 0.92;

        translate: 0 7px;
    }

    45%,
    72% {
        opacity: 1;

        scale: 1;

        translate: 0 0;

        border-color:
            rgba(60, 199, 214, 0.72);

        box-shadow:
            0 0 18px rgba(60, 199, 214, 0.10);
    }

}


@keyframes projectEvolutionModule {

    0%,
    22% {
        opacity: 0;

        scale: 0.70;
    }

    48%,
    76% {
        opacity: 1;

        scale: 1;

        box-shadow:
            0 0 16px rgba(60, 199, 214, 0.12);
    }

    100% {
        opacity: 0.30;

        scale: 0.88;
    }

}


@keyframes projectEvolutionSignal {

    0% {
        bottom: 28px;

        opacity: 0;

        background:
            var(--color-primary);
    }

    8% {
        opacity: 1;
    }

    34% {
        bottom: 79px;
    }

    58% {
        bottom: 132px;

        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.95),
            0 0 28px rgba(60, 199, 214, 0.40);
    }

    82% {
        bottom: 184px;

        background:
            var(--color-accent-blue);

        box-shadow:
            0 0 14px rgba(111, 140, 255, 0.90),
            0 0 28px rgba(111, 140, 255, 0.36);
    }

    92% {
        opacity: 1;
    }

    100% {
        bottom: 215px;

        opacity: 0;
    }

}

/* =========================================================
   Proyectos - Próximo proyecto
========================================================= */

@keyframes nextProjectGlow {

    0%,
    100% {
        opacity: 0.40;

        scale: 0.92;
    }

    50% {
        opacity: 0.90;

        scale: 1.08;
    }

}


@keyframes nextProjectInnerPulse {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.85;

        box-shadow:
            0 0 20px rgba(23, 184, 144, 0.10);
    }

}


@keyframes nextProjectCorePulse {

    0%,
    100% {
        opacity: 0.55;

        scale: 0.82;
    }

    50% {
        opacity: 1;

        scale: 1.35;

        box-shadow:
            0 0 18px rgba(23, 184, 144, 0.95),
            0 0 36px rgba(23, 184, 144, 0.42);
    }

}


@keyframes nextProjectModuleFloat {

    0%,
    100% {
        opacity: 0.42;

        translate:
            0 0;

        scale: 0.92;
    }

    50% {
        opacity: 1;

        translate:
            0 -7px;

        scale: 1.05;

        border-color:
            rgba(60, 199, 214, 0.72);
    }

}

/* =========================================================
   Contacto - Conversación
========================================================= */

@keyframes dialogueCorePulse {

    0%,
    100% {
        opacity: 0.62;

        scale: 0.92;
    }

    50% {
        opacity: 1;

        scale: 1.08;

        box-shadow:
            0 0 32px rgba(60, 199, 214, 0.18);
    }

}


@keyframes dialogueSignalLeft {

    0% {
        left: calc(4% + 62px);

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 50%;

        opacity: 0;

        background:
            var(--color-accent-cyan);
    }

}


@keyframes dialogueSignalRight {

    0% {
        right: calc(4% + 62px);

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        right: 50%;

        opacity: 0;

        background:
            var(--color-accent-cyan);
    }

}

/* =========================================================
   Contacto - Ideas claras
========================================================= */

@keyframes contactIdeaFloat {

    0%,
    100% {
        opacity: 0.38;

        translate:
            0 0;

        scale: 0.90;
    }

    50% {
        opacity: 1;

        translate:
            5px -6px;

        scale: 1.08;
    }

}


@keyframes contactBuildSignal {

    0% {
        left: 23%;

        opacity: 0;

        background:
            var(--color-primary);
    }

    10% {
        opacity: 1;
    }

    52% {
        background:
            var(--color-accent-cyan);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.95),
            0 0 28px rgba(60, 199, 214, 0.42);
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 65%;

        opacity: 0;

        background:
            var(--color-accent-blue);
    }

}


@keyframes contactBuiltFramePulse {

    0%,
    100% {
        opacity: 0.30;

        scale: 0.94;
    }

    50% {
        opacity: 0.80;

        scale: 1.02;
    }

}


@keyframes contactBuiltModulePulse {

    0%,
    100% {
        opacity: 0.36;

        scale: 0.90;
    }

    50% {
        opacity: 1;

        scale: 1.06;

        border-color:
            rgba(60, 199, 214, 0.78);

        box-shadow:
            0 0 14px rgba(60, 199, 214, 0.10);
    }

}


@keyframes contactBuiltCorePulse {

    0%,
    100% {
        opacity: 0.68;

        scale: 0.90;
    }

    50% {
        opacity: 1;

        scale: 1.14;

        box-shadow:
            0 0 30px rgba(23, 184, 144, 0.20);
    }

}

/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {

    .page-enter,
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;

        transform: none;

        animation: none;

        transition: none;
    }

}

/* =========================================================
   Nosotros - Fundador
========================================================= */

@keyframes founderNodePulse {

    0%,
    100% {
        opacity:
            0.45;

        scale:
            0.82;
    }

    50% {
        opacity:
            1;

        scale:
            1.28;

        box-shadow:
            0 0 18px rgba(23, 184, 144, 0.70),
            0 0 30px rgba(23, 184, 144, 0.18);
    }

}

/* =========================================================
   Nosotros - Fundador / Marco suspendido
========================================================= */

@keyframes founderFloatShadow {

    0%,
    100% {
        opacity: 0.62;

        scale:
            0.82 0.72;
    }

    50% {
        opacity: 1;

        scale:
            1.08 1;
    }

}


@keyframes founderSignalHorizontalLeft {

    0% {
        left:
            -90px;

        opacity:
            0;
    }

    12% {
        opacity:
            1;
    }

    88% {
        opacity:
            1;
    }

    100% {
        left:
            60px;

        opacity:
            0;

        background:
            var(--color-accent-cyan);
    }

}


@keyframes founderSignalHorizontalRight {

    0% {
        right:
            55px;

        opacity:
            0;
    }

    12% {
        opacity:
            1;
    }

    88% {
        opacity:
            1;
    }

    100% {
        right:
            -90px;

        opacity:
            0;

        background:
            var(--color-accent-blue);
    }

}


@keyframes founderSignalVerticalTop {

    0% {
        top:
            -55px;

        opacity:
            0;
    }

    12% {
        opacity:
            1;
    }

    88% {
        opacity:
            1;
    }

    100% {
        top:
            90px;

        opacity:
            0;

        background:
            var(--color-accent-cyan);
    }

}


@keyframes founderSignalVerticalBottom {

    0% {
        bottom:
            -55px;

        opacity:
            0;
    }

    12% {
        opacity:
            1;
    }

    88% {
        opacity:
            1;
    }

    100% {
        bottom:
            90px;

        opacity:
            0;

        background:
            var(--color-primary);
    }

}