/* ==========================
   CTA — FUTURISTIC EXPERIENCE
========================== */

.cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 8rem 0;

     background-image:
        linear-gradient(
            180deg,
            #050a1b 0%,
            rgba(5, 10, 27, .12) 25%,
            rgba(5, 10, 27, .15) 70%,
            #050a1b 100%
        ),
        url("../../assets/images/cta-bg.png");

    /* Agregaremos la imagen de fondo acá */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cta-scene {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 620px;
}

/* Panel de cristal */
.cta-box {
    position: relative;
    z-index: 2;

    width: min(100%, 1000px);
    padding: 5rem 3.5rem;

    text-align: center;
    border-radius: 30px;

    background: linear-gradient(
        135deg,
        rgba(8, 23, 62, .83),
        rgba(3, 11, 33, .91)
    );

    border: 1px solid rgba(34, 184, 255, .85);

    box-shadow:
        0 0 18px rgba(0, 170, 255, .28),
        0 0 65px rgba(0, 110, 255, .14),
        inset 0 0 32px rgba(0, 140, 255, .06);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Resplandor del borde */
.cta-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1px solid rgba(0, 225, 255, .38);
    box-shadow: 0 0 24px rgba(0, 195, 255, .28);
    pointer-events: none;
}

.cta-box > * {
    position: relative;
    z-index: 1;
}

.cta-line {
    display: block;
    width: 105px;
    height: 2px;
    margin: 1.5rem auto 1.7rem;

    background: #00d9ff;
    box-shadow: 0 0 15px rgba(0, 217, 255, .8);
}

.cta-box .section-title {
    max-width: 850px;
    margin: 0 auto;

    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.12;
}

.cta-gradient {
    display: block;

    background: linear-gradient(
        90deg,
        #338bff,
        #00e0ee
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-box .section-description {
    max-width: 690px;
    margin: 1.7rem auto 0;
    line-height: 1.8;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.cta-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;

    min-height: 58px;
    padding: 0 1.7rem;

    border-radius: 999px;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.cta-buttons .btn svg {
    width: 19px;
    height: 19px;
}

.cta-buttons .btn-primary {
    box-shadow: 0 0 25px rgba(0, 180, 255, .4);
}

.cta-buttons .btn:hover {
    transform: translateY(-4px);
}

/* Tarjetas flotantes */
.cta-float {
    position: absolute;
    z-index: 3;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 130px;
    height: 110px;

    border-radius: 22px;

    background: rgba(6, 23, 61, .78);
    border: 1px solid rgba(38, 154, 255, .55);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .3),
        0 0 22px rgba(0, 135, 255, .12);

    animation: ctaFloating 6s ease-in-out infinite;
}

.cta-float svg {
    width: 48px;
    height: 48px;
    stroke: #19baff;
    stroke-width: 1.8;
}

.cta-float-code {
    top: 9%;
    left: -3%;
    transform: rotate(12deg);
}

.cta-float-image {
    bottom: 13%;
    left: -7%;
    animation-delay: -2s;
}

.cta-float-chart {
    top: 12%;
    right: -3%;
    animation-delay: -1s;
}

.cta-float-browser {
    bottom: 15%;
    right: -7%;
    animation-delay: -3s;
}

@keyframes ctaFloating {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .cta-float {
        width: 85px;
        height: 75px;
    }

    .cta-float svg {
        width: 32px;
        height: 32px;
    }

    .cta-float-code,
    .cta-float-image {
        left: 0;
    }

    .cta-float-chart,
    .cta-float-browser {
        right: 0;
    }
}

@media (max-width: 768px) {
    .cta {
        padding: 5rem 0;
    }

    .cta-scene {
        min-height: auto;
    }

    .cta-box {
        padding: 4rem 1.5rem;
        border-radius: 24px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    .cta-float {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-float {
        animation: none;
    }
}

/* =====================================
   CTA — RETOQUES VISUALES FINALES
===================================== */

/* 1. Borde luminoso del panel */
.cta-box {
    border: 1px solid rgba(0, 210, 255, .85);

    box-shadow:
        0 0 12px rgba(0, 195, 255, .30),
        0 0 38px rgba(0, 135, 255, .18),
        0 20px 65px rgba(0, 0, 0, .45),
        inset 0 0 25px rgba(0, 145, 255, .06);
}

/* 2. Tarjetas con más profundidad */
.cta-float {
    box-shadow:
        0 18px 35px rgba(0, 0, 0, .55),
        0 0 20px rgba(0, 170, 255, .20),
        inset 0 1px 0 rgba(130, 220, 255, .15);

    transition:
        box-shadow .35s ease,
        border-color .35s ease;
}

.cta-float:hover {
    border-color: rgba(0, 225, 255, .95);

    box-shadow:
        0 25px 45px rgba(0, 0, 0, .55),
        0 0 32px rgba(0, 195, 255, .40);
}

/* 3. Resplandor debajo del panel */
.cta-scene::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: 2%;

    width: 65%;
    height: 85px;

    transform: translateX(-50%);

    background: radial-gradient(
        ellipse,
        rgba(0, 190, 255, .48) 0%,
        rgba(0, 105, 255, .18) 45%,
        transparent 75%
    );

    filter: blur(30px);
    pointer-events: none;
    z-index: 1;
}

/* Ajustes para celulares */
@media (max-width: 768px) {
    .cta-scene::after {
        width: 90%;
        height: 55px;
        bottom: 0;
        opacity: .6;
    }
}


/* ==========================================
   CNA — CTA BREATHING GLOW
========================================== */

@media (prefers-reduced-motion: no-preference) {

    .cta-box::before {
        animation: ctaGlowBreathing 4s ease-in-out infinite;
    }

}

@keyframes ctaGlowBreathing {

    0%, 100% {
        opacity: 0.55;

        box-shadow:
            0 0 15px rgba(0, 195, 255, 0.20),
            0 0 30px rgba(0, 135, 255, 0.10);
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 28px rgba(0, 210, 255, 0.45),
            0 0 55px rgba(0, 135, 255, 0.22);
    }

}