/* Follow the device setting in CSS, including changes while the page is open. */
:root { color-scheme: dark; }
.payment-guarantee-wrap { width: 480px; max-width: 100%; }
.payment-guarantee {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 26px;
    border: 1px solid rgba(74, 222, 128, .24);
    border-radius: 24px;
    background: rgba(4, 20, 15, .78);
    box-shadow: 0 8px 32px rgba(16, 185, 129, .12), inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.payment-guarantee-icon { flex: 0 0 38px; font-size: 36px; line-height: 1; color: #4ade80; text-align: center; }
.payment-guarantee-copy { flex: 1; min-width: 0; display: grid; gap: 4px; text-align: center; }
.payment-guarantee-title { margin: 0; color: #d7e7df; font-size: 18px; line-height: 1.7; font-weight: 600; text-wrap: balance; }
.payment-guarantee-title strong { color: #f4fff8; font-weight: 800; }
.payment-guarantee-title > span, .payment-guarantee-title > strong { display: inline; }
.payment-guarantee-caption { margin: 0; color: #b8cfc2; font-size: 14px; line-height: 1.7; font-weight: 600; }
.payment-guarantee-reassurance { white-space: nowrap; }
@media (min-width: 481px) {
    .payment-guarantee-title { white-space: nowrap; text-wrap: nowrap; }
    .payment-guarantee-caption { white-space: nowrap; }
}
@media (max-width: 480px) {
    .payment-guarantee-wrap { width: 100%; max-width: 400px; }
    .payment-guarantee { gap: 10px; padding: 14px 12px; border-radius: 20px; }
    .payment-guarantee-icon { flex-basis: 30px; font-size: 30px; }
    .payment-guarantee-title { font-size: clamp(12px, 3.6vw, 16px); }
    .payment-guarantee-caption { font-size: clamp(11px, 3.1vw, 14px); }
}
@media (prefers-color-scheme: light) {
    .payment-guarantee { background: rgba(242, 253, 247, .88); border-color: rgba(22, 163, 74, .22); box-shadow: 0 8px 28px rgba(22, 101, 52, .07); }
    .payment-guarantee-icon { color: #168449; }
    .payment-guarantee-title { color: #3a5b49; }
    .payment-guarantee-title strong { color: #173c28; }
    .payment-guarantee-caption { color: #496b57; }
}
.nexxa-site .nexxa-service-icon:has(img:not([hidden])) { background: transparent; }

/* A static backdrop lets glass surfaces reuse the same underlying artwork. */
.nexxa-site .site-backdrop { overflow: hidden; contain: paint; }
.nexxa-site .orb { animation: none; }
.nexxa-site .nexxa-service { transition: transform .25s ease, border-color .25s ease; }

/* Light appearance uses the dark theme's layout, typography and interaction rules.
   Only paint colors change here; component dimensions and effects stay shared. */
@media (prefers-color-scheme: light) {
    :root { color-scheme: light; }
    body.nexxa-site { color: #18213a; background-color: #f0eff7; }
    .nexxa-site .site-backdrop { background-color: #f0eff7; }
    .nexxa-site .orb { opacity: .24; }
    .nexxa-site .bg-grid {
        background-image: linear-gradient(to right, rgba(24,33,58,.05) 1px, transparent 1px),
                          linear-gradient(to bottom, rgba(24,33,58,.05) 1px, transparent 1px);
    }
    .nexxa-site .glass-nav { background: rgba(246,247,252,.4); }
    .nexxa-site .glass-panel {
        background: rgba(255,255,255,.4);
        border-color: rgba(24,33,58,.05);
        box-shadow: 0 8px 32px 0 rgba(24,33,58,.12);
    }

    /* Keep the same color families, with darker ink on the light surfaces. */
    .nexxa-site [class~="text-white"] { color: #18213a; }
    .nexxa-site [class~="text-gray-300"] { color: #43516a; }
    .nexxa-site [class~="text-gray-400"],
    .nexxa-site [class~="text-gray-500"] { color: #526078; }
    .nexxa-site [class~="text-violet-300"],
    .nexxa-site [class~="text-violet-400"] { color: #6639ad; }
    .nexxa-site [class~="text-fuchsia-400"] { color: #a12b97; }
    .nexxa-site [class~="text-cyan-400"] { color: #086c83; }
    .nexxa-site [class~="text-yellow-400"] { color: #90600b; }
    .nexxa-site [class~="text-green-400"] { color: #137348; }
    .nexxa-site [class~="text-red-500"] { color: #b8324d; }
    .nexxa-site [class~="bg-white/5"] { background-color: rgba(24,33,58,.05); }
    .nexxa-site [class~="border-white/10"] { border-color: rgba(24,33,58,.1); }
    .nexxa-site [class~="border-white/5"] { border-color: rgba(24,33,58,.05); }
    .nexxa-site [class~="border-black"] { border-color: #ffffff; }
    .nexxa-site [class~="bg-gray-800"] { background-color: #e2e6ef; }
    .nexxa-site [class~="bg-black"],
    .nexxa-site [class~="bg-[#0a0a0a]"] { background-color: #ffffff; }
    .nexxa-site [class~="bg-black/80"],
    .nexxa-site [class~="bg-[#0a0a0a]/80"] { background-color: rgba(255,255,255,.8); }
    .nexxa-site [class~="bg-black/50"] { background-color: rgba(255,255,255,.5); }
    .nexxa-site .nav-btn [class~="text-white"],
    .nexxa-site .comparison-pro .ph-crown,
    .nexxa-site .hero-social-proof .bg-gradient-to-br { color: #ffffff; }

    .nexxa-site .brand-wordmark { background-image: linear-gradient(to right, #18213a, rgba(24,33,58,.7)); }
    .nexxa-site .hero-title .bg-clip-text { background-image: linear-gradient(to right, #6639ad, #a12b97, #086c83); }
    .nexxa-site #testimonials .bg-clip-text { background-image: linear-gradient(to right, #a12b97, #be185d); }
    .nexxa-site #products .bg-clip-text { background-image: linear-gradient(to right, #086c83, #1d4ed8); }
    .nexxa-site .bg-clip-text[class~="from-yellow-400"] { background-image: linear-gradient(to right, #90600b, #c2410c); }
    .nexxa-site .comparison-pro h3 { background-image: linear-gradient(to right, #90600b, #c2410c); }
    .nexxa-site #faq .bg-clip-text { background-image: linear-gradient(to right, #1d4ed8, #7e22ce); }
    .nexxa-site .comparison-ambient { background-image: linear-gradient(to bottom right, rgba(254,240,138,.4), #ffffff, rgba(254,215,170,.4)); }
    .nexxa-site .closing-ambient { background-image: linear-gradient(to right, #ddd6fe, #f5d0fe, #c7d2fe); }

    /* Transparent white glass lets the vertical color layer show through.
       The ambient glow is a separate layer; all component dimensions stay shared. */
    .nexxa-site .nexxa-service {
        --service-heading-ink: var(--day-accent, #6639ad);
        color: #18213a;
        background: var(--card-edge, linear-gradient(to bottom,
            color-mix(in srgb, var(--day-tint, var(--service-color)) 30%, transparent),
            color-mix(in srgb, var(--day-tint, var(--service-color)) 10%, transparent)));
        box-shadow: 0 14px 30px -18px rgba(37, 30, 75, .32),
                    0 3px 8px -4px rgba(37, 30, 75, .18),
                    var(--card-shadow, 0 0 0 transparent);
    }
    .nexxa-site .nexxa-service-body {
        background: var(--day-glass-face, linear-gradient(to bottom,
            rgba(255, 255, 255, .48), rgba(255, 255, 255, .70)));
        border-color: rgba(255, 255, 255, .56);
        box-shadow: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #ffffff38;
    }
    .nexxa-site .nexxa-service-body:before {
        width: var(--day-glow-width, 128px);
        height: var(--day-glow-height, 128px);
        background: var(--day-glow-paint, var(--day-tint, var(--service-color)));
        opacity: var(--day-glow-opacity, .22);
        filter: blur(var(--day-glow-blur, 50px));
    }
    .nexxa-site .nexxa-service h3 {
        color: var(--day-title-ink, var(--card-heading-color, inherit));
    }
    /* Keyboard, mouse and touch select the same glass and glow layers. */
    .nexxa-site .nexxa-service:is(:focus-visible, :has(.nexxa-order:focus-visible)) {
            --card-edge: linear-gradient(to bottom,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 74%, transparent),
                color-mix(in srgb, var(--day-tint, var(--service-color)) 35%, transparent) 50%,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 8%, transparent));
            --card-shadow: 0 16px 32px -16px color-mix(in srgb, var(--day-tint, var(--service-color)) 55%, transparent);
            --day-glass-face: linear-gradient(to bottom,
                rgba(255, 255, 255, .42), rgba(255, 255, 255, .54) 50%, rgba(255, 255, 255, .84));
            --day-glow-paint: linear-gradient(to bottom,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 40%, transparent),
                color-mix(in srgb, var(--day-tint, var(--service-color)) 10%, transparent) 50%, transparent);
            --day-glow-width: 100%;
            --day-glow-height: 65%;
            --day-glow-opacity: .55;
            --day-glow-blur: 32px;
            --day-title-ink: color-mix(in srgb, var(--day-accent, #6639ad) 58%, #000000);
            --day-description-ink: #18213a;
            --day-price-ink: color-mix(in srgb,
                var(--day-price-accent, color-mix(in srgb, var(--price-color, var(--service-color)) 35%, #18213a)) 78%,
                #000000);
    }
    @media (hover: hover) and (pointer: fine) and (min-width: 768px) {
        .nexxa-site .nexxa-service:hover {
            --card-edge: linear-gradient(to bottom,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 74%, transparent),
                color-mix(in srgb, var(--day-tint, var(--service-color)) 35%, transparent) 50%,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 8%, transparent));
            --card-shadow: 0 16px 32px -16px color-mix(in srgb, var(--day-tint, var(--service-color)) 55%, transparent);
            --day-glass-face: linear-gradient(to bottom,
                rgba(255, 255, 255, .42), rgba(255, 255, 255, .54) 50%, rgba(255, 255, 255, .84));
            --day-glow-paint: linear-gradient(to bottom,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 40%, transparent),
                color-mix(in srgb, var(--day-tint, var(--service-color)) 10%, transparent) 50%, transparent);
            --day-glow-width: 100%;
            --day-glow-height: 65%;
            --day-glow-opacity: .55;
            --day-glow-blur: 32px;
            --day-title-ink: color-mix(in srgb, var(--day-accent, #6639ad) 58%, #000000);
            --day-description-ink: #18213a;
            --day-price-ink: color-mix(in srgb,
                var(--day-price-accent, color-mix(in srgb, var(--price-color, var(--service-color)) 35%, #18213a)) 78%,
                #000000);
        }
    }
    @media (hover: none), (pointer: coarse), (max-width: 767px) {
        .nexxa-site .nexxa-service.is-scroll-active {
            --card-edge: linear-gradient(to bottom,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 74%, transparent),
                color-mix(in srgb, var(--day-tint, var(--service-color)) 35%, transparent) 50%,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 8%, transparent));
            --card-shadow: 0 16px 32px -16px color-mix(in srgb, var(--day-tint, var(--service-color)) 55%, transparent);
            --day-glass-face: linear-gradient(to bottom,
                rgba(255, 255, 255, .42), rgba(255, 255, 255, .54) 50%, rgba(255, 255, 255, .84));
            --day-glow-paint: linear-gradient(to bottom,
                color-mix(in srgb, var(--day-tint, var(--service-color)) 40%, transparent),
                color-mix(in srgb, var(--day-tint, var(--service-color)) 10%, transparent) 50%, transparent);
            --day-glow-width: 100%;
            --day-glow-height: 65%;
            --day-glow-opacity: .55;
            --day-glow-blur: 32px;
            --day-title-ink: color-mix(in srgb, var(--day-accent, #6639ad) 58%, #000000);
            --day-description-ink: #18213a;
            --day-price-ink: color-mix(in srgb,
                var(--day-price-accent, color-mix(in srgb, var(--price-color, var(--service-color)) 35%, #18213a)) 78%,
                #000000);
        }
    }
    .nexxa-site .nexxa-badge {
        color: #334155;
        background: #ffffffbd;
        border-color: color-mix(in srgb, var(--day-tint, var(--service-color)) 22%, #e2e8f0);
    }
    .nexxa-site .nexxa-service .nexxa-description { color: var(--day-description-ink, #44516a); }
    .nexxa-site .nexxa-service-icon { color: var(--day-accent, #6639ad); }
    .nexxa-site .nexxa-service-icon:has(img:not([hidden])) { background: var(--day-logo-bg, #f1f5f9); }
    .nexxa-site .nexxa-price { color: var(--day-price-ink, var(--day-price-accent, color-mix(in srgb, var(--price-color, var(--service-color)) 35%, #18213a))); }
    .nexxa-site .nexxa-price .nx-card-price-duration { color: var(--day-description-ink, #44516a); }
    .nexxa-site .nexxa-empty { color: #43516a; border-color: #18213a1a; }
    .nexxa-site .nexxa-search-field { background: rgba(255,255,255,.8); border-color: #6639ad40; box-shadow: 0 8px 28px #18213a0a; }
    .nexxa-site .nexxa-search-field:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px #7c3aed1f, 0 8px 28px #18213a0a; }
    .nexxa-site .nexxa-search input { color: #18213a; }
    .nexxa-site .nexxa-search input::placeholder,
    .nexxa-site .nexxa-search-status { color: #526078; }
    .nexxa-site .nexxa-search-icon, .nexxa-site .nexxa-search-clear { color: #6639ad; }
    .nexxa-site .nexxa-search-clear { background: #6639ad0f; }
    .nexxa-site .nexxa-search-clear:hover { background: #6639ad1f; }
    .nexxa-site .nexxa-search-clear:focus-visible { outline-color: #7c3aed; }
    .nexxa-site .nexxa-search-empty { color: #43516a; border-color: #18213a1a; }
}

/* Floating WhatsApp contact */
.nexxa-site .nexxa-whatsapp-float {
    position: fixed;
    right: max(24px, env(safe-area-inset-right, 0px));
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 1px solid #ffffffb3;
    border-radius: 50%;
    background: linear-gradient(145deg, #20bf65, #078341);
    color: #ffffff;
    box-shadow: 0 8px 24px #04783e4d, 0 0 0 4px #ffffff24, inset 0 2px 3px #ffffff66;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.nexxa-site .nexxa-whatsapp-float svg { display: block; width: 38px; height: 38px; fill: currentColor; }
.nexxa-site .nexxa-whatsapp-float:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
    box-shadow: 0 0 0 8px #087c40, 0 8px 24px #04783e4d;
}
@media (hover: hover) and (pointer: fine) {
    .nexxa-site .nexxa-whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 12px 30px #04783e66, 0 0 0 4px #ffffff40, inset 0 2px 3px #ffffff80; }
}
.nexxa-site footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 767px) {
    .nexxa-site .nexxa-whatsapp-float {
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: max(18px, env(safe-area-inset-bottom, 0px));
        width: 56px;
        height: 56px;
    }
    .nexxa-site .nexxa-whatsapp-float svg { width: 35px; height: 35px; }
}
@media (prefers-reduced-motion: reduce) {
    .nexxa-site .nexxa-whatsapp-float { transition: none; }
    .nexxa-site .nexxa-whatsapp-float:hover { transform: none; }
}
/* /Floating WhatsApp contact */

/* Touch scrolling keeps the glass highlights without animating large shadows. */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
    .nexxa-site .nexxa-service {
        transform: none;
        transition: none;
    }
    .nexxa-site .glass-nav {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .nexxa-site .nexxa-service-body {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    /* Secondary surfaces retain their transparent tint and glass borders. */
    .nexxa-site .glass-panel,
    .nexxa-site .faq-item,
    .nexxa-site main [class*="backdrop-blur"],
    .nexxa-site footer {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nexxa-site .animate-gradient-x,
    .nexxa-site .animate-bounce-slow,
    .nexxa-site .animate-pulse-fast {
        animation: none;
    }

    /* Keep the hero's desktop motion on touch screens. Other surfaces retain
       their scrolling optimizations, and reduced-motion stays fully respected. */
    @media (prefers-reduced-motion: no-preference) {
        .nexxa-site .hero-title .animate-gradient-x {
            animation: textShine 3s linear infinite;
        }
        .nexxa-site .hero-eyebrow.animate-bounce-slow {
            animation: bounceSlow 3s ease-in-out infinite;
        }
        .nexxa-site .hero-section .mega-btn > .animate-pulse-fast {
            animation: pulseFast 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .nexxa-site .nexxa-service { transition: none; }
    .nexxa-site .animate-gradient-x,
    .nexxa-site .animate-bounce-slow,
    .nexxa-site .animate-pulse-fast { animation: none; }
}