.shell {
        width: 90%;
        max-width: 420px;
        margin: 0 auto;
        padding: 0 16px;
    }

    html {
        background-color: black;
    }

    body {
        font-family: Arial, sans-serif;
        background-color: #000;
        display: flex;
        justify-content: center;
        flex-direction: column;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #333;
        text-align: center;
        min-height: 100dvh;
    }

    @media (max-width: 768px) {
        body {
            background-image: url('#');
        }
    }

    .title1 {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 5px;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 2px;
        display: inline-block;
        text-align: center;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        font-family: 'Arial Black', sans-serif;
        background: linear-gradient(90deg, #d9b35a, #d39b17);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shine 3s infinite;
        position: relative;
        overflow: hidden;
        transition: transform .3s;
    }

    .description1 {
        color: #ffffff;
        animation: shine 3s infinite;
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .super-metodo-logo {
        width: 250px;
        height: auto;
        display: block;
        margin: 2rem auto 1rem;
    }

    .acessar-super-metodo {
        display: inline-block;
        padding: 1rem 0;
        font-size: 1.2rem;
        color: #fff;
        background-color: #d39b17;
        border-radius: .7rem;
        text-decoration: none;
        font-weight: bold;
        box-shadow: 0 6px #b8860b, 0 4px 15px rgba(0, 0, 0, .3);
        transition: transform .2s;
        width: 100%;
        max-width: 420px;
        animation: bounce 4.5s infinite;
    }

    .acessar-super-metodo:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px #a27300, 0 6px 20px rgba(0, 0, 0, .4);
    }

    @keyframes bounce {

        0%,
        100% {
            transform: translateY(0);
            animation-timing-function: cubic-bezier(.8, 0, 1, 1)
        }

        50% {
            transform: translateY(-10px);
            animation-timing-function: cubic-bezier(0, 0, .2, 1)
        }
    }

    .prova-social {
        width: 100%;
        max-width: 420px;
        height: auto;
        display: block;
        margin: 2rem auto 1rem;
        border-radius: 1rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
    }

    .vsl-video-wrapper {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .vsl-player {
        position: relative;
        width: 100%;
        max-width: 420px;
        border-radius: 1rem;
        overflow: hidden;
        background: #000;
        box-shadow: 0 12px 35px rgba(0, 0, 0, .45);
        border: 2px solid #d39b17;
        aspect-ratio: 16 / 9;
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .vsl-player.is-engaged {
        transform: translateY(-12px) scale(.985);
        box-shadow: 0 18px 45px rgba(0, 0, 0, .55);
    }

    .vsl-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: pointer;
    }

    .vsl-basic-controls {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: .75rem;
        align-items: center;
        padding: .4rem .6rem;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%);
        border-radius: .6rem;
    }

    .vsl-btn {
        background: rgba(0, 0, 0, .55);
        border: 1px solid rgba(255, 255, 255, .12);
        color: #fff;
        cursor: pointer;
        padding: .35rem .5rem;
        line-height: 1;
        border-radius: .5rem;
    }

    .vsl-btn:hover {
        background: rgba(0, 0, 0, .75)
    }

    .vsl-btn i {
        font-size: 1rem
    }

    .vsl-progress {
        position: relative;
        height: 6px;
        border-radius: 999px;
        cursor: pointer;
        background: rgba(255, 255, 255, .18);
        overflow: hidden
    }

    .vsl-buffered,
    .vsl-played {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 999px
    }

    .vsl-buffered {
        background: rgba(255, 255, 255, .35);
        width: 0%
    }

    .vsl-played {
        background: #d39b17;
        width: 0%
    }

    @media (max-width:520px) {
        .vsl-basic-controls {
            left: 8px;
            right: 8px;
            bottom: 8px;
            padding: .35rem .5rem;
            gap: .5rem
        }

        .vsl-progress {
            height: 5px
        }
    }

    .vsl-center-play {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: #d39b17;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        transition: transform .15s ease, opacity .2s ease;
    }

    .vsl-center-play:hover {
        transform: translate(-50%, -50%) scale(1.04);
    }

    .vsl-center-play::after {
        content: "";
        border-style: solid;
        border-width: 8px 0 8px 16px;
        border-color: transparent transparent transparent #ffffff;
        margin-left: 4px;
    }

    .vsl-center-play::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid #d39b17;
        animation: vsl-pulse 1.6s ease-out infinite;
    }

    @keyframes vsl-pulse {
        0% {
            transform: scale(.9);
            opacity: .9
        }

        70% {
            transform: scale(1.25);
            opacity: .1
        }

        100% {
            transform: scale(1.35);
            opacity: 0
        }
    }

    .vsl-center-play.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    @media (prefers-reduced-motion:reduce) {
        .vsl-center-play::before {
            animation: none
        }
    }

    footer {
        color: #fff;
        text-align: center;
        padding: 10px 0 2rem;
        width: 100%;
        font-size: .9rem;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }