/* ==========================================================================
   Demonstração Interativa (GetDemo) — Home
   Reaproveita os tokens de marca já usados no site:
   verde #00a443 · lima #b1da00 · grafite #242826
   Fundo claro + reverberação verde/lima + sombra — mesmas características
   que envolviam o vídeo da home.
   ========================================================================== */

.demo-interativa {
    position: relative;
    margin: 100px auto 0;
    max-width: 1240px;
    width: 100%;
}

/* ---- Título + apoio ---------------------------------------------------- */
.demo-interativa__header {
    max-width: 820px;
    width: 100%;
    margin: 0 auto 44px;
    position: relative;
    z-index: 2;
}

.demo-interativa .demo-interativa__title {
    margin-bottom: 18px;
}

.demo-interativa .demo-interativa__subtitle {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    font-size: 1.8em;
    line-height: 1.5em;
    opacity: .9;
}

/* ---- Moldura do iframe -------------------------------------------------- */
.demo-interativa__frame {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.778;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
    z-index: 2;
}

.demo-interativa__frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* ---- Reverberação verde/lima ao redor do iframe ------------------------- */
.demo-interativa::before,
.demo-interativa::after {
    content: '';
    display: block;
    aspect-ratio: 1;
    max-width: 62%;
    width: 100%;
    height: auto;
    border-radius: 50%;
    position: absolute;
    opacity: .15;
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
}

.demo-interativa::before {
    background: radial-gradient(#00a443, #fff);
    left: -10%;
    top: 60px;
}

.demo-interativa::after {
    background: radial-gradient(#b1da00, #fff);
    right: -10%;
    bottom: -40px;
    z-index: -2;
}

/* ---- Breakpoints (espelham os do antigo .container-video) --------------- */
@media (max-width: 1699px) and (min-width: 768px) {
    .demo-interativa {
        margin-top: 80px;
        max-width: 992px;
    }

    .demo-interativa__header {
        margin-bottom: 34px;
    }

    .demo-interativa .demo-interativa__title {
        margin-bottom: 14px;
    }

    .demo-interativa .demo-interativa__subtitle {
        font-size: 1.6em;
    }

    .demo-interativa__frame {
        border-radius: 6px;
        box-shadow: 0 10px 19px rgba(0, 0, 0, .2);
    }

    .demo-interativa::before,
    .demo-interativa::after {
        filter: blur(64px);
    }
}

@media only screen and (max-width: 767px) {
    .demo-interativa {
        margin-top: 45px;
    }

    .demo-interativa__header {
        margin-bottom: 24px;
    }

    .demo-interativa .demo-interativa__subtitle {
        max-width: 340px;
        font-size: 1.6em;
        line-height: 1.4em;
    }

    .demo-interativa__frame {
        border-radius: 8px;
    }

    .demo-interativa::before,
    .demo-interativa::after {
        max-width: 95%;
        filter: blur(50px);
    }

    .demo-interativa::before {
        left: -20%;
        top: 20px;
    }

    .demo-interativa::after {
        right: -20%;
        bottom: -20px;
    }
}