html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.12), transparent 26%),
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.10), transparent 22%),
        linear-gradient(180deg, #fbfdf8, #f7f6ed 72%, #f1f8f1);
    color: #1f2937;
}

.font-display {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

::selection {
    background: rgba(250, 204, 21, 0.3);
    color: #0b1110;
}

.site-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -20;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 18%),
        radial-gradient(circle at 80% 30%, rgba(250, 204, 21, 0.08), transparent 16%),
        radial-gradient(circle at 50% 80%, rgba(22, 163, 74, 0.07), transparent 20%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 85%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 85%);
    pointer-events: none;
}

.brand-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 244, 237, 0.96)),
        linear-gradient(135deg, rgba(22, 163, 74, 0.10), rgba(250, 204, 21, 0.06));
    border-color: rgba(250, 204, 21, 0.2);
}

.hero-banner {
    position: relative;
    background:
        linear-gradient(180deg, rgba(240, 244, 239, 0.78), rgba(240, 244, 239, 0.82)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(110, 164, 12, 0.06));
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.66)),
        var(--hero-banner-image, url('/images/banner.png')) center center / cover no-repeat;
    opacity: 0.92;
    pointer-events: none;
}

.hero-banner__overlay {
    position: relative;
    background:
        linear-gradient(90deg, rgba(245, 247, 244, 0.84) 0%, rgba(245, 247, 244, 0.84) 45%, rgba(245, 247, 244, 0.58) 65%, rgba(245, 247, 244, 0.42) 100%);
}

.hero-banner > *,
.hero-banner__overlay > * {
    position: relative;
}

.hero-cta-card {
    background:
        radial-gradient(circle at top center, rgba(163, 230, 53, 0.18), transparent 40%),
        linear-gradient(180deg, rgba(108, 161, 11, 0.96), rgba(88, 141, 8, 0.98));
}

.nav-shell {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav-links {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.whatsapp-float {
    background:
        radial-gradient(circle at top, rgba(163, 230, 53, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(22, 130, 55, 0.98), rgba(20, 104, 45, 0.98));
    box-shadow:
        0 22px 45px -22px rgba(22, 101, 52, 0.65),
        0 8px 18px -12px rgba(15, 23, 42, 0.25);
}

.whatsapp-float:hover {
    background:
        radial-gradient(circle at top, rgba(163, 230, 53, 0.18), transparent 46%),
        linear-gradient(180deg, rgba(20, 120, 48, 0.98), rgba(18, 91, 40, 0.98));
}

.reveal {
    animation: fade-up 0.8s ease-out both;
}

.plan-card {
    position: relative;
    overflow: hidden;
}

.plan-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.1), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}

.plan-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at top left, rgba(22, 163, 74, 0.16), transparent 42%),
        radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.14), transparent 36%);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}

.plan-card:hover::before,
.plan-card:hover::after {
    opacity: 1;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@media (max-width: 767px) {
    .hero-banner::before {
        background-position: 62% center;
    }

    .hero-banner__overlay {
        background: linear-gradient(180deg, rgba(245, 247, 244, 0.88), rgba(245, 247, 244, 0.78));
    }
}