:root {
            --bg: #000000;
            --ink: #231f20;
            --violet-1: #741094;
            --violet-2: #c503fb;
            --violet-3: #4b74b2;
            --border: #1e5f74;
            --green: #0cad60;
            --yellow: #ffde59;
            --red: #f53040;
            --muted: #6e6e6e;
        }

        /* RESET & BASE */
        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: Ubuntu, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            background: var(--bg);
            color: var(--ink)
        }

        img {
            max-width: 100%;
            height: auto;
            display: block
        }

        s {
            color: var(--red)
        }

        small {
            color: #555
        }

        /* LAYOUT */
        .ofertas-container {
            display: flex;
            gap: 18px;
            justify-content: center;
            align-items: stretch;
            padding: 18px;
            flex-wrap: wrap;
        }

        /* CARD BASE */
        .card {
            position: relative;
            width: 100%;
            max-width: 360px;
            background: #fff;
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 14px 14px 16px;
            text-align: center;
            box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
        }

        /* SIDE CARDS HEADER (faixa preta/azul no topo) */
        .card--side::before {
            display: flex;
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 32px;
            background: linear-gradient(to right, #1a1a2e, #16213e);
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        .card__kicker {
            top: -14px;
            position: relative;
            z-index: 1;
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            letter-spacing: .4px;
            text-transform: capitalize;
        }

        .card__kicker-less {
            top: -14px;
            position: relative;
            z-index: 1;
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            letter-spacing: .4px;
            text-transform: capitalize;
        }

        .card__kickermain {
            position: relative;
            z-index: 1;
            background: linear-gradient(to right, #0f3460, #16213e);
            text-shadow: 0em 0.1em 0.1em rgb(0 0 0);
            border-radius: 14px 14px 0 0;
            padding: 8px;
            font-weight: 800;
            font-size: 23px;
            color: #7ED957;
            letter-spacing: .4px;
            text-transform: capitalize;
        }

        /* CENTER CARD (BEST VALUE) */
        .card--best {
            background: linear-gradient(135deg, #0a1628, #0d2847, #0a4d68);
            border: 3px solid #05bfdb;
            padding: 0 0 14px;
            box-shadow: 0 0 30px rgba(5, 191, 219, 0.5);
        }

        .card--best .card__inner {
            background: transparent;
            padding: 14px 16px 18px;
            border-radius: 15px;
            color: #fff;
        }

        /* TITLES */
        .h3 {
            margin: 10px 0 4px;
            font-size: 35px;
            font-weight: 900;
            letter-spacing: .5px;
            color: #000;
        }

        .h3--xl {
            font-size: 44px;
            line-height: 1.05;
            text-transform: uppercase;
            text-shadow: 0 .08em .08em rgba(0, 0, 0, .45)
        }

        .sub {
            font-size: 20px;
            color: #2e2e2e;
            margin-top: 2px;
            font-weight: 400;
            text-align: center;
        }

        .sub-main {
            font-size: 24px;
            color: #2e2e2e;
            margin-top: 2px;
            text-shadow: .08em .08em .08em rgba(0, 0, 0, .6);
        }

        /* PRODUCT IMAGE */
        .pote {
            width: 72%;
            margin: 14px auto 6px
        }

        /* PRICES */
        .was {
            font-weight: 900;
            font-size: 28px;
            color: var(--red);
            margin: 6px 0;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: rgba(0, 0, 0, 1);
            stroke: rgba(0, 0, 0, 1);

        }

        .now {
            font-weight: 900;
            margin: 0;
            text-shadow: .08em .08em .08em rgba(0, 0, 0, .6);
            -webkit-text-stroke: 2px #000;
        }

        .now--yellow {
            font-size: 48px;
            color: var(--yellow);

        }

        .now--yellow-small {
            font-size: 30px;
            color: var(--yellow);

        }

        .now--green {
            font-size: 64px;
            color: var(--green);
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: rgba(255, 255, 255, 1);

        }

        .now--green-small {
            font-size: 30px;
            color: var(--green);
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: rgba(255, 255, 255, 1);

        }

        .ship {
            font-weight: 900;
            margin: 8px 0 10px;
            letter-spacing: .3px;
            color: #000;
        }

        /* ícone de check nas bullets */
        .bullets {
            list-style: none;
            padding: 0;
            margin: 8px auto 10px;
            width: 88%;
            text-align: left
        }

        .bullets li {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 7px 0;
            font-weight: 800;
            color: #000;
        }

        .check {
            font-size: 16px;
            line-height: 1;
            flex: 0 0 18px;
            display: inline-block
        }

        .check--yellow {
            color: #ffd700;
            filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35))
        }

        .check--blue {
            color: #2a5ba5
        }

        .check--black {
            color: #000
        }

        .check--green {
            color: #00bf63
        }

        /* BUTTONS */
        .btn {
            display: block;
            text-decoration: none;
            text-align: center;
            font-size: 25px;
            font-weight: 900;
            padding: 14px 18px;
            border-radius: 8px;
            margin: 12px auto 8px;
            box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
            color: #000;
            background: linear-gradient(#dadada 50%, #e0e0e0 51%);
        }

        .btn--green {
            background: linear-gradient(#00bf63 50%, #04ac5b 51%);
            color: #fff;
            border: 2px solid #04ac5b;
        }

        .btn:active {
            transform: translateY(1px)
        }

        /* FOOT (cards) */
        .cards-pay {
            width: 80%;
            display: flex;
            gap: 8px;
            justify-content: center;
            margin: 10px auto;
        }

        .pay {
            font-size: 12px;
            font-weight: 700;
            padding: .25em .45em;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff
        }

        .total {
            margin-top: 8px;
            font-weight: 900;
            color: #000;
        }

        .total s {
            color: #000;
            opacity: .8
        }

        /* SPECIFICS - CENTER */
        .card--best .h3--xl {
            color: #00BF63
        }

        /* RESPONSIVE */
        @media (max-width:900px) {
            .card--best {
                order: 1
            }

            .card--left {
                order: 3
            }

            .card--right {
                order: 2
            }

            .mobile {
                display: flex;
            }

            .card {
                max-width: 100%;
            }

            .pote-mobile {
                width: 50%;
            }

            .now--green {
                font-size: 36px;
            }

            .now--green-small {
                font-size: 18px;
            }


            .now--yellow {
                font-size: 28px;
            }

            .now--yellow-small {
                font-size: 18px;
            }


            .h3 {
                font-size: 28px;
            }

            .h3--xl {
                font-size: 32px;
            }

            .pote {
                width: 100%;
            }

            .ship {
                font-size: 15px;
            }

            .bullets li {
                display: flex;
                justify-content: flex-start;
                flex-direction: row;
                align-items: flex-start;
                font-size: 12px;
            }
        }

        /* Animação de "revelação + salto" e depois pausa curta antes de repetir */
        .surprise-bounce {
            display: inline-block;
            transform-origin: center bottom;
            text-shadow: 0 2px 0 #000, 0 0 18px rgba(244, 190, 16, .45);
            animation: surprise-pop 6s cubic-bezier(.34, 1.56, .64, 1) .2s infinite both;
            will-change: transform;
        }

        @keyframes surprise-pop {

            /* aparece de baixo, pequeno e inclinado */
            0% {
                transform: translateY(24px) scale(.6) rotate(-2deg);
                opacity: 0;
            }

            /* “pop” */
            16% {
                transform: translateY(-8px) scale(1.15) rotate(0);
                opacity: 1;
            }

            /* assenta */
            22% {
                transform: translateY(0) scale(1.00);
            }

            /* mini rebote */
            25% {
                transform: translateY(-3px) scale(1.03);
            }

            28% {
                transform: translateY(0) scale(1.00);
            }

            /* fica parado até repetir (pausa longa) */
            100% {
                transform: translateY(0) scale(1.00);
                opacity: 1;
            }
        }

        /* Acessibilidade: se o usuário prefere menos movimento, desativa */
        @media (prefers-reduced-motion: reduce) {
            .surprise-bounce {
                animation: none;
            }
        }

        /* Estilos base para a seção de garantia */
        .guarantee-section {
            background-color: #f4f7f9;
            padding: 60px 20px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: #333;
        }

        .guarantee-container {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        /* Título e subtítulo */
        .guarantee-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1a2a4b;
            margin-bottom: 10px;
            line-height: 1.2;
        }

        .guarantee-title .red-highlight {
            color: #c9302c;
            /* Vermelho mais sóbrio */
        }

        /* Conteúdo do texto */
        .guarantee-text {
            font-size: 1rem;
            line-height: 1.6;
            max-width: 700px;
            margin: 0 auto 30px;
        }

        .guarantee-text p {
            margin-bottom: 20px;
        }

        /* Layout da garantia (imagem e texto) */
        .guarantee-content {
            display: flex;
            align-items: center;
            gap: 40px;
            width: 100%;
        }

        .guarantee-badge {
            flex-shrink: 0;
            width: 200px;
        }

        .guarantee-badge img {
            width: 100%;
            height: auto;
        }

        /* Badges de confiança */
        .trust-badges {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .trust-badges img {
            height: 50px;
            object-fit: contain;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .guarantee-content {
                flex-direction: column;
                gap: 20px;
            }

            .guarantee-badge {
                width: 150px;
            }

            .guarantee-text {
                text-align: center;
            }
        }

        @media (max-width: 576px) {
            .guarantee-title {
                font-size: 2rem;
            }
        }