:root {
    --bg: #13100d;
    --bg-soft: #1d1812;
    --surface: #211a13;
    --text: #f8f0dc;
    --muted: #d6c5a4;
    --gold: #f0b429;
    --gold-strong: #ffcc4d;
    --danger: #ff8c7a;
    --ok: #9adca8;
    --radius: 16px;
    --shadow: 0 12px 38px rgba(0, 0, 0, 0.35);
    --max: 1040px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
}

body {
    font-family: "Nunito Sans", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 0%, #2f2317 0%, rgba(47, 35, 23, 0) 45%),
        radial-gradient(circle at 90% 15%, #3a2a18 0%, rgba(58, 42, 24, 0) 38%),
        linear-gradient(180deg, #14100d 0%, #0f0c0a 100%);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.checkout-status {
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.checkout-status.success {
    background: #11351f;
    color: #b9f6c9;
}

.checkout-status.pending {
    background: #4a330d;
    color: #ffe6a6;
}

.checkout-status.failure {
    background: #471616;
    color: #ffb5b5;
}

.promo-bar {
    background: linear-gradient(90deg, #f0b429, #ffcc4d);
    color: #2a1b07;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.promo-content {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 8px 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(0.84rem, 2.4vw, 0.96rem);
    font-weight: 600;
    line-height: 1.25;
}

.promo-content strong {
    font-weight: 800;
}

.container {
    width: min(var(--max), 92vw);
    margin: 0 auto;
}

.section {
    padding: 52px 0;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-strong);
}

h1,
h2,
h3 {
    font-family: "Poppins", sans-serif;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(1.8rem, 6vw, 3rem);
    margin-bottom: 14px;
}

h2 {
    font-size: clamp(1.45rem, 4.6vw, 2.2rem);
    margin-bottom: 14px;
}

p {
    color: var(--muted);
    font-size: clamp(1rem, 2.5vw, 1.08rem);
}

.hero {
    padding: 20px 0 40px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.brand {
    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--text);
    flex: none;
}

.brand span {
    color: var(--gold);
}

.hero-card {
    display: grid;
    gap: 22px;
    background: linear-gradient(135deg, rgba(31, 24, 17, 0.96), rgba(18, 14, 11, 0.96));
    border: 1px solid rgba(255, 204, 77, 0.2);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.hero-copy {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-copy p {
    font-size: 1.06rem;
}

.hero-media {
    min-height: 280px;
    background-image:
        linear-gradient(15deg, rgba(17, 12, 8, 0.78), rgba(17, 12, 8, 0.2)),
        url("images/hero.webp");
    background-size: cover;
    background-position: center;
}

.cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1e1407;
    background: linear-gradient(180deg, var(--gold-strong), var(--gold));
    box-shadow: 0 8px 22px rgba(240, 180, 41, 0.35);
    transition: transform 0.2s ease, filter 0.2s ease;
}

@media all and (max-width: 520px) {
    .promo-content {
        flex-direction: column;
        gap: 2px;
    }

    .purchase-feed {
        right: 10px;
        bottom: 10px;
        width: min(94vw, 320px);
    }

    .topbar .cta {
        max-width: 170px;
        text-wrap: balance;
    }
}

.cta:hover,
.cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.07);
}

.cta.is-loading {
    opacity: 0.85;
    pointer-events: none;
}

.checkout-feedback {
    color: #ffb8ab;
    font-size: 0.92rem;
    margin-top: -4px;
}

.pain-grid,
.solution-grid {
    display: grid;
    gap: 16px;
}

.card {
    background: var(--surface);
    border: 1px solid rgba(255, 204, 77, 0.16);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.pain-list,
.receive-list {
    list-style: none;
    display: grid;
    gap: 10px;
}

.pain-list li,
.receive-list li {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.pain-list li {
    color: #ffd4cc;
}

.solution-grid .card p strong {
    color: var(--text);
}

.mockup {
    background: linear-gradient(155deg, #352817, #21170d);
    border: 1px solid rgba(255, 204, 77, 0.24);
    border-radius: 18px;
    padding: 18px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-cover {
    width: min(260px, 80%);
    max-height: 430px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(255, 204, 77, 0.24);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
}

.cta-final {
    background: linear-gradient(150deg, #241a10 0%, #17110c 100%);
    border-top: 1px solid rgba(255, 204, 77, 0.25);
    border-bottom: 1px solid rgba(255, 204, 77, 0.18);
}

#comprar {
    scroll-margin-top: 20px;
}

#comprar:target {
    animation: anchorHighlight 0.9s ease;
}

.cta-wrap {
    display: grid;
    gap: 14px;
    text-align: center;
    justify-items: center;
}

.price {
    font-family: "Poppins", sans-serif;
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    font-weight: 800;
    color: var(--gold-strong);
    line-height: 1;
    display: grid;
    gap: 6px;
}

.old-price {
    font-size: clamp(1rem, 3.4vw, 1.2rem);
    color: #cfb68b;
    text-decoration: line-through;
    font-weight: 700;
}

.new-price {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    color: var(--gold-strong);
    font-weight: 800;
}

.price small {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.trust {
    font-size: 0.94rem;
    color: var(--ok);
}

.footer {
    padding: 22px 0 30px;
    text-align: center;
    color: #b49f79;
    font-size: 0.86rem;
}

.purchase-feed {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 70;
    width: min(92vw, 340px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.purchase-toast {
    background: linear-gradient(150deg, rgba(18, 51, 33, 0.96), rgba(10, 33, 21, 0.96));
    border: 1px solid rgba(120, 225, 157, 0.34);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    padding: 10px 12px;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.purchase-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.purchase-toast.is-leaving {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

.purchase-toast strong {
    display: block;
    color: #e9ffee;
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    line-height: 1.2;
}

.purchase-toast span {
    display: block;
    color: #cbf7d7;
    font-size: 0.86rem;
    margin-top: 2px;
}

.purchase-toast small {
    display: block;
    color: #9fddb4;
    font-size: 0.77rem;
    margin-top: 4px;
}

@media (min-width: 820px) {
    .hero {
        padding-top: 26px;
        padding-bottom: 54px;
    }

    .hero-card {
        grid-template-columns: 1.12fr 1fr;
    }

    .hero-copy {
        padding: 34px;
        justify-content: center;
    }

    .pain-grid {
        grid-template-columns: 1fr 1fr;
    }

    .solution-grid {
        grid-template-columns: 1.2fr 0.9fr;
        align-items: stretch;
    }

    .receive-list {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .hero-card,
    .card,
    .mockup,
    .cta-wrap {
        animation: fadeInUp 0.7s ease both;
    }

    .card:nth-child(2) {
        animation-delay: 0.1s;
    }

    .card:nth-child(3) {
        animation-delay: 0.16s;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes anchorHighlight {
        0% {
            box-shadow: inset 0 0 0 2px rgba(255, 204, 77, 0.45);
            background: linear-gradient(150deg, #2b1f11 0%, #1a130d 100%);
        }

        100% {
            box-shadow: inset 0 0 0 0 rgba(255, 204, 77, 0);
            background: linear-gradient(150deg, #241a10 0%, #17110c 100%);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .purchase-toast {
        transition: none;
    }
}